From 088223afd333013e2862b8f8f8f006d2f08c81e3 Mon Sep 17 00:00:00 2001 From: Nik Tsekouras Date: Mon, 4 Dec 2023 16:42:59 +0200 Subject: [PATCH] Move `useDebouncedInput` hook to @wordpress/compose package (#56744) --- .../inserter/media-tab/media-panel.js | 2 +- .../src/components/inserter/menu.js | 2 +- packages/compose/README.md | 12 ++++++++++++ .../src/hooks/use-debounced-input/index.js} | 12 +++++++++++- packages/compose/src/index.js | 1 + packages/compose/src/index.native.js | 1 + packages/dataviews/src/search.js | 6 +----- .../dataviews/src/utils/use-debounced-input.js | 18 ------------------ .../add-custom-template-modal-content.js | 2 +- .../components/page-patterns/patterns-list.js | 7 +++++-- .../edit-site/src/utils/use-debounced-input.js | 18 ------------------ 11 files changed, 34 insertions(+), 47 deletions(-) rename packages/{block-editor/src/components/inserter/hooks/use-debounced-input.js => compose/src/hooks/use-debounced-input/index.js} (59%) delete mode 100644 packages/dataviews/src/utils/use-debounced-input.js delete mode 100644 packages/edit-site/src/utils/use-debounced-input.js diff --git a/packages/block-editor/src/components/inserter/media-tab/media-panel.js b/packages/block-editor/src/components/inserter/media-tab/media-panel.js index 58ae7c49d27628..49601c9c8ad1bc 100644 --- a/packages/block-editor/src/components/inserter/media-tab/media-panel.js +++ b/packages/block-editor/src/components/inserter/media-tab/media-panel.js @@ -5,12 +5,12 @@ import { useRef, useEffect } from '@wordpress/element'; import { Spinner, SearchControl } from '@wordpress/components'; import { focus } from '@wordpress/dom'; import { __ } from '@wordpress/i18n'; +import { useDebouncedInput } from '@wordpress/compose'; /** * Internal dependencies */ import MediaList from './media-list'; -import useDebouncedInput from '../hooks/use-debounced-input'; import { useMediaResults } from './hooks'; import InserterNoResults from '../no-results'; diff --git a/packages/block-editor/src/components/inserter/menu.js b/packages/block-editor/src/components/inserter/menu.js index e6c32d1273be34..a6d752848538e7 100644 --- a/packages/block-editor/src/components/inserter/menu.js +++ b/packages/block-editor/src/components/inserter/menu.js @@ -17,6 +17,7 @@ import { import { VisuallyHidden, SearchControl, Popover } from '@wordpress/components'; import { __ } from '@wordpress/i18n'; import { useSelect } from '@wordpress/data'; +import { useDebouncedInput } from '@wordpress/compose'; /** * Internal dependencies @@ -28,7 +29,6 @@ import BlockPatternsTab from './block-patterns-tab'; import { PatternCategoryPreviewPanel } from './block-patterns-tab/pattern-category-preview-panel'; import { MediaTab, MediaCategoryDialog, useMediaCategories } from './media-tab'; import InserterSearchResults from './search-results'; -import useDebouncedInput from './hooks/use-debounced-input'; import useInsertionPoint from './hooks/use-insertion-point'; import InserterTabs from './tabs'; import { store as blockEditorStore } from '../../store'; diff --git a/packages/compose/README.md b/packages/compose/README.md index 5a3ec6437b1fdc..ce393f2b5fd18c 100644 --- a/packages/compose/README.md +++ b/packages/compose/README.md @@ -249,6 +249,18 @@ _Returns_ - `import('../../utils/debounce').DebouncedFunc`: Debounced function. +### useDebouncedInput + +Helper hook for input fields that need to debounce the value before using it. + +_Parameters_ + +- _defaultValue_ `any`: The default value to use. + +_Returns_ + +- `[string, Function, string]`: The input value, the setter and the debounced input value. + ### useDisabled In some circumstances, such as block previews, all focusable DOM elements (input fields, links, buttons, etc.) need to be disabled. This hook adds the behavior to disable nested DOM elements to the returned ref. diff --git a/packages/block-editor/src/components/inserter/hooks/use-debounced-input.js b/packages/compose/src/hooks/use-debounced-input/index.js similarity index 59% rename from packages/block-editor/src/components/inserter/hooks/use-debounced-input.js rename to packages/compose/src/hooks/use-debounced-input/index.js index 26cd6c0da0e0a9..91a01073fcfee8 100644 --- a/packages/block-editor/src/components/inserter/hooks/use-debounced-input.js +++ b/packages/compose/src/hooks/use-debounced-input/index.js @@ -2,8 +2,18 @@ * WordPress dependencies */ import { useEffect, useState } from '@wordpress/element'; -import { useDebounce } from '@wordpress/compose'; +/** + * Internal dependencies + */ +import useDebounce from '../use-debounce'; + +/** + * Helper hook for input fields that need to debounce the value before using it. + * + * @param {any} defaultValue The default value to use. + * @return {[string, Function, string]} The input value, the setter and the debounced input value. + */ export default function useDebouncedInput( defaultValue = '' ) { const [ input, setInput ] = useState( defaultValue ); const [ debouncedInput, setDebouncedState ] = useState( defaultValue ); diff --git a/packages/compose/src/index.js b/packages/compose/src/index.js index 1a667c98cb6905..3d03463f490794 100644 --- a/packages/compose/src/index.js +++ b/packages/compose/src/index.js @@ -39,6 +39,7 @@ export { default as useResizeObserver } from './hooks/use-resize-observer'; export { default as useAsyncList } from './hooks/use-async-list'; export { default as useWarnOnChange } from './hooks/use-warn-on-change'; export { default as useDebounce } from './hooks/use-debounce'; +export { default as useDebouncedInput } from './hooks/use-debounced-input'; export { default as useThrottle } from './hooks/use-throttle'; export { default as useMergeRefs } from './hooks/use-merge-refs'; export { default as useRefEffect } from './hooks/use-ref-effect'; diff --git a/packages/compose/src/index.native.js b/packages/compose/src/index.native.js index 0b9a41679f83a9..a3f959e644f32a 100644 --- a/packages/compose/src/index.native.js +++ b/packages/compose/src/index.native.js @@ -33,6 +33,7 @@ export { default as usePreferredColorScheme } from './hooks/use-preferred-color- export { default as usePreferredColorSchemeStyle } from './hooks/use-preferred-color-scheme-style'; export { default as useResizeObserver } from './hooks/use-resize-observer'; export { default as useDebounce } from './hooks/use-debounce'; +export { default as useDebouncedInput } from './hooks/use-debounced-input'; export { default as useThrottle } from './hooks/use-throttle'; export { default as useMergeRefs } from './hooks/use-merge-refs'; export { default as useRefEffect } from './hooks/use-ref-effect'; diff --git a/packages/dataviews/src/search.js b/packages/dataviews/src/search.js index b226ddbffd35e4..2e58b721d6e2eb 100644 --- a/packages/dataviews/src/search.js +++ b/packages/dataviews/src/search.js @@ -4,11 +4,7 @@ import { __ } from '@wordpress/i18n'; import { useEffect, useRef } from '@wordpress/element'; import { SearchControl } from '@wordpress/components'; - -/** - * Internal dependencies - */ -import useDebouncedInput from './utils/use-debounced-input'; +import { useDebouncedInput } from '@wordpress/compose'; export default function Search( { label, view, onChangeView } ) { const [ search, setSearch, debouncedSearch ] = useDebouncedInput( diff --git a/packages/dataviews/src/utils/use-debounced-input.js b/packages/dataviews/src/utils/use-debounced-input.js deleted file mode 100644 index 26cd6c0da0e0a9..00000000000000 --- a/packages/dataviews/src/utils/use-debounced-input.js +++ /dev/null @@ -1,18 +0,0 @@ -/** - * WordPress dependencies - */ -import { useEffect, useState } from '@wordpress/element'; -import { useDebounce } from '@wordpress/compose'; - -export default function useDebouncedInput( defaultValue = '' ) { - const [ input, setInput ] = useState( defaultValue ); - const [ debouncedInput, setDebouncedState ] = useState( defaultValue ); - - const setDebouncedInput = useDebounce( setDebouncedState, 250 ); - - useEffect( () => { - setDebouncedInput( input ); - }, [ input ] ); - - return [ input, setInput, debouncedInput ]; -} diff --git a/packages/edit-site/src/components/add-new-template/add-custom-template-modal-content.js b/packages/edit-site/src/components/add-new-template/add-custom-template-modal-content.js index 643f1e6f818662..44554eac0dcd62 100644 --- a/packages/edit-site/src/components/add-new-template/add-custom-template-modal-content.js +++ b/packages/edit-site/src/components/add-new-template/add-custom-template-modal-content.js @@ -15,12 +15,12 @@ import { } from '@wordpress/components'; import { useEntityRecords } from '@wordpress/core-data'; import { decodeEntities } from '@wordpress/html-entities'; +import { useDebouncedInput } from '@wordpress/compose'; /** * Internal dependencies */ import { unlock } from '../../lock-unlock'; -import useDebouncedInput from '../../utils/use-debounced-input'; import { mapToIHasNameAndId } from './utils'; const { diff --git a/packages/edit-site/src/components/page-patterns/patterns-list.js b/packages/edit-site/src/components/page-patterns/patterns-list.js index eb56fdded90607..6015fbbf4caf34 100644 --- a/packages/edit-site/src/components/page-patterns/patterns-list.js +++ b/packages/edit-site/src/components/page-patterns/patterns-list.js @@ -15,7 +15,11 @@ import { import { __, _x, isRTL } from '@wordpress/i18n'; import { chevronLeft, chevronRight } from '@wordpress/icons'; import { privateApis as routerPrivateApis } from '@wordpress/router'; -import { useAsyncList, useViewportMatch } from '@wordpress/compose'; +import { + useAsyncList, + useViewportMatch, + useDebouncedInput, +} from '@wordpress/compose'; /** * Internal dependencies @@ -25,7 +29,6 @@ import Grid from './grid'; import NoPatterns from './no-patterns'; import usePatterns from './use-patterns'; import SidebarButton from '../sidebar-button'; -import useDebouncedInput from '../../utils/use-debounced-input'; import { unlock } from '../../lock-unlock'; import { PATTERN_SYNC_TYPES, PATTERN_TYPES } from '../../utils/constants'; import Pagination from './pagination'; diff --git a/packages/edit-site/src/utils/use-debounced-input.js b/packages/edit-site/src/utils/use-debounced-input.js deleted file mode 100644 index 26cd6c0da0e0a9..00000000000000 --- a/packages/edit-site/src/utils/use-debounced-input.js +++ /dev/null @@ -1,18 +0,0 @@ -/** - * WordPress dependencies - */ -import { useEffect, useState } from '@wordpress/element'; -import { useDebounce } from '@wordpress/compose'; - -export default function useDebouncedInput( defaultValue = '' ) { - const [ input, setInput ] = useState( defaultValue ); - const [ debouncedInput, setDebouncedState ] = useState( defaultValue ); - - const setDebouncedInput = useDebounce( setDebouncedState, 250 ); - - useEffect( () => { - setDebouncedInput( input ); - }, [ input ] ); - - return [ input, setInput, debouncedInput ]; -}