diff --git a/packages/block-library/src/image/edit.native.js b/packages/block-library/src/image/edit.native.js index fe3fa7c54d2e1..8ab944d274fe5 100644 --- a/packages/block-library/src/image/edit.native.js +++ b/packages/block-library/src/image/edit.native.js @@ -16,7 +16,7 @@ import { /** * Internal dependencies */ -import { MediaPlaceholder, RichText, BlockControls, InspectorControls } from '@wordpress/editor'; +import { MediaPlaceholder, RichText, BlockControls, InspectorControls, BottomSheet } from '@wordpress/editor'; import { Toolbar, ToolbarButton, Spinner, Dashicon } from '@wordpress/components'; import { __ } from '@wordpress/i18n'; import ImageSize from './image-size'; @@ -33,6 +33,7 @@ export default class ImageEdit extends React.Component { super( props ); this.state = { + showSettings: false, progress: 0, isUploadInProgress: false, isUploadFailed: false, @@ -168,7 +169,11 @@ export default class ImageEdit extends React.Component { } const onImageSettingsButtonPressed = () => { + this.setState( { showSettings: true } ); + }; + const onImageSettingsClose = () => { + this.setState( { showSettings: false } ); }; const toolbarEditButton = ( @@ -181,12 +186,21 @@ export default class ImageEdit extends React.Component { ); - const inlineToolbarButtons = ( - + const getInspectorControls = () => ( + + } + > + {} } /> + ); const showSpinner = this.state.isUploadInProgress; @@ -201,7 +215,11 @@ export default class ImageEdit extends React.Component { { toolbarEditButton } - { inlineToolbarButtons } + { ( sizes ) => { @@ -222,6 +240,7 @@ export default class ImageEdit extends React.Component { return ( + { getInspectorControls() } + + + { text } + + + + ); +} diff --git a/packages/editor/src/components/mobile/bottom-sheet/cell.native.js b/packages/editor/src/components/mobile/bottom-sheet/cell.native.js new file mode 100644 index 0000000000000..7ad3a2db4b693 --- /dev/null +++ b/packages/editor/src/components/mobile/bottom-sheet/cell.native.js @@ -0,0 +1,24 @@ +/** +* External dependencies +*/ +import { TouchableOpacity, Text } from 'react-native'; + +/** + * Internal dependencies + */ +import styles from './styles.scss'; + +export default function Cell( props ) { + const { + onPress, + label, + value, + } = props; + + return ( + + { label } + { value } + + ); +} diff --git a/packages/editor/src/components/mobile/bottom-sheet/index.native.js b/packages/editor/src/components/mobile/bottom-sheet/index.native.js new file mode 100644 index 0000000000000..781eb01337e4c --- /dev/null +++ b/packages/editor/src/components/mobile/bottom-sheet/index.native.js @@ -0,0 +1,90 @@ +/** + * External dependencies + */ +import { Text, View } from 'react-native'; +import Modal from 'react-native-modal'; +import SafeArea from 'react-native-safe-area'; + +/** + * WordPress dependencies + */ +import { Component } from '@wordpress/element'; + +/** + * Internal dependencies + */ +import styles from './styles.scss'; +import Button from './button'; +import Cell from './cell'; + +class BottomSheet extends Component { + constructor() { + super( ...arguments ); + this.onSafeAreaInsetsUpdate = this.onSafeAreaInsetsUpdate.bind( this ); + this.state = { + safeAreaBottomInset: 0, + }; + + SafeArea.getSafeAreaInsetsForRootView().then( this.onSafeAreaInsetsUpdate ); + } + + componentDidMount() { + SafeArea.addEventListener( 'safeAreaInsetsForRootViewDidChange', this.onSafeAreaInsetsUpdate ); + } + + componentWillUnmount() { + SafeArea.removeEventListener( 'safeAreaInsetsForRootViewDidChange', this.onSafeAreaInsetsUpdate ); + } + + onSafeAreaInsetsUpdate( result ) { + const { safeAreaInsets } = result; + if ( this.state.safeAreaBottomInset !== safeAreaInsets.bottom ) { + this.setState( { safeAreaBottomInset: safeAreaInsets.bottom } ); + } + } + + render() { + const { isVisible, leftButton, rightButton } = this.props; + + return ( + + + + + + { leftButton } + + + + { this.props.title } + + + + { rightButton } + + + + + { this.props.children } + + + + + ); + } +} + +BottomSheet.Button = Button; +BottomSheet.Cell = Cell; + +export default BottomSheet; diff --git a/packages/editor/src/components/mobile/bottom-sheet/styles.scss b/packages/editor/src/components/mobile/bottom-sheet/styles.scss new file mode 100644 index 0000000000000..1062ebceaa8e3 --- /dev/null +++ b/packages/editor/src/components/mobile/bottom-sheet/styles.scss @@ -0,0 +1,82 @@ +//Bottom Sheet + +.bottomModal { + justify-content: flex-end; + margin: 0; +} + +.dragIndicator { + background-color: $light-gray-400; + height: 4px; + width: 10%; + top: -12px; + margin: auto; + border-radius: 2px; +} + +.separator { + background-color: $light-gray-400; + height: 1px; + width: 100%; + margin: auto; +} + +.content { + background-color: $white; + padding: 18px 10px 5px 10px; + justify-content: center; + border-top-right-radius: 8px; + border-top-left-radius: 8px; +} + +.head { + flex-direction: row; + width: 100%; + margin-bottom: 5px; + justify-content: space-between; + align-items: center; + align-content: center; +} + +.title { + color: $dark-gray-600; + font-size: 18px; + font-weight: 600; + text-align: center; +} + +.titleContainer { + justify-content: center; + flex: 2; + align-content: center; +} + +// Button + +.buttonText { + font-size: 18px; + padding: 5px; +} + +// Cell + +//Bottom Sheet + +.cellContainer { + flex-direction: row; + min-height: 50; + justify-content: space-between; + padding-left: 12; + padding-right: 12; + align-items: center; +} + +.cellLabel { + font-size: 18px; + color: #000; +} + +.cellValue { + font-size: 18px; + color: $dark-gray-400; +}