Documentation: Remove withState HOC references part 3 (#33259)

* Update ColorPicker component docs * Update ScrollLock component docs * Update RangeControl component docs * Update SelectControl component docs * Update ToggleControl component docs * Update KeyboardShortcuts component docs * Update QueryControls component docs
WordPress · Jul 8, 2021 · 14624ba · 14624ba
1 parent 2f32ec4
commit 14624ba
Show file tree

Hide file tree

Showing 7 changed files with 127 additions and 103 deletions.
diff --git a/packages/components/src/color-picker/README.md b/packages/components/src/color-picker/README.md
@@ -8,17 +8,17 @@ _Parts of the source code were derived and modified from [react-color](https://g
 
 ```jsx
 import { ColorPicker } from '@wordpress/components';
-import { withState } from '@wordpress/compose';
+import { useState } from '@wordpress/element';
+
+const MyColorPicker = () => {
+	const [ color, setColor ] = useState( '#f00' );
 
-const MyColorPicker = withState( {
-	color: '#f00',
-} )( ( { color, setState } ) => {
 	return (
 		<ColorPicker
 			color={ color }
-			onChangeComplete={ ( value ) => setState( { color: value.hex } ) }
+			onChangeComplete={ ( value ) => setColor( value.hex ) }
 			disableAlpha
 		/>
 	);
-} );
+};
 ```
diff --git a/packages/components/src/keyboard-shortcuts/README.md b/packages/components/src/keyboard-shortcuts/README.md
@@ -12,13 +12,12 @@ Render `<KeyboardShortcuts />` with a `shortcuts` prop object:
 
 ```jsx
 import { KeyboardShortcuts } from '@wordpress/components';
-import { withState } from '@wordpress/compose';
+import { useState } from '@wordpress/element';
 
-const MyKeyboardShortcuts = withState( {
-	isAllSelected: false,
-} )( ( { isAllSelected, setState } ) => {
+const MyKeyboardShortcuts = () => {
+	const [ isAllSelected, setIsAllSelected ] = useState( false );
 	const selectAll = () => {
-		setState( { isAllSelected: true } );
+		setIsAllSelected( true );
 	};
 
 	return (
@@ -31,7 +30,7 @@ const MyKeyboardShortcuts = withState( {
 			[cmd/ctrl + A] Combination pressed? { isAllSelected ? 'Yes' : 'No' }
 		</div>
 	);
-} );
+};
 ```
 
 ## Props

diff --git a/packages/components/src/query-controls/README.md b/packages/components/src/query-controls/README.md
@@ -4,9 +4,9 @@
 
 ```jsx
 import { QueryControls } from '@wordpress/components';
-import { withState } from '@wordpress/compose';
+import { useState } from '@wordpress/element';
 
-const MyQueryControls = withState( {
+const QUERY_DEFAULTS = {
 	orderBy: 'title',
 	order: 'asc',
 	category: 1,
@@ -28,61 +28,83 @@ const MyQueryControls = withState( {
 		},
 	],
 	numberOfItems: 10,
-} )( ( { orderBy, order, category, categories, numberOfItems, setState } ) => (
-	<QueryControls
-		{ ...{ orderBy, order, numberOfItems } }
-		onOrderByChange={ ( orderBy ) => setState( { orderBy } ) }
-		onOrderChange={ ( order ) => setState( { order } ) }
-		categoriesList={ categories }
-		selectedCategoryId={ category }
-		onCategoryChange={ ( category ) => setState( { category } ) }
-		onNumberOfItemsChange={ ( numberOfItems ) =>
-			setState( { numberOfItems } )
-		}
-	/>
-) );
+};
+
+const MyQueryControls = () => {
+	const [ query, setQuery ] = useState( QUERY_DEFAULTS );
+	const { orderBy, order, category, categories, numberOfItems } = query;
+
+	const updateQuery = ( newQuery ) => {
+		setQuery( { ...query, ...newQuery } );
+	};
+
+	return (
+		<QueryControls
+			{ ...{ orderBy, order, numberOfItems } }
+			onOrderByChange={ ( newOrderBy ) => updateQuery( { orderBy: newOrderBy } ) }
+			onOrderChange={ ( newOrder ) => updateQuery( { order: newOrder } ) }
+			categoriesList={ categories }
+			selectedCategoryId={ category }
+			onCategoryChange={ ( newCategory ) => updateQuery( { category: newCategory } ) }
+			onNumberOfItemsChange={ ( newNumberOfItems ) =>
+				updateQuery( { numberOfItems: newCategory } )
+			}
+		/>
+	);
+};
 ```
 
 ## Multiple category selector
 
 The `QueryControls` component now supports multiple category selection, to replace the single category selection available so far. To enable it use the component with the new props instead: `categorySuggestions` in place of `categoriesList` and the `selectedCategories` array instead of `selectedCategoryId` like so:
 
 ```jsx
-const MyQueryControls = withState( {
+const QUERY_DEFAULTS = {
 	orderBy: 'title',
 	order: 'asc',
 	selectedCategories: [ 1 ],
-	categories: {
-		'Category 1': {
+	categories: [
+		{
 			id: 1,
 			name: 'Category 1',
 			parent: 0,
 		},
-		'Category 1b': {
+		{
 			id: 2,
 			name: 'Category 1b',
 			parent: 1,
 		},
-		'Category 2': {
+		{
 			id: 3,
 			name: 'Category 2',
 			parent: 0,
 		},
-	},
+	],
 	numberOfItems: 10,
-} )( ( { orderBy, order, category, categories, numberOfItems, setState } ) => (
-	<QueryControls
-		{ ...{ orderBy, order, numberOfItems } }
-		onOrderByChange={ ( orderBy ) => setState( { orderBy } ) }
-		onOrderChange={ ( order ) => setState( { order } ) }
-		categorySuggestions={ categories }
-		selectedCategories={ selectedCategories }
-		onCategoryChange={ ( category ) => setState( { category } ) }
-		onNumberOfItemsChange={ ( numberOfItems ) =>
-			setState( { numberOfItems } )
-		}
-	/>
-) );
+};
+
+const MyQueryControls = () => {
+	const [ query, setQuery ] = useState( QUERY_DEFAULTS );
+	const { orderBy, order, selectedCategories, categories, numberOfItems } = query;
+
+	const updateQuery = ( newQuery ) => {
+		setQuery( { ...query, ...newQuery } );
+	};
+
+	return (
+		<QueryControls
+			{ ...{ orderBy, order, numberOfItems } }
+			onOrderByChange={ ( newOrderBy ) => updateQuery( { orderBy: newOrderBy } ) }
+			onOrderChange={ ( newOrder ) => updateQuery( { order: newOrder } ) }
+			categorySuggestions={ categories }
+			selectedCategories={ selectedCategories }
+			onCategoryChange={ ( category ) => updateQuery( { selectedCategories: category } ) }
+			onNumberOfItemsChange={ ( newNumberOfItems ) =>
+				updateQuery( { numberOfItems: newCategory } )
+			}
+		/>
+	);
+};
 ```
 
 The format of the categories list also needs to be updated to match what `FormTokenField` expects for making suggestions.
diff --git a/packages/components/src/range-control/README.md b/packages/components/src/range-control/README.md
@@ -92,19 +92,21 @@ Render a RangeControl to make a selection from a range of incremental values.
 
 ```jsx
 import { RangeControl } from '@wordpress/components';
-import { withState } from '@wordpress/compose';
-
-const MyRangeControl = withState( {
-	columns: 2,
-} )( ( { columns, setState } ) => (
-	<RangeControl
-		label="Columns"
-		value={ columns }
-		onChange={ ( columns ) => setState( { columns } ) }
-		min={ 2 }
-		max={ 10 }
-	/>
-) );
+import { useState } from '@wordpress/element';
+
+const MyRangeControl = () => {
+	const [ columns, setColumns ] = useState( 2 );
+
+	return(
+		<RangeControl
+			label="Columns"
+			value={ columns }
+			onChange={ ( value ) => setColumns( value ) }
+			min={ 2 }
+			max={ 10 }
+		/>
+	);
+};
 ```
 
 ### Props

diff --git a/packages/components/src/scroll-lock/README.md b/packages/components/src/scroll-lock/README.md
@@ -8,14 +8,15 @@ Declare scroll locking as part of modal UI.
 
 ```jsx
 import { ScrollLock } from '@wordpress/components';
-import { withState } from '@wordpress/compose';
+import { useState } from '@wordpress/element';
+
+const MyScrollLock = () => {
+	const [ isScrollLocked, setIsScrollLocked ] = useState( false );
 
-const MyScrollLock = withState( {
-	isScrollLocked: false,
-} )( ( { isScrollLocked, setState } ) => {
 	const toggleLock = () => {
-		setState( ( state ) => ( { isScrollLocked: ! state.isScrollLocked } ) );
+		setIsScrollLocked( ( locked ) => ! locked ) );
 	};
+
 	return (
 		<div>
 			<Button variant="secondary" onClick={ toggleLock }>
@@ -28,5 +29,5 @@ const MyScrollLock = withState( {
 			</p>
 		</div>
 	);
-} );
+};
 ```
diff --git a/packages/components/src/select-control/README.md b/packages/components/src/select-control/README.md
@@ -83,24 +83,24 @@ Render a user interface to select the size of an image.
 
 ```jsx
 import { SelectControl } from '@wordpress/components';
-import { withState } from '@wordpress/compose';
-
-const MySelectControl = withState( {
-	size: '50%',
-} )( ( { size, setState } ) => (
-	<SelectControl
-		label="Size"
-		value={ size }
-		options={ [
-			{ label: 'Big', value: '100%' },
-			{ label: 'Medium', value: '50%' },
-			{ label: 'Small', value: '25%' },
-		] }
-		onChange={ ( size ) => {
-			setState( { size } );
-		} }
-	/>
-) );
+import { useState } from '@wordpress/element';
+
+const MySelectControl = () => {
+	const [ size, setSize ] = useState( '50%' );
+
+	return (
+		<SelectControl
+			label="Size"
+			value={ size }
+			options={ [
+				{ label: 'Big', value: '100%' },
+				{ label: 'Medium', value: '50%' },
+				{ label: 'Small', value: '25%' },
+			] }
+			onChange={ ( newSize ) => setSize( newSize ) }
+		/>
+	);
+};
 ```
 
 Render a user interface to select multiple users from a list.

diff --git a/packages/components/src/toggle-control/README.md b/packages/components/src/toggle-control/README.md
@@ -8,26 +8,26 @@ Render a user interface to change fixed background setting.
 
 ```jsx
 import { ToggleControl } from '@wordpress/components';
-import { withState } from '@wordpress/compose';
-
-const MyToggleControl = withState( {
-	hasFixedBackground: false,
-} )( ( { hasFixedBackground, setState } ) => (
-	<ToggleControl
-		label="Fixed Background"
-		help={
-			hasFixedBackground
-				? 'Has fixed background.'
-				: 'No fixed background.'
-		}
-		checked={ hasFixedBackground }
-		onChange={ () =>
-			setState( ( state ) => ( {
-				hasFixedBackground: ! state.hasFixedBackground,
-			} ) )
-		}
-	/>
-) );
+import { useState } from '@wordpress/element';
+
+const MyToggleControl = () => {
+	const [ hasFixedBackground, setHasFixedBackground ] = useState( false );
+
+	return (
+		<ToggleControl
+			label="Fixed Background"
+			help={
+				hasFixedBackground
+					? 'Has fixed background.'
+					: 'No fixed background.'
+			}
+			checked={ hasFixedBackground }
+			onChange={ () => {
+				setHasFixedBackground( ( state ) => ! state );
+			} }
+		/>
+	);
+};
 ```
 
 ## Props