@fonixtree/magic-design 0.0.78 → 0.0.80

package/lib/composite-comp/dito/components/MobileNavigation/defaultJSON.js

@@ -39,7 +39,7 @@ var MobileNavGroupSourceJSON = function MobileNavGroupSourceJSON() {
       specialContent: [],
       text: 'name',
       content: {
-        sizeType: 'Headline 1',
+        sizeType: 'Customize font styles',
         fontFamily: 'Open Sans',
         fontWeight: 600,
         fontSize: 12,
@@ -66,18 +66,19 @@ var getDefaultJSON = function getDefaultJSON() {
       pc: {
         paddingTop: 10,
         paddingBottom: 10,
-        marginBottom: 0
+        marginBottom: window.magicDesign.compSpacing * 1.5
       },
       mobile: {
         paddingTop: 10,
         paddingBottom: 10,
-        marginBottom: 0
+        marginBottom: window.magicDesign.compSpacing
       }
     },
     customize: {
       layout: 'newline',
       rowNum: 4,
-      mobileMaxRowNum: 5
+      mobileMaxRowNum: 5,
+      mobileMinRowNum: 3
     },
     background: {
       opacity: 100,

package/lib/composite-comp/dito/components/MobileNavigation/mobile/index.js

@@ -50,17 +50,27 @@ function (_super) {
     var _this = _super !== null && _super.apply(this, arguments) || this;
 
     _this.calcWidth = function (num) {
-      return (100 - (num - 1) * 2) / num + "%";
+      return (100 - (num - 1) * 3) / num + "%";
+    };
+
+    _this.tileCalcWidth = function (num) {
+      return (100 - (num - 1) * 3) / (num + 0.5) + "%";
     };
 
     _this.getCardStyle = function (source, i) {
       var data = _this.props.data;
       var cardStyle = {};
-      cardStyle.marginRight = (1 + i) % data.customize.rowNum !== 0 ? '2%' : 0;
 
       if (data.customize.layout === 'newline') {
-        cardStyle.marginBottom = 12;
+        if (i > data.customize.rowNum - 1) {
+          cardStyle.marginTop = 12;
+        }
+
+        cardStyle.marginRight = (1 + i) % data.customize.rowNum !== 0 ? '3%' : 0;
         cardStyle.width = _this.calcWidth(data.customize.rowNum);
+      } else {
+        cardStyle.marginRight = '3%';
+        cardStyle.width = _this.tileCalcWidth(data.customize.rowNum);
       }
 
       return cardStyle;

package/lib/composite-comp/dito/components/MobileNavigation/mobile/index.less

@@ -1,7 +1,7 @@
 .mobile-navigation-mobile {
   // display: flex;
   // flex-direction: column;
-  padding: 18px 0;
+  padding-top: 18px;
   .group-wrap {
     padding: 0 20px;
     display: flex;
@@ -29,9 +29,10 @@
     overflow-x: auto;
     flex-wrap: nowrap;
     scroll-snap-type: x;
+    padding: 0 15px;
     .one-card {
+      flex-shrink: 0;
       scroll-snap-align: end;
-      min-width: 30%;
     }
   }
 }

package/lib/composite-comp/dito/components/PcNavigation/defaultJSON.js

@@ -0,0 +1,131 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getDefaultJSON = exports.PcNavGroupSourceJSON = void 0;
+
+var _uuid = require("uuid");
+
+var PcNavGroupSourceJSON = function PcNavGroupSourceJSON() {
+  var groupId = (0, _uuid.v4)();
+  return {
+    id: groupId,
+    title: {
+      parentId: groupId,
+      id: (0, _uuid.v4)(),
+      open: true,
+      type: 'TEXT',
+      specialContent: [],
+      text: 'Navigation',
+      content: {
+        sizeType: 'Customize font styles',
+        fontFamily: 'Open Sans',
+        fontWeight: 400,
+        fontSize: 16,
+        pcFontSize: 16,
+        width: '100%',
+        color: '#232F46'
+      },
+      underline: {
+        open: false,
+        textDecorationColor: '',
+        textDecorationStyle: 'solid'
+      },
+      vertical: {}
+    }
+  };
+};
+
+exports.PcNavGroupSourceJSON = PcNavGroupSourceJSON;
+
+var getDefaultJSON = function getDefaultJSON() {
+  return {
+    id: (0, _uuid.v4)(),
+    type: 'PC_NAVIGATION',
+    spacing: {
+      pc: {
+        paddingTop: 10,
+        paddingBottom: 10,
+        paddingLeft: 120,
+        paddingRight: 120,
+        marginBottom: window.magicDesign.compSpacing
+      },
+      mobile: {
+        paddingTop: 0,
+        paddingBottom: 0,
+        marginBottom: 0
+      }
+    },
+    customize: {
+      layout: 'normal'
+    },
+    background: {
+      opacity: 100,
+      color: '#FFFFFF',
+      image: '',
+      bgType: 'color'
+    },
+    home: {
+      allCategory: {
+        id: (0, _uuid.v4)(),
+        open: true,
+        type: 'TEXT',
+        text: 'All Category',
+        specialContent: [],
+        iconUrl: '',
+        content: {
+          sizeType: 'Customize font styles',
+          fontFamily: 'Open Sans',
+          fontWeight: 400,
+          fontSize: 16,
+          pcFontSize: 16,
+          width: '100%',
+          color: '#3A2E2E'
+        }
+      },
+      firstCategory: {
+        id: (0, _uuid.v4)(),
+        specialContent: [],
+        content: {
+          sizeType: 'Customize font styles',
+          fontFamily: 'Open Sans',
+          fontWeight: 400,
+          fontSize: 16,
+          pcFontSize: 16,
+          width: '100%',
+          color: '#232F46'
+        }
+      },
+      secondCategory: {
+        id: (0, _uuid.v4)(),
+        specialContent: [],
+        content: {
+          sizeType: 'Customize font styles',
+          fontFamily: 'Open Sans',
+          fontWeight: 400,
+          fontSize: 16,
+          pcFontSize: 16,
+          width: '100%',
+          color: '#232F46'
+        }
+      },
+      lastCategory: {
+        id: (0, _uuid.v4)(),
+        specialContent: [],
+        content: {
+          sizeType: 'Customize font styles',
+          fontFamily: 'Open Sans',
+          fontWeight: 400,
+          fontSize: 16,
+          pcFontSize: 16,
+          width: '100%',
+          color: '#232F46'
+        }
+      }
+    },
+    groupSource: [PcNavGroupSourceJSON()]
+  };
+};
+
+exports.getDefaultJSON = getDefaultJSON;

package/lib/composite-comp/dito/components/PcNavigation/images/menu-icon.svg

@@ -0,0 +1,6 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="&#230;&#177;&#137;&#229;&#160;&#161;&#229;&#140;&#133;">
+<rect id="Rectangle" opacity="0.01" width="16" height="16" fill="black"/>
+<path id="Shape" fill-rule="evenodd" clip-rule="evenodd" d="M1.15 4.34978C0.688742 4.34978 0.313477 3.97452 0.313477 3.51328C0.313477 3.05202 0.688742 2.67676 1.15 2.67676H14.8503C15.3115 2.67676 15.6868 3.05202 15.6868 3.51328C15.6868 3.97452 15.3115 4.34978 14.8503 4.34978H1.15ZM1.15 9.25537C0.688742 9.25537 0.313477 8.88009 0.313477 8.41878C0.313477 7.95753 0.688742 7.58226 1.15 7.58226H14.8503C15.3115 7.58226 15.6868 7.95753 15.6868 8.41878C15.6868 8.88009 15.3115 9.25537 14.8503 9.25537H1.15ZM0.313477 13.2852C0.313477 13.7465 0.688742 14.1217 1.15 14.1217H14.8503C15.3115 14.1217 15.6868 13.7465 15.6868 13.2852C15.6868 12.8239 15.3115 12.4487 14.8503 12.4487H1.15C0.688742 12.4487 0.313477 12.8239 0.313477 13.2852Z" fill="#3A2E2E"/>
+</g>
+</svg>

package/lib/composite-comp/dito/components/PcNavigation/index.js

@@ -0,0 +1,85 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _pc = _interopRequireDefault(require("./pc"));
+
+var _defaultJSON = require("./defaultJSON");
+
+var _compositeDecorator = _interopRequireDefault(require("../../../../decorator/compositeDecorator"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+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 _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); }
+
+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 __decorate = void 0 && (void 0).__decorate || function (decorators, target, key, desc) {
+  var c = arguments.length,
+      r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc,
+      d;
+  if ((typeof Reflect === "undefined" ? "undefined" : _typeof(Reflect)) === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);else for (var i = decorators.length - 1; i >= 0; i--) {
+    if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  }
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+
+var PcNavigation =
+/** @class */
+function (_super) {
+  __extends(PcNavigation, _super);
+
+  function PcNavigation() {
+    return _super !== null && _super.apply(this, arguments) || this;
+  }
+
+  PcNavigation.prototype.render = function () {
+    var nodeData = this.props.nodeData;
+    console.log('---PcNavigation', nodeData);
+    return /*#__PURE__*/_react["default"].createElement("div", null, window.magicDesign.device === 'pc' ? /*#__PURE__*/_react["default"].createElement(_pc["default"], {
+      data: nodeData
+    }) : /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null));
+  };
+
+  PcNavigation.defaultProps = {};
+  PcNavigation.type = 'PC_NAVIGATION';
+  PcNavigation.getDefaultJSON = _defaultJSON.getDefaultJSON;
+  PcNavigation = __decorate([_compositeDecorator["default"]], PcNavigation);
+  return PcNavigation;
+}(_react.Component);
+
+var _default = PcNavigation;
+exports["default"] = _default;