@luck-design-biz/luckda 0.0.25-8 → 0.0.25-af-1

package/es/lowcode/painter/Panel.js

@@ -5,14 +5,14 @@ import React, { useRef, useState, useEffect, useLayoutEffect } from 'react';
 import { useCreation, useMemoizedFn } from 'ahooks';
 import { Breadcrumb } from 'luck-design/antd';
 import classNames from 'classnames';
-import { takeRight, isNil, reduce, get, set } from 'lodash';
+import { takeRight, cloneDeep, isNil } from 'lodash';
 import { formatMessage } from '@luck-design-biz/base/utils';
-import { useContext, useTask, addNode, deleteNode } from "../engine/provider/ContextProvider";
+import { useLDContext } from "../engine/provider/ContextProvider";
 import AttrsPanel from "./components/AttrsPanel";
 import StylePanel from "./panel-section/StylePanel";
 import AdvancePanel from "./components/AdvancePanel";
+import { modifyById } from "../engine/tools/dataProcess";
 import styles from "./style/panel.less";
-import { LC_BUILDIN_UNIT_KEY } from "../constants";
 var _I18N_PREFIX_ = 'luckda.lowcode.painter.panel';
 var _TAB_LIST_ = [{
   title: formatMessage({
@@ -22,10 +22,10 @@ var _TAB_LIST_ = [{
   key: 'attrs'
 }, {
   title: formatMessage({
-    id: "".concat(_I18N_PREFIX_, ".css"),
+    id: "".concat(_I18N_PREFIX_, ".styles"),
     label: '样式'
   }),
-  key: 'css'
+  key: 'styles'
 }, {
   title: formatMessage({
     id: "".concat(_I18N_PREFIX_, ".advance"),
@@ -44,50 +44,20 @@ var Panel = function Panel() {
     _useState4 = _slicedToArray(_useState3, 2),
     activeTabKey = _useState4[0],
     setActiveTabKey = _useState4[1];
-  var context = useContext();
-  var task = useTask('modify');
+  var context = useLDContext();
   var meta = useCreation(function () {
-    try {
-      return isNil(activeNode) ? null : require("../engine/meta/".concat(activeNode.node.component.toLowerCase(), ".props.json"));
-    } catch (e) {
-      return null;
-    }
+    return isNil(activeNode) ? null : require("../engine/meta/".concat(activeNode.node.component.toLowerCase(), ".props.json"));
   }, [activeNode]);
-  var handleChange = useMemoizedFn(function (field, value) {
-    var _ref = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {},
-      repositioning = _ref.repositioning,
-      before = _ref.before;
-    if (field === 'enableHeader') {
-      if (value) {
-        var headerMeta = require("../engine/meta/pageheader.props.default.json");
-        addNode(LC_BUILDIN_UNIT_KEY.PAGE_ROOT, LC_BUILDIN_UNIT_KEY.PAGE_HEADER, _objectSpread(_objectSpread({}, headerMeta), {}, {
-          buildIn: true
-        }));
-      } else {
-        deleteNode(LC_BUILDIN_UNIT_KEY.PAGE_HEADER);
-      }
-    } else if (field === 'enableFooter') {
-      if (value) {
-        var footerMeta = require("../engine/meta/pagefooter.props.default.json");
-        addNode(LC_BUILDIN_UNIT_KEY.PAGE_ROOT, LC_BUILDIN_UNIT_KEY.PAGE_FOOTER, _objectSpread(_objectSpread({}, footerMeta), {}, {
-          buildIn: true
-        }));
-      } else {
-        deleteNode(LC_BUILDIN_UNIT_KEY.PAGE_FOOTER);
-      }
-    }
+  var handleChange = useMemoizedFn(function (field, value, repositioning) {
     var component = context.componentMap.get(activeNode.node.id);
-    var node = component.api.getSelfData();
-    var oldValue = _defineProperty({}, field, get(node.props, field));
-    var newValue = _defineProperty({}, field, value);
-    if (before) {
-      before(handleChange);
-    }
-    task(activeNode.node.id, newValue).then(function (a, b) {
+    var _component$api$getSel = component.api.getSelfAndParentLCData(),
+      node = _component$api$getSel.node;
+    var cloneData = cloneDeep(context.pageData);
+    modifyById(cloneData, activeNode.node.id, _objectSpread(_objectSpread({}, node.props), {}, _defineProperty({}, field, value)));
+    context._setPageData(cloneData).then(function (newData) {
       context.$publisher(context.topics.COMPONENT_MODIFY, {
         id: activeNode.node.id,
-        oldValue: oldValue,
-        newValue: newValue
+        pageData: cloneDeep(newData)
       });
       if (repositioning) context.$publisher(context.topics.COMPONENT_REPOSITIONING, {
         id: activeNode.node.id
@@ -102,7 +72,8 @@ var Panel = function Panel() {
         return;
       }
       var component = context.componentMap.get(payload.id);
-      var node = component.api.getSelfData();
+      var _component$api$getSel2 = component.api.getSelfAndParentLCData(),
+        node = _component$api$getSel2.node;
       var levelNodes = takeRight(component.api.getLevelNodes(), 4);
       setActiveNode({
         node: node.props,
@@ -115,7 +86,7 @@ var Panel = function Panel() {
   }, []);
   useLayoutEffect(function () {
     underLineRef.current.style.left = "".concat(activeTabRef.current.offsetLeft + activeTabRef.current.offsetWidth / 2 - 10, "px");
-  }, [activeTabKey, meta === null || meta === void 0 ? void 0 : meta.component]);
+  }, [activeTabKey, !!activeNode]);
   return /*#__PURE__*/React.createElement("div", {
     className: styles['lc-painter-panel']
   }, /*#__PURE__*/React.createElement("div", {
@@ -125,9 +96,9 @@ var Panel = function Panel() {
     style: {
       fontSize: 12
     }
-  }, activeNode === null || activeNode === void 0 ? void 0 : activeNode.level.map(function (_ref2) {
-    var id = _ref2.id,
-      name = _ref2.name;
+  }, activeNode === null || activeNode === void 0 ? void 0 : activeNode.level.map(function (_ref) {
+    var id = _ref.id,
+      name = _ref.name;
     return /*#__PURE__*/React.createElement(Breadcrumb.Item, {
       key: id,
       className: classNames(_defineProperty({}, styles['active-node-level'], id !== activeNode.node.id)),
@@ -152,16 +123,7 @@ var Panel = function Panel() {
     className: classNames(styles['lc-painter-panel-tabbar'], _defineProperty({}, styles.hidden, !activeNode))
   }, /*#__PURE__*/React.createElement("ul", {
     className: styles.headerList
-  }, reduce(_TAB_LIST_, function (ret, item) {
-    if (item.key === 'css' && !!(meta !== null && meta !== void 0 && meta.css)) {
-      ret.push(item);
-    } else if (item.key === 'advance' && !!(meta !== null && meta !== void 0 && meta.advance)) {
-      ret.push(item);
-    } else if (item.key === 'attrs') {
-      ret.push(item);
-    }
-    return ret;
-  }, []).map(function (_item) {
+  }, (activeNode !== null && activeNode !== void 0 && activeNode.node.css ? _TAB_LIST_ : [_TAB_LIST_[0], _TAB_LIST_[2]]).map(function (_item) {
     return /*#__PURE__*/React.createElement("li", {
       key: _item.key,
       ref: activeTabKey === _item.key ? activeTabRef : null,
@@ -174,22 +136,19 @@ var Panel = function Panel() {
     ref: underLineRef,
     className: styles.underline
   })), activeTabKey === _TAB_LIST_[0].key && /*#__PURE__*/React.createElement(AttrsPanel, {
-    key: activeNode === null || activeNode === void 0 ? void 0 : activeNode.node.id,
-    nodeId: activeNode === null || activeNode === void 0 ? void 0 : activeNode.node.id,
     meta: meta,
-    onChange: function onChange(field, value, params) {
-      return handleChange(field, value, params);
+    value: activeNode === null || activeNode === void 0 ? void 0 : activeNode.node,
+    onChange: function onChange(field, value, repositioning) {
+      return handleChange(field, value, repositioning);
     }
   }), activeTabKey === _TAB_LIST_[1].key && /*#__PURE__*/React.createElement(StylePanel, {
-    key: activeNode === null || activeNode === void 0 ? void 0 : activeNode.node.id,
-    nodeId: activeNode === null || activeNode === void 0 ? void 0 : activeNode.node.id,
+    value: activeNode === null || activeNode === void 0 ? void 0 : activeNode.node.css,
     onChange: function onChange(_, newCss) {
       return handleChange('css', newCss);
     }
   }), activeTabKey === _TAB_LIST_[2].key && /*#__PURE__*/React.createElement(AdvancePanel, {
-    key: activeNode === null || activeNode === void 0 ? void 0 : activeNode.node.id,
-    nodeId: activeNode === null || activeNode === void 0 ? void 0 : activeNode.node.id,
     meta: meta,
+    value: activeNode === null || activeNode === void 0 ? void 0 : activeNode.node,
     onChange: function onChange(val) {
       return handleChange('advance', val);
     }

package/es/lowcode/painter/components/ActionBindModal.js

@@ -1,20 +1,19 @@
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
-import React, { useRef, useState } from 'react';
-import { useMemoizedFn, useLatest, useCreation, useMap, useUpdateEffect, useDebounceFn } from 'ahooks';
-import { Modal, Icon, Input, Checkbox, Tooltip } from 'luck-design/antd';
+import React, { useState, forwardRef, useImperativeHandle } from 'react';
+import { useMemoizedFn, useCreation, useMap } from 'ahooks';
+import { Modal, Icon, Input, Checkbox } from 'luck-design/antd';
 import classNames from 'classnames';
 import { reduce } from 'lodash';
-import { formatMessage } from '@luck-design-biz/base/utils';
-import { useRemoteSource } from "../../engine/provider/ContextProvider";
-import { useContext } from "../../engine/provider/ContextProvider";
+import { useLDContext } from "../../engine/provider/ContextProvider";
 import JSEditor from "./code-editor/JSEditor";
+import { formatMessage } from '@luck-design-biz/base/utils';
 import styles from "../style/action-bind-modal.less";
 var _I18N_PREFIX_ = 'luckda.lowcode.painter.actionBindModal';
 var _ACTION_CATEGORY_ = [{
-  key: 'page-action',
+  key: 'actions',
   label: formatMessage({
-    id: "".concat(_I18N_PREFIX_, ".pageActions"),
+    id: "".concat(_I18N_PREFIX_, ".actions"),
     label: '页面行为'
   })
 }, {
@@ -24,148 +23,83 @@ var _ACTION_CATEGORY_ = [{
     label: '触发器'
   })
 }, {
-  key: 'custom',
+  key: 'code',
   label: formatMessage({
-    id: "".concat(_I18N_PREFIX_, ".custom"),
+    id: "".concat(_I18N_PREFIX_, ".code"),
     label: '自定义动作'
   })
 }];
-var _DEFAULT_JSON_CODE_ = '{"params":{},"data":{}}';
-var _DEFAULT_JS_CODE_ = 'function todo() {\n\n}';
-var ActionBindModal = function ActionBindModal(_ref) {
-  var event = _ref.event,
-    _ref$defaultCode = _ref.defaultCode,
-    defaultCode = _ref$defaultCode === void 0 ? _DEFAULT_JS_CODE_ : _ref$defaultCode,
-    onComfirm = _ref.onComfirm,
-    onClose = _ref.onClose;
-  var context = useContext();
-  var _useRemoteSource = useRemoteSource(),
-    module = _useRemoteSource.module;
-  var editorRef = useRef();
+var _CATEGORY_CODE_ITEMS = [{
+  key: 'coding',
+  label: formatMessage({
+    id: "".concat(_I18N_PREFIX_, ".coding"),
+    label: '动作编写'
+  })
+}];
+var ActionBindModal = /*#__PURE__*/forwardRef(function (_ref, ref) {
+  var activeNode = _ref.activeNode,
+    onComfirm = _ref.onComfirm;
+  var context = useLDContext();
+  var _useState = useState(void 0),
+    _useState2 = _slicedToArray(_useState, 2),
+    title = _useState2[0],
+    setTitle = _useState2[1];
+  var _useState3 = useState('actions'),
+    _useState4 = _slicedToArray(_useState3, 2),
+    category = _useState4[0],
+    setCategory = _useState4[1];
   var _useMap = useMap([]),
     _useMap2 = _slicedToArray(_useMap, 2),
     actionPool = _useMap2[0],
     _useMap2$ = _useMap2[1],
     set = _useMap2$.set,
     remove = _useMap2$.remove,
-    get = _useMap2$.get,
-    setAll = _useMap2$.setAll,
-    reset = _useMap2$.reset;
-  var _useState = useState('page-action'),
-    _useState2 = _slicedToArray(_useState, 2),
-    category = _useState2[0],
-    setCategory = _useState2[1];
-  var _useState3 = useState(void 0),
-    _useState4 = _slicedToArray(_useState3, 2),
-    activeKey = _useState4[0],
-    setActiveKey = _useState4[1];
-  var _useState5 = useState(void 0),
-    _useState6 = _slicedToArray(_useState5, 2),
-    searchValue = _useState6[0],
-    setSearchValue = _useState6[1];
-  var latestActiveKey = useLatest(activeKey);
-  var options = useCreation(function () {
-    if (category === 'page-action') {
-      return reduce(module.actions, function (ret, actionName, actionKey) {
-        ret.push({
-          key: actionKey,
-          label: actionName
-        });
-        return ret;
-      }, []);
+    reset = _useMap2$.reset,
+    get = _useMap2$.get;
+  var selectItems = useCreation(function () {
+    if (category === 'actions') {
+      return [];
     } else if (category === 'trigger') {
       return reduce(context.componentList, function (ret, _ref2) {
         var _ref3 = _slicedToArray(_ref2, 2),
           key = _ref3[0],
           target = _ref3[1];
-        ret.push({
-          key: key,
-          label: "".concat(target.api.getSelfData().props.name, "(").concat(key, ")")
-        });
+        if (key !== activeNode.id) {
+          ret.push({
+            key: key,
+            label: "".concat(target.api.getSelfAndParentLCData().node.props.name, "(").concat(key, ")")
+          });
+        }
         return ret;
       }, []);
-    } else if (category === 'custom') {
-      return [{
-        key: 'coding',
-        label: formatMessage({
-          id: "".concat(_I18N_PREFIX_, ".coding"),
-          label: '动作编写'
-        })
-      }];
+    } else if (category === 'code') {
+      return _CATEGORY_CODE_ITEMS;
     }
     return [];
   }, [category]);
-  useUpdateEffect(function () {
-    if (activeKey) {
-      var action = get(activeKey);
-      (action === null || action === void 0 ? void 0 : action.code) && editorRef.current.editor.setValue(action.code);
-    }
-  }, [activeKey]);
-  useUpdateEffect(function () {
-    setAll(event === null || event === void 0 ? void 0 : event.actionPool);
-  }, [event]);
-  var _useDebounceFn = useDebounceFn(function (code) {
-      if (latestActiveKey.current) {
-        var action = get(latestActiveKey.current);
-        action.code = code;
-      }
-    }, {
-      wait: 500
-    }),
-    handleEditorValueChange = _useDebounceFn.run;
-  var handleOptionClick = useMemoizedFn(function (key) {
-    setActiveKey(key);
-    var action;
-    if (actionPool.has(key)) {
-      action = get(key);
-    } else {
-      var code = event.func || (category === 'custom' ? defaultCode : "".concat(defaultCode.slice(0, -1), "\n\treturn ").concat(_DEFAULT_JSON_CODE_, " \n}"));
-      action = {
-        category: category,
-        key: key,
-        code: code
-      };
-      set(key, action);
-    }
-  });
-  var handleChecked = useMemoizedFn(function (key, checked) {
-    if (checked) {
-      if (activeKey !== key) {
-        setActiveKey(key);
-      }
-      var code = event.func || (category === 'custom' ? defaultCode : "".concat(defaultCode.slice(0, -1), "\n\treturn ").concat(_DEFAULT_JSON_CODE_, " \n}"));
-      set(key, {
-        category: category,
-        key: key,
-        code: code
-      });
-    } else {
-      if (activeKey === key) {
-        setActiveKey(void 0);
-      }
-      remove(key);
-    }
-  });
   var handleClose = useMemoizedFn(function () {
-    onClose();
-    reset();
-    setCategory('page-action');
-    setActiveKey(void 0);
-    setSearchValue(void 0);
+    setTitle(void 0);
   });
   var handleComfirm = useMemoizedFn(function () {
-    onComfirm(Array.from(actionPool), event);
     handleClose();
   });
+  var handleSearch = useMemoizedFn(function (val) {});
+  useImperativeHandle(ref, function () {
+    return {
+      doOpen: function doOpen(title) {
+        setTitle(title);
+      }
+    };
+  }, []);
   return /*#__PURE__*/React.createElement(Modal, {
     className: styles['lc-painter-panel-action-bind-modal'],
     bodyStyle: {
       marginTop: 0,
       padding: '4px 24px'
     },
-    title: event === null || event === void 0 ? void 0 : event.name,
-    visible: !!event,
-    width: "70vw",
+    title: title,
+    visible: !!title,
+    width: 960,
     closable: false,
     maskClosable: false,
     getContainer: function getContainer() {
@@ -192,17 +126,7 @@ var ActionBindModal = function ActionBindModal(_ref) {
       key: key,
       className: classNames(_defineProperty({}, styles.active, key === category)),
       onClick: function onClick() {
-        setCategory(key);
-        if ('custom' === key) {
-          setActiveKey('coding');
-          if (!actionPool.has(key)) {
-            set('coding', {
-              category: key,
-              key: 'coding',
-              code: event.func || defaultCode
-            });
-          }
-        }
+        return setCategory(key);
       }
     }, label, key === category && /*#__PURE__*/React.createElement(Icon, {
       type: "check",
@@ -210,7 +134,7 @@ var ActionBindModal = function ActionBindModal(_ref) {
     }));
   })), /*#__PURE__*/React.createElement("div", {
     className: styles['selecter-items-box']
-  }, category !== 'custom' && /*#__PURE__*/React.createElement("div", {
+  }, category !== 'code' && /*#__PURE__*/React.createElement("div", {
     style: {
       height: 42,
       display: 'flex',
@@ -222,78 +146,35 @@ var ActionBindModal = function ActionBindModal(_ref) {
       label: '搜索'
     }),
     size: "small",
-    onChange: function onChange(e) {
-      return setSearchValue(e.target.value);
-    },
+    onSearch: handleSearch,
     style: {
       width: 170,
       alignSelf: 'center'
     }
   })), /*#__PURE__*/React.createElement("ul", {
     className: classNames(styles['selector-box-ul'], styles['selecter-items'])
-  }, options.filter(function (_ref5) {
+  }, selectItems.map(function (_ref5) {
     var key = _ref5.key,
       label = _ref5.label;
-    return !searchValue || "".concat(key, " ").concat(label).toLowerCase().includes(searchValue.toLowerCase());
-  }).map(function (_ref6) {
-    var key = _ref6.key,
-      label = _ref6.label;
     return /*#__PURE__*/React.createElement("li", {
       key: key,
-      className: classNames(_defineProperty({}, styles.active, key === activeKey)),
+      className: classNames(_defineProperty({}, styles.active, actionPool.has(key))),
       onClick: function onClick() {
-        return handleOptionClick(key);
+        return set(key, label);
       }
     }, /*#__PURE__*/React.createElement(Checkbox, {
       checked: actionPool.has(key),
       style: {
         marginRight: 4
-      },
-      onChange: function onChange(e) {
-        return handleChecked(key, e.target.checked);
-      },
-      onClick: function onClick(e) {
-        return e.stopPropagation();
       }
     }), label);
   }))))), /*#__PURE__*/React.createElement("div", {
     className: styles['lc-painter-panel-action-bind-modal-body-right']
-  }, category === 'page-action' && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("p", null, formatMessage({
-    id: "".concat(_I18N_PREFIX_, ".params"),
-    label: '配置参数'
-  }), /*#__PURE__*/React.createElement(Tooltip, {
-    title: formatMessage({
-      id: "".concat(_I18N_PREFIX_, ".params.info"),
-      label: '请勿随意修改配置参数结构和参数名称，参数异常可能会导致请求失败'
-    }),
-    getPopupContainer: function getPopupContainer() {
-      return document.getElementById('lc-design-workspace');
-    },
-    zIndex: 3000
-  }, /*#__PURE__*/React.createElement(Icon, {
-    style: {
-      marginLeft: 4
-    },
-    type: "exclamation-circle"
-  }))), /*#__PURE__*/React.createElement("div", {
-    className: styles['code-box']
-  }, activeKey ? /*#__PURE__*/React.createElement(JSEditor, {
-    ref: editorRef,
-    onChange: handleEditorValueChange
-  }) : formatMessage({
-    id: "".concat(_I18N_PREFIX_, ".noActionSelected"),
-    label: '请在右侧选择行为项'
-  }))), category === 'custom' && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("p", null, formatMessage({
+  }, category === 'code' && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("p", null, formatMessage({
     id: "".concat(_I18N_PREFIX_, ".coding"),
     label: '动作编写'
   })), /*#__PURE__*/React.createElement("div", {
     className: styles['code-box']
-  }, activeKey ? /*#__PURE__*/React.createElement(JSEditor, {
-    ref: editorRef,
-    onChange: handleEditorValueChange
-  }) : formatMessage({
-    id: "".concat(_I18N_PREFIX_, ".noActionSelected"),
-    label: '请在右侧选择行为项'
-  }))))));
-};
+  }, /*#__PURE__*/React.createElement(JSEditor, null))))));
+});
 export default ActionBindModal;

package/es/lowcode/painter/components/AdvancePanel.js

@@ -1,77 +1,27 @@
-import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
-import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
-var _excluded = ["events"],
-  _excluded2 = ["events"];
-import React, { useState } from 'react';
+import React, { useRef } from 'react';
 import { useCreation, useMemoizedFn } from 'ahooks';
-import { Menu, Dropdown, Button, Tooltip, Icon } from 'luck-design/antd';
-import styled from 'styled-components';
-import { keyBy, keys, omit } from 'lodash';
-import { useGet } from "../../engine/provider/ContextProvider";
+import { Menu, Dropdown, Button, Tooltip } from 'luck-design/antd';
 import { formatMessage } from '@luck-design-biz/base/utils';
 import Collapse from "./Collapse";
 import ActionBindModal from "./ActionBindModal";
 var _I18N_PREFIX_ = 'luckda.lowcode.painter.advancePanel';
-var EventItem = styled.div.withConfig({
-  displayName: "EventItem",
-  componentId: "luckda-6530__sc-6426fo-0"
-})(["display:flex;align-items:center;justify-content:space-between;padding:4px 8px;border:1px solid #e5e6e8;border-radius:6px;margin-bottom:6px;font-size:12px;i{color:rgba(0,0,0,0.4);cursor:pointer;}i:not(:last-child){margin-right:6px;}"]);
 var AdvancePanel = function AdvancePanel(_ref) {
   var meta = _ref.meta,
-    nodeId = _ref.nodeId,
+    value = _ref.value,
     onChange = _ref.onChange;
-  var value = useGet({
-    id: nodeId,
-    path: 'props.advance'
-  });
-  var _useState = useState((value === null || value === void 0 ? void 0 : value.events) || {}),
-    _useState2 = _slicedToArray(_useState, 2),
-    events = _useState2[0],
-    setEvents = _useState2[1];
-  var _useState3 = useState(null),
-    _useState4 = _slicedToArray(_useState3, 2),
-    event = _useState4[0],
-    setEvent = _useState4[1];
-  var metaMap = useCreation(function () {
-    var _meta$advance;
-    return keyBy((meta === null || meta === void 0 || (_meta$advance = meta.advance) === null || _meta$advance === void 0 ? void 0 : _meta$advance.events) || [], 'key');
-  }, [meta]);
+  var modalRef = useRef();
   var handleEventClick = useMemoizedFn(function (e) {
     var payload = e.item.props.payload;
-    setEvent(_objectSpread(_objectSpread({}, payload), {}, {
-      actionPool: null
-    }));
-  });
-  var handleDeleteEvent = useMemoizedFn(function (ek) {
-    var _ref2 = value || {},
-      events = _ref2.events,
-      rest = _objectWithoutProperties(_ref2, _excluded);
-    var _events = omit(events, [ek]);
-    setEvents(_events);
-    onChange(_objectSpread(_objectSpread({}, rest), {}, {
-      events: _events
-    }));
-  });
-  var handleComfirm = useMemoizedFn(function (actionPool) {
-    var _ref3 = value || {},
-      events = _ref3.events,
-      rest = _objectWithoutProperties(_ref3, _excluded2);
-    var _events = _objectSpread(_objectSpread({}, events), {}, _defineProperty({}, event.key, actionPool));
-    setEvents(_events);
-    onChange(_objectSpread(_objectSpread({}, rest), {}, {
-      events: _events
-    }));
+    modalRef.current.doOpen(payload.name);
   });
   var eventsMenu = useCreation(function () {
-    var _meta$advance2;
+    var _meta$advance;
     return /*#__PURE__*/React.createElement(Menu, {
       onClick: handleEventClick,
       style: {
         fontSize: 12
       }
-    }, (_meta$advance2 = meta.advance) === null || _meta$advance2 === void 0 || (_meta$advance2 = _meta$advance2.events) === null || _meta$advance2 === void 0 ? void 0 : _meta$advance2.map(function (event) {
+    }, (_meta$advance = meta.advance) === null || _meta$advance === void 0 || (_meta$advance = _meta$advance.events) === null || _meta$advance === void 0 ? void 0 : _meta$advance.map(function (event) {
       return /*#__PURE__*/React.createElement(Menu.Item, {
         key: event.key,
         payload: event
@@ -88,7 +38,7 @@ var AdvancePanel = function AdvancePanel(_ref) {
         }
       }, event.name)));
     }));
-  }, []);
+  }, [value]);
   return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Collapse, {
     field: "events",
     label: formatMessage({
@@ -98,31 +48,7 @@ var AdvancePanel = function AdvancePanel(_ref) {
     bodyStyle: {
       padding: '12px 16px'
     }
-  }, keys(events).map(function (ek) {
-    return /*#__PURE__*/React.createElement(EventItem, null, /*#__PURE__*/React.createElement("span", null, metaMap[ek].name), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Tooltip, {
-      title: formatMessage({
-        id: 'luckda.lowcode.painter.edit',
-        label: '编辑'
-      })
-    }, /*#__PURE__*/React.createElement(Icon, {
-      type: "edit",
-      onClick: function onClick() {
-        return setEvent(_objectSpread(_objectSpread({}, metaMap[ek]), {}, {
-          actionPool: events[ek]
-        }));
-      }
-    })), /*#__PURE__*/React.createElement(Tooltip, {
-      title: formatMessage({
-        id: 'luckda.lowcode.painter.delete',
-        label: '删除'
-      })
-    }, /*#__PURE__*/React.createElement(Icon, {
-      type: "delete",
-      onClick: function onClick() {
-        return handleDeleteEvent(ek);
-      }
-    }))));
-  }), /*#__PURE__*/React.createElement(Dropdown, {
+  }, /*#__PURE__*/React.createElement(Dropdown, {
     overlay: eventsMenu,
     placement: "bottomCenter",
     getPopupContainer: function getPopupContainer() {
@@ -135,11 +61,8 @@ var AdvancePanel = function AdvancePanel(_ref) {
     id: "".concat(_I18N_PREFIX_, ".addEventAction"),
     label: '添加事件动作'
   })))), /*#__PURE__*/React.createElement(ActionBindModal, {
-    event: event,
-    onComfirm: handleComfirm,
-    onClose: function onClose() {
-      return setEvent(null);
-    }
+    ref: modalRef,
+    activeNode: value
   }));
 };
 export default AdvancePanel;