@luck-design-biz/luckda 0.0.27 → 1.0.0-10-alpha

package/lib/lowcode/engine/tools/useCombinedRefs.js

@@ -0,0 +1,21 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = require("react");
+var _ahooks = require("ahooks");
+var useCombinedRefs = function useCombinedRefs(forwardedRef) {
+  var innerRef = (0, _react.useRef)(null);
+  (0, _ahooks.useCreation)(function () {
+    if (!forwardedRef) return;
+    if (typeof forwardedRef === 'function') {
+      forwardedRef(innerRef.current);
+    } else {
+      forwardedRef.current = innerRef.current;
+    }
+  }, [forwardedRef]);
+  return forwardedRef || innerRef;
+};
+var _default = exports.default = useCombinedRefs;

package/lib/lowcode/engine/tools/usePromiseState.js

@@ -0,0 +1,31 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = require("react");
+var _ahooks = require("ahooks");
+var usePromiseState = function usePromiseState(initialState) {
+  var _useState = (0, _react.useState)(initialState),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    state = _useState2[0],
+    setState = _useState2[1];
+  var promiseRef = (0, _react.useRef)(null);
+  var setStatePromise = (0, _react.useCallback)(function (_state) {
+    return new Promise(function (resolve) {
+      promiseRef.current = resolve;
+      setState(_state);
+    });
+  }, []);
+  (0, _ahooks.useUpdateLayoutEffect)(function () {
+    if (promiseRef.current) {
+      promiseRef.current(state);
+      promiseRef.current = null;
+    }
+  }, [state]);
+  return [state, setStatePromise];
+};
+var _default = exports.default = usePromiseState;

package/lib/lowcode/index.js

@@ -10,6 +10,12 @@ Object.defineProperty(exports, "Painter", {
     return _painter.default;
   }
 });
+Object.defineProperty(exports, "Preview", {
+  enumerable: true,
+  get: function get() {
+    return _preview.default;
+  }
+});
 Object.defineProperty(exports, "View", {
   enumerable: true,
   get: function get() {
@@ -17,4 +23,5 @@ Object.defineProperty(exports, "View", {
   }
 });
 var _painter = _interopRequireDefault(require("./painter"));
-var _view = _interopRequireDefault(require("./view"));
+var _view = _interopRequireDefault(require("./view"));
+var _preview = _interopRequireDefault(require("./preview"));

package/lib/lowcode/painter/Components.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
@@ -13,8 +14,10 @@ var _antd = require("luck-design/antd");
 var _ahooks = require("ahooks");
 var _utils = require("@luck-design-biz/base/utils");
 var _ContextProvider = require("../engine/provider/ContextProvider");
+var _core = require("@dnd-kit/core");
 var _components = _interopRequireDefault(require("./style/components.less"));
 var _componentsList = _interopRequireDefault(require("../engine/meta/components-list.json"));
+var _DragDropContext = require("./components/DragDrop/DragDropContext");
 var TabPane = _antd.Tabs.TabPane;
 var Search = _antd.Input.Search;
 var BaseCom = function BaseCom(_ref) {
@@ -36,7 +39,7 @@ var BaseCom = function BaseCom(_ref) {
     }).filter(function (group) {
       return group.components.length > 0;
     });
-  }, [_componentsList.default]);
+  }, [searchTerm]);
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
     className: _components.default['components-search']
   }, /*#__PURE__*/_react.default.createElement(Search, {
@@ -52,30 +55,53 @@ var BaseCom = function BaseCom(_ref) {
       key: group.group,
       className: _components.default['components-wrapper']
     }, /*#__PURE__*/_react.default.createElement("h3", null, group.groupName), group.components.map(function (item) {
-      return /*#__PURE__*/_react.default.createElement("div", {
+      return /*#__PURE__*/_react.default.createElement(CompItem, {
         key: item.component,
-        className: _components.default['components-item'],
-        onClick: function onClick() {
-          return onComponentClick(item);
-        }
-      }, /*#__PURE__*/_react.default.createElement("div", {
-        className: _components.default['icon-wrapper']
-      }, /*#__PURE__*/_react.default.createElement(_antd.Icon, {
-        type: item.icon || 'home'
-      })), /*#__PURE__*/_react.default.createElement("div", {
-        className: _components.default['text-content']
-      }, /*#__PURE__*/_react.default.createElement("span", null, item.name)));
+        item: item,
+        onComponentClick: onComponentClick
+      });
     }));
   })));
 };
+var CompItem = function CompItem(_ref2) {
+  var item = _ref2.item,
+    onComponentClick = _ref2.onComponentClick;
+  // console.log('CompItem', item.component);
+  var _useDraggable = (0, _core.useDraggable)({
+      id: 'comlist-' + item.component,
+      data: {
+        component: item,
+        action: _DragDropContext.Action.ADD
+      }
+    }),
+    attributes = _useDraggable.attributes,
+    listeners = _useDraggable.listeners,
+    transform = _useDraggable.transform,
+    setNodeRef = _useDraggable.setNodeRef;
+  return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({
+    ref: setNodeRef
+  }, listeners, attributes, {
+    key: item.component,
+    className: _components.default['components-item'],
+    onClick: function onClick() {
+      return onComponentClick(item);
+    }
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    className: _components.default['icon-wrapper']
+  }, /*#__PURE__*/_react.default.createElement(_antd.Icon, {
+    type: item.icon || 'home'
+  })), /*#__PURE__*/_react.default.createElement("div", {
+    className: _components.default['text-content']
+  }, /*#__PURE__*/_react.default.createElement("span", null, item.name)));
+};
 
 /**
  * 组件清单
  */
-var Components = function Components(_ref2) {
-  var _ref2$dataset = _ref2.dataset,
-    dataset = _ref2$dataset === void 0 ? 'test' : _ref2$dataset;
-  var context = (0, _ContextProvider.useLDContext)();
+var Components = function Components(_ref3) {
+  var _ref3$dataset = _ref3.dataset,
+    dataset = _ref3$dataset === void 0 ? 'test' : _ref3$dataset;
+  var context = (0, _ContextProvider.useContext)();
   var onComponentClick = (0, _ahooks.useMemoizedFn)(function (data) {
     context.$publisher(context.topics.COMPONENT_SETTING_CLICK, {
       data: data
@@ -103,10 +129,10 @@ var Components = function Components(_ref2) {
     onComponentClick: onComponentClick
   })), /*#__PURE__*/_react.default.createElement(TabPane, {
     tab: (0, _utils.formatMessage)({
-      id: 'ccm.dev.page.set.components.dataset',
-      label: '数据集字段'
+      id: 'ccm.dev.page.set.components.custom',
+      label: '自定义组件'
     }),
     key: "dataset"
-  })));
+  }, "\u656C\u8BF7\u671F\u5F85")));
 };
 var _default = exports.default = Components;

package/lib/lowcode/painter/Design.js

@@ -1,105 +1,91 @@
 "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 _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
+var _umi = require("umi");
 var _ahooks = require("ahooks");
+var _moment = _interopRequireDefault(require("moment"));
+var _antd = require("luck-design/antd");
+var _utils = require("@luck-design-biz/base/utils");
 var _ContextProvider = require("../engine/provider/ContextProvider");
+var _DesignToolbar = _interopRequireDefault(require("./DesignToolbar"));
+var _DesignOperator = _interopRequireDefault(require("./DesignOperator"));
 var _Page = _interopRequireDefault(require("../view/Page"));
-var _constants = require("../constants");
 var _design = _interopRequireDefault(require("./style/design.less"));
 var Design = function Design() {
-  var context = (0, _ContextProvider.useLDContext)();
-  var detectorRef = (0, _react.useRef)(null);
-  var selectorRef = (0, _react.useRef)(null);
+  var _localeInfo$locale;
   var simulatorRef = (0, _react.useRef)(null);
-  var hoverCellRef = (0, _react.useRef)(null);
-  var activeCellRef = (0, _react.useRef)(null);
-  (0, _ahooks.useEventListener)('mousemove', function (event) {
-    var elem = event.target;
-    var targetCell = elem.closest(".".concat(_constants.CELL_CLASS_NAME));
-    if (targetCell && !targetCell.isEqualNode(hoverCellRef.current) && !targetCell.isEqualNode(activeCellRef.current)) {
-      var _id = targetCell.id;
-      hoverCellRef.current = targetCell;
-      context.$publisher(context.topics.COMPONENT_HOVER, {
-        id: _id,
-        cellNode: targetCell
-      });
-    } else if (!targetCell || targetCell.isEqualNode(activeCellRef.current)) {
-      hoverCellRef.current = null;
-      context.$publisher(context.topics.COMPONENT_HOVER, null);
-    }
-  }, {
-    target: simulatorRef
+  var _useState = (0, _react.useState)(function () {
+      return (0, _umi.getLocale)();
+    }),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    locale = _useState2[0],
+    setLocale = _useState2[1];
+  var _useState3 = (0, _react.useState)(function () {
+      return (0, _umi.getIntl)((0, _umi.getLocale)(), true);
+    }),
+    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+    intl = _useState4[0],
+    setIntl = _useState4[1];
+  var unblock = (0, _ahooks.useMemoizedFn)(function () {
+    if ((0, _ContextProvider.getNeedPrompt)()) return confirm("".concat((0, _utils.formatMessage)({
+      id: 'app.base.operate.comfire.leave',
+      label: '离开当前页面？'
+    }), "\n").concat((0, _utils.formatMessage)({
+      id: 'app.base.operate.comfire.message.leave',
+      label: '系统可能不会保存您所做的更改。'
+    })));
+    return true;
   });
-  (0, _ahooks.useEventListener)('mouseleave', function () {
-    if (hoverCellRef.current) {
-      hoverCellRef.current = null;
-      context.$publisher(context.topics.COMPONENT_HOVER, null);
+  var handleBeforeUnload = (0, _ahooks.useMemoizedFn)(function (event) {
+    if ((0, _ContextProvider.getNeedPrompt)()) {
+      event.preventDefault();
+      event.returnValue = null;
+      return null;
     }
-  }, {
-    target: simulatorRef
-  });
-  (0, _ahooks.useEventListener)('click', function (event) {
-    var elem = event.target;
-    var targetCell = elem.closest(".".concat(_constants.CELL_CLASS_NAME));
-    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: activeCellRef.current.id,
-      cellNode: activeCellRef.current
-    });
-  }, {
-    target: simulatorRef
   });
   (0, _react.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) {
-        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) {
-        selectorRef.current.style.display = 'block';
-        setRect(selectorRef.current, payload.cellNode);
-      } else {
-        selectorRef.current.style.display = 'none';
-      }
-    }).watch();
+    window.addEventListener('beforeunload', handleBeforeUnload);
+    _umi.history.block(function () {
+      return unblock();
+    });
     return function () {
-      context.$unsubscriber(context.topics.COMPONENT_HOVER, hcid);
-      context.$unsubscriber(context.topics.COMPONENT_ACTIVE, acid);
+      window.removeEventListener('beforeunload', handleBeforeUnload);
+      _umi.history.block(function () {
+        return true;
+      });
     };
   }, []);
+  var handleLangChange = (0, _ahooks.useMemoizedFn)(function (_locale) {
+    if (_moment.default !== null && _moment.default !== void 0 && _moment.default.locale) {
+      var _localeInfo$_locale;
+      _moment.default.locale(((_localeInfo$_locale = _umi.localeInfo[_locale]) === null || _localeInfo$_locale === void 0 ? void 0 : _localeInfo$_locale.momentLocale) || 'en');
+    }
+    setLocale(_locale);
+    setIntl((0, _umi.getIntl)(_locale));
+  });
   return /*#__PURE__*/_react.default.createElement("div", {
     className: _design.default['lc-painter-design']
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    id: "lc-detector",
-    ref: detectorRef,
-    className: _design.default.detector
+  }, /*#__PURE__*/_react.default.createElement(_DesignToolbar.default, {
+    locale: locale,
+    onLangChange: handleLangChange
   }), /*#__PURE__*/_react.default.createElement("div", {
-    id: "lc-selector",
-    ref: selectorRef,
-    className: _design.default.selector
-  }), /*#__PURE__*/_react.default.createElement(_Page.default, {
+    className: _design.default['lc-painter-design-workspace']
+  }, /*#__PURE__*/_react.default.createElement(_DesignOperator.default, {
+    canvas: simulatorRef
+  }), /*#__PURE__*/_react.default.createElement(_antd.ConfigProvider, {
+    locale: ((_localeInfo$locale = _umi.localeInfo[locale]) === null || _localeInfo$locale === void 0 ? void 0 : _localeInfo$locale.antd) || {}
+  }, /*#__PURE__*/_react.default.createElement(_umi.RawIntlProvider, {
+    value: intl
+  }, /*#__PURE__*/_react.default.createElement(_Page.default, {
     ref: simulatorRef,
-    pageCode: "mk2i87qb",
-    className: _design.default.simulator
-  }));
+    className: _design.default['lc-painter-design-simulator']
+  })))));
 };
 var _default = exports.default = Design;