diff --git a/packages/setters/src/events-setter/event-dialog.tsx b/packages/setters/src/events-setter/event-dialog.tsx index 4d46ce9ee..db337bd01 100644 --- a/packages/setters/src/events-setter/event-dialog.tsx +++ b/packages/setters/src/events-setter/event-dialog.tsx @@ -1,12 +1,10 @@ import { Component, isValidElement, ReactElement, ReactNode } from 'react'; import { Dialog, Search, Input } from '@alifd/next'; +import Editor from '@ali/lowcode-editor-core'; import './style.less'; export default class EventDialog extends Component<{ - dialigVisiable?: boolean; - closeDialog?: () => void; - submitDialog?: (value?: string) => void; - bindEventName?: string; + editor:Editor, }> { private eventList: any[] = [ { @@ -27,18 +25,33 @@ export default class EventDialog extends Component<{ ]; state = { + visiable:false, selectedEventName: '', eventName: '', }; - componentWillReceiveProps(nextProps: any) { + openDialog = (bindEventName:String) => { this.setState({ - eventName: nextProps.bindEventName, + visiable:true, + eventName:bindEventName + }) + } + + closeDialog = () => { + this.setState({ + visiable:false + }) + } + + componentDidMount (){ + const {editor} = this.props; + editor.on('eventBindDialog.open',(bindEventName:String)=>{ + this.openDialog(bindEventName) }); } initEventName = () => { - const { bindEventName } = this.props; + const { bindEventName } = this.state; let eventName = bindEventName; this.eventList.map((item) => { if (item.name === eventName) { @@ -76,14 +89,15 @@ export default class EventDialog extends Component<{ onSearchEvent = (searchEventName: String) => {}; onOk = () => { - this.props.submitDialog?.(this.state.eventName); + const {editor} = this.props; + editor.emit('event-setter.bindEvent',this.state.eventName); + this.closeDialog(); }; render() { - const { dialigVisiable, closeDialog } = this.props; - const { selectedEventName, eventName } = this.state; + const { selectedEventName, eventName,visiable} = this.state; return ( - +
事件选择
diff --git a/packages/setters/src/events-setter/index.tsx b/packages/setters/src/events-setter/index.tsx index d3ceb7273..700854fcb 100644 --- a/packages/setters/src/events-setter/index.tsx +++ b/packages/setters/src/events-setter/index.tsx @@ -31,13 +31,14 @@ export default class EventsSetter extends Component<{ nativeEventList: [], lifeCycleEventList: [], eventDataList: this.props.value || [], - isShowEventDialog: false, - bindEventName: '', relatedEventName: '', }; + + static getDerivedStateFromProps(nextProps, prevState) { const { value } = nextProps; + debugger; if (value !== prevState.eventDataList) { return { value, @@ -46,9 +47,16 @@ export default class EventsSetter extends Component<{ return null; } + private bindEventName:String; + componentDidMount() { + const {editor} = this.props.field; this.initEventBtns(); this.initEventList(); + editor.on('event-setter.bindEvent',(relatedEventName)=>{ + this.bindEvent(relatedEventName); + }) + } /** @@ -201,7 +209,7 @@ export default class EventsSetter extends Component<{ this.openDialog(eventName)} /> { - this.setState({ - isShowEventDialog: true, - bindEventName, - }); + const {editor} = this.props.field; + this.bindEventName = bindEventName; + editor.emit('eventBindDialog.open',bindEventName); }; - closeDialog = () => { - this.setState({ - isShowEventDialog: false, - }); - }; - submitDialog = (relatedEventName: String) => { - const { bindEventName, eventDataList } = this.state; + bindEvent = (relatedEventName: String) => { + const {eventDataList} = this.state; eventDataList.map(item => { - if (item.name === bindEventName) { + if (item.name === this.bindEventName) { item.relatedEventName = relatedEventName; } }); + this.setState({ + eventDataList + }) + this.props.onChange(eventDataList); - this.closeDialog(); + //this.closeDialog(); }; render() { @@ -324,10 +330,8 @@ export default class EventsSetter extends Component<{ lifeCycleEventList, selectType, eventDataList, - isShowEventDialog, - bindEventName, } = this.state; - + const {editor} = this.props.field; let showEventList = lifeCycleEventList.length > 0 ? lifeCycleEventList : eventList; return ( @@ -396,10 +400,7 @@ export default class EventsSetter extends Component<{
); diff --git a/packages/setters/src/events-setter/style.less b/packages/setters/src/events-setter/style.less index 625129486..5957def04 100644 --- a/packages/setters/src/events-setter/style.less +++ b/packages/setters/src/events-setter/style.less @@ -17,6 +17,13 @@ display: flex; } + .next-table td .next-table-cell-wrapper{ + padding: 12px 10px; + overflow: hidden; + text-overflow: ellipsis; + word-break: break-all; + } + .next-radio-group label { -webkit-box-flex: 1; -webkit-flex: auto;