@wordpress/commands 0.4.0 → 0.5.0

package/src/hooks/use-command.js

@@ -24,19 +24,21 @@ export default function useCommand( command ) {
 	useEffect( () => {
 		registerCommand( {
 			name: command.name,
-			group: command.group,
+			context: command.context,
 			label: command.label,
+			searchLabel: command.searchLabel,
 			icon: command.icon,
 			callback: currentCallback.current,
 		} );
 		return () => {
-			unregisterCommand( command.name, command.group );
+			unregisterCommand( command.name );
 		};
 	}, [
 		command.name,
 		command.label,
-		command.group,
+		command.searchLabel,
 		command.icon,
+		command.context,
 		registerCommand,
 		unregisterCommand,
 	] );

package/src/index.js

@@ -1,2 +1,4 @@
 export { CommandMenu } from './components/command-menu';
 export { privateApis } from './private-apis';
+export { default as useCommand } from './hooks/use-command';
+export { default as useCommandLoader } from './hooks/use-command-loader';

package/src/private-apis.js

@@ -6,8 +6,7 @@ import { __dangerousOptInToUnstableAPIsOnlyForCoreModules } from '@wordpress/pri
 /**
  * Internal dependencies
  */
-import { default as useCommand } from './hooks/use-command';
-import { default as useCommandLoader } from './hooks/use-command-loader';
+import { default as useCommandContext } from './hooks/use-command-context';
 import { store } from './store';
 
 export const { lock, unlock } =
@@ -18,7 +17,6 @@ export const { lock, unlock } =
 
 export const privateApis = {};
 lock( privateApis, {
-	useCommand,
-	useCommandLoader,
+	useCommandContext,
 	store,
 } );

package/src/store/actions.js

@@ -5,11 +5,12 @@
  *
  * @typedef {Object} WPCommandConfig
  *
- * @property {string}      name     Command name.
- * @property {string}      label    Command label.
- * @property {string=}     group    Command group.
- * @property {JSX.Element} icon     Command icon.
- * @property {Function}    callback Command callback.
+ * @property {string}      name        Command name.
+ * @property {string}      label       Command label.
+ * @property {string=}     searchLabel Command search label.
+ * @property {string=}     context     Command context.
+ * @property {JSX.Element} icon        Command icon.
+ * @property {Function}    callback    Command callback.
  */
 
 /**
@@ -21,9 +22,9 @@
  *
  * @typedef {Object} WPCommandLoaderConfig
  *
- * @property {string}              name  Command loader name.
- * @property {string=}             group Command loader group.
- * @property {WPCommandLoaderHook} hook  Command loader hook.
+ * @property {string}              name    Command loader name.
+ * @property {string=}             context Command loader context.
+ * @property {WPCommandLoaderHook} hook    Command loader hook.
  */
 
 /**
@@ -33,30 +34,24 @@
  *
  * @return {Object} action.
  */
-export function registerCommand( { name, label, icon, callback, group = '' } ) {
+export function registerCommand( config ) {
 	return {
 		type: 'REGISTER_COMMAND',
-		name,
-		label,
-		icon,
-		callback,
-		group,
+		...config,
 	};
 }
 
 /**
  * Returns an action object used to unregister a command.
  *
- * @param {string} name  Command name.
- * @param {string} group Command group.
+ * @param {string} name Command name.
  *
  * @return {Object} action.
  */
-export function unregisterCommand( name, group ) {
+export function unregisterCommand( name ) {
 	return {
 		type: 'UNREGISTER_COMMAND',
 		name,
-		group,
 	};
 }
 
@@ -67,28 +62,24 @@ export function unregisterCommand( name, group ) {
  *
  * @return {Object} action.
  */
-export function registerCommandLoader( { name, group = '', hook } ) {
+export function registerCommandLoader( config ) {
 	return {
 		type: 'REGISTER_COMMAND_LOADER',
-		name,
-		group,
-		hook,
+		...config,
 	};
 }
 
 /**
  * Unregister command loader hook.
  *
- * @param {string} name  Command loader name.
- * @param {string} group Command loader group.
+ * @param {string} name Command loader name.
  *
  * @return {Object} action.
  */
-export function unregisterCommandLoader( name, group ) {
+export function unregisterCommandLoader( name ) {
 	return {
 		type: 'UNREGISTER_COMMAND_LOADER',
 		name,
-		group,
 	};
 }
 
@@ -113,3 +104,17 @@ export function close() {
 		type: 'CLOSE',
 	};
 }
+
+/**
+ * Sets the active context.
+ *
+ * @param {string} context Context.
+ *
+ * @return {Object} action.
+ */
+export function setContext( context ) {
+	return {
+		type: 'SET_CONTEXT',
+		context,
+	};
+}

package/src/store/reducer.js

@@ -16,24 +16,18 @@ function commands( state = {}, action ) {
 		case 'REGISTER_COMMAND':
 			return {
 				...state,
-				[ action.group ]: {
-					...state[ action.group ],
-					[ action.name ]: {
-						name: action.name,
-						label: action.label,
-						group: action.group,
-						callback: action.callback,
-						icon: action.icon,
-					},
+				[ action.name ]: {
+					name: action.name,
+					label: action.label,
+					searchLabel: action.searchLabel,
+					context: action.context,
+					callback: action.callback,
+					icon: action.icon,
 				},
 			};
 		case 'UNREGISTER_COMMAND': {
-			const { [ action.name ]: _, ...remainingState } =
-				state?.[ action.group ];
-			return {
-				...state,
-				[ action.group ]: remainingState,
-			};
+			const { [ action.name ]: _, ...remainingState } = state;
+			return remainingState;
 		}
 	}
 
@@ -53,21 +47,15 @@ function commandLoaders( state = {}, action ) {
 		case 'REGISTER_COMMAND_LOADER':
 			return {
 				...state,
-				[ action.group ]: {
-					...state[ action.group ],
-					[ action.name ]: {
-						name: action.name,
-						hook: action.hook,
-					},
+				[ action.name ]: {
+					name: action.name,
+					context: action.context,
+					hook: action.hook,
 				},
 			};
 		case 'UNREGISTER_COMMAND_LOADER': {
-			const { [ action.name ]: _, ...remainingState } =
-				state?.[ action.group ];
-			return {
-				...state,
-				[ action.group ]: remainingState,
-			};
+			const { [ action.name ]: _, ...remainingState } = state;
+			return remainingState;
 		}
 	}
 
@@ -93,10 +81,28 @@ function isOpen( state = false, action ) {
 	return state;
 }
 
+/**
+ * Reducer returning the command center's active context.
+ *
+ * @param {Object} state  Current state.
+ * @param {Object} action Dispatched action.
+ *
+ * @return {boolean} Updated state.
+ */
+function context( state = 'root', action ) {
+	switch ( action.type ) {
+		case 'SET_CONTEXT':
+			return action.context;
+	}
+
+	return state;
+}
+
 const reducer = combineReducers( {
 	commands,
 	commandLoaders,
 	isOpen,
+	context,
 } );
 
 export default reducer;

package/src/store/selectors.js

@@ -3,32 +3,30 @@
  */
 import createSelector from 'rememo';
 
-function unique( array ) {
-	return array.filter(
-		( value, index, current ) => current.indexOf( value ) === index
-	);
-}
-
-export const getGroups = createSelector(
-	( state ) =>
-		unique(
-			Object.keys( state.commands ).concat(
-				Object.keys( state.commandLoaders )
-			)
-		),
-	( state ) => [ state.commands, state.commandLoaders ]
-);
-
 export const getCommands = createSelector(
-	( state, group ) => Object.values( state.commands[ group ] ?? {} ),
-	( state, group ) => [ state.commands[ group ] ]
+	( state, contextual = false ) =>
+		Object.values( state.commands ).filter( ( command ) => {
+			const isContextual =
+				command.context && command.context === state.context;
+			return contextual ? isContextual : ! isContextual;
+		} ),
+	( state ) => [ state.commands, state.context ]
 );
 
 export const getCommandLoaders = createSelector(
-	( state, group ) => Object.values( state.commandLoaders[ group ] ?? {} ),
-	( state, group ) => [ state.commandLoaders[ group ] ]
+	( state, contextual = false ) =>
+		Object.values( state.commandLoaders ).filter( ( loader ) => {
+			const isContextual =
+				loader.context && loader.context === state.context;
+			return contextual ? isContextual : ! isContextual;
+		} ),
+	( state ) => [ state.commandLoaders, state.context ]
 );
 
 export function isOpen( state ) {
 	return state.isOpen;
 }
+
+export function getContext( state ) {
+	return state.context;
+}