From 14624ba070c9a7a9b18fddb22ba9b88a9ca304e8 Mon Sep 17 00:00:00 2001 From: George Mamadashvili Date: Thu, 8 Jul 2021 13:30:00 +0400 Subject: [PATCH] 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 --- .../components/src/color-picker/README.md | 12 +-- .../src/keyboard-shortcuts/README.md | 11 ++- .../components/src/query-controls/README.md | 90 ++++++++++++------- .../components/src/range-control/README.md | 28 +++--- packages/components/src/scroll-lock/README.md | 13 +-- .../components/src/select-control/README.md | 36 ++++---- .../components/src/toggle-control/README.md | 40 ++++----- 7 files changed, 127 insertions(+), 103 deletions(-) diff --git a/packages/components/src/color-picker/README.md b/packages/components/src/color-picker/README.md index af434c04175f8e..b5968306916721 100644 --- 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 ( 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 index a90fbe3aa323e0..f78abbbd03260d 100644 --- a/packages/components/src/keyboard-shortcuts/README.md +++ b/packages/components/src/keyboard-shortcuts/README.md @@ -12,13 +12,12 @@ Render `` 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' } ); -} ); +}; ``` ## Props diff --git a/packages/components/src/query-controls/README.md b/packages/components/src/query-controls/README.md index 7f0112692aff4f..b7ac4b3a32638a 100644 --- 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,19 +28,30 @@ const MyQueryControls = withState( { }, ], numberOfItems: 10, -} )( ( { orderBy, order, category, categories, numberOfItems, setState } ) => ( - 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 ( + 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 @@ -48,41 +59,52 @@ const MyQueryControls = withState( { 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 } ) => ( - 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 ( + 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 index 0ebf28bb67a1eb..203e6992f0dea2 100644 --- 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 } ) => ( - setState( { columns } ) } - min={ 2 } - max={ 10 } - /> -) ); +import { useState } from '@wordpress/element'; + +const MyRangeControl = () => { + const [ columns, setColumns ] = useState( 2 ); + + return( + 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 index f3912df94eb645..3bbb96c41f505d 100644 --- 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 (
); -} ); +}; ``` diff --git a/packages/components/src/select-control/README.md b/packages/components/src/select-control/README.md index f5b141eaafba88..1412f339538d31 100644 --- 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 } ) => ( - { - setState( { size } ); - } } - /> -) ); +import { useState } from '@wordpress/element'; + +const MySelectControl = () => { + const [ size, setSize ] = useState( '50%' ); + + return ( + 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 index 2e16a1e2531673..e149dcd5f4d2c9 100644 --- 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 } ) => ( - - setState( ( state ) => ( { - hasFixedBackground: ! state.hasFixedBackground, - } ) ) - } - /> -) ); +import { useState } from '@wordpress/element'; + +const MyToggleControl = () => { + const [ hasFixedBackground, setHasFixedBackground ] = useState( false ); + + return ( + { + setHasFixedBackground( ( state ) => ! state ); + } } + /> + ); +}; ``` ## Props