@titaui/pc 1.5.82 → 1.5.83

package/lib/components/period-selector/common.js

@@ -3,12 +3,24 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.computeYearIndex = exports.formatPeriod = exports.dealYearsRange = exports.dealSelectedPeriodData = void 0;
+exports.getQuaterNum = getQuaterNum;
+exports.getDefalutCycle = getDefalutCycle;
+exports.getDateRangeByCycle = exports.computeYearIndex = exports.formatPeriod = exports.dealYearsRange = exports.dealSelectedPeriodData = void 0;
+
+var _moment = _interopRequireDefault(require("moment"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+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 dealSelectedPeriodData = function dealSelectedPeriodData(period) {
   var option = {};
-  option.cycleType = period == '-1' ? '-1' : period.substring(0, 1);
-  option.yqmNum = period.substring(2) == '' ? '0' : period.substring(2);
+  option.cycleType = period == "-1" ? "-1" : period.substring(0, 1);
+  option.yqmNum = period.substring(2) == "" ? "0" : period.substring(2);
   return option;
 };
 
@@ -20,8 +32,8 @@ var dealYearsRange = function dealYearsRange(yearsRange, showAllYears) {
   if (yearsRange.length) {
     if (yearsRange.length > 1 && showAllYears) {
       yearsData = [{
-        title: '全部年份',
-        order: ['-1'],
+        title: "全部年份",
+        order: ["-1"],
         checked: false
       }];
     }
@@ -32,15 +44,15 @@ var dealYearsRange = function dealYearsRange(yearsRange, showAllYears) {
     for (var i = startYear; i <= endYear; i++) {
       yearsData.push({
         checked: false,
-        order: [i + ''],
-        title: i + ''
+        order: [i + ""],
+        title: i + ""
       });
     }
   } else {
     var nowYear = new Date().getFullYear();
     yearsData = [{
-      title: nowYear + '',
-      order: [nowYear + ''],
+      title: nowYear + "",
+      order: [nowYear + ""],
       checked: false
     }];
   }
@@ -51,28 +63,37 @@ var dealYearsRange = function dealYearsRange(yearsRange, showAllYears) {
 exports.dealYearsRange = dealYearsRange;
 
 var formatPeriod = function formatPeriod(selected) {
+  if (!selected) return "";
   var quarter = ["", "第一季度", "第二季度", "第三季度", "第四季度"];
   var cycleDate = "";
-  var annualNum = selected.annualNum == '-1' ? "全部年份" : selected.annualNum;
+  var annualNum = selected.annualNum == "-1" ? "全部年份" : selected.annualNum + "年";
 
-  switch (selected.cycleType) {
-    case '-1':
+  switch ("".concat(selected.cycleType)) {
+    case "-1":
       cycleDate = "全部周期";
       break;
 
-    case '1':
+    case "1":
       cycleDate = "年度";
       break;
 
-    case '2':
+    case "2":
       // 季度
       cycleDate = quarter[Number(selected.yqmNum)];
       break;
 
-    case '3':
+    case "3":
       cycleDate = selected.yqmNum + "月";
       break;
 
+    case "4":
+      cycleDate = "".concat(selected.yqmNum, " - ").concat((Number(selected.yqmNum) + 1) % 12, "\u6708");
+      break;
+
+    case "5":
+      cycleDate = selected.yqmNum == "1" ? "上半年" : "下半年";
+      break;
+
     default:
       cycleDate = "自定义";
   }
@@ -88,7 +109,7 @@ var computeYearIndex = function computeYearIndex(currentYear, yearsData, compute
     return Number(item.title) == currentYear;
   });
 
-  if (computeType == 'add') {
+  if (computeType == "add") {
     newIndex = currentYearIndex + 1;
   } else {
     newIndex = currentYearIndex - 1;
@@ -97,4 +118,134 @@ var computeYearIndex = function computeYearIndex(currentYear, yearsData, compute
   return newIndex;
 };
 
-exports.computeYearIndex = computeYearIndex;
+exports.computeYearIndex = computeYearIndex;
+
+var getDateRangeByCycle = function getDateRangeByCycle(cycle) {
+  var startMonth = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 1;
+
+  if (!cycle) {
+    var start = (0, _moment["default"])();
+    return {
+      startDate: start.format("YYYY/MM/DD"),
+      endDate: start.add(1, "M").format("YYYY/MM/DD")
+    };
+  }
+
+  switch (cycle.cycleType) {
+    case "1":
+      {
+        var _start = (0, _moment["default"])().year(Number(cycle.annualNum)).month(startMonth - 1).date(1);
+
+        return {
+          startDate: _start.format("YYYY/MM/DD"),
+          endDate: _start.add(11, "M").endOf("M").format("YYYY/MM/DD")
+        };
+      }
+
+    case "2":
+      {
+        var yearStart = (0, _moment["default"])().year(Number(cycle.annualNum)).month(startMonth - 1).date(1);
+        var quarterStart = yearStart.add((Number(cycle.yqmNum) - 1) * 3, "M");
+        return {
+          startDate: quarterStart.format("YYYY/MM/DD"),
+          endDate: quarterStart.add(2, "M").endOf("M").format("YYYY/MM/DD")
+        };
+      }
+
+    case "3":
+      {
+        return {
+          startDate: "".concat(cycle.annualNum, "/").concat(Number(cycle.yqmNum) < 10 ? "0" + cycle.yqmNum : cycle.yqmNum, "/01"),
+          endDate: (0, _moment["default"])(cycle.annualNum + "/" + cycle.yqmNum + "/" + 1).add(1, "month").set("date", 0).format("YYYY/MM/DD")
+        };
+      }
+
+    case "4":
+      {
+        var _start2 = (0, _moment["default"])().year(Number(cycle.annualNum)).month(Number(cycle.yqmNum) - 1).date(1);
+
+        return {
+          startDate: _start2.format("YYYY/MM/DD"),
+          endDate: _start2.add(1, "month").endOf("M").format("YYYY/MM/DD")
+        };
+      }
+
+    case "5":
+      {
+        var _start3 = (0, _moment["default"])().year(Number(cycle.annualNum)).month(startMonth - 1).date(1);
+
+        if (cycle.yqmNum == "2") _start3.add(6, "M");
+        return {
+          startDate: _start3.format("YYYY/MM/DD"),
+          endDate: _start3.add(5, "month").endOf("M").format("YYYY/MM/DD")
+        };
+      }
+
+    default:
+      {
+        return {
+          startDate: (0, _moment["default"])().set("year", Number(cycle.annualNum)).format("YYYY/MM/DD"),
+          endDate: (0, _moment["default"])().set("year", Number(cycle.annualNum)).add(30, "day").format("YYYY/MM/DD")
+        };
+      }
+  }
+};
+
+exports.getDateRangeByCycle = getDateRangeByCycle;
+
+function getQuaterNum(month) {
+  var startMonth = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 1;
+  var m = month >= startMonth ? month : month + 12;
+  return Math.floor((m - startMonth) / 3) + 1;
+}
+
+function getDefalutCycle(setting) {
+  if (setting.isOpenQuarter) {
+    var _cycle = {
+      annualNum: new Date().getFullYear() + "",
+      cycleType: "2",
+      yqmNum: "".concat(getQuaterNum(new Date().getMonth() + 1, setting.yearStartMonth))
+    };
+    return _objectSpread(_objectSpread({}, _cycle), getDateRangeByCycle(_cycle, setting.yearStartMonth));
+  } else if (setting.isOpenMonth) {
+    var _cycle2 = {
+      annualNum: new Date().getFullYear() + "",
+      cycleType: "3",
+      yqmNum: new Date().getMonth() + 1 + ""
+    };
+    return _objectSpread(_objectSpread({}, _cycle2), getDateRangeByCycle(_cycle2, setting.yearStartMonth));
+  } else if (setting.isOpenBimonthly) {
+    var month = new Date().getMonth() + 1;
+
+    if (setting.yearStartMonth % 2 == 1) {
+      month = month - (month % 2 == 1 ? 0 : 1);
+    } else {
+      month = month - month % 2 || 12;
+    }
+
+    var _cycle3 = {
+      annualNum: new Date().getFullYear() + "",
+      cycleType: "4",
+      yqmNum: month + ""
+    };
+    return _objectSpread(_objectSpread({}, _cycle3), getDateRangeByCycle(_cycle3, setting.yearStartMonth));
+  } else if (setting.isOpenHalfYear) {
+    var _cycle4 = {
+      annualNum: new Date().getFullYear() + "",
+      cycleType: "5",
+      yqmNum: "1"
+    };
+    return _objectSpread(_objectSpread({}, _cycle4), getDateRangeByCycle(_cycle4, setting.yearStartMonth));
+  }
+
+  var cycle = {
+    annualNum: new Date().getFullYear() + "",
+    cycleType: "1",
+    yqmNum: "1"
+  };
+  return _objectSpread({
+    annualNum: new Date().getFullYear() + "",
+    cycleType: "1",
+    yqmNum: "1"
+  }, getDateRangeByCycle(cycle, setting.yearStartMonth));
+}

package/lib/components/period-selector/components/selector/index.js

@@ -13,16 +13,26 @@ var _common = require("../../common");
 
 var _mockData = require("../../mockData");
 
-var _classnames = _interopRequireDefault(require("classnames"));
-
 var _style = require("./style");
 
-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 _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+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; }
+
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
@@ -39,9 +49,11 @@ function PeriodList(_ref) {
   var actived = _ref.actived,
       periodData = _ref.periodData,
       onSelected = _ref.onSelected,
-      style = _ref.style;
+      style = _ref.style,
+      _ref$size = _ref.size,
+      size = _ref$size === void 0 ? "m" : _ref$size;
 
-  var _useState = (0, _react.useState)(['0']),
+  var _useState = (0, _react.useState)(["0"]),
       _useState2 = _slicedToArray(_useState, 2),
       activeOrder = _useState2[0],
       setActiveOrder = _useState2[1];
@@ -53,15 +65,48 @@ function PeriodList(_ref) {
     style: style
   }, periodData.map(function (item, index) {
     return /*#__PURE__*/_react["default"].createElement(_style.Item, {
-      className: item.order[0] == activeOrder[0] ? 'active' : '',
+      className: item.order[0] == activeOrder[0] ? "active" : "",
       key: index,
       onClick: function onClick() {
         return onSelected(item.order[0]);
-      }
+      },
+      size: size
     }, item.title);
+  }), new Array(6).fill(1).map(function () {
+    return /*#__PURE__*/_react["default"].createElement(_style.PlaceHolder, {
+      size: size
+    });
   }));
 }
 
+function getDoubleMonthData(startMonth) {
+  var start = startMonth % 2 == 1 ? 1 : 2;
+  var month = start;
+
+  var getNextMonth = function getNextMonth(month) {
+    var step = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 1;
+    return (month + step) % 12 || 12;
+  };
+
+  var datas = [{
+    title: "".concat(start, " - ").concat(getNextMonth(start), "\u6708"),
+    order: ["4,".concat(start)],
+    checked: false
+  }];
+
+  while (1) {
+    month = getNextMonth(month, 2);
+    if (month == start) break;
+    datas.push({
+      title: "".concat(month, " - ").concat(getNextMonth(month), "\u6708"),
+      order: ["4,".concat(month)],
+      checked: false
+    });
+  }
+
+  return datas;
+}
+
 function Selector(_ref2) {
   var className = _ref2.className,
       onSelected = _ref2.onSelected,
@@ -71,10 +116,14 @@ function Selector(_ref2) {
       showMonth = _ref2.showMonth,
       showQuarter = _ref2.showQuarter,
       showYear = _ref2.showYear,
+      showHalfYear = _ref2.showHalfYear,
+      showDoubleMonth = _ref2.showDoubleMonth,
       yearsRange = _ref2.yearsRange,
-      wrapperStyle = _ref2.wrapperStyle;
+      wrapperStyle = _ref2.wrapperStyle,
+      _ref2$startMonth = _ref2.startMonth,
+      startMonth = _ref2$startMonth === void 0 ? 1 : _ref2$startMonth;
 
-  var _useState3 = (0, _react.useState)(new Date().getFullYear() + ''),
+  var _useState3 = (0, _react.useState)(new Date().getFullYear() + ""),
       _useState4 = _slicedToArray(_useState3, 2),
       annualNum = _useState4[0],
       setAnnualNum = _useState4[1];
@@ -84,7 +133,7 @@ function Selector(_ref2) {
       annualNumIndex = _useState6[0],
       setAnnualNumIndex = _useState6[1];
 
-  var _useState7 = (0, _react.useState)('-1'),
+  var _useState7 = (0, _react.useState)("-1"),
       _useState8 = _slicedToArray(_useState7, 2),
       cycleType = _useState8[0],
       setCycleType = _useState8[1];
@@ -94,7 +143,7 @@ function Selector(_ref2) {
       periodData = _useState10[0],
       setPeriodData = _useState10[1];
 
-  var _useState11 = (0, _react.useState)('0'),
+  var _useState11 = (0, _react.useState)("0"),
       _useState12 = _slicedToArray(_useState11, 2),
       yqmNum = _useState12[0],
       setYqmNum = _useState12[1];
@@ -108,17 +157,18 @@ function Selector(_ref2) {
       var yearIndex = (0, _common.computeYearIndex)(Number(annualNum), yearsData, computeType);
       setAnnualNum(yearsData[yearIndex].title);
       setAnnualNumIndex(yearIndex);
-      setCycleType('');
-      setYqmNum('');
+      setCycleType("");
+      setYqmNum("");
     }
   }
 
   function handleSelected(period) {
-    var selected = {
+    var selected = _objectSpread({
       annualNum: annualNum,
       cycleType: (0, _common.dealSelectedPeriodData)(period).cycleType,
       yqmNum: (0, _common.dealSelectedPeriodData)(period).yqmNum
-    };
+    }, (0, _common.getDateRangeByCycle)((0, _common.dealSelectedPeriodData)(period), startMonth));
+
     onSelected(selected);
   }
 
@@ -137,49 +187,64 @@ function Selector(_ref2) {
       title: "年度",
       order: ["1"],
       checked: false
-    }, showCustom && {
-      title: "自定义",
-      order: ["0,0"],
-      checked: false
     }].filter(function (item) {
       return item;
     });
+
+    if (showHalfYear) {
+      periodDatas.push({
+        title: "上半年",
+        order: ["5,1"],
+        checked: false
+      }, {
+        title: "下半年",
+        order: ["5,2"],
+        checked: false
+      });
+    }
+
+    if (showQuarter) {
+      periodDatas.push.apply(periodDatas, _toConsumableArray(_mockData.MockQuarter));
+    }
+
+    if (showCustom) {
+      periodDatas.push({
+        title: "自定义",
+        order: ["0,0"],
+        checked: false
+      });
+    }
+
     setPeriodData(periodDatas);
   }, [selected, showCustom, showFullCycle, showMonth, showQuarter, showYear]);
   return /*#__PURE__*/_react["default"].createElement(_style.Wrapper, {
     className: className,
     style: wrapperStyle
-  }, /*#__PURE__*/_react["default"].createElement(_style.Head, null, yearsRange.length > 1 && /*#__PURE__*/_react["default"].createElement("span", {
-    className: (0, _classnames["default"])('titaui-period-selector__left-arrow', {
-      'disabled': !(yearsRangeLen > 1 && annualNumIndex != 0)
-    }),
+  }, /*#__PURE__*/_react["default"].createElement(_style.Head, null, yearsRange.length > 1 && /*#__PURE__*/_react["default"].createElement(_style.Icon, {
+    className: "tu-icon-angle-left ".concat(yearsRangeLen > 1 && annualNumIndex != 0 ? "" : "disabled"),
     onClick: function onClick() {
-      return setYear('subtract', yearsRangeLen > 1 && annualNumIndex != 0);
+      return setYear("subtract", yearsRangeLen > 1 && annualNumIndex != 0);
     }
-  }), /*#__PURE__*/_react["default"].createElement(_style.Title, null, annualNum), yearsRange.length > 1 && /*#__PURE__*/_react["default"].createElement("span", {
-    className: (0, _classnames["default"])('titaui-period-selector__right-arrow', {
-      'disabled': !(yearsRangeLen > 1 && annualNumIndex != yearsRangeLen - 1)
-    }),
+  }), /*#__PURE__*/_react["default"].createElement(_style.Title, null, annualNum), yearsRange.length > 1 && /*#__PURE__*/_react["default"].createElement(_style.Icon, {
+    className: "tu-icon-angle-right ".concat(yearsRangeLen > 1 && annualNumIndex != yearsRangeLen - 1 ? "" : "disabled"),
     onClick: function onClick() {
-      return setYear('add', yearsRangeLen > 1 && annualNumIndex != yearsRangeLen - 1);
+      return setYear("add", yearsRangeLen > 1 && annualNumIndex != yearsRangeLen - 1);
     }
   })), /*#__PURE__*/_react["default"].createElement(PeriodList, {
-    actived: ["".concat(cycleType == '-1' ? '-1' : cycleType == '1' ? cycleType : "".concat(cycleType, ",").concat(yqmNum))],
+    actived: ["".concat(cycleType == "-1" ? "-1" : cycleType == "1" ? cycleType : "".concat(cycleType, ",").concat(yqmNum))],
     periodData: periodData,
     onSelected: function onSelected(period) {
       handleSelected(period);
-    },
-    style: {
-      flexWrap: 'nowrap'
     }
-  }), showQuarter && /*#__PURE__*/_react["default"].createElement(PeriodList, {
-    actived: ["".concat(cycleType == '-1' ? '-1' : cycleType == '1' ? cycleType : "".concat(cycleType, ",").concat(yqmNum))],
-    periodData: _mockData.MockQuarter,
+  }), showDoubleMonth && /*#__PURE__*/_react["default"].createElement(PeriodList, {
+    actived: ["".concat(cycleType == "-1" ? "-1" : cycleType == "1" ? cycleType : "".concat(cycleType, ",").concat(yqmNum))],
+    periodData: getDoubleMonthData(startMonth),
     onSelected: function onSelected(period) {
       handleSelected(period);
     }
   }), showMonth && /*#__PURE__*/_react["default"].createElement(PeriodList, {
-    actived: ["".concat(cycleType == '-1' ? '-1' : cycleType == '1' ? cycleType : "".concat(cycleType, ",").concat(yqmNum))],
+    actived: ["".concat(cycleType == "-1" ? "-1" : cycleType == "1" ? cycleType : "".concat(cycleType, ",").concat(yqmNum))],
+    size: "s",
     periodData: _mockData.MockMonth,
     onSelected: function onSelected(period) {
       handleSelected(period);

package/lib/components/period-selector/components/selector/style.js

@@ -3,36 +3,50 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.Item = exports.List = exports.Icon = exports.Title = exports.Head = exports.Wrapper = void 0;
+exports.PlaceHolder = exports.Item = exports.List = exports.Icon = exports.Title = exports.Head = exports.Wrapper = void 0;
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 
-var Wrapper = _styledComponents["default"].div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  width: 181px;\n  min-height: 80px;\n  padding: 15px 10px;\n  border: 1px solid #f7f8fa;\n  border-radius: 4px;\n  box-shadow: 0px 4px 12px 0px rgba(127,145,180,0.2); \n  background: #ffffff;\n  box-sizing: content-box;\n"])));
+var Wrapper = _styledComponents["default"].div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    width: 262px;\n    box-sizing: border-box;\n    min-height: 80px;\n    padding: 16px 0px;\n    border: 1px solid #f7f8fa;\n    border-radius: 4px;\n    box-shadow: 0px 4px 12px 0px rgba(127,145,180,0.2); \n    background: #ffffff;\n    box-sizing: content-box;\n"])));
 
 exports.Wrapper = Wrapper;
 
-var Head = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  width: 100%;\n  height: 36px;\n  margin: 0 auto 8px;\n  padding: 8px 15px;\n  border-radius: 3px;\n  background: #f7f8fa;\n  box-sizing: border-box;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n"])));
+var Head = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    height: 36px;\n    margin: 0 20px 8px;\n    padding: 8px 15px;\n    border-radius: 3px;\n    background: #f7f8fa;\n    box-sizing: border-box;\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n"])));
 
 exports.Head = Head;
 
-var Title = _styledComponents["default"].a(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  flex: 1;\n  font-size: 14px;\n  height: 20px;\n  color: #3f4755;\n  cursor: default;\n  text-align: center;\n\n  &:hover {\n    color: #3f4755;\n  }\n"])));
+var Title = _styledComponents["default"].a(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    flex: 1;\n    font-size: 14px;\n    height: 20px;\n    color: #3f4755;\n    cursor: default;\n    text-align: center;\n\n    &:hover {\n        color: #3f4755;\n    }\n"])));
 
 exports.Title = Title;
 
-var Icon = _styledComponents["default"].a(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  transition: all .3s ease-in;\n  color: #3f4755;\n\n  &:hover {\n    color: #2879ff;\n  }\n\n  &.disabled {\n    color: #bfc7d5;\n    cursor: default;\n\n    &:hover {\n      color: #bfc7d5;\n    }\n  }\n"])));
+var Icon = _styledComponents["default"].a(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n    transition: all .3s ease-in;\n    color: #3f4755;\n\n    &:hover {\n        color: #2879ff;\n    }\n\n    &.disabled {\n        color: #bfc7d5;\n        cursor: default;\n\n        &:hover {\n            color: #bfc7d5;\n        }\n    }\n"])));
 
 exports.Icon = Icon;
 
-var List = _styledComponents["default"].div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  flex-wrap: wrap;\n  justify-content: space-between;\n"])));
+var List = _styledComponents["default"].div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n    display: flex;\n    align-items: center;\n    flex-wrap: wrap;\n    justify-content: space-between;\n    padding: 0 11px;\n    box-sizing: border-box;\n"])));
 
 exports.List = List;
 
-var Item = _styledComponents["default"].a(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  min-width: 48px;\n  padding: 8px;\n  font-size: 12px;\n  line-height: 17px;\n  transition: all .3s ease-in;\n  box-sizing: border-box;\n  color: #6f7886;\n  cursor: pointer;\n  text-align: center;\n  white-space: nowrap;\n\n  &.active,\n  &:hover {\n    color: #2879ff;\n  }\n\n  &:hover {\n    background: rgba(240,242,245,0.3);\n  }\n"])));
+var getItemWidthBySize = function getItemWidthBySize(size) {
+  if (size == 's') return 48;
+  if (size == 'm') return 72;
+  return 72;
+};
 
-exports.Item = Item;
+var Item = _styledComponents["default"].a(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n    width: ", "px;\n    padding: 8px;\n    font-size: 12px;\n    line-height: 17px;\n    transition: all .3s ease-in;\n    box-sizing: border-box;\n    color: #6f7886;\n    cursor: pointer;\n    text-align: center;\n    white-space: nowrap;\n    flex-shrink: 0;\n\n    &.active,\n    &:hover {\n        color: #2879ff;\n    }\n\n    &:hover {\n        background: rgba(240,242,245,0.3);\n    }\n"])), function (p) {
+  return getItemWidthBySize(p.size);
+});
+
+exports.Item = Item;
+
+var PlaceHolder = _styledComponents["default"].div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n    width: ", "px;\n    height: 0;\n"])), function (p) {
+  return getItemWidthBySize(p.size);
+});
+
+exports.PlaceHolder = PlaceHolder;