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

package/es/lowcode/view/Canvas.js

@@ -1,23 +1,22 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
 import _regeneratorRuntime from "@babel/runtime/helpers/esm/regeneratorRuntime";
 import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
-var _excluded = ["props", "children"],
-  _excluded2 = ["id", "component", "name", "desc", "icon", "group", "groupName", "order"];
+var _excluded = ["props", "children"];
 import React, { useRef, useState } from 'react';
 import { dynamic } from 'umi';
 import { useMemoizedFn, useDeepCompareLayoutEffect } from 'ahooks';
-import { reduce, upperFirst } from 'lodash';
-import { useLDContext } from "../engine/provider/ContextProvider";
-import Box from "./lc-components/Box";
+import { reduce } from 'lodash';
+import Wrapper from "./lc-components/Wrapper";
 import { CELL_KEY } from "../constants";
 import styles from "./style/canvas.less";
 var PAGE_CELL = [CELL_KEY.PAGE_HEADER, CELL_KEY.PAGE_CONTENT, CELL_KEY.PAGE_FOOTER];
 var Canvas = function Canvas(_ref) {
   var dataSource = _ref.dataSource;
-  var dynamicCompMap = useRef({});
-  var context = useLDContext();
+  console.log('dataSource', dataSource);
+  var headerRef = useRef();
+  var contentRef = useRef();
+  var footerRef = useRef();
   var _useState = useState(null),
     _useState2 = _slicedToArray(_useState, 2),
     header = _useState2[0],
@@ -39,49 +38,35 @@ var Canvas = function Canvas(_ref) {
       children = _ref2.children,
       childrenMap = _objectWithoutProperties(_ref2, _excluded);
     if (props && !PAGE_CELL.includes(props.id)) {
-      var id = props.id,
-        component = props.component,
-        name = props.name,
-        desc = props.desc,
-        icon = props.icon,
-        group = props.group,
-        groupName = props.groupName,
-        order = props.order,
-        rest = _objectWithoutProperties(props, _excluded2);
-      if (!dynamicCompMap.current[component]) {
-        dynamicCompMap.current[component] = dynamic({
-          loader: function () {
-            var _loader = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
-              var _runtime, _yield$import, _Comp;
-              return _regeneratorRuntime().wrap(function _callee$(_context) {
-                while (1) switch (_context.prev = _context.next) {
-                  case 0:
-                    _runtime = upperFirst(context.runtime);
-                    _context.next = 3;
-                    return import("./lc-components/".concat(component, "/Function").concat(_runtime));
-                  case 3:
-                    _yield$import = _context.sent;
-                    _Comp = _yield$import.default;
-                    return _context.abrupt("return", _Comp);
-                  case 6:
-                  case "end":
-                    return _context.stop();
-                }
-              }, _callee);
-            }));
-            function loader() {
-              return _loader.apply(this, arguments);
-            }
-            return loader;
-          }()
-        });
-      }
-      var Comp = dynamicCompMap.current[component];
-      return /*#__PURE__*/React.createElement(Comp, _extends({
-        key: id,
-        id: id,
-        context: context
-      }, rest), (children || []).map(function (_id) {
+      var Comp = dynamic({
+        loader: function () {
+          var _loader = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
+            var _yield$import, _Comp;
+            return _regeneratorRuntime().wrap(function _callee$(_context) {
+              while (1) switch (_context.prev = _context.next) {
+                case 0:
+                  _context.next = 2;
+                  return import("./lc-components/".concat(props.type));
+                case 2:
+                  _yield$import = _context.sent;
+                  _Comp = _yield$import.default;
+                  return _context.abrupt("return", _Comp);
+                case 5:
+                case "end":
+                  return _context.stop();
+              }
+            }, _callee);
+          }));
+          function loader() {
+            return _loader.apply(this, arguments);
+          }
+          return loader;
+        }()
+      });
+      return /*#__PURE__*/React.createElement(Comp, {
+        id: props.id,
+        lcdata: props
+      }, (children || []).map(function (_id) {
         return render(childrenMap[_id]);
       }));
     }
@@ -114,30 +99,37 @@ var Canvas = function Canvas(_ref) {
   return /*#__PURE__*/React.createElement("div", {
     id: "page-canvas",
     className: styles['lc-view-canvas']
-  }, /*#__PURE__*/React.createElement(Box, {
-    key: CELL_KEY.PAGE_HEADER,
+  }, /*#__PURE__*/React.createElement(Wrapper, {
     id: CELL_KEY.PAGE_HEADER,
+    getTargetDom: function getTargetDom() {
+      return headerRef.current;
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    ref: headerRef,
     style: {
       width: '100%',
       height: 120,
       backgroundColor: '#d3f261'
     }
-  }, header), /*#__PURE__*/React.createElement(Box, {
-    key: CELL_KEY.PAGE_CONTENT,
+  }, header)), /*#__PURE__*/React.createElement(Wrapper, {
     id: CELL_KEY.PAGE_CONTENT,
-    style: {
-      width: '100%',
-      height: 'calc(100% - 120px)',
-      backgroundColor: 'transparent'
+    getTargetDom: function getTargetDom() {
+      return contentRef.current;
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    ref: contentRef
+  }, content)), /*#__PURE__*/React.createElement(Wrapper, {
+    id: CELL_KEY.PAGE_HEADER,
+    getTargetDom: function getTargetDom() {
+      return footerRef.current;
     }
-  }, content), /*#__PURE__*/React.createElement(Box, {
-    key: CELL_KEY.PAGE_FOOTER,
-    id: CELL_KEY.PAGE_FOOTER,
+  }, /*#__PURE__*/React.createElement("div", {
+    ref: footerRef,
     style: {
       width: '100%',
       height: 80,
       backgroundColor: '#69c0ff'
     }
-  }, footer), modal);
+  }, footer)), modal);
 };
 export default Canvas;

package/es/lowcode/view/Page.js

@@ -10,7 +10,7 @@ import { useLDContext } from "../engine/provider/ContextProvider";
 import Loading from "./Loading";
 import Wrapper from "./lc-components/Wrapper";
 import Canvas from "./Canvas";
-import { decompress } from "../engine/tools/dataProcess";
+import { decompress, compress } from "../engine/tools/dataProcess";
 import { CELL_KEY } from "../constants";
 import styles from "./style/page.less";
 var mock = function mock(_pageCode) {
@@ -21,202 +21,6 @@ var mock = function mock(_pageCode) {
     }, 400);
   });
 };
-var d = {
-  props: {
-    id: 'page_root',
-    group: 'build-in',
-    component: 'Page',
-    name: '页面',
-    hasHeder: true,
-    hasFooter: true
-  },
-  children: ['page_header', 'page_content', 'page_footer', 'dialog_ms2o9hj0', 'drawer_ou79jw8c'],
-  page_header: {
-    props: {
-      id: 'page_header',
-      parentId: 'page_root',
-      group: 'build-in',
-      component: 'PageHeader',
-      name: '页面头',
-      fixed: false
-    },
-    children: ['text_kju78bvs'],
-    text_kju78bvs: {
-      props: {
-        id: 'text_kju78bvs',
-        parentId: 'page_header',
-        group: 'basic',
-        component: 'Text',
-        name: '文本'
-      }
-    }
-  },
-  page_content: {
-    props: {
-      id: 'page_content',
-      parentId: 'page_root',
-      group: 'build-in',
-      component: 'PageContent',
-      name: '页面内容'
-    },
-    children: ['layout_OL4gi6mr'],
-    layout_OL4gi6mr: {
-      props: {
-        component: 'Layout',
-        name: '布局容器',
-        icon: 'icon-layout',
-        group: 'container',
-        groupName: '布局',
-        desc: '布局容器是一种提供列比例、列间距、行间距和样式等配置选项的元素，用于创建灵活的页面布局。它使用户能够轻松组织和排列组件，并实现各种复杂的布局需求。',
-        order: 1,
-        style: {},
-        columnRatio: '12:3:9',
-        columnSpacing: 16,
-        lineSpacing: 16,
-        id: 'layout_OL4gi6mr'
-      },
-      children: ['box_xFuKLKBI', 'box_jeVHiHZV', 'box_5KLx4rGb'],
-      box_xFuKLKBI: {
-        props: {
-          component: 'Box',
-          name: '容器',
-          desc: '盒子是一个用于包裹其他组件的包装器，是一个单纯的容器组件，可以对其设置样式达到想要的效果。',
-          icon: 'icon-box',
-          group: 'container',
-          groupName: '布局',
-          order: 3,
-          style: {
-            gridColumn: 'span 12',
-            height: 'auto'
-          },
-          id: 'box_xFuKLKBI'
-        },
-        children: ['button_okj2n87x', 'text_nmu9wqqw'],
-        button_okj2n87x: {
-          props: {
-            id: 'button_okj2n87x',
-            parentId: 'box_ihj2n8cv',
-            group: 'basic',
-            component: 'Button',
-            name: '按钮',
-            title: '这是一个按钮',
-            type: 'primary',
-            size: 'large'
-          }
-        },
-        text_nmu9wqqw: {
-          props: {
-            id: 'text_nmu9wqqw',
-            parentId: 'box_ihj2n8cv',
-            group: 'basic',
-            component: 'Text',
-            name: '文本'
-          }
-        }
-      },
-      box_jeVHiHZV: {
-        props: {
-          component: 'Box',
-          name: '容器',
-          desc: '盒子是一个用于包裹其他组件的包装器，是一个单纯的容器组件，可以对其设置样式达到想要的效果。',
-          icon: 'icon-box',
-          group: 'container',
-          groupName: '布局',
-          order: 3,
-          style: {
-            gridColumn: 'span 3',
-            height: '60px'
-          },
-          id: 'box_jeVHiHZV'
-        },
-        children: ['tree_hh2b87qs'],
-        tree_hh2b87qs: {
-          props: {
-            id: 'tree_hh2b87qs',
-            parentId: 'box_diam9dis',
-            group: 'advance',
-            component: 'Tree',
-            name: '树'
-          }
-        }
-      },
-      box_5KLx4rGb: {
-        props: {
-          component: 'Box',
-          name: '容器',
-          desc: '盒子是一个用于包裹其他组件的包装器，是一个单纯的容器组件，可以对其设置样式达到想要的效果。',
-          icon: 'icon-box',
-          group: 'container',
-          groupName: '布局',
-          order: 3,
-          style: {
-            gridColumn: 'span 9',
-            height: '360px'
-          },
-          id: 'box_5KLx4rGb'
-        },
-        children: ['table_diam9dis'],
-        table_diam9dis: {
-          props: {
-            id: 'table_diam9dis',
-            parentId: 'box_s0j3j08t',
-            group: 'advance',
-            component: 'Table',
-            name: '列表',
-            dataset: 'dsWmsMaterialsData'
-          }
-        }
-      }
-    }
-  },
-  page_footer: {
-    props: {
-      id: 'page_footer',
-      parentId: 'page_root',
-      group: 'build-in',
-      component: 'PageFooter',
-      name: '页面尾'
-    }
-  },
-  dialog_ms2o9hj0: {
-    props: {
-      id: 'dialog_ms2o9hj0',
-      parentId: 'page_root',
-      group: 'basic',
-      component: 'Dialog',
-      name: '对话框'
-    },
-    children: ['form_gyusku8j'],
-    form_gyusku8j: {
-      props: {
-        id: 'form_gyusku8j',
-        parentId: 'dialog_ms2o9hj0',
-        group: 'advance',
-        component: 'Form',
-        name: '表单'
-      }
-    }
-  },
-  drawer_ou79jw8c: {
-    props: {
-      id: 'drawer_ou79jw8c',
-      parentId: 'page_root',
-      group: 'basic',
-      component: 'Drawer',
-      name: '抽屉'
-    },
-    children: ['form_jknbjkun'],
-    form_jknbjkun: {
-      props: {
-        id: 'form_jknbjkun',
-        parentId: 'drawer_ou79jw8c',
-        group: 'advance',
-        component: 'Form',
-        name: '表单'
-      }
-    }
-  }
-};
 var LCPage = /*#__PURE__*/forwardRef(function (_ref2, ref) {
   var pageCode = _ref2.pageCode,
     className = _ref2.className,
@@ -231,8 +35,7 @@ var LCPage = /*#__PURE__*/forwardRef(function (_ref2, ref) {
   useEffect(function () {
     context._pageCode.current = pageCode;
     mock(pageCode).then(function (pageData) {
-      // context._setPageData(decompress(pageData));
-      context._setPageData(d);
+      context._pageData.current = decompress(pageData);
       setFalse();
     });
   }, []);

package/es/lowcode/view/lc-components/Box/index.js

@@ -1,17 +1,12 @@
-import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
-import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["id", "children"];
 import React, { useRef } from 'react';
-import PropTypes from 'prop-types';
 import { useMemoizedFn } from 'ahooks';
-import classNames from 'classnames';
 import Wrapper from "../Wrapper";
-import styles from "./index.less";
-import defaultMeta from "../../../engine/meta/box.props.default.json";
 var LCBox = function LCBox(_ref) {
   var id = _ref.id,
     children = _ref.children,
-    className = _ref.className,
-    style = _ref.style;
+    props = _objectWithoutProperties(_ref, _excluded);
   var ref = useRef();
   var getTargetDom = useMemoizedFn(function () {
     return ref.current;
@@ -20,19 +15,7 @@ var LCBox = function LCBox(_ref) {
     id: id,
     getTargetDom: getTargetDom
   }, /*#__PURE__*/React.createElement("div", {
-    ref: ref,
-    className: classNames(styles['lc-component-box'], _defineProperty({}, className, !!className)),
-    style: style,
-    name: "box"
-  }, children));
+    ref: ref
+  }, "LCBox", children));
 };
-LCBox.propTypes = {
-  /**
-   * @name 唯一标识
-   * @type string
-   * @disabled true
-   */
-  id: PropTypes.string.isRequired
-};
-LCBox.defaultProps = _objectSpread({}, defaultMeta);
 export default LCBox;

package/es/lowcode/view/lc-components/Button/index.js

@@ -1,25 +1,16 @@
-import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
-import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["id", "children"];
 import React, { useRef } from 'react';
-import PropTypes from 'prop-types';
 import { useMemoizedFn } from 'ahooks';
-import classNames from 'classnames';
 import { useLDContext } from "../../../engine/provider/ContextProvider";
 import { Button } from 'luck-design/antd';
 import Wrapper from "../Wrapper";
 import { RUNTIME } from "../../../constants";
-import defaultMeta from "../../../engine/meta/button.props.default.json";
 var LCButton = function LCButton(_ref) {
   var id = _ref.id,
-    title = _ref.title,
-    type = _ref.type,
-    size = _ref.size,
-    block = _ref.block,
-    serial = _ref.serial,
-    serialEffect = _ref.serialEffect,
-    ghost = _ref.ghost,
-    style = _ref.style,
-    className = _ref.className;
+    children = _ref.children,
+    props = _objectWithoutProperties(_ref, _excluded);
   var context = useLDContext();
   var ref = useRef();
   var getTargetDom = useMemoizedFn(function () {
@@ -38,65 +29,9 @@ var LCButton = function LCButton(_ref) {
   return /*#__PURE__*/React.createElement(Wrapper, {
     id: id,
     getTargetDom: getTargetDom
-  }, /*#__PURE__*/React.createElement(Button, {
+  }, /*#__PURE__*/React.createElement(Button, _extends({
     ref: ref,
-    type: type,
-    size: size,
-    block: block,
-    ghost: ghost,
-    style: style,
-    className: classNames(_defineProperty({}, className, !!className)),
     onClick: handleClick
-  }, title));
+  }, props), "LCButton-", id));
 };
-LCButton.propTypes = {
-  /**
-   * @name 唯一标识
-   * @type string
-   * @disabled true
-   */
-  id: PropTypes.string.isRequired,
-  /**
-   * @name 按钮标题
-   * @type string
-   * @default 12:3:9
-   */
-  title: PropTypes.string,
-  /**
-   * @name 按钮类型
-   * @type oneOf('default', 'primary', 'dashed', 'danger')
-   * @default 'default'
-   */
-  type: PropTypes.oneOf(['default', 'primary', 'dashed', 'danger']),
-  /**
-   * @name 按钮大小
-   * @type oneOf('small', 'default', 'large')
-   * @default 'default'
-   */
-  size: PropTypes.oneOf(['small', 'default', 'large']),
-  /**
-   * @name 将按钮宽度调整为其父宽度的选项
-   * @type boolean
-   * @default false
-   */
-  block: PropTypes.bool,
-  /**
-   * @name 资源串
-   * @type string
-   */
-  serial: PropTypes.string,
-  /**
-   * @name 资源串效果
-   * @type oneOf('disabled','hidden')
-   * @default 'disabled'
-   */
-  serialEffect: PropTypes.oneOf(['disabled', 'hidden']),
-  /**
-   * @name 幽灵按钮
-   * @type boolean
-   * @default false
-   */
-  ghost: PropTypes.bool
-};
-LCButton.defaultProps = _objectSpread({}, defaultMeta);
 export default LCButton;

package/es/lowcode/view/lc-components/Dialog/index.js

@@ -3,7 +3,7 @@ import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 var _excluded = ["id", "children"];
 import React, { useRef, useImperativeHandle } from 'react';
-import { useMemoizedFn, useBoolean, useUpdateEffect } from 'ahooks';
+import { useMemoizedFn, useBoolean } from 'ahooks';
 import { Modal } from 'luck-design/antd';
 import classNames from 'classnames';
 import { useLDContext } from "../../../engine/provider/ContextProvider";
@@ -34,17 +34,6 @@ var LCDialog = function LCDialog(_ref) {
       toggle: toggle
     };
   });
-  useUpdateEffect(function () {
-    if (open) {
-      context.$publisher(context.topics.MODAL_OPEN, {
-        id: id
-      });
-    } else {
-      context.$publisher(context.topics.MODAL_CLOSE, {
-        id: id
-      });
-    }
-  }, [open]);
   return /*#__PURE__*/React.createElement(Wrapper, {
     id: id,
     getTargetDom: getTargetDom,

package/es/lowcode/view/lc-components/Drawer/index.js

@@ -1,19 +1,15 @@
-import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["id", "children", "className"];
+var _excluded = ["id", "children"];
 import React, { useRef, useImperativeHandle } from 'react';
-import { useMemoizedFn, useBoolean, useUpdateEffect } from 'ahooks';
+import { useMemoizedFn, useBoolean } from 'ahooks';
 import { Drawer } from 'luck-design/antd';
-import classNames from 'classnames';
 import { useLDContext } from "../../../engine/provider/ContextProvider";
 import { CELL_KEY, RUNTIME } from "../../../constants";
 import Wrapper from "../Wrapper";
-import styles from "./style.less";
 var LCDrawer = function LCDrawer(_ref) {
   var id = _ref.id,
     children = _ref.children,
-    className = _ref.className,
     props = _objectWithoutProperties(_ref, _excluded);
   var apiRef = useRef();
   var context = useLDContext();
@@ -35,17 +31,6 @@ var LCDrawer = function LCDrawer(_ref) {
       toggle: toggle
     };
   });
-  useUpdateEffect(function () {
-    if (open) {
-      context.$publisher(context.topics.MODAL_OPEN, {
-        id: id
-      });
-    } else {
-      context.$publisher(context.topics.MODAL_CLOSE, {
-        id: id
-      });
-    }
-  }, [open]);
   return /*#__PURE__*/React.createElement(Wrapper, {
     id: id,
     getTargetDom: getTargetDom,
@@ -55,8 +40,7 @@ var LCDrawer = function LCDrawer(_ref) {
     getContainer: context.runtime !== RUNTIME.DESIGN,
     style: {
       position: context.runtime === RUNTIME.DESIGN ? 'absolute' : 'fixed'
-    },
-    className: classNames(_defineProperty(_defineProperty({}, styles['runtime-drawer'], context.runtime === RUNTIME.DESIGN), className, !!className))
+    }
   }, /*#__PURE__*/React.createElement("div", null, "LCDrawer-", id), children));
 };
 export default LCDrawer;