diff --git a/examples/components/EventAction/SelectEvent.jsx b/examples/components/EventAction/SelectEvent.jsx new file mode 100644 index 000000000..2f38c5f39 --- /dev/null +++ b/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' + } + ] + } + ] + } + ] + } + ] +}; diff --git a/examples/components/Example.jsx b/examples/components/Example.jsx index 5c222928c..701b30a89 100644 --- a/examples/components/Example.jsx +++ b/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) } ] }, diff --git a/src/renderers/Form/Select.tsx b/src/renderers/Form/Select.tsx index 7b45ac814..057f10dc6 100644 --- a/src/renderers/Form/Select.tsx +++ b/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 { static defaultProps: Partial = { clearable: false, @@ -104,11 +111,11 @@ export default class SelectControl extends React.Component { 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 { 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 { this.input && this.input.focus(); } - changeValue(value: Option | Array