@luck-design-biz/luckda 0.0.24-2 → 0.0.25-2

package/lib/lowcode/painter/Panel.js

@@ -1,44 +1,50 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _objectSpread3 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
 var _ahooks = require("ahooks");
 var _antd = require("luck-design/antd");
 var _classnames = _interopRequireDefault(require("classnames"));
 var _lodash = require("lodash");
+var _utils = require("@luck-design-biz/base/utils");
 var _ContextProvider = require("../engine/provider/ContextProvider");
-var _PanelItem = _interopRequireDefault(require("./components/PanelItem"));
-var _panelItemFactory = _interopRequireDefault(require("../engine/factory/panel-item-factory"));
+var _AttrsPanel = _interopRequireDefault(require("./components/AttrsPanel"));
+var _StylePanel = _interopRequireDefault(require("./panel-section/StylePanel"));
+var _AdvancePanel = _interopRequireDefault(require("./components/AdvancePanel"));
 var _dataProcess = require("../engine/tools/dataProcess");
 var _panel = _interopRequireDefault(require("./style/panel.less"));
-var _StylePanel = _interopRequireDefault(require("./panel-section/StylePanel"));
-var _excluded = ["type", "key", "name", "desc", "default", "props", "panelItem", "next", "repositioning"];
+var _constants = require("../constants");
+var _I18N_PREFIX_ = 'luckda.lowcode.painter.panel';
 var _TAB_LIST_ = [{
-  title: '属性',
+  title: (0, _utils.formatMessage)({
+    id: "".concat(_I18N_PREFIX_, ".attrs"),
+    label: '属性'
+  }),
   key: 'attrs'
 }, {
-  title: '样式',
-  key: 'styles'
+  title: (0, _utils.formatMessage)({
+    id: "".concat(_I18N_PREFIX_, ".css"),
+    label: '样式'
+  }),
+  key: 'css'
 }, {
-  title: '高级',
+  title: (0, _utils.formatMessage)({
+    id: "".concat(_I18N_PREFIX_, ".advance"),
+    label: '高级'
+  }),
   key: 'advance'
 }];
 var Panel = function Panel() {
-  var _nextRef$current, _nextRef$current2;
   var activeTabRef = (0, _react.useRef)(null);
   var underLineRef = (0, _react.useRef)(null);
-  var nextRef = (0, _react.useRef)(null);
-  var factory = (0, _react.useRef)(new _panelItemFactory.default());
   var _useState = (0, _react.useState)(null),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     activeNode = _useState2[0],
@@ -47,107 +53,59 @@ var Panel = function Panel() {
     _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
     activeTabKey = _useState4[0],
     setActiveTabKey = _useState4[1];
-  var _useBoolean = (0, _ahooks.useBoolean)(false),
-    _useBoolean2 = (0, _slicedToArray2.default)(_useBoolean, 2),
-    open = _useBoolean2[0],
-    _useBoolean2$ = _useBoolean2[1],
-    setTrue = _useBoolean2$.setTrue,
-    setFalse = _useBoolean2$.setFalse;
-  var context = (0, _ContextProvider.useLDContext)();
+  var context = (0, _ContextProvider.useContext)();
+  var _usePageData = (0, _ContextProvider.usePageData)(),
+    _usePageData2 = (0, _slicedToArray2.default)(_usePageData, 2),
+    pageData = _usePageData2[0],
+    setPageData = _usePageData2[1].setPageData;
+  var meta = (0, _ahooks.useCreation)(function () {
+    try {
+      return (0, _lodash.isNil)(activeNode) ? null : require("../engine/meta/".concat(activeNode.node.component.toLowerCase(), ".props.json"));
+    } catch (e) {
+      return null;
+    }
+  }, [activeNode]);
   var handleChange = (0, _ahooks.useMemoizedFn)(function (field, value, repositioning) {
+    if (field === 'enableHeader') {
+      if (value) {
+        var headerMeta = require("../engine/meta/pageheader.props.default.json");
+        (0, _dataProcess.add)(pageData, _constants.LC_BUILDIN_UNIT_KEY.PAGE_ROOT, _constants.LC_BUILDIN_UNIT_KEY.PAGE_HEADER, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, headerMeta), {}, {
+          buildIn: true
+        }));
+      } else {
+        (0, _dataProcess.deleteById)(pageData, _constants.LC_BUILDIN_UNIT_KEY.PAGE_HEADER);
+      }
+    } else if (field === 'enableFooter') {
+      if (value) {
+        var footerMeta = require("../engine/meta/pagefooter.props.default.json");
+        (0, _dataProcess.add)(pageData, _constants.LC_BUILDIN_UNIT_KEY.PAGE_ROOT, _constants.LC_BUILDIN_UNIT_KEY.PAGE_FOOTER, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, footerMeta), {}, {
+          buildIn: true
+        }));
+      } else {
+        (0, _dataProcess.deleteById)(pageData, _constants.LC_BUILDIN_UNIT_KEY.PAGE_FOOTER);
+      }
+    }
     var component = context.componentMap.get(activeNode.node.id);
     var _component$api$getSel = component.api.getSelfAndParentLCData(),
       node = _component$api$getSel.node;
-    var cloneData = (0, _lodash.cloneDeep)(context.pageData);
-    (0, _dataProcess.modifyById)(cloneData, activeNode.node.id, (0, _objectSpread3.default)((0, _objectSpread3.default)({}, node.props), {}, (0, _defineProperty2.default)({}, field, value)));
-    context._setPageData(cloneData).then(function (newData) {
+    var oldValue = (0, _defineProperty2.default)({}, field, (0, _lodash.get)(node.props, field));
+    var newNodeData = (0, _lodash.set)(node.props, field, value);
+    (0, _dataProcess.modifyById)(pageData, activeNode.node.id, newNodeData);
+    setPageData(pageData).then(function (newData) {
       context.$publisher(context.topics.COMPONENT_MODIFY, {
         id: activeNode.node.id,
-        pageData: (0, _lodash.cloneDeep)(newData)
+        pageData: newData,
+        oldValue: oldValue,
+        newValue: (0, _defineProperty2.default)({}, field, value)
       });
       if (repositioning) context.$publisher(context.topics.COMPONENT_REPOSITIONING, {
         id: activeNode.node.id
       });
     });
-    if (nextRef.current.autoClose) {
-      setFalse();
-    }
   });
-  var handleStyleChange = (0, _ahooks.useMemoizedFn)(function (newStyle, newCss) {
-    console.log('style', newStyle, newCss);
-    // setCss(newCss);
-  });
-  var goNext = (0, _ahooks.useMemoizedFn)(function (_next) {
-    if (!_next) return;
-    nextRef.current = {
-      name: _next.name,
-      autoClose: _next.autoClose,
-      NextComp: renderPanelItems(_next.props)
-    };
-    setTrue();
-  });
-  var renderPanelItems = (0, _ahooks.useMemoizedFn)(function (items) {
-    return items.map(function (_ref) {
-      var type = _ref.type,
-        key = _ref.key,
-        name = _ref.name,
-        desc = _ref.desc,
-        defaultValue = _ref.default,
-        props = _ref.props,
-        panelItem = _ref.panelItem,
-        _next2 = _ref.next,
-        repositioning = _ref.repositioning,
-        rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-      var Comp = factory.current.getPanelItemFor((0, _lodash.startsWith)(type, '_') ? 'dynamic' : type, type);
-      if (type === 'group') {
-        return /*#__PURE__*/_react.default.createElement(Comp, {
-          key: key,
-          field: key,
-          label: name,
-          next: _next2 ? function () {
-            return goNext(_next2);
-          } : null,
-          defaultCollapsed: defaultValue,
-          desc: desc
-        }, renderPanelItems(props || []));
-      }
-      var _context$componentMap = context.componentMap.get(activeNode.node.id).api.getSelfAndParentLCData(),
-        node = _context$componentMap.node;
-      return /*#__PURE__*/_react.default.createElement(_PanelItem.default, (0, _extends2.default)({
-        key: key,
-        field: key,
-        label: name,
-        desc: desc
-      }, panelItem), Comp && /*#__PURE__*/_react.default.createElement(Comp, (0, _extends2.default)({
-        defaultValue: (0, _lodash.isNil)(node.props[key]) ? defaultValue : node.props[key],
-        next: function next() {
-          return goNext(_next2);
-        },
-        onChange: function onChange(value) {
-          return handleChange(key, value, repositioning);
-        },
-        size: "small"
-      }, rest)));
-    });
-  });
-  var PropsComps = (0, _ahooks.useCreation)(function () {
-    setActiveTabKey('attrs');
-    var _meta;
-    try {
-      _meta = require("../engine/meta/".concat(activeNode.node.component.toLowerCase(), ".props.json"));
-    } catch (e) {
-      return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null);
-    }
-    return renderPanelItems(_meta.props);
-  }, [activeNode]);
-  (0, _react.useEffect)(function () {
-    if (!open) {
-      nextRef.current = null;
-    }
-  }, [open]);
   (0, _react.useEffect)(function () {
     var _id = context.$subscriber(context.topics.COMPONENT_ACTIVE).on(function (payload) {
-      setFalse();
+      setActiveTabKey('attrs');
       if (!payload.id) {
         setActiveNode(null);
         return;
@@ -162,12 +120,12 @@ var Panel = function Panel() {
       });
     }).watch();
     return function () {
-      context.$unsubscriber(context.topics.COMPONENT_ACTIVE, _id);
+      return context.$unsubscriber(context.topics.COMPONENT_ACTIVE, _id);
     };
   }, []);
   (0, _react.useLayoutEffect)(function () {
     underLineRef.current.style.left = "".concat(activeTabRef.current.offsetLeft + activeTabRef.current.offsetWidth / 2 - 10, "px");
-  }, [activeTabKey, !!activeNode]);
+  }, [activeTabKey, meta === null || meta === void 0 ? void 0 : meta.component]);
   return /*#__PURE__*/_react.default.createElement("div", {
     className: _panel.default['lc-painter-panel']
   }, /*#__PURE__*/_react.default.createElement("div", {
@@ -177,9 +135,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.default.createElement(_antd.Breadcrumb.Item, {
       key: id,
       className: (0, _classnames.default)((0, _defineProperty2.default)({}, _panel.default['active-node-level'], id !== activeNode.node.id)),
@@ -204,7 +162,16 @@ var Panel = function Panel() {
     className: (0, _classnames.default)(_panel.default['lc-painter-panel-tabbar'], (0, _defineProperty2.default)({}, _panel.default.hidden, !activeNode))
   }, /*#__PURE__*/_react.default.createElement("ul", {
     className: _panel.default.headerList
-  }, (activeNode !== null && activeNode !== void 0 && activeNode.node.style ? _TAB_LIST_ : [_TAB_LIST_[0], _TAB_LIST_[2]]).map(function (_item) {
+  }, (0, _lodash.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) {
     return /*#__PURE__*/_react.default.createElement("li", {
       key: _item.key,
       ref: activeTabKey === _item.key ? activeTabRef : null,
@@ -216,38 +183,28 @@ var Panel = function Panel() {
   })), /*#__PURE__*/_react.default.createElement("div", {
     ref: underLineRef,
     className: _panel.default.underline
-  })), activeTabKey === _TAB_LIST_[0].key && /*#__PURE__*/_react.default.createElement("div", {
-    className: (0, _classnames.default)(_panel.default['lc-painter-panel-content'], (0, _defineProperty2.default)((0, _defineProperty2.default)({}, _panel.default.hidden, !activeNode), _panel.default.showNext, open))
-  }, PropsComps, /*#__PURE__*/_react.default.createElement(_antd.Drawer, {
-    visible: open,
-    width: 320,
-    mask: false,
-    closable: false,
-    getContainer: false,
-    destroyOnClose: true,
-    style: {
-      position: 'absolute'
-    },
-    bodyStyle: {
-      padding: 0,
-      height: '100%'
+  })), activeTabKey === _TAB_LIST_[0].key && /*#__PURE__*/_react.default.createElement(_AttrsPanel.default, {
+    meta: meta,
+    value: activeNode === null || activeNode === void 0 ? void 0 : activeNode.node,
+    onChange: function onChange(field, value, repositioning) {
+      return handleChange(field, value, repositioning);
     }
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    className: _panel.default['next-content']
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    className: _panel.default['next-content-header'],
-    onClick: setFalse
-  }, /*#__PURE__*/_react.default.createElement(_antd.Icon, {
-    type: "left"
-  }), (_nextRef$current = nextRef.current) === null || _nextRef$current === void 0 ? void 0 : _nextRef$current.name, /*#__PURE__*/_react.default.createElement(_antd.Icon, {
-    type: "close"
-  })), /*#__PURE__*/_react.default.createElement("div", {
-    className: _panel.default['next-content-body']
-  }, (_nextRef$current2 = nextRef.current) === null || _nextRef$current2 === void 0 ? void 0 : _nextRef$current2.NextComp)))), activeTabKey === _TAB_LIST_[1].key && /*#__PURE__*/_react.default.createElement(_StylePanel.default, {
-    onChange: handleStyleChange,
-    value: activeNode === null || activeNode === void 0 ? void 0 : activeNode.node.style
-  }), activeTabKey === _TAB_LIST_[2].key && /*#__PURE__*/_react.default.createElement("div", null, "\u9AD8\u7EA7\u9762\u677F"), /*#__PURE__*/_react.default.createElement("div", {
+  }), activeTabKey === _TAB_LIST_[1].key && /*#__PURE__*/_react.default.createElement(_StylePanel.default, {
+    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.default.createElement(_AdvancePanel.default, {
+    meta: meta,
+    value: activeNode === null || activeNode === void 0 ? void 0 : activeNode.node.advance,
+    onChange: function onChange(val) {
+      return handleChange('advance', val);
+    }
+  }), /*#__PURE__*/_react.default.createElement("div", {
     className: (0, _classnames.default)(_panel.default['lc-painter-panel-empty'], (0, _defineProperty2.default)({}, _panel.default.hidden, !!activeNode))
-  }, "\u8BF7\u5728\u5DE6\u4FA7\u753B\u5E03\u9009\u4E2D\u8282\u70B9"));
+  }, (0, _utils.formatMessage)({
+    id: "".concat(_I18N_PREFIX_, ".empty"),
+    label: '请在左侧画布选中节点'
+  })));
 };
 var _default = exports.default = Panel;

package/lib/lowcode/painter/Ribbon.js

@@ -22,7 +22,7 @@ var _DRAWER_PROPS = {
   placement: 'left',
   mask: false,
   getContainer: false,
-  zIndex: 10000,
+  zIndex: 2000,
   headerStyle: {
     borderBottom: 'none'
   },

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

@@ -0,0 +1,300 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
+var _ahooks = require("ahooks");
+var _antd = require("luck-design/antd");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _lodash = require("lodash");
+var _utils = require("@luck-design-biz/base/utils");
+var _ContextProvider = require("../../engine/provider/ContextProvider");
+var _JSEditor = _interopRequireDefault(require("./code-editor/JSEditor"));
+var _JsonEditor = _interopRequireDefault(require("./code-editor/JsonEditor"));
+var _actionBindModal = _interopRequireDefault(require("../style/action-bind-modal.less"));
+var _I18N_PREFIX_ = 'luckda.lowcode.painter.actionBindModal';
+var _ACTION_CATEGORY_ = [{
+  key: 'page-action',
+  label: (0, _utils.formatMessage)({
+    id: "".concat(_I18N_PREFIX_, ".pageActions"),
+    label: '页面行为'
+  })
+}, {
+  key: 'trigger',
+  label: (0, _utils.formatMessage)({
+    id: "".concat(_I18N_PREFIX_, ".trigger"),
+    label: '触发器'
+  })
+}, {
+  key: 'custom',
+  label: (0, _utils.formatMessage)({
+    id: "".concat(_I18N_PREFIX_, ".custom"),
+    label: '自定义动作'
+  })
+}];
+var _DEFAULT_JSON_CODE_ = '{"datasetCode": "","params":{},"body":{}}';
+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 = (0, _ContextProvider.useContext)();
+  var _useRemoteSource = (0, _ContextProvider.useRemoteSource)(),
+    module = _useRemoteSource.module;
+  var editorRef = (0, _react.useRef)();
+  var _useMap = (0, _ahooks.useMap)([]),
+    _useMap2 = (0, _slicedToArray2.default)(_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 = (0, _react.useState)('page-action'),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    category = _useState2[0],
+    setCategory = _useState2[1];
+  var _useState3 = (0, _react.useState)(void 0),
+    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+    activeKey = _useState4[0],
+    setActiveKey = _useState4[1];
+  var _useState5 = (0, _react.useState)(void 0),
+    _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+    searchValue = _useState6[0],
+    setSearchValue = _useState6[1];
+  var latestActiveKey = (0, _ahooks.useLatest)(activeKey);
+  var options = (0, _ahooks.useCreation)(function () {
+    if (category === 'page-action') {
+      return (0, _lodash.reduce)(module.actions, function (ret, actionName, actionKey) {
+        ret.push({
+          key: actionKey,
+          label: actionName
+        });
+        return ret;
+      }, []);
+    } else if (category === 'trigger') {
+      return (0, _lodash.reduce)(context.componentList, function (ret, _ref2) {
+        var _ref3 = (0, _slicedToArray2.default)(_ref2, 2),
+          key = _ref3[0],
+          target = _ref3[1];
+        ret.push({
+          key: key,
+          label: "".concat(target.api.getSelfAndParentLCData().node.props.name, "(").concat(key, ")")
+        });
+        return ret;
+      }, []);
+    } else if (category === 'custom') {
+      return [{
+        key: 'coding',
+        label: (0, _utils.formatMessage)({
+          id: "".concat(_I18N_PREFIX_, ".coding"),
+          label: '动作编写'
+        })
+      }];
+    }
+    return [];
+  }, [category]);
+  (0, _ahooks.useUpdateEffect)(function () {
+    if (activeKey) {
+      var action = get(activeKey);
+      editorRef.current.editor.setValue(action.code);
+    }
+  }, [activeKey]);
+  (0, _ahooks.useUpdateEffect)(function () {
+    setAll(event === null || event === void 0 ? void 0 : event.actionPool);
+  }, [event]);
+  var handleEditorValueChange = (0, _react.useRef)((0, _lodash.debounce)(function (code) {
+    if (latestActiveKey.current) {
+      var action = get(latestActiveKey.current);
+      action.code = code;
+    }
+  }, 400));
+  var handleOptionClick = (0, _ahooks.useMemoizedFn)(function (key) {
+    setActiveKey(key);
+    var action;
+    if (actionPool.has(key)) {
+      action = get(key);
+    } else {
+      var code = category === 'custom' ? event.func || defaultCode : JSON.stringify((0, _objectSpread2.default)({
+        moduleCode: module.moduleCode
+      }, JSON.parse(_DEFAULT_JSON_CODE_)), null, '\t');
+      action = {
+        category: category,
+        key: key,
+        code: code
+      };
+      set(key, action);
+    }
+  });
+  var handleChecked = (0, _ahooks.useMemoizedFn)(function (key, checked) {
+    if (checked) {
+      if (activeKey !== key) {
+        setActiveKey(key);
+      }
+      var code = category === 'custom' ? event.func || defaultCode : JSON.stringify((0, _objectSpread2.default)({
+        moduleCode: module.moduleCode
+      }, JSON.parse(_DEFAULT_JSON_CODE_)), null, '\t');
+      set(key, {
+        category: category,
+        key: key,
+        code: code
+      });
+    } else {
+      if (activeKey === key) {
+        setActiveKey(void 0);
+      }
+      remove(key);
+    }
+  });
+  var handleClose = (0, _ahooks.useMemoizedFn)(function () {
+    onClose();
+    reset();
+    setCategory('page-action');
+    setActiveKey(void 0);
+    setSearchValue(void 0);
+  });
+  var handleComfirm = (0, _ahooks.useMemoizedFn)(function () {
+    onComfirm(Array.from(actionPool), event);
+    handleClose();
+  });
+  return /*#__PURE__*/_react.default.createElement(_antd.Modal, {
+    className: _actionBindModal.default['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: 960,
+    closable: false,
+    maskClosable: false,
+    getContainer: function getContainer() {
+      return document.getElementById('lc-design-workspace');
+    },
+    zIndex: 3000,
+    onCancel: handleClose,
+    onOk: handleComfirm
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: _actionBindModal.default['lc-painter-panel-action-bind-modal-body']
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: _actionBindModal.default['lc-painter-panel-action-bind-modal-body-left']
+  }, /*#__PURE__*/_react.default.createElement("p", null, (0, _utils.formatMessage)({
+    id: "".concat(_I18N_PREFIX_, ".bind"),
+    label: '绑定动作'
+  })), /*#__PURE__*/_react.default.createElement("div", {
+    className: _actionBindModal.default['selector-box']
+  }, /*#__PURE__*/_react.default.createElement("ul", {
+    className: (0, _classnames.default)(_actionBindModal.default['selector-box-ul'], _actionBindModal.default['action-category'])
+  }, _ACTION_CATEGORY_.map(function (_ref4) {
+    var key = _ref4.key,
+      label = _ref4.label;
+    return /*#__PURE__*/_react.default.createElement("li", {
+      key: key,
+      className: (0, _classnames.default)((0, _defineProperty2.default)({}, _actionBindModal.default.active, key === category)),
+      onClick: function onClick() {
+        setCategory(key);
+        setActiveKey(void 0);
+      }
+    }, label, key === category && /*#__PURE__*/_react.default.createElement(_antd.Icon, {
+      type: "check",
+      className: _actionBindModal.default['check-icon']
+    }));
+  })), /*#__PURE__*/_react.default.createElement("div", {
+    className: _actionBindModal.default['selecter-items-box']
+  }, category !== 'custom' && /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      height: 42,
+      display: 'flex',
+      justifyContent: 'center'
+    }
+  }, /*#__PURE__*/_react.default.createElement(_antd.Input.Search, {
+    placeholder: (0, _utils.formatMessage)({
+      id: "".concat(_I18N_PREFIX_, ".search"),
+      label: '搜索'
+    }),
+    size: "small",
+    onChange: function onChange(e) {
+      return setSearchValue(e.target.value);
+    },
+    style: {
+      width: 170,
+      alignSelf: 'center'
+    }
+  })), /*#__PURE__*/_react.default.createElement("ul", {
+    className: (0, _classnames.default)(_actionBindModal.default['selector-box-ul'], _actionBindModal.default['selecter-items'])
+  }, options.filter(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.default.createElement("li", {
+      key: key,
+      className: (0, _classnames.default)((0, _defineProperty2.default)({}, _actionBindModal.default.active, key === activeKey)),
+      onClick: function onClick() {
+        return handleOptionClick(key);
+      }
+    }, /*#__PURE__*/_react.default.createElement(_antd.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.default.createElement("div", {
+    className: _actionBindModal.default['lc-painter-panel-action-bind-modal-body-right']
+  }, category === 'page-action' && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("p", null, (0, _utils.formatMessage)({
+    id: "".concat(_I18N_PREFIX_, ".params"),
+    label: '配置参数'
+  }), /*#__PURE__*/_react.default.createElement(_antd.Tooltip, {
+    title: (0, _utils.formatMessage)({
+      id: "".concat(_I18N_PREFIX_, ".params.info"),
+      label: '请勿随意修改配置参数结构和参数名称，参数异常可能会导致请求失败'
+    }),
+    getPopupContainer: function getPopupContainer() {
+      return document.getElementById('lc-design-workspace');
+    },
+    zIndex: 3000
+  }, /*#__PURE__*/_react.default.createElement(_antd.Icon, {
+    style: {
+      marginLeft: 4
+    },
+    type: "exclamation-circle"
+  }))), /*#__PURE__*/_react.default.createElement("div", {
+    className: _actionBindModal.default['code-box']
+  }, activeKey ? /*#__PURE__*/_react.default.createElement(_JsonEditor.default, {
+    ref: editorRef,
+    onChange: handleEditorValueChange.current
+  }) : (0, _utils.formatMessage)({
+    id: "".concat(_I18N_PREFIX_, ".noActionSelected"),
+    label: '请在右侧选择行为项'
+  }))), category === 'custom' && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("p", null, (0, _utils.formatMessage)({
+    id: "".concat(_I18N_PREFIX_, ".coding"),
+    label: '动作编写'
+  })), /*#__PURE__*/_react.default.createElement("div", {
+    className: _actionBindModal.default['code-box']
+  }, activeKey ? /*#__PURE__*/_react.default.createElement(_JSEditor.default, {
+    ref: editorRef,
+    onChange: handleEditorValueChange.current
+  }) : (0, _utils.formatMessage)({
+    id: "".concat(_I18N_PREFIX_, ".noActionSelected"),
+    label: '请在右侧选择行为项'
+  }))))));
+};
+var _default = exports.default = ActionBindModal;