@fonixtree/magic-design 1.0.53 → 1.0.55

package/lib/common/UrlPicker/AnchorModal/index.js

@@ -0,0 +1,170 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _antd = require("antd");
+
+var _locale = require("../../../locale");
+
+var _mobx = require("../../../mobx");
+
+var _constants = require("../../../constants");
+
+require("./index.less");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+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 __assign = void 0 && (void 0).__assign || function () {
+  __assign = Object.assign || function (t) {
+    for (var s, i = 1, n = arguments.length; i < n; i++) {
+      s = arguments[i];
+
+      for (var p in s) {
+        if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+      }
+    }
+
+    return t;
+  };
+
+  return __assign.apply(this, arguments);
+};
+
+var AnchorModal =
+/** @class */
+function (_super) {
+  __extends(AnchorModal, _super);
+
+  function AnchorModal() {
+    var _this = _super !== null && _super.apply(this, arguments) || this;
+
+    _this.state = {
+      selectedValue: ''
+    };
+
+    _this.onAnchorChange = function (e) {
+      var selectedAnchor = _mobx.store.MPageData.find(function (m) {
+        return m.id === e.target.value;
+      });
+
+      console.log('store.MPageData: ', JSON.parse(JSON.stringify(_mobx.store.MPageData)));
+
+      _this.setState({
+        selectedValue: selectedAnchor.id
+      });
+    };
+
+    _this.onOk = function () {
+      var initData = _this.props.initData;
+      var selectedValue = _this.state.selectedValue;
+
+      var selectedAnchorIndex = _mobx.store.MPageData.findIndex(function (m) {
+        return m.id === selectedValue;
+      });
+
+      var selectedAnchor = _mobx.store.MPageData[selectedAnchorIndex];
+
+      var value = __assign({}, initData.value);
+
+      if (selectedAnchor.activeTerminal === 'ALL') {
+        value.pcNodeId = selectedAnchor.id;
+        value.mobileNodeId = selectedAnchor.id;
+      } else if (selectedAnchor.activeTerminal === 'MOBILE') {
+        value.mobileNodeId = selectedAnchor.id;
+      } else if (selectedAnchor.activeTerminal === 'PC') {
+        value.pcNodeId = selectedAnchor.id;
+      }
+
+      var data = {
+        type: _constants.urlTypeMap.ANCHOR,
+        value: value
+      };
+
+      _this.props.onConfirm(data);
+    };
+
+    return _this;
+  }
+
+  AnchorModal.prototype.render = function () {
+    var _a = this.props,
+        visible = _a.visible,
+        onClose = _a.onClose;
+    var selectedValue = this.state.selectedValue;
+    return /*#__PURE__*/_react["default"].createElement(_antd.Modal, {
+      cancelText: (0, _locale.i18n)('CANCEL'),
+      draggable: false,
+      footer: null,
+      okText: "OK",
+      onCancel: onClose,
+      title: (0, _locale.i18n)('ANCHOR'),
+      visible: visible,
+      width: "400px",
+      wrapClassName: "magicAnchorModal"
+    }, /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_antd.Radio.Group, {
+      onChange: this.onAnchorChange,
+      value: selectedValue
+    }, /*#__PURE__*/_react["default"].createElement(_antd.Space, {
+      direction: "vertical"
+    }, _mobx.store.MPageData.map(function (page, i) {
+      var _a;
+
+      return /*#__PURE__*/_react["default"].createElement(_antd.Radio, {
+        value: page.id
+      }, i + 1, "\u3001", (_a = _constants.compInfoMap[page.type]) === null || _a === void 0 ? void 0 : _a.name);
+    })))), /*#__PURE__*/_react["default"].createElement("div", {
+      className: "footer"
+    }, /*#__PURE__*/_react["default"].createElement(_antd.Button, {
+      className: "btn-cancel",
+      onClick: function onClick() {
+        return onClose && onClose();
+      }
+    }, (0, _locale.i18n)('CANCEL')), /*#__PURE__*/_react["default"].createElement(_antd.Button, {
+      className: "btn-confirm",
+      onClick: this.onOk,
+      type: "primary"
+    }, (0, _locale.i18n)('OK'))));
+  };
+
+  AnchorModal.defaultProps = {
+    visible: false,
+    onClose: function onClose() {},
+    onConfirm: function onConfirm() {},
+    initData: null
+  };
+  return AnchorModal;
+}(_react["default"].Component);
+
+var _default = AnchorModal;
+exports["default"] = _default;

package/lib/common/UrlPicker/AnchorModal/index.less

@@ -0,0 +1,21 @@
+.magicAnchorModal {
+
+
+  .footer {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    padding-top: 20px;
+
+    .btn-cancel {
+      margin-right: 12px;
+    }
+
+    .btn-confirm {
+      background: #2F54EB;
+      border: none;
+      border-radius: 6px;
+      // margin-left: 20px;
+    }
+  }
+}

package/lib/common/UrlPicker/index.js

@@ -7,16 +7,24 @@ exports["default"] = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
-require("./index.less");
-
 var _classnames = _interopRequireDefault(require("classnames"));
 
+var _AnchorModal = _interopRequireDefault(require("./AnchorModal"));
+
+var _coreUtil = require("../../utils/coreUtil");
+
 var _locale = require("../../locale");
 
 var _LinkModal = _interopRequireDefault(require("../LinkModal"));
 
 var _Iconfont = _interopRequireDefault(require("../Iconfont"));
 
+var _constants = require("../../constants");
+
+var _mobx = require("../../mobx");
+
+require("./index.less");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 var __extends = void 0 && (void 0).__extends || function () {
@@ -44,6 +52,8 @@ var __extends = void 0 && (void 0).__extends || function () {
     d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
   };
 }();
+/* eslint-disable max-len */
+
 
 var UrlPicker =
 /** @class */
@@ -54,7 +64,8 @@ function (_super) {
     var _this = _super !== null && _super.apply(this, arguments) || this;
 
     _this.state = {
-      visible: false
+      visible: false,
+      anchorModalVisible: false
     };
     return _this;
   }
@@ -62,13 +73,29 @@ function (_super) {
   UrlPicker.prototype.render = function () {
     var _this = this;
 
-    var visible = this.state.visible;
-    var _a = this.props,
-        value = _a.value,
-        _onChange = _a.onChange,
-        disabled = _a.disabled; // 弹框选择url不可编辑，需要先清除
+    var _a;
+
+    var _b = this.state,
+        visible = _b.visible,
+        anchorModalVisible = _b.anchorModalVisible;
+    var _c = this.props,
+        value = _c.value,
+        _onChange = _c.onChange,
+        disabled = _c.disabled,
+        onlySpecificCode = _c.onlySpecificCode; // 弹框选择url不可编辑，需要先清除
 
     var editable = !value || !value.type;
+    var inputName = (value === null || value === void 0 ? void 0 : value.name) || '';
+
+    if ((value === null || value === void 0 ? void 0 : value.type) === _constants.urlTypeMap.ANCHOR) {
+      var selectedAnchorIndex = _mobx.store.MPageData.findIndex(function (m) {
+        return m.id === ((0, _coreUtil.isPc)() ? value.value.pcNodeId : value.value.mobileNodeId);
+      });
+
+      var selectedAnchor = _mobx.store.MPageData[selectedAnchorIndex];
+      inputName = selectedAnchorIndex + 1 + "\u3001" + ((_a = _constants.compInfoMap[selectedAnchor.type]) === null || _a === void 0 ? void 0 : _a.name);
+    }
+
     return /*#__PURE__*/_react["default"].createElement("div", {
       className: "m-url-picker"
     }, disabled && /*#__PURE__*/_react["default"].createElement("div", {
@@ -87,10 +114,19 @@ function (_super) {
       },
       placeholder: (0, _locale.i18n)('PLEASE_ADD_A_LINK'),
       type: "text",
-      value: value.name || ''
+      value: inputName
     }), /*#__PURE__*/_react["default"].createElement("div", {
       className: "icon-btns"
-    }, window.magicDesign.outputType != 'html' && /*#__PURE__*/_react["default"].createElement(_Iconfont["default"], {
+    }, /*#__PURE__*/_react["default"].createElement(_Iconfont["default"], {
+      color: "#000",
+      onClick: function onClick() {
+        return _this.setState({
+          anchorModalVisible: true
+        });
+      },
+      size: "20px",
+      type: "icon-anchor"
+    }), window.magicDesign.outputType != 'html' && /*#__PURE__*/_react["default"].createElement(_Iconfont["default"], {
       color: "#000",
       onClick: function onClick() {
         return _this.setState({
@@ -119,7 +155,23 @@ function (_super) {
           visible: false
         });
       },
+      onlySpecificCode: onlySpecificCode,
       visible: visible
+    }), anchorModalVisible && /*#__PURE__*/_react["default"].createElement(_AnchorModal["default"], {
+      initData: value,
+      onClose: function onClose() {
+        return _this.setState({
+          anchorModalVisible: false
+        });
+      },
+      onConfirm: function onConfirm(value) {
+        _onChange(value);
+
+        _this.setState({
+          anchorModalVisible: false
+        });
+      },
+      visible: anchorModalVisible
     }));
   };
 

package/lib/common/index.js

@@ -21,6 +21,12 @@ Object.defineProperty(exports, "ButtonIconLayout", {
     return _ButtonIconLayout["default"];
   }
 });
+Object.defineProperty(exports, "CardCarousel", {
+  enumerable: true,
+  get: function get() {
+    return _CardCarousel["default"];
+  }
+});
 Object.defineProperty(exports, "Collapse", {
   enumerable: true,
   get: function get() {
@@ -81,6 +87,12 @@ Object.defineProperty(exports, "LayoutSelector", {
     return _LayoutSelector["default"];
   }
 });
+Object.defineProperty(exports, "MyModal", {
+  enumerable: true,
+  get: function get() {
+    return _MyModal["default"];
+  }
+});
 Object.defineProperty(exports, "ProductSource", {
   enumerable: true,
   get: function get() {
@@ -172,4 +184,8 @@ var _InputNumber = _interopRequireDefault(require("./InputNumber"));
 
 var _VideoUpload = _interopRequireDefault(require("./VideoUpload"));
 
+var _CardCarousel = _interopRequireDefault(require("./CardCarousel"));
+
+var _MyModal = _interopRequireDefault(require("./MyModal"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

package/lib/composite-comp/bol/components/Banner/mobile/index.js

@@ -213,8 +213,7 @@ function (_super) {
           if (window.magicDesign.pushGA) {
             window.magicDesign.pushGA({}, 'select_promotion', {
               event_label: (0, _ConfigPanel.getSecondConfigName)(data, item.id),
-              promotion_name: (0, _ConfigPanel.getSecondConfigName)(data, item.id),
-              promotion_id: item.id
+              promotion_name: (0, _ConfigPanel.getSecondConfigName)(data, item.id)
             });
           }
         },

package/lib/composite-comp/bol/components/Banner/mobile/index.less

@@ -1,80 +1,54 @@
 .m-banner-mobile {
   position: relative;
-  // .turnPage {
-  //   position: absolute;
-  //   top: 50%;
-  //   transform: translateY(-50%);
-  //   z-index: 3;
-  //   cursor: pointer;
-  // }
-  // .leftBtn {
-  //   left: 20px;
-  // }
-  // .rightBtn {
-  //   right: 20px;
-  // }
-
-  .cylon-carousel {
-    .slick-track {
-      display: flex;
-      align-items: center;
-    }
-  }
-
-  .carouselItem {
-    // height: 386px;
-    position: relative;
-    display: flex;
-
-    .carouseContent {
-      padding: 0 28px;
-      position: absolute;
-      z-index: 2;
-      display: flex;
-      flex-direction: column;
-      margin-bottom: auto;
-    }
-
-    .title {
-      margin-bottom: 8px;
-    }
-
-    .sub-title {
-      margin-bottom: 20px;
-    }
-
-    .btn-wrap {
-      display: flex;
-      align-items: center;
-      justify-content: flex-start;
-
-      .btn {
-        margin-right: 12px;
-      }
-    }
-  }
-
-  .swiper-ban {
-    position: absolute;
-    width: 100%;
-    bottom: 10px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-
-    .ban {
-      font-size: 16px;
-      width: 1.5em;
-      height: 0.3em;
-      background: #FFF;
-      cursor: inherit;
-      margin-right: 0.3em;
-      transition: all .5s;
-
-      &.active {
-        width: 1.5em;
-        opacity: 1;
-      }
-    }
-  }
-}
+}
+.m-banner-mobile .cylon-carousel .slick-track {
+  display: flex;
+  align-items: center;
+}
+.m-banner-mobile .carouselItem {
+  position: relative;
+  display: flex;
+}
+.m-banner-mobile .carouselItem .carouseContent {
+  padding: 0 0.56rem;
+  position: absolute;
+  z-index: 2;
+  display: flex;
+  flex-direction: column;
+  margin-bottom: auto;
+}
+.m-banner-mobile .carouselItem .title {
+  margin-bottom: 0.16rem;
+}
+.m-banner-mobile .carouselItem .sub-title {
+  margin-bottom: 0.4rem;
+}
+.m-banner-mobile .carouselItem .btn-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+}
+.m-banner-mobile .carouselItem .btn-wrap .btn {
+  margin-right: 0.24rem;
+}
+.m-banner-mobile .swiper-ban {
+  position: absolute;
+  width: 100%;
+  bottom: 0.2rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.m-banner-mobile .swiper-ban .ban {
+  font-size: 0.32rem;
+  width: 1.5em;
+  height: 0.3em;
+  background: #FFF;
+  cursor: inherit;
+  margin-right: 0.3em;
+  transition: all 0.5s;
+}
+.m-banner-mobile .swiper-ban .ban.active {
+  width: 1.5em;
+  opacity: 1;
+}

package/lib/composite-comp/bol/components/Carousel/mobile/index.less

@@ -1,103 +1,84 @@
 .m-carousel-mobile {
   position: relative;
   width: 100%;
-
-  .content {
-    display: flex;
-    margin: 0 auto;
-  }
-
-  .slider-wrap {
-    width: 100%;
-    margin: 0 auto;
-    line-height: 1;
-
-    .slick-list {
-      // margin-left: -11px;
-      // margin-right: -11px;
-      padding: 0;
-
-      &:hover {
-        padding-top: 100px;
-        margin-top: -100px;
-        padding-bottom: 100px;
-        margin-bottom: -100px;
-      }
-
-      .slick-track {
-        display: flex;
-        align-items: center;
-        gap: 12px;
-      }
-    }
-
-    .img-wrap {
-      .img {
-        width: fit-content;
-        height: fit-content;
-        display: block;
-        margin: 0 auto;
-      }
-
-      .title {
-        display: flex;
-        justify-content: center;
-        margin-top: 12px;
-      }
-
-      .text {
-        display: flex;
-        justify-content: center;
-        margin-top: 6px;
-      }
-
-      .tags {
-        margin-top: 8px;
-        margin-bottom: 12px;
-        display: flex;
-        flex-direction: row;
-        align-items: center;
-        justify-content: center;
-
-        >div {
-          margin-right: 8px;
-
-          &:last-child {
-            margin-right: 0;
-          }
-        }
-      }
-    }
-  }
-
-  .swiper-ban {
-    position: absolute;
-    width: 100%;
-    bottom: 6px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-
-    .ban {
-      font-size: 8px;
-      width: 1em;
-      height: 1em;
-      border-radius: 50%;
-      background: #FFF;
-      cursor: inherit;
-      margin-right: 10px;
-      transition: all .5s;
-
-      &:last-child {
-        margin-right: 0;
-      }
-
-      &.active {
-        width: 2em;
-        height: 1em;
-        border-radius: 100px;
-        opacity: 1;
-      }
-    }
-  }
-}
+}
+.m-carousel-mobile .content {
+  display: flex;
+  margin: 0 auto;
+}
+.m-carousel-mobile .slider-wrap {
+  width: 100%;
+  margin: 0 auto;
+  line-height: 1;
+}
+.m-carousel-mobile .slider-wrap .slick-list {
+  padding: 0;
+}
+.m-carousel-mobile .slider-wrap .slick-list:hover {
+  padding-top: 2rem;
+  margin-top: -2rem;
+  padding-bottom: 2rem;
+  margin-bottom: -2rem;
+}
+.m-carousel-mobile .slider-wrap .slick-list .slick-track {
+  display: flex;
+  align-items: center;
+  gap: 0.24rem;
+}
+.m-carousel-mobile .slider-wrap .img-wrap .img {
+  width: fit-content;
+  height: fit-content;
+  display: block;
+  margin: 0 auto;
+}
+.m-carousel-mobile .slider-wrap .img-wrap .title {
+  display: flex;
+  justify-content: center;
+  margin-top: 0.24rem;
+}
+.m-carousel-mobile .slider-wrap .img-wrap .text {
+  display: flex;
+  justify-content: center;
+  margin-top: 0.12rem;
+}
+.m-carousel-mobile .slider-wrap .img-wrap .tags {
+  margin-top: 0.16rem;
+  margin-bottom: 0.24rem;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+}
+.m-carousel-mobile .slider-wrap .img-wrap .tags > div {
+  margin-right: 0.16rem;
+}
+.m-carousel-mobile .slider-wrap .img-wrap .tags > div:last-child {
+  margin-right: 0;
+}
+.m-carousel-mobile .swiper-ban {
+  position: absolute;
+  width: 100%;
+  bottom: 0.12rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.m-carousel-mobile .swiper-ban .ban {
+  font-size: 0.16rem;
+  width: 1em;
+  height: 1em;
+  border-radius: 50%;
+  background: #FFF;
+  cursor: inherit;
+  margin-right: 0.2rem;
+  transition: all 0.5s;
+}
+.m-carousel-mobile .swiper-ban .ban:last-child {
+  margin-right: 0;
+}
+.m-carousel-mobile .swiper-ban .ban.active {
+  width: 2em;
+  height: 1em;
+  border-radius: 2rem;
+  opacity: 1;
+}