@fonixtree/magic-design 0.0.7 → 0.0.10

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

@@ -0,0 +1,130 @@
+import { __extends } from '../../../../../node_modules/tslib/tslib.es6.js';
+import classNames from '../../../../../node_modules/classnames/index.js';
+import React__default, { Component } from 'react';
+import Button from '../../../common/Button/index.js';
+import Iconfont from '../../../common/Iconfont/index.js';
+import { deviceTypeMap, quickMenuCode } from '../../../constants/index.js';
+import './index.less.js';
+
+var langBook = {
+  Indonesian: {
+    text: 'Indonesian',
+    color: '#FF8541',
+    backColor: '#FFF8F0'
+  },
+  English: {
+    text: 'English',
+    color: '#00AC5A',
+    backColor: '#DFF3EA'
+  }
+};
+
+var QuickMenuBar =
+/** @class */
+function (_super) {
+  __extends(QuickMenuBar, _super);
+
+  function QuickMenuBar() {
+    var _this = _super !== null && _super.apply(this, arguments) || this;
+
+    _this.onBtnClick = function (event) {
+      var code = event.currentTarget.dataset.code;
+
+      if (_this.props.device === deviceTypeMap.PC) ;
+
+      _this.props.onBtnClick(code);
+    };
+
+    return _this;
+  }
+
+  QuickMenuBar.prototype.render = function () {
+    var _a = this.props,
+        device = _a.device,
+        undoDisable = _a.undoDisable,
+        redoDisable = _a.redoDisable,
+        language = _a.language;
+    return /*#__PURE__*/React__default.createElement("div", {
+      className: "quick_menu_wrap"
+    }, /*#__PURE__*/React__default.createElement("div", {
+      className: "menu_left"
+    }, /*#__PURE__*/React__default.createElement("span", {
+      className: "language",
+      style: {
+        color: langBook[language].color,
+        background: langBook[language].backColor
+      }
+    }, /*#__PURE__*/React__default.createElement(Iconfont, {
+      size: "20px",
+      style: {
+        marginRight: '8px'
+      },
+      type: "icon-language"
+    }), langBook[language].text)), /*#__PURE__*/React__default.createElement("div", {
+      className: "menu_center"
+    }, /*#__PURE__*/React__default.createElement("div", {
+      className: "device_group"
+    }, /*#__PURE__*/React__default.createElement("div", {
+      className: classNames('device_pc', {
+        active: device === deviceTypeMap.PC
+      }),
+      "data-code": quickMenuCode.MODE_PC,
+      onClick: this.onBtnClick
+    }, /*#__PURE__*/React__default.createElement(Iconfont, {
+      color: device === deviceTypeMap.PC ? '#2F54EB' : '',
+      size: "20px",
+      type: "icon-pc"
+    })), /*#__PURE__*/React__default.createElement("div", {
+      className: classNames('device_phone', {
+        active: device === deviceTypeMap.PHONE
+      }),
+      "data-code": quickMenuCode.MODE_PHONE,
+      onClick: this.onBtnClick
+    }, /*#__PURE__*/React__default.createElement(Iconfont, {
+      color: device === deviceTypeMap.PHONE ? '#2F54EB' : '',
+      size: "20px",
+      type: "icon-mobile"
+    }))), /*#__PURE__*/React__default.createElement("div", {
+      className: "redo_undo"
+    }, /*#__PURE__*/React__default.createElement(Button, {
+      "data-code": quickMenuCode.UNDO,
+      disabled: undoDisable,
+      icon: "icon-back",
+      onClick: this.onBtnClick,
+      type: "icon"
+    }), /*#__PURE__*/React__default.createElement(Button, {
+      "data-code": quickMenuCode.REDO,
+      disabled: redoDisable,
+      icon: "icon-next",
+      onClick: this.onBtnClick,
+      type: "icon"
+    }))), /*#__PURE__*/React__default.createElement("div", {
+      className: "menu_right"
+    }, /*#__PURE__*/React__default.createElement(Button, {
+      "data-code": quickMenuCode.PREVIEW,
+      onClick: this.onBtnClick
+    }, "Preview"), /*#__PURE__*/React__default.createElement(Button, {
+      "data-code": quickMenuCode.SAVE,
+      disabled: window.magicDesign.readOnly,
+      onClick: this.onBtnClick,
+      tip: "The page is in use. Please copy or create a new page",
+      type: "light"
+    }, "Save"), /*#__PURE__*/React__default.createElement(Button, {
+      "data-code": quickMenuCode.PUBLISH,
+      disabled: window.magicDesign.readOnly,
+      onClick: this.onBtnClick,
+      tip: "The page is in use. Please copy or create a new page",
+      type: "primary"
+    }, "Publish")));
+  };
+
+  return QuickMenuBar;
+}(Component);
+QuickMenuBar.defaultProps = {
+  deviceType: deviceTypeMap.PC,
+  onBtnClick: function (code) {
+    console.log(code);
+  }
+};
+
+export { QuickMenuBar as default };

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

@@ -0,0 +1,4 @@
+import styleInject from '../../../../../node_modules/style-inject/dist/style-inject.es.js';
+
+var css_248z = ".index_quick_menu_wrap__5xVae {\n  flex-shrink: 0;\n  height: 80px;\n  width: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding-left: 24px;\n  padding-right: 28px;\n  background-color: #FFF;\n}\n.index_quick_menu_wrap__5xVae .index_menu_left__5Vc5c .index_language__08ChO {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 48px;\n  border-radius: 8px;\n  padding: 12px;\n  font-size: 16px;\n}\n.index_quick_menu_wrap__5xVae .index_menu_center__9F4gn {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n.index_quick_menu_wrap__5xVae .index_menu_center__9F4gn .index_device_group__3Kk79 {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n.index_quick_menu_wrap__5xVae .index_menu_center__9F4gn .index_device_group__3Kk79 .index_device_pc__GZM-C {\n  cursor: pointer;\n  height: 48px;\n  width: 60px;\n  padding: 14px;\n  border: 1px solid #EDF0F4;\n  border-right: none;\n  border-top-left-radius: 8px;\n  border-bottom-left-radius: 8px;\n  text-align: center;\n}\n.index_quick_menu_wrap__5xVae .index_menu_center__9F4gn .index_device_group__3Kk79 .index_device_phone__odPFU {\n  cursor: pointer;\n  height: 48px;\n  width: 60px;\n  padding: 14px;\n  border: 1px solid #EDF0F4;\n  border-left: none;\n  border-top-right-radius: 8px;\n  border-bottom-right-radius: 8px;\n  text-align: center;\n}\n.index_quick_menu_wrap__5xVae .index_menu_center__9F4gn .index_device_group__3Kk79 .index_active__cu0sW {\n  background: #E9F0FF;\n}\n.index_quick_menu_wrap__5xVae .index_menu_center__9F4gn .index_redo_undo__PGEpQ {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  margin-left: 24px;\n}\n.index_quick_menu_wrap__5xVae .index_menu_right__yqg0- {\n  display: flex;\n}\n";
+styleInject(css_248z);

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

@@ -0,0 +1,86 @@
+import { __extends, __assign } from '../../../../../node_modules/tslib/tslib.es6.js';
+import classNames from '../../../../../node_modules/classnames/index.js';
+import React__default, { Component } from 'react';
+import isEmpty_1 from '../../../../../node_modules/lodash/isEmpty.js';
+import { deviceTypeMap } from '../../../constants/index.js';
+import { componentMap } from '../../../constants/component-types.js';
+import './index.less.js';
+import { store } from '../../../mobx/index.js';
+import { autorun } from 'mobx';
+
+var ViewArea =
+/** @class */
+function (_super) {
+  __extends(ViewArea, _super);
+
+  function ViewArea() {
+    var _this = _super !== null && _super.apply(this, arguments) || this;
+
+    _this.state = {
+      clickedFloor: ''
+    };
+
+    _this.isPhoneEdit = function () {
+      var device = _this.props.device;
+      return device === deviceTypeMap.PHONE && !isEmpty_1(_this.state.clickedFloor);
+    };
+
+    _this.renderView = function () {
+      _this.setState({});
+    };
+
+    return _this;
+  }
+
+  ViewArea.prototype.componentDidMount = function () {
+    var _this = this;
+
+    this.distroy = autorun(function () {
+      _this.setState({
+        clickedFloor: store.clickedFloor
+      });
+    });
+  };
+
+  ViewArea.prototype.componentWillUnmount = function () {
+    this.distroy();
+  };
+
+  ViewArea.prototype.render = function () {
+    var _a = this.props,
+        device = _a.device,
+        renderHeader = _a.renderHeader,
+        pageData = _a.pageData;
+    return /*#__PURE__*/React__default.createElement("div", {
+      className: classNames('design-area-wrap', {
+        'phone-edit': this.isPhoneEdit()
+      })
+    }, renderHeader(), /*#__PURE__*/React__default.createElement("div", {
+      className: device === deviceTypeMap.PC ? 'pc_view_area' : 'phone_view_area'
+    }, /*#__PURE__*/React__default.createElement("div", {
+      className: "device_border",
+      style: {
+        background: window.magicDesign.pageBackground
+      }
+    }, pageData && pageData.map(function (nodeData) {
+      var Clazz = componentMap[nodeData.type];
+
+      if (!Clazz) {
+        console.error("[MagicBox] Can not find type ".concat(nodeData.type));
+        return;
+      }
+
+      var newInstanceProps = {
+        nodeData: nodeData
+      };
+      return /*#__PURE__*/React__default.createElement("div", {
+        key: nodeData.id,
+        id: "view".concat(nodeData.id)
+      }, /*#__PURE__*/React__default.createElement(Clazz, __assign({}, newInstanceProps), null));
+    }))));
+  };
+
+  return ViewArea;
+}(Component);
+
+export { ViewArea as default };

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

@@ -0,0 +1,4 @@
+import styleInject from '../../../../../node_modules/style-inject/dist/style-inject.es.js';
+
+var css_248z = ".index_design-area-wrap__1UMY8 {\n  width: calc(100vw - 354px);\n  flex: auto;\n  background: #F5F6F7;\n  display: flex;\n  flex-direction: column;\n  padding-left: 1px;\n  transition-property: all;\n  transition-duration: 0.3s;\n  transition-timing-function: ease;\n}\n.index_design-area-wrap__1UMY8.index_phone-edit__-2SG9 {\n  margin-left: 355px;\n}\n.index_design-area-wrap__1UMY8 .index_phone_view_area__Jv0A0 {\n  flex-grow: 1;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 24px 0;\n}\n.index_design-area-wrap__1UMY8 .index_phone_view_area__Jv0A0 .index_device_border__I7Vyh {\n  width: 375px;\n  max-height: 691px;\n  height: calc(100vh - 150px);\n  overflow: scroll;\n  overflow-x: hidden;\n  border: 10px solid #FFF;\n  background-color: #F2F2F2;\n  border-radius: 12px;\n  box-sizing: content-box;\n}\n.index_design-area-wrap__1UMY8 .index_pc_view_area__3s0Hi {\n  flex-grow: 1;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 24px;\n}\n.index_design-area-wrap__1UMY8 .index_pc_view_area__3s0Hi .index_device_border__I7Vyh {\n  padding: 1px;\n  max-width: 1240px;\n  width: 100%;\n  min-height: 70vh;\n  border: 16px solid #FFF;\n  border-radius: 12px;\n  max-height: calc(100vh - 180px);\n  height: 100%;\n  overflow: scroll;\n  box-sizing: content-box;\n}\n";
+styleInject(css_248z);

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

@@ -0,0 +1,364 @@
+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 'mobx-react';
+import { ConfigProvider } from 'antd';
+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 };