@wordpress/commands 0.4.0 → 0.5.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 +2 -0
- package/README.md +16 -0
- package/build/components/command-menu.js +60 -51
- package/build/components/command-menu.js.map +1 -1
- package/build/hooks/use-command-context.js +45 -0
- package/build/hooks/use-command-context.js.map +1 -0
- package/build/hooks/use-command-loader.js +6 -11
- package/build/hooks/use-command-loader.js.map +1 -1
- package/build/hooks/use-command.js +4 -3
- package/build/hooks/use-command.js.map +1 -1
- package/build/index.js +18 -0
- package/build/index.js.map +1 -1
- package/build/private-apis.js +2 -5
- package/build/private-apis.js.map +1 -1
- package/build/store/actions.js +35 -40
- package/build/store/actions.js.map +1 -1
- package/build/store/reducer.js +38 -22
- package/build/store/reducer.js.map +1 -1
- package/build/store/selectors.js +20 -17
- package/build/store/selectors.js.map +1 -1
- package/build-module/components/command-menu.js +60 -51
- package/build-module/components/command-menu.js.map +1 -1
- package/build-module/hooks/use-command-context.js +35 -0
- package/build-module/hooks/use-command-context.js.map +1 -0
- package/build-module/hooks/use-command-loader.js +6 -11
- package/build-module/hooks/use-command-loader.js.map +1 -1
- package/build-module/hooks/use-command.js +4 -3
- package/build-module/hooks/use-command.js.map +1 -1
- package/build-module/index.js +2 -0
- package/build-module/index.js.map +1 -1
- package/build-module/private-apis.js +2 -4
- package/build-module/private-apis.js.map +1 -1
- package/build-module/store/actions.js +33 -40
- package/build-module/store/actions.js.map +1 -1
- package/build-module/store/reducer.js +38 -22
- package/build-module/store/reducer.js.map +1 -1
- package/build-module/store/selectors.js +17 -16
- package/build-module/store/selectors.js.map +1 -1
- package/build-style/style-rtl.css +6 -1
- package/build-style/style.css +6 -1
- package/package.json +9 -9
- package/src/components/command-menu.js +38 -35
- package/src/components/style.scss +8 -1
- package/src/hooks/use-command-context.js +32 -0
- package/src/hooks/use-command-loader.js +12 -6
- package/src/hooks/use-command.js +5 -3
- package/src/index.js +2 -0
- package/src/private-apis.js +2 -4
- package/src/store/actions.js +31 -26
- package/src/store/reducer.js +33 -27
- package/src/store/selectors.js +18 -20
package/build/store/reducer.js
CHANGED
|
@@ -26,14 +26,13 @@ function commands() {
|
|
|
26
26
|
switch (action.type) {
|
|
27
27
|
case 'REGISTER_COMMAND':
|
|
28
28
|
return { ...state,
|
|
29
|
-
[action.
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
}
|
|
29
|
+
[action.name]: {
|
|
30
|
+
name: action.name,
|
|
31
|
+
label: action.label,
|
|
32
|
+
searchLabel: action.searchLabel,
|
|
33
|
+
context: action.context,
|
|
34
|
+
callback: action.callback,
|
|
35
|
+
icon: action.icon
|
|
37
36
|
}
|
|
38
37
|
};
|
|
39
38
|
|
|
@@ -42,10 +41,8 @@ function commands() {
|
|
|
42
41
|
const {
|
|
43
42
|
[action.name]: _,
|
|
44
43
|
...remainingState
|
|
45
|
-
} = state
|
|
46
|
-
return
|
|
47
|
-
[action.group]: remainingState
|
|
48
|
-
};
|
|
44
|
+
} = state;
|
|
45
|
+
return remainingState;
|
|
49
46
|
}
|
|
50
47
|
}
|
|
51
48
|
|
|
@@ -68,11 +65,10 @@ function commandLoaders() {
|
|
|
68
65
|
switch (action.type) {
|
|
69
66
|
case 'REGISTER_COMMAND_LOADER':
|
|
70
67
|
return { ...state,
|
|
71
|
-
[action.
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
}
|
|
68
|
+
[action.name]: {
|
|
69
|
+
name: action.name,
|
|
70
|
+
context: action.context,
|
|
71
|
+
hook: action.hook
|
|
76
72
|
}
|
|
77
73
|
};
|
|
78
74
|
|
|
@@ -81,10 +77,8 @@ function commandLoaders() {
|
|
|
81
77
|
const {
|
|
82
78
|
[action.name]: _,
|
|
83
79
|
...remainingState
|
|
84
|
-
} = state
|
|
85
|
-
return
|
|
86
|
-
[action.group]: remainingState
|
|
87
|
-
};
|
|
80
|
+
} = state;
|
|
81
|
+
return remainingState;
|
|
88
82
|
}
|
|
89
83
|
}
|
|
90
84
|
|
|
@@ -114,11 +108,33 @@ function isOpen() {
|
|
|
114
108
|
|
|
115
109
|
return state;
|
|
116
110
|
}
|
|
111
|
+
/**
|
|
112
|
+
* Reducer returning the command center's active context.
|
|
113
|
+
*
|
|
114
|
+
* @param {Object} state Current state.
|
|
115
|
+
* @param {Object} action Dispatched action.
|
|
116
|
+
*
|
|
117
|
+
* @return {boolean} Updated state.
|
|
118
|
+
*/
|
|
119
|
+
|
|
120
|
+
|
|
121
|
+
function context() {
|
|
122
|
+
let state = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'root';
|
|
123
|
+
let action = arguments.length > 1 ? arguments[1] : undefined;
|
|
124
|
+
|
|
125
|
+
switch (action.type) {
|
|
126
|
+
case 'SET_CONTEXT':
|
|
127
|
+
return action.context;
|
|
128
|
+
}
|
|
129
|
+
|
|
130
|
+
return state;
|
|
131
|
+
}
|
|
117
132
|
|
|
118
133
|
const reducer = (0, _data.combineReducers)({
|
|
119
134
|
commands,
|
|
120
135
|
commandLoaders,
|
|
121
|
-
isOpen
|
|
136
|
+
isOpen,
|
|
137
|
+
context
|
|
122
138
|
});
|
|
123
139
|
var _default = reducer;
|
|
124
140
|
exports.default = _default;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["@wordpress/commands/src/store/reducer.js"],"names":["commands","state","action","type","
|
|
1
|
+
{"version":3,"sources":["@wordpress/commands/src/store/reducer.js"],"names":["commands","state","action","type","name","label","searchLabel","context","callback","icon","_","remainingState","commandLoaders","hook","isOpen","reducer"],"mappings":";;;;;;;AAGA;;AAHA;AACA;AACA;;AAGA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAASA,QAAT,GAAwC;AAAA,MAArBC,KAAqB,uEAAb,EAAa;AAAA,MAATC,MAAS;;AACvC,UAASA,MAAM,CAACC,IAAhB;AACC,SAAK,kBAAL;AACC,aAAO,EACN,GAAGF,KADG;AAEN,SAAEC,MAAM,CAACE,IAAT,GAAiB;AAChBA,UAAAA,IAAI,EAAEF,MAAM,CAACE,IADG;AAEhBC,UAAAA,KAAK,EAAEH,MAAM,CAACG,KAFE;AAGhBC,UAAAA,WAAW,EAAEJ,MAAM,CAACI,WAHJ;AAIhBC,UAAAA,OAAO,EAAEL,MAAM,CAACK,OAJA;AAKhBC,UAAAA,QAAQ,EAAEN,MAAM,CAACM,QALD;AAMhBC,UAAAA,IAAI,EAAEP,MAAM,CAACO;AANG;AAFX,OAAP;;AAWD,SAAK,oBAAL;AAA2B;AAC1B,cAAM;AAAE,WAAEP,MAAM,CAACE,IAAT,GAAiBM,CAAnB;AAAsB,aAAGC;AAAzB,YAA4CV,KAAlD;AACA,eAAOU,cAAP;AACA;AAhBF;;AAmBA,SAAOV,KAAP;AACA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AACA,SAASW,cAAT,GAA8C;AAAA,MAArBX,KAAqB,uEAAb,EAAa;AAAA,MAATC,MAAS;;AAC7C,UAASA,MAAM,CAACC,IAAhB;AACC,SAAK,yBAAL;AACC,aAAO,EACN,GAAGF,KADG;AAEN,SAAEC,MAAM,CAACE,IAAT,GAAiB;AAChBA,UAAAA,IAAI,EAAEF,MAAM,CAACE,IADG;AAEhBG,UAAAA,OAAO,EAAEL,MAAM,CAACK,OAFA;AAGhBM,UAAAA,IAAI,EAAEX,MAAM,CAACW;AAHG;AAFX,OAAP;;AAQD,SAAK,2BAAL;AAAkC;AACjC,cAAM;AAAE,WAAEX,MAAM,CAACE,IAAT,GAAiBM,CAAnB;AAAsB,aAAGC;AAAzB,YAA4CV,KAAlD;AACA,eAAOU,cAAP;AACA;AAbF;;AAgBA,SAAOV,KAAP;AACA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AACA,SAASa,MAAT,GAAyC;AAAA,MAAxBb,KAAwB,uEAAhB,KAAgB;AAAA,MAATC,MAAS;;AACxC,UAASA,MAAM,CAACC,IAAhB;AACC,SAAK,MAAL;AACC,aAAO,IAAP;;AACD,SAAK,OAAL;AACC,aAAO,KAAP;AAJF;;AAOA,SAAOF,KAAP;AACA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AACA,SAASM,OAAT,GAA2C;AAAA,MAAzBN,KAAyB,uEAAjB,MAAiB;AAAA,MAATC,MAAS;;AAC1C,UAASA,MAAM,CAACC,IAAhB;AACC,SAAK,aAAL;AACC,aAAOD,MAAM,CAACK,OAAd;AAFF;;AAKA,SAAON,KAAP;AACA;;AAED,MAAMc,OAAO,GAAG,2BAAiB;AAChCf,EAAAA,QADgC;AAEhCY,EAAAA,cAFgC;AAGhCE,EAAAA,MAHgC;AAIhCP,EAAAA;AAJgC,CAAjB,CAAhB;eAOeQ,O","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { combineReducers } from '@wordpress/data';\n\n/**\n * Reducer returning the registered commands\n *\n * @param {Object} state Current state.\n * @param {Object} action Dispatched action.\n *\n * @return {Object} Updated state.\n */\nfunction commands( state = {}, action ) {\n\tswitch ( action.type ) {\n\t\tcase 'REGISTER_COMMAND':\n\t\t\treturn {\n\t\t\t\t...state,\n\t\t\t\t[ action.name ]: {\n\t\t\t\t\tname: action.name,\n\t\t\t\t\tlabel: action.label,\n\t\t\t\t\tsearchLabel: action.searchLabel,\n\t\t\t\t\tcontext: action.context,\n\t\t\t\t\tcallback: action.callback,\n\t\t\t\t\ticon: action.icon,\n\t\t\t\t},\n\t\t\t};\n\t\tcase 'UNREGISTER_COMMAND': {\n\t\t\tconst { [ action.name ]: _, ...remainingState } = state;\n\t\t\treturn remainingState;\n\t\t}\n\t}\n\n\treturn state;\n}\n\n/**\n * Reducer returning the command loaders\n *\n * @param {Object} state Current state.\n * @param {Object} action Dispatched action.\n *\n * @return {Object} Updated state.\n */\nfunction commandLoaders( state = {}, action ) {\n\tswitch ( action.type ) {\n\t\tcase 'REGISTER_COMMAND_LOADER':\n\t\t\treturn {\n\t\t\t\t...state,\n\t\t\t\t[ action.name ]: {\n\t\t\t\t\tname: action.name,\n\t\t\t\t\tcontext: action.context,\n\t\t\t\t\thook: action.hook,\n\t\t\t\t},\n\t\t\t};\n\t\tcase 'UNREGISTER_COMMAND_LOADER': {\n\t\t\tconst { [ action.name ]: _, ...remainingState } = state;\n\t\t\treturn remainingState;\n\t\t}\n\t}\n\n\treturn state;\n}\n\n/**\n * Reducer returning the command center open state.\n *\n * @param {Object} state Current state.\n * @param {Object} action Dispatched action.\n *\n * @return {boolean} Updated state.\n */\nfunction isOpen( state = false, action ) {\n\tswitch ( action.type ) {\n\t\tcase 'OPEN':\n\t\t\treturn true;\n\t\tcase 'CLOSE':\n\t\t\treturn false;\n\t}\n\n\treturn state;\n}\n\n/**\n * Reducer returning the command center's active context.\n *\n * @param {Object} state Current state.\n * @param {Object} action Dispatched action.\n *\n * @return {boolean} Updated state.\n */\nfunction context( state = 'root', action ) {\n\tswitch ( action.type ) {\n\t\tcase 'SET_CONTEXT':\n\t\t\treturn action.context;\n\t}\n\n\treturn state;\n}\n\nconst reducer = combineReducers( {\n\tcommands,\n\tcommandLoaders,\n\tisOpen,\n\tcontext,\n} );\n\nexport default reducer;\n"]}
|
package/build/store/selectors.js
CHANGED
|
@@ -5,7 +5,8 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
|
|
|
5
5
|
Object.defineProperty(exports, "__esModule", {
|
|
6
6
|
value: true
|
|
7
7
|
});
|
|
8
|
-
exports.
|
|
8
|
+
exports.getCommands = exports.getCommandLoaders = void 0;
|
|
9
|
+
exports.getContext = getContext;
|
|
9
10
|
exports.isOpen = isOpen;
|
|
10
11
|
|
|
11
12
|
var _rememo = _interopRequireDefault(require("rememo"));
|
|
@@ -13,26 +14,28 @@ var _rememo = _interopRequireDefault(require("rememo"));
|
|
|
13
14
|
/**
|
|
14
15
|
* External dependencies
|
|
15
16
|
*/
|
|
16
|
-
function
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
var _state$commands$group;
|
|
24
|
-
|
|
25
|
-
return Object.values((_state$commands$group = state.commands[group]) !== null && _state$commands$group !== void 0 ? _state$commands$group : {});
|
|
26
|
-
}, (state, group) => [state.commands[group]]);
|
|
17
|
+
const getCommands = (0, _rememo.default)(function (state) {
|
|
18
|
+
let contextual = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
|
|
19
|
+
return Object.values(state.commands).filter(command => {
|
|
20
|
+
const isContextual = command.context && command.context === state.context;
|
|
21
|
+
return contextual ? isContextual : !isContextual;
|
|
22
|
+
});
|
|
23
|
+
}, state => [state.commands, state.context]);
|
|
27
24
|
exports.getCommands = getCommands;
|
|
28
|
-
const getCommandLoaders = (0, _rememo.default)((state
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
25
|
+
const getCommandLoaders = (0, _rememo.default)(function (state) {
|
|
26
|
+
let contextual = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
|
|
27
|
+
return Object.values(state.commandLoaders).filter(loader => {
|
|
28
|
+
const isContextual = loader.context && loader.context === state.context;
|
|
29
|
+
return contextual ? isContextual : !isContextual;
|
|
30
|
+
});
|
|
31
|
+
}, state => [state.commandLoaders, state.context]);
|
|
33
32
|
exports.getCommandLoaders = getCommandLoaders;
|
|
34
33
|
|
|
35
34
|
function isOpen(state) {
|
|
36
35
|
return state.isOpen;
|
|
37
36
|
}
|
|
37
|
+
|
|
38
|
+
function getContext(state) {
|
|
39
|
+
return state.context;
|
|
40
|
+
}
|
|
38
41
|
//# sourceMappingURL=selectors.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["@wordpress/commands/src/store/selectors.js"],"names":["
|
|
1
|
+
{"version":3,"sources":["@wordpress/commands/src/store/selectors.js"],"names":["getCommands","state","contextual","Object","values","commands","filter","command","isContextual","context","getCommandLoaders","commandLoaders","loader","isOpen","getContext"],"mappings":";;;;;;;;;;;AAGA;;AAHA;AACA;AACA;AAGO,MAAMA,WAAW,GAAG,qBAC1B,UAAEC,KAAF;AAAA,MAASC,UAAT,uEAAsB,KAAtB;AAAA,SACCC,MAAM,CAACC,MAAP,CAAeH,KAAK,CAACI,QAArB,EAAgCC,MAAhC,CAA0CC,OAAF,IAAe;AACtD,UAAMC,YAAY,GACjBD,OAAO,CAACE,OAAR,IAAmBF,OAAO,CAACE,OAAR,KAAoBR,KAAK,CAACQ,OAD9C;AAEA,WAAOP,UAAU,GAAGM,YAAH,GAAkB,CAAEA,YAArC;AACA,GAJD,CADD;AAAA,CAD0B,EAOxBP,KAAF,IAAa,CAAEA,KAAK,CAACI,QAAR,EAAkBJ,KAAK,CAACQ,OAAxB,CAPa,CAApB;;AAUA,MAAMC,iBAAiB,GAAG,qBAChC,UAAET,KAAF;AAAA,MAASC,UAAT,uEAAsB,KAAtB;AAAA,SACCC,MAAM,CAACC,MAAP,CAAeH,KAAK,CAACU,cAArB,EAAsCL,MAAtC,CAAgDM,MAAF,IAAc;AAC3D,UAAMJ,YAAY,GACjBI,MAAM,CAACH,OAAP,IAAkBG,MAAM,CAACH,OAAP,KAAmBR,KAAK,CAACQ,OAD5C;AAEA,WAAOP,UAAU,GAAGM,YAAH,GAAkB,CAAEA,YAArC;AACA,GAJD,CADD;AAAA,CADgC,EAO9BP,KAAF,IAAa,CAAEA,KAAK,CAACU,cAAR,EAAwBV,KAAK,CAACQ,OAA9B,CAPmB,CAA1B;;;AAUA,SAASI,MAAT,CAAiBZ,KAAjB,EAAyB;AAC/B,SAAOA,KAAK,CAACY,MAAb;AACA;;AAEM,SAASC,UAAT,CAAqBb,KAArB,EAA6B;AACnC,SAAOA,KAAK,CAACQ,OAAb;AACA","sourcesContent":["/**\n * External dependencies\n */\nimport createSelector from 'rememo';\n\nexport const getCommands = createSelector(\n\t( state, contextual = false ) =>\n\t\tObject.values( state.commands ).filter( ( command ) => {\n\t\t\tconst isContextual =\n\t\t\t\tcommand.context && command.context === state.context;\n\t\t\treturn contextual ? isContextual : ! isContextual;\n\t\t} ),\n\t( state ) => [ state.commands, state.context ]\n);\n\nexport const getCommandLoaders = createSelector(\n\t( state, contextual = false ) =>\n\t\tObject.values( state.commandLoaders ).filter( ( loader ) => {\n\t\t\tconst isContextual =\n\t\t\t\tloader.context && loader.context === state.context;\n\t\t\treturn contextual ? isContextual : ! isContextual;\n\t\t} ),\n\t( state ) => [ state.commandLoaders, state.context ]\n);\n\nexport function isOpen( state ) {\n\treturn state.isOpen;\n}\n\nexport function getContext( state ) {\n\treturn state.context;\n}\n"]}
|
|
@@ -39,21 +39,30 @@ function CommandMenuLoader(_ref) {
|
|
|
39
39
|
useEffect(() => {
|
|
40
40
|
setLoader(name, isLoading);
|
|
41
41
|
}, [setLoader, name, isLoading]);
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
42
|
+
|
|
43
|
+
if (!commands.length) {
|
|
44
|
+
return null;
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
return createElement(Fragment, null, createElement(Command.List, null, commands.map(command => {
|
|
48
|
+
var _command$searchLabel;
|
|
49
|
+
|
|
50
|
+
return createElement(Command.Item, {
|
|
51
|
+
key: command.name,
|
|
52
|
+
value: (_command$searchLabel = command.searchLabel) !== null && _command$searchLabel !== void 0 ? _command$searchLabel : command.label,
|
|
53
|
+
onSelect: () => command.callback({
|
|
54
|
+
close
|
|
55
|
+
})
|
|
56
|
+
}, createElement(HStack, {
|
|
57
|
+
alignment: "left",
|
|
58
|
+
className: "commands-command-menu__item"
|
|
59
|
+
}, createElement(Icon, {
|
|
60
|
+
icon: command.icon
|
|
61
|
+
}), createElement("span", null, createElement(TextHighlight, {
|
|
62
|
+
text: command.label,
|
|
63
|
+
highlight: search
|
|
64
|
+
}))));
|
|
65
|
+
})));
|
|
57
66
|
}
|
|
58
67
|
|
|
59
68
|
export function CommandMenuLoaderWrapper(_ref2) {
|
|
@@ -86,7 +95,7 @@ export function CommandMenuLoaderWrapper(_ref2) {
|
|
|
86
95
|
}
|
|
87
96
|
export function CommandMenuGroup(_ref3) {
|
|
88
97
|
let {
|
|
89
|
-
|
|
98
|
+
isContextual,
|
|
90
99
|
search,
|
|
91
100
|
setLoader,
|
|
92
101
|
close
|
|
@@ -100,25 +109,34 @@ export function CommandMenuGroup(_ref3) {
|
|
|
100
109
|
getCommandLoaders
|
|
101
110
|
} = select(commandsStore);
|
|
102
111
|
return {
|
|
103
|
-
commands: getCommands(
|
|
104
|
-
loaders: getCommandLoaders(
|
|
112
|
+
commands: getCommands(isContextual),
|
|
113
|
+
loaders: getCommandLoaders(isContextual)
|
|
105
114
|
};
|
|
106
|
-
}, [
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
115
|
+
}, [isContextual]);
|
|
116
|
+
|
|
117
|
+
if (!commands.length && !loaders.length) {
|
|
118
|
+
return null;
|
|
119
|
+
}
|
|
120
|
+
|
|
121
|
+
return createElement(Command.Group, null, commands.map(command => {
|
|
122
|
+
var _command$searchLabel2;
|
|
123
|
+
|
|
124
|
+
return createElement(Command.Item, {
|
|
125
|
+
key: command.name,
|
|
126
|
+
value: (_command$searchLabel2 = command.searchLabel) !== null && _command$searchLabel2 !== void 0 ? _command$searchLabel2 : command.label,
|
|
127
|
+
onSelect: () => command.callback({
|
|
128
|
+
close
|
|
129
|
+
})
|
|
130
|
+
}, createElement(HStack, {
|
|
131
|
+
alignment: "left",
|
|
132
|
+
className: "commands-command-menu__item"
|
|
133
|
+
}, createElement(Icon, {
|
|
134
|
+
icon: command.icon
|
|
135
|
+
}), createElement("span", null, createElement(TextHighlight, {
|
|
136
|
+
text: command.label,
|
|
137
|
+
highlight: search
|
|
138
|
+
}))));
|
|
139
|
+
}), loaders.map(loader => createElement(CommandMenuLoaderWrapper, {
|
|
122
140
|
key: loader.name,
|
|
123
141
|
hook: loader.hook,
|
|
124
142
|
search: search,
|
|
@@ -131,19 +149,7 @@ export function CommandMenu() {
|
|
|
131
149
|
registerShortcut
|
|
132
150
|
} = useDispatch(keyboardShortcutsStore);
|
|
133
151
|
const [search, setSearch] = useState('');
|
|
134
|
-
const
|
|
135
|
-
groups,
|
|
136
|
-
isOpen
|
|
137
|
-
} = useSelect(select => {
|
|
138
|
-
const {
|
|
139
|
-
getGroups,
|
|
140
|
-
isOpen: _isOpen
|
|
141
|
-
} = select(commandsStore);
|
|
142
|
-
return {
|
|
143
|
-
groups: getGroups(),
|
|
144
|
-
isOpen: _isOpen()
|
|
145
|
-
};
|
|
146
|
-
}, []);
|
|
152
|
+
const isOpen = useSelect(select => select(commandsStore).isOpen(), []);
|
|
147
153
|
const {
|
|
148
154
|
open,
|
|
149
155
|
close
|
|
@@ -209,12 +215,15 @@ export function CommandMenu() {
|
|
|
209
215
|
value: search,
|
|
210
216
|
onValueChange: setSearch,
|
|
211
217
|
placeholder: __('Type a command or search')
|
|
212
|
-
})),
|
|
213
|
-
|
|
214
|
-
|
|
218
|
+
})), createElement(Command.List, null, search && !isLoading && createElement(Command.Empty, null, __('No results found.')), createElement(CommandMenuGroup, {
|
|
219
|
+
search: search,
|
|
220
|
+
setLoader: setLoader,
|
|
221
|
+
close: closeAndReset,
|
|
222
|
+
isContextual: true
|
|
223
|
+
}), search && createElement(CommandMenuGroup, {
|
|
215
224
|
search: search,
|
|
216
225
|
setLoader: setLoader,
|
|
217
226
|
close: closeAndReset
|
|
218
|
-
})))))
|
|
227
|
+
})))));
|
|
219
228
|
}
|
|
220
229
|
//# sourceMappingURL=command-menu.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["@wordpress/commands/src/components/command-menu.js"],"names":["Command","useSelect","useDispatch","useState","useEffect","useRef","useCallback","__","Modal","TextHighlight","__experimentalHStack","HStack","store","keyboardShortcutsStore","useShortcut","Icon","commandsStore","CommandMenuLoader","name","search","hook","setLoader","close","isLoading","commands","map","command","callback","icon","label","CommandMenuLoaderWrapper","currentLoader","key","setKey","current","prevKey","CommandMenuGroup","group","loaders","select","getCommands","getCommandLoaders","loader","CommandMenu","registerShortcut","setSearch","groups","isOpen","getGroups","_isOpen","open","setLoaders","commandMenuInput","category","description","keyCombination","modifier","character","event","preventDefault","bindGlobal","value","closeAndReset","focus","Object","values","some","Boolean"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport { Command } from 'cmdk';\n\n/**\n * WordPress dependencies\n */\nimport { useSelect, useDispatch } from '@wordpress/data';\nimport { useState, useEffect, useRef, useCallback } from '@wordpress/element';\nimport { __ } from '@wordpress/i18n';\nimport {\n\tModal,\n\tTextHighlight,\n\t__experimentalHStack as HStack,\n} from '@wordpress/components';\nimport {\n\tstore as keyboardShortcutsStore,\n\tuseShortcut,\n} from '@wordpress/keyboard-shortcuts';\nimport { Icon } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport { store as commandsStore } from '../store';\n\nfunction CommandMenuLoader( { name, search, hook, setLoader, close } ) {\n\tconst { isLoading, commands = [] } = hook( { search } ) ?? {};\n\tuseEffect( () => {\n\t\tsetLoader( name, isLoading );\n\t}, [ setLoader, name, isLoading ] );\n\n\treturn (\n\t\t<>\n\t\t\t<Command.List>\n\t\t\t\t{ isLoading && (\n\t\t\t\t\t<Command.Loading>{ __( 'Searching…' ) }</Command.Loading>\n\t\t\t\t) }\n\n\t\t\t\t{ commands.map( ( command ) => (\n\t\t\t\t\t<Command.Item\n\t\t\t\t\t\tkey={ command.name }\n\t\t\t\t\t\tvalue={ command.name }\n\t\t\t\t\t\tonSelect={ () => command.callback( { close } ) }\n\t\t\t\t\t>\n\t\t\t\t\t\t<HStack\n\t\t\t\t\t\t\talignment=\"left\"\n\t\t\t\t\t\t\tclassName=\"commands-command-menu__item\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<Icon icon={ command.icon } />\n\t\t\t\t\t\t\t<span>\n\t\t\t\t\t\t\t\t<TextHighlight\n\t\t\t\t\t\t\t\t\ttext={ command.label }\n\t\t\t\t\t\t\t\t\thighlight={ search }\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t</HStack>\n\t\t\t\t\t</Command.Item>\n\t\t\t\t) ) }\n\t\t\t</Command.List>\n\t\t</>\n\t);\n}\n\nexport function CommandMenuLoaderWrapper( { hook, search, setLoader, close } ) {\n\t// The \"hook\" prop is actually a custom React hook\n\t// so to avoid breaking the rules of hooks\n\t// the CommandMenuLoaderWrapper component need to be\n\t// remounted on each hook prop change\n\t// We use the key state to make sure we do that properly.\n\tconst currentLoader = useRef( hook );\n\tconst [ key, setKey ] = useState( 0 );\n\tuseEffect( () => {\n\t\tif ( currentLoader.current !== hook ) {\n\t\t\tcurrentLoader.current = hook;\n\t\t\tsetKey( ( prevKey ) => prevKey + 1 );\n\t\t}\n\t}, [ hook ] );\n\n\treturn (\n\t\t<CommandMenuLoader\n\t\t\tkey={ key }\n\t\t\thook={ currentLoader.current }\n\t\t\tsearch={ search }\n\t\t\tsetLoader={ setLoader }\n\t\t\tclose={ close }\n\t\t/>\n\t);\n}\n\nexport function CommandMenuGroup( { group, search, setLoader, close } ) {\n\tconst { commands, loaders } = useSelect(\n\t\t( select ) => {\n\t\t\tconst { getCommands, getCommandLoaders } = select( commandsStore );\n\t\t\treturn {\n\t\t\t\tcommands: getCommands( group ),\n\t\t\t\tloaders: getCommandLoaders( group ),\n\t\t\t};\n\t\t},\n\t\t[ group ]\n\t);\n\n\treturn (\n\t\t<Command.Group>\n\t\t\t{ commands.map( ( command ) => (\n\t\t\t\t<Command.Item\n\t\t\t\t\tkey={ command.name }\n\t\t\t\t\tvalue={ command.name }\n\t\t\t\t\tonSelect={ () => command.callback( { close } ) }\n\t\t\t\t>\n\t\t\t\t\t<HStack\n\t\t\t\t\t\talignment=\"left\"\n\t\t\t\t\t\tclassName=\"commands-command-menu__item\"\n\t\t\t\t\t>\n\t\t\t\t\t\t<Icon icon={ command.icon } />\n\t\t\t\t\t\t<span>\n\t\t\t\t\t\t\t<TextHighlight\n\t\t\t\t\t\t\t\ttext={ command.label }\n\t\t\t\t\t\t\t\thighlight={ search }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</span>\n\t\t\t\t\t</HStack>\n\t\t\t\t</Command.Item>\n\t\t\t) ) }\n\t\t\t{ loaders.map( ( loader ) => (\n\t\t\t\t<CommandMenuLoaderWrapper\n\t\t\t\t\tkey={ loader.name }\n\t\t\t\t\thook={ loader.hook }\n\t\t\t\t\tsearch={ search }\n\t\t\t\t\tsetLoader={ setLoader }\n\t\t\t\t\tclose={ close }\n\t\t\t\t/>\n\t\t\t) ) }\n\t\t</Command.Group>\n\t);\n}\n\nexport function CommandMenu() {\n\tconst { registerShortcut } = useDispatch( keyboardShortcutsStore );\n\tconst [ search, setSearch ] = useState( '' );\n\tconst { groups, isOpen } = useSelect( ( select ) => {\n\t\tconst { getGroups, isOpen: _isOpen } = select( commandsStore );\n\t\treturn {\n\t\t\tgroups: getGroups(),\n\t\t\tisOpen: _isOpen(),\n\t\t};\n\t}, [] );\n\tconst { open, close } = useDispatch( commandsStore );\n\tconst [ loaders, setLoaders ] = useState( {} );\n\tconst commandMenuInput = useRef();\n\n\tuseEffect( () => {\n\t\tregisterShortcut( {\n\t\t\tname: 'core/commands',\n\t\t\tcategory: 'global',\n\t\t\tdescription: __( 'Open the global command menu' ),\n\t\t\tkeyCombination: {\n\t\t\t\tmodifier: 'primary',\n\t\t\t\tcharacter: 'k',\n\t\t\t},\n\t\t} );\n\t}, [ registerShortcut ] );\n\n\tuseShortcut(\n\t\t'core/commands',\n\t\t( event ) => {\n\t\t\tevent.preventDefault();\n\t\t\tif ( isOpen ) {\n\t\t\t\tclose();\n\t\t\t} else {\n\t\t\t\topen();\n\t\t\t}\n\t\t},\n\t\t{\n\t\t\tbindGlobal: true,\n\t\t}\n\t);\n\n\tconst setLoader = useCallback(\n\t\t( name, value ) =>\n\t\t\tsetLoaders( ( current ) => ( {\n\t\t\t\t...current,\n\t\t\t\t[ name ]: value,\n\t\t\t} ) ),\n\t\t[]\n\t);\n\tconst closeAndReset = () => {\n\t\tsetSearch( '' );\n\t\tclose();\n\t};\n\n\tuseEffect( () => {\n\t\t// Focus the command menu input when mounting the modal.\n\t\tif ( isOpen ) {\n\t\t\tcommandMenuInput.current.focus();\n\t\t}\n\t}, [ isOpen ] );\n\n\tif ( ! isOpen ) {\n\t\treturn false;\n\t}\n\tconst isLoading = Object.values( loaders ).some( Boolean );\n\n\treturn (\n\t\t<Modal\n\t\t\tclassName=\"commands-command-menu\"\n\t\t\toverlayClassName=\"commands-command-menu__overlay\"\n\t\t\tonRequestClose={ closeAndReset }\n\t\t\t__experimentalHideHeader\n\t\t>\n\t\t\t<div className=\"commands-command-menu__container\">\n\t\t\t\t<Command label={ __( 'Global Command Menu' ) }>\n\t\t\t\t\t<div className=\"commands-command-menu__header\">\n\t\t\t\t\t\t<Command.Input\n\t\t\t\t\t\t\tref={ commandMenuInput }\n\t\t\t\t\t\t\tvalue={ search }\n\t\t\t\t\t\t\tonValueChange={ setSearch }\n\t\t\t\t\t\t\tplaceholder={ __( 'Type a command or search' ) }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</div>\n\t\t\t\t\t{ search && (\n\t\t\t\t\t\t<Command.List>\n\t\t\t\t\t\t\t{ ! isLoading && (\n\t\t\t\t\t\t\t\t<Command.Empty>\n\t\t\t\t\t\t\t\t\t{ __( 'No results found.' ) }\n\t\t\t\t\t\t\t\t</Command.Empty>\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t{ groups.map( ( group ) => (\n\t\t\t\t\t\t\t\t<CommandMenuGroup\n\t\t\t\t\t\t\t\t\tkey={ group }\n\t\t\t\t\t\t\t\t\tgroup={ group }\n\t\t\t\t\t\t\t\t\tsearch={ search }\n\t\t\t\t\t\t\t\t\tsetLoader={ setLoader }\n\t\t\t\t\t\t\t\t\tclose={ closeAndReset }\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t) ) }\n\t\t\t\t\t\t</Command.List>\n\t\t\t\t\t) }\n\t\t\t\t</Command>\n\t\t\t</div>\n\t\t</Modal>\n\t);\n}\n"]}
|
|
1
|
+
{"version":3,"sources":["@wordpress/commands/src/components/command-menu.js"],"names":["Command","useSelect","useDispatch","useState","useEffect","useRef","useCallback","__","Modal","TextHighlight","__experimentalHStack","HStack","store","keyboardShortcutsStore","useShortcut","Icon","commandsStore","CommandMenuLoader","name","search","hook","setLoader","close","isLoading","commands","length","map","command","searchLabel","label","callback","icon","CommandMenuLoaderWrapper","currentLoader","key","setKey","current","prevKey","CommandMenuGroup","isContextual","loaders","select","getCommands","getCommandLoaders","loader","CommandMenu","registerShortcut","setSearch","isOpen","open","setLoaders","commandMenuInput","category","description","keyCombination","modifier","character","event","preventDefault","bindGlobal","value","closeAndReset","focus","Object","values","some","Boolean"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport { Command } from 'cmdk';\n\n/**\n * WordPress dependencies\n */\nimport { useSelect, useDispatch } from '@wordpress/data';\nimport { useState, useEffect, useRef, useCallback } from '@wordpress/element';\nimport { __ } from '@wordpress/i18n';\nimport {\n\tModal,\n\tTextHighlight,\n\t__experimentalHStack as HStack,\n} from '@wordpress/components';\nimport {\n\tstore as keyboardShortcutsStore,\n\tuseShortcut,\n} from '@wordpress/keyboard-shortcuts';\nimport { Icon } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport { store as commandsStore } from '../store';\n\nfunction CommandMenuLoader( { name, search, hook, setLoader, close } ) {\n\tconst { isLoading, commands = [] } = hook( { search } ) ?? {};\n\tuseEffect( () => {\n\t\tsetLoader( name, isLoading );\n\t}, [ setLoader, name, isLoading ] );\n\n\tif ( ! commands.length ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<>\n\t\t\t<Command.List>\n\t\t\t\t{ commands.map( ( command ) => (\n\t\t\t\t\t<Command.Item\n\t\t\t\t\t\tkey={ command.name }\n\t\t\t\t\t\tvalue={ command.searchLabel ?? command.label }\n\t\t\t\t\t\tonSelect={ () => command.callback( { close } ) }\n\t\t\t\t\t>\n\t\t\t\t\t\t<HStack\n\t\t\t\t\t\t\talignment=\"left\"\n\t\t\t\t\t\t\tclassName=\"commands-command-menu__item\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<Icon icon={ command.icon } />\n\t\t\t\t\t\t\t<span>\n\t\t\t\t\t\t\t\t<TextHighlight\n\t\t\t\t\t\t\t\t\ttext={ command.label }\n\t\t\t\t\t\t\t\t\thighlight={ search }\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t</HStack>\n\t\t\t\t\t</Command.Item>\n\t\t\t\t) ) }\n\t\t\t</Command.List>\n\t\t</>\n\t);\n}\n\nexport function CommandMenuLoaderWrapper( { hook, search, setLoader, close } ) {\n\t// The \"hook\" prop is actually a custom React hook\n\t// so to avoid breaking the rules of hooks\n\t// the CommandMenuLoaderWrapper component need to be\n\t// remounted on each hook prop change\n\t// We use the key state to make sure we do that properly.\n\tconst currentLoader = useRef( hook );\n\tconst [ key, setKey ] = useState( 0 );\n\tuseEffect( () => {\n\t\tif ( currentLoader.current !== hook ) {\n\t\t\tcurrentLoader.current = hook;\n\t\t\tsetKey( ( prevKey ) => prevKey + 1 );\n\t\t}\n\t}, [ hook ] );\n\n\treturn (\n\t\t<CommandMenuLoader\n\t\t\tkey={ key }\n\t\t\thook={ currentLoader.current }\n\t\t\tsearch={ search }\n\t\t\tsetLoader={ setLoader }\n\t\t\tclose={ close }\n\t\t/>\n\t);\n}\n\nexport function CommandMenuGroup( { isContextual, search, setLoader, close } ) {\n\tconst { commands, loaders } = useSelect(\n\t\t( select ) => {\n\t\t\tconst { getCommands, getCommandLoaders } = select( commandsStore );\n\t\t\treturn {\n\t\t\t\tcommands: getCommands( isContextual ),\n\t\t\t\tloaders: getCommandLoaders( isContextual ),\n\t\t\t};\n\t\t},\n\t\t[ isContextual ]\n\t);\n\n\tif ( ! commands.length && ! loaders.length ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<Command.Group>\n\t\t\t{ commands.map( ( command ) => (\n\t\t\t\t<Command.Item\n\t\t\t\t\tkey={ command.name }\n\t\t\t\t\tvalue={ command.searchLabel ?? command.label }\n\t\t\t\t\tonSelect={ () => command.callback( { close } ) }\n\t\t\t\t>\n\t\t\t\t\t<HStack\n\t\t\t\t\t\talignment=\"left\"\n\t\t\t\t\t\tclassName=\"commands-command-menu__item\"\n\t\t\t\t\t>\n\t\t\t\t\t\t<Icon icon={ command.icon } />\n\t\t\t\t\t\t<span>\n\t\t\t\t\t\t\t<TextHighlight\n\t\t\t\t\t\t\t\ttext={ command.label }\n\t\t\t\t\t\t\t\thighlight={ search }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</span>\n\t\t\t\t\t</HStack>\n\t\t\t\t</Command.Item>\n\t\t\t) ) }\n\t\t\t{ loaders.map( ( loader ) => (\n\t\t\t\t<CommandMenuLoaderWrapper\n\t\t\t\t\tkey={ loader.name }\n\t\t\t\t\thook={ loader.hook }\n\t\t\t\t\tsearch={ search }\n\t\t\t\t\tsetLoader={ setLoader }\n\t\t\t\t\tclose={ close }\n\t\t\t\t/>\n\t\t\t) ) }\n\t\t</Command.Group>\n\t);\n}\n\nexport function CommandMenu() {\n\tconst { registerShortcut } = useDispatch( keyboardShortcutsStore );\n\tconst [ search, setSearch ] = useState( '' );\n\tconst isOpen = useSelect(\n\t\t( select ) => select( commandsStore ).isOpen(),\n\t\t[]\n\t);\n\tconst { open, close } = useDispatch( commandsStore );\n\tconst [ loaders, setLoaders ] = useState( {} );\n\tconst commandMenuInput = useRef();\n\n\tuseEffect( () => {\n\t\tregisterShortcut( {\n\t\t\tname: 'core/commands',\n\t\t\tcategory: 'global',\n\t\t\tdescription: __( 'Open the global command menu' ),\n\t\t\tkeyCombination: {\n\t\t\t\tmodifier: 'primary',\n\t\t\t\tcharacter: 'k',\n\t\t\t},\n\t\t} );\n\t}, [ registerShortcut ] );\n\n\tuseShortcut(\n\t\t'core/commands',\n\t\t( event ) => {\n\t\t\tevent.preventDefault();\n\t\t\tif ( isOpen ) {\n\t\t\t\tclose();\n\t\t\t} else {\n\t\t\t\topen();\n\t\t\t}\n\t\t},\n\t\t{\n\t\t\tbindGlobal: true,\n\t\t}\n\t);\n\n\tconst setLoader = useCallback(\n\t\t( name, value ) =>\n\t\t\tsetLoaders( ( current ) => ( {\n\t\t\t\t...current,\n\t\t\t\t[ name ]: value,\n\t\t\t} ) ),\n\t\t[]\n\t);\n\tconst closeAndReset = () => {\n\t\tsetSearch( '' );\n\t\tclose();\n\t};\n\n\tuseEffect( () => {\n\t\t// Focus the command menu input when mounting the modal.\n\t\tif ( isOpen ) {\n\t\t\tcommandMenuInput.current.focus();\n\t\t}\n\t}, [ isOpen ] );\n\n\tif ( ! isOpen ) {\n\t\treturn false;\n\t}\n\tconst isLoading = Object.values( loaders ).some( Boolean );\n\n\treturn (\n\t\t<Modal\n\t\t\tclassName=\"commands-command-menu\"\n\t\t\toverlayClassName=\"commands-command-menu__overlay\"\n\t\t\tonRequestClose={ closeAndReset }\n\t\t\t__experimentalHideHeader\n\t\t>\n\t\t\t<div className=\"commands-command-menu__container\">\n\t\t\t\t<Command label={ __( 'Global Command Menu' ) }>\n\t\t\t\t\t<div className=\"commands-command-menu__header\">\n\t\t\t\t\t\t<Command.Input\n\t\t\t\t\t\t\tref={ commandMenuInput }\n\t\t\t\t\t\t\tvalue={ search }\n\t\t\t\t\t\t\tonValueChange={ setSearch }\n\t\t\t\t\t\t\tplaceholder={ __( 'Type a command or search' ) }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</div>\n\t\t\t\t\t<Command.List>\n\t\t\t\t\t\t{ search && ! isLoading && (\n\t\t\t\t\t\t\t<Command.Empty>\n\t\t\t\t\t\t\t\t{ __( 'No results found.' ) }\n\t\t\t\t\t\t\t</Command.Empty>\n\t\t\t\t\t\t) }\n\t\t\t\t\t\t<CommandMenuGroup\n\t\t\t\t\t\t\tsearch={ search }\n\t\t\t\t\t\t\tsetLoader={ setLoader }\n\t\t\t\t\t\t\tclose={ closeAndReset }\n\t\t\t\t\t\t\tisContextual\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t{ search && (\n\t\t\t\t\t\t\t<CommandMenuGroup\n\t\t\t\t\t\t\t\tsearch={ search }\n\t\t\t\t\t\t\t\tsetLoader={ setLoader }\n\t\t\t\t\t\t\t\tclose={ closeAndReset }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t) }\n\t\t\t\t\t</Command.List>\n\t\t\t\t</Command>\n\t\t\t</div>\n\t\t</Modal>\n\t);\n}\n"]}
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* WordPress dependencies
|
|
3
|
+
*/
|
|
4
|
+
import { useEffect, useRef } from '@wordpress/element';
|
|
5
|
+
import { useDispatch, useSelect } from '@wordpress/data';
|
|
6
|
+
/**
|
|
7
|
+
* Internal dependencies
|
|
8
|
+
*/
|
|
9
|
+
|
|
10
|
+
import { store as commandsStore } from '../store';
|
|
11
|
+
/**
|
|
12
|
+
* Sets the active context of the command center
|
|
13
|
+
*
|
|
14
|
+
* @param {string} context Context to set.
|
|
15
|
+
*/
|
|
16
|
+
|
|
17
|
+
export default function useCommandContext(context) {
|
|
18
|
+
const {
|
|
19
|
+
getContext
|
|
20
|
+
} = useSelect(commandsStore);
|
|
21
|
+
const initialContext = useRef(getContext());
|
|
22
|
+
const {
|
|
23
|
+
setContext
|
|
24
|
+
} = useDispatch(commandsStore);
|
|
25
|
+
useEffect(() => {
|
|
26
|
+
setContext(context);
|
|
27
|
+
}, [context, setContext]); // This effects ensures that on unmount, we restore the context
|
|
28
|
+
// that was set before the component actually mounts.
|
|
29
|
+
|
|
30
|
+
useEffect(() => {
|
|
31
|
+
const initialContextRef = initialContext.current;
|
|
32
|
+
return () => setContext(initialContextRef);
|
|
33
|
+
}, [setContext]);
|
|
34
|
+
}
|
|
35
|
+
//# sourceMappingURL=use-command-context.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["@wordpress/commands/src/hooks/use-command-context.js"],"names":["useEffect","useRef","useDispatch","useSelect","store","commandsStore","useCommandContext","context","getContext","initialContext","setContext","initialContextRef","current"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,SAAT,EAAoBC,MAApB,QAAkC,oBAAlC;AACA,SAASC,WAAT,EAAsBC,SAAtB,QAAuC,iBAAvC;AAEA;AACA;AACA;;AACA,SAASC,KAAK,IAAIC,aAAlB,QAAuC,UAAvC;AAEA;AACA;AACA;AACA;AACA;;AACA,eAAe,SAASC,iBAAT,CAA4BC,OAA5B,EAAsC;AACpD,QAAM;AAAEC,IAAAA;AAAF,MAAiBL,SAAS,CAAEE,aAAF,CAAhC;AACA,QAAMI,cAAc,GAAGR,MAAM,CAAEO,UAAU,EAAZ,CAA7B;AACA,QAAM;AAAEE,IAAAA;AAAF,MAAiBR,WAAW,CAAEG,aAAF,CAAlC;AAEAL,EAAAA,SAAS,CAAE,MAAM;AAChBU,IAAAA,UAAU,CAAEH,OAAF,CAAV;AACA,GAFQ,EAEN,CAAEA,OAAF,EAAWG,UAAX,CAFM,CAAT,CALoD,CASpD;AACA;;AACAV,EAAAA,SAAS,CAAE,MAAM;AAChB,UAAMW,iBAAiB,GAAGF,cAAc,CAACG,OAAzC;AACA,WAAO,MAAMF,UAAU,CAAEC,iBAAF,CAAvB;AACA,GAHQ,EAGN,CAAED,UAAF,CAHM,CAAT;AAIA","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useEffect, useRef } from '@wordpress/element';\nimport { useDispatch, useSelect } from '@wordpress/data';\n\n/**\n * Internal dependencies\n */\nimport { store as commandsStore } from '../store';\n\n/**\n * Sets the active context of the command center\n *\n * @param {string} context Context to set.\n */\nexport default function useCommandContext( context ) {\n\tconst { getContext } = useSelect( commandsStore );\n\tconst initialContext = useRef( getContext() );\n\tconst { setContext } = useDispatch( commandsStore );\n\n\tuseEffect( () => {\n\t\tsetContext( context );\n\t}, [ context, setContext ] );\n\n\t// This effects ensures that on unmount, we restore the context\n\t// that was set before the component actually mounts.\n\tuseEffect( () => {\n\t\tconst initialContextRef = initialContext.current;\n\t\treturn () => setContext( initialContextRef );\n\t}, [ setContext ] );\n}\n"]}
|
|
@@ -14,25 +14,20 @@ import { store as commandsStore } from '../store';
|
|
|
14
14
|
* @param {import('../store/actions').WPCommandLoaderConfig} loader command loader config.
|
|
15
15
|
*/
|
|
16
16
|
|
|
17
|
-
export default function useCommandLoader(
|
|
18
|
-
let {
|
|
19
|
-
name,
|
|
20
|
-
group,
|
|
21
|
-
hook
|
|
22
|
-
} = _ref;
|
|
17
|
+
export default function useCommandLoader(loader) {
|
|
23
18
|
const {
|
|
24
19
|
registerCommandLoader,
|
|
25
20
|
unregisterCommandLoader
|
|
26
21
|
} = useDispatch(commandsStore);
|
|
27
22
|
useEffect(() => {
|
|
28
23
|
registerCommandLoader({
|
|
29
|
-
name,
|
|
30
|
-
|
|
31
|
-
|
|
24
|
+
name: loader.name,
|
|
25
|
+
hook: loader.hook,
|
|
26
|
+
context: loader.context
|
|
32
27
|
});
|
|
33
28
|
return () => {
|
|
34
|
-
unregisterCommandLoader(name
|
|
29
|
+
unregisterCommandLoader(loader.name);
|
|
35
30
|
};
|
|
36
|
-
}, [name,
|
|
31
|
+
}, [loader.name, loader.hook, loader.context, registerCommandLoader, unregisterCommandLoader]);
|
|
37
32
|
}
|
|
38
33
|
//# sourceMappingURL=use-command-loader.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["@wordpress/commands/src/hooks/use-command-loader.js"],"names":["useEffect","useDispatch","store","commandsStore","useCommandLoader","
|
|
1
|
+
{"version":3,"sources":["@wordpress/commands/src/hooks/use-command-loader.js"],"names":["useEffect","useDispatch","store","commandsStore","useCommandLoader","loader","registerCommandLoader","unregisterCommandLoader","name","hook","context"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,SAAT,QAA0B,oBAA1B;AACA,SAASC,WAAT,QAA4B,iBAA5B;AAEA;AACA;AACA;;AACA,SAASC,KAAK,IAAIC,aAAlB,QAAuC,UAAvC;AAEA;AACA;AACA;AACA;AACA;;AACA,eAAe,SAASC,gBAAT,CAA2BC,MAA3B,EAAoC;AAClD,QAAM;AAAEC,IAAAA,qBAAF;AAAyBC,IAAAA;AAAzB,MACLN,WAAW,CAAEE,aAAF,CADZ;AAEAH,EAAAA,SAAS,CAAE,MAAM;AAChBM,IAAAA,qBAAqB,CAAE;AACtBE,MAAAA,IAAI,EAAEH,MAAM,CAACG,IADS;AAEtBC,MAAAA,IAAI,EAAEJ,MAAM,CAACI,IAFS;AAGtBC,MAAAA,OAAO,EAAEL,MAAM,CAACK;AAHM,KAAF,CAArB;AAKA,WAAO,MAAM;AACZH,MAAAA,uBAAuB,CAAEF,MAAM,CAACG,IAAT,CAAvB;AACA,KAFD;AAGA,GATQ,EASN,CACFH,MAAM,CAACG,IADL,EAEFH,MAAM,CAACI,IAFL,EAGFJ,MAAM,CAACK,OAHL,EAIFJ,qBAJE,EAKFC,uBALE,CATM,CAAT;AAgBA","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useEffect } from '@wordpress/element';\nimport { useDispatch } from '@wordpress/data';\n\n/**\n * Internal dependencies\n */\nimport { store as commandsStore } from '../store';\n\n/**\n * Attach a command loader to the Global command menu.\n *\n * @param {import('../store/actions').WPCommandLoaderConfig} loader command loader config.\n */\nexport default function useCommandLoader( loader ) {\n\tconst { registerCommandLoader, unregisterCommandLoader } =\n\t\tuseDispatch( commandsStore );\n\tuseEffect( () => {\n\t\tregisterCommandLoader( {\n\t\t\tname: loader.name,\n\t\t\thook: loader.hook,\n\t\t\tcontext: loader.context,\n\t\t} );\n\t\treturn () => {\n\t\t\tunregisterCommandLoader( loader.name );\n\t\t};\n\t}, [\n\t\tloader.name,\n\t\tloader.hook,\n\t\tloader.context,\n\t\tregisterCommandLoader,\n\t\tunregisterCommandLoader,\n\t] );\n}\n"]}
|
|
@@ -26,14 +26,15 @@ export default function useCommand(command) {
|
|
|
26
26
|
useEffect(() => {
|
|
27
27
|
registerCommand({
|
|
28
28
|
name: command.name,
|
|
29
|
-
|
|
29
|
+
context: command.context,
|
|
30
30
|
label: command.label,
|
|
31
|
+
searchLabel: command.searchLabel,
|
|
31
32
|
icon: command.icon,
|
|
32
33
|
callback: currentCallback.current
|
|
33
34
|
});
|
|
34
35
|
return () => {
|
|
35
|
-
unregisterCommand(command.name
|
|
36
|
+
unregisterCommand(command.name);
|
|
36
37
|
};
|
|
37
|
-
}, [command.name, command.label, command.
|
|
38
|
+
}, [command.name, command.label, command.searchLabel, command.icon, command.context, registerCommand, unregisterCommand]);
|
|
38
39
|
}
|
|
39
40
|
//# sourceMappingURL=use-command.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["@wordpress/commands/src/hooks/use-command.js"],"names":["useEffect","useRef","useDispatch","store","commandsStore","useCommand","command","registerCommand","unregisterCommand","currentCallback","callback","current","name","
|
|
1
|
+
{"version":3,"sources":["@wordpress/commands/src/hooks/use-command.js"],"names":["useEffect","useRef","useDispatch","store","commandsStore","useCommand","command","registerCommand","unregisterCommand","currentCallback","callback","current","name","context","label","searchLabel","icon"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,SAAT,EAAoBC,MAApB,QAAkC,oBAAlC;AACA,SAASC,WAAT,QAA4B,iBAA5B;AAEA;AACA;AACA;;AACA,SAASC,KAAK,IAAIC,aAAlB,QAAuC,UAAvC;AAEA;AACA;AACA;AACA;AACA;;AACA,eAAe,SAASC,UAAT,CAAqBC,OAArB,EAA+B;AAC7C,QAAM;AAAEC,IAAAA,eAAF;AAAmBC,IAAAA;AAAnB,MAAyCN,WAAW,CAAEE,aAAF,CAA1D;AACA,QAAMK,eAAe,GAAGR,MAAM,CAAEK,OAAO,CAACI,QAAV,CAA9B;AACAV,EAAAA,SAAS,CAAE,MAAM;AAChBS,IAAAA,eAAe,CAACE,OAAhB,GAA0BL,OAAO,CAACI,QAAlC;AACA,GAFQ,EAEN,CAAEJ,OAAO,CAACI,QAAV,CAFM,CAAT;AAIAV,EAAAA,SAAS,CAAE,MAAM;AAChBO,IAAAA,eAAe,CAAE;AAChBK,MAAAA,IAAI,EAAEN,OAAO,CAACM,IADE;AAEhBC,MAAAA,OAAO,EAAEP,OAAO,CAACO,OAFD;AAGhBC,MAAAA,KAAK,EAAER,OAAO,CAACQ,KAHC;AAIhBC,MAAAA,WAAW,EAAET,OAAO,CAACS,WAJL;AAKhBC,MAAAA,IAAI,EAAEV,OAAO,CAACU,IALE;AAMhBN,MAAAA,QAAQ,EAAED,eAAe,CAACE;AANV,KAAF,CAAf;AAQA,WAAO,MAAM;AACZH,MAAAA,iBAAiB,CAAEF,OAAO,CAACM,IAAV,CAAjB;AACA,KAFD;AAGA,GAZQ,EAYN,CACFN,OAAO,CAACM,IADN,EAEFN,OAAO,CAACQ,KAFN,EAGFR,OAAO,CAACS,WAHN,EAIFT,OAAO,CAACU,IAJN,EAKFV,OAAO,CAACO,OALN,EAMFN,eANE,EAOFC,iBAPE,CAZM,CAAT;AAqBA","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useEffect, useRef } from '@wordpress/element';\nimport { useDispatch } from '@wordpress/data';\n\n/**\n * Internal dependencies\n */\nimport { store as commandsStore } from '../store';\n\n/**\n * Attach a command to the Global command menu.\n *\n * @param {import('../store/actions').WPCommandConfig} command command config.\n */\nexport default function useCommand( command ) {\n\tconst { registerCommand, unregisterCommand } = useDispatch( commandsStore );\n\tconst currentCallback = useRef( command.callback );\n\tuseEffect( () => {\n\t\tcurrentCallback.current = command.callback;\n\t}, [ command.callback ] );\n\n\tuseEffect( () => {\n\t\tregisterCommand( {\n\t\t\tname: command.name,\n\t\t\tcontext: command.context,\n\t\t\tlabel: command.label,\n\t\t\tsearchLabel: command.searchLabel,\n\t\t\ticon: command.icon,\n\t\t\tcallback: currentCallback.current,\n\t\t} );\n\t\treturn () => {\n\t\t\tunregisterCommand( command.name );\n\t\t};\n\t}, [\n\t\tcommand.name,\n\t\tcommand.label,\n\t\tcommand.searchLabel,\n\t\tcommand.icon,\n\t\tcommand.context,\n\t\tregisterCommand,\n\t\tunregisterCommand,\n\t] );\n}\n"]}
|
package/build-module/index.js
CHANGED
|
@@ -1,3 +1,5 @@
|
|
|
1
1
|
export { CommandMenu } from './components/command-menu';
|
|
2
2
|
export { privateApis } from './private-apis';
|
|
3
|
+
export { default as useCommand } from './hooks/use-command';
|
|
4
|
+
export { default as useCommandLoader } from './hooks/use-command-loader';
|
|
3
5
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["@wordpress/commands/src/index.js"],"names":["CommandMenu","privateApis"],"mappings":"AAAA,SAASA,WAAT,QAA4B,2BAA5B;AACA,SAASC,WAAT,QAA4B,gBAA5B","sourcesContent":["export { CommandMenu } from './components/command-menu';\nexport { privateApis } from './private-apis';\n"]}
|
|
1
|
+
{"version":3,"sources":["@wordpress/commands/src/index.js"],"names":["CommandMenu","privateApis","default","useCommand","useCommandLoader"],"mappings":"AAAA,SAASA,WAAT,QAA4B,2BAA5B;AACA,SAASC,WAAT,QAA4B,gBAA5B;AACA,SAASC,OAAO,IAAIC,UAApB,QAAsC,qBAAtC;AACA,SAASD,OAAO,IAAIE,gBAApB,QAA4C,4BAA5C","sourcesContent":["export { CommandMenu } from './components/command-menu';\nexport { privateApis } from './private-apis';\nexport { default as useCommand } from './hooks/use-command';\nexport { default as useCommandLoader } from './hooks/use-command-loader';\n"]}
|
|
@@ -6,8 +6,7 @@ import { __dangerousOptInToUnstableAPIsOnlyForCoreModules } from '@wordpress/pri
|
|
|
6
6
|
* Internal dependencies
|
|
7
7
|
*/
|
|
8
8
|
|
|
9
|
-
import { default as
|
|
10
|
-
import { default as useCommandLoader } from './hooks/use-command-loader';
|
|
9
|
+
import { default as useCommandContext } from './hooks/use-command-context';
|
|
11
10
|
import { store } from './store';
|
|
12
11
|
export const {
|
|
13
12
|
lock,
|
|
@@ -15,8 +14,7 @@ export const {
|
|
|
15
14
|
} = __dangerousOptInToUnstableAPIsOnlyForCoreModules('I know using unstable features means my plugin or theme will inevitably break on the next WordPress release.', '@wordpress/commands');
|
|
16
15
|
export const privateApis = {};
|
|
17
16
|
lock(privateApis, {
|
|
18
|
-
|
|
19
|
-
useCommandLoader,
|
|
17
|
+
useCommandContext,
|
|
20
18
|
store
|
|
21
19
|
});
|
|
22
20
|
//# sourceMappingURL=private-apis.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["@wordpress/commands/src/private-apis.js"],"names":["__dangerousOptInToUnstableAPIsOnlyForCoreModules","default","
|
|
1
|
+
{"version":3,"sources":["@wordpress/commands/src/private-apis.js"],"names":["__dangerousOptInToUnstableAPIsOnlyForCoreModules","default","useCommandContext","store","lock","unlock","privateApis"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,gDAAT,QAAiE,yBAAjE;AAEA;AACA;AACA;;AACA,SAASC,OAAO,IAAIC,iBAApB,QAA6C,6BAA7C;AACA,SAASC,KAAT,QAAsB,SAAtB;AAEA,OAAO,MAAM;AAAEC,EAAAA,IAAF;AAAQC,EAAAA;AAAR,IACZL,gDAAgD,CAC/C,8GAD+C,EAE/C,qBAF+C,CAD1C;AAMP,OAAO,MAAMM,WAAW,GAAG,EAApB;AACPF,IAAI,CAAEE,WAAF,EAAe;AAClBJ,EAAAA,iBADkB;AAElBC,EAAAA;AAFkB,CAAf,CAAJ","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __dangerousOptInToUnstableAPIsOnlyForCoreModules } from '@wordpress/private-apis';\n\n/**\n * Internal dependencies\n */\nimport { default as useCommandContext } from './hooks/use-command-context';\nimport { store } from './store';\n\nexport const { lock, unlock } =\n\t__dangerousOptInToUnstableAPIsOnlyForCoreModules(\n\t\t'I know using unstable features means my plugin or theme will inevitably break on the next WordPress release.',\n\t\t'@wordpress/commands'\n\t);\n\nexport const privateApis = {};\nlock( privateApis, {\n\tuseCommandContext,\n\tstore,\n} );\n"]}
|