New hook: useInstanceId (alternative) (#19091)

* New hook: useInstanceId * Add tests * Replace uses of withInstanceId * Add readme * Simplify freeing ids * Fix e2e test selector * Update packages/compose/src/hooks/use-instance-id/README.md Co-Authored-By: Andrew Duthie <andrew@andrewduthie.com> * Try passing function * useMemo * Clean up * function => object * Use useInstanceId inside withInstanceId
WordPress · Dec 12, 2019 · e3dd420 · e3dd420
1 parent cbbf1fe
commit e3dd420
Show file tree

Hide file tree

Showing 21 changed files with 214 additions and 152 deletions.
diff --git a/packages/block-editor/src/components/responsive-block-control/label.js b/packages/block-editor/src/components/responsive-block-control/label.js
@@ -1,11 +1,12 @@
 /**
  * WordPress dependencies
  */
-import { withInstanceId } from '@wordpress/compose';
+import { useInstanceId } from '@wordpress/compose';
 import { _x, sprintf } from '@wordpress/i18n';
 import { Fragment } from '@wordpress/element';
 
-const ResponsiveBlockControlLabel = ( { instanceId, property, viewport, desc } ) => {
+export default function ResponsiveBlockControlLabel( { property, viewport, desc } ) {
+	const instanceId = useInstanceId( ResponsiveBlockControlLabel );
 	const accessibleLabel = desc || sprintf( _x( 'Controls the %1$s property for %2$s viewports.', 'Text labelling a interface as controlling a given layout property (eg: margin) for a given screen size.' ), property, viewport.label );
 	return (
 		<Fragment>
@@ -15,7 +16,4 @@ const ResponsiveBlockControlLabel = ( { instanceId, property, viewport, desc } )
 			<span className="screen-reader-text" id={ `rbc-desc-${ instanceId }` }>{ accessibleLabel }</span>
 		</Fragment>
 	);
-};
-
-export default withInstanceId( ResponsiveBlockControlLabel );
-
+}
diff --git a/packages/block-editor/src/components/url-input/index.native.js b/packages/block-editor/src/components/url-input/index.native.js
@@ -7,29 +7,27 @@ import { TextInput } from 'react-native';
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { Component } from '@wordpress/element';
-import { withInstanceId } from '@wordpress/compose';
 
-class URLInput extends Component {
-	render() {
-		const { value = '', autoFocus = true, ...extraProps } = this.props;
-		/* eslint-disable jsx-a11y/no-autofocus */
-		return (
-			<TextInput
-				autoFocus={ autoFocus }
-				editable
-				selectTextOnFocus
-				autoCapitalize="none"
-				autoCorrect={ false }
-				textContentType="URL"
-				value={ value }
-				onChangeText={ this.props.onChange }
-				placeholder={ __( 'Paste URL' ) }
-				{ ...extraProps }
-			/>
-		);
-		/* eslint-enable jsx-a11y/no-autofocus */
-	}
+export default function URLInput( {
+	value = '',
+	autoFocus = true,
+	onChange,
+	...extraProps
+} ) {
+	/* eslint-disable jsx-a11y/no-autofocus */
+	return (
+		<TextInput
+			autoFocus={ autoFocus }
+			editable
+			selectTextOnFocus
+			autoCapitalize="none"
+			autoCorrect={ false }
+			textContentType="URL"
+			value={ value }
+			onChangeText={ onChange }
+			placeholder={ __( 'Paste URL' ) }
+			{ ...extraProps }
+		/>
+	);
+	/* eslint-enable jsx-a11y/no-autofocus */
 }
-
-export default withInstanceId( URLInput );
diff --git a/packages/block-library/src/shortcode/edit.js b/packages/block-library/src/shortcode/edit.js
@@ -4,9 +4,10 @@
 import { __ } from '@wordpress/i18n';
 import { Dashicon } from '@wordpress/components';
 import { PlainText } from '@wordpress/block-editor';
-import { withInstanceId } from '@wordpress/compose';
+import { useInstanceId } from '@wordpress/compose';
 
-const ShortcodeEdit = ( { attributes, setAttributes, instanceId } ) => {
+export default function ShortcodeEdit( { attributes, setAttributes } ) {
+	const instanceId = useInstanceId( ShortcodeEdit );
 	const inputId = `blocks-shortcode-input-${ instanceId }`;
 
 	return (
@@ -24,6 +25,4 @@ const ShortcodeEdit = ( { attributes, setAttributes, instanceId } ) => {
 			/>
 		</div>
 	);
-};
-
-export default withInstanceId( ShortcodeEdit );
+}
diff --git a/packages/components/src/checkbox-control/index.js b/packages/components/src/checkbox-control/index.js
@@ -1,15 +1,16 @@
 /**
  * WordPress dependencies
  */
-import { withInstanceId } from '@wordpress/compose';
+import { useInstanceId } from '@wordpress/compose';
 
 /**
  * Internal dependencies
  */
 import BaseControl from '../base-control';
 import Dashicon from '../dashicon';
 
-function CheckboxControl( { label, className, heading, checked, help, instanceId, onChange, ...props } ) {
+export default function CheckboxControl( { label, className, heading, checked, help, onChange, ...props } ) {
+	const instanceId = useInstanceId( CheckboxControl );
 	const id = `inspector-checkbox-control-${ instanceId }`;
 	const onChangeValue = ( event ) => onChange( event.target.checked );
 
@@ -34,5 +35,3 @@ function CheckboxControl( { label, className, heading, checked, help, instanceId
 		</BaseControl>
 	);
 }
-
-export default withInstanceId( CheckboxControl );
diff --git a/packages/components/src/custom-gradient-picker/control-points.js b/packages/components/src/custom-gradient-picker/control-points.js
@@ -9,7 +9,7 @@ import classnames from 'classnames';
  */
 import { Component, useEffect, useRef } from '@wordpress/element';
 import { __, sprintf } from '@wordpress/i18n';
-import { withInstanceId } from '@wordpress/compose';
+import { useInstanceId } from '@wordpress/compose';
 
 /**
  * Internal dependencies
@@ -68,57 +68,55 @@ class ControlPointKeyboardMove extends Component {
 	}
 }
 
-const ControlPointButton = withInstanceId(
-	function( {
-		instanceId,
-		isOpen,
-		position,
-		color,
-		onChange,
-		gradientIndex,
-		gradientAST,
-		...additionalProps
-	} ) {
-		const descriptionId = `components-custom-gradient-picker__control-point-button-description-${ instanceId }`;
-		return (
-			<ControlPointKeyboardMove
-				onChange={ onChange }
-				gradientIndex={ gradientIndex }
-				gradientAST={ gradientAST }
-			>
-				<Button
-					aria-label={
-						sprintf(
-							// translators: %1$s: gradient position e.g: 70%, %2$s: gradient color code e.g: rgb(52,121,151).
-							__( 'Gradient control point at position %1$s with color code %2$s.' ),
-							position,
-							color
-						)
-					}
-					aria-describedby={ descriptionId }
-					aria-expanded={ isOpen }
-					className={
-						classnames(
-							'components-custom-gradient-picker__control-point-button',
-							{ 'is-active': isOpen }
-						)
-					}
-					style={ {
-						left: position,
-					} }
-					{ ...additionalProps }
-				/>
-				<div
-					className="screen-reader-text"
-					id={ descriptionId }>
-					{ __(
-						'Use your left or right arrow keys or drag and drop with the mouse to change the gradient position. Press the button to change the color or remove the control point.'
-					) }
-				</div>
-			</ControlPointKeyboardMove>
-		);
-	}
-);
+function ControlPointButton( {
+	isOpen,
+	position,
+	color,
+	onChange,
+	gradientIndex,
+	gradientAST,
+	...additionalProps
+} ) {
+	const instanceId = useInstanceId( ControlPointButton );
+	const descriptionId = `components-custom-gradient-picker__control-point-button-description-${ instanceId }`;
+	return (
+		<ControlPointKeyboardMove
+			onChange={ onChange }
+			gradientIndex={ gradientIndex }
+			gradientAST={ gradientAST }
+		>
+			<Button
+				aria-label={
+					sprintf(
+						// translators: %1$s: gradient position e.g: 70%, %2$s: gradient color code e.g: rgb(52,121,151).
+						__( 'Gradient control point at position %1$s with color code %2$s.' ),
+						position,
+						color
+					)
+				}
+				aria-describedby={ descriptionId }
+				aria-expanded={ isOpen }
+				className={
+					classnames(
+						'components-custom-gradient-picker__control-point-button',
+						{ 'is-active': isOpen }
+					)
+				}
+				style={ {
+					left: position,
+				} }
+				{ ...additionalProps }
+			/>
+			<div
+				className="screen-reader-text"
+				id={ descriptionId }>
+				{ __(
+					'Use your left or right arrow keys or drag and drop with the mouse to change the gradient position. Press the button to change the color or remove the control point.'
+				) }
+			</div>
+		</ControlPointKeyboardMove>
+	);
+}
 
 export default function ControlPoints( {
 	gradientPickerDomRef,

diff --git a/packages/components/src/dimension-control/test/__snapshots__/index.test.js.snap b/packages/components/src/dimension-control/test/__snapshots__/index.test.js.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`DimensionControl rendering renders with custom sizes 1`] = `
-<WithInstanceId(SelectControl)
+<SelectControl
   className="block-editor-dimension-control"
   hideLabelFromVision={false}
   label={
@@ -34,7 +34,7 @@ exports[`DimensionControl rendering renders with custom sizes 1`] = `
 `;
 
 exports[`DimensionControl rendering renders with defaults 1`] = `
-<WithInstanceId(SelectControl)
+<SelectControl
   className="block-editor-dimension-control"
   hideLabelFromVision={false}
   label={
@@ -75,7 +75,7 @@ exports[`DimensionControl rendering renders with defaults 1`] = `
 `;
 
 exports[`DimensionControl rendering renders with icon and custom icon label 1`] = `
-<WithInstanceId(SelectControl)
+<SelectControl
   className="block-editor-dimension-control"
   hideLabelFromVision={false}
   label={
@@ -119,7 +119,7 @@ exports[`DimensionControl rendering renders with icon and custom icon label 1`]
 `;
 
 exports[`DimensionControl rendering renders with icon and default icon label 1`] = `
-<WithInstanceId(SelectControl)
+<SelectControl
   className="block-editor-dimension-control"
   hideLabelFromVision={false}
   label={

diff --git a/packages/components/src/font-size-picker/index.js b/packages/components/src/font-size-picker/index.js
@@ -4,7 +4,7 @@
  */
 import { useState } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
-import { withInstanceId } from '@wordpress/compose';
+import { useInstanceId } from '@wordpress/compose';
 
 /**
  * Internal dependencies
@@ -35,15 +35,15 @@ function getSelectOptions( optionsArray, disableCustomFontSizes ) {
 	} ) );
 }
 
-function FontSizePicker( {
+export default function FontSizePicker( {
 	fallbackFontSize,
 	fontSizes = [],
 	disableCustomFontSizes = false,
 	onChange,
 	value,
 	withSlider = false,
-	instanceId,
 } ) {
+	const instanceId = useInstanceId( FontSizePicker );
 	const [ currentSelectValue, setCurrentSelectValue ] = useState( getSelectValueFromFontSize( fontSizes, value ) );
 
 	if ( disableCustomFontSizes && ! fontSizes.length ) {
@@ -132,5 +132,3 @@ function FontSizePicker( {
 		</fieldset>
 	);
 }
-
-export default withInstanceId( FontSizePicker );
diff --git a/packages/components/src/form-token-field/token.js b/packages/components/src/form-token-field/token.js
@@ -7,7 +7,7 @@ import { noop } from 'lodash';
 /**
  * WordPress dependencies
  */
-import { withInstanceId } from '@wordpress/compose';
+import { useInstanceId } from '@wordpress/compose';
 import { __, sprintf } from '@wordpress/i18n';
 
 /**
@@ -16,7 +16,7 @@ import { __, sprintf } from '@wordpress/i18n';
 import IconButton from '../icon-button';
 import VisuallyHidden from '../visually-hidden';
 
-function Token( {
+export default function Token( {
 	value,
 	status,
 	title,
@@ -29,8 +29,8 @@ function Token( {
 	messages,
 	termPosition,
 	termsCount,
-	instanceId,
 } ) {
+	const instanceId = useInstanceId( Token );
 	const tokenClasses = classnames( 'components-form-token-field__token', {
 		'is-error': 'error' === status,
 		'is-success': 'success' === status,
@@ -75,5 +75,3 @@ function Token( {
 		</span>
 	);
 }
-
-export default withInstanceId( Token );
diff --git a/packages/components/src/menu-group/index.js b/packages/components/src/menu-group/index.js
@@ -7,14 +7,15 @@ import classnames from 'classnames';
  * WordPress dependencies
  */
 import { Children } from '@wordpress/element';
-import { withInstanceId } from '@wordpress/compose';
+import { useInstanceId } from '@wordpress/compose';
 
 export function MenuGroup( {
 	children,
 	className = '',
-	instanceId,
 	label,
 } ) {
+	const instanceId = useInstanceId( MenuGroup );
+
 	if ( ! Children.count( children ) ) {
 		return null;
 	}
@@ -43,4 +44,4 @@ export function MenuGroup( {
 	);
 }
 
-export default withInstanceId( MenuGroup );
+export default MenuGroup;
diff --git a/packages/components/src/radio-control/index.js b/packages/components/src/radio-control/index.js
@@ -7,14 +7,15 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { withInstanceId } from '@wordpress/compose';
+import { useInstanceId } from '@wordpress/compose';
 
 /**
  * Internal dependencies
  */
 import BaseControl from '../base-control';
 
-function RadioControl( { label, className, selected, help, instanceId, onChange, options = [] } ) {
+export default function RadioControl( { label, className, selected, help, onChange, options = [] } ) {
+	const instanceId = useInstanceId( RadioControl );
 	const id = `inspector-radio-control-${ instanceId }`;
 	const onChangeValue = ( event ) => onChange( event.target.value );
 
@@ -43,5 +44,3 @@ function RadioControl( { label, className, selected, help, instanceId, onChange,
 		</BaseControl>
 	);
 }
-
-export default withInstanceId( RadioControl );