* core: support for using commands in HElement.

easysoft · Oct 8, 2024 · 4072b03 · 4072b03
1 parent 93ba49a
commit 4072b03
Show file tree

Hide file tree

Showing 2 changed files with 51 additions and 1 deletion.
diff --git a/lib/core/src/react/components/h-element.ts b/lib/core/src/react/components/h-element.ts
@@ -3,11 +3,13 @@ import {nextGid} from '../../helpers/gid';
 import {classes} from '../../helpers/classes';
 import {getReactComponent} from './components';
 import {i18n} from '../../i18n';
+import {bindCommands, unbindCommands, type CommandContext} from '../../helpers';
 
 import type {JSX, ComponentType, RenderableProps, ComponentChildren} from 'preact';
 import type {ClassNameLike} from '../../helpers/classes';
 import type {HElementProps} from '../types';
 import type {I18nLangMap} from '../../i18n';
+import {deepCall} from '@zui/helpers/src/object';
 
 /**
  * The base HTML element.
@@ -60,6 +62,13 @@ export class HElement<P extends HElementProps, S = {}> extends Component<P, S> {
         return [this.props.i18n, this.constructor.i18n];
     }
 
+    /**
+     * Get the command scope.
+     */
+    get commandScope() {
+        return this.constructor.NAME;
+    }
+
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     getDefaultState(_props?: RenderableProps<P>): S {
         return {} as S;
@@ -124,12 +133,24 @@ export class HElement<P extends HElementProps, S = {}> extends Component<P, S> {
         });
     }
 
+    executeCommand(context: CommandContext, params: unknown[]) {
+        const {onCommand} = this.props;
+        let result;
+        if (context.scope === this.commandScope) {
+            result = deepCall(this, context.name, params);
+        }
+        if (onCommand) {
+            result = onCommand.call(this, context, params);
+        }
+        return result;
+    }
+
     protected _getClassName(props: RenderableProps<P>): ClassNameLike {
         return props.className;
     }
 
     protected _getProps(props: RenderableProps<P>): Record<string, unknown> {
-        const {className, attrs, props: componentProps, data, forwardRef, children, component, style, class: classNameAlt, ...others} = props;
+        const {className, attrs, props: componentProps, data, forwardRef, children, component, style, class: classNameAlt, commands, onCommand, ...others} = props;
         const customProps = new Set((this.constructor as typeof HElement).customProps);
         const strDangerouslySetInnerHTML = 'dangerouslySetInnerHTML';
         const other = Object.keys(others).reduce<Record<string, unknown>>((map, key) => {
@@ -160,6 +181,24 @@ export class HElement<P extends HElementProps, S = {}> extends Component<P, S> {
         return [component, componentProps, children];
     }
 
+    componentDidMount(): void {
+        const {commands, onCommand} = this.props;
+        if (commands && onCommand) {
+            bindCommands(this.element, {
+                commands,
+                scope: this.commandScope,
+                onCommand: this.executeCommand.bind(this),
+            });
+        }
+    }
+
+    componentWillUnmount(): void {
+        const {commands, onCommand} = this.props;
+        if (commands || onCommand) {
+            unbindCommands(this.element, this.commandScope);
+        }
+    }
+
     render(props: RenderableProps<P>) {
         props = this._beforeRender(props) || props;
         let component = this._getComponent(props);

diff --git a/lib/core/src/react/types/h-element-props.ts b/lib/core/src/react/types/h-element-props.ts
@@ -1,6 +1,7 @@
 import type {PreactDOMAttributes, JSX, RefObject, ComponentType, Attributes} from 'preact';
 import type {ClassNameLike} from '../../helpers/classes';
 import type {I18nLangMap} from '../../i18n';
+import type {CommandCallback} from '../../helpers';
 
 /**
  * The HTML props that can be passed to a component which root not is a html element.
@@ -61,4 +62,14 @@ export interface HElementProps extends PreactDOMAttributes, Attributes {
      * The other props of the element.
      */
     [dataKey: `data-${string}` | `on${string}` | `zui-${string}`]: unknown;
+
+    /**
+     * The command callback.
+     */
+    onCommand?: CommandCallback,
+
+    /**
+     * The commands callback map.
+     */
+    commands?: Record<string, CommandCallback>,
 }