/**
* WordPress dependencies
*/
import { createHigherOrderComponent, pure } from '@wordpress/compose';
/**
* Internal dependencies
*/
import useSelect from '../use-select';
import type { SelectFunction, DataRegistry } from '../../types';
/**
* Higher-order component used to inject state-derived props using registered
* selectors.
*
* @param mapSelectToProps Function called on every state change,
* expected to return object of props to
* merge with the component's own props.
*
* @example
* ```js
* import { withSelect } from '@wordpress/data';
* import { store as myCustomStore } from 'my-custom-store';
*
* function PriceDisplay( { price, currency } ) {
* return new Intl.NumberFormat( 'en-US', {
* style: 'currency',
* currency,
* } ).format( price );
* }
*
* const HammerPriceDisplay = withSelect( ( select, ownProps ) => {
* const { getPrice } = select( myCustomStore );
* const { currency } = ownProps;
*
* return {
* price: getPrice( 'hammer', currency ),
* };
* } )( PriceDisplay );
*
* // Rendered in the application:
* //
* //
* ```
* In the above example, when `HammerPriceDisplay` is rendered into an
* application, it will pass the price into the underlying `PriceDisplay`
* component and update automatically if the price of a hammer ever changes in
* the store.
*
* @return Enhanced component with merged state data props.
*/
const withSelect = (
mapSelectToProps: (
select: SelectFunction,
ownProps: Record< string, unknown >,
registry: DataRegistry
) => Record< string, unknown >
) =>
createHigherOrderComponent(
( WrappedComponent ) =>
pure( ( ownProps: Record< string, unknown > ) => {
const mapSelect = (
select: SelectFunction,
registry: DataRegistry
) => mapSelectToProps( select, ownProps, registry );
const mergeProps = useSelect( mapSelect );
return ;
} ),
'withSelect'
);
export default withSelect;