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

package/es/lowcode/painter/Design.js

@@ -1,91 +1,36 @@
-import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
-import React, { useRef, useEffect, useState } from 'react';
-import moment from 'moment';
-import classNames from 'classnames';
-import { last, initial } from 'lodash';
-import { RawIntlProvider, getLocale, getIntl, localeInfo } from 'umi';
-import { useEventListener, useSetState, useMemoizedFn, useCreation, useSize } from 'ahooks';
-import { Select, Button, Icon, Divider, ConfigProvider, Dropdown, message } from 'luck-design/antd';
-import { cloneDeep, reverse } from 'lodash';
-import { suid } from '@luck-design-biz/base/utils';
+import React, { useRef, useEffect } from 'react';
+import { useEventListener } from 'ahooks';
 import { useLDContext } from "../engine/provider/ContextProvider";
 import Page from "../view/Page";
-import { add } from "../engine/tools/dataProcess";
-import { CELL_KEY, CELL_CLASS_NAME } from "../constants";
+import { CELL_CLASS_NAME } from "../constants";
 import styles from "./style/design.less";
-var getOperatorStyle = function getOperatorStyle(page, cellNode) {
-  var _page$getBoundingClie = page.getBoundingClientRect(),
-    pageLeft = _page$getBoundingClie.left,
-    pageTop = _page$getBoundingClie.top;
-  var _cellNode$getBounding = cellNode.getBoundingClientRect(),
-    cellNodeLeft = _cellNode$getBounding.left,
-    cellNodeTop = _cellNode$getBounding.top;
-  return {
-    left: "".concat(cellNodeLeft - pageLeft, "px"),
-    top: "".concat(cellNodeTop - pageTop, "px"),
-    width: "".concat(cellNode.offsetWidth, "px"),
-    height: "".concat(cellNode.offsetHeight, "px")
-  };
-};
 var Design = function Design() {
-  var _selectorRef$current, _localeInfo$locale2;
   var context = useLDContext();
+  var detectorRef = useRef(null);
   var selectorRef = useRef(null);
   var simulatorRef = useRef(null);
-  var size = useSize(simulatorRef);
-  var _useSetState = useSetState({
-      selector: null,
-      detector: null
-    }),
-    _useSetState2 = _slicedToArray(_useSetState, 2),
-    operatorId = _useSetState2[0],
-    setOperatorId = _useSetState2[1];
-  var _useState = useState(null),
-    _useState2 = _slicedToArray(_useState, 2),
-    langList = _useState2[0],
-    setLangList = _useState2[1];
-  var _useState3 = useState(function () {
-      return getLocale();
-    }),
-    _useState4 = _slicedToArray(_useState3, 2),
-    locale = _useState4[0],
-    setLocale = _useState4[1];
-  var _useState5 = useState(function () {
-      return getIntl(locale, true);
-    }),
-    _useState6 = _slicedToArray(_useState5, 2),
-    intl = _useState6[0],
-    setContainerIntl = _useState6[1];
-  var _useState7 = useState('pc'),
-    _useState8 = _slicedToArray(_useState7, 2),
-    activedTarget = _useState8[0],
-    setActivedTarget = _useState8[1];
+  var hoverCellRef = useRef(null);
+  var activeCellRef = useRef(null);
   useEventListener('mousemove', function (event) {
     var elem = event.target;
     var targetCell = elem.closest(".".concat(CELL_CLASS_NAME));
-    var targetCellId = targetCell === null || targetCell === void 0 ? void 0 : targetCell.id;
-    if (targetCellId && targetCellId !== operatorId.detector && targetCellId !== operatorId.selector) {
-      setOperatorId({
-        detector: targetCellId
-      });
+    if (targetCell && !targetCell.isEqualNode(hoverCellRef.current) && !targetCell.isEqualNode(activeCellRef.current)) {
+      var _id = targetCell.id;
+      hoverCellRef.current = targetCell;
       context.$publisher(context.topics.COMPONENT_HOVER, {
-        id: targetCellId
-      });
-    } else if (!targetCell || targetCellId === operatorId.selector) {
-      setOperatorId({
-        detector: null
+        id: _id,
+        cellNode: targetCell
       });
+    } else if (!targetCell || targetCell.isEqualNode(activeCellRef.current)) {
+      hoverCellRef.current = null;
       context.$publisher(context.topics.COMPONENT_HOVER, null);
     }
   }, {
     target: simulatorRef
   });
   useEventListener('mouseleave', function () {
-    if (operatorId.detector) {
-      setOperatorId({
-        detector: null
-      });
+    if (hoverCellRef.current) {
+      hoverCellRef.current = null;
       context.$publisher(context.topics.COMPONENT_HOVER, null);
     }
   }, {
@@ -94,236 +39,59 @@ var Design = function Design() {
   useEventListener('click', function (event) {
     var elem = event.target;
     var targetCell = elem.closest(".".concat(CELL_CLASS_NAME));
-    var targetCellId = targetCell === null || targetCell === void 0 ? void 0 : targetCell.id;
-    if (!targetCellId || targetCellId === operatorId.selector) return;
+    if (!targetCell || targetCell.isEqualNode(activeCellRef.current)) return;
+    activeCellRef.current = targetCell;
+    hoverCellRef.current = null;
     context.$publisher(context.topics.COMPONENT_HOVER, null);
     context.$publisher(context.topics.COMPONENT_ACTIVE, {
-      id: targetCell.id
+      id: activeCellRef.current.id,
+      cellNode: activeCellRef.current
     });
   }, {
     target: simulatorRef
   });
   useEffect(function () {
+    var setRect = function setRect(node, cellNode) {
+      node.style.left = "".concat(cellNode.offsetLeft, "px");
+      node.style.top = "".concat(cellNode.offsetTop, "px");
+      node.style.width = "".concat(cellNode.offsetWidth, "px");
+      node.style.height = "".concat(cellNode.offsetHeight, "px");
+    };
     var hcid = context.$subscriber(context.topics.COMPONENT_HOVER).on(function (payload) {
-      if (payload.id) setOperatorId({
-        detector: payload.id
-      });else setOperatorId({
-        detector: null
-      });
+      if (payload.id) {
+        detectorRef.current.style.display = 'block';
+        setRect(detectorRef.current, payload.cellNode);
+      } else {
+        detectorRef.current.style.display = 'none';
+      }
     }).watch();
     var acid = context.$subscriber(context.topics.COMPONENT_ACTIVE).on(function (payload) {
       if (payload.id) {
-        setOperatorId({
-          selector: payload.id,
-          detector: null
-        });
+        selectorRef.current.style.display = 'block';
+        setRect(selectorRef.current, payload.cellNode);
       } else {
-        setOperatorId({
-          selector: null
-        });
+        selectorRef.current.style.display = 'none';
       }
     }).watch();
     return function () {
       context.$unsubscriber(context.topics.COMPONENT_HOVER, hcid);
       context.$unsubscriber(context.topics.COMPONENT_ACTIVE, acid);
     };
-  }, [context.pageData]);
-  useEffect(function () {
-    var moid = context.$subscriber(context.topics.MODAL_OPEN).on(function () {
-      simulatorRef.current.style.setProperty('overflow', 'hidden');
-    }).watch();
-    var mcid = context.$subscriber(context.topics.MODAL_CLOSE).on(function () {
-      simulatorRef.current.style.removeProperty('overflow');
-    }).watch();
-    var laid = context.$subscriber(context.topics.LANG_SETTING_SELECT).on(function (_ref) {
-      var _langList = _ref.langList;
-      return setLangList(_langList);
-    }).watch();
-    return function () {
-      context.$unsubscriber(context.topics.MODAL_OPEN, moid);
-      context.$unsubscriber(context.topics.MODAL_CLOSE, mcid);
-      context.$unsubscriber(context.topics.LANG_SETTING_SELECT, laid);
-    };
   }, []);
-  useEffect(function () {
-    var csid = context.$subscriber(context.topics.COMPONENT_SETTING_CLICK).on(function (_ref2) {
-      var data = _ref2.data;
-      if (!operatorId.selector) {
-        message.info('请在右侧画布选择节点');
-        return;
-      }
-      if (context.componentMap.get(operatorId.selector).dom.getAttribute('name') !== 'box') {
-        message.info('该节点不支持添加子节点');
-        return;
-      }
-      var json = require("../engine/meta/".concat(data.component.toLowerCase(), ".props.default.json"));
-      var _id = "".concat(data.component.toLowerCase(), "_").concat(suid());
-      var cloneData = cloneDeep(context.pageData);
-      add(cloneData, operatorId.selector, _id, json);
-      context._setPageData(cloneData).then(function (newData) {
-        context.$publisher(context.topics.COMPONENT_APPEND, {
-          id: _id,
-          pageData: newData
-        });
-      });
-    }).watch();
-    return function () {
-      return context.$unsubscriber(context.topics.COMPONENT_SETTING_CLICK, csid);
-    };
-  }, [context.pageData]);
-  var getDomById = useMemoizedFn(function (id) {
-    return context.componentMap.get(id).dom;
-  });
-  var handleLangChange = useMemoizedFn(function (locale) {
-    if (moment !== null && moment !== void 0 && moment.locale) {
-      var _localeInfo$locale;
-      moment.locale(((_localeInfo$locale = localeInfo[locale]) === null || _localeInfo$locale === void 0 ? void 0 : _localeInfo$locale.momentLocale) || 'en');
-    }
-    setLocale(locale);
-    setContainerIntl(getIntl(locale));
-  });
-  var acticeProps = useCreation(function () {
-    if (operatorId.selector) {
-      var levelNodes = context.componentMap.get(operatorId.selector).api.getLevelNodes();
-      return {
-        props: last(levelNodes),
-        menu: /*#__PURE__*/React.createElement("div", {
-          className: styles['next-overlay-wrapper'],
-          onMouseLeave: function onMouseLeave() {
-            return handleHover();
-          }
-        }, reverse(initial(levelNodes)).map(function (m) {
-          return /*#__PURE__*/React.createElement("div", {
-            key: m.id
-          }, /*#__PURE__*/React.createElement("span", {
-            onClick: function onClick() {
-              return handleSelect(m.id);
-            },
-            onMouseOver: function onMouseOver() {
-              return handleHover(m.id);
-            }
-          }, m.name));
-        }))
-      };
-    }
-    return null;
-  }, [operatorId.selector]);
-  var handleSelect = useMemoizedFn(function (_key) {
-    context.$publisher(context.topics.COMPONENT_ACTIVE, _key ? {
-      id: _key
-    } : null);
-  });
-  var handleHover = useMemoizedFn(function (_key) {
-    context.$publisher(context.topics.COMPONENT_HOVER, _key ? {
-      id: _key
-    } : null);
-  });
-  var handleDelete = useMemoizedFn(function (_key) {
-    context.$publisher(context.topics.COMPONENT_DELETE, _key ? {
-      id: _key
-    } : null);
-  });
   return /*#__PURE__*/React.createElement("div", {
     className: styles['lc-painter-design']
   }, /*#__PURE__*/React.createElement("div", {
-    className: styles['lc-painter-design-toolbar']
-  }, /*#__PURE__*/React.createElement(Select, {
-    size: "small",
-    value: langList ? locale : undefined,
-    className: styles['i18n-selecter'],
-    style: {
-      fontSize: 12
-    },
-    onSelect: handleLangChange
-  }, langList === null || langList === void 0 ? void 0 : langList.map(function (item) {
-    return /*#__PURE__*/React.createElement(Select.Option, {
-      key: item.field,
-      value: item.field
-    }, item.title);
-  })), /*#__PURE__*/React.createElement("span", {
-    className: classNames(styles['toolbar-item'], _defineProperty({}, styles.actived, activedTarget === 'pc')),
-    onClick: function onClick() {
-      return setActivedTarget('pc');
-    }
-  }, /*#__PURE__*/React.createElement(Icon, {
-    type: "laptop"
-  })), /*#__PURE__*/React.createElement("span", {
-    className: classNames(styles['toolbar-item'], _defineProperty({}, styles.actived, activedTarget === 'mobile')),
-    onClick: function onClick() {
-      return setActivedTarget('mobile');
-    }
-  }, /*#__PURE__*/React.createElement(Icon, {
-    type: "mobile"
-  })), /*#__PURE__*/React.createElement(Divider, {
-    type: "vertical"
-  }), /*#__PURE__*/React.createElement("span", {
-    style: {
-      width: 'auto',
-      fontSize: 12
-    },
-    className: styles['toolbar-item'],
-    onClick: function onClick() {
-      context.$publisher(context.topics.COMPONENT_ACTIVE, {
-        id: CELL_KEY.PAGE_ROOT
-      });
-    }
-  }, "\u9875\u9762\u5C5E\u6027"), /*#__PURE__*/React.createElement(Divider, {
-    type: "vertical"
-  }), /*#__PURE__*/React.createElement(Button, {
-    size: "small",
-    style: {
-      fontSize: 12,
-      margin: '0 2px'
-    }
-  }, "\u9884\u89C8"), /*#__PURE__*/React.createElement(Divider, {
-    type: "vertical"
-  }), /*#__PURE__*/React.createElement(Button, {
-    size: "small",
-    type: "primary",
-    style: {
-      fontSize: 12,
-      margin: '0 0 0 2px'
-    }
-  }, "\u4FDD\u5B58")), /*#__PURE__*/React.createElement("div", {
-    className: styles['lc-painter-design-workspace']
-  }, operatorId.detector && /*#__PURE__*/React.createElement("div", {
     id: "lc-detector",
-    className: styles['lc-painter-design-detector'],
-    style: getOperatorStyle(simulatorRef.current, getDomById(operatorId.detector))
-  }), operatorId.selector && /*#__PURE__*/React.createElement("div", {
+    ref: detectorRef,
+    className: styles.detector
+  }), /*#__PURE__*/React.createElement("div", {
     id: "lc-selector",
     ref: selectorRef,
-    key: "".concat((size === null || size === void 0 ? void 0 : size.width) || 0, "-").concat((size === null || size === void 0 ? void 0 : size.height) || 0),
-    className: styles['lc-painter-design-selector'],
-    style: getOperatorStyle(simulatorRef.current, getDomById(operatorId.selector))
-  }, acticeProps && /*#__PURE__*/React.createElement("div", {
-    className: styles['lc-borders-actions'],
-    style: acticeProps.props.id === CELL_KEY.PAGE_ROOT ? {
-      top: 0
-    } : ((_selectorRef$current = selectorRef.current) === null || _selectorRef$current === void 0 ? void 0 : _selectorRef$current.offsetTop) < 23 ? {
-      bottom: '-23px'
-    } : {
-      top: '-23px'
-    }
-  }, /*#__PURE__*/React.createElement(Dropdown, {
-    overlay: acticeProps.menu,
-    placement: "bottomLeft"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "instance-node-selector"
-  }, acticeProps.props.name)), /*#__PURE__*/React.createElement("div", {
-    onClick: function onClick() {
-      return handleDelete(acticeProps.props);
-    }
-  }, /*#__PURE__*/React.createElement(Icon, {
-    type: "delete"
-  })))), /*#__PURE__*/React.createElement(ConfigProvider, {
-    locale: ((_localeInfo$locale2 = localeInfo[locale]) === null || _localeInfo$locale2 === void 0 ? void 0 : _localeInfo$locale2.antd) || {}
-  }, /*#__PURE__*/React.createElement(RawIntlProvider, {
-    value: intl
-  }, /*#__PURE__*/React.createElement(Page, {
+    className: styles.selector
+  }), /*#__PURE__*/React.createElement(Page, {
     ref: simulatorRef,
     pageCode: "mk2i87qb",
-    className: styles['lc-painter-design-simulator']
-  })))));
+    className: styles.simulator
+  }));
 };
 export default Design;

package/es/lowcode/painter/I18n.js

@@ -1,205 +1,5 @@
-import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-import _regeneratorRuntime from "@babel/runtime/helpers/esm/regeneratorRuntime";
-import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
-import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
-import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
-var _getDvaApp;
-import React, { useState } from 'react';
-import { getDvaApp } from 'umi';
-import { useAsyncEffect, useCreation, useMemoizedFn } from 'ahooks';
-import { GridTable } from 'luck-design';
-import { reduce, remove, cloneDeep, debounce } from 'lodash';
-import { Input, Button, Icon } from 'luck-design/antd';
-import { formatMessage, suid } from '@luck-design-biz/base/utils';
-import { useLDContext } from "../engine/provider/ContextProvider";
-import { readAllLang, doAddLang, doUpdateLang, doDeleteLang } from "./services/I18n";
-var Search = Input.Search;
-var _getDvaApp$_store = (_getDvaApp = getDvaApp()) === null || _getDvaApp === void 0 ? void 0 : _getDvaApp._store,
-  dispatch = _getDvaApp$_store.dispatch;
-var getLangKey = function getLangKey() {
-  return "app.lowcode.".concat(suid());
-};
-var formatDataFunc = function formatDataFunc(data) {
-  return _objectSpread(_objectSpread({}, data), reduce(data.languages, function (ret, value, key) {
-    ret[key] = value;
-    return ret;
-  }, {}));
-};
+import React from 'react';
 var I18n = function I18n() {
-  var context = useLDContext();
-  var _useState = useState([]),
-    _useState2 = _slicedToArray(_useState, 2),
-    langList = _useState2[0],
-    setLangList = _useState2[1];
-  var _useState3 = useState([]),
-    _useState4 = _slicedToArray(_useState3, 2),
-    dataSource = _useState4[0],
-    setDataSource = _useState4[1];
-  useAsyncEffect( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
-    var _langList;
-    return _regeneratorRuntime().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 = useMemoizedFn(function () {
-    var value = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-    readAllLang(_objectSpread(_objectSpread({}, 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 = useCreation(function () {
-    return {
-      width: 60,
-      getActions: function getActions() {
-        return [{
-          wanted: 'update',
-          title: /*#__PURE__*/React.createElement(Icon, {
-            type: "copy"
-          }),
-          action: function action(_data) {
-            var data = {
-              languages: reduce(langList, function (result, value) {
-                result[value.field] = _data[value.field];
-                return result;
-              }, {})
-            };
-            handleAdd(data);
-          }
-        }, {
-          wanted: 'delete',
-          title: /*#__PURE__*/React.createElement(Icon, {
-            type: "delete"
-          }),
-          confirm: {
-            title: formatMessage({
-              id: 'app.base.confirm.delete'
-            })
-          },
-          action: handleDelete
-        }];
-      }
-    };
-  }, [langList]);
-  var handleAdd = useMemoizedFn(function () {
-    var data = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-    var addItems = _objectSpread(_objectSpread({}, data), {}, {
-      langKey: getLangKey(),
-      classifyKey: '__LOWCODE__'
-    });
-    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 = useMemoizedFn(function (field, newValue, oldValue, record) {
-    doUpdateLang({}, {
-      classifyKey: '__LOWCODE__',
-      langKey: record.langKey,
-      indocno: record.indocno,
-      languages: _objectSpread(_objectSpread({}, reduce(langList, function (result, value) {
-        result[value.field] = record[value.field];
-        return result;
-      }, {})), {}, _defineProperty({}, field, newValue))
-    });
-  });
-  var handleDelete = useMemoizedFn(function (data) {
-    doDeleteLang({}, {
-      delList: [{
-        indocno: data.indocno
-      }]
-    }).then(function (_ref2) {
-      var code = _ref2.code;
-      if (code === 1) {
-        var _data = cloneDeep(dataSource);
-        remove(_data, function (n) {
-          return n.indocno === data.indocno;
-        });
-        setDataSource(_data);
-      }
-      ;
-    });
-  });
-  var handleSearch = debounce(doQuery, 300);
-  return /*#__PURE__*/React.createElement("div", {
-    style: {
-      height: '100%',
-      padding: '16px 24px'
-    }
-  }, /*#__PURE__*/React.createElement(Search, {
-    placeholder: 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.createElement(Button, {
-    type: "primary",
-    ghost: true,
-    size: "small",
-    style: {
-      margin: '16px 0'
-    },
-    onClick: function onClick() {
-      return handleAdd();
-    }
-  }, formatMessage({
-    id: 'luckda.lowcode.painter.I18n.add',
-    label: '新增文案'
-  })), /*#__PURE__*/React.createElement(GridTable, {
-    height: 480,
-    columns: langList,
-    dataSource: dataSource,
-    renderIndex: false,
-    showStatusBar: false,
-    actionsColumn: actionsColumn,
-    onValueChange: handleValueChange,
-    operates: ['add', 'update', 'delete'],
-    bordered: false
-  }));
+  return /*#__PURE__*/React.createElement("div", null, "i18n");
 };
 export default I18n;