@hi-ui/hiui 2.15.11 → 2.15.12

package/es/date-picker/datepicker-legacy/Calender.js

@@ -0,0 +1,422 @@
+"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 _util = require("./util");
+
+var _context = _interopRequireDefault(require("../../context"));
+
+var _dateUtil = require("./dateUtil");
+
+var _constants = require("./constants");
+
+var Calender =
+/*#__PURE__*/
+function (_Component) {
+  (0, _inherits2["default"])(Calender, _Component);
+
+  function Calender(props) {
+    var _this;
+
+    (0, _classCallCheck2["default"])(this, Calender);
+    _this = (0, _possibleConstructorReturn2["default"])(this, (0, _getPrototypeOf2["default"])(Calender).call(this, props));
+    _this.state = {
+      rows: [[], [], [], [], [], []]
+    };
+    _this.weekNum = 0;
+    return _this;
+  }
+
+  (0, _createClass2["default"])(Calender, [{
+    key: "_getTime",
+    value: function _getTime(week, y, m) {
+      var r = new Date(y, m - 1, 1);
+
+      var t = r.getTime() - week * _constants.DAY_MILLISECONDS;
+
+      return t;
+    }
+  }, {
+    key: "getRows",
+    value: function getRows() {
+      var _this$props = this.props,
+          type = _this$props.type,
+          range = _this$props.range,
+          _date = _this$props.date,
+          minDate = _this$props.minDate,
+          maxDate = _this$props.maxDate,
+          weekOffset = _this$props.weekOffset;
+
+      var _deconstructDate = (0, _util.deconstructDate)(_date, weekOffset),
+          year = _deconstructDate.year,
+          month = _deconstructDate.month,
+          week = _deconstructDate.week;
+
+      var _ref = range || {
+        startDate: null,
+        endDate: null
+      },
+          endDate = _ref.endDate,
+          startDate = _ref.startDate; // *  dayCount: 当月天数
+      // *  lastMonthDayCount: 上月总天数
+      // *  firstDayWeek: 当月第一天是周几
+
+
+      var firstDayWeek = (0, _dateUtil.getDay)((0, _dateUtil.startOfMonth)(_date)) - weekOffset;
+
+      if (firstDayWeek <= 0) {
+        // 如果为0 代表该月第一天是周日，在日历上需要第二行开始显示
+        firstDayWeek = 7;
+      }
+
+      var startTimeByCurrentPanel = this._getTime(firstDayWeek, year, month); // 当前日期面板中第一个日期的具体毫秒数(指向上一个月)
+
+
+      var dayCount = (0, _dateUtil.getDaysInMonth)(_date);
+      var lastMonthDayCount = (0, _dateUtil.getDaysInMonth)((0, _dateUtil.subMonths)(_date, 1)); // 上月总天数
+
+      var rows = this.state.rows;
+      var count = 0;
+
+      for (var i = 0; i < 6; i++) {
+        var row = rows[i];
+
+        for (var j = 0; j < 7; j++) {
+          var col = row[j] || (row[j] = {
+            type: 'normal',
+            range: false,
+            rangeStart: false,
+            rangeEnd: false
+          });
+          col.type = 'normal';
+          var currentTime = startTimeByCurrentPanel + _constants.DAY_MILLISECONDS * (i * 7 + j); // 当前日期的毫秒数
+
+          if (i === 0) {
+            // 处理第一行的日期数据
+            if (j >= firstDayWeek) {
+              // 本月
+              col.value = ++count;
+            } else {
+              // 上月
+              col.value = lastMonthDayCount - firstDayWeek + j + 1;
+              col.type = 'prev';
+            }
+          } else {
+            ++count;
+
+            if (count <= dayCount) {
+              // 本月
+              col.value = count;
+            } else {
+              // 下月
+              col.value = count - dayCount;
+              col.type = 'next';
+            }
+          } // if (range && (isSameDay(range.startDate, currentTime) || isSameDay(range.endDate, currentTime))) {
+          //   col.type = 'current'
+          // }
+
+
+          if ((0, _dateUtil.isToday)(currentTime)) {
+            col.type = 'today';
+          }
+
+          if ((0, _dateUtil.isSameDay)(_date, currentTime) && !range && type !== 'week') {
+            col.type = 'current';
+          }
+
+          if (type === 'daterange' || type === 'weekrange') {
+            var sv = (0, _dateUtil.isValid)(startDate);
+            var ev = (0, _dateUtil.isValid)(endDate);
+
+            if (sv) {
+              col.rangeStart = startDate && (0, _dateUtil.isSameDay)(currentTime, startDate);
+            }
+
+            if (ev) {
+              col.rangeEnd = endDate && (0, _dateUtil.isSameDay)(currentTime, endDate);
+            }
+
+            if (sv && ev) {
+              var _ds = [startDate, endDate].sort(_dateUtil.compareAsc);
+
+              col.range = endDate && (0, _dateUtil.isWithinInterval)((0, _dateUtil.toDate)(currentTime), {
+                start: _ds[0],
+                end: _ds[1]
+              });
+            }
+
+            row.weekNum = (0, _util.getYearWeek)(new Date(currentTime), weekOffset).weekNum;
+          }
+
+          col.disabled = minDate && (0, _dateUtil.compareAsc)(currentTime, minDate) === -1 || maxDate && (0, _dateUtil.compareAsc)(currentTime, maxDate) === 1;
+        }
+
+        if (type === 'week') {
+          (function () {
+            var _month = month;
+            var _year = year;
+
+            if (row[1].type === 'prev') {
+              _month -= 1;
+
+              if (_month <= 0) {
+                _year -= 1;
+                _month = 12;
+              }
+            }
+
+            if (row[1].type === 'next') {
+              _month += 1;
+
+              if (_month >= 12) {
+                _year += 1;
+                _month = 1;
+              }
+            }
+
+            var cw = (0, _util.getYearWeek)(new Date(_year, _month - 1, row[1].value), weekOffset).weekNum;
+            var bol = cw === week;
+            row.forEach(function (col) {
+              col.range = bol;
+            });
+            row[0].rangeStart = bol;
+            row[6].rangeEnd = bol;
+            row.currentWeek = bol;
+            row.weekNum = cw;
+          })();
+        }
+      }
+
+      return rows;
+    }
+  }, {
+    key: "_getClassName",
+    value: function _getClassName(ele) {
+      if (!ele) return;
+
+      if (ele.nodeName !== 'TD') {
+        return this._getClassName(ele.parentNode);
+      } else {
+        return ele.className;
+      }
+    }
+  }, {
+    key: "handlerClick",
+    value: function handlerClick(e) {
+      var _this$props2 = this.props,
+          onPick = _this$props2.onPick,
+          date = _this$props2.date,
+          type = _this$props2.type,
+          range = _this$props2.range;
+
+      var _deconstructDate2 = (0, _util.deconstructDate)(date),
+          year = _deconstructDate2.year,
+          month = _deconstructDate2.month,
+          hours = _deconstructDate2.hours,
+          minutes = _deconstructDate2.minutes,
+          seconds = _deconstructDate2.seconds;
+
+      var td = e.target;
+
+      var cls = this._getClassName(td);
+
+      var value = td.getAttribute('value');
+      if (td.nodeName !== 'SPAN' && td.nodeName !== 'TD' && td.nodeName !== 'DIV' || td.disabled) return false;
+      if (cls.indexOf('disabled') !== -1) return false;
+      var day = parseInt(value);
+      var newDate = new Date(year, month - 1);
+
+      if (cls.indexOf('prev') !== -1) {
+        newDate = (0, _dateUtil.addMonths)(newDate, -1);
+      }
+
+      if (cls.indexOf('next') !== -1) {
+        newDate = (0, _dateUtil.addMonths)(newDate, 1);
+      }
+
+      newDate.setDate(day);
+      newDate.setHours(hours, minutes, seconds);
+
+      if (type === 'year') {
+        year = parseInt(value);
+        newDate.setFullYear(year);
+      }
+
+      if (type === 'month') {
+        month = parseInt(value);
+        newDate.setMonth(month - 1);
+      }
+
+      if (type === 'daterange' || type === 'weekrange') {
+        if (range.selecting) {
+          if (range.startDate > newDate) {
+            range.selecting = false;
+            onPick(newDate, range.startDate);
+          } else {
+            range.selecting = false;
+            onPick(range.startDate, newDate);
+          }
+        } else {
+          range.selecting = true;
+          onPick(newDate, null);
+        }
+      } else {
+        onPick(newDate);
+      }
+    }
+  }, {
+    key: "handlerMouseMove",
+    value: function handlerMouseMove(e) {
+      var td = e.target;
+      var _this$props3 = this.props,
+          mouseMove = _this$props3.mouseMove,
+          date = _this$props3.date,
+          type = _this$props3.type,
+          range = _this$props3.range;
+
+      var _deconstructDate3 = (0, _util.deconstructDate)(date),
+          year = _deconstructDate3.year,
+          month = _deconstructDate3.month;
+
+      if (td.nodeName !== 'SPAN' || td.disabled || type.indexOf('range') === -1 || !range.selecting) return false;
+      td = td.parentNode.parentNode;
+      var day = parseInt(td.innerText);
+      var cls = td.className;
+      var newDate = new Date(year, month - 1, day);
+
+      if (cls.indexOf('prev') !== -1) {
+        newDate = (0, _dateUtil.addMonths)(newDate, -1);
+      }
+
+      if (cls.indexOf('next') !== -1) {
+        newDate = (0, _dateUtil.addMonths)(newDate, 1);
+      }
+
+      mouseMove(newDate);
+    }
+  }, {
+    key: "getTDClass",
+    value: function getTDClass(td) {
+      var _class = ['hi-datepicker-legacy__cell'];
+
+      if (td.disabled) {
+        _class.push('disabled');
+
+        return _class.join(' ');
+      }
+
+      switch (td.type) {
+        case 'normal':
+          _class.push('normal');
+
+          break;
+
+        case 'today':
+          this.props.type !== 'week' && _class.push('today');
+          break;
+
+        case 'current':
+          _class.push('current');
+
+          break;
+
+        default:
+          _class.push(td.type);
+
+          break;
+      }
+
+      td.range && _class.push('in-range');
+
+      if (td.rangeStart || td.rangeEnd) {
+        _class.push('range-se');
+      }
+
+      return _class.join(' ');
+    }
+  }, {
+    key: "getWeeks",
+    value: function getWeeks() {
+      var _this$props4 = this.props,
+          weekOffset = _this$props4.weekOffset,
+          localeDatas = _this$props4.localeDatas;
+      var week = localeDatas.datePicker.week;
+      return week.slice(weekOffset).concat(week.slice(0, weekOffset));
+    }
+  }, {
+    key: "TRMouseOver",
+    value: function TRMouseOver(num) {
+      var type = this.props.type;
+
+      if ((type === 'week' || type === 'weekrange') && this.weekNum !== num) {
+        this.weekNum = num;
+      }
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this2 = this;
+
+      var _this$props5 = this.props,
+          type = _this$props5.type,
+          data = _this$props5.data;
+      var rows = data || this.getRows();
+      return _react["default"].createElement("table", {
+        className: "hi-datepicker-legacy__calender",
+        onClick: this.handlerClick.bind(this),
+        onMouseMove: this.handlerMouseMove.bind(this)
+      }, (type.indexOf('date') !== -1 || type.indexOf('week') !== -1 || type.indexOf('timeperiod') !== -1) && _react["default"].createElement("thead", null, _react["default"].createElement("tr", null, this.getWeeks().map(function (item, index) {
+        return _react["default"].createElement("th", {
+          key: index
+        }, item);
+      }))), _react["default"].createElement("tbody", null, rows.map(function (row, index) {
+        return _react["default"].createElement("tr", {
+          key: index,
+          className: "hi-datepicker-legacy__row ".concat(row.currentWeek ? 'hi-datepicker-legacy__row--current-week' : ''),
+          onMouseEnter: _this2.TRMouseOver.bind(_this2, row.weekNum)
+        }, row.map(function (cell, _index) {
+          return _react["default"].createElement("td", {
+            key: _index,
+            value: cell.value,
+            className: _this2.getTDClass(cell)
+          }, _react["default"].createElement("div", {
+            className: "hi-datepicker-legacy__content",
+            value: cell.value
+          }, _react["default"].createElement("span", {
+            value: cell.value,
+            className: "hi-datepicker-legacy__text"
+          }, cell.text || cell.value)));
+        }));
+      })));
+    }
+  }]);
+  return Calender;
+}(_react.Component);
+
+Calender.defaultProps = {
+  weekOffset: 0
+};
+
+var _default = (0, _context["default"])(Calender);
+
+exports["default"] = _default;