From 96e6d992384ef31d61da663a207bf73ad7dde0f2 Mon Sep 17 00:00:00 2001 From: feirlau Date: Thu, 21 Mar 2024 19:24:12 +0800 Subject: [PATCH 1/2] =?UTF-8?q?feat:=20=E4=BC=98=E5=8C=96=E5=8E=9F?= =?UTF-8?q?=E7=94=9F=E4=BA=8B=E4=BB=B6=E7=9A=84=E6=94=AF=E6=8C=81=EF=BC=8C?= =?UTF-8?q?=E6=94=AF=E6=8C=81=E9=85=8D=E7=BD=AE=E5=A4=9A=E4=BA=8B=E4=BB=B6?= =?UTF-8?q?=E6=BA=90?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/setter/events-setter/index.less | 3 +- src/setter/events-setter/index.tsx | 366 +++++++--------------- src/setter/events-setter/native-events.ts | 9 +- 3 files changed, 118 insertions(+), 260 deletions(-) diff --git a/src/setter/events-setter/index.less b/src/setter/events-setter/index.less index 2cb41d4..573fd43 100644 --- a/src/setter/events-setter/index.less +++ b/src/setter/events-setter/index.less @@ -66,8 +66,9 @@ max-height: 300px; overflow-x: hidden; position: absolute; - top: 67px; + top: 30px; left: 10px; + right: 10px; z-index: 10; } diff --git a/src/setter/events-setter/index.tsx b/src/setter/events-setter/index.tsx index 4eac0f0..c3fb68a 100644 --- a/src/setter/events-setter/index.tsx +++ b/src/setter/events-setter/index.tsx @@ -1,67 +1,38 @@ import { Component } from 'react'; import { Radio, Menu, Table, Icon } from '@alifd/next'; -import { event, project, skeleton } from '@alilc/lowcode-engine'; +import { event, skeleton } from '@alilc/lowcode-engine'; import nativeEvents from './native-events'; - +import { cloneDeep } from 'lodash'; import './index.less'; +import { create } from 'src/services/api'; const { Item, Group } = 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', + events: { label: '组件事件' }, + nativeEvents: { label: '原生事件' }, + lifeCycleEvent: { label: '生命周期' }, }; const SETTER_NAME = 'event-setter'; export default class EventsSetter extends Component<{ - value: any[]; + value: any; + definition: any; onChange: (eventList: any[]) => void; }> { state = { eventBtns: [], - eventList: [], selectType: null, - nativeEventList: [], - lifeCycleEventList: [], - isRoot: false, + eventListMap: cloneDeep(DEFINITION_EVENT_TYPE), eventDataList: - (this.props?.value?.eventDataList ? this.props.value.eventDataList : this.props?.value) || [], + (this.props?.value?.eventDataList + ? this.props.value.eventDataList + : this.props?.value) || [], }; - // constructor (){ - // super(); - // debugger; - // // if (!this.props || !this.props.value){ - // // this.setState({ - // // eventDataList:[] - // // }) - // // } - // } - - // static getDerivedStateFromProps(nextProps, prevState) { - // debugger; - // // const { value } = nextProps; - // // debugger; - // // if (value !== prevState.eventDataList) { - // // return { - // // value, - // // }; - // // } - // return null; - // } - componentDidMount() { - // console.log(this.state.eventDataList); - this.initEventBtns(); - this.initEventList(); event.on(`common:${SETTER_NAME}.bindEvent`, this.bindEvent); } @@ -70,164 +41,52 @@ export default class EventsSetter extends Component<{ event.off(`common:${SETTER_NAME}.bindEvent`, this.bindEvent); } - initLifeCycleEventDataList = () => { - const { isRoot } = this.state; - if (isRoot && !this.props.value) { - const schema = project.exportSchema(); - - const lifeCycles = schema.componentsTree[0].lifeCycles; - const eventDataList = []; - if (lifeCycles) { - for (const key in lifeCycles) { - eventDataList.push({ - name: key, - relatedEventName: key, - type: EVENT_CONTENTS.LIFE_CYCLE_EVENT, - }); - } - - this.setState({ - eventDataList, - }); - } - } - }; - - /** - * 初始化事件按钮 - */ - 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; - } - - return item; - }); - - 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, - }, - this.initLifeCycleEventDataList, - ); - } - initEventList() { + const { eventListMap } = this.state; const { definition } = this.props; - 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) { - this.checkEventListStatus(item.list, DEFINITION_EVENT_TYPE.LIFE_CYCLE_EVENT); - this.setState({ - lifeCycleEventList: item.list, - }); + const eventBtns: { value: any; label: any }[] = []; + definition.forEach((item: any) => { + let list; + if (item.type === 'nativeEvents') { + list = item.list || cloneDeep(nativeEvents); + } else { + list = item.list || []; } - - return item; + this.checkEventListStatus(list); + const obj = { + ...(eventListMap[item.type] || {}), + ...item, + list, + }; + eventListMap[item.type] = obj; + if (list.length) + eventBtns.push({ value: item.type, label: obj.label || item.type }); }); - - if (nativeEventList.length == 0) { - nativeEventList = nativeEvents; - this.setState({ - nativeEventList, - }); - } + this.setState({ eventListMap, eventBtns }); } - checkEventListStatus = (eventList: any[], eventType: string) => { + checkEventListStatus = (eventList: any[]) => { 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; - } - - return eventDataItem; - }); - - return item; - }); - } 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; - } - return eventItem; - }); - return item; - }); - - return eventDataItem; + const func1 = (item: any) => { + item.disabled = false; + eventDataList.forEach((eventDataItem: any) => { + if (item.name === eventDataItem.name) { + item.disabled = true; + } }); - } + }; + eventList.forEach((item) => { + if (item.eventList) item.eventList.forEach(func1); + else func1(item); + }); }; /** * 渲染事件信息 */ 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 = '生'; - } + const { eventListMap } = this.state; + let eventTagText = (eventListMap[record.type]?.label || '').substring(0, 1); return (
@@ -238,7 +97,9 @@ export default class EventsSetter extends Component<{ this.onRelatedEventNameClick(record.relatedEventName)} + onClick={() => + this.onRelatedEventNameClick(record.relatedEventName) + } > {record.relatedEventName || ''} @@ -257,7 +118,14 @@ export default class EventsSetter extends Component<{ type="set" className="event-operate-icon" style={{ marginLeft: '3px', marginRight: '4px' }} - onClick={() => this.openDialog(record.relatedEventName, record.name, true)} + onClick={() => + this.openDialog( + record.relatedEventName, + record.name, + true, + record.type, + ) + } /> { - const { eventList, nativeEventList, lifeCycleEventList } = this.state; - eventList.map((item) => { + updateEventListStatus = (eventName: string, unDisabled: boolean = false) => { + const { eventListMap } = this.state; + const func1 = (item: any) => { if (item.name === eventName) { item.disabled = !unDisabled; } - return item; - }); - - lifeCycleEventList.map((item) => { - if (item.name === eventName) { - item.disabled = !unDisabled; - } - return item; - }); - - nativeEventList.map((item) => { - item.eventList.map((itemData) => { - if (itemData.name === eventName) { - itemData.disabled = !unDisabled; - } - return itemData; + }; + Object.values(eventListMap).forEach((item: any) => { + item.list?.forEach((v: any) => { + if (v.eventList) v.eventList.forEach(func1); + else func1(v); }); - - return item; }); }; - onRadioChange = (value) => { + onRadioChange = (value: string) => { this.setState({ selectType: value, }); @@ -315,14 +170,10 @@ export default class EventsSetter extends Component<{ this.updateEventListStatus(eventName); this.closeEventMenu(); - this.openDialog(eventName, eventName); + this.openDialog(eventName, eventName, false, selectType); }; onRelatedEventNameClick = (eventName: string) => { - // props 事件，不需要跳转 - if (/(this\.)?props\./.test(eventName)) { - return; - } skeleton.showPanel('codeEditor'); setTimeout(() => { event.emit('codeEditor.focusByFunction', { @@ -352,7 +203,7 @@ export default class EventsSetter extends Component<{ }; deleteEvent = (eventName: string) => { - const { eventDataList, eventList } = this.state; + const { eventDataList } = this.state; eventDataList.map((item, index) => { if (item.name === eventName) { eventDataList.splice(index, 1); @@ -364,12 +215,17 @@ export default class EventsSetter extends Component<{ this.setState({ eventDataList, }); - this.props.onChange({ eventDataList, eventList }); + this.props.onChange({ eventDataList }); this.updateEventListStatus(eventName, true); }; - openDialog = (relatedEventName: string, eventName: String, isEdit: boolean) => { - const { eventDataList, eventList } = this.state; + openDialog = ( + relatedEventName: string, + eventName: String, + isEdit: boolean, + type: string, + ) => { + const { eventDataList, eventListMap } = this.state; let paramStr; let configEventData; // 配置的event信息 eventDataList.map((item) => { @@ -379,11 +235,14 @@ export default class EventsSetter extends Component<{ return item; }); - eventList.map((item) => { + const func1 = (item: any) => { if (item.name == eventName) { configEventData = item; } - return item; + }; + eventListMap[type]?.list.forEach((v: any) => { + if (v.eventList) v.eventList.forEach(func1); + else func1(v); }); // this.setBindEventName(bindEventName); event.emit( @@ -398,8 +257,12 @@ export default class EventsSetter extends Component<{ ); }; - bindEvent = (relatedEventName: string, paramStr: string, bindEventName: String) => { - const { eventDataList, eventList } = this.state; + bindEvent = ( + relatedEventName: string, + paramStr: string, + bindEventName: String, + ) => { + const { eventDataList } = this.state; eventDataList.map((item) => { if (item.name === bindEventName) { item.relatedEventName = relatedEventName; @@ -415,24 +278,22 @@ export default class EventsSetter extends Component<{ eventDataList, }); - this.props.onChange({ eventDataList, eventList }); + this.props.onChange({ eventDataList }); // this.closeDialog(); }; render() { - const { eventBtns, eventList, nativeEventList, lifeCycleEventList, selectType, eventDataList } = - this.state; - const showEventList = lifeCycleEventList.length > 0 ? lifeCycleEventList : eventList; - - // console.log('eventDataList', eventDataList); + const { eventBtns, selectType, eventDataList, eventListMap } = this.state; + const eventList = selectType ? eventListMap[selectType]?.list : null; + const createItem = (item) => ( + + {item.name} + + ); return (
-
- {eventBtns.length > 1 ? 点击选择事件类型 : 点击绑定事件} -
- - {selectType && selectType != EVENT_CONTENTS.NATIVE_EVENT && ( - - {showEventList.map((item) => ( - - {item.name} - - ))} - - )} - - {selectType && selectType === EVENT_CONTENTS.NATIVE_EVENT && ( + {eventList && ( - {nativeEventList.map((item, index) => ( - - {item.eventList.map((groupItem) => ( - - {groupItem.name} - - ))} - - ))} + {eventList.map((item, index) => + item.eventList ? ( + + {item.eventList.map(createItem)} + + ) : ( + createItem(item) + ), + )} )}
- +
diff --git a/src/setter/events-setter/native-events.ts b/src/setter/events-setter/native-events.ts index 9bf6c5a..d6eab19 100644 --- a/src/setter/events-setter/native-events.ts +++ b/src/setter/events-setter/native-events.ts @@ -14,12 +14,19 @@ export default [ { name: 'onScroll' }, { name: 'onLoad' }, { name: 'onError' }, + { name: 'onCopy' }, + { name: 'onPaste' }, + { name: 'onCut' }, ], }, { category: 'keybordEvent', name: '键盘事件', - eventList: [{ name: 'onKeyDown' }, { name: 'onKeyPress' }, { name: 'onKeyUp' }], + eventList: [ + { name: 'onKeyDown' }, + { name: 'onKeyPress' }, + { name: 'onKeyUp' }, + ], }, { category: 'mouseEvent', From 86180bf92e3cc26e6277db0f3bc51dc1089a9952 Mon Sep 17 00:00:00 2001 From: feirlau Date: Tue, 2 Apr 2024 10:47:34 +0800 Subject: [PATCH 2/2] =?UTF-8?q?fix:=20=E7=A7=BB=E9=99=A4=E4=BA=8B=E4=BB=B6?= =?UTF-8?q?=E5=90=8E=E6=9C=AA=E5=88=A0=E9=99=A4=E5=B1=9E=E6=80=A7?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/setter/events-setter/index.tsx | 16 +++++++++------- 1 file changed, 9 insertions(+), 7 deletions(-) diff --git a/src/setter/events-setter/index.tsx b/src/setter/events-setter/index.tsx index c3fb68a..f4ce8fa 100644 --- a/src/setter/events-setter/index.tsx +++ b/src/setter/events-setter/index.tsx @@ -20,7 +20,7 @@ const SETTER_NAME = 'event-setter'; export default class EventsSetter extends Component<{ value: any; definition: any; - onChange: (eventList: any[]) => void; + onChange: (eventData:{eventDataList:any[], eventList:any[]}) => void; }> { state = { eventBtns: [], @@ -203,19 +203,21 @@ export default class EventsSetter extends Component<{ }; deleteEvent = (eventName: string) => { - const { eventDataList } = this.state; - eventDataList.map((item, index) => { + let { eventDataList } = this.state; + const eventList:any[] = []; + eventDataList = eventDataList.filter((item, index) => { if (item.name === eventName) { - eventDataList.splice(index, 1); + eventList.push(item); + return false; } - return item; + return true; }); this.setState({ eventDataList, }); - this.props.onChange({ eventDataList }); + this.props.onChange({ eventDataList, eventList }); this.updateEventListStatus(eventName, true); }; @@ -278,7 +280,7 @@ export default class EventsSetter extends Component<{ eventDataList, }); - this.props.onChange({ eventDataList }); + this.props.onChange({ eventDataList, eventList: [] }); // this.closeDialog(); };