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

package/es/lowcode/painter/Panel.js

@@ -2,31 +2,41 @@ import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import React, { useRef, useState, useEffect, useLayoutEffect } from 'react';
-import { useBoolean, useCreation, useMemoizedFn } from 'ahooks';
-import { Breadcrumb, Drawer, Icon } from 'luck-design/antd';
+import { useCreation, useMemoizedFn } from 'ahooks';
+import { Breadcrumb } from 'luck-design/antd';
 import classNames from 'classnames';
-import { startsWith, takeRight, cloneDeep } from 'lodash';
-import { useLDContext } from "../engine/provider/ContextProvider";
-import PanelItem from "./components/PanelItem";
-import PanelItemFactory from "../engine/factory/panel-item-factory";
-import { modifyById } from "../engine/tools/dataProcess";
+import { takeRight, cloneDeep, isNil, reduce, get, set } from 'lodash';
+import { formatMessage } from '@luck-design-biz/base/utils';
+import { useContext, usePageData } from "../engine/provider/ContextProvider";
+import AttrsPanel from "./components/AttrsPanel";
+import StylePanel from "./panel-section/StylePanel";
+import AdvancePanel from "./components/AdvancePanel";
+import { modifyById, add, deleteById } 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: '属性',
+  title: formatMessage({
+    id: "".concat(_I18N_PREFIX_, ".attrs"),
+    label: '属性'
+  }),
   key: 'attrs'
 }, {
-  title: '样式',
-  key: 'styles'
+  title: formatMessage({
+    id: "".concat(_I18N_PREFIX_, ".css"),
+    label: '样式'
+  }),
+  key: 'css'
 }, {
-  title: '高级',
+  title: formatMessage({
+    id: "".concat(_I18N_PREFIX_, ".advance"),
+    label: '高级'
+  }),
   key: 'advance'
 }];
 var Panel = function Panel() {
-  var _nextRef$current, _nextRef$current2;
   var activeTabRef = useRef(null);
   var underLineRef = useRef(null);
-  var nextRef = useRef(null);
-  var factory = useRef(new PanelItemFactory());
   var _useState = useState(null),
     _useState2 = _slicedToArray(_useState, 2),
     activeNode = _useState2[0],
@@ -35,76 +45,60 @@ var Panel = function Panel() {
     _useState4 = _slicedToArray(_useState3, 2),
     activeTabKey = _useState4[0],
     setActiveTabKey = _useState4[1];
-  var _useBoolean = useBoolean(false),
-    _useBoolean2 = _slicedToArray(_useBoolean, 2),
-    open = _useBoolean2[0],
-    _useBoolean2$ = _useBoolean2[1],
-    setTrue = _useBoolean2$.setTrue,
-    setFalse = _useBoolean2$.setFalse;
-  var context = useLDContext();
-  var handleChange = useMemoizedFn(function (field, value) {
+  var context = useContext();
+  var _usePageData = usePageData(),
+    _usePageData2 = _slicedToArray(_usePageData, 2),
+    pageData = _usePageData2[0],
+    setPageData = _usePageData2[1].setPageData;
+  var meta = useCreation(function () {
+    try {
+      return isNil(activeNode) ? null : require("../engine/meta/".concat(activeNode.node.component.toLowerCase(), ".props.json"));
+    } catch (e) {
+      return null;
+    }
+  }, [activeNode]);
+  var handleChange = useMemoizedFn(function (field, value, repositioning) {
+    var cloneData = cloneDeep(pageData);
+    if (field === 'enableHeader') {
+      if (value) {
+        var headerMeta = require("../engine/meta/pageheader.props.default.json");
+        add(cloneData, LC_BUILDIN_UNIT_KEY.PAGE_ROOT, LC_BUILDIN_UNIT_KEY.PAGE_HEADER, _objectSpread(_objectSpread({}, headerMeta), {}, {
+          buildIn: true
+        }));
+      } else {
+        deleteById(cloneData, LC_BUILDIN_UNIT_KEY.PAGE_HEADER);
+      }
+    } else if (field === 'enableFooter') {
+      if (value) {
+        var footerMeta = require("../engine/meta/pagefooter.props.default.json");
+        add(cloneData, LC_BUILDIN_UNIT_KEY.PAGE_ROOT, LC_BUILDIN_UNIT_KEY.PAGE_FOOTER, _objectSpread(_objectSpread({}, footerMeta), {}, {
+          buildIn: true
+        }));
+      } else {
+        deleteById(cloneData, 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 = cloneDeep(context.pageData);
-    modifyById(cloneData, activeNode.node.id, _objectSpread(_objectSpread({}, node.props), {}, _defineProperty({}, field, value)));
-    context._setPageData(cloneData).then(function (newData) {
+    var oldValue = _defineProperty({}, field, get(node.props, field));
+    var newNodeData = set(node.props, field, value);
+    modifyById(cloneData, activeNode.node.id, newNodeData);
+    setPageData(cloneData).then(function (newData) {
       context.$publisher(context.topics.COMPONENT_MODIFY, {
         id: activeNode.node.id,
-        pageData: cloneDeep(newData)
+        pageData: cloneDeep(newData),
+        oldValue: oldValue,
+        newValue: _defineProperty({}, field, value)
+      });
+      if (repositioning) context.$publisher(context.topics.COMPONENT_REPOSITIONING, {
+        id: activeNode.node.id
       });
-    });
-    setFalse();
-  });
-  var renderPanelItems = useMemoizedFn(function (items) {
-    return items.map(function (item) {
-      var Comp = factory.current.getPanelItemFor(startsWith(item.type, '_') ? 'dynamic' : item.type, item.type);
-      if (item.type === 'group') {
-        return /*#__PURE__*/React.createElement(Comp, {
-          key: item.key,
-          label: item.name,
-          defaultCollapsed: true
-        }, renderPanelItems(item.props));
-      }
-      console.log(11111, item.key, activeNode.node);
-      return /*#__PURE__*/React.createElement(PanelItem, {
-        key: item.key,
-        label: item.name
-      }, Comp && /*#__PURE__*/React.createElement(Comp, {
-        defaultValue: activeNode.node[item.key],
-        next: function next() {
-          if (!item.next) return;
-          nextRef.current = {
-            name: item.next.name,
-            NextComp: renderPanelItems(item.next.props)
-          };
-          setTrue();
-        },
-        options: item.options,
-        disabled: item.disabled,
-        onChange: function onChange(value) {
-          return handleChange(item.key, value);
-        },
-        size: "small"
-      }));
     });
   });
-  var PropsComps = useCreation(function () {
-    var _meta;
-    try {
-      _meta = require("../engine/meta/".concat(activeNode.node.component.toLowerCase(), ".props.json"));
-    } catch (e) {
-      return /*#__PURE__*/React.createElement(React.Fragment, null);
-    }
-    return renderPanelItems(_meta.props);
-  }, [activeNode]);
-  useEffect(function () {
-    if (!open) {
-      nextRef.current = null;
-    }
-  }, [open]);
   useEffect(function () {
     var _id = context.$subscriber(context.topics.COMPONENT_ACTIVE).on(function (payload) {
+      setActiveTabKey('attrs');
       if (!payload.id) {
         setActiveNode(null);
         return;
@@ -119,12 +113,12 @@ var Panel = function Panel() {
       });
     }).watch();
     return function () {
-      context.$unsubscriber(context.topics.COMPONENT_ACTIVE, _id);
+      return context.$unsubscriber(context.topics.COMPONENT_ACTIVE, _id);
     };
-  }, [context.pageData]);
+  }, []);
   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.createElement("div", {
     className: styles['lc-painter-panel']
   }, /*#__PURE__*/React.createElement("div", {
@@ -161,7 +155,16 @@ var Panel = function Panel() {
     className: classNames(styles['lc-painter-panel-tabbar'], _defineProperty({}, styles.hidden, !activeNode))
   }, /*#__PURE__*/React.createElement("ul", {
     className: styles.headerList
-  }, _TAB_LIST_.map(function (_item) {
+  }, 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.createElement("li", {
       key: _item.key,
       ref: activeTabKey === _item.key ? activeTabRef : null,
@@ -173,35 +176,28 @@ var Panel = function Panel() {
   })), /*#__PURE__*/React.createElement("div", {
     ref: underLineRef,
     className: styles.underline
-  })), activeTabKey === _TAB_LIST_[0].key && /*#__PURE__*/React.createElement("div", {
-    className: classNames(styles['lc-painter-panel-content'], _defineProperty({}, styles.hidden, !activeNode))
-  }, PropsComps, /*#__PURE__*/React.createElement(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.createElement(AttrsPanel, {
+    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.createElement("div", {
-    className: styles['next-content']
-  }, /*#__PURE__*/React.createElement("div", {
-    className: styles['next-content-header'],
-    onClick: setFalse
-  }, /*#__PURE__*/React.createElement(Icon, {
-    type: "left"
-  }), (_nextRef$current = nextRef.current) === null || _nextRef$current === void 0 ? void 0 : _nextRef$current.name, /*#__PURE__*/React.createElement(Icon, {
-    type: "close"
-  })), /*#__PURE__*/React.createElement("div", {
-    className: styles['next-content-body']
-  }, (_nextRef$current2 = nextRef.current) === null || _nextRef$current2 === void 0 ? void 0 : _nextRef$current2.NextComp)))), activeTabKey === _TAB_LIST_[1].key && /*#__PURE__*/React.createElement("div", null, "\u6837\u5F0F\u9762\u677F"), activeTabKey === _TAB_LIST_[2].key && /*#__PURE__*/React.createElement("div", null, "\u9AD8\u7EA7\u9762\u677F"), /*#__PURE__*/React.createElement("div", {
+  }), activeTabKey === _TAB_LIST_[1].key && /*#__PURE__*/React.createElement(StylePanel, {
+    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, {
+    meta: meta,
+    value: activeNode === null || activeNode === void 0 ? void 0 : activeNode.node.advance,
+    onChange: function onChange(val) {
+      return handleChange('advance', val);
+    }
+  }), /*#__PURE__*/React.createElement("div", {
     className: classNames(styles['lc-painter-panel-empty'], _defineProperty({}, styles.hidden, !!activeNode))
-  }, "\u8BF7\u5728\u5DE6\u4FA7\u753B\u5E03\u9009\u4E2D\u8282\u70B9"));
+  }, formatMessage({
+    id: "".concat(_I18N_PREFIX_, ".empty"),
+    label: '请在左侧画布选中节点'
+  })));
 };
 export default Panel;

package/es/lowcode/painter/Ribbon.js

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

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

@@ -0,0 +1,293 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import React, { useRef, useState } from 'react';
+import { useMemoizedFn, useLatest, useCreation, useMap, useUpdateEffect } from 'ahooks';
+import { Modal, Icon, Input, Checkbox, Tooltip } from 'luck-design/antd';
+import classNames from 'classnames';
+import { debounce, reduce } from 'lodash';
+import { formatMessage } from '@luck-design-biz/base/utils';
+import { useRemoteSource } from "../../engine/provider/ContextProvider";
+import { useContext } from "../../engine/provider/ContextProvider";
+import JSEditor from "./code-editor/JSEditor";
+import JsonEditor from "./code-editor/JsonEditor";
+import styles from "../style/action-bind-modal.less";
+var _I18N_PREFIX_ = 'luckda.lowcode.painter.actionBindModal';
+var _ACTION_CATEGORY_ = [{
+  key: 'page-action',
+  label: formatMessage({
+    id: "".concat(_I18N_PREFIX_, ".pageActions"),
+    label: '页面行为'
+  })
+}, {
+  key: 'trigger',
+  label: formatMessage({
+    id: "".concat(_I18N_PREFIX_, ".trigger"),
+    label: '触发器'
+  })
+}, {
+  key: 'custom',
+  label: 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 = useContext();
+  var _useRemoteSource = useRemoteSource(),
+    module = _useRemoteSource.module;
+  var editorRef = useRef();
+  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;
+      }, []);
+    } 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.getSelfAndParentLCData().node.props.name, "(").concat(key, ")")
+        });
+        return ret;
+      }, []);
+    } else if (category === 'custom') {
+      return [{
+        key: 'coding',
+        label: formatMessage({
+          id: "".concat(_I18N_PREFIX_, ".coding"),
+          label: '动作编写'
+        })
+      }];
+    }
+    return [];
+  }, [category]);
+  useUpdateEffect(function () {
+    if (activeKey) {
+      var action = get(activeKey);
+      editorRef.current.editor.setValue(action.code);
+    }
+  }, [activeKey]);
+  useUpdateEffect(function () {
+    setAll(event === null || event === void 0 ? void 0 : event.actionPool);
+  }, [event]);
+  var handleEditorValueChange = useRef(debounce(function (code) {
+    if (latestActiveKey.current) {
+      var action = get(latestActiveKey.current);
+      action.code = code;
+    }
+  }, 400));
+  var handleOptionClick = useMemoizedFn(function (key) {
+    setActiveKey(key);
+    var action;
+    if (actionPool.has(key)) {
+      action = get(key);
+    } else {
+      var code = category === 'custom' ? event.func || defaultCode : JSON.stringify(_objectSpread({
+        moduleCode: module.moduleCode
+      }, JSON.parse(_DEFAULT_JSON_CODE_)), null, '\t');
+      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 = category === 'custom' ? event.func || defaultCode : JSON.stringify(_objectSpread({
+        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 = useMemoizedFn(function () {
+    onClose();
+    reset();
+    setCategory('page-action');
+    setActiveKey(void 0);
+    setSearchValue(void 0);
+  });
+  var handleComfirm = useMemoizedFn(function () {
+    onComfirm(Array.from(actionPool), event);
+    handleClose();
+  });
+  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: 960,
+    closable: false,
+    maskClosable: false,
+    getContainer: function getContainer() {
+      return document.getElementById('lc-design-workspace');
+    },
+    zIndex: 3000,
+    onCancel: handleClose,
+    onOk: handleComfirm
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles['lc-painter-panel-action-bind-modal-body']
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles['lc-painter-panel-action-bind-modal-body-left']
+  }, /*#__PURE__*/React.createElement("p", null, formatMessage({
+    id: "".concat(_I18N_PREFIX_, ".bind"),
+    label: '绑定动作'
+  })), /*#__PURE__*/React.createElement("div", {
+    className: styles['selector-box']
+  }, /*#__PURE__*/React.createElement("ul", {
+    className: classNames(styles['selector-box-ul'], styles['action-category'])
+  }, _ACTION_CATEGORY_.map(function (_ref4) {
+    var key = _ref4.key,
+      label = _ref4.label;
+    return /*#__PURE__*/React.createElement("li", {
+      key: key,
+      className: classNames(_defineProperty({}, styles.active, key === category)),
+      onClick: function onClick() {
+        setCategory(key);
+        setActiveKey(void 0);
+      }
+    }, label, key === category && /*#__PURE__*/React.createElement(Icon, {
+      type: "check",
+      className: styles['check-icon']
+    }));
+  })), /*#__PURE__*/React.createElement("div", {
+    className: styles['selecter-items-box']
+  }, category !== 'custom' && /*#__PURE__*/React.createElement("div", {
+    style: {
+      height: 42,
+      display: 'flex',
+      justifyContent: 'center'
+    }
+  }, /*#__PURE__*/React.createElement(Input.Search, {
+    placeholder: 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.createElement("ul", {
+    className: classNames(styles['selector-box-ul'], styles['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.createElement("li", {
+      key: key,
+      className: classNames(_defineProperty({}, styles.active, key === activeKey)),
+      onClick: function onClick() {
+        return handleOptionClick(key);
+      }
+    }, /*#__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(JsonEditor, {
+    ref: editorRef,
+    onChange: handleEditorValueChange.current
+  }) : formatMessage({
+    id: "".concat(_I18N_PREFIX_, ".noActionSelected"),
+    label: '请在右侧选择行为项'
+  }))), category === 'custom' && /*#__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.current
+  }) : formatMessage({
+    id: "".concat(_I18N_PREFIX_, ".noActionSelected"),
+    label: '请在右侧选择行为项'
+  }))))));
+};
+export default ActionBindModal;