@hi-ui/hiui 2.15.11 → 2.15.12

package/es/date-picker/YMRangePanel.js

@@ -0,0 +1,364 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _Calender = _interopRequireDefault(require("./Calender"));
+
+var _util = require("./util");
+
+var _icon = _interopRequireDefault(require("../icon"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _context = _interopRequireDefault(require("../context"));
+
+var _dateUtil = require("./dateUtil");
+
+var YMRangePanel =
+/*#__PURE__*/
+function (_Component) {
+  (0, _inherits2["default"])(YMRangePanel, _Component);
+
+  function YMRangePanel(props) {
+    var _this;
+
+    (0, _classCallCheck2["default"])(this, YMRangePanel);
+    _this = (0, _possibleConstructorReturn2["default"])(this, (0, _getPrototypeOf2["default"])(YMRangePanel).call(this, props));
+
+    var _this$_generatePanelD = _this._generatePanelData(),
+        range = _this$_generatePanelD.range,
+        leftDate = _this$_generatePanelD.leftDate,
+        rightDate = _this$_generatePanelD.rightDate;
+
+    _this.maskRef = _react["default"].createRef();
+    _this.state = {
+      date: leftDate,
+      minDate: props.min,
+      maxDate: props.max,
+      range: range,
+      leftDate: leftDate,
+      rightDate: rightDate
+    };
+    return _this;
+  }
+
+  (0, _createClass2["default"])(YMRangePanel, [{
+    key: "_generatePanelData",
+    value: function _generatePanelData() {
+      var _this$props = this.props,
+          type = _this$props.type,
+          date = _this$props.date;
+      var startDate = date.startDate,
+          endDate = date.endDate; // 组件内左右面板中日期
+
+      var leftDate = (0, _dateUtil.getStartDate)(date);
+
+      var _deconstructDate = (0, _util.deconstructDate)(leftDate),
+          sYear = _deconstructDate.year;
+
+      var rightDate = (0, _dateUtil.isValid)(endDate) ? new Date(endDate) : new Date(sYear + '');
+
+      var _deconstructDate2 = (0, _util.deconstructDate)(rightDate),
+          eYear = _deconstructDate2.year;
+
+      if (type === 'yearrange') {
+        if (eYear - sYear < 12) {
+          rightDate.setFullYear(sYear + 12);
+        }
+      } else {
+        if (eYear === sYear) {
+          rightDate.setFullYear(sYear + 1);
+        }
+      }
+
+      var range = {
+        startDate: (0, _dateUtil.isValid)(startDate) ? startDate : null,
+        endDate: (0, _dateUtil.isValid)(endDate) ? endDate : null,
+        selecting: false
+      };
+      return {
+        range: range,
+        leftDate: leftDate,
+        rightDate: rightDate
+      };
+    }
+    /**
+     * 改变年份事件
+     * @param {Number} num  加减值
+     */
+
+  }, {
+    key: "changeYear",
+    value: function changeYear(flag, pos) {
+      var _this$state = this.state,
+          leftDate = _this$state.leftDate,
+          rightDate = _this$state.rightDate;
+      var type = this.props.type;
+      var nLeftDate = (0, _dateUtil.toDate)(leftDate);
+      var nRightDate = (0, _dateUtil.toDate)(rightDate);
+      var num = type === 'yearrange' ? 12 : 1;
+
+      if (pos === 'left') {
+        nLeftDate = (0, _dateUtil.changeYear)(leftDate, flag, num);
+      } else {
+        nRightDate = (0, _dateUtil.changeYear)(rightDate, flag, num);
+      }
+
+      if (nLeftDate.getFullYear() < nRightDate.getFullYear()) {
+        this.setState({
+          leftDate: nLeftDate,
+          rightDate: nRightDate
+        });
+      }
+    }
+    /**
+     * Header 中间部分内容
+     * @param {String} type 选择器类型
+     * @param {Number} year 当前年份
+     * @param {Number} month 当前月份
+     */
+
+  }, {
+    key: "getHeaderCenterContent",
+    value: function getHeaderCenterContent(year) {
+      var _this$props2 = this.props,
+          locale = _this$props2.locale,
+          type = _this$props2.type;
+
+      if (type === 'yearrange') {
+        return year - 4 + '-' + (year + 7);
+      }
+
+      if (locale === 'zh-CN') {
+        return year + '年';
+      } else {
+        return "".concat(year);
+      }
+    }
+    /**
+     * 渲染 Header 部分（包含箭头快捷操作）
+     * @param {Object} args {
+     *  year: 当前年份
+     *  month: 当前月份
+     *  type: 选择器类型
+     *  num: 点击箭头时要步进的值 默认1 主要应用于年份选择时
+     * }
+     */
+
+  }, {
+    key: "renderHeader",
+    value: function renderHeader(value, lr) {
+      var _this2 = this;
+
+      var _deconstructDate3 = (0, _util.deconstructDate)(value),
+          year = _deconstructDate3.year;
+
+      return _react["default"].createElement("div", {
+        className: "hi-datepicker__header"
+      }, _react["default"].createElement("div", {
+        className: "hi-datepicker__header-btns"
+      }, _react["default"].createElement("span", {
+        onClick: function onClick() {
+          return _this2.changeYear(true, lr);
+        }
+      }, _react["default"].createElement(_icon["default"], {
+        name: "double-left"
+      }))), _react["default"].createElement("span", {
+        className: "hi-datepicker__header-text"
+      }, this.getHeaderCenterContent(year)), _react["default"].createElement("div", {
+        className: "hi-datepicker__header-btns"
+      }, _react["default"].createElement("span", {
+        onClick: function onClick() {
+          return _this2.changeYear(false, lr);
+        }
+      }, _react["default"].createElement(_icon["default"], {
+        name: "double-right"
+      }))));
+    }
+  }, {
+    key: "pick",
+    value: function pick(startDate, endDate) {
+      var range = this.state.range;
+      var _this$props3 = this.props,
+          onPick = _this$props3.onPick,
+          type = _this$props3.type;
+      range.startDate = type === 'yearrange' ? (0, _dateUtil.startOfYear)(startDate) : (0, _dateUtil.startOfMonth)(startDate);
+      this.setState({
+        range: range
+      });
+
+      if (endDate) {
+        range.endDate = type === 'yearrange' ? (0, _dateUtil.endOfYear)(endDate) : (0, _dateUtil.endOfMonth)(endDate);
+        onPick(range);
+      }
+    }
+  }, {
+    key: "onMouseMoveHandler",
+    value: function onMouseMoveHandler(date) {
+      var range = this.state.range;
+      range.endDate = date;
+      this.setState({
+        range: range
+      });
+    }
+  }, {
+    key: "getYearOrMonthData",
+    value: function getYearOrMonthData(year, type, _year) {
+      var start = type === 'year' ? year - 4 : 1;
+      var pType = this.props.type;
+      var trs = [[], [], [], []];
+      var num = 0;
+      var currentYear = new Date().getFullYear();
+      var currentMonth = new Date().getMonth();
+      var range = this.state.range;
+
+      var _fun = function _fun(sDate, tDate) {
+        return pType === 'yearrange' ? (0, _dateUtil.isSameYear)(sDate, tDate) : (0, _dateUtil.isSameMonth)(sDate, tDate);
+      };
+
+      for (var i = 0; i < 4; i++) {
+        var row = trs[i];
+
+        for (var j = 0; j < 3; j++) {
+          var col = row[j] || (row[j] = {
+            type: 'normal'
+          });
+          var y = start + num;
+
+          if (y === currentYear || y === currentMonth + 1 && year === currentYear) {
+            col.type = 'today';
+          }
+
+          col = (0, _util.colDisabled)(type, col, _year, this.props, y);
+          col.value = y;
+
+          var _val = pType === 'yearrange' ? new Date(y + '') : new Date(year, y - 1);
+
+          col.rangeStart = _fun(_val, range.startDate);
+          col.rangeEnd = _fun(_val, range.endDate);
+
+          var _ds = [range.startDate, range.endDate].sort(_dateUtil.compareAsc);
+
+          col.range = range.endDate && (0, _dateUtil.isWithinInterval)(_val, {
+            start: _ds[0],
+            end: _ds[1]
+          });
+          num++;
+        }
+      }
+
+      return trs;
+    }
+  }, {
+    key: "_getNormalComponent",
+    value: function _getNormalComponent(date, flag) {
+      var range = this.state.range;
+      var _this$props4 = this.props,
+          altCalendar = _this$props4.altCalendar,
+          altCalendarPreset = _this$props4.altCalendarPreset,
+          dateMarkRender = _this$props4.dateMarkRender,
+          dateMarkPreset = _this$props4.dateMarkPreset,
+          altCalendarPresetData = _this$props4.altCalendarPresetData,
+          dateMarkPresetData = _this$props4.dateMarkPresetData,
+          type = _this$props4.type,
+          onSelect = _this$props4.onSelect;
+      var component = null;
+
+      var _deconstructDate4 = (0, _util.deconstructDate)(date),
+          year = _deconstructDate4.year;
+
+      switch (type) {
+        case 'yearrange':
+          var yearData = this.getYearOrMonthData(year, 'year', year);
+          component = _react["default"].createElement(_Calender["default"], {
+            range: range,
+            altCalendar: altCalendar,
+            altCalendarPreset: altCalendarPreset,
+            dateMarkRender: dateMarkRender,
+            dateMarkPreset: dateMarkPreset,
+            date: date,
+            data: yearData,
+            type: 'yearrange',
+            onPick: this.pick.bind(this),
+            onSelect: onSelect,
+            mouseMove: this.onMouseMoveHandler.bind(this)
+          });
+          break;
+
+        case 'monthrange':
+          var monthData = this.getYearOrMonthData(year, 'month', year);
+          component = _react["default"].createElement(_Calender["default"], {
+            range: range,
+            onSelect: onSelect,
+            altCalendarPresetData: altCalendarPresetData,
+            dateMarkPresetData: dateMarkPresetData,
+            altCalendar: altCalendar,
+            altCalendarPreset: altCalendarPreset,
+            dateMarkRender: dateMarkRender,
+            dateMarkPreset: dateMarkPreset,
+            date: date,
+            data: monthData,
+            type: 'monthrange',
+            onPick: this.pick.bind(this),
+            mouseMove: this.onMouseMoveHandler.bind(this)
+          });
+          break;
+
+        default:
+          break;
+      }
+
+      return component;
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this$state2 = this.state,
+          leftDate = _this$state2.leftDate,
+          rightDate = _this$state2.rightDate;
+      var theme = this.props.theme;
+
+      var _c = (0, _classnames["default"])('hi-datepicker', theme && 'theme__' + theme);
+
+      var bodyCls = (0, _classnames["default"])('hi-datepicker__body', 'hi-datepicker__body--range');
+      return _react["default"].createElement("div", {
+        style: this.props.style,
+        className: _c
+      }, _react["default"].createElement("div", {
+        className: bodyCls
+      }, _react["default"].createElement("div", {
+        className: "hi-datepicker__panel hi-datepicker__panel--left"
+      }, this.renderHeader(leftDate, 'left'), _react["default"].createElement("div", {
+        className: "hi-datepicker__calender-container hi-datepicker__calender-container--year"
+      }, this._getNormalComponent(leftDate, 'left'))), _react["default"].createElement("div", {
+        className: "hi-datepicker__panel hi-datepicker__panel--right"
+      }, this.renderHeader(rightDate, 'right'), _react["default"].createElement("div", {
+        className: "hi-datepicker__calender-container hi-datepicker__calender-container--year"
+      }, this._getNormalComponent(rightDate, 'right')))));
+    }
+  }]);
+  return YMRangePanel;
+}(_react.Component);
+
+var _default = (0, _context["default"])(YMRangePanel);
+
+exports["default"] = _default;