update event-setter get/setValue and update eventlist disable status

packages/plugin-setters/src/events-setter/index.tsx

@@ -1,6 +1,6 @@
 import { Component, isValidElement, ReactElement, ReactNode } from 'react';
 import { Radio, Menu, Table, Icon, Dialog } from '@alifd/next';
-import {SettingField} from './main';
+import { SettingField } from './main';
 import nativeEvents from './native-events';
 
 import './style.less';
@@ -37,9 +37,17 @@ export default class EventsSetter extends Component<{
     relatedEventName: '',
   };
 
-  // TODO: getDerivedStateFromProps recieve eventDataList from prop.value
+  static getDerivedStateFromProps(nextProps, prevState) {
+    const { value } = nextProps;
+    if (value !== prevState.eventDataList) {
+      return {
+        value,
+      };
+    }
+    return null;
+  }
 
-  componentWillMount() {
+  componentDidMount() {
     this.initEventBtns();
     this.initEventList();
   }
@@ -50,30 +58,43 @@ export default class EventsSetter extends Component<{
   initEventBtns() {
     const { definition } = this.props;
     let isRoot = false;
+    let isCustom = false;
+    let eventBtns = [];
     definition.map(item => {
       if (item.type === DEFINITION_EVENT_TYPE.LIFE_CYCLE_EVENT) {
         isRoot = true;
       }
+
+      if (item.type === DEFINITION_EVENT_TYPE.EVENTS) {
+        isCustom = true;
+      }
     });
 
+    if (isRoot) {
+      eventBtns = [
+        {
+          value: EVENT_CONTENTS.LIFE_CYCLE_EVENT,
+          label: '生命周期',
+        },
+      ];
+    } else if (isCustom) {
+      eventBtns = [
+        {
+          value: EVENT_CONTENTS.COMPONENT_EVENT,
+          label: '组件自带事件',
+        },
+      ];
+    } else {
+      eventBtns = [
+        {
+          value: EVENT_CONTENTS.NATIVE_EVENT,
+          label: '原生事件',
+        },
+      ];
+    }
+
     this.setState({
-      eventBtns: !isRoot
+      eventBtns,
-        ? [
-            {
-              value: EVENT_CONTENTS.COMPONENT_EVENT,
-              label: '组件自带事件',
-            },
-            {
-              value: EVENT_CONTENTS.NATIVE_EVENT,
-              label: '原生事件',
-            },
-          ]
-        : [
-            {
-              value: EVENT_CONTENTS.LIFE_CYCLE_EVENT,
-              label: '生命周期',
-            },
-          ],
     });
   }
 
@@ -82,19 +103,28 @@ export default class EventsSetter extends Component<{
     let nativeEventList = [];
     definition.map(item => {
       if (item.type === DEFINITION_EVENT_TYPE.EVENTS) {
+        this.checkEventListStatus(item.list, DEFINITION_EVENT_TYPE.EVENTS);
         this.setState({
           eventList: item.list,
         });
       }
 
       if (item.type === DEFINITION_EVENT_TYPE.NATIVE_EVENTS) {
+        this.checkEventListStatus(
+          item.list,
+          DEFINITION_EVENT_TYPE.NATIVE_EVENTS,
+        );
         nativeEventList = item.list;
       }
 
-      if (item.type === DEFINITION_EVENT_TYPE.LIFE_CYCLE_EVENT){
+      if (item.type === DEFINITION_EVENT_TYPE.LIFE_CYCLE_EVENT) {
+        this.checkEventListStatus(
+          item.list,
+          DEFINITION_EVENT_TYPE.LIFE_CYCLE_EVENT,
+        );
         this.setState({
-          lifeCycleEventList:item.list
+          lifeCycleEventList: item.list,
-        })
+        });
       }
     });
 
@@ -106,6 +136,35 @@ export default class EventsSetter extends Component<{
     }
   }
 
+  checkEventListStatus = (eventList: Array, eventType: String) => {
+    const { eventDataList } = this.state;
+    if (
+      eventType === DEFINITION_EVENT_TYPE.EVENTS ||
+      eventType === DEFINITION_EVENT_TYPE.LIFE_CYCLE_EVENT
+    ) {
+      eventList.map(item => {
+        item.disabled = false;
+        eventDataList.map(eventDataItem => {
+          if (item.name === eventDataItem.name) {
+            item.disabled = true;
+          }
+        });
+      });
+    } else if (eventType === DEFINITION_EVENT_TYPE.NATIVE_EVENTS) {
+      eventDataList.map(eventDataItem => {
+        eventList.map(item => {
+          item.eventList.map(eventItem => {
+            if (eventItem.name === eventDataItem.name) {
+              item.disabled = true;
+            } else {
+              item.disabled = false;
+            }
+          });
+        });
+      });
+    }
+  };
+
   /**
    * 渲染事件信息
    */
@@ -126,7 +185,9 @@ export default class EventsSetter extends Component<{
         </div>
         <div className="event-cell" style={{ marginTop: '8px' }}>
           <Icon type="attachment" size="small" className="related-icon" />
-          <span className="related-event-name">{record.relatedEventName || ''}</span>
+          <span className="related-event-name">
+            {record.relatedEventName || ''}
+          </span>
         </div>
       </div>
     );
@@ -144,19 +205,29 @@ export default class EventsSetter extends Component<{
           style={{ marginLeft: '5px', marginRight: '4px' }}
           onClick={() => this.openDialog(eventName)}
         />
-        <Icon type="ashbin" className="event-operate-icon" onClick={() => this.openDeleteEventDialog(eventName)} />
+        <Icon
+          type="ashbin"
+          className="event-operate-icon"
+          onClick={() => this.openDeleteEventDialog(eventName)}
+        />
       </div>
     );
   };
 
   updateEventListStatus = (eventName: String, unDisabled: boolean) => {
-    const { eventList, nativeEventList } = this.state;
+    const { eventList, nativeEventList, lifeCycleEventList } = this.state;
     eventList.map(item => {
       if (item.name === eventName) {
         item.disabled = !unDisabled;
       }
     });
 
+    lifeCycleEventList.map(item => {
+      if (item.name === eventName) {
+        item.disabled = !unDisabled;
+      }
+    });
+
     nativeEventList.map(item => {
       item.eventList.map(itemData => {
         if (itemData.name === eventName) {
@@ -234,7 +305,7 @@ export default class EventsSetter extends Component<{
   };
 
   submitDialog = (relatedEventName: String) => {
-    const { bindEventName,eventDataList} = this.state;
+    const { bindEventName, eventDataList } = this.state;
     eventDataList.map(item => {
       if (item.name === bindEventName) {
         item.relatedEventName = relatedEventName;
@@ -258,11 +329,15 @@ export default class EventsSetter extends Component<{
       bindEventName,
     } = this.state;
 
-    let showEventList = (lifeCycleEventList.length>0?lifeCycleEventList:eventList);
+    let showEventList =
+      lifeCycleEventList.length > 0 ? lifeCycleEventList : eventList;
     return (
       <div className="lc-block-setter event-body" onClick={this.closeEventMenu}>
+
         <div className="event-title">
-          <span>点击选择事件类型</span>
+          {
+             eventBtns.length>1 ?<span>点击选择事件类型</span>:<span>点击绑定事件</span>
+          }
         </div>
 
         <RadioGroup
@@ -271,12 +346,20 @@ export default class EventsSetter extends Component<{
           size="medium"
           value={selectType}
           onChange={this.onRadioChange}
-          style={{width:'100%'}}
+          style={{ width: '100%' }}
         />
         {selectType && selectType != EVENT_CONTENTS.NATIVE_EVENT && (
-          <Menu defaultOpenKeys="sub-menu" className="event-menu" onItemClick={this.onEventMenuClick}>
+          <Menu
+            defaultOpenKeys="sub-menu"
+            className="event-menu"
+            onItemClick={this.onEventMenuClick}
+          >
             {showEventList.map((item, index) => (
-              <Item key={item.name} helper={item.description} disabled={item.disabled}>
+              <Item
+                key={item.name}
+                helper={item.description}
+                disabled={item.disabled}
+              >
                 {item.name}
               </Item>
             ))}
@@ -284,7 +367,11 @@ export default class EventsSetter extends Component<{
         )}
 
         {selectType && selectType === EVENT_CONTENTS.NATIVE_EVENT && (
-          <Menu defaultOpenKeys="sub-menu" className="event-menu" onItemClick={this.onEventMenuClick}>
+          <Menu
+            defaultOpenKeys="sub-menu"
+            className="event-menu"
+            onItemClick={this.onEventMenuClick}
+          >
             {nativeEventList.map((item, index) => (
               <Group label={item.name} key={index}>
                 {item.eventList.map(item => (
@@ -300,7 +387,12 @@ export default class EventsSetter extends Component<{
         <div className="event-table">
           <Table dataSource={eventDataList} size="small">
             <Table.Column title="已有事件" cell={this.renderEventInfoCell} />
-            <Table.Column title="操作" dataIndex="name" cell={this.renderEventOperateCell} width={70} />
+            <Table.Column
+              title="操作"
+              dataIndex="name"
+              cell={this.renderEventOperateCell}
+              width={70}
+            />
           </Table>
         </div>