Refactor FontSizePicker component. Fix bug on undo. (#21757)

WordPress · Apr 29, 2020 · 078158b · 078158b
1 parent 2ab143e
commit 078158b
Showing 1 changed file with 21 additions and 49 deletions.
diff --git a/packages/components/src/font-size-picker/index.js b/packages/components/src/font-size-picker/index.js
@@ -1,7 +1,6 @@
 /**
  * WordPress dependencies
  */
-import { useState } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { useInstanceId } from '@wordpress/compose';
 import { textColor } from '@wordpress/icons';
@@ -51,53 +50,17 @@ export default function FontSizePicker( {
 	withSlider = false,
 } ) {
 	const instanceId = useInstanceId( FontSizePicker );
-	const [ currentSelectValue, setCurrentSelectValue ] = useState(
-		getSelectValueFromFontSize( fontSizes, value )
-	);
 
 	if ( disableCustomFontSizes && ! fontSizes.length ) {
 		return null;
 	}
 
-	const setFontSize = ( fontSizeKey, fontSizeValue ) => {
-		setCurrentSelectValue( fontSizeKey );
-
-		if ( fontSizeKey === DEFAULT_FONT_SIZE ) {
-			onChange( undefined );
-			return;
-		}
-
-		if ( ! fontSizeValue ) {
-			return;
-		}
-
-		onChange( Number( fontSizeValue ) );
-	};
-
-	const onChangeValue = ( event ) => {
-		const newValue = event.target.value;
-		const key = getSelectValueFromFontSize( fontSizes, newValue );
-		setFontSize( key, newValue );
-	};
-
-	const onSelectChangeValue = ( { selectedItem } ) => {
-		const selectedKey = selectedItem.key;
-		const selectedValue = selectedItem.style && selectedItem.style.fontSize;
-		setFontSize( selectedKey, selectedValue );
-	};
-
-	const onSliderChangeValue = ( sliderValue ) => {
-		const sliderKey = getSelectValueFromFontSize( fontSizes, sliderValue );
-		setFontSize( sliderKey, sliderValue );
-	};
-
-	const reset = () => {
-		setFontSize( DEFAULT_FONT_SIZE );
-	};
-
 	const options = getSelectOptions( fontSizes, disableCustomFontSizes );
 
+	const selectedFontSizeSlug = getSelectValueFromFontSize( fontSizes, value );
+
 	const fontSizePickerNumberId = `components-font-size-picker__number#${ instanceId }`;
+
 	return (
 		<fieldset className="components-font-size-picker">
 			<VisuallyHidden as="legend">{ __( 'Font size' ) }</VisuallyHidden>
@@ -107,12 +70,15 @@ export default function FontSizePicker( {
 						className={ 'components-font-size-picker__select' }
 						label={ __( 'Preset size' ) }
 						options={ options }
-						value={
-							options.find(
-								( option ) => option.key === currentSelectValue
-							) || options[ 0 ]
-						}
-						onChange={ onSelectChangeValue }
+						value={ options.find(
+							( option ) => option.key === selectedFontSizeSlug
+						) }
+						onChange={ ( { selectedItem } ) => {
+							const selectedValue =
+								selectedItem.style &&
+								selectedItem.style.fontSize;
+							onChange( Number( selectedValue ) );
+						} }
 					/>
 				) }
 				{ ! withSlider && ! disableCustomFontSizes && (
@@ -125,7 +91,9 @@ export default function FontSizePicker( {
 							className="components-font-size-picker__number"
 							type="number"
 							min={ 1 }
-							onChange={ onChangeValue }
+							onChange={ ( event ) => {
+								onChange( Number( event.target.value ) );
+							} }
 							aria-label={ __( 'Custom' ) }
 							value={ value || '' }
 						/>
@@ -134,7 +102,9 @@ export default function FontSizePicker( {
 				<Button
 					className="components-color-palette__clear"
 					disabled={ value === undefined }
-					onClick={ reset }
+					onClick={ () => {
+						onChange( undefined );
+					} }
 					isSmall
 					isSecondary
 				>
@@ -147,7 +117,9 @@ export default function FontSizePicker( {
 					label={ __( 'Custom Size' ) }
 					value={ value || '' }
 					initialPosition={ fallbackFontSize }
-					onChange={ onSliderChangeValue }
+					onChange={ ( newValue ) => {
+						onChange( newValue );
+					} }
 					min={ 12 }
 					max={ 100 }
 					beforeIcon={ textColor }