@fonixtree/magic-design 0.0.16 → 0.0.19

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

@@ -0,0 +1,246 @@
+import { __extends } from '../../../../../my_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 'mobx';
+
+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,6 @@
+import styleInject from '../../../../../my_node_modules/style-inject/dist/style-inject.es.js';
+
+var css_248z = ".config_wrap {\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.config_wrap.show_config {\n  position: fixed;\n  transform: translateX(354px);\n}\n.config_wrap .first_config_wrap {\n  height: 100%;\n  padding: 24px;\n}\n.config_wrap .first_config_wrap .config_header {\n  font-size: 26px;\n  line-height: 36px;\n  display: flex;\n  justify-content: space-between;\n  margin-bottom: 10px;\n}\n.config_wrap .first_config_wrap .config_header .title {\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.config_wrap .sec_config_wrap {\n  position: absolute;\n  width: 354px;\n  left: -354px;\n  bottom: 0;\n  top: 0;\n  background-color: #FFF;\n  padding: 24px;\n}\n.config_wrap .sec_config_wrap .config_header .button_wrap {\n  display: flex;\n}\n.config_wrap .sec_config_wrap .config_header .title {\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 openPcConfig {\n  from {\n    left: -354px;\n  }\n  to {\n    left: 0px;\n  }\n}\n@keyframes closePcConfig {\n  from {\n    left: 0px;\n  }\n  to {\n    left: -354px;\n  }\n}\n@keyframes openMobileConfig {\n  from {\n    left: 0px;\n    z-index: 50;\n  }\n  to {\n    left: 355px;\n    z-index: 50;\n  }\n}\n@keyframes closeMobileConfig {\n  from {\n    left: 355px;\n    z-index: 50;\n  }\n  to {\n    left: 0px;\n    z-index: 50;\n  }\n}\n@keyframes openSecConfig {\n  from {\n    left: -354px;\n  }\n  to {\n    left: 0px;\n  }\n}\n@keyframes closeSecConfig {\n  from {\n    left: 0px;\n  }\n  to {\n    left: -354px;\n  }\n}\n";
+styleInject(css_248z);
+
+export { css_248z as default };

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

@@ -0,0 +1,82 @@
+import cloneDeep_1 from '../../../../../my_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 };

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

@@ -0,0 +1,248 @@
+import { __spreadArray } from '../../../../../my_node_modules/tslib/tslib.es6.js';
+import { Menu, Dropdown } from 'antd';
+import classNames from '../../../../../my_node_modules/classnames/index.js';
+import update from 'immutability-helper';
+import React__default, { useState, useRef, useEffect, useCallback } from 'react';
+import '../../../common/LayoutSelector/index.js';
+import '../../../common/Field/index.js';
+import '../../../common/UrlPicker/index.js';
+import Iconfont from '../../../common/Iconfont/index.js';
+import Button from '../../../common/Button/index.js';
+import '../../../common/AlignSelector/index.js';
+import '../../../common/Collapse/index.js';
+import '../../../common/ColorPickerInput/index.js';
+import '../../../common/ImagePicker/index.js';
+import '../../../common/IconPicker/index.js';
+import '../../../common/SwitchCollapse/index.js';
+import '../../../common/Slider/index.js';
+import '../../../common/FontStyles/index.js';
+import '../../../common/ButtonIconLayout/index.js';
+import 'axios';
+import '../../../../../my_node_modules/qs/lib/stringify.js';
+import '../../../../../my_node_modules/qs/lib/utils.js';
+import '../../../common/ProductModal/index.js';
+import '../../../common/ProductSource/index.less.js';
+import { copyNode } from '../../../utils/coreUtil.js';
+import './index.less.js';
+import { compInfoMap } from '../../../constants/index.js';
+import { store } from '../../../mobx/index.js';
+import { autorun } from 'mobx';
+
+var operTypeMap = {
+  MOVE_UP: '1',
+  MOVE_DOWN: '2',
+  COPY: '3',
+  DELETE: '4'
+};
+function PageCompList(_a) {
+  var setPageData = _a.setPageData,
+      pageData = _a.pageData,
+      onAdd = _a.onAdd,
+      renderPagesManage = _a.renderPagesManage,
+      pageName = _a.pageName;
+
+  var _b = useState(pageData || []),
+      components = _b[0],
+      setComponents = _b[1];
+
+  var _c = useState(''),
+      dragId = _c[0],
+      setDragId = _c[1];
+
+  var _d = useState(''),
+      clickedFloor = _d[0],
+      setClickedFloor = _d[1];
+
+  var ref = useRef();
+  useEffect(function () {
+    setComponents(pageData || []);
+  }, [pageData]);
+  useEffect(function () {
+    var distroy = autorun(function () {
+      setClickedFloor(store.clickedFloor);
+    });
+    return distroy;
+  }, []);
+  var moveCard = useCallback(function (dragNodeId, hoverNodeId) {
+    var dragIndex = components.findIndex(function (comp) {
+      return comp.id === dragNodeId;
+    });
+    var hoverIndex = components.findIndex(function (comp) {
+      return comp.id === hoverNodeId;
+    });
+    setComponents(function (prevCards) {
+      var newComps = update(prevCards, {
+        $splice: [[dragIndex, 1], [hoverIndex, 0, prevCards[dragIndex]]]
+      });
+      ref.current = newComps;
+      return newComps;
+    });
+  }, [components]);
+
+  var onDragStart = function (e) {
+    setDragId(e.currentTarget.dataset.nodeid);
+  };
+
+  var onDragEnter = function (e) {
+    var hoverNodeId = e.currentTarget.dataset.nodeid;
+
+    if (dragId === hoverNodeId) {
+      return;
+    }
+
+    moveCard(dragId, hoverNodeId);
+  };
+
+  var onDragEnd = function () {
+    setDragId('');
+
+    if (ref.current) {
+      setPageData(ref.current);
+    }
+  };
+
+  var onMenuClick = function (index, operType) {
+    var newComponents = __spreadArray([], components, true);
+
+    if (operType === operTypeMap.MOVE_UP) {
+      var temp = newComponents[index - 1];
+      newComponents[index - 1] = newComponents[index];
+      newComponents[index] = temp;
+    } else if (operType === operTypeMap.MOVE_DOWN) {
+      var temp = newComponents[index + 1];
+      newComponents[index + 1] = newComponents[index];
+      newComponents[index] = temp;
+    } else if (operType === operTypeMap.COPY) {
+      var copyComponent = copyNode(newComponents[index]);
+      newComponents.splice(index + 1, 0, copyComponent);
+    } else if (operType === operTypeMap.DELETE) {
+      if (newComponents[index].id === clickedFloor) {
+        store.setState({
+          clickedFloor: null
+        });
+      }
+
+      newComponents.splice(index, 1);
+    } // setComponents(newComponents);
+
+
+    setPageData(newComponents);
+  };
+
+  var componentScrollTop = function (data) {
+    if (document.getElementById("view".concat(data.id))) {
+      document.getElementById("view".concat(data.id)).scrollIntoView({
+        behavior: 'smooth'
+      });
+    }
+  };
+
+  var onCardClick = function (event, data) {
+    componentScrollTop(data); // 这里必须阻止事件冒泡，然后再触发自定义的事件
+
+    event.preventDefault();
+    event.stopPropagation();
+    var evt = new Event('component-click', {
+      bubbles: false
+    });
+    evt.data = data;
+    window.document.dispatchEvent(evt);
+    if (clickedFloor === data.id) return;
+    store.setState({
+      clickedFloor: data.id
+    });
+  };
+
+  var renderCard = function (comp, index) {
+    var menu = /*#__PURE__*/React__default.createElement(Menu, {
+      onClick: function (_a) {
+        var item = _a.item;
+        return onMenuClick(index, item.props.value);
+      }
+    }, index !== 0 && /*#__PURE__*/React__default.createElement(Menu.Item, {
+      className: "menu_item",
+      value: "1"
+    }, "Move Up"), index !== components.length - 1 && /*#__PURE__*/React__default.createElement(Menu.Item, {
+      className: "menu_item",
+      value: "2"
+    }, "Move Down"), /*#__PURE__*/React__default.createElement(Menu.Item, {
+      className: "menu_item",
+      value: "3"
+    }, "Copy"), /*#__PURE__*/React__default.createElement(Menu.Item, {
+      className: "menu_item",
+      value: "4"
+    }, "Delete"));
+    var dragging = dragId === String(comp.id);
+    var active = clickedFloor === String(comp.id);
+    return /*#__PURE__*/React__default.createElement("div", {
+      key: "card".concat(comp.id),
+      className: classNames('card-wrap', {
+        active: active
+      }),
+      "data-nodeid": comp.id,
+      draggable: "true",
+      id: "card".concat(comp.id),
+      onDragEnd: onDragEnd,
+      onDragEnter: onDragEnter,
+      onDragOver: function (e) {
+        e.preventDefault();
+      },
+      onDragStart: onDragStart,
+      style: {
+        opacity: dragging ? '0.4' : '1'
+      }
+    }, /*#__PURE__*/React__default.createElement("div", {
+      className: "left",
+      onClick: function (e) {
+        return onCardClick(e, comp);
+      }
+    }, /*#__PURE__*/React__default.createElement(Iconfont, {
+      className: "comp-icon",
+      color: active ? '#2F54EB' : '',
+      size: "20px",
+      type: compInfoMap[comp.type].icon
+    }), /*#__PURE__*/React__default.createElement(Iconfont, {
+      className: "drag-icon",
+      color: "#2F54EB",
+      size: "20px",
+      type: "icon-drag"
+    }), /*#__PURE__*/React__default.createElement("span", {
+      className: "card-title ml16"
+    }, index + 1, ". ", compInfoMap[comp.type].name)), /*#__PURE__*/React__default.createElement(Dropdown, {
+      overlay: menu,
+      placement: "bottomRight",
+      trigger: ['click']
+    }, /*#__PURE__*/React__default.createElement(Iconfont, {
+      className: "more-btn",
+      color: "#2F54EB",
+      size: "20px",
+      style: {
+        height: '40px'
+      },
+      type: "icon-more"
+    })));
+  };
+
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: "page-comp-wrap"
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "page-comp-head"
+  }, renderPagesManage), /*#__PURE__*/React__default.createElement("div", {
+    className: "page-comp-list"
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "title mb16"
+  }, pageName), /*#__PURE__*/React__default.createElement(Button, {
+    icon: "icon-add",
+    onClick: onAdd,
+    size: "large",
+    type: "light"
+  }, "Add Component"), /*#__PURE__*/React__default.createElement("div", {
+    className: "list mt16"
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "inner-list"
+  }, /*#__PURE__*/React__default.createElement("div", null, components.length > 0 && components.map(function (comp, i) {
+    return renderCard(comp, i);
+  }))))));
+}
+
+export { PageCompList as default };

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

@@ -0,0 +1,6 @@
+import styleInject from '../../../../../my_node_modules/style-inject/dist/style-inject.es.js';
+
+var css_248z = ".page-comp-wrap {\n  z-index: 100;\n  background-color: #FFF;\n  width: 354px;\n  flex-shrink: 0;\n}\n.page-comp-wrap .page-comp-head {\n  height: 81px;\n  box-shadow: inset 0px -1px 0px #EDF0F4;\n}\n.page-comp-wrap .page-comp-list {\n  padding: 24px;\n}\n.page-comp-wrap .page-comp-list .title {\n  font-family: 'Open Sans';\n  font-style: normal;\n  font-weight: 700;\n  font-size: 26px;\n  line-height: 36px;\n  color: #232F46;\n}\n.page-comp-wrap .page-comp-list .list .inner-list {\n  margin-right: -21px;\n  overflow-y: auto;\n  width: 100%;\n  padding: 8px 0px 8px 0;\n  height: calc(100vh - 260px);\n  background: #F5F6F7;\n  border-radius: 8px;\n}\n.page-comp-wrap .page-comp-list .list .inner-list::-webkit-scrollbar {\n  width: 8px;\n}\n.page-comp-wrap .page-comp-list .list .inner-list::-webkit-scrollbar-track-piece {\n  background-color: #fff;\n}\n.page-comp-wrap .page-comp-list .list .inner-list::-webkit-scrollbar-thumb {\n  background-color: #C1C9D7;\n  background-clip: padding-box;\n  border-radius: 100px;\n}\n.card-wrap {\n  display: flex;\n  justify-content: space-between;\n  cursor: move;\n  height: 64px;\n  line-height: 64px;\n  padding: 0 20px;\n  color: #232F46;\n}\n.card-wrap .left {\n  width: 100%;\n  display: flex;\n  align-items: center;\n}\n.card-wrap .left .comp-icon {\n  display: block;\n}\n.card-wrap .left .drag-icon {\n  display: none;\n}\n.card-wrap .left .card-title {\n  line-height: 24px;\n  font-family: 'Open Sans';\n  font-weight: 400;\n  font-size: 16px;\n  font-style: normal;\n}\n.card-wrap .more-btn {\n  display: none;\n  cursor: pointer;\n}\n.card-wrap:hover {\n  background: #E9F0FF;\n  color: #2F54EB;\n}\n.card-wrap:hover .left {\n  font-family: 'Open Sans';\n  font-style: normal;\n  font-weight: 600;\n  font-size: 16px;\n  line-height: 24px;\n}\n.card-wrap:hover .left .comp-icon {\n  display: none;\n}\n.card-wrap:hover .left .drag-icon {\n  display: block;\n}\n.card-wrap:hover .left .card-title {\n  font-weight: 600;\n}\n.card-wrap:hover .more-btn {\n  display: block;\n}\n.active {\n  background: #E9F0FF;\n  color: #2F54EB;\n}\n.active .left .card-title {\n  font-weight: 600;\n}\n.active .more-btn {\n  display: block;\n}\n";
+styleInject(css_248z);
+
+export { css_248z as default };