feat:下拉框新增事件&动作&动作demo

examples/components/EventAction/SelectEvent.jsx

@@ -0,0 +1,66 @@
+export default {
+  type: 'page',
+  title: '下拉框组件事件',
+  regions: ['body', 'toolbar', 'header'],
+  body: [
+    {
+      type: 'tpl',
+      tpl: 'Select下拉框',
+      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-select',
+                      description: '点击清空指定下拉框选中值'
+                    }
+                  ]
+                }
+              }
+            },
+            {
+              name: 'clear-select',
+              id: 'clear-select',
+              type: 'select',
+              label: 'clear动作测试',
+              mode: 'row',
+              value: 'A,B,C',
+              multiple: true,
+              checkAll: true,
+              options: [
+                {
+                  label: '选项A',
+                  value: 'A'
+                },
+                {
+                  label: '选项B',
+                  value: 'B'
+                },
+                {
+                  label: '选项C',
+                  value: 'C'
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    }
+  ]
+};

examples/components/Example.jsx

@@ -75,6 +75,7 @@ import StopEventActionSchema from './EventAction/Stop';
 import DataFlowEventActionSchema from './EventAction/DataFlow';
 import InputEventSchema from './EventAction/InputEvent';
 import UploadEventSchema from './EventAction/UploadEvent';
+import SelectEventActionSchema from './EventAction/SelectEvent';
 import WizardSchema from './Wizard';
 import ChartSchema from './Chart';
 import EChartsEditorSchema from './ECharts';
@@ -536,6 +537,11 @@ export const examples = [
                 label: '上传类组件',
                 path: '/examples/event/upload',
                 component: makeSchemaRenderer(UploadEventSchema)
+              },
+              {
+                label: '下拉框',
+                path: '/examples/event/select',
+                component: makeSchemaRenderer(SelectEventActionSchema)
               }
             ]
           },

src/renderers/Form/Select.tsx

@@ -9,8 +9,8 @@ import {
 import Select, {normalizeOptions} from '../../components/Select';
 import find from 'lodash/find';
 import debouce from 'lodash/debounce';
-import {Api} from '../../types';
-import {isEffectiveApi, isApiOutdated} from '../../utils/api';
+import {Api, Action} from '../../types';
+import {isEffectiveApi} from '../../utils/api';
 import {isEmpty, createObject, autobind, isMobile} from '../../utils/helper';
 import {dataMapping} from '../../utils/tpl-builtin';
 import {SchemaApi} from '../../Schema';
@@ -94,6 +94,13 @@ export interface SelectProps extends OptionsControlProps {
   useMobileUI?: boolean;
 }
 
+export type SelectRendererEvent =
+  | 'change'
+  | 'blur'
+  | 'focus'
+  | 'add'
+  | 'edit'
+  | 'delete';
 export default class SelectControl extends React.Component<SelectProps, any> {
   static defaultProps: Partial<SelectProps> = {
     clearable: false,
@@ -104,11 +111,11 @@ export default class SelectControl extends React.Component<SelectProps, any> {
   input: any;
   unHook: Function;
   lazyloadRemote: Function;
-  lastTerm: string = ''; // 用来记录上一次搜索时关键字
   constructor(props: SelectProps) {
     super(props);
 
     this.changeValue = this.changeValue.bind(this);
+    this.otherChangeValue = this.otherChangeValue.bind(this);
     this.lazyloadRemote = debouce(this.loadRemote.bind(this), 250, {
       trailing: true,
       leading: false
@@ -116,22 +123,6 @@ export default class SelectControl extends React.Component<SelectProps, any> {
     this.inputRef = this.inputRef.bind(this);
   }
 
-  componentDidUpdate(prevProps: SelectProps) {
-    const props = this.props;
-
-    if (
-      isEffectiveApi(props.autoComplete, props.data) &&
-      isApiOutdated(
-        prevProps.autoComplete,
-        props.autoComplete,
-        prevProps.data,
-        props.data
-      )
-    ) {
-      this.lazyloadRemote(this.lastTerm);
-    }
-  }
-
   componentWillUnmount() {
     this.unHook && this.unHook();
   }
@@ -144,7 +135,16 @@ export default class SelectControl extends React.Component<SelectProps, any> {
     this.input && this.input.focus();
   }
 
-  changeValue(value: Option | Array<Option> | void) {
+  dispatchEvent(eventName: SelectRendererEvent, e: any = {}) {
+    const event = 'on' + eventName.charAt(0).toUpperCase() + eventName.slice(1);
+    const {dispatchEvent, options} = this.props;
+    dispatchEvent(eventName, createObject(e, {
+      options
+    }));
+    this.props[event](e);
+  }
+
+  changeValue(value: Option | Array<Option> | string | void) {
     const {
       joinValues,
       extractValue,
@@ -154,7 +154,8 @@ export default class SelectControl extends React.Component<SelectProps, any> {
       valueField,
       onChange,
       setOptions,
-      options
+      options,
+      dispatchEvent
     } = this.props;
 
     let newValue: string | Option | Array<Option> | void = value;
@@ -198,6 +199,24 @@ export default class SelectControl extends React.Component<SelectProps, any> {
     // 不设置没法回显
     additonalOptions.length && setOptions(options.concat(additonalOptions));
 
+    dispatchEvent('change', {
+      value: newValue,
+      options
+    });
+    onChange(newValue);
+  }
+
+  otherChangeValue(newValue: Option | Array<Option> | string | void) {
+    const {
+      onChange,
+      options,
+      dispatchEvent
+    } = this.props;
+
+    dispatchEvent('change', {
+      value: newValue,
+      options
+    });
     onChange(newValue);
   }
 
@@ -221,7 +240,6 @@ export default class SelectControl extends React.Component<SelectProps, any> {
       return (this.unHook = addHook(this.loadRemote.bind(this, input), 'init'));
     }
 
-    this.lastTerm = input;
     const ctx = createObject(data, {
       term: input,
       value: input
@@ -294,10 +312,18 @@ export default class SelectControl extends React.Component<SelectProps, any> {
       <TransferDropdownRenderer
         {...rest}
         selectMode={selectMode === 'group' ? 'list' : selectMode}
+        onChange={this.otherChangeValue}
       />
     );
   }
 
+  doAction(action: Action, data: object, throwErrors: boolean): any {
+    const {simpleValue, resetValue} = this.props;
+    if (action.actionType === 'clear') {
+      this.changeValue(resetValue ? resetValue : '');
+    }
+  }
+
   render() {
     let {
       autoComplete,
@@ -358,6 +384,11 @@ export default class SelectControl extends React.Component<SelectProps, any> {
             creatable={creatable}
             searchable={searchable || !!autoComplete}
             onChange={this.changeValue}
+            onBlur={(e: any) => this.dispatchEvent('blur', e)}
+            onFocus={(e: any) => this.dispatchEvent('focus', e)}
+            onAdd={() => this.dispatchEvent('add')}
+            onEdit={(item: any) => this.dispatchEvent('edit', item)}
+            onDelete={(item: any) => this.dispatchEvent('delete', item)}
             loading={loading}
             noResultsText={noResultsText}
             renderMenu={menuTpl ? this.renderMenu : undefined}