Remove useFilters, it was deprecated a long time ago. (https://github.com/woocommerce/woocommerce-admin/pull/7117)
This commit is contained in:
Sam Seay
GitHub
parent
baba993f85
commit
14258a324a
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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 (
|
||||
<h3>{ applyFilters( 'woocommerce.componentTitle', 'Title Text' ) }</h3>
|
||||
);
|
||||
}
|
||||
|
||||
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
|
||||
<h3>Filtered: Title Text</h3>
|
||||
```
|
||||
|
|
@ -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 <OriginalComponent { ...this.props } />;
|
||||
}
|
||||
};
|
||||
};
|
||||
}
|
||||
|
|
@ -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';
|
||||
|
|
|
|||
Loading…
Reference in New Issue