Code refactor, adjusting to comments

WordPress · Jul 10, 2020 · 9e03916 · 9e03916
1 parent 1491e3c
commit 9e03916
Show file tree

Hide file tree

Showing 4 changed files with 72 additions and 15 deletions.
diff --git a/packages/block-editor/src/components/block-variation-picker/index.native.js b/packages/block-editor/src/components/block-variation-picker/index.native.js
@@ -1,22 +1,29 @@
 /**
  * External dependencies
  */
-import { ScrollView } from 'react-native';
+import {
+	ScrollView,
+	View,
+	Text,
+	TouchableWithoutFeedback,
+	Platform,
+} from 'react-native';
 import { map } from 'lodash';
 
 /**
  * WordPress dependencies
  */
-
 import { withSelect, useDispatch } from '@wordpress/data';
-import { compose, withPreferredColorScheme } from '@wordpress/compose';
+import { compose, usePreferredColorSchemeStyle } from '@wordpress/compose';
 import { createBlock } from '@wordpress/blocks';
 import { __ } from '@wordpress/i18n';
 import {
 	PanelBody,
 	BottomSheet,
 	UnsupportedFooterControl,
 } from '@wordpress/components';
+import { Icon, close } from '@wordpress/icons';
+
 /**
  * Internal dependencies
  */
@@ -36,13 +43,43 @@ function BlockVariationPicker( { isVisible, onClose, clientId, variations } ) {
 		);
 	};
 	const { replaceInnerBlocks } = useDispatch( 'core/block-editor' );
+	const hitSlop = { top: 22, bottom: 22, left: 22, right: 22 };
+	const isIOS = Platform.OS === 'ios';
+
+	const cancelButtonStyle = usePreferredColorSchemeStyle(
+		styles.cancelButton,
+		styles.cancelButtonDark
+	);
 
 	return (
 		<BottomSheet
 			isVisible={ isVisible }
 			onClose={ onClose }
-			title={ __( 'Select a preset' ) }
+			title={ __( 'Select a layout' ) }
 			contentStyle={ styles.contentStyle }
+			leftButton={
+				<TouchableWithoutFeedback
+					onPress={ onClose }
+					hitSlop={ hitSlop }
+				>
+					<View>
+						{ isIOS ? (
+							<Text
+								style={ cancelButtonStyle }
+								maxFontSizeMultiplier={ 2 }
+							>
+								{ __( 'Cancel' ) }
+							</Text>
+						) : (
+							<Icon
+								icon={ close }
+								size={ 24 }
+								style={ styles.closeIcon }
+							/>
+						) }
+					</View>
+				</TouchableWithoutFeedback>
+			}
 		>
 			<ScrollView
 				horizontal
@@ -60,7 +97,8 @@ function BlockVariationPicker( { isVisible, onClose, clientId, variations } ) {
 									clientId,
 									createBlocksFromInnerBlocksTemplate(
 										v.innerBlocks
-									)
+									),
+									false
 								);
 								onClose();
 							} }
@@ -85,6 +123,5 @@ export default compose(
 		return {
 			date: getBlockVariations( 'core/columns', 'block' ),
 		};
-	} ),
-	withPreferredColorScheme
+	} )
 )( BlockVariationPicker );
diff --git a/packages/block-editor/src/components/block-variation-picker/style.native.scss b/packages/block-editor/src/components/block-variation-picker/style.native.scss
@@ -1,13 +1,28 @@
 .contentContainerStyle {
 	flex-direction: row;
 	padding-bottom: 20px;
+	padding-left: $grid-unit-20;
+	padding-right: $grid-unit-20;
 }
 
 .containerStyle {
-	padding-top: 12px;
+	padding-top: $grid-unit-15;
 }
 
 .contentStyle {
 	padding-left: 0;
 	padding-right: 0;
 }
+
+.cancelButton {
+	color: #d63638;
+	font-size: 16px;
+}
+
+.cancelButtonDark {
+	color: #f86368;
+}
+
+.closeIcon {
+	color: $gray;
+}
diff --git a/packages/block-library/src/column/edit.native.js b/packages/block-library/src/column/edit.native.js
@@ -33,6 +33,7 @@ function ColumnEdit( {
 	getStylesFromColorScheme,
 	isParentSelected,
 	contentStyle,
+	columnCount,
 } ) {
 	const updateAlignment = ( alignment ) => {
 		setAttributes( { verticalAlignment: alignment } );
@@ -69,7 +70,7 @@ function ColumnEdit( {
 						min={ 1 }
 						max={ 100 }
 						step={ 0.1 }
-						value={ width || 50 }
+						value={ width || 100 / columnCount }
 						onChange={ ( nextWidth ) => {
 							setAttributes( {
 								width: nextWidth,
@@ -135,13 +136,16 @@ export default compose( [
 		const parentId = getBlockRootClientId( clientId );
 		const hasChildren = !! getBlockCount( clientId );
 
+		const columnCount = getBlockCount( parentId );
+
 		const isParentSelected =
 			selectedBlockClientId && selectedBlockClientId === parentId;
 
 		return {
 			hasChildren,
 			isParentSelected,
 			isSelected,
+			columnCount,
 		};
 	} ),
 	withPreferredColorScheme,

diff --git a/packages/components/src/mobile/bottom-sheet/range-cell.native.js b/packages/components/src/mobile/bottom-sheet/range-cell.native.js
@@ -76,10 +76,14 @@ class BottomSheetRangeCell extends Component {
 	}
 
 	handleChange( text ) {
-		const { hasFocus } = this.state;
+		text =
+			typeof text === 'number'
+				? this.toFixed( text )
+				: text.replace( ',', '.' );
+
 		if ( ! isNaN( Number( text ) ) ) {
 			this.setState( {
-				sliderValue: ! hasFocus ? this.toFixed( text ) : text,
+				sliderValue: text,
 			} );
 			this.announceCurrentValue( text );
 		}
@@ -105,10 +109,7 @@ class BottomSheetRangeCell extends Component {
 			return Math.min( Math.max( text, minimumValue ), maximumValue );
 		}
 		return Math.min(
-			Math.max(
-				text.replace( /[^0-9]\./g, '' ).replace( /^0+(?=\d)/, '' ),
-				minimumValue
-			),
+			Math.max( text.replace( /[^0-9.]\,/g, '' ), minimumValue ),
 			maximumValue
 		);
 	}