diff --git a/packages/plugin-setters/src/events-setter/index.tsx b/packages/plugin-setters/src/events-setter/index.tsx index 2db3851e6..4aa1fc673 100644 --- a/packages/plugin-setters/src/events-setter/index.tsx +++ b/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 - ? [ - { - value: EVENT_CONTENTS.COMPONENT_EVENT, - label: '组件自带事件', - }, - { - value: EVENT_CONTENTS.NATIVE_EVENT, - label: '原生事件', - }, - ] - : [ - { - value: EVENT_CONTENTS.LIFE_CYCLE_EVENT, - label: '生命周期', - }, - ], + eventBtns, }); } @@ -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<{