@hi-ui/hiui 2.15.11 → 2.15.12

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

@@ -0,0 +1,488 @@
+"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 _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+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 _constants = require("./constants");
+
+var _icon = _interopRequireDefault(require("../../icon"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _context = _interopRequireDefault(require("../../context"));
+
+var _dateUtil = require("./dateUtil");
+
+var _TimeRangePanel = _interopRequireDefault(require("./TimeRangePanel"));
+
+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));
+    var _props$date = props.date,
+        startDate = _props$date.startDate,
+        endDate = _props$date.endDate;
+    var leftDate = new Date(startDate);
+    var rightDate = endDate ? new Date(endDate) : (0, _util.nextMonth)(leftDate);
+
+    if (endDate) {
+      var _deconstructDate = (0, _util.deconstructDate)(startDate),
+          sYear = _deconstructDate.year,
+          sMonth = _deconstructDate.month;
+
+      var _deconstructDate2 = (0, _util.deconstructDate)(endDate),
+          eYear = _deconstructDate2.year,
+          eMonth = _deconstructDate2.month;
+
+      if (sYear === eYear && sMonth === eMonth) {
+        rightDate = (0, _util.nextMonth)(leftDate);
+      }
+    }
+
+    var range = {
+      startDate: startDate,
+      endDate: endDate,
+      selecting: false
+    };
+    _this.maskRef = _react["default"].createRef();
+    _this.state = {
+      date: leftDate,
+      currentView: props.type || 'date',
+      yearData: null,
+      monthData: null,
+      minDate: props.minDate,
+      maxDate: props.maxDate,
+      range: range,
+      leftDate: leftDate,
+      rightDate: rightDate,
+      showMask: false,
+      disableArrow: {
+        month: false,
+        year: false
+      }
+    };
+    return _this;
+  }
+  /**
+   * 改变月份事件
+   * @param {Number} num  加减值
+   */
+
+
+  (0, _createClass2["default"])(DatePanel, [{
+    key: "changeMonth",
+    value: function changeMonth(flag, pos) {
+      var _this$state = this.state,
+          leftDate = _this$state.leftDate,
+          rightDate = _this$state.rightDate;
+      var nLeftDate = new Date(leftDate.getTime());
+      var nRightDate = new Date(rightDate.getTime());
+      var left = (0, _util.deconstructDate)(nLeftDate);
+      var right = (0, _util.deconstructDate)(nRightDate);
+
+      if (pos === 'left') {
+        if (flag) {
+          left.month -= 1;
+
+          if (left.month < 0) {
+            left.month = 12;
+            left.year -= 1;
+          }
+        } else {
+          left.month += 1;
+
+          if (left.month > 12) {
+            left.month = 1;
+            left.year += 1;
+          }
+        }
+
+        nLeftDate.setFullYear(left.year);
+        nLeftDate.setMonth(left.month - 1);
+      } else {
+        if (flag) {
+          right.month -= 1;
+
+          if (right.month < 0) {
+            right.month = 12;
+            right.year -= 1;
+          }
+        } else {
+          right.month += 1;
+
+          if (right.month > 12) {
+            right.month = 1;
+            right.year += 1;
+          }
+        }
+
+        if (left.month === right.month - 1) {
+          this.setState({
+            disableArrow: {
+              month: false
+            }
+          });
+        }
+
+        nRightDate.setFullYear(right.year);
+        nRightDate.setMonth(right.month - 1);
+      }
+
+      if (nLeftDate <= nRightDate) {
+        this.setState({
+          leftDate: nLeftDate,
+          rightDate: nRightDate
+        });
+      }
+    }
+    /**
+     * 改变年份事件
+     * @param {Number} num  加减值
+     */
+
+  }, {
+    key: "changeYear",
+    value: function changeYear(flag, pos) {
+      var _this$state2 = this.state,
+          leftDate = _this$state2.leftDate,
+          rightDate = _this$state2.rightDate;
+      var nLeftDate = new Date(leftDate.getTime());
+      var nRightDate = new Date(rightDate.getTime());
+      var left = (0, _util.deconstructDate)(nLeftDate);
+      var right = (0, _util.deconstructDate)(nRightDate);
+
+      if (pos === 'left') {
+        if (flag) {
+          left.year -= 1;
+        } else {
+          left.year += 1;
+        }
+
+        nLeftDate.setFullYear(left.year); // this.setState({
+        //   leftDate
+        // })
+      } else {
+        if (flag) {
+          right.year -= 1;
+        } else {
+          right.year += 1;
+        }
+
+        nRightDate.setFullYear(right.year); // this.setState({
+        //   rightDate
+        // })
+      }
+
+      if (nLeftDate <= nRightDate) {
+        this.setState({
+          leftDate: nLeftDate,
+          rightDate: nRightDate
+        });
+      }
+    }
+    /**
+     * Header 中间部分内容
+     * @param {String} type 选择器类型
+     * @param {Number} year 当前年份
+     * @param {Number} month 当前月份
+     */
+
+  }, {
+    key: "getHeaderCenterContent",
+    value: function getHeaderCenterContent(year, month) {
+      var _this$props = this.props,
+          localeDatas = _this$props.localeDatas,
+          locale = _this$props.locale;
+      var currentView = this.state.currentView;
+
+      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, lr) {
+      var _this2 = this;
+
+      var _deconstructDate3 = (0, _util.deconstructDate)(value),
+          year = _deconstructDate3.year,
+          month = _deconstructDate3.month;
+
+      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 _this2.changeYear(true, lr);
+        }
+      }, _react["default"].createElement(_icon["default"], {
+        name: "double-left"
+      })), type.indexOf('date') !== -1 && _react["default"].createElement("span", {
+        onClick: function onClick() {
+          return _this2.changeMonth(true, lr);
+        }
+      }, _react["default"].createElement(_icon["default"], {
+        name: "left"
+      }))), _react["default"].createElement("span", {
+        className: "hi-datepicker-legacy__header-text"
+      }, this.getHeaderCenterContent(year, month)), _react["default"].createElement("div", {
+        className: "hi-datepicker-legacy__header-btns"
+      }, type.indexOf('date') !== -1 && _react["default"].createElement("span", {
+        onClick: function onClick() {
+          return _this2.changeMonth(false, lr);
+        }
+      }, _react["default"].createElement(_icon["default"], {
+        name: "right"
+      })), _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$props2 = this.props,
+          onPick = _this$props2.onPick,
+          showTime = _this$props2.showTime;
+      range.startDate = startDate;
+      range.endDate = endDate;
+      this.setState({
+        range: range,
+        leftDate: startDate || this.state.leftDate,
+        rightDate: endDate || this.state.rightDate
+      });
+
+      if (endDate) {
+        onPick(range, showTime);
+      }
+    }
+  }, {
+    key: "onMouseMoveHandler",
+    value: function onMouseMoveHandler(date) {
+      var range = this.state.range;
+      range.endDate = date;
+      this.setState({
+        range: range
+      });
+    }
+  }, {
+    key: "shortcutsClickEvent",
+    value: function shortcutsClickEvent(e) {
+      var localeDatas = this.props.localeDatas;
+      var range = this.state.range;
+
+      var _date = new Date();
+
+      var val = e.target.innerText;
+      var days = 0;
+
+      switch (val) {
+        case localeDatas.datePicker.lastWeek:
+          days = 7;
+          break;
+
+        case localeDatas.datePicker.lastMonth:
+          days = 30;
+          break;
+
+        case localeDatas.datePicker.lastThreeMonth:
+          days = 90;
+          break;
+
+        case localeDatas.datePicker.lastYear:
+          days = 365;
+          break;
+      }
+
+      var nDate = new Date(_date.getTime() - days * _constants.DAY_MILLISECONDS);
+      range.startDate = nDate;
+      range.endDate = _date;
+      this.props.onPick(range);
+    }
+  }, {
+    key: "renderShortcut",
+    value: function renderShortcut(shortcuts) {
+      var _this3 = this;
+
+      return _react["default"].createElement("div", {
+        className: "hi-datepicker-legacy__shortcuts"
+      }, shortcuts.map(function (m, n) {
+        return _react["default"].createElement("p", {
+          key: n // onMouseOver={this.shortcutsMouseEvent.bind(this)}
+          ,
+          onClick: _this3.shortcutsClickEvent.bind(_this3)
+        }, m);
+      }));
+    }
+  }, {
+    key: "onTimePick",
+    value: function onTimePick(pos, date) {
+      var range = this.state.range;
+      pos === 'leftDate' && (range.startDate = date);
+      pos === 'rightDate' && (range.endDate = date);
+      this.setState((0, _defineProperty2["default"])({}, pos, date));
+    }
+  }, {
+    key: "getRangeDateStr",
+    value: function getRangeDateStr() {
+      var _this$state3 = this.state,
+          leftDate = _this$state3.leftDate,
+          rightDate = _this$state3.rightDate,
+          showMask = _this$state3.showMask;
+      var format = 'HH:mm:ss';
+      var cls = (0, _classnames["default"])(showMask && 'hi-datepicker-legacy__time-text');
+      return _react["default"].createElement("span", {
+        className: cls
+      }, "".concat((0, _dateUtil.dateFormat)(leftDate, format), " - ").concat((0, _dateUtil.dateFormat)(rightDate, format)));
+    }
+  }, {
+    key: "selectTimeEvent",
+    value: function selectTimeEvent() {
+      this.setState({
+        showMask: !this.state.showMask
+      });
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this4 = this;
+
+      var _this$state4 = this.state,
+          minDate = _this$state4.minDate,
+          maxDate = _this$state4.maxDate,
+          currentView = _this$state4.currentView,
+          range = _this$state4.range,
+          leftDate = _this$state4.leftDate,
+          rightDate = _this$state4.rightDate,
+          showMask = _this$state4.showMask; // const rightDate = nextMonth(leftDate)
+
+      var _this$props3 = this.props,
+          shortcuts = _this$props3.shortcuts,
+          theme = _this$props3.theme,
+          showTime = _this$props3.showTime,
+          date = _this$props3.date;
+
+      var _c = (0, _classnames["default"])('hi-datepicker-legacy', theme && 'theme__' + theme);
+
+      var bodyCls = (0, _classnames["default"])('hi-datepicker-legacy__body', 'hi-datepicker-legacy__body--range', shortcuts && 'hi-datepicker-legacy__body--shortcuts');
+      return _react["default"].createElement("div", {
+        style: this.props.style,
+        className: _c
+      }, _react["default"].createElement("div", {
+        className: bodyCls
+      }, shortcuts && this.renderShortcut(shortcuts), _react["default"].createElement("div", {
+        className: "hi-datepicker-legacy__panel hi-datepicker-legacy__panel--left"
+      }, this.renderHeader(currentView, leftDate, 'left'), _react["default"].createElement("div", {
+        className: "hi-datepicker-legacy__calender-container hi-datepicker-legacy__calender-container--".concat(currentView)
+      }, _react["default"].createElement(_Calender["default"], {
+        date: leftDate,
+        range: range,
+        type: currentView,
+        minDate: minDate,
+        maxDate: maxDate,
+        onPick: this.pick.bind(this),
+        mouseMove: this.onMouseMoveHandler.bind(this)
+      }))), _react["default"].createElement("div", {
+        className: "hi-datepicker-legacy__panel hi-datepicker-legacy__panel--right"
+      }, this.renderHeader(currentView, rightDate, 'right'), _react["default"].createElement("div", {
+        className: "hi-datepicker-legacy__calender-container hi-datepicker-legacy__calender-container--".concat(currentView)
+      }, _react["default"].createElement(_Calender["default"], {
+        date: rightDate,
+        range: range,
+        minDate: minDate,
+        maxDate: maxDate,
+        type: currentView,
+        onPick: this.pick.bind(this),
+        mouseMove: this.onMouseMoveHandler.bind(this)
+      })))), showTime && _react["default"].createElement("div", {
+        className: "hi-datepicker-legacy__footer",
+        onClick: this.selectTimeEvent.bind(this)
+      }, this.getRangeDateStr()), showMask && _react["default"].createElement("div", {
+        className: "hi-datepicker-legacy__mask",
+        ref: this.maskRef,
+        onClick: function onClick() {
+          _this4.setState({
+            showMask: false
+          });
+        }
+      }), showMask && _react["default"].createElement(_TimeRangePanel["default"], (0, _extends2["default"])({}, this.props, {
+        style: {
+          position: 'absolute',
+          top: 5,
+          left: 89
+        },
+        date: date,
+        onPick: function onPick(d, r) {
+          _this4.setState({
+            leftDate: d.startDate,
+            rightDate: d.endDate
+          });
+
+          _this4.props.onPick(d, r);
+        }
+      })));
+    }
+  }]);
+  return DatePanel;
+}(_react.Component);
+
+var _default = (0, _context["default"])(DatePanel);
+
+exports["default"] = _default;

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

@@ -0,0 +1,67 @@
+"use strict";
+
+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 = require("react");
+
+var _reactDom = _interopRequireDefault(require("react-dom"));
+
+var _reactClickOutside = _interopRequireDefault(require("react-click-outside"));
+
+var Modal =
+/*#__PURE__*/
+function (_Component) {
+  (0, _inherits2["default"])(Modal, _Component);
+
+  function Modal(props) {
+    var _this;
+
+    (0, _classCallCheck2["default"])(this, Modal);
+    _this = (0, _possibleConstructorReturn2["default"])(this, (0, _getPrototypeOf2["default"])(Modal).call(this, props));
+    _this.el = document.createElement('div');
+    _this._body = document.body;
+    return _this;
+  }
+
+  (0, _createClass2["default"])(Modal, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      this._body.appendChild(this.el);
+    }
+  }, {
+    key: "handleClickOutside",
+    value: function handleClickOutside(e) {
+      this.props.clickOutSide(e);
+    }
+  }, {
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      this._body.removeChild(this.el);
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      return _reactDom["default"].createPortal(this.props.children, this.el);
+    }
+  }]);
+  return Modal;
+}(_react.Component);
+
+var _default = (0, _reactClickOutside["default"])(Modal);
+
+exports["default"] = _default;