@hi-ui/hiui 2.15.11 → 2.15.12

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

@@ -0,0 +1,455 @@
+"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 _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+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 _TimePanel = _interopRequireDefault(require("./TimePanel"));
+
+var _icon = _interopRequireDefault(require("../../icon"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _context = _interopRequireDefault(require("../../context"));
+
+var _TimePeriodPanel = _interopRequireDefault(require("./TimePeriodPanel"));
+
+var _dateUtil = require("./dateUtil");
+
+var DatePanel =
+/*#__PURE__*/
+function (_Component) {
+  (0, _inherits2["default"])(DatePanel, _Component);
+
+  function DatePanel(props) {
+    var _this;
+
+    (0, _classCallCheck2["default"])(this, DatePanel);
+    _this = (0, _possibleConstructorReturn2["default"])(this, (0, _getPrototypeOf2["default"])(DatePanel).call(this, props));
+    _this.state = {
+      date: props.date,
+      currentView: props.type,
+      yearData: [],
+      monthData: []
+    };
+    return _this;
+  }
+
+  (0, _createClass2["default"])(DatePanel, [{
+    key: "componentWillReceiveProps",
+    value: function componentWillReceiveProps(nextProps) {
+      this.setState({
+        date: nextProps.date
+      });
+    }
+    /**
+     * 改变月份事件
+     * @param {Number} num  加减值
+     */
+
+  }, {
+    key: "changeMonth",
+    value: function changeMonth(flag) {
+      var date = this.state.date;
+
+      var _deconstructDate = (0, _util.deconstructDate)(date),
+          year = _deconstructDate.year,
+          month = _deconstructDate.month;
+
+      if (flag) {
+        month -= 1;
+
+        if (month < 0) {
+          month = 12;
+          year -= 1;
+        }
+      } else {
+        month += 1;
+
+        if (month > 12) {
+          month = 1;
+          year += 1;
+        }
+      }
+
+      date.setFullYear(year);
+      date.setMonth(month - 1);
+      this.setState({
+        date: date
+      });
+    }
+    /**
+     * 改变年份事件
+     * @param {Number} num  加减值
+     */
+
+  }, {
+    key: "changeYear",
+    value: function changeYear(flag) {
+      var _this$state = this.state,
+          date = _this$state.date,
+          currentView = _this$state.currentView;
+
+      var _deconstructDate2 = (0, _util.deconstructDate)(date),
+          year = _deconstructDate2.year;
+
+      var num = currentView === 'year' ? 10 : 1;
+
+      if (flag) {
+        year -= num;
+      } else {
+        year += num;
+      }
+
+      date.setFullYear(year);
+      this.setState({
+        date: date
+      });
+    }
+  }, {
+    key: "renderInput",
+    value: function renderInput() {
+      var _this2 = this;
+
+      return _react["default"].createElement("input", {
+        type: "text",
+        className: "dp-input",
+        onClick: function onClick() {
+          _this2.setState({
+            show: !_this2.state.show
+          });
+        },
+        value: this.state.value
+      });
+    }
+  }, {
+    key: "getYearOrMonthData",
+    value: function getYearOrMonthData(val, type) {
+      var start = type === 'year' ? val - 4 : 1;
+      var trs = [[], [], [], []];
+      var num = 0;
+      var currentYear = new Date().getFullYear();
+      var currentMonth = new Date().getMonth();
+
+      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) {
+            col.type = 'today';
+          }
+
+          if (y === val) {
+            col.type = 'current';
+          }
+
+          type === 'year' ? col.text = y : col.text = this.props.localeDatas.datePicker.month[y - 1];
+          col.value = y;
+          num++;
+        }
+      }
+
+      return trs;
+    }
+    /**
+     * Header 中间部分内容
+     * @param {String} type 选择器类型
+     * @param {Number} year 当前年份
+     * @param {Number} month 当前月份
+     */
+
+  }, {
+    key: "getHeaderCenterContent",
+    value: function getHeaderCenterContent() {
+      var _this$props = this.props,
+          localeDatas = _this$props.localeDatas,
+          locale = _this$props.locale;
+      var _this$state2 = this.state,
+          date = _this$state2.date,
+          currentView = _this$state2.currentView;
+
+      var _deconstructDate3 = (0, _util.deconstructDate)(date),
+          year = _deconstructDate3.year,
+          month = _deconstructDate3.month;
+
+      if (currentView === 'year') {
+        return year - 4 + '~' + (year + 7);
+      }
+
+      var arr = [localeDatas.datePicker.monthShort[month - 1]];
+
+      if (locale === 'zh-CN') {
+        arr.unshift(year + '年    ');
+      } else {
+        arr.push("    ".concat(year));
+      }
+
+      return arr;
+    }
+    /**
+     * 渲染 Header 部分（包含箭头快捷操作）
+     * @param {Object} args {
+     *  year: 当前年份
+     *  month: 当前月份
+     *  type: 选择器类型
+     *  num: 点击箭头时要步进的值 默认1 主要应用于年份选择时
+     * }
+     */
+
+  }, {
+    key: "renderHeader",
+    value: function renderHeader(type, value) {
+      var _this3 = this;
+
+      return _react["default"].createElement("div", {
+        className: "hi-datepicker-legacy__header"
+      }, _react["default"].createElement("div", {
+        className: "hi-datepicker-legacy__header-btns"
+      }, _react["default"].createElement("span", {
+        onClick: function onClick() {
+          return _this3.changeYear(true);
+        }
+      }, _react["default"].createElement(_icon["default"], {
+        name: "double-left"
+      })), type !== 'month' && type !== 'year' && _react["default"].createElement("span", {
+        onClick: function onClick() {
+          return _this3.changeMonth(true);
+        }
+      }, _react["default"].createElement(_icon["default"], {
+        name: "left"
+      }))), _react["default"].createElement("span", {
+        className: "hi-datepicker-legacy__header-text",
+        onClick: function onClick() {
+          return _this3.setState({
+            currentView: 'year'
+          });
+        }
+      }, this.getHeaderCenterContent()), _react["default"].createElement("div", {
+        className: "hi-datepicker-legacy__header-btns"
+      }, type !== 'month' && type !== 'year' && _react["default"].createElement("span", {
+        onClick: function onClick() {
+          return _this3.changeMonth(false);
+        }
+      }, _react["default"].createElement(_icon["default"], {
+        name: "right"
+      })), _react["default"].createElement("span", {
+        onClick: function onClick() {
+          return _this3.changeYear(false);
+        }
+      }, _react["default"].createElement(_icon["default"], {
+        name: "double-right"
+      }))));
+    }
+  }, {
+    key: "yearPick",
+    value: function yearPick(date) {
+      var _this$props2 = this.props,
+          type = _this$props2.type,
+          onPick = _this$props2.onPick;
+
+      if (type === 'year') {
+        onPick(date);
+      } else {
+        this.setState({
+          date: date,
+          currentView: 'month'
+        });
+      }
+    }
+  }, {
+    key: "monthPick",
+    value: function monthPick(_date) {
+      var _this$props3 = this.props,
+          type = _this$props3.type,
+          onPick = _this$props3.onPick;
+      var date = this.state.date;
+
+      if (type === 'month') {
+        onPick(_date);
+      } else {
+        date.setFullYear(_date.getFullYear());
+        date.setMonth(_date.getMonth());
+        this.setState({
+          date: date,
+          currentView: 'date'
+        });
+      }
+    }
+  }, {
+    key: "onDatePick",
+    value: function onDatePick(date) {
+      var _this$props4 = this.props,
+          type = _this$props4.type,
+          showTime = _this$props4.showTime;
+
+      var _deconstructDate4 = (0, _util.deconstructDate)(this.state.date),
+          hours = _deconstructDate4.hours,
+          minutes = _deconstructDate4.minutes,
+          seconds = _deconstructDate4.seconds;
+
+      if (type === 'timeperiod') {
+        this.props.onPick({
+          startDate: date,
+          endDate: (0, _dateUtil.addHours)(this.state.date, 4)
+        }, true);
+      } else {
+        date.setHours(hours, minutes, seconds);
+        this.props.onPick(date, showTime);
+      }
+    }
+  }, {
+    key: "onTimePeriodPick",
+    value: function onTimePeriodPick(periodS, periodE) {
+      var currentDate = (0, _dateUtil.dateFormat)(this.state.date, 'yyyy-MM-dd');
+      (0, _dateUtil.parseISO)("".concat(currentDate, " ").concat(periodS));
+      this.props.onPick({
+        startDate: (0, _dateUtil.parseISO)("".concat(currentDate, " ").concat(periodS)),
+        endDate: (0, _dateUtil.parseISO)("".concat(currentDate, " ").concat(periodE))
+      }, true);
+    }
+  }, {
+    key: "onTimePick",
+    value: function onTimePick(date, bol) {
+      this.setState({
+        date: date
+      }); // if (showTime) {
+      //   this.setState({date})
+      // } else {
+      //   this.props.onPick(date)
+      // }
+
+      this.props.onPick(date, bol);
+    }
+  }, {
+    key: "_getNormalComponent",
+    value: function _getNormalComponent() {
+      var _this4 = this;
+
+      var _this$state3 = this.state,
+          currentView = _this$state3.currentView,
+          date = _this$state3.date;
+      var _this$props5 = this.props,
+          minDate = _this$props5.minDate,
+          maxDate = _this$props5.maxDate,
+          weekOffset = _this$props5.weekOffset;
+
+      var _deconstructDate5 = (0, _util.deconstructDate)(date),
+          year = _deconstructDate5.year,
+          month = _deconstructDate5.month;
+
+      var component = null;
+
+      switch (currentView) {
+        case 'date':
+        case 'timeperiod':
+        case 'week':
+          component = _react["default"].createElement(_Calender["default"], {
+            date: date,
+            weekOffset: weekOffset,
+            minDate: minDate,
+            maxDate: maxDate,
+            type: currentView,
+            onPick: this.onDatePick.bind(this)
+          });
+          break;
+
+        case 'year':
+          var yearData = this.getYearOrMonthData(year, 'year');
+          component = _react["default"].createElement(_Calender["default"], {
+            date: date,
+            data: yearData,
+            type: currentView,
+            onPick: this.yearPick.bind(this)
+          });
+          break;
+
+        case 'month':
+          var monthData = this.getYearOrMonthData(month, 'month');
+          component = _react["default"].createElement(_Calender["default"], {
+            date: date,
+            data: monthData,
+            type: currentView,
+            onPick: this.monthPick.bind(this)
+          });
+          break;
+
+        default:
+          component = _react["default"].createElement(_Calender["default"], (0, _extends2["default"])({}, this.props, {
+            date: date,
+            onClick: function onClick(data) {
+              _this4.changeDay(data.value);
+            }
+          }));
+          break;
+      }
+
+      return component;
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this$state4 = this.state,
+          date = _this$state4.date,
+          currentView = _this$state4.currentView;
+      var _this$props6 = this.props,
+          theme = _this$props6.theme,
+          showTime = _this$props6.showTime,
+          type = _this$props6.type,
+          timeInterval = _this$props6.timeInterval;
+
+      var _c = (0, _classnames["default"])('hi-datepicker-legacy', theme && 'theme__' + theme);
+
+      var bodyCls = (0, _classnames["default"])('hi-datepicker-legacy__body', showTime && 'hi-datepicker-legacy__body--hastime', type === 'timeperiod' && 'hi-datepicker-legacy__body--period');
+      return _react["default"].createElement("div", {
+        style: this.props.style,
+        className: _c
+      }, _react["default"].createElement("div", {
+        className: bodyCls
+      }, _react["default"].createElement("div", {
+        className: "hi-datepicker-legacy__panel hi-datepicker-legacy__panel--left"
+      }, currentView !== 'time' && this.renderHeader(currentView, date), _react["default"].createElement("div", {
+        className: "hi-datepicker-legacy__calender-container hi-datepicker-legacy__calender-container--".concat(currentView)
+      }, this._getNormalComponent())), showTime && _react["default"].createElement(_TimePanel["default"], (0, _extends2["default"])({}, this.props, {
+        onPick: this.onTimePick.bind(this) // date={date}
+
+      })), type === 'timeperiod' && _react["default"].createElement(_TimePeriodPanel["default"], {
+        timeInterval: timeInterval,
+        onTimePeriodPick: this.onTimePeriodPick.bind(this),
+        date: date
+      })));
+    }
+  }]);
+  return DatePanel;
+}(_react.Component);
+
+var _default = (0, _context["default"])(DatePanel);
+
+exports["default"] = _default;

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

@@ -0,0 +1,103 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+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 = _interopRequireDefault(require("react"));
+
+var _BasePicker2 = _interopRequireDefault(require("./BasePicker"));
+
+var _DatePanel = _interopRequireDefault(require("./DatePanel"));
+
+var _DateRangePanel = _interopRequireDefault(require("./DateRangePanel"));
+
+var _WeekRangePanel = _interopRequireDefault(require("./WeekRangePanel"));
+
+var DatePicker =
+/*#__PURE__*/
+function (_BasePicker) {
+  (0, _inherits2["default"])(DatePicker, _BasePicker);
+
+  function DatePicker() {
+    (0, _classCallCheck2["default"])(this, DatePicker);
+    return (0, _possibleConstructorReturn2["default"])(this, (0, _getPrototypeOf2["default"])(DatePicker).apply(this, arguments));
+  }
+
+  (0, _createClass2["default"])(DatePicker, [{
+    key: "initPanel",
+    value: function initPanel(state, props) {
+      var component = null;
+      var d = state.date;
+
+      if (!d.startDate) {
+        d = {
+          startDate: d,
+          endDate: null
+        };
+      }
+
+      switch (props.type) {
+        case 'month':
+        case 'year':
+        case 'week':
+        case 'date':
+          component = _react["default"].createElement(_DatePanel["default"], (0, _extends2["default"])({}, props, {
+            date: state.date,
+            onPick: this.onPick.bind(this),
+            style: state.style
+          }));
+          break;
+
+        case 'timeperiod':
+          component = _react["default"].createElement(_DatePanel["default"], (0, _extends2["default"])({}, props, {
+            date: state.date.startDate,
+            onPick: this.onPick.bind(this),
+            style: state.style
+          }));
+          break;
+
+        case 'daterange':
+          component = _react["default"].createElement(_DateRangePanel["default"], (0, _extends2["default"])({}, props, {
+            date: d,
+            onPick: this.onPick.bind(this),
+            style: state.style
+          }));
+          break;
+
+        case 'weekrange':
+          component = _react["default"].createElement(_WeekRangePanel["default"], (0, _extends2["default"])({}, props, {
+            date: d,
+            range: state.range,
+            onPick: this.onPick.bind(this),
+            style: state.style
+          }));
+          break;
+
+        default:
+          throw new Error(props.localeDatas.datePicker.undefinedType);
+      }
+
+      return component;
+    }
+  }]);
+  return DatePicker;
+}(_BasePicker2["default"]);
+
+var _default = DatePicker;
+exports["default"] = _default;