UNPKG

@wordpress/data

Version:
8 lines (7 loc) 3.02 kB
{ "version": 3, "sources": ["../../../src/components/with-select/index.tsx"], "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { createHigherOrderComponent } from '@wordpress/compose';\nimport { forwardRef, memo } from '@wordpress/element';\nimport type { ForwardedRef } from 'react';\n\n/**\n * Internal dependencies\n */\nimport useSelect from '../use-select';\nimport type { SelectFunction, DataRegistry } from '../../types';\n\n/**\n * Higher-order component used to inject state-derived props using registered\n * selectors.\n *\n * @param mapSelectToProps Function called on every state change,\n * expected to return object of props to\n * merge with the component's own props.\n *\n * @example\n * ```js\n * import { withSelect } from '@wordpress/data';\n * import { store as myCustomStore } from 'my-custom-store';\n *\n * function PriceDisplay( { price, currency } ) {\n * \treturn new Intl.NumberFormat( 'en-US', {\n * \t\tstyle: 'currency',\n * \t\tcurrency,\n * \t} ).format( price );\n * }\n *\n * const HammerPriceDisplay = withSelect( ( select, ownProps ) => {\n * \tconst { getPrice } = select( myCustomStore );\n * \tconst { currency } = ownProps;\n *\n * \treturn {\n * \t\tprice: getPrice( 'hammer', currency ),\n * \t};\n * } )( PriceDisplay );\n *\n * // Rendered in the application:\n * //\n * // <HammerPriceDisplay currency=\"USD\" />\n * ```\n * In the above example, when `HammerPriceDisplay` is rendered into an\n * application, it will pass the price into the underlying `PriceDisplay`\n * component and update automatically if the price of a hammer ever changes in\n * the store.\n *\n * @return Enhanced component with merged state data props.\n */\nconst withSelect = (\n\tmapSelectToProps: (\n\t\tselect: SelectFunction,\n\t\townProps: Record< string, unknown >,\n\t\tregistry: DataRegistry\n\t) => Record< string, unknown >\n) =>\n\tcreateHigherOrderComponent(\n\t\t( WrappedComponent ) =>\n\t\t\tmemo(\n\t\t\t\tforwardRef( function WithSelect(\n\t\t\t\t\townProps: Record< string, unknown >,\n\t\t\t\t\tref: ForwardedRef< unknown >\n\t\t\t\t) {\n\t\t\t\t\tconst mapSelect = (\n\t\t\t\t\t\tselect: SelectFunction,\n\t\t\t\t\t\tregistry: DataRegistry\n\t\t\t\t\t) => mapSelectToProps( select, ownProps, registry );\n\t\t\t\t\tconst mergeProps = useSelect( mapSelect );\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<WrappedComponent\n\t\t\t\t\t\t\tref={ ref }\n\t\t\t\t\t\t\t{ ...ownProps }\n\t\t\t\t\t\t\t{ ...mergeProps }\n\t\t\t\t\t\t/>\n\t\t\t\t\t);\n\t\t\t\t} )\n\t\t\t),\n\t\t'withSelect'\n\t);\n\nexport default withSelect;\n"], "mappings": ";AAGA,SAAS,kCAAkC;AAC3C,SAAS,YAAY,YAAY;AAMjC,OAAO,eAAe;AA+DhB;AApBN,IAAM,aAAa,CAClB,qBAMA;AAAA,EACC,CAAE,qBACD;AAAA,IACC,WAAY,SAAS,WACpB,UACA,KACC;AACD,YAAM,YAAY,CACjB,QACA,aACI,iBAAkB,QAAQ,UAAU,QAAS;AAClD,YAAM,aAAa,UAAW,SAAU;AACxC,aACC;AAAA,QAAC;AAAA;AAAA,UACA;AAAA,UACE,GAAG;AAAA,UACH,GAAG;AAAA;AAAA,MACN;AAAA,IAEF,CAAE;AAAA,EACH;AAAA,EACD;AACD;AAED,IAAO,sBAAQ;", "names": [] }