diff --git a/plugins/woocommerce-admin/packages/components/CHANGELOG.md b/plugins/woocommerce-admin/packages/components/CHANGELOG.md index ce113945fbe..52d81dcbe67 100644 --- a/plugins/woocommerce-admin/packages/components/CHANGELOG.md +++ b/plugins/woocommerce-admin/packages/components/CHANGELOG.md @@ -4,6 +4,7 @@ - Fix styling of the advanced filter operator selection. #7005 - Remove the use of Dashicons and replace with @wordpress/icons or gridicons #7020 - Add tree shaking support to this package. #7034 +- Remove useFilters from the package. #7117 - Deprecate SegmentedSelection, it will be removed in the next major release. #7118 - Deprecate the Count component, with plan to remove in next major version. #7115 - Remove the long deprecated Card component (use Card from `@wordpress/components` instead). #7114 diff --git a/plugins/woocommerce-admin/packages/components/src/higher-order/use-filters/README.md b/plugins/woocommerce-admin/packages/components/src/higher-order/use-filters/README.md deleted file mode 100644 index 3d950f492af..00000000000 --- a/plugins/woocommerce-admin/packages/components/src/higher-order/use-filters/README.md +++ /dev/null @@ -1,41 +0,0 @@ -# useFilters - -DEPRECATED: Please use [gutenberg's `withFilters`.](https://github.com/WordPress/gutenberg/tree/master/packages/components/src/higher-order/with-filters) instead. - -`useFilters` is a fork of [gutenberg's `withFilters`.](https://github.com/WordPress/gutenberg/tree/master/packages/components/src/higher-order/with-filters) It is also a React [higher-order component.](https://facebook.github.io/react/docs/higher-order-components.html) - -Wrapping a component with `useFilters` provides a filtering capability controlled externally by the list of `hookName`s. - -## Usage - -```jsx -import { applyFilters } from '@wordpress/hooks'; -import { useFilters } from '@woocommerce/components'; - -function MyCustomElement() { - return ( -

{ applyFilters( 'woocommerce.componentTitle', 'Title Text' ) }

- ); -} - -export default useFilters( [ 'woocommerce.componentTitle' ] )( - MyCustomElement -); -``` - -`useFilters` expects an array argument which provides a list of hook names. It returns a function which can then be used in composing your component. The list of hook names are used in your component with `applyFilters`. Any filters added to the given hooks are run when added, and update your content (the title text, in this example). - -### Adding filters - -```js -function editText( string ) { - return `Filtered: ${ string }`; -} -addFilter( 'woocommerce.componentTitle', 'editText', editText ); -``` - -If we added this filter, our `MyCustomElement` component would display: - -```html -

Filtered: Title Text

-``` diff --git a/plugins/woocommerce-admin/packages/components/src/higher-order/use-filters/index.js b/plugins/woocommerce-admin/packages/components/src/higher-order/use-filters/index.js deleted file mode 100644 index 97b0e3981fd..00000000000 --- a/plugins/woocommerce-admin/packages/components/src/higher-order/use-filters/index.js +++ /dev/null @@ -1,80 +0,0 @@ -/** - * External dependencies - */ -import { debounce, isArray, uniqueId } from 'lodash'; -import { Component } from '@wordpress/element'; -import { addAction, removeAction } from '@wordpress/hooks'; -import deprecated from '@wordpress/deprecated'; - -/** - * Deprecated version of useFilters. - * - * @deprecated - * - * @param {string} hookName Hook name exposed to be used by filters. - * - * @return {Function} Higher-order component factory. - */ -export default function useFilters( hookName ) { - deprecated( 'useFilters', { - version: '5.0.0', - alternative: 'withFilters', - plugin: 'WooCommerce', - hint: 'Use `import { withFilters } from "@wordpress/components"`', - } ); - return originalUseFilters( hookName ); -} - -const ANIMATION_FRAME_PERIOD = 16; - -/** - * Creates a higher-order component which adds filtering capability to the - * wrapped component. Filters get applied when the original component is about - * to be mounted. When a filter is added or removed that matches the hook name, - * the wrapped component re-renders. - * - * @param {string|Array} hookName Hook names exposed to be used by filters. - * - * @return {Function} Higher-order component factory. - */ -function originalUseFilters( hookName ) { - const hookNames = isArray( hookName ) ? hookName : [ hookName ]; - - return function ( OriginalComponent ) { - return class FilteredComponent extends Component { - constructor( props ) { - super( props ); - - this.onHooksUpdated = this.onHooksUpdated.bind( this ); - this.namespace = uniqueId( 'wc-admin/use-filters/component-' ); - this.throttledForceUpdate = debounce( () => { - this.forceUpdate(); - }, ANIMATION_FRAME_PERIOD ); - - addAction( 'hookRemoved', this.namespace, this.onHooksUpdated ); - addAction( 'hookAdded', this.namespace, this.onHooksUpdated ); - } - - componentWillUnmount() { - this.throttledForceUpdate.cancel(); - removeAction( 'hookRemoved', this.namespace ); - removeAction( 'hookAdded', this.namespace ); - } - - /** - * When a filter is added or removed for any matching hook name, the wrapped component should re-render. - * - * @param {string} updatedHookName Name of the hook that was updated. - */ - onHooksUpdated( updatedHookName ) { - if ( hookNames.indexOf( updatedHookName ) !== -1 ) { - this.throttledForceUpdate(); - } - } - - render() { - return ; - } - }; - }; -} diff --git a/plugins/woocommerce-admin/packages/components/src/index.js b/plugins/woocommerce-admin/packages/components/src/index.js index 0c86aae144f..da2acb3a81c 100644 --- a/plugins/woocommerce-admin/packages/components/src/index.js +++ b/plugins/woocommerce-admin/packages/components/src/index.js @@ -52,7 +52,6 @@ export { default as Tag } from './tag'; export { default as TextControl } from './text-control'; export { default as TextControlWithAffixes } from './text-control-with-affixes'; export { default as Timeline } from './timeline'; -export { default as useFilters } from './higher-order/use-filters'; export { default as ViewMoreList } from './view-more-list'; export { default as WebPreview } from './web-preview'; export { Badge } from './badge';