diff --git a/packages/editor/src/config/setters.ts b/packages/editor/src/config/setters.ts
index dc3ae6cb0..ba8f607c0 100644
--- a/packages/editor/src/config/setters.ts
+++ b/packages/editor/src/config/setters.ts
@@ -1,5 +1,6 @@
import { Input } from '@alifd/next';
import NumberSetter from '../../../plugin-setters/number-setter';
+import EventsSetter from '../../../plugin-settings/src/builtin-setters/events-setter'
import { registerSetter } from '../../../plugin-settings/src';
import { createElement } from 'react';
@@ -13,7 +14,7 @@ registerSetter('ClassNameSetter', () => {
);
});
-registerSetter('EventsSetter', Input);
+registerSetter('EventsSetter', EventsSetter);
registerSetter('StringSetter', { component: Input, props: { placeholder: '请输入' } });
diff --git a/packages/plugin-settings/src/builtin-setters/events-setter/event-dialog.tsx b/packages/plugin-settings/src/builtin-setters/events-setter/event-dialog.tsx
new file mode 100644
index 000000000..7303f3649
--- /dev/null
+++ b/packages/plugin-settings/src/builtin-setters/events-setter/event-dialog.tsx
@@ -0,0 +1,129 @@
+import { Component, isValidElement, ReactElement, ReactNode } from 'react';
+import { Dialog, Search, Input } from '@alifd/next';
+import './style.less';
+
+export default class EventDialog extends Component<{
+ dialigVisiable:?Boolean,
+ closeDialog:?()=>void,
+ submitDialog:?()=>void,
+ bindEventName:?String
+}> {
+
+ private eventList : Array = [
+ {
+ name: 'getData',
+ },
+ {
+ name: 'deleteData',
+ },
+ {
+ name: 'initData',
+ },
+ {
+ name: 'editData',
+ },
+ {
+ name: 'submitData'
+ },
+ ]
+
+ state = {
+ selectedEventName:'',
+ eventName:''
+ };
+
+ componentWillReceiveProps(nextProps){
+ this.setState({
+ eventName:nextProps.bindEventName
+ })
+ }
+
+ initEventName = () => {
+ const {bindEventName} = this.props;
+ let eventName = bindEventName;
+ this.eventList.map((item)=>{
+ if (item.name === eventName){
+ eventName = `${eventName}_new`;
+ }
+ })
+
+ this.setState({
+ eventName
+ })
+ }
+
+ onInputChange = (eventName:String) => {
+ this.setState({
+ eventName
+ })
+ }
+
+ onSelectItem = (eventName:String) => {
+ this.setState({
+ selectedEventName:eventName
+ })
+
+ // 为空是新建事件
+ if (eventName === ''){
+ this.initEventName()
+ }else{
+ this.setState({
+ selectedEventName:eventName,
+ eventName
+ })
+ }
+ }
+
+ onSearchEvent = (searchEventName:String) => {
+
+ }
+
+ onOk = () => {
+ this.props.submitDialog(this.state.eventName);
+ }
+
+
+ render() {
+ const { dialigVisiable, closeDialog} = this.props;
+ const {selectedEventName,eventName} = this.state;
+ return (
+
+ );
+ }
+}
diff --git a/packages/plugin-settings/src/builtin-setters/events-setter/index.tsx b/packages/plugin-settings/src/builtin-setters/events-setter/index.tsx
new file mode 100644
index 000000000..34e7f482d
--- /dev/null
+++ b/packages/plugin-settings/src/builtin-setters/events-setter/index.tsx
@@ -0,0 +1,310 @@
+import { Component, isValidElement, ReactElement, ReactNode } from 'react';
+import { Radio, Menu, Table, Icon, Dialog } from '@alifd/next';
+import nativeEvents from './native-events';
+
+import './style.less';
+import EventDialog from './event-dialog';
+const { SubMenu, Item, Group, Divider } = Menu;
+const RadioGroup = Radio.Group;
+
+const EVENT_CONTENTS = {
+ COMPONENT_EVENT: 'componentEvent',
+ NATIVE_EVENT: 'nativeEvent',
+ LIFE_CYCLE_EVENT: 'lifeCycleEvent',
+};
+
+const DEFINITION_EVENT_TYPE = {
+ EVENTS: 'events',
+ NATIVE_EVENTS: 'nativeEvents',
+ LIFE_CYCLE_EVENT: 'lifeCycleEvent',
+};
+
+export default class EventsSetter extends Component<{}> {
+ state = {
+ showEventList: false,
+ eventBtns: [],
+ eventList: [],
+ selectType: null,
+ nativeEventList: [],
+ lifeCycleEventList: [],
+ eventDataList: [],
+ isShowEventDialog: false,
+ bindEventName: '',
+ relatedEventName: '',
+ };
+
+ componentWillMount() {
+ this.initEventBtns();
+ this.initEventList();
+ }
+
+ /**
+ * 初始化事件按钮
+ */
+ initEventBtns() {
+ const { prop } = this.props;
+ const { definition } = prop.extraProps;
+ let isRoot = false;
+ definition.map(item => {
+ if (item.type === DEFINITION_EVENT_TYPE.LIFE_CYCLE_EVENT) {
+ isRoot = true;
+ }
+ });
+
+ this.setState({
+ eventBtns: !isRoot
+ ? [
+ {
+ value: EVENT_CONTENTS.COMPONENT_EVENT,
+ label: '组件自带事件',
+ },
+ {
+ value: EVENT_CONTENTS.NATIVE_EVENT,
+ label: '原生事件',
+ },
+ ]
+ : [
+ {
+ value: EVENT_CONTENTS.LIFE_CYCLE_EVENT,
+ label: '生命周期',
+ },
+ ],
+ });
+ }
+
+ initEventList() {
+ const { definition } = this.props.prop.extraProps;
+ let nativeEventList = [];
+ definition.map(item => {
+ if (item.type === DEFINITION_EVENT_TYPE.EVENTS) {
+ this.setState({
+ eventList: item.list,
+ });
+ }
+
+ if (item.type === DEFINITION_EVENT_TYPE.NATIVE_EVENTS) {
+ nativeEventList = item.list;
+ }
+
+ if (item.type === DEFINITION_EVENT_TYPE.LIFE_CYCLE_EVENT){
+ this.setState({
+ lifeCycleEventList:item.list
+ })
+ }
+ });
+
+ if (nativeEventList.length == 0) {
+ nativeEventList = nativeEvents;
+ this.setState({
+ nativeEventList,
+ });
+ }
+ }
+
+ /**
+ * 渲染事件信息
+ */
+ renderEventInfoCell = (value, index, record) => {
+ let eventTagText = '';
+ if (record.type === EVENT_CONTENTS.NATIVE_EVENT) {
+ eventTagText = '原';
+ } else if (record.type === EVENT_CONTENTS.COMPONENT_EVENT) {
+ eventTagText = '组';
+ } else if (record.type === EVENT_CONTENTS.LIFE_CYCLE_EVENT) {
+ eventTagText = '生';
+ }
+ return (
+
+
+
{eventTagText}
+ {record.name}
+
+
+
+ {record.relatedEventName || ''}
+
+
+ this.openDialog(eventName)}
+ />
+ this.openDeleteEventDialog(eventName)} />
+
+ );
+ };
+
+ updateEventListStatus = (eventName: String, unDisabled: boolean) => {
+ const { eventList, nativeEventList } = this.state;
+ eventList.map(item => {
+ if (item.name === eventName) {
+ item.disabled = !unDisabled;
+ }
+ });
+
+ nativeEventList.map(item => {
+ item.eventList.map(itemData => {
+ if (itemData.name === eventName) {
+ itemData.disabled = !unDisabled;
+ }
+ });
+ });
+ };
+
+ onRadioChange = value => {
+ this.setState({
+ selectType: value,
+ });
+ };
+
+ onEventMenuClick = (eventName: String) => {
+ const { selectType, eventDataList } = this.state;
+ eventDataList.push({
+ type: selectType,
+ name: eventName,
+ });
+
+ this.setState({
+ eventDataList,
+ });
+
+ this.updateEventListStatus(eventName);
+ this.closeEventMenu();
+ this.openDialog(eventName);
+ };
+
+ closeEventMenu = () => {
+ if (this.state.selectType !== null) {
+ this.setState({
+ selectType: null,
+ });
+ }
+ };
+
+ openDeleteEventDialog = (eventName: String) => {
+ this.deleteEvent(eventName);
+ // Dialog.confirm({
+ // title: '删除事件',
+ // content: '确定删除当前事件吗',
+ // onOk: () => this.deleteEvent(eventName),
+ // });
+ };
+
+ deleteEvent = (eventName: String) => {
+ const { eventDataList } = this.state;
+ eventDataList.map((item, index) => {
+ if (item.name === eventName) {
+ eventDataList.splice(index, 1);
+ }
+ });
+
+ this.setState({
+ eventDataList,
+ });
+
+ this.updateEventListStatus(eventName, true);
+ };
+
+ openDialog = (bindEventName: String) => {
+ this.setState({
+ isShowEventDialog: true,
+ bindEventName,
+ });
+ };
+
+ closeDialog = () => {
+ this.setState({
+ isShowEventDialog: false,
+ });
+ };
+
+ submitDialog = (relatedEventName: String) => {
+ const { bindEventName } = this.state;
+ const { eventDataList } = this.state;
+ eventDataList.map(item => {
+ if (item.name === bindEventName) {
+ item.relatedEventName = relatedEventName;
+ }
+ });
+
+ this.closeDialog();
+ };
+
+ render() {
+ const {
+ eventBtns,
+ eventList,
+ nativeEventList,
+ lifeCycleEventList,
+ selectType,
+ eventDataList,
+ isShowEventDialog,
+ bindEventName,
+ } = this.state;
+
+ let showEventList = (lifeCycleEventList.length>0?lifeCycleEventList:eventList);
+ return (
+
+
+ 点击选择事件类型
+
+
+
+ {selectType && selectType != EVENT_CONTENTS.NATIVE_EVENT && (
+
+ )}
+
+ {selectType && selectType === EVENT_CONTENTS.NATIVE_EVENT && (
+
+ )}
+
+
+
+
+