@fonixtree/magic-design 0.0.73 → 0.0.74

package/lib/constants/component-types.js

@@ -0,0 +1,93 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.secondConfigPanelMap = exports.configPanelMap = exports.componentMap = void 0;
+
+var _Banner = _interopRequireDefault(require("../composite-comp/bol/components/Banner"));
+
+var _Text = _interopRequireDefault(require("../composite-comp/bol/components/Text"));
+
+var _ImageText = _interopRequireDefault(require("../composite-comp/bol/components/ImageText"));
+
+var _Divider = _interopRequireDefault(require("../composite-comp/bol/components/Divider"));
+
+var _ImageGallery = _interopRequireDefault(require("../composite-comp/bol/components/ImageGallery"));
+
+var _Newsletter = _interopRequireDefault(require("../composite-comp/bol/components/Newsletter"));
+
+var _Carousel = _interopRequireDefault(require("../composite-comp/bol/components/Carousel"));
+
+var _Button = _interopRequireDefault(require("../composite-comp/bol/components/Button"));
+
+var _Tag = _interopRequireDefault(require("../composite-comp/bol/components/Tag"));
+
+var _FlashDeal = _interopRequireDefault(require("../composite-comp/dito/components/FlashDeal"));
+
+var _SearchBar = _interopRequireDefault(require("../composite-comp/dito/components/SearchBar"));
+
+var _Recommend = _interopRequireDefault(require("../composite-comp/dito/components/Recommend"));
+
+var _MobileNavigation = _interopRequireDefault(require("../composite-comp/dito/components/MobileNavigation"));
+
+var _BannerConfig = _interopRequireDefault(require("../composite-comp/bol/config-panels/BannerConfig"));
+
+var _DividerConfig = _interopRequireDefault(require("../composite-comp/bol/config-panels/DividerConfig"));
+
+var _TextCompConfig = _interopRequireDefault(require("../composite-comp/bol/config-panels/TextCompConfig"));
+
+var _ImageTextConfig = _interopRequireDefault(require("../composite-comp/bol/config-panels/ImageTextConfig"));
+
+var _NewsletterConfig = _interopRequireDefault(require("../composite-comp/bol/config-panels/NewsletterConfig"));
+
+var _CarouselConfig = _interopRequireDefault(require("../composite-comp/bol/config-panels/CarouselConfig"));
+
+var _ImageGalleryConfig = _interopRequireDefault(require("../composite-comp/bol/config-panels/ImageGalleryConfig"));
+
+var _ButtonCompConfig = _interopRequireDefault(require("../composite-comp/bol/config-panels/ButtonCompConfig"));
+
+var _TagCompConfig = _interopRequireDefault(require("../composite-comp/bol/config-panels/TagCompConfig"));
+
+var _FlashDealConfig = _interopRequireDefault(require("../composite-comp/dito/config-panels/FlashDealConfig"));
+
+var _SearchBarConfig = _interopRequireDefault(require("../composite-comp/dito/config-panels/SearchBarConfig"));
+
+var _RecommendConfig = _interopRequireDefault(require("../composite-comp/dito/config-panels/RecommendConfig"));
+
+var _MobileNavigationConfig = _interopRequireDefault(require("../composite-comp/dito/config-panels/MobileNavigationConfig"));
+
+var _BannerSecondConfig = _interopRequireDefault(require("../composite-comp/bol/second-config-panels/BannerSecondConfig"));
+
+var _TextSecondConfig = _interopRequireDefault(require("../composite-comp/bol/second-config-panels/TextSecondConfig"));
+
+var _ImageTextSecondConfig = _interopRequireDefault(require("../composite-comp/bol/second-config-panels/ImageTextSecondConfig"));
+
+var _CarouselSecondConfig = _interopRequireDefault(require("../composite-comp/bol/second-config-panels/CarouselSecondConfig"));
+
+var _RecommendSecondConfig = _interopRequireDefault(require("../composite-comp/dito/second-config-panels/RecommendSecondConfig"));
+
+var _MobileNavigationSecondConfig = _interopRequireDefault(require("../composite-comp/dito/second-config-panels/MobileNavigationSecondConfig"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+var _a, _b, _c; // 组件
+
+
+/**
+ * 渲染组件索引
+ */
+var componentMap = (_a = {}, _a[_Banner["default"].type] = _Banner["default"], _a[_Text["default"].type] = _Text["default"], _a[_FlashDeal["default"].type] = _FlashDeal["default"], _a[_SearchBar["default"].type] = _SearchBar["default"], _a[_ImageText["default"].type] = _ImageText["default"], _a[_Recommend["default"].type] = _Recommend["default"], _a[_MobileNavigation["default"].type] = _MobileNavigation["default"], _a[_Divider["default"].type] = _Divider["default"], _a[_ImageGallery["default"].type] = _ImageGallery["default"], _a[_Newsletter["default"].type] = _Newsletter["default"], _a[_Carousel["default"].type] = _Carousel["default"], _a[_Button["default"].type] = _Button["default"], _a[_Tag["default"].type] = _Tag["default"], _a);
+/**
+ * 一级配置面板索引
+ */
+
+exports.componentMap = componentMap;
+var configPanelMap = (_b = {}, _b[_Banner["default"].type] = _BannerConfig["default"], _b[_Text["default"].type] = _TextCompConfig["default"], _b[_FlashDeal["default"].type] = _FlashDealConfig["default"], _b[_SearchBar["default"].type] = _SearchBarConfig["default"], _b[_ImageText["default"].type] = _ImageTextConfig["default"], _b[_Recommend["default"].type] = _RecommendConfig["default"], _b[_MobileNavigation["default"].type] = _MobileNavigationConfig["default"], _b[_Divider["default"].type] = _DividerConfig["default"], _b[_ImageGallery["default"].type] = _ImageGalleryConfig["default"], _b[_Newsletter["default"].type] = _NewsletterConfig["default"], _b[_Carousel["default"].type] = _CarouselConfig["default"], _b[_Button["default"].type] = _ButtonCompConfig["default"], _b[_Tag["default"].type] = _TagCompConfig["default"], _b);
+/**
+ * 二级配置面板索引
+ */
+
+exports.configPanelMap = configPanelMap;
+var secondConfigPanelMap = (_c = {}, _c[_Banner["default"].type] = _BannerSecondConfig["default"], _c[_Text["default"].type] = _TextSecondConfig["default"], _c[_ImageText["default"].type] = _ImageTextSecondConfig["default"], _c[_Recommend["default"].type] = _RecommendSecondConfig["default"], _c[_MobileNavigation["default"].type] = _MobileNavigationSecondConfig["default"], _c[_Carousel["default"].type] = _CarouselSecondConfig["default"], _c);
+exports.secondConfigPanelMap = secondConfigPanelMap;

package/lib/constants/index.js

@@ -0,0 +1,152 @@
+"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 = exports.STORAGE_KEY = void 0;
+var STORAGE_KEY = {
+  LOCALE: 'magicLocale'
+};
+exports.STORAGE_KEY = STORAGE_KEY;
+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: 'Image Gallery',
+    icon: 'icon-image-gallery'
+  },
+  CAROUSEL: {
+    name: 'Carousel',
+    icon: 'icon-carousel'
+  },
+  MOBILE_NAVIGATION: {
+    name: 'Mobile Navigation',
+    icon: 'icon-navigation'
+  }
+};
+/**
+ * 元组件类型
+ */
+
+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/lib/constants/layout.js

@@ -0,0 +1,162 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.searchLayout = exports.recommendLayoutPc = exports.recommendLayoutMobile = exports.newsletterLayout = exports.mobileNavigationLayout = 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"));
+
+var _layoutRecommend = _interopRequireDefault(require("../assets/images/layout-icon/layout-recommend-1.png"));
+
+var _layoutRecommend2 = _interopRequireDefault(require("../assets/images/layout-icon/layout-recommend-3.png"));
+
+var _layoutRecommend3 = _interopRequireDefault(require("../assets/images/layout-icon/layout-recommend-4.png"));
+
+var _layoutRecommend4 = _interopRequireDefault(require("../assets/images/layout-icon/layout-recommend-5.png"));
+
+var _layoutNavigationNewline = _interopRequireDefault(require("../assets/images/layout-icon/layout-navigation-newline.png"));
+
+var _layoutNavigationTile = _interopRequireDefault(require("../assets/images/layout-icon/layout-navigation-tile.png"));
+
+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;
+var recommendLayoutMobile = [{
+  id: 'layout1',
+  name: 'layout1',
+  image: _layoutRecommend["default"]
+}];
+exports.recommendLayoutMobile = recommendLayoutMobile;
+var recommendLayoutPc = [{
+  id: 'layout1',
+  name: 'layout1',
+  image: _layoutRecommend2["default"]
+}, {
+  id: 'layout2',
+  name: 'layout2',
+  image: _layoutRecommend3["default"]
+}, {
+  id: 'layout3',
+  name: 'layout3',
+  image: _layoutRecommend4["default"]
+}];
+exports.recommendLayoutPc = recommendLayoutPc;
+var mobileNavigationLayout = [{
+  id: 'newline',
+  name: 'newline',
+  image: _layoutNavigationNewline["default"]
+}, {
+  id: 'tile',
+  name: 'tile',
+  image: _layoutNavigationTile["default"]
+}];
+exports.mobileNavigationLayout = mobileNavigationLayout;

package/lib/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/lib/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/lib/core/Designer/CompListPanel/index.js

@@ -0,0 +1,158 @@
+"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");
+
+var _locale = require("../../../locale");
+
+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"
+    }, (0, _locale.i18n)('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">{i18n('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;