Documentation: Remove withState HOC references (#33173)

* Update TreeSelect component docs * Update DropZone component docs * Update withFocusReturn HOC docs * Update withConstrainedTabbing HOC docs * Update DateTimePicker component docs * Update RadioControl component docs * Update MenuItemsChoice component docs * Update TextareaControl component docs
WordPress · Jul 6, 2021 · 138d5f1 · 138d5f1
1 parent 4daffe9
commit 138d5f1
Show file tree

Hide file tree

Showing 8 changed files with 124 additions and 118 deletions.
diff --git a/packages/components/src/date-time/README.md b/packages/components/src/date-time/README.md
@@ -16,19 +16,19 @@ Render a DateTimePicker.
 
 ```jsx
 import { DateTimePicker } from '@wordpress/components';
-import { withState } from '@wordpress/compose';
+import { useState } from '@wordpress/element';
+
+const MyDateTimePicker = () => {
+	const [ date, setDate ] = useState( new Date() );
 
-const MyDateTimePicker = withState( {
-	date: new Date(),
-} )( ( { date, setState } ) => {
 	return (
 		<DateTimePicker
 			currentDate={ date }
-			onChange={ ( date ) => setState( { date } ) }
+			onChange={ ( newDate ) => setDate( newDate ) }
 			is12Hour={ true }
 		/>
 	);
-} );
+}
 ```
 
 ## Props

diff --git a/packages/components/src/drop-zone/README.md b/packages/components/src/drop-zone/README.md
@@ -6,20 +6,22 @@
 
 ```jsx
 import { DropZone } from '@wordpress/components';
-import { withState } from '@wordpress/compose';
-
-const MyDropZone = withState( {
-	hasDropped: false,
-} )( ( { hasDropped, setState } ) => (
-	<div>
-		{ hasDropped ? 'Dropped!' : 'Drop something here' }
-		<DropZone
-			onFilesDrop={ () => setState( { hasDropped: true } ) }
-			onHTMLDrop={ () => setState( { hasDropped: true } ) }
-			onDrop={ () => setState( { hasDropped: true } ) }
-		/>
-	</div>
-) );
+import { useState } from '@wordpress/element';
+
+const MyDropZone = () => {
+	const [ hasDropped, setHasDropped ] = useState( false );
+
+	return (
+		<div>
+			{ hasDropped ? 'Dropped!' : 'Drop something here' }
+			<DropZone
+				onFilesDrop={ () => setHasDropped( true ) }
+				onHTMLDrop={ () => setHasDropped( true ) }
+				onDrop={ () => setHasDropped( true ) }
+			/>
+		</div>
+	);
+}
 ```
 
 ## Props

diff --git a/packages/components/src/higher-order/with-constrained-tabbing/README.md b/packages/components/src/higher-order/with-constrained-tabbing/README.md
@@ -12,15 +12,14 @@ import {
 	TextControl,
 	Button,
 } from '@wordpress/components';
-import { withState } from '@wordpress/compose';
+import { useState } from '@wordpress/element';
 
 const ConstrainedTabbing = withConstrainedTabbing(
 	( { children } ) => children
 );
 
-const MyComponentWithConstrainedTabbing = withState( {
-	isConstrainedTabbing: false,
-} )( ( { isConstrainedTabbing, setState } ) => {
+const MyComponentWithConstrainedTabbing = () => {
+	const [ isConstrainedTabbing, setIsConstrainedTabbing ] = useState( false );
 	let form = (
 		<form>
 			<TextControl label="Input 1" onChange={ () => {} } />
@@ -32,9 +31,7 @@ const MyComponentWithConstrainedTabbing = withState( {
 	}
 
 	const toggleConstrain = () => {
-		setState( ( state ) => ( {
-			isConstrainedTabbing: ! state.isConstrainedTabbing,
-		} ) );
+		setIsConstrainedTabbing( ( state ) => ! state );
 	};
 
 	return (
@@ -46,5 +43,5 @@ const MyComponentWithConstrainedTabbing = withState( {
 			</Button>
 		</div>
 	);
-} );
+}
 ```
diff --git a/packages/components/src/higher-order/with-focus-return/README.md b/packages/components/src/higher-order/with-focus-return/README.md
@@ -8,7 +8,7 @@
 
 ```jsx
 import { withFocusReturn, TextControl, Button } from '@wordpress/components';
-import { withState } from '@wordpress/compose';
+import { useState } from '@wordpress/element';
 
 const EnhancedComponent = withFocusReturn( () => (
 	<div>
@@ -17,20 +17,19 @@ const EnhancedComponent = withFocusReturn( () => (
 	</div>
 ) );
 
-const MyComponentWithFocusReturn = withState( {
-	text: '',
-} )( ( { text, setState } ) => {
+const MyComponentWithFocusReturn = () => {
+	const [ text, setText ] = useState( '' );
 	const unmount = () => {
 		document.activeElement.blur();
-		setState( { text: '' } );
+		setText( '' );
 	};
 
 	return (
 		<div>
 			<TextControl
 				placeholder="Type something"
 				value={ text }
-				onChange={ ( text ) => setState( { text } ) }
+				onChange={ ( value ) => setText( value ) }
 			/>
 			{ text && <EnhancedComponent /> }
 			{ text && (
@@ -40,7 +39,7 @@ const MyComponentWithFocusReturn = withState( {
 			) }
 		</div>
 	);
-} );
+}
 ```
 
 `withFocusReturn` can optionally be called as a higher-order function creator. Provided an options object, a new higher-order function is returned.

diff --git a/packages/components/src/menu-items-choice/README.md b/packages/components/src/menu-items-choice/README.md
@@ -55,11 +55,11 @@ Designs with a `MenuItemsChoice` option selected by default make a strong sugges
 
 ```jsx
 import { MenuGroup, MenuItemsChoice } from '@wordpress/components';
-import { withState } from '@wordpress/compose';
+import { useState } from '@wordpress/element';
 
-const MyMenuItemsChoice = withState( {
-	mode: 'visual',
-	choices: [
+const MyMenuItemsChoice = () => {
+	const [ mode, setMode ] = useState( 'visual' );
+	const choices = [
 		{
 			value: 'visual',
 			label: 'Visual editor',
@@ -68,14 +68,16 @@ const MyMenuItemsChoice = withState( {
 			value: 'text',
 			label: 'Code editor',
 		},
-	],
-} )( ( { mode, choices, setState } ) => (
-	<MenuGroup label="Editor">
-		<MenuItemsChoice
-			choices={ choices }
-			value={ mode }
-			onSelect={ ( mode ) => setState( { mode } ) }
-		/>
-	</MenuGroup>
-) );
+	];
+
+	return (
+		<MenuGroup label="Editor">
+			<MenuItemsChoice
+				choices={ choices }
+				value={ mode }
+				onSelect={ ( newMode ) => setMode( newMode ) }
+			/>
+		</MenuGroup>
+	);
+};
 ```
diff --git a/packages/components/src/radio-control/README.md b/packages/components/src/radio-control/README.md
@@ -58,24 +58,24 @@ Render a user interface to select the user type using radio inputs.
 
 ```jsx
 import { RadioControl } from '@wordpress/components';
-import { withState } from '@wordpress/compose';
-
-const MyRadioControl = withState( {
-	option: 'a',
-} )( ( { option, setState } ) => (
-	<RadioControl
-		label="User type"
-		help="The type of the current user"
-		selected={ option }
-		options={ [
-			{ label: 'Author', value: 'a' },
-			{ label: 'Editor', value: 'e' },
-		] }
-		onChange={ ( option ) => {
-			setState( { option } );
-		} }
-	/>
-) );
+import { useState } from '@wordpress/element';
+
+const MyRadioControl = () => {
+	const [ option, setOption ] = useState( 'a' );
+
+	return (
+		<RadioControl
+			label="User type"
+			help="The type of the current user"
+			selected={ option }
+			options={ [
+				{ label: 'Author', value: 'a' },
+				{ label: 'Editor', value: 'e' },
+			] }
+			onChange={ ( value ) => setOption( value ) }
+		/>
+	);
+}
 ```
 
 ### Props

diff --git a/packages/components/src/textarea-control/README.md b/packages/components/src/textarea-control/README.md
@@ -76,19 +76,23 @@ When text input isn’t accepted, an error message can display instructions on h
 
 ### Usage
 
-    import { TextareaControl } from '@wordpress/components';
-    import { withState } from '@wordpress/compose';
-
-    const MyTextareaControl = withState( {
-        text: '',
-    } )( ( { text, setState } ) => (
-        <TextareaControl
-            label="Text"
-            help="Enter some text"
-            value={ text }
-            onChange={ ( text ) => setState( { text } ) }
-        />
-    ) );
+```jsx
+import { TextareaControl } from '@wordpress/components';
+import { useState } from '@wordpress/element';
+
+const MyTextareaControl = () => {
+	const [ text, setText ] = useState( '' );
+
+	return (
+		<TextareaControl
+			label="Text"
+			help="Enter some text"
+			value={ text }
+			onChange={ ( value ) => setText( value ) }
+		/>
+	);
+};
+```
 
 ### Props
 

diff --git a/packages/components/src/tree-select/README.md b/packages/components/src/tree-select/README.md
@@ -8,44 +8,46 @@ Render a user interface to select the parent page in a hierarchy of pages:
 
 ```jsx
 import { TreeSelect } from '@wordpress/components';
-import { withState } from '@wordpress/compose';
-
-const MyTreeSelect = withState( {
-	page: 'p21',
-} )( ( { page, setState } ) => (
-	<TreeSelect
-		label="Parent page"
-		noOptionLabel="No parent page"
-		onChange={ ( page ) => setState( { page } ) }
-		selectedId={ page }
-		tree={ [
-			{
-				name: 'Page 1',
-				id: 'p1',
-				children: [
-					{ name: 'Descend 1 of page 1', id: 'p11' },
-					{ name: 'Descend 2 of page 1', id: 'p12' },
-				],
-			},
-			{
-				name: 'Page 2',
-				id: 'p2',
-				children: [
-					{
-						name: 'Descend 1 of page 2',
-						id: 'p21',
-						children: [
-							{
-								name: 'Descend 1 of Descend 1 of page 2',
-								id: 'p211',
-							},
-						],
-					},
-				],
-			},
-		] }
-	/>
-) );
+import { useState } from '@wordpress/element';
+
+const MyTreeSelect = () => {
+	const [ page, setPage ] = useState( 'p21' );
+
+	return (
+		<TreeSelect
+			label="Parent page"
+			noOptionLabel="No parent page"
+			onChange={ ( newPage ) => setPage( newPage ) }
+			selectedId={ page }
+			tree={ [
+				{
+					name: 'Page 1',
+					id: 'p1',
+					children: [
+						{ name: 'Descend 1 of page 1', id: 'p11' },
+						{ name: 'Descend 2 of page 1', id: 'p12' },
+					],
+				},
+				{
+					name: 'Page 2',
+					id: 'p2',
+					children: [
+						{
+							name: 'Descend 1 of page 2',
+							id: 'p21',
+							children: [
+								{
+									name: 'Descend 1 of Descend 1 of page 2',
+									id: 'p211',
+								},
+							],
+						},
+					],
+				},
+			] }
+		/>
+	);
+}
 ```
 
 ## Props