feat: 数字输入组件事件 & 动作扩充

examples/components/EventAction/InputNumberEvent.jsx

@@ -0,0 +1,49 @@
+export default {
+  type: 'page',
+  title: '数字输入组件事件',
+  regions: ['body', 'toolbar', 'header'],
+  body: [
+    {
+      type: 'tpl',
+      tpl: 'InputNumber数字输入框',
+      inline: false,
+      wrapperComponent: 'h2'
+    },
+    {
+      type: 'form',
+      debug: true,
+      body: [
+        {
+          type: 'group',
+          body: [
+            {
+              name: 'trigger1',
+              id: 'trigger1',
+              type: 'action',
+              label: 'clear触发器',
+              level: 'primary',
+              onEvent: {
+                click: {
+                  actions: [
+                    {
+                      actionType: 'clear',
+                      componentId: 'clear-input-number-receiver',
+                      description: '点击清空指定输入框的内容'
+                    },
+                  ]
+                }
+              }
+            },
+            {
+              name: 'clear-input-number-receiver',
+              id: 'clear-input-number-receiver',
+              type: 'input-number',
+              label: 'clear动作测试',
+              value: 1
+            }
+          ]
+        }
+      ]
+    }
+  ]
+};

examples/components/Example.jsx

@@ -74,6 +74,7 @@ import LogicEventActionSchema from './EventAction/Logic';
 import StopEventActionSchema from './EventAction/Stop';
 import DataFlowEventActionSchema from './EventAction/DataFlow';
 import InputEventSchema from './EventAction/InputEvent';
+import InputNumberEventSchema from './EventAction/InputNumberEvent';
 import DateEventSchema from './EventAction/DateEvent';
 import UploadEventSchema from './EventAction/UploadEvent';
 import SelectEventActionSchema from './EventAction/SelectEvent';
@@ -536,6 +537,11 @@ export const examples = [
                 path: '/examples/event/input',
                 component: makeSchemaRenderer(InputEventSchema)
               },
+              {
+                label: '数字输入组件',
+                path: '/examples/event/input-number',
+                component: makeSchemaRenderer(InputNumberEventSchema)
+              },
               {
                 label: '上传类组件',
                 path: '/examples/event/upload',

src/components/NumberInput.tsx

@@ -30,6 +30,14 @@ export interface NumberProps extends ThemeProps {
    * 指定从 formatter 里转换回数字的方式，和 formatter 搭配使用
    */
   parser?: Function;
+  /**
+   * 获取焦点事件
+   */
+  onFocus?: Function;
+  /**
+   * 失去焦点事件
+   */
+  onBlur?: Function;
 }
 
 export class NumberInput extends React.Component<NumberProps, any> {
@@ -56,6 +64,18 @@ export class NumberInput extends React.Component<NumberProps, any> {
     onChange?.(value);
   }
 
+  @autobind
+  handleFocus(e: React.SyntheticEvent<HTMLElement>) {
+    const {onFocus} = this.props;
+    onFocus && onFocus(e);
+  }
+
+  @autobind
+  handleBlur(e: React.SyntheticEvent<HTMLElement>) {
+    const {onBlur} = this.props;
+    onBlur && onBlur(e);
+  }
+
   render(): JSX.Element {
     const {
       className,
@@ -98,6 +118,8 @@ export class NumberInput extends React.Component<NumberProps, any> {
         onChange={this.handleChange}
         disabled={disabled}
         placeholder={placeholder}
+        onFocus={this.handleFocus}
+        onBlur={this.handleBlur}
         {...precisionProps}
       />
     );

src/renderers/Form/InputNumber.tsx

@@ -4,8 +4,9 @@ import cx from 'classnames';
 import {filter} from '../../utils/tpl';
 import NumberInput from '../../components/NumberInput';
 import {FormOptionsControl} from './Options';
+import {autobind, createObject} from '../../utils/helper';
 import Select, {normalizeOptions, Option} from '../../components/Select';
-import {PlainObject} from '../../types';
+import {PlainObject, Action} from '../../types';
 /**
  * 数字输入框
  * 文档：https://baidu.gitee.io/amis/docs/components/form/number
@@ -99,6 +100,9 @@ interface NumberState {
   unitOptions?: Option[];
 }
 
+export type InputNumberRendererEvent = 'blur' | 'focus' | 'change';
+export type InputNumberRendererAction = 'clear';
+
 export default class NumberControl extends React.Component<
   NumberProps,
   NumberState
@@ -117,6 +121,17 @@ export default class NumberControl extends React.Component<
     this.state = {unit, unitOptions};
   }
 
+  /**
+   * 动作处理
+   */
+  doAction(action: Action, args: any) {
+    const actionType = action?.actionType as string;
+    const {resetValue, onChange} = this.props;
+    if (action.actionType === 'clear') {
+      onChange(resetValue ?? '');
+    }
+  }
+
   // 解析出单位
   getUnit() {
     const props = this.props;
@@ -144,8 +159,15 @@ export default class NumberControl extends React.Component<
     return undefined;
   }
 
-  handleChange(inputValue: any) {
+  // 派发有event的事件
-    const {classPrefix: ns, onChange, resetValue, unitOptions} = this.props;
+  @autobind
+  dispatchEvent(e: React.SyntheticEvent<HTMLElement>) {
+    const {dispatchEvent, data} = this.props;
+    dispatchEvent(e, data);
+  }
+
+  async handleChange(inputValue: any) {
+    const {classPrefix: ns, onChange, resetValue, unitOptions, data, dispatchEvent} = this.props;
 
     if (inputValue && typeof inputValue !== 'number') {
       return;
@@ -154,6 +176,12 @@ export default class NumberControl extends React.Component<
     if (inputValue !== null && unitOptions && this.state.unit) {
       inputValue = inputValue + this.state.unit;
     }
+    const rendererEvent = await dispatchEvent('change', createObject(data, {
+      value: inputValue,
+    }));
+    if (rendererEvent?.prevented) {
+      return;
+    }
 
     onChange(inputValue === null ? resetValue ?? null : inputValue);
   }
@@ -263,6 +291,8 @@ export default class NumberControl extends React.Component<
           showSteps={showSteps}
           borderMode={borderMode}
           readOnly={readOnly}
+          onFocus={this.dispatchEvent}
+          onBlur={this.dispatchEvent}
         />
         {unitOptions ? (
           <Select