Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Mobile bottom sheet component #13612

Merged
merged 18 commits into from
Feb 1, 2019
Merged

Mobile bottom sheet component #13612

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
18 commits
Select commit Hold shift + click to select a range
fd7c7eb
rnmobile: Implement image settings button using InspectorControls.Slo…
etoledom Jan 30, 2019
abdfd03
rnmobile: Add missing semicolon
etoledom Jan 30, 2019
1a4e35a
rnmobile: Adding bottom-sheet component to mobile
etoledom Jan 30, 2019
4352c7a
rnmobile: Styling bottom-sheet header
etoledom Jan 30, 2019
f132158
rnmobile: Bottom-sheet clean up
etoledom Jan 30, 2019
7bd8a4f
rnmobile: Fix lint issues on bottom-sheet related code.
etoledom Jan 30, 2019
541db3b
rnmobile: Fix small lint issues
etoledom Jan 31, 2019
b8e5dcf
rnmobile: Move inline toolbar button definition out of constant.
etoledom Jan 31, 2019
92e5357
rnmobile: Remove extra white-spaces
etoledom Jan 31, 2019
b7236e0
revert package-lock.json changes
etoledom Jan 31, 2019
4828348
Merge branch 'master' into rnmobile/bottom-sheet-component
etoledom Jan 31, 2019
09582b7
rnmobile: Fix merge issue
etoledom Jan 31, 2019
d335a84
rnmobile: exporting component BottomSheet.Button to be used as bottom…
etoledom Jan 31, 2019
67c2ffc
rnmobile: Adding BottomSheet.Cell component as an extraction for Bott…
etoledom Jan 31, 2019
edcd79b
Fix lint issues
etoledom Jan 31, 2019
fc1043a
Reverting changes to package-lock.json
etoledom Jan 31, 2019
bfd5832
Merge branch 'master' into rnmobile/bottom-sheet-component
etoledom Jan 31, 2019
4d7a80c
Fix merge issues
etoledom Jan 31, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
rnmobile: Bottom-sheet clean up
  • Loading branch information
@etoledom
etoledom committed Jan 30, 2019
commit f132158769a2339389a6327b83297bdc68633396
1 change: 1 addition & 0 deletions packages/block-library/src/image/edit.native.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -176,6 +176,7 @@ export default class ImageEdit extends React.Component {
isVisible={ this.state.showSettings }
title={ __("Image Settings") }
onClose={ onImageSettingsClose }
rightButtonConfig={ { text: __("Done"), color: "#0087be", onPress: onImageSettingsClose } }
>
<TouchableOpacity style={ inspectorStyles.bottomSheetCell } onPress={ () => { } }>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Contributor

@Tug Tug Jan 31, 2019 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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>
	);
}

Copy link
Contributor Author

@etoledom etoledom Jan 31, 2019 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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>

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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 👍

<Text style={ inspectorStyles.bottomSheetCellLabel }>{ __( "Alt Text" ) }</Text>
Expand Down
65 changes: 12 additions & 53 deletions packages/editor/src/components/mobile/bottom-sheet/index.native.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,27 +1,14 @@
/**
* External dependencies
*/
import React from 'react';
import { Switch, Text, TextInput, View } from 'react-native';
import { Text, View } from 'react-native';
import Modal from 'react-native-modal';
import SafeArea from 'react-native-safe-area';

/**
* WordPress dependencies
*/
import { __ } from '@wordpress/i18n';
import { Component } from '@wordpress/element';
import { URLInput } from '@wordpress/editor';
import { prependHTTP } from '@wordpress/url';

import {
create,
insert,
isCollapsed,
applyFormat,
getTextContent,
slice,
} from '@wordpress/rich-text';

/**
* Internal dependencies
Expand All @@ -48,19 +35,11 @@ class BottomSheet extends Component {
SafeArea.removeEventListener( 'safeAreaInsetsForRootViewDidChange', this.onSafeAreaInsetsUpdate );
}

onLeftButtonPressed() {

}

onRightButtonPressed() {

}

headerButton(text, color, handler) {
return(
<Button onClick={ handler }>
<Text style={ { ...styles.buttonText, color: color } }>
{ text }
headerButton( config ) {
return (
<Button onPress={ config.onPress }>
<Text style={ { ...styles.buttonText, color: config.color } }>
{ config.text }
</Text>
</Button>
)
Expand All @@ -74,8 +53,7 @@ class BottomSheet extends Component {
}

render() {
const { isVisible } = this.props;
const { hideLeftButton, hideRightButton } = this.props;
const { isVisible, leftButtonConfig, rightButtonConfig } = this.props;

return (
<Modal
Expand All @@ -93,15 +71,15 @@ class BottomSheet extends Component {
<View style={ styles.dragIndicator } />
<View style={ styles.head }>
<View style={ { flex: 1 } }>
{ hideLeftButton || this.headerButton(__( "Remove" ), "red", this.onLeftButtonPressed) }
{ leftButtonConfig && this.headerButton(leftButtonConfig) }
</View>
<View style={{justifyContent: 'center', flex: 2, alignContent: 'center'}}>
<View style={ styles.titleContainer }>
<Text style={ styles.title }>
{ this.props.title }
</Text>
</View>
<View style={{ flex: 1 }}>
{ hideRightButton || this.headerButton(__("Done"), "#0087be", this.onRightButtonPressed) }
<View style={ { flex: 1 } }>
{ rightButtonConfig && this.headerButton(rightButtonConfig) }
</View>
</View>

Expand All @@ -110,28 +88,9 @@ class BottomSheet extends Component {
<View style={ { flexGrow: 1 } }></View>
<View style={ { height: this.state.safeAreaBottomInset } } />
</View>
</Modal>
</Modal>
);
}
}

export default BottomSheet;

export function TitleValueCell(props) {
const {
title,
value,
onPress,
} = props;

return (
<Button style={{ flexDirection: 'row', alignItems: 'center'}} onPress={ onPress }>
<Text style={ styles.cellLabel }>
{ title }
</Text>
<Text style={ styles.cellValue }>
{ value }
</Text>
</Button>
)
}
76 changes: 4 additions & 72 deletions packages/editor/src/components/mobile/bottom-sheet/styles.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@
.separator {
background-color: $light-gray-400;
height: 1px;
width: 95%;
width: 100%;
margin: auto;
}

Expand Down Expand Up @@ -45,83 +45,15 @@
text-align: center;
}

// Modal

.modal {
margin: 0;
}

.modalHead {
flex-direction: row;
width: 100%;
margin-bottom: 5px;
justify-content: space-between;
align-items: center;
.titleContainer {
justify-content: center;
flex: 2;
align-content: center;
}

.modalContent {
flex: 1;
background-color: $white;
}

.modalTitle {
color: $dark-gray-600;
font-size: 18px;
font-weight: 600;
flex: 1;
margin-bottom: 10px;
}

.modalActionButton {
color: #0087be;
font-size: 17px;
}

// Button

.buttonText {
font-size: 18px;
padding: 5px;
}

// Inline

.inlineInput {
width: 100%;
margin: 0 0;
}

.inlineInputLabel {
color: $dark-gray-600;
font-size: 14px;
font-weight: bold;
}

.inlineInputValue {
font-size: 18px;
align-items: stretch;
padding: 4px;
}

.inlineInputValueSwitch {
padding: 5px;
}

// Cells

.cellLabel {
padding: 10px 10px;
color: $dark-gray-600;
font-size: 16px;
font-weight: bold;
}

.cellValue {
flex-grow: 1;
font-size: 16px;
text-align: right;
align-items: stretch;
align-self: flex-end;
padding: 10px;
}