Merge branch 'update/inserter-block-search' into rnmobile/add/2575-re…

…usable-blocks-inserter # Conflicts: # packages/block-editor/src/components/inserter/search-form.native.js # packages/block-editor/src/components/inserter/style.native.scss
WordPress · Apr 27, 2021 · 4df39cd · 4df39cd
2 parents 575c58f + c16c5bc
commit 4df39cd
Show file tree

Hide file tree

Showing 8 changed files with 339 additions and 68 deletions.
diff --git a/packages/block-editor/src/components/inserter/search-form.native.js b/packages/block-editor/src/components/inserter/search-form.native.js
@@ -1,26 +1,43 @@
 /**
  * External dependencies
  */
-import { TextInput, View, TouchableHighlight } from 'react-native';
+import {
+	TextInput,
+	Text,
+	View,
+	Platform,
+	TouchableOpacity,
+} from 'react-native';
 
 /**
  * WordPress dependencies
  */
-import { useState, useRef, useCallback } from '@wordpress/element';
-import { usePreferredColorSchemeStyle } from '@wordpress/compose';
+import { useState, useRef, useCallback, useMemo } from '@wordpress/element';
+import { usePreferredColorSchemeStyleBem } from '@wordpress/compose';
 import { __ } from '@wordpress/i18n';
-import { ToolbarButton } from '@wordpress/components';
-import {
-	Icon,
-	cancelCircleFilled,
-	arrowLeft,
-	search as searchIcon,
-} from '@wordpress/icons';
+import { Gridicons } from '@wordpress/components';
+import { Icon, cancelCircleFilled, arrowLeft, close } from '@wordpress/icons';
 
 /**
  * Internal dependencies
  */
 import styles from './style.scss';
+import platformStyles from './searchFormStyles.scss';
+
+function IconButton( { icon, label, hint, style, ...props } ) {
+	return (
+		<TouchableOpacity
+			{ ...props }
+			accessible={ true }
+			accessibilityRole={ 'button' }
+			accessibilityHint={ hint }
+			accessibilityLabel={ label }
+			style={ { alignItems: 'center' } }
+		>
+			<Icon icon={ icon } fill={ style?.color } color={ style?.color } />
+		</TouchableOpacity>
+	);
+}
 
 function InserterSearchForm( {
 	value,
@@ -30,22 +47,94 @@ function InserterSearchForm( {
 } ) {
 	const [ isActive, setIsActive ] = useState( false );
 
+	const isIOS = Platform.OS === 'ios';
+
 	const inputRef = useRef();
 
-	const searchFormStyle = usePreferredColorSchemeStyle(
-		styles.searchForm,
-		styles.searchFormDark
+	const baseStyles = usePreferredColorSchemeStyleBem(
+		styles,
+		platformStyles
 	);
 
-	const searchFormInputStyle = usePreferredColorSchemeStyle(
-		styles.searchFormInput,
-		styles.searchFormInputDark
-	);
+	const activeStyles = useMemo( () => {
+		const activeSelectors = Object.keys( baseStyles ).filter(
+			( key ) => !! key.match( /active/ )
+		);
 
-	const placeholderStyle = usePreferredColorSchemeStyle(
-		styles.searchFormPlaceholder,
-		styles.searchFormPlaceholderDark
-	);
+		const _activeStyles = { ...styles };
+
+		activeSelectors.forEach( ( activeSelector ) => {
+			const selector = activeSelector
+				.replace( /-active/, '' )
+				.replace( /-$/, '' );
+
+			_activeStyles[ selector ] = {
+				...baseStyles[ selector ],
+				...baseStyles[ activeSelector ],
+			};
+		} );
+		return _activeStyles;
+	}, [] );
+
+	const newStyles = useMemo( () => {
+		return isActive ? activeStyles : baseStyles;
+	}, [ isActive ] );
+
+	const {
+		'inserter-search-form__container': containerStyle,
+		'inserter-search-form__input-container': inputContainerStyle,
+		'inserter-search-form__form-input': formInputStyle,
+		'inserter-search-form__form-input-placeholder': placeholderStyle,
+		'inserter-search-form__input-button': inputButtonStyle,
+		'inserter-search-form__input-button-left': inputButtonLeftStyle,
+		'inserter-search-form__input-button-right': inputButtonRightStyle,
+		'inserter-search-form__cancel-button': cancelButtonStyle,
+		'inserter-search-form__cancel-button-text': cancelButtonTextStyle,
+		'inserter-search-form__icon': iconStyle,
+	} = newStyles;
+
+	function clearInput() {
+		onChange( '' );
+	}
+
+	function onCancel() {
+		inputRef.current.blur();
+		clearInput();
+		onActive( false );
+	}
+
+	function renderLeftButton() {
+		if ( ! isIOS && isActive ) {
+			return (
+				<IconButton
+					label={ __( 'Cancel Search' ) }
+					icon={ arrowLeft }
+					onPress={ onCancel }
+					style={ iconStyle }
+				/>
+			);
+		}
+
+		return <Icon icon={ Gridicons.search } fill={ iconStyle.color } />;
+	}
+
+	function renderRightButton() {
+		// Add a View element to properly center the input placeholder via flexbox
+		if ( isIOS && ! isActive ) {
+			return <View />;
+		}
+
+		if ( !! value ) {
+			return (
+				<IconButton
+					label={ __( 'Clear search' ) }
+					icon={ isIOS ? cancelCircleFilled : close }
+					onPress={ clearInput }
+					style={ iconStyle }
+				/>
+			);
+		}
+	}
 
 	const onActive = useCallback(
 		( active ) => {
@@ -58,49 +147,50 @@ function InserterSearchForm( {
 	);
 
 	return (
-		<TouchableHighlight accessible={ false } onLayout={ onLayout }>
-			<View style={ searchFormStyle }>
-				{ isActive ? (
-					<ToolbarButton
-						title={ __( 'Cancel search' ) }
-						icon={ arrowLeft }
-						onClick={ () => {
-							inputRef.current.blur();
-							onChange( '' );
-							onActive( false );
-						} }
-					/>
-				) : (
-					<ToolbarButton
-						title={ __( 'Search block' ) }
-						icon={ searchIcon }
-						onClick={ () => {
-							inputRef.current.focus();
-							onActive( true );
-						} }
-					/>
-				) }
+		<TouchableOpacity
+			style={ containerStyle }
+			onPress={ () => {
+				onActive( true );
+				inputRef.current.focus();
+			} }
+			onLayout={ onLayout }
+			activeOpacity={ 1 }
+		>
+			<View style={ inputContainerStyle }>
+				<View
+					style={ { ...inputButtonStyle, ...inputButtonLeftStyle } }
+				>
+					{ renderLeftButton() }
+				</View>
 				<TextInput
 					ref={ inputRef }
-					style={ searchFormInputStyle }
+					style={ formInputStyle }
 					placeholderTextColor={ placeholderStyle.color }
 					onChangeText={ onChange }
 					onFocus={ () => onActive( true ) }
 					value={ value }
 					placeholder={ __( 'Search blocks' ) }
 				/>
-
-				{ !! value && (
-					<ToolbarButton
-						title={ __( 'Clear search' ) }
-						icon={ <Icon icon={ cancelCircleFilled } /> }
-						onClick={ () => {
-							onChange( '' );
-						} }
-					/>
-				) }
+				<View
+					style={ { ...inputButtonStyle, ...inputButtonRightStyle } }
+				>
+					{ renderRightButton() }
+				</View>
 			</View>
-		</TouchableHighlight>
+			{ isActive && isIOS && (
+				<View style={ cancelButtonStyle }>
+					<Text
+						onPress={ onCancel }
+						style={ cancelButtonTextStyle }
+						accessible={ true }
+						accessibilityRole={ 'button' }
+						accessibilityLabel={ __( 'Cancel Search' ) }
+					>
+						{ __( 'Cancel' ) }
+					</Text>
+				</View>
+			) }
+		</TouchableOpacity>
 	);
 }
 

diff --git a/packages/block-editor/src/components/inserter/searchFormStyles.android.scss b/packages/block-editor/src/components/inserter/searchFormStyles.android.scss
@@ -0,0 +1,34 @@
+.inserter-search-form__container {
+	border-radius: 8px;
+	elevation: 1;
+	background-color: $white;
+}
+.inserter-search-form__container--dark {
+	elevation: 0;
+	background-color: none;
+}
+
+.inserter-search-form__container--active {
+	border-bottom-color: $gray-light;
+	border-bottom-width: 2px;
+	margin-left: 0;
+	margin-right: 0;
+	border-radius: 0;
+	elevation: 0;
+}
+
+.inserter-search-form__input-container--active {
+	border: none;
+}
+
+.inserter-search-form__form-input {
+	flex: 1;
+}
+
+.inserter-search-form__input-button-left--active {
+	margin: 0 16px;
+}
+
+.inserter-search-form__input-button-right--active {
+	margin-right: 12px;
+}
diff --git a/packages/block-editor/src/components/inserter/searchFormStyles.ios.scss b/packages/block-editor/src/components/inserter/searchFormStyles.ios.scss
@@ -0,0 +1,26 @@
+.inserter-search-form__container {
+	height: 40px;
+}
+.inserter-search-form__container--active {
+	margin-right: 0;
+}
+
+.inserter-search-form__input-container {
+	background-color: $gray-light;
+}
+
+.inserter-search-form__input-container--dark {
+	background-color: $dark-ultra-dim;
+}
+
+.inserter-search-form__form-input--active {
+	flex: 1;
+}
+
+.inserter-search-form__input-button-left--active {
+	margin: 0 8px 0 12px;
+}
+
+.inserter-search-form__input-button-right--active {
+	margin: 0 12px 0 8px;
+}
diff --git a/packages/block-editor/src/components/inserter/style.native.scss b/packages/block-editor/src/components/inserter/style.native.scss
@@ -13,37 +13,81 @@
 	padding-top: 8;
 }
 
-.searchForm {
+.inserter-search-form__container {
 	height: 46px;
-	border-radius: 8px;
-	color: $gray-dark;
-	margin: $grid-unit-30;
-	background-color: $gray-light;
+	margin: 0 27px $grid-unit-10;
+	flex-direction: row;
+	justify-content: space-between;
+}
+
+.inserter-search-form__input-container {
+	height: 100%;
+	border-radius: $grid-unit;
 	flex-direction: row;
 	justify-content: space-between;
+	flex: 4;
 }
 
-.searchFormDark {
+.inserter-search-form__input-container--dark {
 	background-color: rgba($white, 0.07);
 }
 
-.searchFormInput {
+.inserter-search-form__form-input {
 	color: $gray-dark;
-	flex: 2;
+	text-align: left;
+	font-size: 17px;
+	align-items: center;
 }
 
-.searchFormInputDark {
+.inserter-search-form__form-input--dark {
 	color: $white;
 }
 
-.searchFormPlaceholder {
+.inserter-search-form__form-input-placeholder {
 	color: $gray;
 }
 
-.searchFormPlaceholderDark {
+.inserter-search-form__form-input-placeholder--dark {
 	color: rgba($white, 0.8);
 }
 
+.inserter-search-form__cancel-button {
+	height: 100%;
+	justify-content: center;
+	align-items: flex-start;
+	flex: 1;
+}
+
+.inserter-search-form__cancel-button-text {
+	color: $blue-wordpress;
+	font-size: 17px;
+	margin-left: 8px;
+}
+
+.inserter-search-form__icon {
+	margin: 0 12px;
+	justify-content: center;
+	width: 19px;
+	color: $gray;
+}
+
+.inserter-search-form__icon--dark {
+	color: $white;
+}
+
+.inserter-search-form__input-button {
+	justify-content: center;
+	width: 19px;
+}
+
+.inserter-search-form__input-button-left {
+	margin: 0 12px;
+}
+
+.inserter-search-form__input-button-right {
+	margin: 0 12px;
+}
+
 .inserter-tabs__container {
 	height: 100%;
 	width: 100%;