From 203bbdaaac705e7e7975bf60eb949fab852633f1 Mon Sep 17 00:00:00 2001 From: kangwei Date: Mon, 30 Mar 2020 15:21:44 +0800 Subject: [PATCH] merge --- .../setters/events-setter/event-dialog.tsx | 129 ------ .../src/setters/events-setter/index.tsx | 408 ------------------ .../setters/events-setter/native-events.ts | 56 --- .../src/setters/events-setter/style.less | 155 ------- 4 files changed, 748 deletions(-) delete mode 100644 packages/plugin-settings-pane/src/setters/events-setter/event-dialog.tsx delete mode 100644 packages/plugin-settings-pane/src/setters/events-setter/index.tsx delete mode 100644 packages/plugin-settings-pane/src/setters/events-setter/native-events.ts delete mode 100644 packages/plugin-settings-pane/src/setters/events-setter/style.less diff --git a/packages/plugin-settings-pane/src/setters/events-setter/event-dialog.tsx b/packages/plugin-settings-pane/src/setters/events-setter/event-dialog.tsx deleted file mode 100644 index 7303f3649..000000000 --- a/packages/plugin-settings-pane/src/setters/events-setter/event-dialog.tsx +++ /dev/null @@ -1,129 +0,0 @@ -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 ( - -
-
-
事件选择
- -
-
    -
  • 内置函数
    • -
  • 组件事件
    • -
- -
-
- - -
    -
  • this.onSelectItem('')}>新建事件
    • - { - this.eventList.map((item,index)=>
  • this.onSelectItem(item.name)}>{item.name}
    • ) - } -
-
-
-
-
- -
-
事件名称
-
- -
- -
参数设置
- -
-
- - ); - } -} diff --git a/packages/plugin-settings-pane/src/setters/events-setter/index.tsx b/packages/plugin-settings-pane/src/setters/events-setter/index.tsx deleted file mode 100644 index 4aa1fc673..000000000 --- a/packages/plugin-settings-pane/src/setters/events-setter/index.tsx +++ /dev/null @@ -1,408 +0,0 @@ -import { Component, isValidElement, ReactElement, ReactNode } from 'react'; -import { Radio, Menu, Table, Icon, Dialog } from '@alifd/next'; -import { SettingField } from './main'; -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<{ - value: any[]; - onChange: (eventList: any[]) => void; -}> { - state = { - showEventList: false, - eventBtns: [], - eventList: [], - selectType: null, - nativeEventList: [], - lifeCycleEventList: [], - eventDataList: this.props.value || [], - isShowEventDialog: false, - bindEventName: '', - relatedEventName: '', - }; - - static getDerivedStateFromProps(nextProps, prevState) { - const { value } = nextProps; - if (value !== prevState.eventDataList) { - return { - value, - }; - } - return null; - } - - componentDidMount() { - this.initEventBtns(); - this.initEventList(); - } - - /** - * 初始化事件按钮 - */ - 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, - }); - } - - initEventList() { - 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, - }); - } - }); - - if (nativeEventList.length == 0) { - nativeEventList = nativeEvents; - this.setState({ - nativeEventList, - }); - } - } - - 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; - } - }); - }); - }); - } - }; - - /** - * 渲染事件信息 - */ - 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 || ''} - -
-
- ); - }; - - /** - * 渲染事件操作项 - */ - renderEventOperateCell = (eventName: String) => { - return ( -
- this.openDialog(eventName)} - /> - this.openDeleteEventDialog(eventName)} - /> -
- ); - }; - - updateEventListStatus = (eventName: String, unDisabled: boolean) => { - 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) { - 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, eventDataList } = this.state; - eventDataList.map(item => { - if (item.name === bindEventName) { - item.relatedEventName = relatedEventName; - } - }); - - this.props.onChange(eventDataList); - - this.closeDialog(); - }; - - render() { - const { - eventBtns, - eventList, - nativeEventList, - lifeCycleEventList, - selectType, - eventDataList, - isShowEventDialog, - bindEventName, - } = this.state; - - let showEventList = - lifeCycleEventList.length > 0 ? lifeCycleEventList : eventList; - return ( -
- -
- { - eventBtns.length>1 ?点击选择事件类型:点击绑定事件 - } -
- - - {selectType && selectType != EVENT_CONTENTS.NATIVE_EVENT && ( - - {showEventList.map((item, index) => ( - - {item.name} - - ))} - - )} - - {selectType && selectType === EVENT_CONTENTS.NATIVE_EVENT && ( - - {nativeEventList.map((item, index) => ( - - {item.eventList.map(item => ( - - {item.name} - - ))} - - ))} - - )} - -
- - - -
-
- - -
- ); - } -} diff --git a/packages/plugin-settings-pane/src/setters/events-setter/native-events.ts b/packages/plugin-settings-pane/src/setters/events-setter/native-events.ts deleted file mode 100644 index 9bf6c5ae5..000000000 --- a/packages/plugin-settings-pane/src/setters/events-setter/native-events.ts +++ /dev/null @@ -1,56 +0,0 @@ -export default [ - { - category: 'commonlyEvent', - name: '常用事件', - eventList: [ - { name: 'onClick' }, - { name: 'onChange' }, - { name: 'onInput' }, - { name: 'onSelect' }, - { name: 'onSubmit' }, - { name: 'onReset' }, - { name: 'onFocus' }, - { name: 'onBlur' }, - { name: 'onScroll' }, - { name: 'onLoad' }, - { name: 'onError' }, - ], - }, - { - category: 'keybordEvent', - name: '键盘事件', - eventList: [{ name: 'onKeyDown' }, { name: 'onKeyPress' }, { name: 'onKeyUp' }], - }, - { - category: 'mouseEvent', - name: '鼠标事件', - eventList: [ - { name: 'onDoubleClick' }, - { name: 'onDrag' }, - { name: 'onDragEnd' }, - { name: 'onDragEnter' }, - { name: 'onDragExit' }, - { name: 'onDragLeave' }, - { name: 'onDragOver' }, - { name: 'onDragStart' }, - { name: 'onDrop' }, - { name: 'onMouseDown' }, - { name: 'onMouseEnter' }, - { name: 'onMouseLeave' }, - { name: 'onMouseMove' }, - { name: 'onMouseOut' }, - { name: 'onMouseOver' }, - { name: 'onMouseUp' }, - ], - }, - { - category: 'animateEvent', - name: '动画事件', - eventList: [ - { name: 'onAnimationStart' }, - { name: 'onAnimationEnd' }, - { name: 'onAnimationItration' }, - { name: 'onTransitionEnd' }, - ], - }, -]; diff --git a/packages/plugin-settings-pane/src/setters/events-setter/style.less b/packages/plugin-settings-pane/src/setters/events-setter/style.less deleted file mode 100644 index 625129486..000000000 --- a/packages/plugin-settings-pane/src/setters/events-setter/style.less +++ /dev/null @@ -1,155 +0,0 @@ -.event-body { - padding: 0 10px 0 10px; - position: relative; - min-height: 450px; - - .event-title { - height: 30px; - line-height: 30px; - margin-bottom: 10px; - } - - - .next-radio-group { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - } - - .next-radio-group label { - -webkit-box-flex: 1; - -webkit-flex: auto; - -ms-flex: auto; - flex: auto; - text-align: center; - text-overflow: ellipsis; - overflow: hidden; - white-space: nowrap; - } - - - .event-cell { - padding-left: 25px; - position: relative; - font-size: 12px; - } - - .event-type-tag { - position: absolute; - width: 20px; - height: 20px; - left: 0px; - top: -2px; - border-radius: 50%; - line-height: 20px; - text-align: center; - color: #ffffff; - background-color: #2077ff; - } - - .related-icon { - margin-right: 5px; - } - - .related-event-name { - color: #2077ff; - cursor: pointer; - } - - - .event-menu { - max-height: 300px; - width: 230px; - overflow-x: hidden; - position: absolute; - top: 67px; - left: 10px; - z-index: 10; - } - - .event-table { - margin-top: 20px; - } - - .event-operate-icon { - cursor: pointer; - } - - .event-operate-icon:hover { - color: #0079f2; - } -} - - -.event-dialog-body { - width: 800px; - height: 450px; - - - .dialog-small-title { - font-weight: 700; - margin-bottom: 8px; - color: rgba(0, 0, 0); - } - - .dialog-left-container { - float: left; - - .dialog-left-context { - width: 268px; - height: 392px; - border: 1px solid rgba(31, 56, 88, .3); - border-radius: 3px; - - .event-type-container { - width: 110px; - height: 390px; - border-right: 1px solid rgba(31, 56, 88, .3); - float: left; - } - - .select-item { - font-size: 12px; - height: 28px; - line-height: 28px; - padding: 0 30px 0 12px; - cursor: pointer; - position: relative; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - } - - .select-item-active { - background: rgba(31, 56, 88, .06); - } - - .event-select-container { - width: 156px; - float: left; - - .event-search-box { - width: 135px; - margin: 10px; - } - } - - .event-list { - overflow-y: auto; - overflow-x: hidden; - height: 342px; - } - } - } - - .dialog-right-container { - width: 530px; - padding-left: 20px; - float: left; - - .event-input-container { - margin-bottom: 20px; - } - } -}