mirror of
https://github.com/alibaba/lowcode-engine.git
synced 2025-12-14 21:12:53 +00:00
add events-setter
This commit is contained in:
zude.hzd
parent
a44120df48
commit
69e9c981a2
@ -1,5 +1,6 @@
|
||||
import { Input } from '@alifd/next';
|
||||
import NumberSetter from '../../../plugin-setters/number-setter';
|
||||
import EventsSetter from '../../../plugin-settings/src/builtin-setters/events-setter'
|
||||
import { registerSetter } from '../../../plugin-settings/src';
|
||||
import { createElement } from 'react';
|
||||
|
||||
@ -13,7 +14,7 @@ registerSetter('ClassNameSetter', () => {
|
||||
);
|
||||
});
|
||||
|
||||
registerSetter('EventsSetter', Input);
|
||||
registerSetter('EventsSetter', EventsSetter);
|
||||
|
||||
registerSetter('StringSetter', { component: Input, props: { placeholder: '请输入' } });
|
||||
|
||||
|
||||
@ -0,0 +1,129 @@
|
||||
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 (
|
||||
<Dialog visible={dialigVisiable} title="事件绑定" onClose={closeDialog} onCancel={closeDialog} onOk={this.onOk}>
|
||||
<div className="event-dialog-body">
|
||||
<div className="dialog-left-container">
|
||||
<div className="dialog-small-title">事件选择</div>
|
||||
|
||||
<div className="dialog-left-context">
|
||||
<ul className="event-type-container">
|
||||
<li className="select-item">内置函数</li>
|
||||
<li className="select-item select-item-active">组件事件</li>
|
||||
</ul>
|
||||
|
||||
<div className="event-select-container">
|
||||
<div>
|
||||
<Search className="event-search-box" shape="simple" />
|
||||
|
||||
<ul className="event-list">
|
||||
<li className="select-item" className={selectedEventName==''?'select-item select-item-active':'select-item'} onClick={()=>this.onSelectItem('')}>新建事件</li>
|
||||
{
|
||||
this.eventList.map((item,index)=><li key={index} className={selectedEventName==item.name?'select-item select-item-active':'select-item'} onClick={()=>this.onSelectItem(item.name)}>{item.name}</li>)
|
||||
}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="dialog-right-container">
|
||||
<div className="dialog-small-title">事件名称</div>
|
||||
<div className="event-input-container">
|
||||
<Input style={{ width: '100%' }} value={eventName} onChange={this.onInputChange}/>
|
||||
</div>
|
||||
|
||||
<div className="dialog-small-title">参数设置</div>
|
||||
<Input.TextArea style={{ width: '100%', height: '319px' }} />
|
||||
</div>
|
||||
</div>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,310 @@
|
||||
import { Component, isValidElement, ReactElement, ReactNode } from 'react';
|
||||
import { Radio, Menu, Table, Icon, Dialog } from '@alifd/next';
|
||||
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<{}> {
|
||||
state = {
|
||||
showEventList: false,
|
||||
eventBtns: [],
|
||||
eventList: [],
|
||||
selectType: null,
|
||||
nativeEventList: [],
|
||||
lifeCycleEventList: [],
|
||||
eventDataList: [],
|
||||
isShowEventDialog: false,
|
||||
bindEventName: '',
|
||||
relatedEventName: '',
|
||||
};
|
||||
|
||||
componentWillMount() {
|
||||
this.initEventBtns();
|
||||
this.initEventList();
|
||||
}
|
||||
|
||||
/**
|
||||
* 初始化事件按钮
|
||||
*/
|
||||
initEventBtns() {
|
||||
const { prop } = this.props;
|
||||
const { definition } = prop.extraProps;
|
||||
let isRoot = false;
|
||||
definition.map(item => {
|
||||
if (item.type === DEFINITION_EVENT_TYPE.LIFE_CYCLE_EVENT) {
|
||||
isRoot = true;
|
||||
}
|
||||
});
|
||||
|
||||
this.setState({
|
||||
eventBtns: !isRoot
|
||||
? [
|
||||
{
|
||||
value: EVENT_CONTENTS.COMPONENT_EVENT,
|
||||
label: '组件自带事件',
|
||||
},
|
||||
{
|
||||
value: EVENT_CONTENTS.NATIVE_EVENT,
|
||||
label: '原生事件',
|
||||
},
|
||||
]
|
||||
: [
|
||||
{
|
||||
value: EVENT_CONTENTS.LIFE_CYCLE_EVENT,
|
||||
label: '生命周期',
|
||||
},
|
||||
],
|
||||
});
|
||||
}
|
||||
|
||||
initEventList() {
|
||||
const { definition } = this.props.prop.extraProps;
|
||||
let nativeEventList = [];
|
||||
definition.map(item => {
|
||||
if (item.type === DEFINITION_EVENT_TYPE.EVENTS) {
|
||||
this.setState({
|
||||
eventList: item.list,
|
||||
});
|
||||
}
|
||||
|
||||
if (item.type === DEFINITION_EVENT_TYPE.NATIVE_EVENTS) {
|
||||
nativeEventList = item.list;
|
||||
}
|
||||
|
||||
if (item.type === DEFINITION_EVENT_TYPE.LIFE_CYCLE_EVENT){
|
||||
this.setState({
|
||||
lifeCycleEventList:item.list
|
||||
})
|
||||
}
|
||||
});
|
||||
|
||||
if (nativeEventList.length == 0) {
|
||||
nativeEventList = nativeEvents;
|
||||
this.setState({
|
||||
nativeEventList,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 渲染事件信息
|
||||
*/
|
||||
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 (
|
||||
<div>
|
||||
<div className="event-cell">
|
||||
<div className="event-type-tag">{eventTagText}</div>
|
||||
{record.name}
|
||||
</div>
|
||||
<div className="event-cell" style={{ marginTop: '8px' }}>
|
||||
<Icon type="attachment" size="small" className="related-icon" />
|
||||
<span className="related-event-name">{record.relatedEventName || ''}</span>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
/**
|
||||
* 渲染事件操作项
|
||||
*/
|
||||
renderEventOperateCell = (eventName: String) => {
|
||||
return (
|
||||
<div>
|
||||
<Icon
|
||||
type="set"
|
||||
className="event-operate-icon"
|
||||
style={{ marginLeft: '5px', marginRight: '4px' }}
|
||||
onClick={() => this.openDialog(eventName)}
|
||||
/>
|
||||
<Icon type="ashbin" className="event-operate-icon" onClick={() => this.openDeleteEventDialog(eventName)} />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
updateEventListStatus = (eventName: String, unDisabled: boolean) => {
|
||||
const { eventList, nativeEventList } = this.state;
|
||||
eventList.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 } = this.state;
|
||||
const { eventDataList } = this.state;
|
||||
eventDataList.map(item => {
|
||||
if (item.name === bindEventName) {
|
||||
item.relatedEventName = relatedEventName;
|
||||
}
|
||||
});
|
||||
|
||||
this.closeDialog();
|
||||
};
|
||||
|
||||
render() {
|
||||
const {
|
||||
eventBtns,
|
||||
eventList,
|
||||
nativeEventList,
|
||||
lifeCycleEventList,
|
||||
selectType,
|
||||
eventDataList,
|
||||
isShowEventDialog,
|
||||
bindEventName,
|
||||
} = this.state;
|
||||
|
||||
let showEventList = (lifeCycleEventList.length>0?lifeCycleEventList:eventList);
|
||||
return (
|
||||
<div className="lc-block-setter event-body" onClick={this.closeEventMenu}>
|
||||
<div className="event-title">
|
||||
<span>点击选择事件类型</span>
|
||||
</div>
|
||||
|
||||
<RadioGroup
|
||||
dataSource={eventBtns}
|
||||
shape="button"
|
||||
size="medium"
|
||||
value={selectType}
|
||||
onChange={this.onRadioChange}
|
||||
style={{width:'100%'}}
|
||||
/>
|
||||
{selectType && selectType != EVENT_CONTENTS.NATIVE_EVENT && (
|
||||
<Menu defaultOpenKeys="sub-menu" className="event-menu" onItemClick={this.onEventMenuClick}>
|
||||
{showEventList.map((item, index) => (
|
||||
<Item key={item.name} helper={item.title} disabled={item.disabled}>
|
||||
{item.name}
|
||||
</Item>
|
||||
))}
|
||||
</Menu>
|
||||
)}
|
||||
|
||||
{selectType && selectType === EVENT_CONTENTS.NATIVE_EVENT && (
|
||||
<Menu defaultOpenKeys="sub-menu" className="event-menu" onItemClick={this.onEventMenuClick}>
|
||||
{nativeEventList.map((item, index) => (
|
||||
<Group label={item.name} key={index}>
|
||||
{item.eventList.map(item => (
|
||||
<Item key={item.name} disabled={item.disabled}>
|
||||
{item.name}
|
||||
</Item>
|
||||
))}
|
||||
</Group>
|
||||
))}
|
||||
</Menu>
|
||||
)}
|
||||
|
||||
<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>
|
||||
</div>
|
||||
|
||||
<EventDialog
|
||||
dialigVisiable={isShowEventDialog}
|
||||
closeDialog={this.closeDialog}
|
||||
submitDialog={this.submitDialog}
|
||||
bindEventName={bindEventName}
|
||||
></EventDialog>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,56 @@
|
||||
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' },
|
||||
],
|
||||
},
|
||||
];
|
||||
@ -0,0 +1,155 @@
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -386,6 +386,35 @@ registerMetadataTransducer((metadata) => {
|
||||
definition: []
|
||||
}
|
||||
},
|
||||
|
||||
// 先简单mock一下
|
||||
definition:[
|
||||
// {
|
||||
// type: 'lifeCycleEvent', // 平台配置的，一般只有根节点才会配置
|
||||
// title: '生命周期',
|
||||
// list: [{
|
||||
// title: '装载时',
|
||||
// name: 'componentDidMount'
|
||||
// },{
|
||||
// title: '卸载时',
|
||||
// name: 'componentWillUnmount'
|
||||
// }]
|
||||
// },
|
||||
{
|
||||
type: 'events', // 组件自定义的
|
||||
list: [{
|
||||
name:'onClick',
|
||||
title:'点击回调'
|
||||
},
|
||||
{
|
||||
name:'onChange',
|
||||
title:'变更回调'
|
||||
},
|
||||
{
|
||||
name:'onSubmit'
|
||||
}]
|
||||
}],
|
||||
|
||||
getValue(field: SettingField) {
|
||||
return [];
|
||||
},
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user