@fonixtree/magic-design 0.0.83 → 0.0.85

package/es/core/Designer/index.js

@@ -27,6 +27,8 @@ var _ViewArea = _interopRequireDefault(require("./ViewArea"));
 
 var _History = _interopRequireDefault(require("./History"));
 
+var _AppointmentModal = _interopRequireDefault(require("./AppointmentModal"));
+
 var _componentTypes = require("../../constants/component-types");
 
 var _mobx = require("../../mobx");
@@ -317,6 +319,8 @@ function (_super) {
         });
       };
 
+      console.log(code);
+
       switch (code) {
         case _constants.quickMenuCode.UNDO:
           _this.history.undo(callback);
@@ -332,6 +336,13 @@ function (_super) {
           onPublish(handleParams);
           break;
 
+        case _constants.quickMenuCode.PUBLISH_LATER:
+          _this.setState({
+            appointmentVisible: true
+          });
+
+          break;
+
         case _constants.quickMenuCode.PREVIEW:
           onPreviews(handleParams);
           break;
@@ -362,6 +373,22 @@ function (_super) {
       });
     };
 
+    _this.onAppointmentConfirm = function (date) {
+      var onPublish = _this.props.onPublish;
+      var _a = _this.state,
+          device = _a.device,
+          MPageData = _a.MPageData;
+      var handleParams = {
+        pageData: {
+          id: (0, _uuid.v4)(),
+          childNodes: MPageData
+        },
+        device: device,
+        appointmentDete: date
+      };
+      onPublish(handleParams);
+    };
+
     var pageData = props.pageData,
         config = props.config,
         locale = props.locale;
@@ -378,7 +405,8 @@ function (_super) {
 
     _this.state = {
       MPageData: MPageData,
-      device: _constants.deviceTypeMap.PHONE
+      device: _constants.deviceTypeMap.PHONE,
+      appointmentVisible: false
     };
     setDesignConfig(config);
     return _this;
@@ -440,11 +468,13 @@ function (_super) {
 
     var _a = this.state,
         MPageData = _a.MPageData,
-        device = _a.device;
+        device = _a.device,
+        appointmentVisible = _a.appointmentVisible;
     var _b = this.props,
         pagesManager = _b.pagesManager,
         compSource = _b.compSource,
-        pageName = _b.pageName;
+        pageName = _b.pageName,
+        onCancelPublish = _b.onCancelPublish;
     return /*#__PURE__*/_react["default"].createElement(_mobxReact.Provider, {
       store: _mobx.store
     }, /*#__PURE__*/_react["default"].createElement(_antd.ConfigProvider, {
@@ -475,10 +505,20 @@ function (_super) {
       pageData: MPageData
     }), /*#__PURE__*/_react["default"].createElement(_ViewArea["default"] // ref={this.viewAreaRef}
     , {
+      appointmentDate: this.props.appointmentDate,
       device: device,
+      onCancelPublish: onCancelPublish,
       pageData: MPageData,
       renderHeader: this.renderHeader
-    })))));
+    })), /*#__PURE__*/_react["default"].createElement(_AppointmentModal["default"], {
+      onClose: function onClose() {
+        return _this.setState({
+          appointmentVisible: false
+        });
+      },
+      onConfirm: this.onAppointmentConfirm,
+      visible: appointmentVisible
+    }))));
   };
 
   return Designer;

package/es/decorator/metaDecorator.js

@@ -143,7 +143,7 @@ function metaDecorator(WrappedComponent) {
         var style = {
           boxSizing: 'border-box',
           height: '100%',
-          border: '1px solid transparent'
+          border: 'none'
         };
 
         if (window.magicDesign.mode === 'renderer') {

package/es/locale/en/en.json

@@ -1,4 +1,9 @@
 {
+  "IMAGES": "Images",
+  "PUBLISH_TIME": "Publish Time",
+  "CONFIRM": "Confirm",
+  "PUBLISH_LATER": "Publish Later",
+  "PUBLISH_NOW": "Publish Now",
   "SEARCH_BOX": "Search Box",
   "PLEASE_INPUT_KEYWORDS": "Please input keywords",
   "SHOPPING_CART": "Shopping Cart",

package/es/locale/es/es.json

@@ -1,4 +1,9 @@
 {
+  "IMAGES": "Images",
+  "PUBLISH_TIME": "Publish Time",
+  "CONFIRM": "Confirm",
+  "PUBLISH_LATER": "Publish Later",
+  "PUBLISH_NOW": "Publish Now",
   "SEARCH_BOX": "Search Box",
   "PLEASE_INPUT_KEYWORDS": "Please input keywords",
   "SHOPPING_CART": "Shopping Cart",

package/es/locale/id/id.json

@@ -1,4 +1,9 @@
 {
+  "IMAGES": "Images",
+  "PUBLISH_TIME": "Publish Time",
+  "CONFIRM": "Confirm",
+  "PUBLISH_LATER": "Publish Later",
+  "PUBLISH_NOW": "Publish Now",
   "SEARCH_BOX": "Search Box",
   "PLEASE_INPUT_KEYWORDS": "Please input keywords",
   "SHOPPING_CART": "Shopping Cart",

package/lib/assets/less/button.less

@@ -6,4 +6,27 @@
   &.ant-btn-sm  {
     height: @small !important;
   }
+  &.ant-btn-primary {
+    background-color: #2F54EB !important;
+    border-color:#2F54EB !important;
+    &:hover {
+      background-color: #1D39C4 !important;
+      border-color:#1D39C4 !important;
+    }
+  }
+  &.ant-btn-default {
+    &:hover {
+      border-color:#1D39C4 !important;
+      color:#1D39C4 !important;
+    }
+  }
+  &.ant-btn-light {
+    border: none;
+    background-color: #E9F0FF;
+    color: #2F54EB;
+    &:hover {
+      background-color: #D6E4FF;
+      color: #2F54EB;
+    }
+  }
 }

package/lib/assets/less/datepicker.less

@@ -0,0 +1,11 @@
+.ant-picker {
+  &:hover {
+    border-color: #2F54EB !important;
+  }
+  &.ant-picker-focused {
+    border-color: #2F54EB !important;
+  }
+}
+.ant-picker-time-panel-column > li.ant-picker-time-panel-cell-selected .ant-picker-time-panel-cell-inner {
+  background-color: #E9F0FF !important;
+}

package/lib/assets/less/index.less

@@ -9,4 +9,5 @@
 @import './modal.less';
 @import './input.less';
 @import './button.less';
-@import './form.less';
+@import './form.less';
+@import './datepicker.less';

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

@@ -19,6 +19,8 @@ var _coreUtil = require("../../../../../utils/coreUtil");
 
 var _AlignSelector = require("../../../../../common/AlignSelector");
 
+var _commonUtil = require("../../../../../utils/commonUtil");
+
 var _components = require("../../../../../meta-comp/components");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -171,7 +173,9 @@ function (_super) {
     return /*#__PURE__*/_react["default"].createElement("div", {
       className: "m-banner-mobile",
       style: {
-        marginBottom: data.spacing.mobile.marginBottom || 0
+        marginBottom: (0, _commonUtil.ensure)(function () {
+          return data.spacing.mobile.marginBottom;
+        }, 0)
       }
     }, /*#__PURE__*/_react["default"].createElement(_antd.Carousel, {
       ref: this.carouselRef,

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

@@ -238,7 +238,7 @@ function (_super) {
       className: "content",
       style: {
         width: contentWidth - spacing.paddingLeft - spacing.paddingRight,
-        paddingBottom: data.setting.dots.open ? '20px' : '0'
+        paddingBottom: data.setting.dots.open && data.groupSource.length / colNum > 1 ? '20px' : '0'
       }
     }, /*#__PURE__*/_react["default"].createElement(_reactSlick["default"], _extends({
       ref: function ref(slider) {

package/lib/composite-comp/bol/components/Carousel/pc/index.js

@@ -29,14 +29,10 @@ require("slick-carousel/slick/slick.css");
 
 require("slick-carousel/slick/slick-theme.css");
 
-var _ref, _ref2, _ref3, _ref4;
-
 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); }
 
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
 var __extends = void 0 && (void 0).__extends || function () {
   var _extendStatics = function extendStatics(d, b) {
     _extendStatics = Object.setPrototypeOf || {
@@ -73,19 +69,27 @@ var PC_IMG_SIZE = [{
   maxW: 524,
   minH: 150,
   maxH: 524
-}, (_ref = {
+}, {
   minW: 100,
-  maxW: 341
-}, _defineProperty(_ref, "minW", 100), _defineProperty(_ref, "maxW", 341), _ref), (_ref2 = {
+  maxW: 341,
+  minH: 100,
+  maxH: 341
+}, {
   minW: 100,
-  maxW: 251
-}, _defineProperty(_ref2, "minW", 100), _defineProperty(_ref2, "maxW", 251), _ref2), (_ref3 = {
+  maxW: 251,
+  minH: 100,
+  maxH: 251
+}, {
   minW: 100,
-  maxW: 195
-}, _defineProperty(_ref3, "minW", 100), _defineProperty(_ref3, "maxW", 195), _ref3), (_ref4 = {
+  maxW: 195,
+  minH: 100,
+  maxH: 195
+}, {
   minW: 100,
-  maxW: 168
-}, _defineProperty(_ref4, "minW", 100), _defineProperty(_ref4, "maxW", 168), _ref4)];
+  maxW: 168,
+  minH: 100,
+  maxH: 168
+}];
 
 var CarouselPc =
 /** @class */
@@ -231,7 +235,7 @@ function (_super) {
       className: "content",
       style: {
         width: contentWidth - spacing.paddingLeft - spacing.paddingRight,
-        paddingBottom: data.setting.dots.open ? '30px' : '0'
+        paddingBottom: data.setting.dots.open && data.groupSource.length / colNum > 1 ? '30px' : '0'
       }
     }, data.setting.navigation.open && /*#__PURE__*/_react["default"].createElement(_Iconfont["default"], {
       className: "carousel-icon-left",

package/lib/composite-comp/bol/components/ImageGallery/defaultJSON.js

@@ -22,8 +22,8 @@ var imagesGroupSourceJSON = function imagesGroupSourceJSON() {
       open: true,
       type: 'IMAGE',
       content: {
-        h5Name: 'name2',
-        pcName: 'name2',
+        h5Name: 'Image Name',
+        pcName: 'Image Name',
         h5ImgSrc: '',
         pcImgSrc: '',
         clickUrl: ''
@@ -59,8 +59,17 @@ var getDefaultJSON = function getDefaultJSON() {
       }
     },
     customize: {
-      layout: 'layout1',
-      align: 'left'
+      layout: {
+        h5Layout: 'layout1',
+        pcLayout: 'layout1'
+      },
+      align: 'left',
+      pcRowNum: 2,
+      rowNum: 2,
+      mobileMinRowNum: 2,
+      mobileMaxRowNum: 5,
+      pcMinRowNum: 2,
+      pcMaxRowNum: 6
     },
     background: {
       opacity: 100,

package/lib/composite-comp/bol/components/ImageGallery/index.js

@@ -7,6 +7,8 @@ exports["default"] = void 0;
 
 var _react = _interopRequireWildcard(require("react"));
 
+var _pc = _interopRequireDefault(require("./pc"));
+
 var _mobile = _interopRequireDefault(require("./mobile"));
 
 var _defaultJSON = require("./defaultJSON");
@@ -68,7 +70,9 @@ function (_super) {
 
   ImageGallery.prototype.render = function () {
     var nodeData = this.props.nodeData;
-    return /*#__PURE__*/_react["default"].createElement("div", null, window.magicDesign.device === 'pc' ? null : /*#__PURE__*/_react["default"].createElement(_mobile["default"], {
+    return /*#__PURE__*/_react["default"].createElement("div", null, window.magicDesign.device === 'pc' ? /*#__PURE__*/_react["default"].createElement(_pc["default"], {
+      data: nodeData
+    }) : /*#__PURE__*/_react["default"].createElement(_mobile["default"], {
       data: nodeData
     }));
   };

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

@@ -7,9 +7,11 @@ exports["default"] = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
+var _classnames = _interopRequireDefault(require("classnames"));
+
 require("./index.less");
 
-var _mobx = require("../../../../../mobx");
+var _components = require("../../../../../meta-comp/components");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
@@ -39,6 +41,34 @@ var __extends = void 0 && (void 0).__extends || function () {
   };
 }();
 
+var MOBILE_IMG_SIZE = {
+  1: {
+    maxW: 343,
+    maxH: 258,
+    gap: 12
+  },
+  2: {
+    maxW: 165,
+    maxH: 124,
+    gap: 12
+  },
+  3: {
+    maxW: 106,
+    maxH: 80,
+    gap: 12
+  },
+  4: {
+    maxW: 77,
+    maxH: 56,
+    gap: 12
+  },
+  5: {
+    maxW: 62,
+    maxH: 45,
+    gap: 8
+  }
+};
+
 var ImageGalleryMobile =
 /** @class */
 function (_super) {
@@ -48,27 +78,35 @@ function (_super) {
     var _this = _super !== null && _super.apply(this, arguments) || this;
 
     _this.state = {};
-    _this.carouselRef = /*#__PURE__*/_react["default"].createRef();
-    _this.destroy = null;
     return _this;
   }
 
-  ImageGalleryMobile.prototype.componentDidMount = function () {
-    this.destroy = (0, _mobx.autorun)(function () {// this.init(this.props.data.groupSource);
-    });
-  };
-
-  ImageGalleryMobile.prototype.componentWillReceiveProps = function (nextProps) {// this.init(nextProps.data.groupSource);
-  };
-
-  ImageGalleryMobile.prototype.componentWillUnmount = function () {// this.destroy();
-  };
-
   ImageGalleryMobile.prototype.render = function () {
     var data = this.props.data;
+    var isHorizontal = data.customize.layout.h5Layout === 'layout2';
+    var colNum = isHorizontal ? data.customize.rowNum : 1;
     return /*#__PURE__*/_react["default"].createElement("div", {
       className: "m-image-gallery-mobile"
-    }, "image gallery");
+    }, /*#__PURE__*/_react["default"].createElement("div", {
+      className: (0, _classnames["default"])('content', {
+        horizontal: isHorizontal
+      }),
+      style: {
+        gap: MOBILE_IMG_SIZE[colNum].gap
+      }
+    }, data.groupSource.map(function (m) {
+      return /*#__PURE__*/_react["default"].createElement("div", {
+        key: m.id,
+        className: "img-wrap",
+        style: {
+          width: MOBILE_IMG_SIZE[colNum].maxW
+        }
+      }, /*#__PURE__*/_react["default"].createElement(_components.MetaImage, {
+        data: m.image,
+        maxHeight: MOBILE_IMG_SIZE[colNum].maxH,
+        maxWidth: MOBILE_IMG_SIZE[colNum].maxW
+      }));
+    })));
   };
 
   ImageGalleryMobile.defaultProps = {

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

@@ -1,73 +1,21 @@
-.m-banner-mobile {
-  position: relative;
-  // .turnPage {
-  //   position: absolute;
-  //   top: 50%;
-  //   transform: translateY(-50%);
-  //   z-index: 3;
-  //   cursor: pointer;
-  // }
-  // .leftBtn {
-  //   left: 20px;
-  // }
-  // .rightBtn {
-  //   right: 20px;
-  // }
+.m-image-gallery-mobile {
+  overflow-x: auto;
 
-  .carouselItem {
-    height: 386px;
-    position: relative;
+  .content {
     display: flex;
+    flex-direction: column;
+    flex-wrap: wrap;
+    width: 345px;
+    margin: 0 auto;
 
-    .carouseContent {
-      padding: 80px 28px 0;
-      position: relative;
-      z-index: 2;
-      display: flex;
-      flex-direction: column;
-      margin-bottom: auto;
-    }
-
-    .title {
-      margin-bottom: 8px;
+    &.horizontal {
+      flex-direction: row;
     }
 
-    .sub-title {
-      margin-bottom: 20px;
-    }
-
-    .btn-wrap {
+    .img-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;
-      }
+      justify-content: center;
     }
   }
 }

package/lib/composite-comp/bol/components/ImageGallery/pc/index.js

@@ -0,0 +1,138 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+require("./index.less");
+
+var _components = require("../../../../../meta-comp/components");
+
+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 PC_IMG_SIZE = {
+  1: {
+    minW: 150,
+    maxW: '100%',
+    minH: 150,
+    maxH: 960,
+    gap: 20
+  },
+  2: {
+    minW: 150,
+    maxW: 628,
+    minH: 150,
+    maxH: 471,
+    gap: 24
+  },
+  3: {
+    minW: 100,
+    maxW: 410,
+    minH: 100,
+    maxH: 308,
+    gap: 24
+  },
+  4: {
+    minW: 100,
+    maxW: 302,
+    minH: 100,
+    maxH: 227,
+    gap: 24
+  },
+  5: {
+    minW: 100,
+    maxW: 236,
+    minH: 100,
+    maxH: 177,
+    gap: 24
+  },
+  6: {
+    minW: 100,
+    maxW: 193,
+    minH: 100,
+    maxH: 145,
+    gap: 24
+  }
+};
+
+var ImageGalleryPc =
+/** @class */
+function (_super) {
+  __extends(ImageGalleryPc, _super);
+
+  function ImageGalleryPc() {
+    var _this = _super !== null && _super.apply(this, arguments) || this;
+
+    _this.state = {};
+    return _this;
+  }
+
+  ImageGalleryPc.prototype.render = function () {
+    var data = this.props.data;
+    var isHorizontal = data.customize.layout.pcLayout === 'layout2';
+    var colNum = isHorizontal ? data.customize.pcRowNum : 1;
+    return /*#__PURE__*/_react["default"].createElement("div", {
+      className: "m-image-gallery-pc"
+    }, /*#__PURE__*/_react["default"].createElement("div", {
+      className: (0, _classnames["default"])('content', {
+        horizontal: isHorizontal
+      }),
+      style: {
+        gap: PC_IMG_SIZE[colNum].gap
+      }
+    }, data.groupSource.map(function (m) {
+      return /*#__PURE__*/_react["default"].createElement("div", {
+        key: m.id,
+        className: "img-wrap",
+        style: {
+          width: PC_IMG_SIZE[colNum].maxW
+        }
+      }, /*#__PURE__*/_react["default"].createElement(_components.MetaImage, {
+        data: m.image,
+        maxHeight: PC_IMG_SIZE[colNum].maxH,
+        maxWidth: PC_IMG_SIZE[colNum].maxW
+      }));
+    })));
+  };
+
+  ImageGalleryPc.defaultProps = {
+    data: {
+      groupSource: []
+    }
+  };
+  return ImageGalleryPc;
+}(_react["default"].Component);
+
+var _default = ImageGalleryPc;
+exports["default"] = _default;

package/lib/composite-comp/bol/components/ImageGallery/pc/index.less

@@ -0,0 +1,21 @@
+.m-image-gallery-pc {
+  overflow-x: auto;
+
+  .content {
+    display: flex;
+    flex-direction: column;
+    flex-wrap: wrap;
+    width: 1280px;
+    margin: 0 auto;
+
+    &.horizontal {
+      flex-direction: row;
+    }
+
+    .img-wrap {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+  }
+}