Mobile bottom sheet component

[etoledom]

Description

This PR introduces a BottomSheet component to be used on mobile. It's a special use-case of the react-native-modal component implementing our design and animations.

It has props for the header's left and right buttons and title, and the onClose action.

It's firstly implemented as the Image Settings interface for the Image block.

To test:

• Checkout the gutenberg-mobile side PR (Bottom sheet component (Image Settings) wordpress-mobile/gutenberg-mobile#529).
• Build and run the example project.
• Select an image block with image.
• Press the settings button (dented wheel) in the inline toolbar.
• Check that the bottom sheet appears.
• Check that the bottom sheet dismiss with when
  • Tapping on the Done button.
  • Tapping on the background.
  • Sliding it down.

[Tug]

This could probably be part of BottomSheet which would have its default style and could accept a prop containerStyle or style to customize it.

[etoledom]

Do you mean, similar to the Button above?
To have a Cell kind-of component exposed from BottomSheet?

[Tug]

I meant more like update the BottomSheet render method to something like:

render() {
	const { isVisible, leftButtonConfig, rightButtonConfig, containerStyle, onContainerPress } = this.props;
 	return (
		<Modal
			....
			<View style={ styles.separator } />
			<TouchableOpacity style={ { ... defaultContainerStyle, ...containerStyle } } onPress={ onContainerPress || noop }>
				{ this.props.children }
			</TouchableOpacity>
			<View style={ { flexGrow: 1 } }></View>
			....
		</Modal>
	);
}

[etoledom]

Right, the problem there is that the buttons or cells are defined by the caller side. And each of those cells will have a TouchableOpacity component. Later on we will add more cells to it:

<BottomSheet
	isVisible={ this.state.showSettings }
	title={ __( 'Image Settings' ) }
	onClose={ onImageSettingsClose }
	rightButtonConfig={ { text: __( 'Done' ), color: '#0087be', onPress: onImageSettingsClose } }
>
	<TouchableOpacity style={ inspectorStyles.bottomSheetCell } onPress={ () => { } }>
		<Text style={ inspectorStyles.bottomSheetCellLabel }>{ __( 'Alt Text' ) }</Text>
		<Text style={ inspectorStyles.bottomSheetCellValue }>{ __( 'None' ) }</Text>
	</TouchableOpacity>
	<TouchableOpacity style={ inspectorStyles.bottomSheetCell } onPress={ () => { } }>
		<Text style={ inspectorStyles.bottomSheetCellLabel }>{ __( 'Size' ) }</Text>
		<Text style={ inspectorStyles.bottomSheetCellValue }>{ __( 'Full Size' ) }</Text>
	</TouchableOpacity>
</BottomSheet>

That's why I thought that maybe extracting the whole cell as a small component would be good:

<TouchableOpacity style={ inspectorStyles.bottomSheetCell } onPress={ () => { } }>
	<Text style={ inspectorStyles.bottomSheetCellLabel }>{ __( 'Size' ) }</Text>
	<Text style={ inspectorStyles.bottomSheetCellValue }>{ __( 'Full Size' ) }</Text>
</TouchableOpacity>

[Tug]

Oh I see, so the TouchableOpacity is for a "cell" I thought it was for the whole content. Yeah makes sense. I'm not sure the concept of a cell needs to be part or BottomSheet but it looks like a nice addition at this point 👍

[etoledom]

Hey @Tug - Thanks for the review!
I implemented the requested changes on Buttons, and my idea about the Cell component so you can check it out.

Now when we need more cells we just do:

<BottomSheet.Cell label={ __( 'Alt Text' ) } value={ __( 'None' ) } onPress={ () => {} } />
<BottomSheet.Cell label={ __( 'Second' ) } value={ __( 'Something else' ) } onPress={ () => {} } />

And it will look like this:

Let me know if you like that.

[etoledom]

@Tug - Another info: We will continue to iterate in the design and implementation of the BottomSheet.

I'm already working on:

• Adding icons to the Cell, and
• Making it possible to show just the label with text centered.
• An option to completely hide the header from the BottomSheet.

All these on a separate PR (based on this one)

[Tug]

LGTM 👍

[etoledom]

Thank you!