@fonixtree/magic-design 0.0.13 → 0.0.16

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

@@ -1,130 +0,0 @@
-import { __extends } from '../../../../../my_my_node_modules/tslib/tslib.es6.js';
-import classNames from '../../../../../my_my_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

@@ -1,4 +0,0 @@
-import styleInject from '../../../../../my_my_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

@@ -1,86 +0,0 @@
-import { __extends, __assign } from '../../../../../my_my_node_modules/tslib/tslib.es6.js';
-import classNames from '../../../../../my_my_node_modules/classnames/index.js';
-import React__default, { Component } from 'react';
-import isEmpty_1 from '../../../../../my_my_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

@@ -1,4 +0,0 @@
-import styleInject from '../../../../../my_my_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

@@ -1,364 +0,0 @@
-import { __extends, __assign, __spreadArray } from '../../../../my_my_node_modules/tslib/tslib.es6.js';
-import React__default, { Component } from 'react';
-import uuid_1 from '../../../../my_my_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

@@ -1,4 +0,0 @@
-import styleInject from '../../../../my_my_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

@@ -1,55 +0,0 @@
-import { __assign } from '../../../../my_my_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 };