@wordpress/data 6.12.0 → 6.13.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +6 -0
- package/README.md +39 -27
- package/build/components/async-mode-provider/context.js +2 -1
- package/build/components/async-mode-provider/context.js.map +1 -1
- package/build/components/use-dispatch/use-dispatch.js +3 -2
- package/build/components/use-dispatch/use-dispatch.js.map +1 -1
- package/build/components/use-select/index.js +5 -2
- package/build/components/use-select/index.js.map +1 -1
- package/build/components/with-dispatch/index.js +5 -3
- package/build/components/with-dispatch/index.js.map +1 -1
- package/build/components/with-select/index.js +2 -1
- package/build/components/with-select/index.js.map +1 -1
- package/build/controls.js +8 -9
- package/build/controls.js.map +1 -1
- package/build/factory.js +5 -2
- package/build/factory.js.map +1 -1
- package/build/index.js +26 -20
- package/build/index.js.map +1 -1
- package/build/registry.js +21 -16
- package/build/registry.js.map +1 -1
- package/build-module/components/async-mode-provider/context.js +2 -1
- package/build-module/components/async-mode-provider/context.js.map +1 -1
- package/build-module/components/use-dispatch/use-dispatch.js +3 -2
- package/build-module/components/use-dispatch/use-dispatch.js.map +1 -1
- package/build-module/components/use-select/index.js +6 -3
- package/build-module/components/use-select/index.js.map +1 -1
- package/build-module/components/with-dispatch/index.js +5 -3
- package/build-module/components/with-dispatch/index.js.map +1 -1
- package/build-module/components/with-select/index.js +2 -1
- package/build-module/components/with-select/index.js.map +1 -1
- package/build-module/controls.js +5 -5
- package/build-module/controls.js.map +1 -1
- package/build-module/factory.js +5 -2
- package/build-module/factory.js.map +1 -1
- package/build-module/index.js +26 -20
- package/build-module/index.js.map +1 -1
- package/build-module/registry.js +17 -12
- package/build-module/registry.js.map +1 -1
- package/build-types/components/async-mode-provider/context.d.ts +5 -0
- package/build-types/components/async-mode-provider/context.d.ts.map +1 -0
- package/build-types/components/async-mode-provider/index.d.ts +3 -0
- package/build-types/components/async-mode-provider/index.d.ts.map +1 -0
- package/build-types/components/async-mode-provider/use-async-mode.d.ts +2 -0
- package/build-types/components/async-mode-provider/use-async-mode.d.ts.map +1 -0
- package/build-types/components/registry-provider/context.d.ts +36 -0
- package/build-types/components/registry-provider/context.d.ts.map +1 -0
- package/build-types/components/registry-provider/index.d.ts +3 -0
- package/build-types/components/registry-provider/index.d.ts.map +1 -0
- package/build-types/components/registry-provider/use-registry.d.ts +41 -0
- package/build-types/components/registry-provider/use-registry.d.ts.map +1 -0
- package/build-types/components/use-dispatch/index.d.ts +3 -0
- package/build-types/components/use-dispatch/index.d.ts.map +1 -0
- package/build-types/components/use-dispatch/use-dispatch-with-map.d.ts +17 -0
- package/build-types/components/use-dispatch/use-dispatch-with-map.d.ts.map +1 -0
- package/build-types/components/use-dispatch/use-dispatch.d.ts +50 -0
- package/build-types/components/use-dispatch/use-dispatch.d.ts.map +1 -0
- package/build-types/components/use-select/index.d.ts +99 -0
- package/build-types/components/use-select/index.d.ts.map +1 -0
- package/build-types/components/with-dispatch/index.d.ts +84 -0
- package/build-types/components/with-dispatch/index.d.ts.map +1 -0
- package/build-types/components/with-registry/index.d.ts +11 -0
- package/build-types/components/with-registry/index.d.ts.map +1 -0
- package/build-types/components/with-select/index.d.ts +43 -0
- package/build-types/components/with-select/index.d.ts.map +1 -0
- package/build-types/controls.d.ts +83 -0
- package/build-types/controls.d.ts.map +1 -0
- package/build-types/default-registry.d.ts +3 -0
- package/build-types/default-registry.d.ts.map +1 -0
- package/build-types/factory.d.ts +63 -0
- package/build-types/factory.d.ts.map +1 -0
- package/build-types/index.d.ts +156 -0
- package/build-types/index.d.ts.map +1 -0
- package/build-types/plugins/index.d.ts +2 -0
- package/build-types/plugins/index.d.ts.map +1 -0
- package/build-types/plugins/persistence/index.d.ts +41 -0
- package/build-types/plugins/persistence/index.d.ts.map +1 -0
- package/build-types/plugins/persistence/storage/default.d.ts +3 -0
- package/build-types/plugins/persistence/storage/default.d.ts.map +1 -0
- package/build-types/plugins/persistence/storage/object.d.ts +10 -0
- package/build-types/plugins/persistence/storage/object.d.ts.map +1 -0
- package/build-types/redux-store/index.d.ts +29 -0
- package/build-types/redux-store/index.d.ts.map +1 -0
- package/build-types/redux-store/thunk-middleware.d.ts +2 -0
- package/build-types/redux-store/thunk-middleware.d.ts.map +1 -0
- package/build-types/registry.d.ts +56 -0
- package/build-types/registry.d.ts.map +1 -0
- package/build-types/resolvers-cache-middleware.d.ts +15 -0
- package/build-types/resolvers-cache-middleware.d.ts.map +1 -0
- package/build-types/store/index.d.ts +23 -0
- package/build-types/store/index.d.ts.map +1 -0
- package/package.json +8 -8
- package/src/components/async-mode-provider/context.js +2 -1
- package/src/components/use-dispatch/use-dispatch.js +3 -2
- package/src/components/use-select/index.js +13 -3
- package/src/components/with-dispatch/index.js +5 -3
- package/src/components/with-select/index.js +2 -1
- package/src/controls.js +4 -5
- package/src/factory.js +5 -2
- package/src/index.js +26 -20
- package/src/registry.js +17 -12
- package/tsconfig.json +4 -2
- package/tsconfig.tsbuildinfo +1 -1
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* A custom react hook exposing the registry context for use.
|
|
3
|
+
*
|
|
4
|
+
* This exposes the `registry` value provided via the
|
|
5
|
+
* <a href="#RegistryProvider">Registry Provider</a> to a component implementing
|
|
6
|
+
* this hook.
|
|
7
|
+
*
|
|
8
|
+
* It acts similarly to the `useContext` react hook.
|
|
9
|
+
*
|
|
10
|
+
* Note: Generally speaking, `useRegistry` is a low level hook that in most cases
|
|
11
|
+
* won't be needed for implementation. Most interactions with the `@wordpress/data`
|
|
12
|
+
* API can be performed via the `useSelect` hook, or the `withSelect` and
|
|
13
|
+
* `withDispatch` higher order components.
|
|
14
|
+
*
|
|
15
|
+
* @example
|
|
16
|
+
* ```js
|
|
17
|
+
* import {
|
|
18
|
+
* RegistryProvider,
|
|
19
|
+
* createRegistry,
|
|
20
|
+
* useRegistry,
|
|
21
|
+
* } from '@wordpress/data';
|
|
22
|
+
*
|
|
23
|
+
* const registry = createRegistry( {} );
|
|
24
|
+
*
|
|
25
|
+
* const SomeChildUsingRegistry = ( props ) => {
|
|
26
|
+
* const registry = useRegistry();
|
|
27
|
+
* // ...logic implementing the registry in other react hooks.
|
|
28
|
+
* };
|
|
29
|
+
*
|
|
30
|
+
*
|
|
31
|
+
* const ParentProvidingRegistry = ( props ) => {
|
|
32
|
+
* return <RegistryProvider value={ registry }>
|
|
33
|
+
* <SomeChildUsingRegistry { ...props } />
|
|
34
|
+
* </RegistryProvider>
|
|
35
|
+
* };
|
|
36
|
+
* ```
|
|
37
|
+
*
|
|
38
|
+
* @return {Function} A custom react hook exposing the registry context value.
|
|
39
|
+
*/
|
|
40
|
+
export default function useRegistry(): Function;
|
|
41
|
+
//# sourceMappingURL=use-registry.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"use-registry.d.ts","sourceRoot":"","sources":["../../../src/components/registry-provider/use-registry.js"],"names":[],"mappings":"AAUA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsCG;AACH,gDAEC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/use-dispatch/index.js"],"names":[],"mappings":""}
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
export default useDispatchWithMap;
|
|
2
|
+
/**
|
|
3
|
+
* Custom react hook for returning aggregate dispatch actions using the provided
|
|
4
|
+
* dispatchMap.
|
|
5
|
+
*
|
|
6
|
+
* Currently this is an internal api only and is implemented by `withDispatch`
|
|
7
|
+
*
|
|
8
|
+
* @param {Function} dispatchMap Receives the `registry.dispatch` function as
|
|
9
|
+
* the first argument and the `registry` object
|
|
10
|
+
* as the second argument. Should return an
|
|
11
|
+
* object mapping props to functions.
|
|
12
|
+
* @param {Array} deps An array of dependencies for the hook.
|
|
13
|
+
* @return {Object} An object mapping props to functions created by the passed
|
|
14
|
+
* in dispatchMap.
|
|
15
|
+
*/
|
|
16
|
+
declare function useDispatchWithMap(dispatchMap: Function, deps: any[]): Object;
|
|
17
|
+
//# sourceMappingURL=use-dispatch-with-map.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"use-dispatch-with-map.d.ts","sourceRoot":"","sources":["../../../src/components/use-dispatch/use-dispatch-with-map.js"],"names":[],"mappings":";AAgBA;;;;;;;;;;;;;GAaG;AACH,yEAHY,MAAM,CA6BjB"}
|
|
@@ -0,0 +1,50 @@
|
|
|
1
|
+
export default useDispatch;
|
|
2
|
+
export type StoreDescriptor = import("../../types").StoreDescriptor<any>;
|
|
3
|
+
/** @typedef {import('../../types').StoreDescriptor} StoreDescriptor */
|
|
4
|
+
/**
|
|
5
|
+
* A custom react hook returning the current registry dispatch actions creators.
|
|
6
|
+
*
|
|
7
|
+
* Note: The component using this hook must be within the context of a
|
|
8
|
+
* RegistryProvider.
|
|
9
|
+
*
|
|
10
|
+
* @param {string|StoreDescriptor} [storeNameOrDescriptor] Optionally provide the name of the
|
|
11
|
+
* store or its descriptor from which to
|
|
12
|
+
* retrieve action creators. If not
|
|
13
|
+
* provided, the registry.dispatch
|
|
14
|
+
* function is returned instead.
|
|
15
|
+
*
|
|
16
|
+
* @example
|
|
17
|
+
* This illustrates a pattern where you may need to retrieve dynamic data from
|
|
18
|
+
* the server via the `useSelect` hook to use in combination with the dispatch
|
|
19
|
+
* action.
|
|
20
|
+
*
|
|
21
|
+
* ```jsx
|
|
22
|
+
* import { useDispatch, useSelect } from '@wordpress/data';
|
|
23
|
+
* import { useCallback } from '@wordpress/element';
|
|
24
|
+
* import { store as myCustomStore } from 'my-custom-store';
|
|
25
|
+
*
|
|
26
|
+
* function Button( { onClick, children } ) {
|
|
27
|
+
* return <button type="button" onClick={ onClick }>{ children }</button>
|
|
28
|
+
* }
|
|
29
|
+
*
|
|
30
|
+
* const SaleButton = ( { children } ) => {
|
|
31
|
+
* const { stockNumber } = useSelect(
|
|
32
|
+
* ( select ) => select( myCustomStore ).getStockNumber(),
|
|
33
|
+
* []
|
|
34
|
+
* );
|
|
35
|
+
* const { startSale } = useDispatch( myCustomStore );
|
|
36
|
+
* const onClick = useCallback( () => {
|
|
37
|
+
* const discountPercent = stockNumber > 50 ? 10: 20;
|
|
38
|
+
* startSale( discountPercent );
|
|
39
|
+
* }, [ stockNumber ] );
|
|
40
|
+
* return <Button onClick={ onClick }>{ children }</Button>
|
|
41
|
+
* }
|
|
42
|
+
*
|
|
43
|
+
* // Rendered somewhere in the application:
|
|
44
|
+
* //
|
|
45
|
+
* // <SaleButton>Start Sale!</SaleButton>
|
|
46
|
+
* ```
|
|
47
|
+
* @return {Function} A custom react hook.
|
|
48
|
+
*/
|
|
49
|
+
declare function useDispatch(storeNameOrDescriptor?: string | import("../../types").StoreDescriptor<any> | undefined): Function;
|
|
50
|
+
//# sourceMappingURL=use-dispatch.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"use-dispatch.d.ts","sourceRoot":"","sources":["../../../src/components/use-dispatch/use-dispatch.js"],"names":[],"mappings":";;AAKA,uEAAuE;AAEvE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4CG;AACH,gIAKC"}
|
|
@@ -0,0 +1,99 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @typedef {import('../../types').StoreDescriptor<C>} StoreDescriptor
|
|
3
|
+
* @template C
|
|
4
|
+
*/
|
|
5
|
+
/**
|
|
6
|
+
* @typedef {import('../../types').ReduxStoreConfig<State,Actions,Selectors>} ReduxStoreConfig
|
|
7
|
+
* @template State,Actions,Selectors
|
|
8
|
+
*/
|
|
9
|
+
/**
|
|
10
|
+
* @typedef {import('../../types').UseSelectReturn<T>} UseSelectReturn
|
|
11
|
+
* @template T
|
|
12
|
+
*/
|
|
13
|
+
/** @typedef {import('../../types').MapSelect} MapSelect */
|
|
14
|
+
/**
|
|
15
|
+
* Custom react hook for retrieving props from registered selectors.
|
|
16
|
+
*
|
|
17
|
+
* In general, this custom React hook follows the
|
|
18
|
+
* [rules of hooks](https://reactjs.org/docs/hooks-rules.html).
|
|
19
|
+
*
|
|
20
|
+
* @template {MapSelect | StoreDescriptor<any>} T
|
|
21
|
+
* @param {T} mapSelect Function called on every state change. The returned value is
|
|
22
|
+
* exposed to the component implementing this hook. The function
|
|
23
|
+
* receives the `registry.select` method on the first argument
|
|
24
|
+
* and the `registry` on the second argument.
|
|
25
|
+
* When a store key is passed, all selectors for the store will be
|
|
26
|
+
* returned. This is only meant for usage of these selectors in event
|
|
27
|
+
* callbacks, not for data needed to create the element tree.
|
|
28
|
+
* @param {unknown[]} deps If provided, this memoizes the mapSelect so the same `mapSelect` is
|
|
29
|
+
* invoked on every state change unless the dependencies change.
|
|
30
|
+
*
|
|
31
|
+
* @example
|
|
32
|
+
* ```js
|
|
33
|
+
* import { useSelect } from '@wordpress/data';
|
|
34
|
+
* import { store as myCustomStore } from 'my-custom-store';
|
|
35
|
+
*
|
|
36
|
+
* function HammerPriceDisplay( { currency } ) {
|
|
37
|
+
* const price = useSelect( ( select ) => {
|
|
38
|
+
* return select( myCustomStore ).getPrice( 'hammer', currency );
|
|
39
|
+
* }, [ currency ] );
|
|
40
|
+
* return new Intl.NumberFormat( 'en-US', {
|
|
41
|
+
* style: 'currency',
|
|
42
|
+
* currency,
|
|
43
|
+
* } ).format( price );
|
|
44
|
+
* }
|
|
45
|
+
*
|
|
46
|
+
* // Rendered in the application:
|
|
47
|
+
* // <HammerPriceDisplay currency="USD" />
|
|
48
|
+
* ```
|
|
49
|
+
*
|
|
50
|
+
* In the above example, when `HammerPriceDisplay` is rendered into an
|
|
51
|
+
* application, the price will be retrieved from the store state using the
|
|
52
|
+
* `mapSelect` callback on `useSelect`. If the currency prop changes then
|
|
53
|
+
* any price in the state for that currency is retrieved. If the currency prop
|
|
54
|
+
* doesn't change and other props are passed in that do change, the price will
|
|
55
|
+
* not change because the dependency is just the currency.
|
|
56
|
+
*
|
|
57
|
+
* When data is only used in an event callback, the data should not be retrieved
|
|
58
|
+
* on render, so it may be useful to get the selectors function instead.
|
|
59
|
+
*
|
|
60
|
+
* **Don't use `useSelect` this way when calling the selectors in the render
|
|
61
|
+
* function because your component won't re-render on a data change.**
|
|
62
|
+
*
|
|
63
|
+
* ```js
|
|
64
|
+
* import { useSelect } from '@wordpress/data';
|
|
65
|
+
* import { store as myCustomStore } from 'my-custom-store';
|
|
66
|
+
*
|
|
67
|
+
* function Paste( { children } ) {
|
|
68
|
+
* const { getSettings } = useSelect( myCustomStore );
|
|
69
|
+
* function onPaste() {
|
|
70
|
+
* // Do something with the settings.
|
|
71
|
+
* const settings = getSettings();
|
|
72
|
+
* }
|
|
73
|
+
* return <div onPaste={ onPaste }>{ children }</div>;
|
|
74
|
+
* }
|
|
75
|
+
* ```
|
|
76
|
+
* @return {UseSelectReturn<T>} A custom react hook.
|
|
77
|
+
*/
|
|
78
|
+
export default function useSelect<T extends import("../../types").MapSelect | import("../../types").StoreDescriptor<any>>(mapSelect: T, deps: unknown[]): import("../../types").UseSelectReturn<T>;
|
|
79
|
+
/**
|
|
80
|
+
* A variant of the `useSelect` hook that has the same API, but will throw a
|
|
81
|
+
* suspense Promise if any of the called selectors is in an unresolved state.
|
|
82
|
+
*
|
|
83
|
+
* @param {Function} mapSelect Function called on every state change. The
|
|
84
|
+
* returned value is exposed to the component
|
|
85
|
+
* using this hook. The function receives the
|
|
86
|
+
* `registry.suspendSelect` method as the first
|
|
87
|
+
* argument and the `registry` as the second one.
|
|
88
|
+
* @param {Array} deps A dependency array used to memoize the `mapSelect`
|
|
89
|
+
* so that the same `mapSelect` is invoked on every
|
|
90
|
+
* state change unless the dependencies change.
|
|
91
|
+
*
|
|
92
|
+
* @return {Object} Data object returned by the `mapSelect` function.
|
|
93
|
+
*/
|
|
94
|
+
export function useSuspenseSelect(mapSelect: Function, deps: any[]): Object;
|
|
95
|
+
export type StoreDescriptor<C> = import('../../types').StoreDescriptor<C>;
|
|
96
|
+
export type ReduxStoreConfig<State, Actions, Selectors> = import('../../types').ReduxStoreConfig<State, Actions, Selectors>;
|
|
97
|
+
export type UseSelectReturn<T> = import('../../types').UseSelectReturn<T>;
|
|
98
|
+
export type MapSelect = import('../../types').MapSelect;
|
|
99
|
+
//# sourceMappingURL=index.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/use-select/index.js"],"names":[],"mappings":"AA4BA;;;GAGG;AACH;;;GAGG;AACH;;;GAGG;AACH,2DAA2D;AAE3D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+DG;AACH,8IAlDW,OAAO,EAAE,4CA2MnB;AAED;;;;;;;;;;;;;;GAcG;AACH,qEAFY,MAAM,CAgHjB;iCArWY,OAAO,aAAa,EAAE,eAAe,CAAC,CAAC,CAAC;0DAIxC,OAAO,aAAa,EAAE,gBAAgB,CAAC,KAAK,EAAC,OAAO,EAAC,SAAS,CAAC;iCAI/D,OAAO,aAAa,EAAE,eAAe,CAAC,CAAC,CAAC;wBAGvC,OAAO,aAAa,EAAE,SAAS"}
|
|
@@ -0,0 +1,84 @@
|
|
|
1
|
+
export default withDispatch;
|
|
2
|
+
/**
|
|
3
|
+
* Higher-order component used to add dispatch props using registered action
|
|
4
|
+
* creators.
|
|
5
|
+
*
|
|
6
|
+
* @param {Function} mapDispatchToProps A function of returning an object of
|
|
7
|
+
* prop names where value is a
|
|
8
|
+
* dispatch-bound action creator, or a
|
|
9
|
+
* function to be called with the
|
|
10
|
+
* component's props and returning an
|
|
11
|
+
* action creator.
|
|
12
|
+
*
|
|
13
|
+
* @example
|
|
14
|
+
* ```jsx
|
|
15
|
+
* function Button( { onClick, children } ) {
|
|
16
|
+
* return <button type="button" onClick={ onClick }>{ children }</button>;
|
|
17
|
+
* }
|
|
18
|
+
*
|
|
19
|
+
* import { withDispatch } from '@wordpress/data';
|
|
20
|
+
* import { store as myCustomStore } from 'my-custom-store';
|
|
21
|
+
*
|
|
22
|
+
* const SaleButton = withDispatch( ( dispatch, ownProps ) => {
|
|
23
|
+
* const { startSale } = dispatch( myCustomStore );
|
|
24
|
+
* const { discountPercent } = ownProps;
|
|
25
|
+
*
|
|
26
|
+
* return {
|
|
27
|
+
* onClick() {
|
|
28
|
+
* startSale( discountPercent );
|
|
29
|
+
* },
|
|
30
|
+
* };
|
|
31
|
+
* } )( Button );
|
|
32
|
+
*
|
|
33
|
+
* // Rendered in the application:
|
|
34
|
+
* //
|
|
35
|
+
* // <SaleButton discountPercent="20">Start Sale!</SaleButton>
|
|
36
|
+
* ```
|
|
37
|
+
*
|
|
38
|
+
* @example
|
|
39
|
+
* In the majority of cases, it will be sufficient to use only two first params
|
|
40
|
+
* passed to `mapDispatchToProps` as illustrated in the previous example.
|
|
41
|
+
* However, there might be some very advanced use cases where using the
|
|
42
|
+
* `registry` object might be used as a tool to optimize the performance of
|
|
43
|
+
* your component. Using `select` function from the registry might be useful
|
|
44
|
+
* when you need to fetch some dynamic data from the store at the time when the
|
|
45
|
+
* event is fired, but at the same time, you never use it to render your
|
|
46
|
+
* component. In such scenario, you can avoid using the `withSelect` higher
|
|
47
|
+
* order component to compute such prop, which might lead to unnecessary
|
|
48
|
+
* re-renders of your component caused by its frequent value change.
|
|
49
|
+
* Keep in mind, that `mapDispatchToProps` must return an object with functions
|
|
50
|
+
* only.
|
|
51
|
+
*
|
|
52
|
+
* ```jsx
|
|
53
|
+
* function Button( { onClick, children } ) {
|
|
54
|
+
* return <button type="button" onClick={ onClick }>{ children }</button>;
|
|
55
|
+
* }
|
|
56
|
+
*
|
|
57
|
+
* import { withDispatch } from '@wordpress/data';
|
|
58
|
+
* import { store as myCustomStore } from 'my-custom-store';
|
|
59
|
+
*
|
|
60
|
+
* const SaleButton = withDispatch( ( dispatch, ownProps, { select } ) => {
|
|
61
|
+
* // Stock number changes frequently.
|
|
62
|
+
* const { getStockNumber } = select( myCustomStore );
|
|
63
|
+
* const { startSale } = dispatch( myCustomStore );
|
|
64
|
+
* return {
|
|
65
|
+
* onClick() {
|
|
66
|
+
* const discountPercent = getStockNumber() > 50 ? 10 : 20;
|
|
67
|
+
* startSale( discountPercent );
|
|
68
|
+
* },
|
|
69
|
+
* };
|
|
70
|
+
* } )( Button );
|
|
71
|
+
*
|
|
72
|
+
* // Rendered in the application:
|
|
73
|
+
* //
|
|
74
|
+
* // <SaleButton>Start Sale!</SaleButton>
|
|
75
|
+
* ```
|
|
76
|
+
*
|
|
77
|
+
* _Note:_ It is important that the `mapDispatchToProps` function always
|
|
78
|
+
* returns an object with the same keys. For example, it should not contain
|
|
79
|
+
* conditions under which a different value would be returned.
|
|
80
|
+
*
|
|
81
|
+
* @return {WPComponent} Enhanced component with merged dispatcher props.
|
|
82
|
+
*/
|
|
83
|
+
declare function withDispatch(mapDispatchToProps: Function): any;
|
|
84
|
+
//# sourceMappingURL=index.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/with-dispatch/index.js"],"names":[],"mappings":";AAUA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgFG;AACH,iEASE"}
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
export default withRegistry;
|
|
2
|
+
/**
|
|
3
|
+
* Higher-order component which renders the original component with the current
|
|
4
|
+
* registry context passed as its `registry` prop.
|
|
5
|
+
*
|
|
6
|
+
* @param {WPComponent} OriginalComponent Original component.
|
|
7
|
+
*
|
|
8
|
+
* @return {WPComponent} Enhanced component.
|
|
9
|
+
*/
|
|
10
|
+
declare const withRegistry: (Inner: import("react").ComponentType<any>) => (props: any) => JSX.Element;
|
|
11
|
+
//# sourceMappingURL=index.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/with-registry/index.js"],"names":[],"mappings":";AAUA;;;;;;;GAOG;AACH,uGAUE"}
|
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
export default withSelect;
|
|
2
|
+
/**
|
|
3
|
+
* Higher-order component used to inject state-derived props using registered
|
|
4
|
+
* selectors.
|
|
5
|
+
*
|
|
6
|
+
* @param {Function} mapSelectToProps Function called on every state change,
|
|
7
|
+
* expected to return object of props to
|
|
8
|
+
* merge with the component's own props.
|
|
9
|
+
*
|
|
10
|
+
* @example
|
|
11
|
+
* ```js
|
|
12
|
+
* import { withSelect } from '@wordpress/data';
|
|
13
|
+
* import { store as myCustomStore } from 'my-custom-store';
|
|
14
|
+
*
|
|
15
|
+
* function PriceDisplay( { price, currency } ) {
|
|
16
|
+
* return new Intl.NumberFormat( 'en-US', {
|
|
17
|
+
* style: 'currency',
|
|
18
|
+
* currency,
|
|
19
|
+
* } ).format( price );
|
|
20
|
+
* }
|
|
21
|
+
*
|
|
22
|
+
* const HammerPriceDisplay = withSelect( ( select, ownProps ) => {
|
|
23
|
+
* const { getPrice } = select( myCustomStore );
|
|
24
|
+
* const { currency } = ownProps;
|
|
25
|
+
*
|
|
26
|
+
* return {
|
|
27
|
+
* price: getPrice( 'hammer', currency ),
|
|
28
|
+
* };
|
|
29
|
+
* } )( PriceDisplay );
|
|
30
|
+
*
|
|
31
|
+
* // Rendered in the application:
|
|
32
|
+
* //
|
|
33
|
+
* // <HammerPriceDisplay currency="USD" />
|
|
34
|
+
* ```
|
|
35
|
+
* In the above example, when `HammerPriceDisplay` is rendered into an
|
|
36
|
+
* application, it will pass the price into the underlying `PriceDisplay`
|
|
37
|
+
* component and update automatically if the price of a hammer ever changes in
|
|
38
|
+
* the store.
|
|
39
|
+
*
|
|
40
|
+
* @return {WPComponent} Enhanced component with merged state data props.
|
|
41
|
+
*/
|
|
42
|
+
declare function withSelect(mapSelectToProps: Function): any;
|
|
43
|
+
//# sourceMappingURL=index.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/with-select/index.js"],"names":[],"mappings":";AAUA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuCG;AACH,6DAUE"}
|
|
@@ -0,0 +1,83 @@
|
|
|
1
|
+
export namespace controls {
|
|
2
|
+
export { select };
|
|
3
|
+
export { resolveSelect };
|
|
4
|
+
export { dispatch };
|
|
5
|
+
}
|
|
6
|
+
export const builtinControls: {
|
|
7
|
+
"@@data/SELECT": Function;
|
|
8
|
+
"@@data/RESOLVE_SELECT": Function;
|
|
9
|
+
"@@data/DISPATCH": Function;
|
|
10
|
+
};
|
|
11
|
+
export type StoreDescriptor = import("./types").StoreDescriptor<any>;
|
|
12
|
+
/**
|
|
13
|
+
* Dispatches a control action for triggering a synchronous registry select.
|
|
14
|
+
*
|
|
15
|
+
* Note: This control synchronously returns the current selector value, triggering the
|
|
16
|
+
* resolution, but not waiting for it.
|
|
17
|
+
*
|
|
18
|
+
* @param {string|StoreDescriptor} storeNameOrDescriptor Unique namespace identifier for the store
|
|
19
|
+
* @param {string} selectorName The name of the selector.
|
|
20
|
+
* @param {Array} args Arguments for the selector.
|
|
21
|
+
*
|
|
22
|
+
* @example
|
|
23
|
+
* ```js
|
|
24
|
+
* import { controls } from '@wordpress/data';
|
|
25
|
+
*
|
|
26
|
+
* // Action generator using `select`.
|
|
27
|
+
* export function* myAction() {
|
|
28
|
+
* const isEditorSideBarOpened = yield controls.select( 'core/edit-post', 'isEditorSideBarOpened' );
|
|
29
|
+
* // Do stuff with the result from the `select`.
|
|
30
|
+
* }
|
|
31
|
+
* ```
|
|
32
|
+
*
|
|
33
|
+
* @return {Object} The control descriptor.
|
|
34
|
+
*/
|
|
35
|
+
declare function select(storeNameOrDescriptor: string | import("./types").StoreDescriptor<any>, selectorName: string, ...args: any[]): Object;
|
|
36
|
+
/**
|
|
37
|
+
* Dispatches a control action for triggering and resolving a registry select.
|
|
38
|
+
*
|
|
39
|
+
* Note: when this control action is handled, it automatically considers
|
|
40
|
+
* selectors that may have a resolver. In such case, it will return a `Promise` that resolves
|
|
41
|
+
* after the selector finishes resolving, with the final result value.
|
|
42
|
+
*
|
|
43
|
+
* @param {string|StoreDescriptor} storeNameOrDescriptor Unique namespace identifier for the store
|
|
44
|
+
* @param {string} selectorName The name of the selector
|
|
45
|
+
* @param {Array} args Arguments for the selector.
|
|
46
|
+
*
|
|
47
|
+
* @example
|
|
48
|
+
* ```js
|
|
49
|
+
* import { controls } from '@wordpress/data';
|
|
50
|
+
*
|
|
51
|
+
* // Action generator using resolveSelect
|
|
52
|
+
* export function* myAction() {
|
|
53
|
+
* const isSidebarOpened = yield controls.resolveSelect( 'core/edit-post', 'isEditorSideBarOpened' );
|
|
54
|
+
* // do stuff with the result from the select.
|
|
55
|
+
* }
|
|
56
|
+
* ```
|
|
57
|
+
*
|
|
58
|
+
* @return {Object} The control descriptor.
|
|
59
|
+
*/
|
|
60
|
+
declare function resolveSelect(storeNameOrDescriptor: string | import("./types").StoreDescriptor<any>, selectorName: string, ...args: any[]): Object;
|
|
61
|
+
/**
|
|
62
|
+
* Dispatches a control action for triggering a registry dispatch.
|
|
63
|
+
*
|
|
64
|
+
* @param {string|StoreDescriptor} storeNameOrDescriptor Unique namespace identifier for the store
|
|
65
|
+
* @param {string} actionName The name of the action to dispatch
|
|
66
|
+
* @param {Array} args Arguments for the dispatch action.
|
|
67
|
+
*
|
|
68
|
+
* @example
|
|
69
|
+
* ```js
|
|
70
|
+
* import { controls } from '@wordpress/data-controls';
|
|
71
|
+
*
|
|
72
|
+
* // Action generator using dispatch
|
|
73
|
+
* export function* myAction() {
|
|
74
|
+
* yield controls.dispatch( 'core/edit-post', 'togglePublishSidebar' );
|
|
75
|
+
* // do some other things.
|
|
76
|
+
* }
|
|
77
|
+
* ```
|
|
78
|
+
*
|
|
79
|
+
* @return {Object} The control descriptor.
|
|
80
|
+
*/
|
|
81
|
+
declare function dispatch(storeNameOrDescriptor: string | import("./types").StoreDescriptor<any>, actionName: string, ...args: any[]): Object;
|
|
82
|
+
export {};
|
|
83
|
+
//# sourceMappingURL=controls.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"controls.d.ts","sourceRoot":"","sources":["../src/controls.js"],"names":[],"mappings":";;;;;AAqHA;;;;EAuBE;;AA7HF;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,+CAjBW,MAAM,yCAAgB,gBACtB,MAAM,mBAcL,MAAM,CAWjB;AAED;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,sDAjBW,MAAM,yCAAgB,gBACtB,MAAM,mBAcL,MAAM,CAWjB;AAED;;;;;;;;;;;;;;;;;;;GAmBG;AACH,iDAjBW,MAAM,yCAAgB,cACtB,MAAM,mBAcL,MAAM,CAWjB"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"default-registry.d.ts","sourceRoot":"","sources":["../src/default-registry.js"],"names":[],"mappings":""}
|
|
@@ -0,0 +1,63 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Creates a selector function that takes additional curried argument with the
|
|
3
|
+
* registry `select` function. While a regular selector has signature
|
|
4
|
+
* ```js
|
|
5
|
+
* ( state, ...selectorArgs ) => ( result )
|
|
6
|
+
* ```
|
|
7
|
+
* that allows to select data from the store's `state`, a registry selector
|
|
8
|
+
* has signature:
|
|
9
|
+
* ```js
|
|
10
|
+
* ( select ) => ( state, ...selectorArgs ) => ( result )
|
|
11
|
+
* ```
|
|
12
|
+
* that supports also selecting from other registered stores.
|
|
13
|
+
*
|
|
14
|
+
* @example
|
|
15
|
+
* ```js
|
|
16
|
+
* import { store as coreStore } from '@wordpress/core-data';
|
|
17
|
+
* import { store as editorStore } from '@wordpress/editor';
|
|
18
|
+
*
|
|
19
|
+
* const getCurrentPostId = createRegistrySelector( ( select ) => ( state ) => {
|
|
20
|
+
* return select( editorStore ).getCurrentPostId();
|
|
21
|
+
* } );
|
|
22
|
+
*
|
|
23
|
+
* const getPostEdits = createRegistrySelector( ( select ) => ( state ) => {
|
|
24
|
+
* // calling another registry selector just like any other function
|
|
25
|
+
* const postType = getCurrentPostType( state );
|
|
26
|
+
* const postId = getCurrentPostId( state );
|
|
27
|
+
* return select( coreStore ).getEntityRecordEdits( 'postType', postType, postId );
|
|
28
|
+
* } );
|
|
29
|
+
* ```
|
|
30
|
+
*
|
|
31
|
+
* Note how the `getCurrentPostId` selector can be called just like any other function,
|
|
32
|
+
* (it works even inside a regular non-registry selector) and we don't need to pass the
|
|
33
|
+
* registry as argument. The registry binding happens automatically when registering the selector
|
|
34
|
+
* with a store.
|
|
35
|
+
*
|
|
36
|
+
* @param {Function} registrySelector Function receiving a registry `select`
|
|
37
|
+
* function and returning a state selector.
|
|
38
|
+
*
|
|
39
|
+
* @return {Function} Registry selector that can be registered with a store.
|
|
40
|
+
*/
|
|
41
|
+
export function createRegistrySelector(registrySelector: Function): Function;
|
|
42
|
+
/**
|
|
43
|
+
* Creates a control function that takes additional curried argument with the `registry` object.
|
|
44
|
+
* While a regular control has signature
|
|
45
|
+
* ```js
|
|
46
|
+
* ( action ) => ( iteratorOrPromise )
|
|
47
|
+
* ```
|
|
48
|
+
* where the control works with the `action` that it's bound to, a registry control has signature:
|
|
49
|
+
* ```js
|
|
50
|
+
* ( registry ) => ( action ) => ( iteratorOrPromise )
|
|
51
|
+
* ```
|
|
52
|
+
* A registry control is typically used to select data or dispatch an action to a registered
|
|
53
|
+
* store.
|
|
54
|
+
*
|
|
55
|
+
* When registering a control created with `createRegistryControl` with a store, the store
|
|
56
|
+
* knows which calling convention to use when executing the control.
|
|
57
|
+
*
|
|
58
|
+
* @param {Function} registryControl Function receiving a registry object and returning a control.
|
|
59
|
+
*
|
|
60
|
+
* @return {Function} Registry control that can be registered with a store.
|
|
61
|
+
*/
|
|
62
|
+
export function createRegistryControl(registryControl: Function): Function;
|
|
63
|
+
//# sourceMappingURL=factory.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"factory.d.ts","sourceRoot":"","sources":["../src/factory.js"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuCG;AACH,6EAiBC;AAED;;;;;;;;;;;;;;;;;;;GAmBG;AACH,2EAIC"}
|