From 95e743025ead37cf315af76b03e56ecc9be63914 Mon Sep 17 00:00:00 2001 From: Cameron Voell Date: Wed, 18 Dec 2019 21:57:27 -0500 Subject: [PATCH 1/9] SelectControl on mobile updated to CyclePicker UI --- .../block-library/src/image/edit.native.js | 2 +- .../bottom-sheet/cycle-picker-cell.native.js | 30 +++++++++++++++++++ .../src/mobile/bottom-sheet/index.native.js | 4 +-- .../src/select-control/index.native.js | 4 +-- 4 files changed, 35 insertions(+), 5 deletions(-) create mode 100644 packages/components/src/mobile/bottom-sheet/cycle-picker-cell.native.js diff --git a/packages/block-library/src/image/edit.native.js b/packages/block-library/src/image/edit.native.js index b5a919515ac15f..1e7ad33674125a 100644 --- a/packages/block-library/src/image/edit.native.js +++ b/packages/block-library/src/image/edit.native.js @@ -343,7 +343,7 @@ export class ImageEdit extends React.Component { hideCancelButton icon={ 'editor-expand' } label={ __( 'Size' ) } - value={ sizeOptionLabels[ sizeSlug || DEFAULT_SIZE_SLUG ] } + value={ sizeSlug || DEFAULT_SIZE_SLUG } onChangeValue={ ( newValue ) => this.onSetSizeSlug( newValue ) } options={ sizeOptions } /> } diff --git a/packages/components/src/mobile/bottom-sheet/cycle-picker-cell.native.js b/packages/components/src/mobile/bottom-sheet/cycle-picker-cell.native.js new file mode 100644 index 00000000000000..431b86cdc7eaac --- /dev/null +++ b/packages/components/src/mobile/bottom-sheet/cycle-picker-cell.native.js @@ -0,0 +1,30 @@ +/** + * External dependencies + */ +import { findIndex } from 'lodash'; +/** + * Internal dependencies + */ +import Cell from './cell'; + +export default function BottomSheetCyclePickerCell( props ) { + const { + value, + options, + onChangeValue, + ...cellProps + } = props; + + const cycleOptionValue = () => { + return options[ ( findIndex( options, [ 'value', value ] ) + 1 ) % options.length ].value; + }; + + return ( + onChangeValue( cycleOptionValue() ) } + editable={ false } + value={ options[ findIndex( options, [ 'value', value ] ) ].label } + { ...cellProps } + /> + ); +} diff --git a/packages/components/src/mobile/bottom-sheet/index.native.js b/packages/components/src/mobile/bottom-sheet/index.native.js index 449bc5dc05059e..0d6ede8659f242 100644 --- a/packages/components/src/mobile/bottom-sheet/index.native.js +++ b/packages/components/src/mobile/bottom-sheet/index.native.js @@ -17,7 +17,7 @@ import { withPreferredColorScheme } from '@wordpress/compose'; import styles from './styles.scss'; import Button from './button'; import Cell from './cell'; -import PickerCell from './picker-cell'; +import CyclePickerCell from './cycle-picker-cell'; import SwitchCell from './switch-cell'; import RangeCell from './range-cell'; import KeyboardAvoidingView from './keyboard-avoiding-view'; @@ -147,7 +147,7 @@ const ThemedBottomSheet = withPreferredColorScheme( BottomSheet ); ThemedBottomSheet.getWidth = getWidth; ThemedBottomSheet.Button = Button; ThemedBottomSheet.Cell = Cell; -ThemedBottomSheet.PickerCell = PickerCell; +ThemedBottomSheet.CyclePickerCell = CyclePickerCell; ThemedBottomSheet.SwitchCell = SwitchCell; ThemedBottomSheet.RangeCell = RangeCell; diff --git a/packages/components/src/select-control/index.native.js b/packages/components/src/select-control/index.native.js index 55b6064dfc1013..b5c0567a036765 100644 --- a/packages/components/src/select-control/index.native.js +++ b/packages/components/src/select-control/index.native.js @@ -1,7 +1,7 @@ /** * Internal dependencies */ -import PickerCell from '../mobile/bottom-sheet/picker-cell'; +import CyclePickerCell from '../mobile/bottom-sheet/cycle-picker-cell'; function SelectControl( { help, @@ -17,7 +17,7 @@ function SelectControl( { const id = `inspector-select-control-${ instanceId }`; return ( - Date: Wed, 18 Dec 2019 22:51:55 -0500 Subject: [PATCH 2/9] Image size options now from editor settings store --- .../block-library/src/image/edit.native.js | 25 +++++++------------ .../bottom-sheet/cycle-picker-cell.native.js | 4 +-- 2 files changed, 11 insertions(+), 18 deletions(-) diff --git a/packages/block-library/src/image/edit.native.js b/packages/block-library/src/image/edit.native.js index 1e7ad33674125a..ff04d5600e18a7 100644 --- a/packages/block-library/src/image/edit.native.js +++ b/packages/block-library/src/image/edit.native.js @@ -10,7 +10,7 @@ import { requestImageUploadCancelDialog, requestImageFullscreenPreview, } from 'react-native-gutenberg-bridge'; -import { isEmpty, map, get } from 'lodash'; +import { isEmpty, get } from 'lodash'; /** * WordPress dependencies @@ -53,21 +53,9 @@ import { getUpdatedLinkTargetSettings } from './utils'; import { LINK_DESTINATION_CUSTOM, LINK_DESTINATION_NONE, + DEFAULT_SIZE_SLUG, } from './constants'; -const IMAGE_SIZE_THUMBNAIL = 'thumbnail'; -const IMAGE_SIZE_MEDIUM = 'medium'; -const IMAGE_SIZE_LARGE = 'large'; -const IMAGE_SIZE_FULL_SIZE = 'full'; -const DEFAULT_SIZE_SLUG = IMAGE_SIZE_LARGE; -const sizeOptionLabels = { - [ IMAGE_SIZE_THUMBNAIL ]: __( 'Thumbnail' ), - [ IMAGE_SIZE_MEDIUM ]: __( 'Medium' ), - [ IMAGE_SIZE_LARGE ]: __( 'Large' ), - [ IMAGE_SIZE_FULL_SIZE ]: __( 'Full Size' ), -}; -const sizeOptions = map( sizeOptionLabels, ( label, option ) => ( { value: option, label } ) ); - // Default Image ratio 4:3 const IMAGE_ASPECT_RATIO = 4 / 3; @@ -296,7 +284,7 @@ export class ImageEdit extends React.Component { } render() { - const { attributes, isSelected, image } = this.props; + const { attributes, isSelected, image, imageSizes } = this.props; const { align, url, height, width, alt, href, id, linkTarget, sizeSlug } = attributes; const actions = [ { label: __( 'Clear All Settings' ), onPress: this.onClearSettings } ]; @@ -345,7 +333,7 @@ export class ImageEdit extends React.Component { label={ __( 'Size' ) } value={ sizeSlug || DEFAULT_SIZE_SLUG } onChangeValue={ ( newValue ) => this.onSetSizeSlug( newValue ) } - options={ sizeOptions } + options={ imageSizes } /> } { const { getMedia } = select( 'core' ); + const { getSettings } = select( 'core/block-editor' ); const { attributes: { id }, isSelected } = props; + const { + imageSizes, + } = getSettings(); return { image: id && isSelected ? getMedia( id ) : null, + imageSizes, }; } ), withPreferredColorScheme, diff --git a/packages/components/src/mobile/bottom-sheet/cycle-picker-cell.native.js b/packages/components/src/mobile/bottom-sheet/cycle-picker-cell.native.js index 431b86cdc7eaac..56e08d86c6205a 100644 --- a/packages/components/src/mobile/bottom-sheet/cycle-picker-cell.native.js +++ b/packages/components/src/mobile/bottom-sheet/cycle-picker-cell.native.js @@ -16,14 +16,14 @@ export default function BottomSheetCyclePickerCell( props ) { } = props; const cycleOptionValue = () => { - return options[ ( findIndex( options, [ 'value', value ] ) + 1 ) % options.length ].value; + return options[ ( findIndex( options, [ 'slug', value ] ) + 1 ) % options.length ].slug; }; return ( onChangeValue( cycleOptionValue() ) } editable={ false } - value={ options[ findIndex( options, [ 'value', value ] ) ].label } + value={ options[ findIndex( options, [ 'slug', value ] ) ].label } { ...cellProps } /> ); From 82ab9d3c3c653f1210c2af37bdecdd562b1c60ae Mon Sep 17 00:00:00 2001 From: Cameron Voell Date: Thu, 19 Dec 2019 00:45:44 -0500 Subject: [PATCH 3/9] Make CyclePickerCell variable name generic --- packages/block-library/src/image/edit.native.js | 12 +++++++++--- .../mobile/bottom-sheet/cycle-picker-cell.native.js | 4 ++-- 2 files changed, 11 insertions(+), 5 deletions(-) diff --git a/packages/block-library/src/image/edit.native.js b/packages/block-library/src/image/edit.native.js index ff04d5600e18a7..6b4e152a8f217e 100644 --- a/packages/block-library/src/image/edit.native.js +++ b/packages/block-library/src/image/edit.native.js @@ -10,7 +10,7 @@ import { requestImageUploadCancelDialog, requestImageFullscreenPreview, } from 'react-native-gutenberg-bridge'; -import { isEmpty, get } from 'lodash'; +import { isEmpty, map, get } from 'lodash'; /** * WordPress dependencies @@ -289,6 +289,13 @@ export class ImageEdit extends React.Component { const actions = [ { label: __( 'Clear All Settings' ), onPress: this.onClearSettings } ]; + const getImageSizeOptions = () => map( imageSizes, ( { label, slug } ) => { + return { + value: slug, + label, + }; + } ); + const getToolbarEditButton = ( open ) => ( @@ -328,12 +335,11 @@ export class ImageEdit extends React.Component { { // eslint-disable-next-line no-undef image && __DEV__ && this.onSetSizeSlug( newValue ) } - options={ imageSizes } + options={ getImageSizeOptions() } /> } { - return options[ ( findIndex( options, [ 'slug', value ] ) + 1 ) % options.length ].slug; + return options[ ( findIndex( options, [ 'value', value ] ) + 1 ) % options.length ].value; }; return ( onChangeValue( cycleOptionValue() ) } editable={ false } - value={ options[ findIndex( options, [ 'slug', value ] ) ].label } + value={ options[ findIndex( options, [ 'value', value ] ) ].label } { ...cellProps } /> ); From 31caac7bf44835a2c6294f30a79f6a52d967658b Mon Sep 17 00:00:00 2001 From: Cameron Voell Date: Tue, 14 Jan 2020 16:39:42 -0800 Subject: [PATCH 4/9] New CycleSelectControl added --- docs/manifest-devhub.json | 6 ++++ .../block-library/src/image/edit.native.js | 4 +-- packages/components/src/index.native.js | 1 + .../src/mobile/bottom-sheet/index.native.js | 2 ++ .../src/mobile/cycle-select-control/README.md | 4 +++ .../cycle-select-control/index.native.js | 35 +++++++++++++++++++ .../src/select-control/index.native.js | 4 +-- 7 files changed, 52 insertions(+), 4 deletions(-) create mode 100644 packages/components/src/mobile/cycle-select-control/README.md create mode 100644 packages/components/src/mobile/cycle-select-control/index.native.js diff --git a/docs/manifest-devhub.json b/docs/manifest-devhub.json index 3c47fe380f8f40..58d051d26aa68f 100644 --- a/docs/manifest-devhub.json +++ b/docs/manifest-devhub.json @@ -839,6 +839,12 @@ "markdown_source": "../packages/components/src/menu-items-choice/README.md", "parent": "components" }, + { + "title": "CycleSelectControl", + "slug": "cycle-select-control", + "markdown_source": "../packages/components/src/mobile/cycle-select-control/README.md", + "parent": "components" + }, { "title": "StepperControl", "slug": "stepper-control", diff --git a/packages/block-library/src/image/edit.native.js b/packages/block-library/src/image/edit.native.js index 6b4e152a8f217e..6bc92837686be4 100644 --- a/packages/block-library/src/image/edit.native.js +++ b/packages/block-library/src/image/edit.native.js @@ -16,10 +16,10 @@ import { isEmpty, map, get } from 'lodash'; * WordPress dependencies */ import { + CycleSelectControl, Icon, PanelBody, PanelActions, - SelectControl, TextControl, ToggleControl, ToolbarButton, @@ -334,7 +334,7 @@ export class ImageEdit extends React.Component { /> { // eslint-disable-next-line no-undef image && __DEV__ && - + ); +} + +export default CycleSelectControl; diff --git a/packages/components/src/select-control/index.native.js b/packages/components/src/select-control/index.native.js index b5c0567a036765..55b6064dfc1013 100644 --- a/packages/components/src/select-control/index.native.js +++ b/packages/components/src/select-control/index.native.js @@ -1,7 +1,7 @@ /** * Internal dependencies */ -import CyclePickerCell from '../mobile/bottom-sheet/cycle-picker-cell'; +import PickerCell from '../mobile/bottom-sheet/picker-cell'; function SelectControl( { help, @@ -17,7 +17,7 @@ function SelectControl( { const id = `inspector-select-control-${ instanceId }`; return ( - Date: Sun, 2 Feb 2020 22:31:37 -0800 Subject: [PATCH 5/9] Replaced unneccessary getImageSizeOptions function --- packages/block-library/src/image/edit.native.js | 9 ++------- 1 file changed, 2 insertions(+), 7 deletions(-) diff --git a/packages/block-library/src/image/edit.native.js b/packages/block-library/src/image/edit.native.js index ea1ee20d8143cd..a448b1431b6aa6 100644 --- a/packages/block-library/src/image/edit.native.js +++ b/packages/block-library/src/image/edit.native.js @@ -357,12 +357,7 @@ export class ImageEdit extends React.Component { }, ]; - const getImageSizeOptions = () => map( imageSizes, ( { label, slug } ) => { - return { - value: slug, - label, - }; - } ); + const sizeOptions = imageSizes.map( ( { label, slug } ) => ( { value: slug, label } ) ); const getToolbarEditButton = ( open ) => ( @@ -407,7 +402,7 @@ export class ImageEdit extends React.Component { label={ __( 'Size' ) } value={ sizeSlug || DEFAULT_SIZE_SLUG } onChangeValue={ ( newValue ) => this.onSetSizeSlug( newValue ) } - options={ getImageSizeOptions() } + options={ sizeOptions } /> } Date: Sun, 2 Feb 2020 22:39:28 -0800 Subject: [PATCH 6/9] Adjusted function name and lines for readability --- .../bottom-sheet/cycle-picker-cell.native.js | 14 +++++--------- 1 file changed, 5 insertions(+), 9 deletions(-) diff --git a/packages/components/src/mobile/bottom-sheet/cycle-picker-cell.native.js b/packages/components/src/mobile/bottom-sheet/cycle-picker-cell.native.js index 431b86cdc7eaac..489464807827a0 100644 --- a/packages/components/src/mobile/bottom-sheet/cycle-picker-cell.native.js +++ b/packages/components/src/mobile/bottom-sheet/cycle-picker-cell.native.js @@ -8,20 +8,16 @@ import { findIndex } from 'lodash'; import Cell from './cell'; export default function BottomSheetCyclePickerCell( props ) { - const { - value, - options, - onChangeValue, - ...cellProps - } = props; + const { value, options, onChangeValue, ...cellProps } = props; - const cycleOptionValue = () => { - return options[ ( findIndex( options, [ 'value', value ] ) + 1 ) % options.length ].value; + const nextOptionValue = () => { + const selectedOptionIndex = findIndex( options, [ 'value', value ] ); + return options[ ( selectedOptionIndex + 1 ) % options.length ].value; }; return ( onChangeValue( cycleOptionValue() ) } + onPress={ () => onChangeValue( nextOptionValue() ) } editable={ false } value={ options[ findIndex( options, [ 'value', value ] ) ].label } { ...cellProps } From 12ebc85ea833e3ebce644bffdf7273448c12151d Mon Sep 17 00:00:00 2001 From: Cameron Voell Date: Mon, 3 Feb 2020 00:20:41 -0800 Subject: [PATCH 7/9] Added checks for empty size options --- .../block-library/src/image/edit.native.js | 24 ++++++++++++------- .../bottom-sheet/cycle-picker-cell.native.js | 13 +++++++--- 2 files changed, 26 insertions(+), 11 deletions(-) diff --git a/packages/block-library/src/image/edit.native.js b/packages/block-library/src/image/edit.native.js index a448b1431b6aa6..28a23fca0fcbe9 100644 --- a/packages/block-library/src/image/edit.native.js +++ b/packages/block-library/src/image/edit.native.js @@ -17,7 +17,7 @@ import { requestImageFullscreenPreview, showMediaEditorButton, } from 'react-native-gutenberg-bridge'; -import { isEmpty, map, get } from 'lodash'; +import { isEmpty, get, find } from 'lodash'; /** * WordPress dependencies @@ -357,7 +357,14 @@ export class ImageEdit extends React.Component { }, ]; - const sizeOptions = imageSizes.map( ( { label, slug } ) => ( { value: slug, label } ) ); + const sizeOptions = imageSizes.map( ( { label, slug } ) => ( { + value: slug, + label, + } ) ); + const sizeOptionsValid = find( sizeOptions, [ + 'value', + DEFAULT_SIZE_SLUG, + ] ); const getToolbarEditButton = ( open ) => ( @@ -396,14 +403,17 @@ export class ImageEdit extends React.Component { onChange={ this.onSetNewTab } /> { // eslint-disable-next-line no-undef - image && __DEV__ && + image && sizeOptionsValid && __DEV__ && ( this.onSetSizeSlug( newValue ) } + onChangeValue={ ( newValue ) => + this.onSetSizeSlug( newValue ) + } options={ sizeOptions } - /> } + /> + ) } { - const selectedOptionIndex = findIndex( options, [ 'value', value ] ); return options[ ( selectedOptionIndex + 1 ) % options.length ].value; }; + const selectedOptionIndex = findIndex( options, [ 'value', value ] ); + const optionsContainsValue = + options.length > 0 && selectedOptionIndex !== -1; + return ( onChangeValue( nextOptionValue() ) } + onPress={ () => + optionsContainsValue && onChangeValue( nextOptionValue() ) + } editable={ false } - value={ options[ findIndex( options, [ 'value', value ] ) ].label } + value={ + optionsContainsValue && options[ selectedOptionIndex ].label + } { ...cellProps } /> ); From 559fb21884a166d752af35684966383e158a0dff Mon Sep 17 00:00:00 2001 From: Cameron Voell Date: Mon, 3 Feb 2020 01:20:46 -0800 Subject: [PATCH 8/9] Add undefined prop protection --- packages/block-library/src/image/edit.native.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/block-library/src/image/edit.native.js b/packages/block-library/src/image/edit.native.js index 28a23fca0fcbe9..af316adcd34c3b 100644 --- a/packages/block-library/src/image/edit.native.js +++ b/packages/block-library/src/image/edit.native.js @@ -17,7 +17,7 @@ import { requestImageFullscreenPreview, showMediaEditorButton, } from 'react-native-gutenberg-bridge'; -import { isEmpty, get, find } from 'lodash'; +import { isEmpty, get, find, map } from 'lodash'; /** * WordPress dependencies @@ -357,7 +357,7 @@ export class ImageEdit extends React.Component { }, ]; - const sizeOptions = imageSizes.map( ( { label, slug } ) => ( { + const sizeOptions = map( imageSizes, ( { label, slug } ) => ( { value: slug, label, } ) ); From 34820b33f7f9daead29bc0479f42c44b35dee391 Mon Sep 17 00:00:00 2001 From: Cameron Voell Date: Tue, 11 Feb 2020 18:42:10 -0800 Subject: [PATCH 9/9] Incorporating imageSizes defaults change from master --- packages/block-library/src/image/edit.native.js | 4 ++-- .../src/mobile/bottom-sheet/cycle-picker-cell.native.js | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/block-library/src/image/edit.native.js b/packages/block-library/src/image/edit.native.js index 1f951b68b2f1a5..383c64fb6e7933 100644 --- a/packages/block-library/src/image/edit.native.js +++ b/packages/block-library/src/image/edit.native.js @@ -357,9 +357,9 @@ export class ImageEdit extends React.Component { }, ]; - const sizeOptions = map( imageSizes, ( { label, slug } ) => ( { + const sizeOptions = map( imageSizes, ( { name, slug } ) => ( { value: slug, - label, + name, } ) ); const sizeOptionsValid = find( sizeOptions, [ 'value', diff --git a/packages/components/src/mobile/bottom-sheet/cycle-picker-cell.native.js b/packages/components/src/mobile/bottom-sheet/cycle-picker-cell.native.js index 6fb98f6d9c077d..56d83af268c6ac 100644 --- a/packages/components/src/mobile/bottom-sheet/cycle-picker-cell.native.js +++ b/packages/components/src/mobile/bottom-sheet/cycle-picker-cell.native.js @@ -25,7 +25,7 @@ export default function BottomSheetCyclePickerCell( props ) { } editable={ false } value={ - optionsContainsValue && options[ selectedOptionIndex ].label + optionsContainsValue && options[ selectedOptionIndex ].name } { ...cellProps } />