feat: NestedSelect&Checkbox&ChainedSelect事件&动作扩充

src/renderers/Form/ChainedSelect.tsx

@@ -10,7 +10,7 @@ import Select from '../../components/Select';
 import {Api} from '../../types';
 import {isEffectiveApi} from '../../utils/api';
 import {SchemaApi} from '../../Schema';
-import {isMobile} from '../../utils/helper';
+import {isMobile, createObject} from '../../utils/helper';
 
 /**
  * 级联选择框
@@ -90,7 +90,8 @@ export default class ChainedSelectControl extends React.Component<
       extractValue,
       source,
       data,
-      env
+      env,
+      dispatchEvent
     } = this.props;
 
     const arr = Array.isArray(value)
@@ -135,7 +136,7 @@ export default class ChainedSelectControl extends React.Component<
             parentId,
             parent: arr[idx]
           })
-          .then(ret => {
+          .then(async (ret) => {
             // todo 没有检测 response.ok
 
             const stack = this.state.stack.concat();
@@ -147,6 +148,18 @@ export default class ChainedSelectControl extends React.Component<
             if (typeof remoteValue !== 'undefined') {
               arr.splice(idx + 1, value.length - idx - 1);
               arr.push(remoteValue);
+
+              const rendererEvent = await dispatchEvent(
+                'change',
+                createObject(data, {
+                  value: joinValues ? arr.join(delimiter || ',') : arr
+                })
+              );
+              
+              if (rendererEvent?.prevented) {
+                return;
+              }
+
               onChange(joinValues ? arr.join(delimiter || ',') : arr);
             }
 
@@ -171,8 +184,8 @@ export default class ChainedSelectControl extends React.Component<
     );
   }
 
-  handleChange(index: number, currentValue: any) {
-    const {value, delimiter, onChange, joinValues, extractValue} = this.props;
+  async handleChange(index: number, currentValue: any) {
+    const {value, delimiter, onChange, joinValues, extractValue, dispatchEvent, data} = this.props;
 
     const arr = Array.isArray(value)
       ? value.concat()
@@ -182,13 +195,24 @@ export default class ChainedSelectControl extends React.Component<
     arr.splice(index, arr.length - index);
     arr.push(joinValues ? currentValue.value : currentValue);
 
-    onChange(
-      joinValues
-        ? arr.join(delimiter || ',')
-        : extractValue
-        ? arr.map(item => item.value || item)
-        : arr
+    const valueRes = joinValues
+      ? arr.join(delimiter || ',')
+      : extractValue
+      ? arr.map(item => item.value || item)
+      : arr;
+      
+    const rendererEvent = await dispatchEvent(
+      'change',
+      createObject(data, {
+        value: valueRes
+      })
     );
+    
+    if (rendererEvent?.prevented) {
+      return;
+    }
+
+    onChange(valueRes);
   }
 
   reload() {

src/renderers/Form/Checkbox.tsx

@@ -3,6 +3,7 @@ import {FormItem, FormControlProps, FormBaseControl} from './Item';
 import cx from 'classnames';
 import Checkbox from '../../components/Checkbox';
 import {withBadge, BadgeSchema} from '../../components/Badge';
+import {autobind, createObject} from '../../utils/helper';
 
 /**
  * Checkbox 勾选框。
@@ -50,6 +51,24 @@ export default class CheckboxControl extends React.Component<
     trueValue: true,
     falseValue: false
   };
+
+  @autobind
+  async dispatchChangeEvent(eventData: any = {}) {
+    const {dispatchEvent, data, onChange} = this.props;
+    const rendererEvent = await dispatchEvent(
+      'change',
+      createObject(data, {
+        value: eventData,
+      })
+    );
+    
+    if (rendererEvent?.prevented) {
+      return;
+    }
+
+    onChange && onChange(eventData);
+  }
+
   render() {
     const {
       className,
@@ -71,7 +90,7 @@ export default class CheckboxControl extends React.Component<
           trueValue={trueValue}
           falseValue={falseValue}
           disabled={disabled}
-          onChange={(value: any) => onChange(value)}
+          onChange={(value: any) => this.dispatchChangeEvent(value)}
         >
           {option ? render('option', option) : null}
         </Checkbox>

src/renderers/Form/NestedSelect.tsx

@@ -12,7 +12,8 @@ import {
   getTreeAncestors,
   getTreeParent,
   ucFirst,
-  isMobile
+  isMobile,
+  createObject
 } from '../../utils/helper';
 import {
   FormOptionsControl,
@@ -117,6 +118,19 @@ export default class NestedSelectControl extends React.Component<
     }
   }
 
+  @autobind
+  async dispatchEvent(eventName: string, eventData: any = {}) {
+    const {dispatchEvent, data} = this.props;
+    const rendererEvent = await dispatchEvent(
+      eventName,
+      createObject(data, {
+        ...eventData
+      })
+    );
+    // 返回阻塞标识
+    return !!rendererEvent?.prevented;
+  }
+
   @autobind
   handleOutClick(e: React.MouseEvent<any>) {
     const {options} = this.props;
@@ -140,7 +154,7 @@ export default class NestedSelectControl extends React.Component<
     });
   }
 
-  removeItem(index: number, e?: React.MouseEvent<HTMLElement>) {
+  async removeItem(index: number, e?: React.MouseEvent<HTMLElement>) {
     let {
       onChange,
       selectedOptions,
@@ -165,7 +179,10 @@ export default class NestedSelectControl extends React.Component<
       );
     }
 
-    onChange(value);
+    const isPrevented = await this.dispatchEvent('change', {
+      value
+    });
+    isPrevented || onChange(value);
   }
 
   @autobind
@@ -224,7 +241,7 @@ export default class NestedSelectControl extends React.Component<
   }
 
   @autobind
-  handleOptionClick(option: Option) {
+  async handleOptionClick(option: Option) {
     const {multiple, onChange, joinValues, extractValue, valueField} =
       this.props;
 
@@ -232,18 +249,21 @@ export default class NestedSelectControl extends React.Component<
       return;
     }
 
-    onChange(
-      joinValues
-        ? option[valueField || 'value']
-        : extractValue
-        ? option[valueField || 'value']
-        : option
-    );
+    const value = joinValues
+      ? option[valueField || 'value']
+      : extractValue
+      ? option[valueField || 'value']
+      : option;
+
+    const isPrevented = await this.dispatchEvent('change', {
+      value
+    });
+    isPrevented || onChange(value);
     !multiple && this.close();
   }
 
   @autobind
-  handleCheck(option: Option | Options, index?: number) {
+  async handleCheck(option: Option | Options, index?: number) {
     const {
       onChange,
       selectedOptions,
@@ -343,13 +363,16 @@ export default class NestedSelectControl extends React.Component<
       }
     }
 
-    onChange(
-      joinValues
-        ? value.map(item => item[valueField as string]).join(delimiter)
-        : extractValue
-        ? value.map(item => item[valueField as string])
-        : value
-    );
+    const newValue = joinValues
+      ? value.map(item => item[valueField as string]).join(delimiter)
+      : extractValue
+      ? value.map(item => item[valueField as string])
+      : value;
+
+    const isPrevented = await this.dispatchEvent('change', {
+      value: newValue
+    });
+    isPrevented || onChange(newValue);
   }
 
   allChecked(options: Options): boolean {
@@ -379,19 +402,29 @@ export default class NestedSelectControl extends React.Component<
   }
 
   @autobind
-  onFocus(e: any) {
-    this.props.disabled ||
-      this.state.isOpened ||
+  async onFocus(e: any) {
+    const {onFocus, disabled} = this.props;
+
+    if (!disabled && !this.state.isOpened) {
       this.setState({
         isFocused: true
       });
+
+      const isPrevented = await this.dispatchEvent('focus', e);
+      isPrevented || onFocus && onFocus(e);
+    }
   }
 
   @autobind
-  onBlur(e: any) {
+  async onBlur(e: any) {
+    const {onBlur} = this.props;
+
     this.setState({
       isFocused: false
     });
+
+    const isPrevented = await this.dispatchEvent('blur', e);
+    isPrevented || onBlur && onBlur(e);
   }
 
   @autobind
@@ -451,7 +484,7 @@ export default class NestedSelectControl extends React.Component<
   }
 
   @autobind
-  handleResultChange(value: Array<Option>) {
+  async handleResultChange(value: Array<Option>) {
     const {
       joinValues,
       extractValue,
@@ -464,7 +497,10 @@ export default class NestedSelectControl extends React.Component<
     let newValue: any = Array.isArray(value) ? value.concat() : [];
 
     if (!multiple && !newValue.length) {
-      onChange('');
+      const isPrevented = await this.dispatchEvent('change', {
+        value: ''
+      });
+      isPrevented || onChange('');
       return;
     }
 
@@ -476,7 +512,10 @@ export default class NestedSelectControl extends React.Component<
       newValue = newValue.join(delimiter || ',');
     }
 
-    onChange(newValue);
+    const isPrevented = await this.dispatchEvent('change', {
+      value: newValue
+    });
+    isPrevented || onChange(newValue);
   }
 
   renderOptions() {