From 5f3a400a4f031ec52eb82ca6f2fbe8eb4328d39b Mon Sep 17 00:00:00 2001 From: lukewalczak Date: Thu, 17 Oct 2019 13:40:22 +0200 Subject: [PATCH 01/19] Revert package-lock.json --- packages/block-library/src/index.native.js | 1 + .../block-library/src/spacer/edit.native.js | 62 +++++++++++++++++++ .../src/spacer/editor.native.scss | 11 ++++ 3 files changed, 74 insertions(+) create mode 100644 packages/block-library/src/spacer/edit.native.js create mode 100644 packages/block-library/src/spacer/editor.native.scss diff --git a/packages/block-library/src/index.native.js b/packages/block-library/src/index.native.js index 41806df19dc178..4819e55dc6d4bc 100644 --- a/packages/block-library/src/index.native.js +++ b/packages/block-library/src/index.native.js @@ -144,6 +144,7 @@ export const registerCoreBlocks = () => { !! __DEV__ ? mediaText : null, // eslint-disable-next-line no-undef !! __DEV__ ? group : null, + spacer, ].forEach( registerBlock ); setDefaultBlockName( paragraph.name ); diff --git a/packages/block-library/src/spacer/edit.native.js b/packages/block-library/src/spacer/edit.native.js new file mode 100644 index 00000000000000..e2862a57a2e8c3 --- /dev/null +++ b/packages/block-library/src/spacer/edit.native.js @@ -0,0 +1,62 @@ + +/** + * External dependencies + */ +import React from 'react'; +import { View } from 'react-native'; +/** + * WordPress dependencies + */ +import { + PanelBody, + BottomSheet, +} from '@wordpress/components'; +import { useState } from '@wordpress/element'; +import { + InspectorControls, +} from '@wordpress/block-editor'; +import { __ } from '@wordpress/i18n'; + +/** + * Internal dependencies + */ +import styles from './editor.scss'; + +const minSpacerHeight = 20; +const maxSpacerHeight = 500; + +const SpacerEdit = ( { isSelected } ) => { + const [ spacerHeight, setSpacerHeight ] = useState( 20 ); + + const changeSpacerHeight = ( value ) => { + if ( value < minSpacerHeight ) { + return setSpacerHeight( minSpacerHeight ); + } else if ( value > maxSpacerHeight ) { + return setSpacerHeight( maxSpacerHeight ); + } return setSpacerHeight( value ); + }; + + const getInspectorControls = () => ( + + + changeSpacerHeight( value ) } + /> + + + ); + + return ( + + { getInspectorControls() } + + ); +}; + +export default SpacerEdit; diff --git a/packages/block-library/src/spacer/editor.native.scss b/packages/block-library/src/spacer/editor.native.scss new file mode 100644 index 00000000000000..be73b29bde5841 --- /dev/null +++ b/packages/block-library/src/spacer/editor.native.scss @@ -0,0 +1,11 @@ +.staticSpacer { + height: 20px; + max-height: 500px; + background-color: $white; + border: $border-width dashed $light-gray-500; + border-radius: 1px; +} + +.selectedSpacer { + border: $border-width solid $blue-wordpress; +} From 335154d000bd539a70621708b37e8af00cfec518 Mon Sep 17 00:00:00 2001 From: lukewalczak Date: Fri, 18 Oct 2019 12:54:47 +0200 Subject: [PATCH 02/19] Setting attributes for spacer height --- .../block-library/src/spacer/edit.native.js | 53 ++++++++++--------- .../src/spacer/editor.native.scss | 1 - 2 files changed, 28 insertions(+), 26 deletions(-) diff --git a/packages/block-library/src/spacer/edit.native.js b/packages/block-library/src/spacer/edit.native.js index e2862a57a2e8c3..c7e75a1dfd7181 100644 --- a/packages/block-library/src/spacer/edit.native.js +++ b/packages/block-library/src/spacer/edit.native.js @@ -2,7 +2,6 @@ /** * External dependencies */ -import React from 'react'; import { View } from 'react-native'; /** * WordPress dependencies @@ -25,36 +24,40 @@ import styles from './editor.scss'; const minSpacerHeight = 20; const maxSpacerHeight = 500; -const SpacerEdit = ( { isSelected } ) => { - const [ spacerHeight, setSpacerHeight ] = useState( 20 ); +const SpacerEdit = ( { isSelected, attributes, setAttributes } ) => { + const { height } = attributes; + const [ sliderSpacerHeight, setSpacerHeight ] = useState( height ); const changeSpacerHeight = ( value ) => { - if ( value < minSpacerHeight ) { - return setSpacerHeight( minSpacerHeight ); - } else if ( value > maxSpacerHeight ) { - return setSpacerHeight( maxSpacerHeight ); - } return setSpacerHeight( value ); + let spacerHeight = value; + setSpacerHeight( spacerHeight ); + if ( spacerHeight < minSpacerHeight ) { + spacerHeight = minSpacerHeight; + } else if ( spacerHeight > maxSpacerHeight ) { + spacerHeight = maxSpacerHeight; + } + setAttributes( { + height: spacerHeight, + } ); }; - const getInspectorControls = () => ( - - - changeSpacerHeight( value ) } - /> - - - ); + const maximumValue = height > maxSpacerHeight ? height * 2 : maxSpacerHeight; return ( - - { getInspectorControls() } + + + + changeSpacerHeight( value ) } + /> + + ); }; diff --git a/packages/block-library/src/spacer/editor.native.scss b/packages/block-library/src/spacer/editor.native.scss index be73b29bde5841..a71ba3341755af 100644 --- a/packages/block-library/src/spacer/editor.native.scss +++ b/packages/block-library/src/spacer/editor.native.scss @@ -1,6 +1,5 @@ .staticSpacer { height: 20px; - max-height: 500px; background-color: $white; border: $border-width dashed $light-gray-500; border-radius: 1px; From d137d38125130b0899c7c6d01d765b6058544c86 Mon Sep 17 00:00:00 2001 From: lukewalczak Date: Mon, 21 Oct 2019 12:09:26 +0200 Subject: [PATCH 03/19] Correct the condition for setting maximum value --- .../block-library/src/spacer/edit.native.js | 20 ++++++++++++------- .../mobile/bottom-sheet/range-cell.native.js | 2 +- 2 files changed, 14 insertions(+), 8 deletions(-) diff --git a/packages/block-library/src/spacer/edit.native.js b/packages/block-library/src/spacer/edit.native.js index c7e75a1dfd7181..a9938e51b1c48a 100644 --- a/packages/block-library/src/spacer/edit.native.js +++ b/packages/block-library/src/spacer/edit.native.js @@ -10,7 +10,7 @@ import { PanelBody, BottomSheet, } from '@wordpress/components'; -import { useState } from '@wordpress/element'; +import { useState, useEffect } from '@wordpress/element'; import { InspectorControls, } from '@wordpress/block-editor'; @@ -27,32 +27,38 @@ const maxSpacerHeight = 500; const SpacerEdit = ( { isSelected, attributes, setAttributes } ) => { const { height } = attributes; const [ sliderSpacerHeight, setSpacerHeight ] = useState( height ); + const [ sliderSpacerMaxHeight, setSpacerMaxHeight ] = useState( height ); + + // Height defined on the web can be higher than + // `maxSpacerHeight`, so there is a need to `setSpacerMaxHeight` + // after the initial render. + useEffect( () => { + setSpacerMaxHeight( height > maxSpacerHeight ? height * 2 : maxSpacerHeight ); + }, [] ); const changeSpacerHeight = ( value ) => { let spacerHeight = value; setSpacerHeight( spacerHeight ); if ( spacerHeight < minSpacerHeight ) { spacerHeight = minSpacerHeight; - } else if ( spacerHeight > maxSpacerHeight ) { - spacerHeight = maxSpacerHeight; + } else if ( spacerHeight > sliderSpacerMaxHeight ) { + spacerHeight = sliderSpacerMaxHeight; } setAttributes( { height: spacerHeight, } ); }; - const maximumValue = height > maxSpacerHeight ? height * 2 : maxSpacerHeight; - return ( changeSpacerHeight( value ) } /> diff --git a/packages/components/src/mobile/bottom-sheet/range-cell.native.js b/packages/components/src/mobile/bottom-sheet/range-cell.native.js index 07b343e9ec0781..573b2a958744bc 100644 --- a/packages/components/src/mobile/bottom-sheet/range-cell.native.js +++ b/packages/components/src/mobile/bottom-sheet/range-cell.native.js @@ -20,7 +20,7 @@ export default function BottomSheetRangeCell( props ) { step = 1, minimumTrackTintColor = '#00669b', maximumTrackTintColor = Platform.OS === 'ios' ? '#e9eff3' : '#909090', - thumbTintColor = Platform.OS === 'ios' ? '#fff' : '#00669b', + thumbTintColor = Platform.OS === 'android' && '#00669b', ...cellProps } = props; From ae5715f841b9d4f98c01a67307abbcf11a9a48a0 Mon Sep 17 00:00:00 2001 From: lukewalczak Date: Wed, 23 Oct 2019 10:34:40 +0200 Subject: [PATCH 04/19] Small code refactor --- packages/block-library/src/spacer/edit.native.js | 2 +- packages/block-library/src/spacer/editor.native.scss | 2 +- packages/components/src/mobile/slider/index.native.js | 4 ++++ 3 files changed, 6 insertions(+), 2 deletions(-) diff --git a/packages/block-library/src/spacer/edit.native.js b/packages/block-library/src/spacer/edit.native.js index a9938e51b1c48a..975773a4be7e19 100644 --- a/packages/block-library/src/spacer/edit.native.js +++ b/packages/block-library/src/spacer/edit.native.js @@ -52,7 +52,7 @@ const SpacerEdit = ( { isSelected, attributes, setAttributes } ) => { return ( - + Date: Wed, 23 Oct 2019 14:13:08 +0200 Subject: [PATCH 05/19] Improve Accessibility in range-cell --- .../src/mobile/bottom-sheet/cell.native.js | 3 ++- .../mobile/bottom-sheet/range-cell.native.js | 26 +++++++++++++++++-- .../src/mobile/slider/index.native.js | 2 ++ 3 files changed, 28 insertions(+), 3 deletions(-) diff --git a/packages/components/src/mobile/bottom-sheet/cell.native.js b/packages/components/src/mobile/bottom-sheet/cell.native.js index 52ff00b6b5b856..8e36025ad47071 100644 --- a/packages/components/src/mobile/bottom-sheet/cell.native.js +++ b/packages/components/src/mobile/bottom-sheet/cell.native.js @@ -34,6 +34,7 @@ class BottomSheetCell extends Component { render() { const { + accessible, accessibilityLabel, accessibilityHint, accessibilityRole, @@ -160,7 +161,7 @@ class BottomSheetCell extends Component { return ( { + onChangeAccessible( false ); + if ( this.sliderRef ) { + const reactTag = findNodeHandle( this.sliderRef ); + AccessibilityInfo.setAccessibilityFocus( reactTag ); + } + }; return ( { + this.sliderRef = slider; + } } + accessibilityRole={ 'adjustable' } /> ); diff --git a/packages/components/src/mobile/slider/index.native.js b/packages/components/src/mobile/slider/index.native.js index 286e68aaa3f2aa..42907d22b4f50c 100644 --- a/packages/components/src/mobile/slider/index.native.js +++ b/packages/components/src/mobile/slider/index.native.js @@ -87,6 +87,7 @@ class Slider extends Component { minimumTrackTintColor, maximumTrackTintColor, thumbTintColor, + ...sliderProps } = this.props; const { hasFocus, sliderValue } = this.state; @@ -105,6 +106,7 @@ class Slider extends Component { thumbTintColor={ thumbTintColor } onValueChange={ this.handleChange } onSlidingComplete={ this.handleValueSave } + { ...sliderProps } /> Date: Wed, 23 Oct 2019 15:57:25 +0200 Subject: [PATCH 06/19] More accessibility improvements --- .../src/mobile/bottom-sheet/range-cell.native.js | 16 ++++++++++++++-- .../components/src/mobile/slider/index.native.js | 4 ++-- 2 files changed, 16 insertions(+), 4 deletions(-) diff --git a/packages/components/src/mobile/bottom-sheet/range-cell.native.js b/packages/components/src/mobile/bottom-sheet/range-cell.native.js index bb9c28663d65e6..cca34227120c20 100644 --- a/packages/components/src/mobile/bottom-sheet/range-cell.native.js +++ b/packages/components/src/mobile/bottom-sheet/range-cell.native.js @@ -5,7 +5,7 @@ import { Platform, AccessibilityInfo, findNodeHandle } from 'react-native'; /** * WordPress dependencies */ -import { sprintf } from '@wordpress/i18n'; +import { _x, __, sprintf } from '@wordpress/i18n'; import { useState } from '@wordpress/element'; /** @@ -38,6 +38,13 @@ export default function BottomSheetRangeCell( props ) { } }; + const accessibilityLabel = + sprintf( + /* translators: accessibility text. Inform about current spacer height value. %2$s: Spacer height current value. */ + _x( '%1$s. Current value is %2$s px', 'range cell' ), + cellProps.label, value + ); + return ( ); diff --git a/packages/components/src/mobile/slider/index.native.js b/packages/components/src/mobile/slider/index.native.js index 42907d22b4f50c..19827c8b9a4294 100644 --- a/packages/components/src/mobile/slider/index.native.js +++ b/packages/components/src/mobile/slider/index.native.js @@ -1,7 +1,7 @@ /** * External dependencies */ -import { Slider as RNSlider, TextInput, View } from 'react-native'; +import { Slider as RNSlider, TextInput, View, Platform } from 'react-native'; /** * WordPress dependencies @@ -93,7 +93,7 @@ class Slider extends Component { const { hasFocus, sliderValue } = this.state; return ( - + Date: Wed, 23 Oct 2019 17:40:19 +0200 Subject: [PATCH 07/19] Small code refactor --- packages/block-library/src/index.native.js | 3 ++- .../components/src/mobile/bottom-sheet/range-cell.native.js | 4 ++-- 2 files changed, 4 insertions(+), 3 deletions(-) diff --git a/packages/block-library/src/index.native.js b/packages/block-library/src/index.native.js index ca673bf13c0bc3..c5485580538d18 100644 --- a/packages/block-library/src/index.native.js +++ b/packages/block-library/src/index.native.js @@ -144,7 +144,8 @@ export const registerCoreBlocks = () => { mediaText, // eslint-disable-next-line no-undef !! __DEV__ ? group : null, - spacer, + // eslint-disable-next-line no-undef + !! __DEV__ ? spacer : null, ].forEach( registerBlock ); setDefaultBlockName( paragraph.name ); diff --git a/packages/components/src/mobile/bottom-sheet/range-cell.native.js b/packages/components/src/mobile/bottom-sheet/range-cell.native.js index cca34227120c20..09089c11753bae 100644 --- a/packages/components/src/mobile/bottom-sheet/range-cell.native.js +++ b/packages/components/src/mobile/bottom-sheet/range-cell.native.js @@ -40,8 +40,8 @@ export default function BottomSheetRangeCell( props ) { const accessibilityLabel = sprintf( - /* translators: accessibility text. Inform about current spacer height value. %2$s: Spacer height current value. */ - _x( '%1$s. Current value is %2$s px', 'range cell' ), + /* translators: accessibility text. Inform about current value. %2$s: Current value. */ + _x( '%1$s. Current value is %2$s', 'Slider for picking a number inside a range' ), cellProps.label, value ); From a390d8878f0b1f1ed02f96f7a3ca36f2e641dd0a Mon Sep 17 00:00:00 2001 From: lukewalczak Date: Thu, 24 Oct 2019 10:53:42 +0200 Subject: [PATCH 08/19] Styling spacer refactor --- packages/block-library/src/spacer/edit.native.js | 10 +++++++--- packages/block-library/src/spacer/editor.native.scss | 10 +++++++++- packages/components/src/mobile/slider/index.native.js | 3 ++- 3 files changed, 18 insertions(+), 5 deletions(-) diff --git a/packages/block-library/src/spacer/edit.native.js b/packages/block-library/src/spacer/edit.native.js index 975773a4be7e19..65b3a67bd75588 100644 --- a/packages/block-library/src/spacer/edit.native.js +++ b/packages/block-library/src/spacer/edit.native.js @@ -10,6 +10,7 @@ import { PanelBody, BottomSheet, } from '@wordpress/components'; +import { withPreferredColorScheme } from '@wordpress/compose'; import { useState, useEffect } from '@wordpress/element'; import { InspectorControls, @@ -24,7 +25,7 @@ import styles from './editor.scss'; const minSpacerHeight = 20; const maxSpacerHeight = 500; -const SpacerEdit = ( { isSelected, attributes, setAttributes } ) => { +const SpacerEdit = ( { isSelected, attributes, setAttributes, getStylesFromColorScheme } ) => { const { height } = attributes; const [ sliderSpacerHeight, setSpacerHeight ] = useState( height ); const [ sliderSpacerMaxHeight, setSpacerMaxHeight ] = useState( height ); @@ -49,8 +50,10 @@ const SpacerEdit = ( { isSelected, attributes, setAttributes } ) => { } ); }; + const defaultStyle = getStylesFromColorScheme( styles.staticSpacer, styles.staticDarkSpacer ); + return ( - + { maximumValue={ sliderSpacerMaxHeight } separatorType={ 'fullWidth' } onChangeValue={ ( value ) => changeSpacerHeight( value ) } + style={ styles.rangeCellContainer } /> @@ -68,4 +72,4 @@ const SpacerEdit = ( { isSelected, attributes, setAttributes } ) => { ); }; -export default SpacerEdit; +export default withPreferredColorScheme( SpacerEdit ); diff --git a/packages/block-library/src/spacer/editor.native.scss b/packages/block-library/src/spacer/editor.native.scss index 2ce8c8e356c38f..cc8f941a968b18 100644 --- a/packages/block-library/src/spacer/editor.native.scss +++ b/packages/block-library/src/spacer/editor.native.scss @@ -5,6 +5,14 @@ border-radius: 1px; } +.staticDarkSpacer { + border: $border-width dashed rgba($color: $light-gray-500, $alpha: 0.3); +} + .selectedSpacer { - border: $border-width solid $blue-wordpress; + border: $border-width * 2 solid $blue-30; +} + +.rangeCellContainer { + padding-bottom: 16px; } diff --git a/packages/components/src/mobile/slider/index.native.js b/packages/components/src/mobile/slider/index.native.js index 19827c8b9a4294..283a28af900382 100644 --- a/packages/components/src/mobile/slider/index.native.js +++ b/packages/components/src/mobile/slider/index.native.js @@ -113,7 +113,8 @@ class Slider extends Component { onChangeText={ this.handleChange } onFocus={ this.handleToggleFocus } onBlur={ this.handleToggleFocus } - keyboardType="numeric" + keyboardType="number-pad" + returnKeyType="done" value={ `${ sliderValue }` } /> From 90fe027edb61331d507903be699db768af9c35cb Mon Sep 17 00:00:00 2001 From: lukewalczak Date: Thu, 24 Oct 2019 14:34:50 +0200 Subject: [PATCH 09/19] Move logic to RangeCell --- .../block-library/src/spacer/edit.native.js | 19 +++---------------- .../mobile/bottom-sheet/range-cell.native.js | 15 ++++++++++++++- 2 files changed, 17 insertions(+), 17 deletions(-) diff --git a/packages/block-library/src/spacer/edit.native.js b/packages/block-library/src/spacer/edit.native.js index 65b3a67bd75588..0eda5a5921eeb2 100644 --- a/packages/block-library/src/spacer/edit.native.js +++ b/packages/block-library/src/spacer/edit.native.js @@ -27,7 +27,6 @@ const maxSpacerHeight = 500; const SpacerEdit = ( { isSelected, attributes, setAttributes, getStylesFromColorScheme } ) => { const { height } = attributes; - const [ sliderSpacerHeight, setSpacerHeight ] = useState( height ); const [ sliderSpacerMaxHeight, setSpacerMaxHeight ] = useState( height ); // Height defined on the web can be higher than @@ -37,19 +36,6 @@ const SpacerEdit = ( { isSelected, attributes, setAttributes, getStylesFromColor setSpacerMaxHeight( height > maxSpacerHeight ? height * 2 : maxSpacerHeight ); }, [] ); - const changeSpacerHeight = ( value ) => { - let spacerHeight = value; - setSpacerHeight( spacerHeight ); - if ( spacerHeight < minSpacerHeight ) { - spacerHeight = minSpacerHeight; - } else if ( spacerHeight > sliderSpacerMaxHeight ) { - spacerHeight = sliderSpacerMaxHeight; - } - setAttributes( { - height: spacerHeight, - } ); - }; - const defaultStyle = getStylesFromColorScheme( styles.staticSpacer, styles.staticDarkSpacer ); return ( @@ -59,11 +45,12 @@ const SpacerEdit = ( { isSelected, attributes, setAttributes, getStylesFromColor changeSpacerHeight( value ) } + value={ height } + attribute="height" + setAttributes={ setAttributes } style={ styles.rangeCellContainer } /> diff --git a/packages/components/src/mobile/bottom-sheet/range-cell.native.js b/packages/components/src/mobile/bottom-sheet/range-cell.native.js index 09089c11753bae..02a330f74abf13 100644 --- a/packages/components/src/mobile/bottom-sheet/range-cell.native.js +++ b/packages/components/src/mobile/bottom-sheet/range-cell.native.js @@ -17,8 +17,8 @@ import Slider from '../slider'; export default function BottomSheetRangeCell( props ) { const { value, + setAttributes, defaultValue, - onChangeValue, minimumValue = 0, maximumValue = 10, disabled, @@ -26,10 +26,23 @@ export default function BottomSheetRangeCell( props ) { minimumTrackTintColor = '#00669b', maximumTrackTintColor = Platform.OS === 'ios' ? '#e9eff3' : '#909090', thumbTintColor = Platform.OS === 'android' && '#00669b', + attribute, ...cellProps } = props; const [ accessible, onChangeAccessible ] = useState( true ); + const onChangeValue = ( initialValue ) => { + let sliderValue = initialValue; + if ( sliderValue < minimumValue ) { + sliderValue = minimumValue; + } else if ( sliderValue > maximumValue ) { + sliderValue = maximumValue; + } + setAttributes( { + [ attribute ]: sliderValue, + } ); + }; + const onCellPress = () => { onChangeAccessible( false ); if ( this.sliderRef ) { From a1d9a10c832741ec81a20ed962896ab396dffc29 Mon Sep 17 00:00:00 2001 From: lukewalczak Date: Thu, 24 Oct 2019 16:37:02 +0200 Subject: [PATCH 10/19] Keep Slider along with TextInput within RangeCell --- .../mobile/bottom-sheet/range-cell.native.js | 206 ++++++++++++------ .../range-cell.native.scss} | 7 - .../src/mobile/slider/index.native.js | 125 ----------- 3 files changed, 143 insertions(+), 195 deletions(-) rename packages/components/src/mobile/{slider/styles.scss => bottom-sheet/range-cell.native.scss} (72%) delete mode 100644 packages/components/src/mobile/slider/index.native.js diff --git a/packages/components/src/mobile/bottom-sheet/range-cell.native.js b/packages/components/src/mobile/bottom-sheet/range-cell.native.js index 02a330f74abf13..1bf4c81b05b14c 100644 --- a/packages/components/src/mobile/bottom-sheet/range-cell.native.js +++ b/packages/components/src/mobile/bottom-sheet/range-cell.native.js @@ -1,37 +1,87 @@ /** * External dependencies */ -import { Platform, AccessibilityInfo, findNodeHandle } from 'react-native'; +import { Platform, AccessibilityInfo, findNodeHandle, TextInput, Slider } from 'react-native'; + /** * WordPress dependencies */ import { _x, __, sprintf } from '@wordpress/i18n'; -import { useState } from '@wordpress/element'; +import { Component } from '@wordpress/element'; /** * Internal dependencies */ import Cell from './cell'; -import Slider from '../slider'; - -export default function BottomSheetRangeCell( props ) { - const { - value, - setAttributes, - defaultValue, - minimumValue = 0, - maximumValue = 10, - disabled, - step = 1, - minimumTrackTintColor = '#00669b', - maximumTrackTintColor = Platform.OS === 'ios' ? '#e9eff3' : '#909090', - thumbTintColor = Platform.OS === 'android' && '#00669b', - attribute, - ...cellProps - } = props; - const [ accessible, onChangeAccessible ] = useState( true ); - - const onChangeValue = ( initialValue ) => { +// import Slider from '../slider'; +import styles from './range-cell.scss'; + +class BottomSheetRangeCell extends Component { + constructor( props ) { + super( props ); + this.handleToggleFocus = this.handleToggleFocus.bind( this ); + this.handleChange = this.handleChange.bind( this ); + this.handleValueSave = this.handleValueSave.bind( this ); + this.handleReset = this.handleReset.bind( this ); + + const initialValue = this.validateInput( props.value || props.defaultValue || props.minimumValue ); + + this.state = { accessible: true, sliderValue: initialValue, initialValue, hasFocus: false }; + } + + componentDidUpdate( ) { + const reset = this.props.value === null; + if ( reset ) { + this.handleReset(); + } + } + + componentWillUnmount() { + this.handleToggleFocus(); + } + + handleChange( text ) { + if ( ! isNaN( Number( text ) ) ) { + this.setState( { sliderValue: text } ); + } + } + + handleReset() { + this.handleValueSave( this.props.defaultValue || this.state.initialValue ); + } + + handleToggleFocus( validateInput = true ) { + const newState = { hasFocus: ! this.state.hasFocus }; + + if ( validateInput ) { + const sliderValue = this.validateInput( this.state.sliderValue ); + this.handleValueSave( sliderValue ); + } + + this.setState( newState ); + } + + validateInput( text ) { + const { minimumValue, maximumValue } = this.props; + if ( ! text ) { + return minimumValue; + } + if ( typeof text === 'number' ) { + return Math.min( Math.max( text, minimumValue ), maximumValue ); + } + return Math.min( Math.max( text.replace( /[^0-9]/g, '' ).replace( /^0+(?=\d)/, '' ), minimumValue ), maximumValue ); + } + + handleValueSave( text ) { + if ( ! isNaN( Number( text ) ) ) { + this.onChangeValue( text ); + this.setState( { sliderValue: text } ); + } + } + + onChangeValue = ( initialValue ) => { + const { minimumValue, maximumValue, setAttributes, attribute } = this.props; + let sliderValue = initialValue; if ( sliderValue < minimumValue ) { sliderValue = minimumValue; @@ -43,51 +93,81 @@ export default function BottomSheetRangeCell( props ) { } ); }; - const onCellPress = () => { - onChangeAccessible( false ); + onCellPress = () => { + this.setState( { accessible: false } ); if ( this.sliderRef ) { const reactTag = findNodeHandle( this.sliderRef ); AccessibilityInfo.setAccessibilityFocus( reactTag ); } }; - const accessibilityLabel = - sprintf( - /* translators: accessibility text. Inform about current value. %2$s: Current value. */ - _x( '%1$s. Current value is %2$s', 'Slider for picking a number inside a range' ), - cellProps.label, value - ); - - return ( - - { - this.sliderRef = slider; - } } - accessibilityRole={ 'adjustable' } - accessible={ true } - /> - - ); + render() { + const { + value, + defaultValue, + minimumValue = 0, + maximumValue = 10, + disabled, + step = 1, + minimumTrackTintColor = '#00669b', + maximumTrackTintColor = Platform.OS === 'ios' ? '#e9eff3' : '#909090', + thumbTintColor = Platform.OS === 'android' && '#00669b', + ...cellProps + } = this.props; + + const { hasFocus, sliderValue } = this.state; + + const accessibilityLabel = + sprintf( + /* translators: accessibility text. Inform about current value. %2$s: Current value. */ + _x( '%1$s. Current value is %2$s', 'Slider for picking a number inside a range' ), + cellProps.label, value + ); + + return ( + + { + this.sliderRef = slider; + } } + style={ styles.slider } + accessibilityRole={ 'adjustable' } + accessible={ true } + /> + + + ); + } } + +export default BottomSheetRangeCell; diff --git a/packages/components/src/mobile/slider/styles.scss b/packages/components/src/mobile/bottom-sheet/range-cell.native.scss similarity index 72% rename from packages/components/src/mobile/slider/styles.scss rename to packages/components/src/mobile/bottom-sheet/range-cell.native.scss index 326880b621807a..93099e7a8a6415 100644 --- a/packages/components/src/mobile/slider/styles.scss +++ b/packages/components/src/mobile/bottom-sheet/range-cell.native.scss @@ -1,10 +1,3 @@ -.sliderContainer { - flex: 1; - flex-direction: row; - align-content: center; - justify-content: space-evenly; -} - .slider { flex-grow: 1; } diff --git a/packages/components/src/mobile/slider/index.native.js b/packages/components/src/mobile/slider/index.native.js deleted file mode 100644 index 283a28af900382..00000000000000 --- a/packages/components/src/mobile/slider/index.native.js +++ /dev/null @@ -1,125 +0,0 @@ -/** - * External dependencies - */ -import { Slider as RNSlider, TextInput, View, Platform } from 'react-native'; - -/** - * WordPress dependencies - */ -import { Component } from '@wordpress/element'; - -/** - * Internal dependencies - */ -import styles from './styles.scss'; - -class Slider extends Component { - constructor( props ) { - super( props ); - this.handleToggleFocus = this.handleToggleFocus.bind( this ); - this.handleChange = this.handleChange.bind( this ); - this.handleValueSave = this.handleValueSave.bind( this ); - this.handleReset = this.handleReset.bind( this ); - - const initialValue = this.validateInput( props.value || props.defaultValue || props.minimumValue ); - - this.state = { hasFocus: false, initialValue, sliderValue: initialValue }; - } - - componentDidUpdate( ) { - const reset = this.props.value === null; - if ( reset ) { - this.handleReset(); - } - } - - componentWillUnmount() { - this.handleToggleFocus(); - } - - handleToggleFocus( validateInput = true ) { - const newState = { hasFocus: ! this.state.hasFocus }; - - if ( validateInput ) { - const sliderValue = this.validateInput( this.state.sliderValue ); - this.handleValueSave( sliderValue ); - } - - this.setState( newState ); - } - - validateInput( text ) { - const { minimumValue, maximumValue } = this.props; - if ( ! text ) { - return minimumValue; - } - if ( typeof text === 'number' ) { - return Math.min( Math.max( text, minimumValue ), maximumValue ); - } - return Math.min( Math.max( text.replace( /[^0-9]/g, '' ).replace( /^0+(?=\d)/, '' ), minimumValue ), maximumValue ); - } - - handleChange( text ) { - if ( ! isNaN( Number( text ) ) ) { - this.setState( { sliderValue: text } ); - } - } - - handleValueSave( text ) { - if ( ! isNaN( Number( text ) ) ) { - if ( this.props.onChangeValue ) { - this.props.onChangeValue( text ); - } - this.setState( { sliderValue: text } ); - } - } - - handleReset() { - this.handleValueSave( this.props.defaultValue || this.state.initialValue ); - } - - render() { - const { - minimumValue, - maximumValue, - disabled, - step, - minimumTrackTintColor, - maximumTrackTintColor, - thumbTintColor, - ...sliderProps - } = this.props; - - const { hasFocus, sliderValue } = this.state; - - return ( - - - - - ); - } -} - -export default Slider; From 833cc762504adb75bb1c3328a4c3cd0665d65b3e Mon Sep 17 00:00:00 2001 From: lukewalczak Date: Thu, 24 Oct 2019 16:50:21 +0200 Subject: [PATCH 11/19] Small cleanup --- .../components/src/mobile/bottom-sheet/range-cell.native.js | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/packages/components/src/mobile/bottom-sheet/range-cell.native.js b/packages/components/src/mobile/bottom-sheet/range-cell.native.js index 1bf4c81b05b14c..707dc97e8dd804 100644 --- a/packages/components/src/mobile/bottom-sheet/range-cell.native.js +++ b/packages/components/src/mobile/bottom-sheet/range-cell.native.js @@ -13,7 +13,6 @@ import { Component } from '@wordpress/element'; * Internal dependencies */ import Cell from './cell'; -// import Slider from '../slider'; import styles from './range-cell.scss'; class BottomSheetRangeCell extends Component { @@ -115,7 +114,7 @@ class BottomSheetRangeCell extends Component { ...cellProps } = this.props; - const { hasFocus, sliderValue } = this.state; + const { hasFocus, sliderValue, accessible } = this.state; const accessibilityLabel = sprintf( @@ -129,7 +128,7 @@ class BottomSheetRangeCell extends Component { { ...cellProps } accessibilityRole={ 'none' } editable={ true } - accessible={ this.state.accessible } + accessible={ accessible } onPress={ this.onCellPress } accessibilityLabel={ accessibilityLabel } accessibilityHint={ @@ -154,7 +153,6 @@ class BottomSheetRangeCell extends Component { } } style={ styles.slider } accessibilityRole={ 'adjustable' } - accessible={ true } /> Date: Thu, 24 Oct 2019 20:52:23 +0200 Subject: [PATCH 12/19] Fix missing binds --- packages/block-library/src/spacer/edit.native.js | 2 +- .../src/mobile/bottom-sheet/range-cell.native.js | 10 ++++++---- 2 files changed, 7 insertions(+), 5 deletions(-) diff --git a/packages/block-library/src/spacer/edit.native.js b/packages/block-library/src/spacer/edit.native.js index 0eda5a5921eeb2..8a638245dde845 100644 --- a/packages/block-library/src/spacer/edit.native.js +++ b/packages/block-library/src/spacer/edit.native.js @@ -47,7 +47,7 @@ const SpacerEdit = ( { isSelected, attributes, setAttributes, getStylesFromColor label={ __( 'Height in pixels' ) } minimumValue={ minSpacerHeight } maximumValue={ sliderSpacerMaxHeight } - separatorType={ 'fullWidth' } + separatorType={ 'none' } value={ height } attribute="height" setAttributes={ setAttributes } diff --git a/packages/components/src/mobile/bottom-sheet/range-cell.native.js b/packages/components/src/mobile/bottom-sheet/range-cell.native.js index 707dc97e8dd804..2403cb3ea788dd 100644 --- a/packages/components/src/mobile/bottom-sheet/range-cell.native.js +++ b/packages/components/src/mobile/bottom-sheet/range-cell.native.js @@ -22,6 +22,8 @@ class BottomSheetRangeCell extends Component { this.handleChange = this.handleChange.bind( this ); this.handleValueSave = this.handleValueSave.bind( this ); this.handleReset = this.handleReset.bind( this ); + this.onChangeValue = this.onChangeValue.bind( this ); + this.onCellPress = this.onCellPress.bind( this ); const initialValue = this.validateInput( props.value || props.defaultValue || props.minimumValue ); @@ -78,7 +80,7 @@ class BottomSheetRangeCell extends Component { } } - onChangeValue = ( initialValue ) => { + onChangeValue( initialValue ) { const { minimumValue, maximumValue, setAttributes, attribute } = this.props; let sliderValue = initialValue; @@ -90,15 +92,15 @@ class BottomSheetRangeCell extends Component { setAttributes( { [ attribute ]: sliderValue, } ); - }; + } - onCellPress = () => { + onCellPress() { this.setState( { accessible: false } ); if ( this.sliderRef ) { const reactTag = findNodeHandle( this.sliderRef ); AccessibilityInfo.setAccessibilityFocus( reactTag ); } - }; + } render() { const { From 8c127b93cbc2c2b5de3ce74c05f9759fb103ef42 Mon Sep 17 00:00:00 2001 From: lukewalczak Date: Mon, 28 Oct 2019 14:00:47 +0100 Subject: [PATCH 13/19] Fix focusing slider on iphoneX when VO is on --- packages/components/src/mobile/bottom-sheet/cell.native.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/components/src/mobile/bottom-sheet/cell.native.js b/packages/components/src/mobile/bottom-sheet/cell.native.js index 8e36025ad47071..56859d5bbce4e2 100644 --- a/packages/components/src/mobile/bottom-sheet/cell.native.js +++ b/packages/components/src/mobile/bottom-sheet/cell.native.js @@ -175,7 +175,7 @@ class BottomSheetCell extends Component { { drawTopSeparator && ( ) } - + { icon && ( From 84ade89432d31f9856ee86686187f8ea63e5cee1 Mon Sep 17 00:00:00 2001 From: lukewalczak Date: Mon, 28 Oct 2019 15:10:49 +0100 Subject: [PATCH 14/19] Adjust a11y voice over --- .../components/src/mobile/bottom-sheet/range-cell.native.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/components/src/mobile/bottom-sheet/range-cell.native.js b/packages/components/src/mobile/bottom-sheet/range-cell.native.js index 2403cb3ea788dd..15dfefdde409a2 100644 --- a/packages/components/src/mobile/bottom-sheet/range-cell.native.js +++ b/packages/components/src/mobile/bottom-sheet/range-cell.native.js @@ -42,8 +42,10 @@ class BottomSheetRangeCell extends Component { } handleChange( text ) { + const announcement = sprintf( __( 'Current value is %s' ), text ); if ( ! isNaN( Number( text ) ) ) { this.setState( { sliderValue: text } ); + AccessibilityInfo.announceForAccessibility( announcement ); } } @@ -129,7 +131,7 @@ class BottomSheetRangeCell extends Component { Date: Mon, 28 Oct 2019 17:38:18 +0100 Subject: [PATCH 15/19] Refactor pointerEvents when screen reader is on --- .../src/mobile/bottom-sheet/cell.native.js | 13 +++++++++++-- 1 file changed, 11 insertions(+), 2 deletions(-) diff --git a/packages/components/src/mobile/bottom-sheet/cell.native.js b/packages/components/src/mobile/bottom-sheet/cell.native.js index 56859d5bbce4e2..b6b3334a222cad 100644 --- a/packages/components/src/mobile/bottom-sheet/cell.native.js +++ b/packages/components/src/mobile/bottom-sheet/cell.native.js @@ -1,7 +1,7 @@ /** * External dependencies */ -import { TouchableOpacity, Text, View, TextInput, I18nManager } from 'react-native'; +import { TouchableOpacity, Text, View, TextInput, I18nManager, AccessibilityInfo } from 'react-native'; import { isEmpty } from 'lodash'; /** @@ -23,6 +23,7 @@ class BottomSheetCell extends Component { super( ...arguments ); this.state = { isEditingValue: props.autoFocus || false, + isScreenReaderEnabled: false, }; } @@ -32,6 +33,13 @@ class BottomSheetCell extends Component { } } + componentDidMount() { + AccessibilityInfo.isScreenReaderEnabled().then( + ( isScreenReaderEnabled ) => + this.setState( { isScreenReaderEnabled } ) + ); + } + render() { const { accessible, @@ -158,6 +166,7 @@ class BottomSheetCell extends Component { }; const iconStyle = getStylesFromColorScheme( styles.icon, styles.iconDark ); + const containerPointerEvents = this.state.isScreenReaderEnabled && accessible ? 'none' : 'auto'; return ( ) } - + { icon && ( From 4a897fd98823b879d010ab77d6f14e5115c44f22 Mon Sep 17 00:00:00 2001 From: lukewalczak Date: Mon, 28 Oct 2019 18:25:09 +0100 Subject: [PATCH 16/19] Announce current value when finished --- .../src/mobile/bottom-sheet/range-cell.native.js | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/packages/components/src/mobile/bottom-sheet/range-cell.native.js b/packages/components/src/mobile/bottom-sheet/range-cell.native.js index 15dfefdde409a2..ac62dc61e17717 100644 --- a/packages/components/src/mobile/bottom-sheet/range-cell.native.js +++ b/packages/components/src/mobile/bottom-sheet/range-cell.native.js @@ -42,10 +42,9 @@ class BottomSheetRangeCell extends Component { } handleChange( text ) { - const announcement = sprintf( __( 'Current value is %s' ), text ); if ( ! isNaN( Number( text ) ) ) { this.setState( { sliderValue: text } ); - AccessibilityInfo.announceForAccessibility( announcement ); + this.announceCurrentValue( text ); } } @@ -79,6 +78,7 @@ class BottomSheetRangeCell extends Component { if ( ! isNaN( Number( text ) ) ) { this.onChangeValue( text ); this.setState( { sliderValue: text } ); + this.announceCurrentValue( text ); } } @@ -104,6 +104,11 @@ class BottomSheetRangeCell extends Component { } } + announceCurrentValue( value ) { + const announcement = sprintf( __( 'Current value is %s' ), value ); + AccessibilityInfo.announceForAccessibility( announcement ); + } + render() { const { value, From 7ee822e47a127c355a5c201c9c6e2cb3340f57c8 Mon Sep 17 00:00:00 2001 From: lukewalczak Date: Tue, 29 Oct 2019 12:13:13 +0100 Subject: [PATCH 17/19] Improve a11y --- .../src/mobile/bottom-sheet/cell.native.js | 17 ++++++++++++++--- 1 file changed, 14 insertions(+), 3 deletions(-) diff --git a/packages/components/src/mobile/bottom-sheet/cell.native.js b/packages/components/src/mobile/bottom-sheet/cell.native.js index b6b3334a222cad..b332af11407965 100644 --- a/packages/components/src/mobile/bottom-sheet/cell.native.js +++ b/packages/components/src/mobile/bottom-sheet/cell.native.js @@ -34,12 +34,23 @@ class BottomSheetCell extends Component { } componentDidMount() { - AccessibilityInfo.isScreenReaderEnabled().then( - ( isScreenReaderEnabled ) => - this.setState( { isScreenReaderEnabled } ) + AccessibilityInfo.addEventListener( + 'screenReaderChanged', + this.handleScreenReaderToggled, ); } + componentWillUnmount() { + AccessibilityInfo.removeEventListener( + 'screenReaderChanged', + this.handleScreenReaderToggled, + ); + } + + handleScreenReaderToggled( isScreenReaderEnabled ) { + this.setState( { isScreenReaderEnabled } ); + } + render() { const { accessible, From 014cd209f431c483f1588a3d3589c4d8a6fa9fe4 Mon Sep 17 00:00:00 2001 From: lukewalczak Date: Wed, 30 Oct 2019 11:03:38 +0100 Subject: [PATCH 18/19] Fix a11y on iPhoneX --- packages/components/src/mobile/bottom-sheet/cell.native.js | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/packages/components/src/mobile/bottom-sheet/cell.native.js b/packages/components/src/mobile/bottom-sheet/cell.native.js index b332af11407965..7f44944060a56e 100644 --- a/packages/components/src/mobile/bottom-sheet/cell.native.js +++ b/packages/components/src/mobile/bottom-sheet/cell.native.js @@ -25,6 +25,8 @@ class BottomSheetCell extends Component { isEditingValue: props.autoFocus || false, isScreenReaderEnabled: false, }; + + this.handleScreenReaderToggled = this.handleScreenReaderToggled.bind( this ); } componentDidUpdate() { @@ -38,6 +40,10 @@ class BottomSheetCell extends Component { 'screenReaderChanged', this.handleScreenReaderToggled, ); + + AccessibilityInfo.isScreenReaderEnabled().then( ( isScreenReaderEnabled ) => { + this.setState( { isScreenReaderEnabled } ); + } ); } componentWillUnmount() { From 2d643c07bdb1fec502a0c321efb3f471f541683b Mon Sep 17 00:00:00 2001 From: lukewalczak Date: Wed, 30 Oct 2019 14:43:16 +0100 Subject: [PATCH 19/19] Update info for translators --- .../components/src/mobile/bottom-sheet/range-cell.native.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/components/src/mobile/bottom-sheet/range-cell.native.js b/packages/components/src/mobile/bottom-sheet/range-cell.native.js index ac62dc61e17717..e3eb50a6e4e216 100644 --- a/packages/components/src/mobile/bottom-sheet/range-cell.native.js +++ b/packages/components/src/mobile/bottom-sheet/range-cell.native.js @@ -127,7 +127,7 @@ class BottomSheetRangeCell extends Component { const accessibilityLabel = sprintf( - /* translators: accessibility text. Inform about current value. %2$s: Current value. */ + /* translators: accessibility text. Inform about current value. %1$s: Control label %2$s: Current value. */ _x( '%1$s. Current value is %2$s', 'Slider for picking a number inside a range' ), cellProps.label, value );