@wordpress/data
Version:
Data module for WordPress.
69 lines (65 loc) • 2.26 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _compose = require("@wordpress/compose");
var _useSelect = _interopRequireDefault(require("../use-select"));
var _jsxRuntime = require("react/jsx-runtime");
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
/** @typedef {import('react').ComponentType} ComponentType */
/**
* Higher-order component used to inject state-derived props using registered
* selectors.
*
* @param {Function} 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:
* //
* // <HammerPriceDisplay currency="USD" />
* ```
* 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 {ComponentType} Enhanced component with merged state data props.
*/const withSelect = mapSelectToProps => (0, _compose.createHigherOrderComponent)(WrappedComponent => (0, _compose.pure)(ownProps => {
const mapSelect = (select, registry) => mapSelectToProps(select, ownProps, registry);
const mergeProps = (0, _useSelect.default)(mapSelect);
return /*#__PURE__*/(0, _jsxRuntime.jsx)(WrappedComponent, {
...ownProps,
...mergeProps
});
}), 'withSelect');
var _default = exports.default = withSelect;
//# sourceMappingURL=index.js.map