From e3afe626204ac43ac95b4b3a1d1be26e734caee9 Mon Sep 17 00:00:00 2001 From: Tugdual de Kerviler Date: Thu, 23 May 2019 11:19:48 +0200 Subject: [PATCH] Move Picker and BottomSheet to the @wordpress/components package (#15750) --- .../src/components/index.native.js | 4 --- .../components/media-upload/index.native.js | 2 +- .../mobile/bottom-sheet/button.native.js | 32 ------------------- .../block-library/src/image/edit.native.js | 2 +- packages/components/src/index.native.js | 4 +++ .../src/mobile/bottom-sheet/button.native.js | 30 +++++++++++++++++ .../src}/mobile/bottom-sheet/cell.native.js | 2 +- .../bottom-sheet/cellStyles.android.scss | 0 .../mobile/bottom-sheet/cellStyles.ios.scss | 0 .../src}/mobile/bottom-sheet/index.native.js | 0 .../keyboard-avoiding-view.native.js | 0 .../mobile/bottom-sheet/picker-cell.native.js | 2 +- .../mobile/bottom-sheet/styles.native.scss | 0 .../mobile/bottom-sheet/switch-cell.native.js | 2 +- .../src}/mobile/picker/index.android.js | 6 +++- .../src}/mobile/picker/index.ios.js | 23 ++++++------- .../format-library/src/link/modal.native.js | 2 +- 17 files changed, 57 insertions(+), 54 deletions(-) delete mode 100644 packages/block-editor/src/components/mobile/bottom-sheet/button.native.js create mode 100644 packages/components/src/mobile/bottom-sheet/button.native.js rename packages/{block-editor/src/components => components/src}/mobile/bottom-sheet/cell.native.js (98%) rename packages/{block-editor/src/components => components/src}/mobile/bottom-sheet/cellStyles.android.scss (100%) rename packages/{block-editor/src/components => components/src}/mobile/bottom-sheet/cellStyles.ios.scss (100%) rename packages/{block-editor/src/components => components/src}/mobile/bottom-sheet/index.native.js (100%) rename packages/{block-editor/src/components => components/src}/mobile/bottom-sheet/keyboard-avoiding-view.native.js (100%) rename packages/{block-editor/src/components => components/src}/mobile/bottom-sheet/picker-cell.native.js (89%) rename packages/{block-editor/src/components => components/src}/mobile/bottom-sheet/styles.native.scss (100%) rename packages/{block-editor/src/components => components/src}/mobile/bottom-sheet/switch-cell.native.js (95%) rename packages/{block-editor/src/components => components/src}/mobile/picker/index.android.js (94%) rename packages/{block-editor/src/components => components/src}/mobile/picker/index.ios.js (64%) diff --git a/packages/block-editor/src/components/index.native.js b/packages/block-editor/src/components/index.native.js index 47683399491f17..ae73aa0e4fb316 100644 --- a/packages/block-editor/src/components/index.native.js +++ b/packages/block-editor/src/components/index.native.js @@ -21,7 +21,3 @@ export { default as DefaultBlockAppender } from './default-block-appender'; // State Related Components export { default as BlockEditorProvider } from './provider'; - -// Mobile Editor Related Components -export { default as BottomSheet } from './mobile/bottom-sheet'; -export { default as Picker } from './mobile/picker'; diff --git a/packages/block-editor/src/components/media-upload/index.native.js b/packages/block-editor/src/components/media-upload/index.native.js index 9efed29dc1e821..14ed5d8dbe6236 100644 --- a/packages/block-editor/src/components/media-upload/index.native.js +++ b/packages/block-editor/src/components/media-upload/index.native.js @@ -12,7 +12,7 @@ import { * WordPress dependencies */ import { __ } from '@wordpress/i18n'; -import { Picker } from '@wordpress/block-editor'; +import { Picker } from '@wordpress/components'; export const MEDIA_TYPE_IMAGE = 'image'; export const MEDIA_TYPE_VIDEO = 'video'; diff --git a/packages/block-editor/src/components/mobile/bottom-sheet/button.native.js b/packages/block-editor/src/components/mobile/bottom-sheet/button.native.js deleted file mode 100644 index c8011f80511f83..00000000000000 --- a/packages/block-editor/src/components/mobile/bottom-sheet/button.native.js +++ /dev/null @@ -1,32 +0,0 @@ -/** - * External dependencies - */ -import { TouchableOpacity, View, Text } from 'react-native'; - -/** - * Internal dependencies - */ -import styles from './styles.scss'; - -export default function Button( props ) { - const { - onPress, - disabled, - text, - color, - } = props; - - return ( - - - - { text } - - - - ); -} diff --git a/packages/block-library/src/image/edit.native.js b/packages/block-library/src/image/edit.native.js index b2ca7452b8c8b8..f45c455f1a8abf 100644 --- a/packages/block-library/src/image/edit.native.js +++ b/packages/block-library/src/image/edit.native.js @@ -15,6 +15,7 @@ import { isEmpty } from 'lodash'; * WordPress dependencies */ import { + BottomSheet, Toolbar, ToolbarButton, } from '@wordpress/components'; @@ -25,7 +26,6 @@ import { RichText, BlockControls, InspectorControls, - BottomSheet, } from '@wordpress/block-editor'; import { __, sprintf } from '@wordpress/i18n'; import { isURL } from '@wordpress/url'; diff --git a/packages/components/src/index.native.js b/packages/components/src/index.native.js index b68e70efb00118..f3bd5ba6951b16 100644 --- a/packages/components/src/index.native.js +++ b/packages/components/src/index.native.js @@ -18,3 +18,7 @@ export { default as withFocusOutside } from './higher-order/with-focus-outside'; export { default as withFocusReturn } from './higher-order/with-focus-return'; export { default as withNotices } from './higher-order/with-notices'; export { default as withSpokenMessages } from './higher-order/with-spoken-messages'; + +// Mobile Components +export { default as BottomSheet } from './mobile/bottom-sheet'; +export { default as Picker } from './mobile/picker'; diff --git a/packages/components/src/mobile/bottom-sheet/button.native.js b/packages/components/src/mobile/bottom-sheet/button.native.js new file mode 100644 index 00000000000000..cc9c5cdae22ab3 --- /dev/null +++ b/packages/components/src/mobile/bottom-sheet/button.native.js @@ -0,0 +1,30 @@ +/** + * External dependencies + */ +import { TouchableOpacity, View, Text } from 'react-native'; + +/** + * Internal dependencies + */ +import styles from './styles.scss'; + +const BottomSheetButton = ( { + onPress, + disabled, + text, + color, +} ) => ( + + + + { text } + + + +); + +export default BottomSheetButton; diff --git a/packages/block-editor/src/components/mobile/bottom-sheet/cell.native.js b/packages/components/src/mobile/bottom-sheet/cell.native.js similarity index 98% rename from packages/block-editor/src/components/mobile/bottom-sheet/cell.native.js rename to packages/components/src/mobile/bottom-sheet/cell.native.js index 689aeeb38dbec7..cebfc6a91c1826 100644 --- a/packages/block-editor/src/components/mobile/bottom-sheet/cell.native.js +++ b/packages/components/src/mobile/bottom-sheet/cell.native.js @@ -17,7 +17,7 @@ import { __, _x, sprintf } from '@wordpress/i18n'; import styles from './styles.scss'; import platformStyles from './cellStyles.scss'; -export default class Cell extends Component { +export default class BottomSheetCell extends Component { constructor( props ) { super( ...arguments ); this.state = { diff --git a/packages/block-editor/src/components/mobile/bottom-sheet/cellStyles.android.scss b/packages/components/src/mobile/bottom-sheet/cellStyles.android.scss similarity index 100% rename from packages/block-editor/src/components/mobile/bottom-sheet/cellStyles.android.scss rename to packages/components/src/mobile/bottom-sheet/cellStyles.android.scss diff --git a/packages/block-editor/src/components/mobile/bottom-sheet/cellStyles.ios.scss b/packages/components/src/mobile/bottom-sheet/cellStyles.ios.scss similarity index 100% rename from packages/block-editor/src/components/mobile/bottom-sheet/cellStyles.ios.scss rename to packages/components/src/mobile/bottom-sheet/cellStyles.ios.scss diff --git a/packages/block-editor/src/components/mobile/bottom-sheet/index.native.js b/packages/components/src/mobile/bottom-sheet/index.native.js similarity index 100% rename from packages/block-editor/src/components/mobile/bottom-sheet/index.native.js rename to packages/components/src/mobile/bottom-sheet/index.native.js diff --git a/packages/block-editor/src/components/mobile/bottom-sheet/keyboard-avoiding-view.native.js b/packages/components/src/mobile/bottom-sheet/keyboard-avoiding-view.native.js similarity index 100% rename from packages/block-editor/src/components/mobile/bottom-sheet/keyboard-avoiding-view.native.js rename to packages/components/src/mobile/bottom-sheet/keyboard-avoiding-view.native.js diff --git a/packages/block-editor/src/components/mobile/bottom-sheet/picker-cell.native.js b/packages/components/src/mobile/bottom-sheet/picker-cell.native.js similarity index 89% rename from packages/block-editor/src/components/mobile/bottom-sheet/picker-cell.native.js rename to packages/components/src/mobile/bottom-sheet/picker-cell.native.js index 888acd3db54b22..50a775f25728b1 100644 --- a/packages/block-editor/src/components/mobile/bottom-sheet/picker-cell.native.js +++ b/packages/components/src/mobile/bottom-sheet/picker-cell.native.js @@ -4,7 +4,7 @@ import Cell from './cell'; import Picker from '../picker'; -export default function PickerCell( props ) { +export default function BottomSheetPickerCell( props ) { const { options, onChangeValue, diff --git a/packages/block-editor/src/components/mobile/bottom-sheet/styles.native.scss b/packages/components/src/mobile/bottom-sheet/styles.native.scss similarity index 100% rename from packages/block-editor/src/components/mobile/bottom-sheet/styles.native.scss rename to packages/components/src/mobile/bottom-sheet/styles.native.scss diff --git a/packages/block-editor/src/components/mobile/bottom-sheet/switch-cell.native.js b/packages/components/src/mobile/bottom-sheet/switch-cell.native.js similarity index 95% rename from packages/block-editor/src/components/mobile/bottom-sheet/switch-cell.native.js rename to packages/components/src/mobile/bottom-sheet/switch-cell.native.js index 2682b82668c60b..011f5798499008 100644 --- a/packages/block-editor/src/components/mobile/bottom-sheet/switch-cell.native.js +++ b/packages/components/src/mobile/bottom-sheet/switch-cell.native.js @@ -12,7 +12,7 @@ import { __, _x, sprintf } from '@wordpress/i18n'; */ import Cell from './cell'; -export default function SwitchCell( props ) { +export default function BottomSheetSwitchCell( props ) { const { value, onValueChange, diff --git a/packages/block-editor/src/components/mobile/picker/index.android.js b/packages/components/src/mobile/picker/index.android.js similarity index 94% rename from packages/block-editor/src/components/mobile/picker/index.android.js rename to packages/components/src/mobile/picker/index.android.js index 50f264adaa55d7..3fad1cc2b23bf0 100644 --- a/packages/block-editor/src/components/mobile/picker/index.android.js +++ b/packages/components/src/mobile/picker/index.android.js @@ -9,7 +9,11 @@ import { View } from 'react-native'; */ import { __ } from '@wordpress/i18n'; import { Component } from '@wordpress/element'; -import { BottomSheet } from '@wordpress/block-editor'; + +/** + * Internal dependencies + */ +import BottomSheet from '../bottom-sheet'; export default class Picker extends Component { constructor() { diff --git a/packages/block-editor/src/components/mobile/picker/index.ios.js b/packages/components/src/mobile/picker/index.ios.js similarity index 64% rename from packages/block-editor/src/components/mobile/picker/index.ios.js rename to packages/components/src/mobile/picker/index.ios.js index 0a0b3d8a2dd410..2cf9798b28e9c0 100644 --- a/packages/block-editor/src/components/mobile/picker/index.ios.js +++ b/packages/components/src/mobile/picker/index.ios.js @@ -15,17 +15,18 @@ class Picker extends Component { const labels = options.map( ( { label } ) => label ); const fullOptions = [ __( 'Cancel' ) ].concat( labels ); - ActionSheetIOS.showActionSheetWithOptions( { - options: fullOptions, - cancelButtonIndex: 0, - }, - ( buttonIndex ) => { - if ( buttonIndex === 0 ) { - return; - } - const selected = options[ buttonIndex - 1 ]; - onChange( selected.value ); - }, + ActionSheetIOS.showActionSheetWithOptions( + { + options: fullOptions, + cancelButtonIndex: 0, + }, + ( buttonIndex ) => { + if ( buttonIndex === 0 ) { + return; + } + const selected = options[ buttonIndex - 1 ]; + onChange( selected.value ); + }, ); } diff --git a/packages/format-library/src/link/modal.native.js b/packages/format-library/src/link/modal.native.js index 954bd6f1da5d7a..d796dd2bc53a9d 100644 --- a/packages/format-library/src/link/modal.native.js +++ b/packages/format-library/src/link/modal.native.js @@ -9,9 +9,9 @@ import { Platform } from 'react-native'; */ import { __ } from '@wordpress/i18n'; import { Component } from '@wordpress/element'; -import { BottomSheet } from '@wordpress/block-editor'; import { prependHTTP } from '@wordpress/url'; import { + BottomSheet, withSpokenMessages, } from '@wordpress/components'; import {