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 (
-
- );
- }
-}
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 && (
-
- )}
-
- {selectType && selectType === EVENT_CONTENTS.NATIVE_EVENT && (
-
- )}
-
-
-
-
-
- );
- }
-}
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;
- }
- }
-}