@fonixtree/magic-design 0.0.6 → 0.0.9

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

@@ -0,0 +1,33 @@
+import React__default from 'react';
+import Iconfont from '../../../../common/Iconfont/index.js';
+import './index.less.js';
+
+function CompCard(_a) {
+  var label = _a.label,
+      onAdd = _a.onAdd,
+      type = _a.type,
+      icon = _a.icon;
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: "compCard"
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "comp-info"
+  }, /*#__PURE__*/React__default.createElement("span", null, /*#__PURE__*/React__default.createElement(Iconfont, {
+    className: "comp-icon",
+    type: icon
+  }), /*#__PURE__*/React__default.createElement("span", {
+    className: "comp-name"
+  }, label)), /*#__PURE__*/React__default.createElement(Iconfont, {
+    className: "hover-icon",
+    color: "#2F54EB",
+    onClick: function () {
+      return onAdd({
+        type: type,
+        label: label,
+        icon: icon
+      });
+    },
+    type: "icon-add"
+  })));
+}
+
+export { CompCard as default };

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

@@ -0,0 +1,4 @@
+import styleInject from '../../../../../../node_modules/style-inject/dist/style-inject.es.js';
+
+var css_248z = ".index_compCard__2SdI2 {\n  position: relative;\n  padding: 24px;\n  background: #F5F6F7;\n  border-radius: 8px;\n  margin-bottom: 10px;\n}\n.index_compCard__2SdI2:hover {\n  background: #E9F0FF;\n}\n.index_compCard__2SdI2:hover .index_comp-info__47BtN .index_hover-icon__RQLYA {\n  display: block;\n}\n.index_compCard__2SdI2.index_cardActive__yD-E3 {\n  background: #E9F0FF;\n}\n.index_compCard__2SdI2 .index_comp-info__47BtN {\n  height: 16px;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n}\n.index_compCard__2SdI2 .index_comp-info__47BtN .index_comp-name__KOk5M {\n  margin-left: 16px;\n  font-family: 'Open Sans';\n  font-style: normal;\n  font-weight: 400;\n  font-size: 16px;\n  line-height: 24px;\n  color: #232F46;\n}\n.index_compCard__2SdI2 .index_comp-info__47BtN .index_hover-icon__RQLYA {\n  display: none;\n  cursor: pointer;\n}\n.index_compCard__2SdI2 .index_comp-layout-panel__QGzIO {\n  max-height: 0;\n  transition: all 0.4s ease;\n  opacity: 0;\n}\n.index_compCard__2SdI2 .index_comp-layout-panel__QGzIO .index_layout_wrap__M6WrZ {\n  display: flex;\n}\n.index_compCard__2SdI2 .index_comp-layout-panel__QGzIO .index_layout_wrap__M6WrZ .index_icon_wrap__fnJ3z {\n  background: #FFFFFF;\n  border: 2px solid #FFFFFF;\n  box-sizing: border-box;\n  border-radius: 6px;\n  height: 57px;\n  width: 78px;\n}\n.index_compCard__2SdI2 .index_comp-layout-panel__QGzIO .index_layout_wrap__M6WrZ .index_icon_wrap__fnJ3z:nth-child(3n +2) {\n  margin-left: 12px;\n  margin-right: 12px;\n}\n.index_compCard__2SdI2 .index_comp-layout-panel__QGzIO .index_layout_wrap__M6WrZ .index_layout_actice__Eidhf {\n  border-color: #597EF7;\n}\n.index_compCard__2SdI2 .index_comp-layout-panel__QGzIO .index_btn_wrap__7lJ-e {\n  display: flex;\n}\n.index_compCard__2SdI2 .index_panel-visible__0rb3o {\n  max-height: 200px;\n  opacity: 1;\n}\n";
+styleInject(css_248z);

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

@@ -0,0 +1,109 @@
+import { extends as _extends } from '../../../../../_virtual/_rollupPluginBabelHelpers.js';
+import { __extends } from '../../../../../node_modules/tslib/tslib.es6.js';
+import classNames from 'classnames';
+import React__default, { Component } from 'react';
+import CompCard from './CompCard/index.js';
+import Button from '../../../common/Button/index.js';
+import './index.less.js';
+
+var CompListPanel =
+/** @class */
+function (_super) {
+  __extends(CompListPanel, _super);
+
+  function CompListPanel() {
+    var _this = _super.call(this) || this;
+
+    _this.open = false;
+
+    _this.animation = function (type) {
+      document.getElementsByClassName('list_panel')[0].setAttribute('style', "animation-name:".concat(type, ";animation-duration: 0.3s;animation-fill-mode:both"));
+    };
+
+    _this.onClose = function () {
+      _this.open = false;
+
+      _this.animation('onListClose');
+    };
+
+    _this.onOpen = function () {
+      _this.open = true;
+
+      _this.animation('onListOpen');
+    };
+
+    _this.onAddClick = function (data) {
+      var onAdd = _this.props.onAdd;
+
+      _this.onClose();
+
+      onAdd(data);
+    };
+
+    _this.open = false;
+    return _this;
+  }
+
+  CompListPanel.prototype.render = function () {
+    var _this = this;
+
+    var compSource = this.props.compSource;
+    return /*#__PURE__*/React__default.createElement("div", {
+      className: classNames('list_panel')
+    }, /*#__PURE__*/React__default.createElement("header", {
+      className: "header"
+    }, /*#__PURE__*/React__default.createElement(Button, {
+      icon: "icon-close",
+      onClick: this.onClose,
+      type: "icon"
+    })), /*#__PURE__*/React__default.createElement("h2", {
+      className: "title"
+    }, "Add Component"), /*#__PURE__*/React__default.createElement("div", {
+      className: "component-list"
+    }, Object.keys(compSource).map(function (compCat) {
+      return /*#__PURE__*/React__default.createElement("div", {
+        key: compCat,
+        className: "cat-list"
+      }, /*#__PURE__*/React__default.createElement("h5", {
+        className: "cat-name"
+      }, compCat, "(", "".concat(compSource[compCat].length), ")"), compSource[compCat].map(function (comp) {
+        return /*#__PURE__*/React__default.createElement(CompCard, _extends({}, comp, {
+          key: comp.moduleId,
+          onAdd: _this.onAddClick
+        }));
+      }));
+    })));
+  };
+
+  return CompListPanel;
+}(Component);
+//   useEffect(() => {
+//     if (visible) {
+//       document.getElementsByClassName('component-list')[0].scrollTop = 0;
+//     }
+//   }, [visible]);
+//   return (
+//     <div className={classNames('compListPanel', { visible })}>
+//       <header className="header">
+//         <Button icon="icon-close" onClick={onClose} type="icon" />
+//       </header>
+//       <h2 className="title">Add Component</h2>
+//       <div className="component-list">
+//         {
+//           Object.keys(compSource).map(compCat => (
+//             <div key={compCat} className="cat-list">
+//               <h5 className="cat-name">{compCat}({`${compSource[compCat].length}`})</h5>
+//               {
+//                 compSource[compCat].map(comp => (
+//                   <CompCard {...comp} key={comp.moduleId} onAdd={onAdd} />
+//                 ))
+//               }
+//             </div>
+//           ))
+//         }
+//       </div>
+//     </div>
+//   );
+// }
+
+export { CompListPanel as default };

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

@@ -0,0 +1,4 @@
+import styleInject from '../../../../../node_modules/style-inject/dist/style-inject.es.js';
+
+var css_248z = ".index_list_panel__Ik0VD {\n  position: fixed;\n  left: -354px;\n  top: 0;\n  bottom: 0;\n  width: 354px;\n  background: #FFFFFF;\n  box-shadow: inset -1px 0px 0px #EDF0F4;\n  transition: all 0.3s ease;\n  z-index: 200;\n}\n.index_list_panel__Ik0VD .index_header__cvSCP {\n  height: 80px;\n  display: flex;\n  padding: 16px 24px;\n}\n.index_list_panel__Ik0VD .index_title__bRU59 {\n  padding: 12px 24px;\n  font-family: 'OpenSans-Bold';\n  font-size: 26px;\n  line-height: 32px;\n  color: #232F46;\n}\n.index_list_panel__Ik0VD .index_component-list__08Lqm {\n  height: calc(100vh - 136px);\n  overflow-y: auto;\n  padding: 0 24px;\n}\n.index_list_panel__Ik0VD .index_component-list__08Lqm::-webkit-scrollbar {\n  width: 8px;\n}\n.index_list_panel__Ik0VD .index_component-list__08Lqm::-webkit-scrollbar-thumb {\n  background-color: #C1C9D7;\n  background-clip: padding-box;\n  border-radius: 100px;\n}\n.index_list_panel__Ik0VD .index_component-list__08Lqm .index_cat-list__C15zF {\n  padding-bottom: 24px;\n}\n.index_list_panel__Ik0VD .index_component-list__08Lqm .index_cat-list__C15zF .index_cat-name__iMsCL {\n  font-family: 'Open Sans';\n  font-style: normal;\n  font-weight: 400;\n  font-size: 16px;\n  line-height: 24px;\n  color: #8493AF;\n}\n@keyframes index_onListOpen__saD1n {\n  from {\n    left: -354px;\n  }\n  to {\n    left: 0px;\n  }\n}\n@keyframes index_onListClose__MhlFI {\n  from {\n    left: 0px;\n  }\n  to {\n    left: -354px;\n  }\n}\n";
+styleInject(css_248z);

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

@@ -0,0 +1,246 @@
+import { __extends } from '../../../../../node_modules/tslib/tslib.es6.js';
+import React__default, { Component } from 'react';
+import { isPc } from '../../../utils/coreUtil.js';
+import { ensure } from '../../../utils/commonUtil.js';
+import Button from '../../../common/Button/index.js';
+import { compInfoMap, deviceTypeMap } from '../../../constants/index.js';
+import { configPanelMap, secondConfigPanelMap } from '../../../constants/component-types.js';
+import { store } from '../../../mobx/index.js';
+import './index.less.js';
+import { autorun } from '../../../../../node_modules/mobx/dist/mobx.esm.js';
+
+var ConfigPanel =
+/** @class */
+function (_super) {
+  __extends(ConfigPanel, _super);
+
+  function ConfigPanel() {
+    var _this = _super !== null && _super.apply(this, arguments) || this;
+
+    _this.preClickedGroup = null; // 以及面板展开状态
+
+    _this.configOpen = false;
+    _this.state = {
+      selectedNode: {}
+    };
+
+    _this.animation = function (type) {
+      document.getElementsByClassName('config_wrap')[0].setAttribute('style', "animation-name:".concat(type, ";animation-duration: 0.3s;animation-fill-mode:both"));
+    };
+
+    _this.openPcConfig = function () {
+      _this.animation('openPcConfig');
+    };
+
+    _this.closePcConfig = function () {
+      _this.animation('closePcConfig');
+    };
+
+    _this.openMobileConfig = function () {
+      _this.animation('openMobileConfig');
+    };
+
+    _this.closeMobileConfig = function () {
+      _this.animation('closeMobileConfig');
+    };
+
+    _this.openConfig = function () {
+      if (_this.configOpen) {
+        return;
+      }
+
+      if (window.magicDesign.device === 'pc') {
+        _this.openPcConfig();
+      } else {
+        _this.openMobileConfig();
+      }
+
+      _this.configOpen = true;
+    };
+
+    _this.closeConfig = function () {
+      if (!_this.configOpen) {
+        return;
+      }
+
+      if (window.magicDesign.device === 'pc') {
+        _this.closePcConfig();
+      } else {
+        _this.closeMobileConfig();
+      }
+
+      _this.configOpen = false;
+    };
+
+    _this.openSecConfig = function () {
+      var _a;
+
+      (_a = document.getElementsByClassName('sec_config_wrap')[0]) === null || _a === void 0 ? void 0 : _a.setAttribute('style', 'animation-name:openSecConfig;animation-duration: 0.3s;animation-fill-mode:both');
+    };
+
+    _this.closeSecConfig = function () {
+      var _a;
+
+      (_a = document.getElementsByClassName('sec_config_wrap')[0]) === null || _a === void 0 ? void 0 : _a.setAttribute('style', 'animation-name:closeSecConfig;animation-duration: 0.3s;animation-fill-mode:both');
+      store.setState({
+        clickedMeta: ''
+      });
+    };
+
+    _this.onDoneClick = function () {
+      var _a = _this.props,
+          device = _a.device,
+          onClose = _a.onClose;
+
+      if (device === deviceTypeMap.PC) {
+        _this.closePcConfig();
+      }
+
+      onClose();
+    };
+
+    _this.getConfigPanelInstance = function () {
+      var device = _this.props.device;
+      var selectedNode = _this.state.selectedNode;
+      var Clazz = configPanelMap[selectedNode === null || selectedNode === void 0 ? void 0 : selectedNode.type];
+      var panelProps = {
+        data: selectedNode,
+        device: device
+      };
+      var instance = Clazz ? /*#__PURE__*/React__default.createElement(Clazz, panelProps) : null;
+      return instance;
+    };
+
+    _this.getSecondConfigInstance = function () {
+      var selectedNode = _this.state.selectedNode;
+      var Clazz = secondConfigPanelMap[selectedNode === null || selectedNode === void 0 ? void 0 : selectedNode.type];
+      var panelProps = ensure(function () {
+        return selectedNode === null || selectedNode === void 0 ? void 0 : selectedNode.groupSource.find(function (src) {
+          return src.id === _this.state.clickedGroup;
+        });
+      }, null);
+
+      if (panelProps) {
+        var instance = Clazz ? /*#__PURE__*/React__default.createElement(Clazz, {
+          panelProps: panelProps
+        }) : null;
+        return instance;
+      }
+
+      return null;
+    };
+
+    _this.getSecondConfigName = function () {
+      var _a, _b, _c, _d, _e;
+
+      var selectedNode = _this.state.selectedNode;
+
+      if (!selectedNode || !selectedNode.groupSource) {
+        return;
+      }
+
+      var panelProps = selectedNode.groupSource.find(function (src) {
+        return src.id === _this.state.clickedGroup;
+      });
+
+      if (!panelProps) {
+        return;
+      }
+
+      var groupName = '';
+
+      switch (selectedNode.type) {
+        case 'BANNER':
+          groupName = (_a = panelProps.title) === null || _a === void 0 ? void 0 : _a.text;
+
+          if (!groupName) {
+            groupName = isPc() ? (_c = (_b = panelProps.image) === null || _b === void 0 ? void 0 : _b.content) === null || _c === void 0 ? void 0 : _c.pcName : (_e = (_d = panelProps.image) === null || _d === void 0 ? void 0 : _d.content) === null || _e === void 0 ? void 0 : _e.h5Name;
+          }
+
+          break;
+
+        case 'RECOMMEND':
+          groupName = panelProps.groupName.text;
+      }
+
+      return groupName || 'Group Name';
+    };
+
+    _this.onSecConfigBack = function () {
+      store.setState({
+        clickedGroup: null
+      });
+    };
+
+    return _this;
+  }
+
+  ConfigPanel.prototype.componentDidMount = function () {
+    var _this = this;
+
+    this.distroy = autorun(function () {
+      var selectedNode = store.getFloorInfo();
+
+      _this.setState({
+        clickedGroup: store.clickedGroup,
+        selectedNode: selectedNode
+      }); // 展开以及面板
+
+
+      if (selectedNode) {
+        _this.openConfig();
+      } else {
+        _this.closeConfig();
+      } // 展开首期二级面板
+
+
+      if (!store.clickedGroup) {
+        _this.closeSecConfig();
+      } else if (store.clickedGroup !== _this.preClickedGroup) {
+        _this.openSecConfig();
+      }
+
+      _this.preClickedGroup = store.clickedGroup;
+    });
+  };
+
+  ConfigPanel.prototype.componentWillUnmount = function () {
+    this.distroy();
+  };
+
+  ConfigPanel.prototype.render = function () {
+    var _a, _b;
+
+    var device = this.props.device;
+    var selectedNode = this.state.selectedNode;
+    return /*#__PURE__*/React__default.createElement("div", {
+      className: "config_wrap"
+    }, /*#__PURE__*/React__default.createElement("div", {
+      className: "first_config_wrap"
+    }, /*#__PURE__*/React__default.createElement("div", {
+      className: "config_header"
+    }, /*#__PURE__*/React__default.createElement("span", {
+      className: "title",
+      title: (_a = compInfoMap[selectedNode === null || selectedNode === void 0 ? void 0 : selectedNode.type]) === null || _a === void 0 ? void 0 : _a.name
+    }, (_b = compInfoMap[selectedNode === null || selectedNode === void 0 ? void 0 : selectedNode.type]) === null || _b === void 0 ? void 0 : _b.name), device === deviceTypeMap.PC && /*#__PURE__*/React__default.createElement(Button, {
+      onClick: this.onDoneClick,
+      type: "light"
+    }, "Done")), this.getConfigPanelInstance()), /*#__PURE__*/React__default.createElement("div", {
+      className: "sec_config_wrap"
+    }, /*#__PURE__*/React__default.createElement("div", {
+      className: "config_header"
+    }, /*#__PURE__*/React__default.createElement("div", {
+      className: "button_wrap"
+    }, /*#__PURE__*/React__default.createElement(Button, {
+      icon: "icon-left",
+      onClick: this.onSecConfigBack,
+      type: "icon"
+    })), /*#__PURE__*/React__default.createElement("div", {
+      className: "title"
+    }, this.getSecondConfigName())), this.getSecondConfigInstance()));
+  };
+
+  return ConfigPanel;
+}(Component);
+
+export { ConfigPanel as default };

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

@@ -0,0 +1,4 @@
+import styleInject from '../../../../../node_modules/style-inject/dist/style-inject.es.js';
+
+var css_248z = ".index_config_wrap__ZFRcU {\n  width: 354px;\n  background: #ffffff;\n  height: 100vh;\n  overflow: scroll;\n  transition-property: transform;\n  transition-duration: 0.3s;\n  transition-timing-function: ease;\n  left: -354px;\n  z-index: 200;\n  position: absolute;\n  flex-shrink: 0;\n}\n.index_config_wrap__ZFRcU.index_show_config__vn9GX {\n  position: fixed;\n  transform: translateX(354px);\n}\n.index_config_wrap__ZFRcU .index_first_config_wrap__bNQvD {\n  height: 100%;\n  padding: 24px;\n}\n.index_config_wrap__ZFRcU .index_first_config_wrap__bNQvD .index_config_header__t6JNr {\n  font-size: 26px;\n  line-height: 36px;\n  display: flex;\n  justify-content: space-between;\n  margin-bottom: 10px;\n}\n.index_config_wrap__ZFRcU .index_first_config_wrap__bNQvD .index_config_header__t6JNr .index_title__kHwtD {\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  font-family: 'Open Sans';\n  font-style: normal;\n  font-weight: 700;\n  font-size: 26px;\n  line-height: 32px;\n  color: #232F46;\n}\n.index_config_wrap__ZFRcU .index_sec_config_wrap__Jb4MT {\n  position: absolute;\n  width: 354px;\n  left: -354px;\n  bottom: 0;\n  top: 0;\n  background-color: #FFF;\n  padding: 24px;\n}\n.index_config_wrap__ZFRcU .index_sec_config_wrap__Jb4MT .index_config_header__t6JNr .index_button_wrap__6Lv2T {\n  display: flex;\n}\n.index_config_wrap__ZFRcU .index_sec_config_wrap__Jb4MT .index_config_header__t6JNr .index_title__kHwtD {\n  margin-top: 20px;\n  font-family: 'Open Sans';\n  font-style: normal;\n  font-weight: 700;\n  font-size: 26px;\n  line-height: 32px;\n  color: #232F46;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n@keyframes index_openPcConfig__7z4O4 {\n  from {\n    left: -354px;\n  }\n  to {\n    left: 0px;\n  }\n}\n@keyframes index_closePcConfig__-h55I {\n  from {\n    left: 0px;\n  }\n  to {\n    left: -354px;\n  }\n}\n@keyframes index_openMobileConfig__amVYY {\n  from {\n    left: 0px;\n    z-index: 50;\n  }\n  to {\n    left: 355px;\n    z-index: 50;\n  }\n}\n@keyframes index_closeMobileConfig__FMac7 {\n  from {\n    left: 355px;\n    z-index: 50;\n  }\n  to {\n    left: 0px;\n    z-index: 50;\n  }\n}\n@keyframes index_openSecConfig__vl7hj {\n  from {\n    left: -354px;\n  }\n  to {\n    left: 0px;\n  }\n}\n@keyframes index_closeSecConfig__W2NxA {\n  from {\n    left: 0px;\n  }\n  to {\n    left: -354px;\n  }\n}\n";
+styleInject(css_248z);

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

@@ -0,0 +1,82 @@
+import cloneDeep_1 from '../../../../../node_modules/lodash/cloneDeep.js';
+
+/**
+ * 历史队列，使用数组存放
+ * 有新的操作时存入数组的0位置，游标设置为0
+ *
+ */
+
+var debug = require('debug')('worker:History');
+
+var History =
+/** @class */
+function () {
+  function History(hist) {
+    var _this = this;
+    /**
+     * 游标位置
+     */
+
+
+    this.cursor = 0;
+    /**
+     * 历史数据
+     */
+
+    this.list = [];
+
+    this.redoAble = function () {
+      return _this.cursor !== 0;
+    };
+
+    this.undoAble = function () {
+      return _this.cursor !== _this.list.length - 1;
+    };
+    /**
+     * 清空0～cursor之间的数据，将data插入 位置0
+     */
+
+
+    this.push = function (data) {
+      debug('push data', data);
+      var cloneData = cloneDeep_1(data);
+
+      _this.list.splice(0, _this.cursor, cloneData);
+
+      return data;
+    };
+    /**
+     * redu操作只修改当前游标-1
+     * 并且返回后一步的json对象
+     */
+
+
+    this.redo = function () {
+      debug('redo click');
+      var newCursor = _this.cursor - 1;
+      _this.cursor = newCursor;
+      var newData = _this.list[newCursor];
+      return newData;
+    };
+    /**
+     * undo操作只修改当前的游标+1
+     * 并且返回前一步的json对象
+     */
+
+
+    this.undo = function () {
+      debug('undo click');
+      var newCursor = _this.cursor + 1;
+      _this.cursor = newCursor;
+      var newData = _this.list[newCursor];
+      return newData;
+    };
+
+    this.cursor = 0;
+    this.list = [hist];
+  }
+
+  return History;
+}();
+
+export { History as default };