@luck-design-biz/luckda 0.0.25-9 → 0.0.26

package/lib/lowcode/painter/I18n.js

@@ -1,213 +1,12 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _regeneratorRuntime2 = _interopRequireDefault(require("@babel/runtime/helpers/regeneratorRuntime"));
-var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-var _objectSpread3 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
-var _react = _interopRequireWildcard(require("react"));
-var _umi = require("umi");
-var _ahooks = require("ahooks");
-var _luckDesign = require("luck-design");
-var _lodash = require("lodash");
-var _antd = require("luck-design/antd");
-var _utils = require("@luck-design-biz/base/utils");
-var _ContextProvider = require("../engine/provider/ContextProvider");
-var _I18n = require("./services/I18n");
-var _getDvaApp;
-var Search = _antd.Input.Search;
-var _getDvaApp$_store = (_getDvaApp = (0, _umi.getDvaApp)()) === null || _getDvaApp === void 0 ? void 0 : _getDvaApp._store,
-  dispatch = _getDvaApp$_store.dispatch;
-var getLangKey = function getLangKey() {
-  return "app.lowcode.".concat((0, _utils.suid)());
-};
-var formatDataFunc = function formatDataFunc(data) {
-  return (0, _objectSpread3.default)((0, _objectSpread3.default)({}, data), (0, _lodash.reduce)(data.languages, function (ret, value, key) {
-    ret[key] = value;
-    return ret;
-  }, {}));
-};
+var _react = _interopRequireDefault(require("react"));
 var I18n = function I18n() {
-  var context = (0, _ContextProvider.useContext)();
-  var _useState = (0, _react.useState)([]),
-    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-    langList = _useState2[0],
-    setLangList = _useState2[1];
-  var _useState3 = (0, _react.useState)([]),
-    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
-    dataSource = _useState4[0],
-    setDataSource = _useState4[1];
-  (0, _ahooks.useAsyncEffect)( /*#__PURE__*/(0, _asyncToGenerator2.default)( /*#__PURE__*/(0, _regeneratorRuntime2.default)().mark(function _callee() {
-    var _langList;
-    return (0, _regeneratorRuntime2.default)().wrap(function _callee$(_context) {
-      while (1) switch (_context.prev = _context.next) {
-        case 0:
-          _context.next = 2;
-          return dispatch({
-            type: 'global/getDatadic',
-            payload: {
-              snamealias: 'base_lang'
-            },
-            format: function format(list, detail) {
-              return list.map(function (id) {
-                return {
-                  title: detail[id].sname,
-                  field: detail[id].sfactvalue,
-                  editable: true,
-                  filter: false
-                };
-              });
-            }
-          });
-        case 2:
-          _langList = _context.sent;
-          setLangList(_langList);
-          context.$publisher(context.topics.LANG_SETTING_SELECT, {
-            langList: _langList
-          });
-          doQuery();
-        case 6:
-        case "end":
-          return _context.stop();
-      }
-    }, _callee);
-  })), []);
-  var doQuery = (0, _ahooks.useMemoizedFn)(function () {
-    var value = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-    (0, _I18n.readAllLang)((0, _objectSpread3.default)((0, _objectSpread3.default)({}, value), {}, {
-      classifyKey: '__LOWCODE__'
-    })).then(function (res) {
-      var code = res.code,
-        list = res.list,
-        detail = res.detail;
-      if (code === 1) setDataSource(list.map(function (id) {
-        return formatDataFunc(detail[id]);
-      }));
-    });
-  });
-  var actionsColumn = (0, _ahooks.useCreation)(function () {
-    return {
-      width: 60,
-      getActions: function getActions() {
-        return [{
-          wanted: 'update',
-          title: /*#__PURE__*/_react.default.createElement(_antd.Icon, {
-            type: "copy"
-          }),
-          action: function action(_data) {
-            var data = {
-              languages: (0, _lodash.reduce)(langList, function (result, value) {
-                result[value.field] = _data[value.field];
-                return result;
-              }, {})
-            };
-            handleAdd(data);
-          }
-        }, {
-          wanted: 'delete',
-          title: /*#__PURE__*/_react.default.createElement(_antd.Icon, {
-            type: "delete"
-          }),
-          confirm: {
-            title: (0, _utils.formatMessage)({
-              id: 'app.base.confirm.delete'
-            })
-          },
-          action: handleDelete
-        }];
-      }
-    };
-  }, [langList]);
-  var handleAdd = (0, _ahooks.useMemoizedFn)(function () {
-    var data = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-    var addItems = (0, _objectSpread3.default)((0, _objectSpread3.default)({}, data), {}, {
-      langKey: getLangKey(),
-      classifyKey: '__LOWCODE__'
-    });
-    (0, _I18n.doAddLang)({}, addItems).then(function (res) {
-      var code = res.code,
-        list = res.list,
-        detail = res.detail;
-      if (code === 1) setDataSource([formatDataFunc(detail[list[0]])].concat(dataSource));
-    });
-  });
-  var handleValueChange = (0, _ahooks.useMemoizedFn)(function (field, newValue, oldValue, record) {
-    (0, _I18n.doUpdateLang)({}, {
-      classifyKey: '__LOWCODE__',
-      langKey: record.langKey,
-      indocno: record.indocno,
-      languages: (0, _objectSpread3.default)((0, _objectSpread3.default)({}, (0, _lodash.reduce)(langList, function (result, value) {
-        result[value.field] = record[value.field];
-        return result;
-      }, {})), {}, (0, _defineProperty2.default)({}, field, newValue))
-    });
-  });
-  var handleDelete = (0, _ahooks.useMemoizedFn)(function (data) {
-    (0, _I18n.doDeleteLang)({}, {
-      delList: [{
-        indocno: data.indocno
-      }]
-    }).then(function (_ref2) {
-      var code = _ref2.code;
-      if (code === 1) {
-        var _data = (0, _lodash.cloneDeep)(dataSource);
-        (0, _lodash.remove)(_data, function (n) {
-          return n.indocno === data.indocno;
-        });
-        setDataSource(_data);
-      }
-      ;
-    });
-  });
-  var handleSearch = (0, _lodash.debounce)(doQuery, 300);
-  return /*#__PURE__*/_react.default.createElement("div", {
-    style: {
-      height: '100%',
-      padding: '16px 24px'
-    }
-  }, /*#__PURE__*/_react.default.createElement(Search, {
-    placeholder: (0, _utils.formatMessage)({
-      id: 'luckda.lowcode.painter.I18n.search',
-      label: '搜索文案'
-    }),
-    onChange: function onChange(e) {
-      return handleSearch({
-        value: e.target.value
-      });
-    },
-    style: {
-      width: '100%'
-    },
-    allowClear: true
-  }), /*#__PURE__*/_react.default.createElement(_antd.Button, {
-    type: "primary",
-    ghost: true,
-    size: "small",
-    style: {
-      margin: '16px 0'
-    },
-    onClick: function onClick() {
-      return handleAdd();
-    }
-  }, (0, _utils.formatMessage)({
-    id: 'luckda.lowcode.painter.I18n.add',
-    label: '新增文案'
-  })), /*#__PURE__*/_react.default.createElement(_luckDesign.GridTable, {
-    height: 480,
-    columns: langList,
-    dataSource: dataSource,
-    renderIndex: false,
-    showStatusBar: false,
-    actionsColumn: actionsColumn,
-    onValueChange: handleValueChange,
-    operates: ['add', 'update', 'delete'],
-    bordered: false
-  }));
+  return /*#__PURE__*/_react.default.createElement("div", null, "i18n");
 };
 var _default = exports.default = I18n;

package/lib/lowcode/painter/Outline.js

@@ -20,14 +20,15 @@ var _ContextProvider = require("../engine/provider/ContextProvider");
 var _constants = require("../constants");
 var _dataProcess = require("../engine/tools/dataProcess");
 var _outline = _interopRequireDefault(require("./style/outline.less"));
-var _TreeEditor = _interopRequireDefault(require("./components/TreeEditor"));
 var _excluded = ["props", "children"];
 var TreeNode = _antd.Tree.TreeNode;
-var Outline = function Outline(_ref) {
-  var open = _ref.open;
+var PAGE_CELL = [_constants.CELL_KEY.PAGE_HEADER, _constants.CELL_KEY.PAGE_CONTENT, _constants.CELL_KEY.PAGE_FOOTER];
+var Outline = function Outline() {
+  var modalTreeRef = (0, _react.useRef)();
+  var pageTreeRef = (0, _react.useRef)();
+  var openModal = (0, _react.useRef)(void 0);
   var clickBySelf = (0, _react.useRef)(false);
-  var ctx = (0, _ContextProvider.useContext)();
-  var pageData = (0, _ContextProvider.useGet)();
+  var context = (0, _ContextProvider.useLDContext)();
   var _useState = (0, _react.useState)(null),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     pageAndModal = _useState2[0],
@@ -44,50 +45,43 @@ var Outline = function Outline(_ref) {
     _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
     pageExpandedKeys = _useState8[0],
     setPageExpandedKeys = _useState8[1];
-  var latestModalExpandedKeysRef = (0, _ahooks.useLatest)(modalExpandedKeys);
-  var lastPageExpandedKeysRef = (0, _ahooks.useLatest)(pageExpandedKeys);
   (0, _react.useEffect)(function () {
-    var _id = ctx.$subscriber(ctx.topics.COMPONENT_ACTIVE).on(function (payload) {
-      if (!(0, _lodash.isString)(payload.target)) {
-        setSelectedKey(null);
-        return;
-      }
-      setSelectedKey(payload.target);
+    var _id = context.$subscriber(context.topics.COMPONENT_ACTIVE).on(function (payload) {
+      setSelectedKey(payload.id);
       if (clickBySelf.current) {
         clickBySelf.current = false;
         return;
       }
-      var _split = (0, _lodash.split)((0, _dataProcess.getPathById)(pageData, payload.target), '/'),
-        _split2 = (0, _slicedToArray2.default)(_split, 1),
-        _root = _split2[0];
-      if (!_constants.LC_BUILDIN_UNIT_KEY_LIST.includes(_root)) {
-        setModalExpandedKeys((0, _lodash.uniq)([].concat((0, _toConsumableArray2.default)(latestModalExpandedKeysRef.current), (0, _toConsumableArray2.default)((0, _lodash.split)((0, _dataProcess.getPathById)(pageData, payload.target), '/')))));
-      } else {
-        setPageExpandedKeys((0, _lodash.uniq)([].concat((0, _toConsumableArray2.default)(lastPageExpandedKeysRef.current), (0, _toConsumableArray2.default)((0, _lodash.split)((0, _dataProcess.getPathById)(pageData, payload.target), '/')))));
-      }
+      setModalExpandedKeys((0, _lodash.uniq)([].concat((0, _toConsumableArray2.default)((openModal.current ? modalTreeRef : pageTreeRef).current.props.expandedKeys), (0, _toConsumableArray2.default)((0, _lodash.split)((0, _dataProcess.getPathById)(context.pageData, payload.id), '/')))));
     }).watch();
     return function () {
-      ctx.$unsubscriber(ctx.topics.COMPONENT_ACTIVE, _id);
+      context.$unsubscriber(context.topics.COMPONENT_ACTIVE, _id);
     };
-  }, [pageData]);
-  var handleSelect = (0, _ahooks.useMemoizedFn)(function (_key) {
+  }, []);
+  var handleSelect = function handleSelect(_key) {
     clickBySelf.current = true;
-    ctx.$publisher(ctx.topics.COMPONENT_ACTIVE, _key ? {
-      target: _key
+    context.$publisher(context.topics.COMPONENT_ACTIVE, _key ? {
+      id: _key,
+      cellNode: context.componentMap.get(_key).dom
     } : null);
+  };
+  var handleOpenModal = (0, _ahooks.useMemoizedFn)(function (_key) {
+    var _comp = context.componentMap.get(_key);
+    var _prevComp = openModal.current ? context.componentMap.get(openModal.current) : null;
+    _prevComp === null || _prevComp === void 0 || _prevComp.api.doClose();
+    _comp.api.doOpen();
+    openModal.current = _key;
   });
-  var render = (0, _ahooks.useMemoizedFn)(function (_ref2) {
-    var props = _ref2.props,
-      children = _ref2.children,
-      childrenMap = (0, _objectWithoutProperties2.default)(_ref2, _excluded);
+  var render = (0, _ahooks.useMemoizedFn)(function (_ref) {
+    var props = _ref.props,
+      children = _ref.children,
+      childrenMap = (0, _objectWithoutProperties2.default)(_ref, _excluded);
     if (props) {
       return /*#__PURE__*/_react.default.createElement(TreeNode, {
         icon: /*#__PURE__*/_react.default.createElement(_antd.Icon, {
           type: "layout"
         }),
-        title: /*#__PURE__*/_react.default.createElement(_TreeEditor.default, {
-          item: props
-        }),
+        title: props.label,
         key: props.id
       }, (children === null || children === void 0 ? void 0 : children.length) && children.map(function (_id) {
         return render(childrenMap[_id]);
@@ -98,12 +92,9 @@ var Outline = function Outline(_ref) {
     });
   });
   (0, _ahooks.useDeepCompareLayoutEffect)(function () {
-    if (!pageData) {
-      return;
-    }
-    var _reduce = (0, _lodash.reduce)(pageData.children, function (result, _id) {
-        var resultKey = _constants.LC_BUILDIN_UNIT_KEY_LIST.includes(_id) ? 'page' : 'modal';
-        result[resultKey][_id] = pageData[_id];
+    var _reduce = (0, _lodash.reduce)(context.pageData.children, function (result, _id) {
+        var resultKey = PAGE_CELL.includes(_id) ? 'page' : 'modal';
+        result[resultKey][_id] = context.pageData[_id];
         if (!result[resultKey].children) {
           result[resultKey].children = [];
         }
@@ -119,13 +110,13 @@ var Outline = function Outline(_ref) {
       page: render(page),
       modal: render(modal)
     });
-  }, [pageData]);
+  }, [context.pageData]);
   return /*#__PURE__*/_react.default.createElement("div", {
     className: _outline.default['lc-painter-outline']
   }, /*#__PURE__*/_react.default.createElement("div", {
-    className: (0, _classnames.default)(_outline.default['page-node'], (0, _defineProperty2.default)({}, _outline.default['page-node-active'], selectedKey === _constants.LC_BUILDIN_UNIT_KEY.PAGE_ROOT)),
+    className: (0, _classnames.default)(_outline.default['page-node'], (0, _defineProperty2.default)({}, _outline.default['page-node-active'], selectedKey === _constants.CELL_KEY.PAGE_ROOT)),
     onClick: function onClick() {
-      return handleSelect(_constants.LC_BUILDIN_UNIT_KEY.PAGE_ROOT);
+      return handleSelect(_constants.CELL_KEY.PAGE_ROOT);
     }
   }, /*#__PURE__*/_react.default.createElement(_antd.Icon, {
     type: "layout"
@@ -141,7 +132,7 @@ var Outline = function Outline(_ref) {
     type: "inner",
     hoverable: true,
     title: (0, _utils.formatMessage)({
-      id: 'luckda.lowcode.modal',
+      id: 'luckda.lowcode.model',
       label: '模态视图层'
     }),
     style: {
@@ -151,6 +142,7 @@ var Outline = function Outline(_ref) {
       padding: 0
     }
   }, /*#__PURE__*/_react.default.createElement(_antd.Tree, {
+    ref: modalTreeRef,
     showLine: true,
     showIcon: true,
     blockNode: true,
@@ -158,51 +150,41 @@ var Outline = function Outline(_ref) {
       type: "down"
     }),
     selectedKeys: [selectedKey],
-    onSelect: function onSelect(_ref3, _ref4) {
-      var _ref5 = (0, _slicedToArray2.default)(_ref3, 1),
-        _key = _ref5[0];
-      var selected = _ref4.selected,
-        node = _ref4.node;
+    onSelect: function onSelect(_ref2, _ref3) {
+      var _ref4 = (0, _slicedToArray2.default)(_ref2, 1),
+        _key = _ref4[0];
+      var selected = _ref3.selected,
+        node = _ref3.node;
       if (selected && node.props.pos.split('-').length === 2) {
-        // 选中节点是模态视图，则打开模态视图组件
-        ctx.$publisher(ctx.topics.COMPONENT_MODAL_TOGGLE, {
-          toggle: true,
-          id: _key
-        });
+        handleOpenModal(_key);
         handleSelect(_key);
       } else if (!selected && node.props.pos.split('-').length === 2) {
-        // 取消选中节点是模态视图，则关闭模态视图
-        ctx.$publisher(ctx.topics.COMPONENT_MODAL_TOGGLE, {
-          toggle: false,
-          id: _key
-        });
+        var _comp = context.componentMap.get(openModal.current);
+        _comp.api.doClose();
+        openModal.current = void 0;
         handleSelect(null);
       } else {
-        // 选中节点是模态视图下的子组件，则打开该组件的模态视图组件
         handleSelect(node.props.eventKey);
-        var _split3 = (0, _lodash.split)((0, _dataProcess.getPathById)(pageData, node.props.eventKey), '/'),
-          _split4 = (0, _slicedToArray2.default)(_split3, 1),
-          parentModal = _split4[0];
-        ctx.$publisher(ctx.topics.COMPONENT_MODAL_TOGGLE, {
-          toggle: true,
-          id: parentModal
-        });
+        var _split = (0, _lodash.split)((0, _dataProcess.getPathById)(context.pageData, node.props.eventKey), '/'),
+          _split2 = (0, _slicedToArray2.default)(_split, 1),
+          parentModal = _split2[0];
+        if (!openModal.current || openModal.current !== parentModal) {
+          handleOpenModal(parentModal);
+        }
       }
     },
     expandedKeys: modalExpandedKeys,
-    onExpand: function onExpand(_keys, _ref6) {
-      var expanded = _ref6.expanded,
-        node = _ref6.node;
+    onExpand: function onExpand(_keys, _ref5) {
+      var expanded = _ref5.expanded,
+        node = _ref5.node;
       if (expanded && node.props.pos.split('-').length === 2) {
         handleSelect(null);
-        ctx.$publisher(ctx.topics.COMPONENT_MODAL_TOGGLE, {
-          toggle: true,
-          id: node.props.eventKey
-        });
+        handleOpenModal(node.props.eventKey);
       }
       setModalExpandedKeys(_keys);
     }
-  }, pageAndModal === null || pageAndModal === void 0 ? void 0 : pageAndModal.modal)), open && /*#__PURE__*/_react.default.createElement(_antd.Tree, {
+  }, pageAndModal === null || pageAndModal === void 0 ? void 0 : pageAndModal.modal)), /*#__PURE__*/_react.default.createElement(_antd.Tree, {
+    ref: pageTreeRef,
     showLine: true,
     showIcon: true,
     blockNode: true,
@@ -210,13 +192,15 @@ var Outline = function Outline(_ref) {
       type: "down"
     }),
     selectedKeys: [selectedKey],
-    onSelect: function onSelect(_ref7, _ref8) {
-      var _ref9 = (0, _slicedToArray2.default)(_ref7, 1),
-        _key = _ref9[0];
-      var node = _ref8.node;
-      ctx.$publisher(ctx.topics.COMPONENT_MODAL_TOGGLE, {
-        toggle: false
-      });
+    onSelect: function onSelect(_ref6, _ref7) {
+      var _ref8 = (0, _slicedToArray2.default)(_ref6, 1),
+        _key = _ref8[0];
+      var node = _ref7.node;
+      if (openModal.current) {
+        var _prevComp = context.componentMap.get(openModal.current);
+        _prevComp.api.doClose();
+        openModal.current = void 0;
+      }
       handleSelect(node.props.eventKey);
     },
     expandedKeys: pageExpandedKeys,