@fonixtree/magic-design 0.0.1

package/es/constants/index.js

@@ -0,0 +1,144 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.urlType = exports.respCodeMap = exports.quickMenuCode = exports.metaType = exports.metaInst = exports.metaInsType = exports.magicMode = exports.deviceTypeMap = exports.compInfoMap = void 0;
+var urlType = {
+  PRODUCT_DETAIL: 'proDetail',
+  CATG_PROD_LIST: 'catg',
+  GIVEAWAY_MISSION: 'specialMission',
+  CUSTOMIZED: 'customized',
+  PROD_FILTER: 'filter',
+  ANCHOR: 'anchor',
+  GET_COUPON: 'coupons'
+};
+exports.urlType = urlType;
+var respCodeMap = {
+  NOT_LOGGED_IN: 'BUYER-WEB-06003'
+};
+exports.respCodeMap = respCodeMap;
+var deviceTypeMap = {
+  PC: 'pc',
+  PHONE: 'mobile'
+};
+exports.deviceTypeMap = deviceTypeMap;
+var magicMode = {
+  DESIGNER: 'designer',
+  RENDERER: 'renderer'
+};
+exports.magicMode = magicMode;
+var quickMenuCode = {
+  UNDO: 'UNDO',
+  REDO: 'REDO',
+  PREVIEW: 'PREVIEW',
+  SAVE: 'SAVE',
+  PUBLISH: 'PUBLISH',
+  MODE_PC: 'MODE_PC',
+  MODE_PHONE: 'MODE_PHONE'
+};
+exports.quickMenuCode = quickMenuCode;
+var compInfoMap = {
+  BANNER: {
+    name: 'Banner',
+    icon: 'icon-carousel'
+  },
+  BUTTON: {
+    name: 'Button',
+    icon: 'icon-button'
+  },
+  TAG: {
+    name: 'Tag',
+    icon: 'icon-tags'
+  },
+  NEWSLETTER: {
+    name: 'Newsletter',
+    icon: 'icon-newsletter'
+  },
+  TEXT: {
+    name: 'Text',
+    icon: 'icon-text'
+  },
+  FLASH_DEAL: {
+    name: 'Flash Deal',
+    icon: 'icon-flash-deal'
+  },
+  SEARCH: {
+    name: 'Search',
+    icon: 'icon-search'
+  },
+  IMAGE_TEXT: {
+    name: 'Image and Text',
+    icon: 'icon-filled-image'
+  },
+  RECOMMEND: {
+    name: 'Recommend',
+    icon: 'icon-forms'
+  },
+  DIVIDER: {
+    name: 'Divider',
+    icon: 'icon-divider-1'
+  },
+  IMAGE_GALLERY: {
+    name: 'ImageGallery',
+    icon: 'icon-image-gallery'
+  },
+  CAROUSEL: {
+    name: 'Carousel',
+    icon: 'icon-carousel'
+  }
+};
+/**
+ * 元组件类型
+ */
+
+exports.compInfoMap = compInfoMap;
+var metaType = {
+  IMAGE: 'IMAGE',
+  TEXT: 'TEXT',
+  BUTTON: 'BUTTON'
+};
+/**
+ * 元组件实例类型
+ */
+
+exports.metaType = metaType;
+var metaInsType = {
+  IMAGE: 'image',
+  TITLE: 'title',
+  TEXT: 'text',
+  BUTTON: 'button',
+  SECOND_BUTTON: 'secondButton'
+};
+/**
+ * 元组件实例名称
+ */
+
+exports.metaInsType = metaInsType;
+var metaInst = {
+  image: {
+    name: 'Image',
+    type: metaType.IMAGE
+  },
+  title: {
+    name: 'Title',
+    type: metaType.TEXT
+  },
+  subTitle: {
+    name: 'Sub Title',
+    type: metaType.TEXT
+  },
+  text: {
+    name: 'Text',
+    type: metaType.TEXT
+  },
+  button: {
+    name: 'Button',
+    type: metaType.BUTTON
+  },
+  secondButton: {
+    name: 'Secondary Button',
+    type: metaType.BUTTON
+  }
+};
+exports.metaInst = metaInst;

package/es/constants/layout.js

@@ -0,0 +1,120 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.searchLayout = exports.newsletterLayout = exports.imageTextLayoutPc = exports.imageTextLayoutMobile = exports.imageGalleryLayout = exports.dividerLayout = exports.carouselLayout = void 0;
+
+var _dividerLayout = _interopRequireDefault(require("../assets/images/layout-icon/dividerLayout.svg"));
+
+var _layoutSearch = _interopRequireDefault(require("../assets/images/layout-icon/layout-search.png"));
+
+var _imageGalleryLayout = _interopRequireDefault(require("../assets/images/layout-icon/imageGalleryLayout1.png"));
+
+var _imageGalleryLayout2 = _interopRequireDefault(require("../assets/images/layout-icon/imageGalleryLayout2.png"));
+
+var _imageGalleryLayout3 = _interopRequireDefault(require("../assets/images/layout-icon/imageGalleryLayout3.png"));
+
+var _layoutImagetextM = _interopRequireDefault(require("../assets/images/layout-icon/layout-imagetext-m1-1.png"));
+
+var _layoutImagetextM2 = _interopRequireDefault(require("../assets/images/layout-icon/layout-imagetext-m1-2.png"));
+
+var _layoutImagetextM3 = _interopRequireDefault(require("../assets/images/layout-icon/layout-imagetext-m1-3.png"));
+
+var _layoutImagetextM4 = _interopRequireDefault(require("../assets/images/layout-icon/layout-imagetext-m2.png"));
+
+var _layoutImagetextM5 = _interopRequireDefault(require("../assets/images/layout-icon/layout-imagetext-m3.png"));
+
+var _carouselLayout = _interopRequireDefault(require("../assets/images/layout-icon/carouselLayout1.png"));
+
+var _carouselLayout2 = _interopRequireDefault(require("../assets/images/layout-icon/carouselLayout2.png"));
+
+var _layoutImagetextP = _interopRequireDefault(require("../assets/images/layout-icon/layout-imagetext-p1.png"));
+
+var _layoutImagetextP2 = _interopRequireDefault(require("../assets/images/layout-icon/layout-imagetext-p2.png"));
+
+var _layoutImagetextP3 = _interopRequireDefault(require("../assets/images/layout-icon/layout-imagetext-p4.png"));
+
+var _newsletter = _interopRequireDefault(require("../assets/images/layout-icon/newsletter.svg"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+// import p3 from '../assets/images/layout-icon/layout-imagetext-p3.png';
+var dividerLayout = [{
+  id: 'layout1',
+  name: 'layout1',
+  image: _dividerLayout["default"]
+}];
+exports.dividerLayout = dividerLayout;
+var searchLayout = [{
+  id: 'layout1',
+  name: 'left',
+  image: _layoutSearch["default"]
+}];
+exports.searchLayout = searchLayout;
+var imageGalleryLayout = [{
+  id: 'layout1',
+  name: 'layout1',
+  image: _imageGalleryLayout["default"]
+}, {
+  id: 'layout2',
+  name: 'layout2',
+  image: _imageGalleryLayout2["default"]
+}, {
+  id: 'layout3',
+  name: 'layout3',
+  image: _imageGalleryLayout3["default"]
+}];
+exports.imageGalleryLayout = imageGalleryLayout;
+var carouselLayout = [{
+  id: 'layout1',
+  name: 'layout1',
+  image: _carouselLayout["default"]
+}, {
+  id: 'layout2',
+  name: 'layout2',
+  image: _carouselLayout2["default"]
+}];
+exports.carouselLayout = carouselLayout;
+var imageTextLayoutPc = [{
+  id: 'layout1',
+  name: 'normal',
+  image: _layoutImagetextP["default"]
+}, {
+  id: 'layout2',
+  name: 'outside',
+  image: _layoutImagetextP2["default"]
+}, {
+  id: 'layout3',
+  name: 'center',
+  image: _layoutImagetextP3["default"]
+}];
+exports.imageTextLayoutPc = imageTextLayoutPc;
+var imageTextLayoutMobile = [{
+  id: 'layout1',
+  name: 'normal1',
+  image: _layoutImagetextM["default"]
+}, {
+  id: 'layout1',
+  name: 'normal2',
+  image: _layoutImagetextM2["default"]
+}, {
+  id: 'layout1',
+  name: 'normal3',
+  image: _layoutImagetextM3["default"]
+}, {
+  id: 'layout2',
+  name: 'outsideM',
+  image: _layoutImagetextM4["default"]
+}, {
+  id: 'layout3',
+  name: 'centerM',
+  image: _layoutImagetextM5["default"]
+}];
+exports.imageTextLayoutMobile = imageTextLayoutMobile;
+var newsletterLayout = [{
+  id: 'layout1',
+  name: 'layout1',
+  image: _newsletter["default"]
+}];
+exports.newsletterLayout = newsletterLayout;

package/es/core/Designer/CompListPanel/CompCard/index.js

@@ -0,0 +1,42 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = CompCard;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _Iconfont = _interopRequireDefault(require("../../../../common/Iconfont"));
+
+require("./index.less");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+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["default"], {
+    className: "comp-icon",
+    type: icon
+  }), /*#__PURE__*/_react["default"].createElement("span", {
+    className: "comp-name"
+  }, label)), /*#__PURE__*/_react["default"].createElement(_Iconfont["default"], {
+    className: "hover-icon",
+    color: "#2F54EB",
+    onClick: function onClick() {
+      return onAdd({
+        type: type,
+        label: label,
+        icon: icon
+      });
+    },
+    type: "icon-add"
+  })));
+}

package/es/core/Designer/CompListPanel/CompCard/index.less

@@ -0,0 +1,69 @@
+.compCard {
+  position: relative;
+  padding: 24px;
+  background: #F5F6F7;
+  border-radius: 8px;
+  margin-bottom: 10px;
+
+  &:hover {
+    background: #E9F0FF;
+    .comp-info {
+      .hover-icon {
+        display: block;
+      }
+    }
+  }
+  &.cardActive {
+    background: #E9F0FF;
+  }
+
+  .comp-info {
+    height: 16px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    .comp-name {
+      margin-left: 16px;
+      font-family: 'Open Sans';
+      font-style: normal;
+      font-weight: 400;
+      font-size: 16px;
+      line-height: 24px;
+      color: #232F46;
+    }
+    .hover-icon {
+      display: none;
+      cursor: pointer;
+    }
+  }
+  .comp-layout-panel {
+    max-height: 0;
+    transition: all .4s ease;
+    opacity: 0;
+    .layout_wrap {
+      display: flex;
+      .icon_wrap {
+        background: #FFFFFF;
+        border: 2px solid #FFFFFF;
+        box-sizing: border-box;
+        border-radius: 6px;
+        height: 57px;
+        width: 78px;
+        &:nth-child(3n +2) {
+          margin-left: 12px;
+          margin-right: 12px;
+        }
+      }
+      .layout_actice {
+        border-color: #597EF7;
+      }
+    }
+    .btn_wrap {
+      display: flex;
+    }
+  }
+  .panel-visible {
+    max-height: 200px;
+    opacity: 1;
+  }
+}

package/es/core/Designer/CompListPanel/index.js

@@ -0,0 +1,156 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _CompCard = _interopRequireDefault(require("./CompCard"));
+
+var _Button = _interopRequireDefault(require("../../../common/Button"));
+
+require("./index.less");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+var __extends = void 0 && (void 0).__extends || function () {
+  var _extendStatics = function extendStatics(d, b) {
+    _extendStatics = Object.setPrototypeOf || {
+      __proto__: []
+    } instanceof Array && function (d, b) {
+      d.__proto__ = b;
+    } || function (d, b) {
+      for (var p in b) {
+        if (b.hasOwnProperty(p)) d[p] = b[p];
+      }
+    };
+
+    return _extendStatics(d, b);
+  };
+
+  return function (d, b) {
+    _extendStatics(d, b);
+
+    function __() {
+      this.constructor = d;
+    }
+
+    d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+  };
+}();
+
+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:" + 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: (0, _classnames["default"])('list_panel')
+    }, /*#__PURE__*/_react["default"].createElement("header", {
+      className: "header"
+    }, /*#__PURE__*/_react["default"].createElement(_Button["default"], {
+      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, "(", "" + compSource[compCat].length, ")"), compSource[compCat].map(function (comp) {
+        return /*#__PURE__*/_react["default"].createElement(_CompCard["default"], _extends({}, comp, {
+          key: comp.moduleId,
+          onAdd: _this.onAddClick
+        }));
+      }));
+    })));
+  };
+
+  return CompListPanel;
+}(_react.Component);
+
+var _default = CompListPanel; // export default function CompListPanel({ visible, onClose, compSource, onAdd }) {
+//   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>
+//   );
+// }
+
+exports["default"] = _default;

package/es/core/Designer/CompListPanel/index.less

@@ -0,0 +1,69 @@
+.list_panel {
+  position: fixed;
+  left: -354px;
+  top: 0;
+  bottom: 0;
+  width: 354px;
+  background: #FFFFFF;
+  box-shadow: inset -1px 0px 0px #EDF0F4;
+  transition: all .3s ease;
+  z-index: 200;
+
+  .header {
+    height: 80px;
+    display: flex;
+    padding: 16px 24px;
+  }
+  .title {
+    padding: 12px 24px;
+    font-family: 'OpenSans-Bold';
+    font-size: 26px;
+    line-height: 32px;
+    color: #232F46;
+  }
+  .component-list {
+    height: calc(100vh - 136px);
+    overflow-y: auto;
+    padding: 0 24px;
+    &::-webkit-scrollbar {//滚动条的宽度
+      width:8px;
+    }
+    &::-webkit-scrollbar-thumb {//滚动条的设置
+      background-color:#C1C9D7;;
+      background-clip:padding-box;
+      border-radius: 100px;
+    }
+    .cat-list{
+      padding-bottom: 24px;
+      .cat-name{
+        font-family: 'Open Sans';
+        font-style: normal;
+        font-weight: 400;
+        font-size: 16px;
+        line-height: 24px;
+        color: #8493AF;
+      }
+      
+    }
+  }
+}
+
+@keyframes onListOpen {
+  from {
+    left: -354px;
+  }
+
+  to {
+    left: 0px;
+  }
+}
+
+@keyframes onListClose {
+  from {
+    left: 0px;
+  }
+
+  to {
+    left: -354px;
+  }
+}