diff --git a/plugins/woocommerce-admin/packages/components/CHANGELOG.md b/plugins/woocommerce-admin/packages/components/CHANGELOG.md index a40912c67aa..98dc719f121 100644 --- a/plugins/woocommerce-admin/packages/components/CHANGELOG.md +++ b/plugins/woocommerce-admin/packages/components/CHANGELOG.md @@ -1,5 +1,7 @@ # Unreleased +- Replace deprecated wp.compose.withState with wp.element.useState. #8338 + # 9.0.0 - Update line-height of SelectControl label to avoid truncated descenders in some typefaces and zoom levels. #8186 diff --git a/plugins/woocommerce-admin/packages/components/src/calendar/stories/date-picker.js b/plugins/woocommerce-admin/packages/components/src/calendar/stories/date-picker.js index 97a70ec7099..c40a28ca10b 100644 --- a/plugins/woocommerce-admin/packages/components/src/calendar/stories/date-picker.js +++ b/plugins/woocommerce-admin/packages/components/src/calendar/stories/date-picker.js @@ -2,23 +2,25 @@ * External dependencies */ import moment from 'moment'; -import { withState } from '@wordpress/compose'; import { DatePicker, H, Section } from '@woocommerce/components'; -import { createElement } from '@wordpress/element'; - +import { useState } from '@wordpress/element'; const dateFormat = 'MM/DD/YYYY'; -const DatePickerExample = withState( { - after: null, - afterText: '', - before: null, - beforeText: '', - afterError: null, - beforeError: null, - focusedInput: 'startDate', -} )( ( { after, afterText, afterError, setState } ) => { +const DatePickerExample = () => { + const [ state, setState ] = useState( { + after: null, + afterText: '', + before: null, + beforeText: '', + afterError: null, + beforeError: null, + focusedInput: 'startDate', + } ); + const { after, afterText, afterError } = state; + function onDatePickerUpdate( { date, text, error } ) { setState( { + ...state, after: date, afterText: text, afterError: error, @@ -40,7 +42,7 @@ const DatePickerExample = withState( { ); -} ); +}; export const Basic = () => ; diff --git a/plugins/woocommerce-admin/packages/components/src/calendar/stories/date-range.js b/plugins/woocommerce-admin/packages/components/src/calendar/stories/date-range.js index 322a10e0c8f..75be254edbf 100644 --- a/plugins/woocommerce-admin/packages/components/src/calendar/stories/date-range.js +++ b/plugins/woocommerce-admin/packages/components/src/calendar/stories/date-range.js @@ -2,23 +2,29 @@ * External dependencies */ import moment from 'moment'; -import { withState } from '@wordpress/compose'; import { DateRange, H, Section } from '@woocommerce/components'; -import { createElement, Fragment } from '@wordpress/element'; +import { useState } from '@wordpress/element'; const dateFormat = 'MM/DD/YYYY'; -const DateRangeExample = withState( { - after: null, - afterText: '', - before: null, - beforeText: '', - afterError: null, - beforeError: null, - focusedInput: 'startDate', -} )( ( { after, afterText, before, beforeText, focusedInput, setState } ) => { +const DateRangeExample = () => { + const [ state, setState ] = useState( { + after: null, + afterText: '', + before: null, + beforeText: '', + afterError: null, + beforeError: null, + focusedInput: 'startDate', + } ); + + const { after, afterText, before, beforeText, focusedInput } = state; + function onRangeUpdate( update ) { - setState( update ); + setState( { + ...state, + ...update, + } ); } return ( @@ -40,7 +46,7 @@ const DateRangeExample = withState( { ); -} ); +}; export const Basic = () => ; diff --git a/plugins/woocommerce-admin/packages/components/src/ellipsis-menu/stories/index.js b/plugins/woocommerce-admin/packages/components/src/ellipsis-menu/stories/index.js index 5a903ba918a..fc355a37e9e 100644 --- a/plugins/woocommerce-admin/packages/components/src/ellipsis-menu/stories/index.js +++ b/plugins/woocommerce-admin/packages/components/src/ellipsis-menu/stories/index.js @@ -1,47 +1,57 @@ /** * External dependencies */ -import { withState } from '@wordpress/compose'; -import { Fragment } from '@wordpress/element'; +import { Fragment, useState } from '@wordpress/element'; import { Icon } from '@wordpress/icons'; import CrossSmall from 'gridicons/dist/cross-small'; import { EllipsisMenu, MenuItem, MenuTitle } from '@woocommerce/components'; -const ExampleEllipsisMenu = withState( { - showCustomers: true, - showOrders: true, -} )( ( { setState, showCustomers, showOrders } ) => ( - ( - - Display stats - - setState( { showCustomers: ! showCustomers } ) - } - > - Show Customers - - setState( { showOrders: ! showOrders } ) } - > - Show Orders - - - } /> - Close Menu - - - ) } - /> -) ); +const ExampleEllipsisMenu = () => { + const [ { showCustomers, showOrders }, setState ] = useState( { + showCustomers: true, + showOrders: true, + } ); + return ( + ( + + Display stats + + setState( { + showOrders, + showCustomers: ! showCustomers, + } ) + } + > + Show Customers + + + setState( { + showCustomers, + showOrders: ! showOrders, + } ) + } + > + Show Orders + + + } /> + Close Menu + + + ) } + /> + ); +}; export const Basic = () => ; diff --git a/plugins/woocommerce-admin/packages/components/src/image-upload/stories/index.js b/plugins/woocommerce-admin/packages/components/src/image-upload/stories/index.js index 469dd33e0ca..9226a3e78cd 100644 --- a/plugins/woocommerce-admin/packages/components/src/image-upload/stories/index.js +++ b/plugins/woocommerce-admin/packages/components/src/image-upload/stories/index.js @@ -1,17 +1,19 @@ /** * External dependencies */ -import { withState } from '@wordpress/compose'; +import { useState } from '@wordpress/element'; import { ImageUpload } from '@woocommerce/components'; -const ImageUploadExample = withState( { - image: null, -} )( ( { setState, logo } ) => ( - setState( { logo: image } ) } - /> -) ); +const ImageUploadExample = () => { + const [ image, setImage ] = useState( null ); + + return ( + setImage( _image ) } + /> + ); +}; export const Basic = () => ; diff --git a/plugins/woocommerce-admin/packages/components/src/search-list-control/index.js b/plugins/woocommerce-admin/packages/components/src/search-list-control/index.js index 085f99f088a..de7d91fc3d2 100644 --- a/plugins/woocommerce-admin/packages/components/src/search-list-control/index.js +++ b/plugins/woocommerce-admin/packages/components/src/search-list-control/index.js @@ -8,8 +8,13 @@ import { TextControl, withSpokenMessages, } from '@wordpress/components'; -import { createElement, Component, Fragment } from '@wordpress/element'; -import { compose, withInstanceId, withState } from '@wordpress/compose'; +import { + createElement, + Fragment, + useState, + useEffect, +} from '@wordpress/element'; +import { compose, withInstanceId } from '@wordpress/compose'; import { escapeRegExp, findIndex } from 'lodash'; import NoticeOutlineIcon from 'gridicons/dist/notice-outline'; import PropTypes from 'prop-types'; @@ -43,28 +48,33 @@ const defaultMessages = { /** * Component to display a searchable, selectable list of items. + * + * @param {Object} props */ -export class SearchListControl extends Component { - constructor() { - super( ...arguments ); +export const SearchListControl = ( props ) => { + const [ searchValue, setSearchValue ] = useState( props.search || '' ); + const { + isSingle, + isLoading, + onChange, + selected, + instanceId, + messages: propsMessages, + isCompact, + debouncedSpeak, + onSearch, + className = '', + } = props; - this.onSelect = this.onSelect.bind( this ); - this.onRemove = this.onRemove.bind( this ); - this.onClear = this.onClear.bind( this ); - this.isSelected = this.isSelected.bind( this ); - this.defaultRenderItem = this.defaultRenderItem.bind( this ); - this.renderList = this.renderList.bind( this ); - } + const messages = { ...defaultMessages, ...propsMessages }; - componentDidUpdate( prevProps ) { - const { onSearch, search } = this.props; - if ( search !== prevProps.search && typeof onSearch === 'function' ) { - onSearch( search ); + useEffect( () => { + if ( typeof onSearch === 'function' ) { + onSearch( searchValue ); } - } + }, [ onSearch, searchValue ] ); - onRemove( id ) { - const { isSingle, onChange, selected } = this.props; + const onRemove = ( id ) => { return () => { if ( isSingle ) { onChange( [] ); @@ -75,13 +85,12 @@ export class SearchListControl extends Component { ...selected.slice( i + 1 ), ] ); }; - } + }; - onSelect( item ) { - const { isSingle, onChange, selected } = this.props; + const onSelect = ( item ) => { return () => { - if ( this.isSelected( item ) ) { - this.onRemove( item.id )(); + if ( isSelected( item ) ) { + onRemove( item.id )(); return; } if ( isSingle ) { @@ -90,39 +99,32 @@ export class SearchListControl extends Component { onChange( [ ...selected, item ] ); } }; - } + }; - onClear() { - this.props.onChange( [] ); - } + const isSelected = ( item ) => + findIndex( selected, { id: item.id } ) !== -1; - isSelected( item ) { - return findIndex( this.props.selected, { id: item.id } ) !== -1; - } - - getFilteredList( list, search ) { - const { isHierarchical } = this.props; + const getFilteredList = ( list, search ) => { + const { isHierarchical } = props; if ( ! search ) { return isHierarchical ? buildTermsTree( list ) : list; } - const messages = { ...defaultMessages, ...this.props.messages }; const re = new RegExp( escapeRegExp( search ), 'i' ); - this.props.debouncedSpeak( messages.updated ); + debouncedSpeak( messages.updated ); const filteredList = list .map( ( item ) => ( re.test( item.name ) ? item : false ) ) .filter( Boolean ); return isHierarchical ? buildTermsTree( filteredList, list ) : filteredList; - } + }; - defaultRenderItem( args ) { + const defaultRenderItem = ( args ) => { return ; - } + }; - renderList( list, depth = 0 ) { - const { isSingle, search, instanceId } = this.props; - const renderItem = this.props.renderItem || this.defaultRenderItem; + const renderList = ( list, depth = 0 ) => { + const renderItem = props.renderItem || defaultRenderItem; if ( ! list ) { return null; } @@ -132,23 +134,20 @@ export class SearchListControl extends Component {
  • { renderItem( { item, - isSelected: this.isSelected( item ), - onSelect: this.onSelect, + isSelected: isSelected( item ), + onSelect, isSingle, - search, + search: searchValue, depth, controlId: instanceId, } ) }
    • - { this.renderList( item.children, depth + 1 ) } + { renderList( item.children, depth + 1 ) } ) ); - } - - renderListSection() { - const { isLoading, search } = this.props; - const messages = { ...defaultMessages, ...this.props.messages }; + }; + const renderListSection = () => { if ( isLoading ) { return (
    @@ -156,7 +155,7 @@ export class SearchListControl extends Component {
    ); } - const list = this.getFilteredList( this.props.list, search ); + const list = getFilteredList( props.list, searchValue ); if ( ! list.length ) { return ( @@ -169,9 +168,9 @@ export class SearchListControl extends Component { /> - { search + { searchValue ? // eslint-disable-next-line @wordpress/valid-sprintf - sprintf( messages.noResults, search ) + sprintf( messages.noResults, searchValue ) : messages.noItems } @@ -180,15 +179,12 @@ export class SearchListControl extends Component { return (
      - { this.renderList( list ) } + { renderList( list ) }
    ); - } - - renderSelectedSection() { - const { isLoading, isSingle, selected } = this.props; - const messages = { ...defaultMessages, ...this.props.messages }; + }; + const renderSelectedSection = () => { if ( isLoading || isSingle || ! selected ) { return null; } @@ -202,7 +198,7 @@ export class SearchListControl extends Component { setState( { selected: items } ) } + onChange={ ( items ) => setSelected( items ) } isSingle={ isSingle } /> ); -} ); +}; export const Basic = () => ; diff --git a/plugins/woocommerce-admin/packages/components/src/search-list-control/test/index.js b/plugins/woocommerce-admin/packages/components/src/search-list-control/test/index.js index 39b60d1e949..e364900a710 100644 --- a/plugins/woocommerce-admin/packages/components/src/search-list-control/test/index.js +++ b/plugins/woocommerce-admin/packages/components/src/search-list-control/test/index.js @@ -1,7 +1,7 @@ /** * External dependencies */ -import { render } from '@testing-library/react'; +import { render, fireEvent } from '@testing-library/react'; import { noop } from 'lodash'; import { createElement } from '@wordpress/element'; @@ -174,4 +174,24 @@ describe( 'SearchListControl', () => { ); expect( component ).toMatchSnapshot(); } ); + + test( 'should match options after changing search control', () => { + const { getByLabelText, getAllByText } = render( + + ); + + fireEvent.change( getByLabelText( 'Search for items' ), { + target: { + value: 'berry', + }, + } ); + expect( getAllByText( 'berry' ).length ).toBe( 2 ); + } ); } ); diff --git a/plugins/woocommerce-admin/packages/components/src/search/stories/index.js b/plugins/woocommerce-admin/packages/components/src/search/stories/index.js index 256ee9cd22a..c463b721e64 100644 --- a/plugins/woocommerce-admin/packages/components/src/search/stories/index.js +++ b/plugins/woocommerce-admin/packages/components/src/search/stories/index.js @@ -1,35 +1,37 @@ /** * External dependencies */ -import { withState } from '@wordpress/compose'; import { H, Search, Section } from '@woocommerce/components'; +import { useState } from '@wordpress/element'; -const SearchExample = withState( { - selected: [], - inlineSelected: [], -} )( ( { selected, inlineSelected, setState } ) => ( -
    - Tags Below Input -
    - setState( { selected: items } ) } - /> -
    - Tags Inline with Input -
    - setState( { inlineSelected: items } ) } - inlineTags - /> -
    -
    -) ); +const SearchExample = () => { + const [ selected, setSelected ] = useState( [] ); + const [ inlineSelected, setInlineSelect ] = useState( [] ); + + return ( +
    + Tags Below Input +
    + setSelected( items ) } + /> +
    + Tags Inline with Input +
    + setInlineSelect( items ) } + inlineTags + /> +
    +
    + ); +}; export const Basic = () => ; diff --git a/plugins/woocommerce-admin/packages/components/src/segmented-selection/stories/index.js b/plugins/woocommerce-admin/packages/components/src/segmented-selection/stories/index.js index 1c81747df6d..56f77962805 100644 --- a/plugins/woocommerce-admin/packages/components/src/segmented-selection/stories/index.js +++ b/plugins/woocommerce-admin/packages/components/src/segmented-selection/stories/index.js @@ -1,27 +1,29 @@ /** * External dependencies */ -import { withState } from '@wordpress/compose'; import { SegmentedSelection } from '@woocommerce/components'; +import { useState } from '@wordpress/element'; const name = 'number'; -const SegmentedSelectionExample = withState( { - selected: 'two', -} )( ( { selected, setState } ) => ( - setState( { selected: data[ name ] } ) } - name={ name } - /> -) ); +const SegmentedSelectionExample = () => { + const [ selected, setSelected ] = useState( 'two' ); + + return ( + setSelected( data[ name ] ) } + name={ name } + /> + ); +}; export const Basic = () => ; diff --git a/plugins/woocommerce-admin/packages/components/src/select-control/stories/index.js b/plugins/woocommerce-admin/packages/components/src/select-control/stories/index.js index a7ba061a06b..9e0d5b0107f 100644 --- a/plugins/woocommerce-admin/packages/components/src/select-control/stories/index.js +++ b/plugins/woocommerce-admin/packages/components/src/select-control/stories/index.js @@ -2,11 +2,7 @@ * External dependencies */ import { SelectControl } from '@woocommerce/components'; - -/** - * External dependencies - */ -import { withState } from '@wordpress/compose'; +import { useState } from '@wordpress/element'; const options = [ { @@ -52,16 +48,18 @@ const options = [ }, ]; -const SelectControlExample = withState( { - simpleSelected: [], - simpleMultipleSelected: [], - singleSelected: [], - singleSelectedShowAll: [], - multipleSelected: [], - inlineSelected: [], - allOptionsIncludingSelected: options[ options.length - 1 ].key, -} )( - ( { +const SelectControlExample = () => { + const [ state, setState ] = useState( { + simpleSelected: [], + simpleMultipleSelected: [], + singleSelected: [], + singleSelectedShowAll: [], + multipleSelected: [], + inlineSelected: [], + allOptionsIncludingSelected: options[ options.length - 1 ].key, + } ); + + const { simpleSelected, simpleMultipleSelected, singleSelected, @@ -69,13 +67,14 @@ const SelectControlExample = withState( { multipleSelected, inlineSelected, allOptionsIncludingSelected, - setState, - } ) => ( + } = state; + + return (
    - setState( { simpleSelected: selected } ) + setState( { ...state, simpleSelected: selected } ) } options={ options } placeholder="Start typing to filter options..." @@ -86,7 +85,7 @@ const SelectControlExample = withState( { label="Multiple values" multiple onChange={ ( selected ) => - setState( { simpleMultipleSelected: selected } ) + setState( { ...state, simpleMultipleSelected: selected } ) } options={ options } placeholder="Start typing to filter options..." @@ -96,7 +95,10 @@ const SelectControlExample = withState( { - setState( { allOptionsIncludingSelected: selected } ) + setState( { + ...state, + allOptionsIncludingSelected: selected, + } ) } options={ options } placeholder="Start typing to filter options..." @@ -110,7 +112,7 @@ const SelectControlExample = withState( { label="Single value searchable" isSearchable onChange={ ( selected ) => - setState( { singleSelected: selected } ) + setState( { ...state, singleSelected: selected } ) } options={ options } placeholder="Start typing to filter options..." @@ -121,7 +123,7 @@ const SelectControlExample = withState( { label="Single value searchable with options on refocus" isSearchable onChange={ ( selected ) => - setState( { singleSelectedShowAll: selected } ) + setState( { ...state, singleSelectedShowAll: selected } ) } options={ options } placeholder="Start typing to filter options..." @@ -135,7 +137,7 @@ const SelectControlExample = withState( { multiple inlineTags onChange={ ( selected ) => - setState( { inlineSelected: selected } ) + setState( { ...state, inlineSelected: selected } ) } options={ options } placeholder="Start typing to filter options..." @@ -148,7 +150,7 @@ const SelectControlExample = withState( { label="Hidden options before search" multiple onChange={ ( selected ) => - setState( { multipleSelected: selected } ) + setState( { ...state, multipleSelected: selected } ) } options={ options } placeholder="Start typing to filter options..." @@ -156,8 +158,8 @@ const SelectControlExample = withState( { showClearButton />
    - ) -); + ); +}; export const Basic = () => ; diff --git a/plugins/woocommerce-admin/packages/components/src/stepper/stories/index.js b/plugins/woocommerce-admin/packages/components/src/stepper/stories/index.js index f043b56333f..f395dae6c43 100644 --- a/plugins/woocommerce-admin/packages/components/src/stepper/stories/index.js +++ b/plugins/woocommerce-admin/packages/components/src/stepper/stories/index.js @@ -1,15 +1,17 @@ /** * External dependencies */ -import { withState } from '@wordpress/compose'; import { Stepper } from '@woocommerce/components'; -import { createElement } from '@wordpress/element'; +import { useState } from '@wordpress/element'; + +const BasicExamples = () => { + const [ state, setState ] = useState( { + currentStep: 'first', + isComplete: false, + isPending: false, + } ); + const { currentStep, isComplete, isPending } = state; -const BasicExamples = withState( { - currentStep: 'first', - isComplete: false, - isPending: false, -} )( ( { currentStep, isComplete, isPending, setState } ) => { const goToStep = ( key ) => { setState( { currentStep: key } ); }; @@ -56,7 +58,11 @@ const BasicExamples = withState( { { isComplete ? ( @@ -113,7 +125,7 @@ const BasicExamples = withState( { /> ); -} ); +}; export const Examples = () => ; diff --git a/plugins/woocommerce-admin/packages/components/src/table/stories/table-card.js b/plugins/woocommerce-admin/packages/components/src/table/stories/table-card.js index 6c115d757b2..cc485146080 100644 --- a/plugins/woocommerce-admin/packages/components/src/table/stories/table-card.js +++ b/plugins/woocommerce-admin/packages/components/src/table/stories/table-card.js @@ -2,38 +2,37 @@ * External dependencies */ import { TableCard } from '@woocommerce/components'; - -/** - * External dependencies - */ -import { withState } from '@wordpress/compose'; +import { useState } from '@wordpress/element'; /** * Internal dependencies */ import { headers, rows, summary } from './index'; -const TableCardExample = withState( { - query: { - paged: 1, - }, -} )( ( { query, setState } ) => ( - ( value ) => - setState( { - query: { - [ param ]: value, - }, - } ) } - query={ query } - rowsPerPage={ 7 } - totalRows={ 10 } - summary={ summary } - /> -) ); +const TableCardExample = () => { + const [ { query }, setState ] = useState( { + query: { + paged: 1, + }, + } ); + return ( + ( value ) => + setState( { + query: { + [ param ]: value, + }, + } ) } + query={ query } + rowsPerPage={ 7 } + totalRows={ 10 } + summary={ summary } + /> + ); +}; export const Basic = () => ; diff --git a/plugins/woocommerce-admin/packages/components/src/tag/index.js b/plugins/woocommerce-admin/packages/components/src/tag/index.js index 29cac3478eb..e446f15f252 100644 --- a/plugins/woocommerce-admin/packages/components/src/tag/index.js +++ b/plugins/woocommerce-admin/packages/components/src/tag/index.js @@ -2,13 +2,13 @@ * External dependencies */ import { __, sprintf } from '@wordpress/i18n'; -import { createElement, Fragment } from '@wordpress/element'; +import { createElement, Fragment, useState } from '@wordpress/element'; import classnames from 'classnames'; import { Button, Popover } from '@wordpress/components'; import { Icon, cancelCircleFilled } from '@wordpress/icons'; import { decodeEntities } from '@wordpress/html-entities'; import PropTypes from 'prop-types'; -import { withState, withInstanceId } from '@wordpress/compose'; +import { withInstanceId } from '@wordpress/compose'; /** * This component can be used to show an item styled as a "tag", optionally with an `X` + "remove" @@ -17,26 +17,24 @@ import { withState, withInstanceId } from '@wordpress/compose'; * @param {Object} props * @param {number|string} props.id * @param {string}props.instanceId - * @param {boolean} props.isVisible * @param {string} props.label * @param {Object} props.popoverContents * @param {Function} props.remove * @param {string} props.screenReaderLabel - * @param {Function} props.setState * @param {string} props.className * @return {Object} - */ const Tag = ( { id, instanceId, - isVisible, label, popoverContents, remove, screenReaderLabel, - setState, className, } ) => { + const [ isVisible, setIsVisible ] = useState( false ); + screenReaderLabel = screenReaderLabel || label; if ( ! label ) { // A null label probably means something went wrong @@ -61,7 +59,7 @@ const Tag = ( { @@ -71,9 +69,7 @@ const Tag = ( { ) } { popoverContents && isVisible && ( - setState( () => ( { isVisible: false } ) ) } - > + setIsVisible( false ) }> { popoverContents } ) } @@ -122,6 +118,4 @@ Tag.propTypes = { screenReaderLabel: PropTypes.string, }; -export default withState( { - isVisible: false, -} )( withInstanceId( Tag ) ); +export default withInstanceId( Tag ); diff --git a/plugins/woocommerce-admin/packages/components/src/tag/test/index.js b/plugins/woocommerce-admin/packages/components/src/tag/test/index.js index 11588ea0478..a5151513997 100644 --- a/plugins/woocommerce-admin/packages/components/src/tag/test/index.js +++ b/plugins/woocommerce-admin/packages/components/src/tag/test/index.js @@ -1,7 +1,7 @@ /** * External dependencies */ -import { render } from '@testing-library/react'; +import { render, fireEvent } from '@testing-library/react'; import { createElement } from '@wordpress/element'; /** @@ -35,4 +35,26 @@ describe( 'Tag', () => { ); expect( component ).toMatchSnapshot(); } ); + + test( 'Do not show popoverContents by default', () => { + const { queryByText } = render( + This is a popover

    } /> + ); + expect( queryByText( 'This is a popover' ) ).toBeNull(); + } ); + + test( 'Show popoverContents after clicking the button', () => { + const { queryByText, queryByRole } = render( + This is a popover

    } + /> + ); + + fireEvent.click( + queryByRole( 'button', { id: 'woocommerce-tag__label-1' } ) + ); + expect( queryByText( 'This is a popover' ) ).toBeDefined(); + } ); } ); diff --git a/plugins/woocommerce-admin/packages/components/src/text-control-with-affixes/stories/index.js b/plugins/woocommerce-admin/packages/components/src/text-control-with-affixes/stories/index.js index bb855ff8e21..d34cb806ded 100644 --- a/plugins/woocommerce-admin/packages/components/src/text-control-with-affixes/stories/index.js +++ b/plugins/woocommerce-admin/packages/components/src/text-control-with-affixes/stories/index.js @@ -2,91 +2,95 @@ * External dependencies */ import { TextControlWithAffixes } from '@woocommerce/components'; +import { useState } from '@wordpress/element'; -/** - * External dependencies - */ -import { withState } from '@wordpress/compose'; +const Examples = () => { + const [ state, setState ] = useState( { + first: '', + second: '', + third: '', + fourth: '', + fifth: '', + } ); + const { first, second, third, fourth, fifth } = state; + const partialUpdate = ( partial ) => { + setState( { ...state, ...partial } ); + }; -const Examples = withState( { - first: '', - second: '', - third: '', - fourth: '', - fifth: '', -} )( ( { first, second, third, fourth, fifth, setState } ) => ( -
    - setState( { first: value } ) } - /> - setState( { first: value } ) } - disabled - /> - setState( { second: value } ) } - /> - setState( { second: value } ) } - disabled - /> - setState( { third: value } ) } - /> - setState( { third: value } ) } - disabled - /> - setState( { fourth: value } ) } - /> - setState( { fourth: value } ) } - disabled - /> - setState( { fifth: value } ) } - help="This is some help text." - /> - setState( { fifth: value } ) } - help="This is some help text." - disabled - /> -
    -) ); + return ( +
    + partialUpdate( { first: value } ) } + /> + partialUpdate( { first: value } ) } + disabled + /> + partialUpdate( { second: value } ) } + /> + partialUpdate( { second: value } ) } + disabled + /> + partialUpdate( { third: value } ) } + /> + partialUpdate( { third: value } ) } + disabled + /> + partialUpdate( { fourth: value } ) } + /> + partialUpdate( { fourth: value } ) } + disabled + /> + partialUpdate( { fifth: value } ) } + help="This is some help text." + /> + partialUpdate( { fifth: value } ) } + help="This is some help text." + disabled + /> +
    + ); +}; export const Basic = () => ; diff --git a/plugins/woocommerce-admin/packages/components/src/text-control/stories/index.js b/plugins/woocommerce-admin/packages/components/src/text-control/stories/index.js index 5ef4f1a59ce..97febc829d0 100644 --- a/plugins/woocommerce-admin/packages/components/src/text-control/stories/index.js +++ b/plugins/woocommerce-admin/packages/components/src/text-control/stories/index.js @@ -2,29 +2,24 @@ * External dependencies */ import { TextControl } from '@woocommerce/components'; -import { createElement } from '@wordpress/element'; +import { useState } from '@wordpress/element'; -/** - * External dependencies - */ -import { withState } from '@wordpress/compose'; +const Example = () => { + const [ value, setValue ] = useState( '' ); -const Example = withState( { - value: '', -} )( ( { setState, value } ) => { return (
    setState( { value: newValue } ) } + onChange={ ( newValue ) => setValue( newValue ) } value={ value } />
    ); -} ); +}; export const Basic = () => ;