@fonixtree/magic-design 0.0.6 → 0.0.9

package/src/components/core/Designer/index.js

@@ -0,0 +1,445 @@
+import { __extends, __assign, __spreadArray } from '../../../../node_modules/tslib/tslib.es6.js';
+import React__default, { Component } from 'react';
+import uuid_1 from '../../../../node_modules/uuid/index.js';
+import { Provider } from '../../../../node_modules/mobx-react/dist/mobxreact.esm.js';
+import '../../../../node_modules/antd/es/affix/index.js';
+import '../../../../node_modules/antd/es/anchor/index.js';
+import '../../../../node_modules/antd/es/auto-complete/index.js';
+import '../../../../node_modules/antd/es/alert/index.js';
+import '../../../../node_modules/antd/es/avatar/index.js';
+import '../../../../node_modules/antd/es/back-top/index.js';
+import '../../../../node_modules/antd/es/badge/index.js';
+import '../../../../node_modules/antd/es/breadcrumb/Breadcrumb.js';
+import '../../../../node_modules/antd/es/button/button.js';
+import '../../../../node_modules/rc-picker/node_modules/moment/moment.js';
+import '../../../../node_modules/rc-util/es/hooks/useMergedState.js';
+import 'classnames';
+import '../../../../node_modules/lodash/_baseToString.js';
+import '../../../../node_modules/lodash/_baseGetTag.js';
+import '../../../../node_modules/rc-util/es/raf.js';
+import '../../../../node_modules/rc-picker/es/panels/DatetimePanel/index.js';
+import '../../../../node_modules/rc-trigger/es/index.js';
+import '../../../../node_modules/antd/es/locale-provider/LocaleReceiver.js';
+import '../../../../node_modules/antd/es/date-picker/locale/en_US.js';
+import ConfigProvider from '../../../../node_modules/antd/es/config-provider/index.js';
+import '../../../../node_modules/rc-field-form/es/index.js';
+import '../../../../node_modules/antd/es/select/index.js';
+import '../../../../node_modules/antd/es/radio/index.js';
+import '../../../../node_modules/antd/es/card/index.js';
+import '../../../../node_modules/antd/es/collapse/Collapse.js';
+import '../../../../node_modules/antd/es/carousel/index.js';
+import '../../../../node_modules/antd/es/cascader/index.js';
+import '../../../../node_modules/antd/es/checkbox/index.js';
+import '../../../../node_modules/antd/es/grid/row.js';
+import '../../../../node_modules/antd/es/grid/col.js';
+import '../../../../node_modules/antd/es/comment/index.js';
+import '../../../../node_modules/antd/es/date-picker/index.js';
+import '../../../../_virtual/index2.js';
+import '../../../../node_modules/antd/es/_util/warning.js';
+import '../../../../node_modules/antd/es/divider/index.js';
+import '../../../../node_modules/antd/es/dropdown/dropdown.js';
+import '../../../../node_modules/antd/es/drawer/index.js';
+import '../../../../node_modules/antd/es/empty/index.js';
+import '../../../../node_modules/antd/es/form/index.js';
+import '../../../../node_modules/antd/es/input/index.js';
+import '../../../../node_modules/antd/es/image/index.js';
+import '../../../../node_modules/antd/es/input-number/index.js';
+import '../../../../node_modules/antd/es/layout/index.js';
+import '../../../../node_modules/antd/es/list/index.js';
+import '../../../../node_modules/antd/es/message/index.js';
+import '../../../../node_modules/antd/es/menu/index.js';
+import '../../../../node_modules/antd/es/mentions/index.js';
+import '../../../../node_modules/antd/es/modal/index.js';
+import '../../../../node_modules/antd/es/statistic/index.js';
+import '../../../../node_modules/antd/es/notification/index.js';
+import '../../../../node_modules/@ant-design/icons/es/icons/ArrowLeftOutlined.js';
+import '../../../../node_modules/@ant-design/icons/es/icons/ArrowRightOutlined.js';
+import '../../../../node_modules/rc-resize-observer/es/index.js';
+import '../../../../node_modules/antd/es/space/index.js';
+import '../../../../node_modules/antd/es/_util/transButton.js';
+import '../../../../node_modules/antd/es/pagination/Pagination.js';
+import '../../../../node_modules/antd/es/popconfirm/index.js';
+import '../../../../node_modules/antd/es/popover/index.js';
+import '../../../../node_modules/antd/es/progress/progress.js';
+import '../../../../node_modules/antd/es/rate/index.js';
+import '../../../../node_modules/antd/es/result/index.js';
+import '../../../../node_modules/antd/es/segmented/index.js';
+import '../../../../node_modules/antd/es/skeleton/Skeleton.js';
+import '../../../../node_modules/antd/es/slider/index.js';
+import '../../../../node_modules/antd/es/spin/index.js';
+import '../../../../node_modules/antd/es/steps/index.js';
+import '../../../../node_modules/antd/es/switch/index.js';
+import '../../../../node_modules/antd/es/table/Table.js';
+import '../../../../node_modules/antd/es/transfer/list.js';
+import '../../../../node_modules/@ant-design/icons/es/icons/LeftOutlined.js';
+import '../../../../node_modules/@ant-design/icons/es/icons/RightOutlined.js';
+import '../../../../node_modules/@ant-design/icons/es/icons/SearchOutlined.js';
+import '../../../../node_modules/antd/es/_util/statusUtils.js';
+import '../../../../node_modules/antd/es/tree/Tree.js';
+import '../../../../node_modules/antd/es/tree-select/index.js';
+import '../../../../node_modules/antd/es/tabs/index.js';
+import '../../../../node_modules/antd/es/tag/index.js';
+import '../../../../node_modules/antd/es/time-picker/index.js';
+import '../../../../node_modules/antd/es/timeline/Timeline.js';
+import '../../../../node_modules/antd/es/tooltip/index.js';
+import '../../../../node_modules/antd/es/typography/index.js';
+import '../../../../node_modules/antd/es/upload/index.js';
+import CompListPanel from './CompListPanel/index.js';
+import PageCompList from './PageCompList/index.js';
+import ConfigPanel from './ConfigPanel/index.js';
+import QuickMenuBar from './QuickMenuBar/index.js';
+import ViewArea from './ViewArea/index.js';
+import History from './History/index.js';
+import { componentMap } from '../../constants/component-types.js';
+import { store } from '../../mobx/index.js';
+import { deviceTypeMap, quickMenuCode } from '../../constants/index.js';
+import './index.less.js';
+
+var setDesignConfig = function setDesignConfig(data) {
+  window.magicDesign = __assign(__assign({
+    mode: 'designer',
+    device: deviceTypeMap.PHONE
+  }, data), {
+    MBaseUrl: data.MBaseUrl || ''
+  });
+};
+
+var debug = require('debug')('worker:Designer');
+/**
+ * @class Designer
+ * 主入口。
+ */
+
+
+var Designer =
+/** @class */
+function (_super) {
+  __extends(Designer, _super);
+
+  function Designer(props) {
+    var _this = _super.call(this, props) || this;
+
+    _this.closeCompList = function () {
+      if (_this.compListRef.current.open) {
+        _this.compListRef.current.onClose();
+      }
+    };
+
+    _this.openCompList = function () {
+      return _this.compListRef.current.onOpen();
+    };
+
+    _this.openConfigPanel = function () {
+      if (!_this.configRef.current) {
+        return;
+      }
+
+      var device = _this.state.device;
+
+      if (device === deviceTypeMap.PC) {
+        _this.configRef.current.openPcConfig();
+
+        return;
+      }
+
+      _this.configRef.current.openMobileConfig();
+    };
+
+    _this.closeConfigPanel = function () {
+      if (!_this.configRef.current) {
+        return;
+      }
+
+      var device = _this.state.device;
+
+      if (!store.clickedFloor) {
+        return;
+      }
+
+      _this.configRef.current.closeSecConfig();
+
+      if (device === deviceTypeMap.PC) {
+        _this.configRef.current.closePcConfig();
+
+        return;
+      }
+
+      _this.configRef.current.closeMobileConfig();
+    };
+
+    _this.reRenderViewArea = function () {
+      if (!_this.viewAreaRef || !_this.viewAreaRef.current) {
+        return;
+      }
+
+      _this.history.push(_this.state.MPageData);
+
+      _this.viewAreaRef.current.renderView();
+    };
+
+    _this.componentClick = function (event) {
+      _this.openConfigPanel();
+
+      _this.onComponentClick(event.data);
+    };
+    /**
+     * 楼层 的 新增、删除、拷贝、顺序调整、属性修改时调用
+     * @param {*} pageData 模版信息
+     */
+
+
+    _this.setPageData = function (pageData) {
+      _this.setState({
+        MPageData: _this.history.push(pageData)
+      });
+    };
+
+    _this.onSwitchDevice = function (device) {
+      if (device === window.magicDesign.device) {
+        return;
+      }
+
+      _this.closeConfigPanel();
+
+      _this.setState(__assign(__assign({}, _this.state), {
+        device: device
+      }));
+
+      _this.closeCompList();
+
+      store.setState({
+        clickedFloor: ''
+      });
+      window.magicDesign.device = device;
+    };
+
+    _this.onAdd = function () {
+      _this.closeConfigPanel();
+
+      _this.openCompList();
+
+      store.setState({
+        clickedFloor: ''
+      });
+    };
+
+    _this.onPropsPanelClose = function () {
+      store.setState({
+        clickedFloor: ''
+      });
+    };
+
+    _this.componentScrollTop = function (data) {
+      if (document.getElementById("view".concat(data.id))) {
+        document.getElementById("view".concat(data.id)).scrollIntoView({
+          behavior: 'smooth'
+        });
+      }
+    };
+
+    _this.addComponent = function (_a) {
+      var type = _a.type;
+      var MPageData = _this.state.MPageData;
+      var compType = componentMap[type];
+
+      if (!compType) {
+        debug("Component Type [".concat(type, "] not find!"));
+        return;
+      }
+
+      var compInst = compType.getDefaultJSON();
+
+      var newData = __spreadArray(__spreadArray([], MPageData, true), [compInst], false);
+
+      _this.history.push(newData);
+
+      store.setState({
+        MPageData: newData
+      });
+
+      _this.setState({
+        MPageData: newData
+      }, function () {
+        setTimeout(function () {
+          // 定位到新增组件
+          _this.componentScrollTop(compInst);
+
+          var evt = new Event('component-click', {
+            bubbles: false
+          });
+          evt.data = compInst;
+          window.document.dispatchEvent(evt);
+        }, 0);
+      });
+    };
+
+    _this.onQuickMenuClick = function (code) {
+      var _a = _this.props,
+          onPublish = _a.onPublish,
+          onSave = _a.onSave,
+          onPreviews = _a.onPreviews;
+      var _b = _this.state,
+          device = _b.device,
+          MPageData = _b.MPageData;
+      var handleParams = {
+        pageData: {
+          id: uuid_1.v4(),
+          childNodes: MPageData
+        },
+        device: device
+      };
+
+      switch (code) {
+        case quickMenuCode.UNDO:
+          _this.setState({
+            MPageData: _this.history.undo()
+          });
+
+          break;
+
+        case quickMenuCode.REDO:
+          _this.setState({
+            MPageData: _this.history.redo()
+          });
+
+          break;
+
+        case quickMenuCode.PUBLISH:
+          onPublish(handleParams);
+          break;
+
+        case quickMenuCode.PREVIEW:
+          onPreviews(handleParams);
+          break;
+
+        case quickMenuCode.SAVE:
+          onSave(handleParams);
+          break;
+
+        case quickMenuCode.MODE_PC:
+          _this.onSwitchDevice(deviceTypeMap.PC);
+
+          break;
+
+        case quickMenuCode.MODE_PHONE:
+          _this.onSwitchDevice(deviceTypeMap.PHONE);
+
+          break;
+      }
+
+      console.log(JSON.stringify(handleParams.pageData));
+    };
+
+    _this.renderHeader = function () {
+      return /*#__PURE__*/React__default.createElement(QuickMenuBar, {
+        device: _this.state.device,
+        language: _this.props.language,
+        onBtnClick: _this.onQuickMenuClick,
+        redoDisable: !_this.history.redoAble(),
+        undoDisable: !_this.history.undoAble()
+      });
+    };
+
+    var pageData = props.pageData,
+        config = props.config;
+    var MPageData = pageData.childNodes || [];
+    store.setState({
+      MPageData: MPageData
+    });
+    _this.configRef = /*#__PURE__*/React__default.createRef();
+    _this.viewAreaRef = /*#__PURE__*/React__default.createRef();
+    _this.compListRef = /*#__PURE__*/React__default.createRef();
+    _this.state = {
+      MPageData: MPageData,
+      device: deviceTypeMap.PHONE
+    };
+    _this.history = new History(MPageData);
+    setDesignConfig(config);
+    return _this;
+  }
+
+  Designer.prototype.componentDidMount = function () {
+    // 复合组件点击事件
+    window.document.addEventListener('component-click', this.componentClick); // 复合组件重新渲染事件
+
+    window.document.addEventListener('render-view', this.reRenderViewArea);
+  };
+
+  Designer.prototype.componentWillReceiveProps = function (nextProps) {
+    var pageData = nextProps.pageData,
+        config = nextProps.config;
+    var MPageData = pageData.childNodes || [];
+    this.setState({
+      MPageData: MPageData
+    });
+    store.setState({
+      MPageData: MPageData
+    });
+    this.history = new History(MPageData);
+    setDesignConfig(config);
+  };
+
+  Designer.prototype.onComponentClick = function (data) {
+    if (store.clickedFloor === data.id) return;
+    store.setState({
+      clickedFloor: data.id,
+      clickedGroup: null,
+      clickedMeta: null
+    });
+  };
+
+  Designer.prototype.componentWillUnmount = function () {
+    window.document.removeEventListener('component-click', this.componentClick);
+    window.document.removeEventListener('render-view', this.reRenderViewArea);
+  };
+
+  Designer.prototype.render = function () {
+    var _this = this;
+
+    var _a = this.state,
+        MPageData = _a.MPageData,
+        device = _a.device;
+    var _b = this.props,
+        pagesManager = _b.pagesManager,
+        compSource = _b.compSource,
+        pageName = _b.pageName;
+    return /*#__PURE__*/React__default.createElement(Provider, {
+      store: store
+    }, /*#__PURE__*/React__default.createElement(ConfigProvider, {
+      getPopupContainer: function getPopupContainer(triggerNode) {
+        return triggerNode ? triggerNode.parentNode : document.querySelector('[magic_design]');
+      }
+    }, /*#__PURE__*/React__default.createElement("div", {
+      magic_design: ""
+    }, /*#__PURE__*/React__default.createElement("div", {
+      className: "designer-wrap"
+    }, /*#__PURE__*/React__default.createElement(PageCompList, {
+      onAdd: this.onAdd,
+      pageData: MPageData,
+      pageName: pageName,
+      renderPagesManage: pagesManager,
+      setPageData: this.setPageData
+    }), /*#__PURE__*/React__default.createElement(CompListPanel, {
+      ref: this.compListRef,
+      compSource: compSource,
+      onAdd: function onAdd(data) {
+        return _this.addComponent(data);
+      },
+      onClose: this.closeCompList
+    }), /*#__PURE__*/React__default.createElement(ConfigPanel, {
+      ref: this.configRef,
+      device: device,
+      onClose: this.onPropsPanelClose,
+      pageData: MPageData
+    }), /*#__PURE__*/React__default.createElement(ViewArea, {
+      ref: this.viewAreaRef,
+      device: device,
+      pageData: MPageData,
+      renderHeader: this.renderHeader
+    })))));
+  };
+
+  return Designer;
+}(Component);
+
+export { Designer as default };

package/src/components/core/Designer/index.less.js

@@ -0,0 +1,4 @@
+import styleInject from '../../../../node_modules/style-inject/dist/style-inject.es.js';
+
+var css_248z = ".index_designer-wrap__u7r1K {\n  display: flex;\n  width: 100%;\n  height: 100vh;\n  background-color: #F5F6F7;\n}\n";
+styleInject(css_248z);

package/src/components/core/Renderer/index.js

@@ -0,0 +1,55 @@
+import { __assign } from '../../../../node_modules/tslib/tslib.es6.js';
+import React__default from 'react';
+import { componentMap } from '../../constants/component-types.js';
+
+var setDesignConfig = function setDesignConfig(props) {
+  var config = props.config,
+      device = props.device,
+      isShop = props.isShop;
+  window.magicDesign = __assign({
+    pageBackground: '#f2f2f2',
+    compSpacing: '16',
+    mode: 'renderer',
+    device: device,
+    isShop: isShop
+  }, config);
+};
+/**
+ * @class Renderer 页面预览器，外部工程使用此类来渲染出页面。
+ */
+
+
+var Renderer = function Renderer(props) {
+  var pageData = props.pageData;
+  setDesignConfig(props);
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: "render_wrap",
+    magic_design: "",
+    style: {
+      background: window.magicDesign.pageBackground
+    }
+  }, pageData && pageData.childNodes && pageData.childNodes.map(function (nodeData) {
+    var Clazz = componentMap[nodeData.type];
+
+    if (!Clazz) {
+      console.error("[MagicBox] Can not find type ".concat(nodeData.type));
+      return;
+    }
+
+    var newInstanceProps = __assign(__assign({}, nodeData), {
+      nodeData: nodeData
+    });
+
+    return /*#__PURE__*/React__default.createElement("div", {
+      key: nodeData.id
+    }, /*#__PURE__*/React__default.createElement(Clazz, __assign({}, newInstanceProps), null));
+  }));
+};
+
+Renderer.defaultProps = {
+  pageData: {},
+  device: 'pc',
+  config: {}
+};
+
+export { Renderer as default };

package/src/components/decorator/compositeDecorator.js

@@ -0,0 +1,94 @@
+import { __extends } from '../../../node_modules/tslib/tslib.es6.js';
+import React__default, { Component } from 'react';
+import { store } from '../mobx/index.js';
+import { autorun } from '../../../node_modules/mobx/dist/mobx.esm.js';
+
+function compositeDecorator(WrappedComponent) {
+  var Wrapper =
+  /** @class */
+  function (_super) {
+    __extends(Wrapper, _super);
+
+    function Wrapper() {
+      var _this = _super !== null && _super.apply(this, arguments) || this;
+
+      _this.state = {
+        clickedFloor: ''
+      }; // 复合组件点击事件
+
+      _this.onCompositeCompClick = function (event) {
+        // 触发左侧楼层的滚动
+        if (document.getElementById("card".concat(_this.props.nodeData.id))) {
+          document.getElementById("card".concat(_this.props.nodeData.id)).scrollIntoView({
+            behavior: 'smooth'
+          });
+        } // 这里必须阻止事件冒泡，然后再触发自定义的事件
+
+
+        event.preventDefault();
+        event.stopPropagation(); // 触发点击组件事件
+
+        var evt = new Event('component-click', {
+          bubbles: false
+        });
+        evt.data = _this.props.nodeData;
+        window.document.dispatchEvent(evt);
+      };
+
+      _this.getStyle = function () {
+        var style = {
+          border: 'none'
+        }; // 处理复合组件的选中状态
+
+        if (window.magicDesign.mode === 'designer') {
+          // style.border = '1px solid transparent';
+          style.border = 'none';
+
+          if (_this.props.nodeData.id === _this.state.clickedFloor) {
+            style.border = '1px dashed red';
+          }
+        } // 处理复合组件的下边距
+
+
+        if (Wrapper.type !== 'DIVIDER') {
+          var rate = window.magicDesign.device === 'pc' ? 1.5 : 1;
+          style.marginBottom = "".concat(Number(window.magicDesign.compSpacing) * rate, "px");
+        }
+
+        return style;
+      };
+
+      return _this;
+    }
+
+    Wrapper.prototype.componentDidMount = function () {
+      var _this = this;
+
+      this.distroy = autorun(function () {
+        _this.setState({
+          clickedFloor: store.clickedFloor
+        });
+      });
+    };
+
+    Wrapper.prototype.componentWillUnmount = function () {
+      this.distroy();
+    };
+
+    Wrapper.prototype.render = function () {
+      return /*#__PURE__*/React__default.createElement("div", {
+        className: "composite_wrap",
+        onClick: this.onCompositeCompClick,
+        style: this.getStyle()
+      }, /*#__PURE__*/React__default.createElement(WrappedComponent, this.props));
+    };
+
+    Wrapper.getDefaultJSON = WrappedComponent.getDefaultJSON;
+    Wrapper.type = WrappedComponent.type;
+    return Wrapper;
+  }(Component);
+
+  return Wrapper;
+}
+
+export { compositeDecorator as default };