@hi-ui/hiui 2.15.11 → 2.15.12

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

@@ -0,0 +1,511 @@
+"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 _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
+
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _Modal = _interopRequireDefault(require("./Modal"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _constants = require("./constants");
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _Type = _interopRequireDefault(require("./Type"));
+
+var _dateUtil = require("./dateUtil");
+
+var _dateFns = require("date-fns");
+
+var BasePicker =
+/*#__PURE__*/
+function (_Component) {
+  (0, _inherits2["default"])(BasePicker, _Component);
+
+  function BasePicker(props) {
+    var _this;
+
+    (0, _classCallCheck2["default"])(this, BasePicker);
+    _this = (0, _possibleConstructorReturn2["default"])(this, (0, _getPrototypeOf2["default"])(BasePicker).call(this, props));
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "inputRoot", null);
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "input", null);
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "rInput", null);
+    _this.state = {
+      showPanel: false,
+      style: {},
+      date: null,
+      isFocus: false,
+      // input 框内的显示的时间内容
+      texts: ['', ''],
+      placeholder: '',
+      rText: '',
+      leftPlaceholder: '',
+      rightPlaceholder: '',
+      format: ''
+    };
+    return _this;
+  }
+
+  (0, _createClass2["default"])(BasePicker, [{
+    key: "setPlaceholder",
+    value: function setPlaceholder() {
+      var _this$props = this.props,
+          placeholder = _this$props.placeholder,
+          localeDatas = _this$props.localeDatas,
+          type = _this$props.type;
+      var tempPlaceholder = localeDatas.datePicker.placeholders[type] || localeDatas.datePicker.placeholder;
+      var leftPlaceholder = tempPlaceholder;
+      var rightPlaceholder = tempPlaceholder;
+
+      if (placeholder instanceof Array) {
+        leftPlaceholder = placeholder[0];
+        rightPlaceholder = placeholder[1] || placeholder[0];
+      } else if (typeof placeholder === 'string') {
+        leftPlaceholder = placeholder;
+        rightPlaceholder = placeholder;
+      }
+
+      this.setState({
+        leftPlaceholder: leftPlaceholder,
+        rightPlaceholder: rightPlaceholder
+      });
+    }
+  }, {
+    key: "_parseProps",
+    value: function _parseProps(props, callback) {
+      var _this2 = this;
+
+      var value = props.value,
+          showTime = props.showTime,
+          type = props.type,
+          format = props.format,
+          localeDatas = props.localeDatas,
+          weekOffset = props.weekOffset;
+      format = format || _constants.FORMATS[type];
+      var date = new Date(); // 当前时间
+
+      var noText = false;
+      /**
+       * value 可能的格式：
+       *  '' | undefined  | null | Date | String | Number | {start: xxx, end: xxx}
+       */
+
+      if (value === '' || !value) {
+        // value 未传入情况
+        date = new Date();
+        noText = true;
+      }
+
+      if (typeof value === 'number' || typeof value === 'string' && value.trim().length > 4) {
+        // value 为数字（times）
+        date = (0, _dateUtil.toDate)(value);
+      }
+
+      if (value instanceof Date) {
+        date = value;
+      }
+
+      if (type.includes('range') || type === 'timeperiod') {
+        if (value instanceof Date || !value) {
+          // 如果为时间段选择，则取默认的第一个范围
+          date = {
+            startDate: (0, _dateUtil.startOfDay)(date),
+            endDate: type === 'timeperiod' ? (0, _dateFns.addHours)((0, _dateUtil.startOfDay)(date), 4) : (0, _dateUtil.endOfDay)(date)
+          };
+        }
+
+        if (value && value.start && value.end) {
+          date = {
+            startDate: value.start,
+            endDate: value.end
+          };
+        }
+      }
+
+      var leftText = noText ? '' : (0, _constants.formatterDate)(type, date.startDate || date, format, showTime, localeDatas, weekOffset);
+      var rightText = noText ? '' : (0, _constants.formatterDate)(type, date.endDate || date, format, showTime, localeDatas, weekOffset);
+      this.setState({
+        texts: [leftText, rightText],
+        date: date,
+        format: format
+      }, function () {
+        callback && callback(_this2.state.date);
+      });
+    }
+  }, {
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      var _this3 = this;
+
+      this._parseProps(this.props, function (date) {
+        if (date.startDate && date.endDate) {
+          date = {
+            start: new Date(date.startDate),
+            end: new Date(date.endDate)
+          };
+        } else {
+          date = new Date(date);
+        }
+
+        _this3.props.value && _this3.props.onChange && _this3.props.onChange(date);
+      });
+
+      this.setPlaceholder();
+      var rect = this.inputRoot.getBoundingClientRect();
+      this.calcPanelPos(rect);
+    }
+  }, {
+    key: "calcPanelPos",
+    value: function calcPanelPos(rect) {
+      var _this$props2 = this.props,
+          showTime = _this$props2.showTime,
+          type = _this$props2.type;
+
+      var _w = type.indexOf('range') !== -1 ? 578 : 288;
+
+      var _h = 298;
+
+      if (type === 'daterange' && showTime) {
+        _h = 344;
+      }
+
+      var _cw = document.body.clientWidth || document.documentElement.clientWidth;
+
+      var _ch = document.body.clientHeight || document.documentElement.clientHeight;
+
+      var _st = document.body.scrollTop || document.documentElement.scrollTop;
+
+      var left = rect.left,
+          width = rect.width,
+          top = rect.top,
+          height = rect.height;
+
+      var _top = rect.top + rect.height + _st;
+
+      if (left + _w > _cw) {
+        left = left + width - _w;
+      }
+
+      if (top + _h + height > _ch) {
+        _top = top - _h + _st;
+      }
+
+      this.setState({
+        style: {
+          position: 'absolute',
+          left: left,
+          top: _top
+        }
+      });
+    }
+  }, {
+    key: "componentWillReceiveProps",
+    value: function componentWillReceiveProps(nextProps) {
+      this._parseProps(nextProps);
+    }
+  }, {
+    key: "onPick",
+    value: function onPick(date, showPanel) {
+      var _this4 = this;
+
+      var _this$props3 = this.props,
+          type = _this$props3.type,
+          showTime = _this$props3.showTime,
+          localeDatas = _this$props3.localeDatas,
+          weekOffset = _this$props3.weekOffset;
+      var format = this.state.format;
+      this.setState({
+        date: date,
+        texts: [(0, _constants.formatterDate)(type, date.startDate || date, format, showTime, localeDatas, weekOffset), (0, _constants.formatterDate)(type, date.endDate, format, showTime, localeDatas, weekOffset)],
+        showPanel: showPanel,
+        isFocus: false
+      }, function () {
+        if (!showPanel) {
+          _this4.callback();
+        }
+      });
+    }
+  }, {
+    key: "callback",
+    value: function callback() {
+      var _this$props4 = this.props,
+          type = _this$props4.type,
+          onChange = _this$props4.onChange,
+          weekOffset = _this$props4.weekOffset;
+      var date = this.state.date;
+
+      if (onChange) {
+        var startDate = date.startDate,
+            endDate = date.endDate;
+        var _weekOffset = {
+          weekStartsOn: weekOffset
+        };
+
+        if (type === 'week') {
+          onChange({
+            start: (0, _dateUtil.startOfWeek)(date, _weekOffset),
+            end: (0, _dateUtil.endOfWeek)(date, _weekOffset)
+          });
+          return;
+        }
+
+        if (startDate && endDate) {
+          if (type === 'weekrange') {
+            onChange({
+              start: (0, _dateUtil.startOfWeek)(startDate, _weekOffset),
+              end: (0, _dateUtil.endOfWeek)(endDate, _weekOffset)
+            });
+          } else if (['timerange', 'timeperiod', 'daterange'].includes(type)) {
+            onChange({
+              start: startDate,
+              end: endDate
+            });
+          } else {
+            onChange({
+              start: (0, _dateUtil.startOfDay)(startDate),
+              end: (0, _dateUtil.endOfDay)(endDate)
+            });
+          }
+        } else {
+          onChange(date);
+        }
+      }
+    }
+  }, {
+    key: "timeCancel",
+    value: function timeCancel() {
+      var _this$state = this.state,
+          tempDate = _this$state.tempDate,
+          format = _this$state.format;
+      var _this$props5 = this.props,
+          type = _this$props5.type,
+          showTime = _this$props5.showTime,
+          localeDatas = _this$props5.localeDatas,
+          weekOffset = _this$props5.weekOffset;
+
+      if (tempDate) {
+        this.setState({
+          date: new Date(tempDate),
+          text: (0, _constants.formatterDate)(type, new Date(tempDate), format, showTime, localeDatas, weekOffset),
+          showPanel: false
+        });
+      } else {
+        this.setState({
+          showPanel: false,
+          isFocus: false
+        });
+      }
+    }
+  }, {
+    key: "clickOutSide",
+    value: function clickOutSide(e) {
+      var tar = e.target;
+
+      if (tar.className.indexOf('clear') !== -1) {
+        this.setState({
+          texts: ['', ''],
+          showPanel: false
+        });
+        return false;
+      }
+
+      if (tar !== this.input && tar !== this.rInput) {
+        this.timeCancel();
+      }
+
+      this.callback();
+    }
+  }, {
+    key: "_input",
+    value: function _input(text) {
+      var _this5 = this;
+
+      var _ref = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'input';
+
+      var placeholder = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'Please Select...';
+      var _this$props6 = this.props,
+          disabled = _this$props6.disabled,
+          type = _this$props6.type,
+          _onChange = _this$props6.onChange;
+      return _react["default"].createElement("input", {
+        type: "text",
+        ref: function ref(el) {
+          _this5[_ref] = el;
+        },
+        placeholder: placeholder,
+        className: disabled ? 'disabled' : '',
+        disabled: disabled,
+        onChange: function onChange(e) {
+          (0, _constants.isVaildDate)(new Date(e.target.value)) && type === 'date' && _onChange(new Date(e.target.value));
+
+          _this5.setState({
+            text: e.target.value
+          });
+        },
+        onFocus: function onFocus(e) {
+          _this5.setState({
+            showPanel: true,
+            isFocus: true
+          });
+
+          _this5.calcPanelPos(_this5.inputRoot.getBoundingClientRect());
+        },
+        value: text
+      });
+    }
+  }, {
+    key: "_clear",
+    value: function _clear() {
+      var onChange = this.props.onChange;
+
+      if (onChange) {
+        onChange(null);
+      }
+
+      this.setState({
+        texts: ['', ''],
+        isFocus: false
+      });
+    }
+  }, {
+    key: "_icon",
+    value: function _icon() {
+      var _this6 = this;
+
+      var isFocus = this.state.isFocus;
+      var iconCls = (0, _classnames["default"])('hi-datepicker-legacy__input-icon', 'hi-icon', isFocus ? 'icon-close-circle clear' : 'icon-date');
+      return isFocus ? _react["default"].createElement("span", {
+        className: iconCls,
+        onClick: this._clear.bind(this)
+      }) : _react["default"].createElement("span", {
+        className: iconCls,
+        onClick: function onClick(e) {
+          if (_this6.props.disabled) return;
+
+          _this6.calcPanelPos(_this6.inputRoot.getBoundingClientRect());
+
+          _this6.setState({
+            showPanel: true,
+            isFocus: true
+          });
+        }
+      });
+    }
+  }, {
+    key: "renderRangeInput",
+    value: function renderRangeInput() {
+      var _this$props7 = this.props,
+          localeDatas = _this$props7.localeDatas,
+          disabled = _this$props7.disabled,
+          showTime = _this$props7.showTime;
+
+      var _cls = (0, _classnames["default"])('hi-datepicker-legacy__input', 'hi-datepicker-legacy__input--range', showTime && 'hi-datepicker-legacy__input--range-time', disabled && 'hi-datepicker-legacy__input--disabled');
+
+      return _react["default"].createElement("div", {
+        className: _cls
+      }, this._input(this.state.texts[0], 'input', this.state.leftPlaceholder), _react["default"].createElement("span", null, localeDatas.datePicker.to), this._input(this.state.texts[1], 'rInput', this.state.rightPlaceholder), this._icon());
+    }
+  }, {
+    key: "renderNormalInput",
+    value: function renderNormalInput() {
+      var _this$props8 = this.props,
+          disabled = _this$props8.disabled,
+          showTime = _this$props8.showTime;
+
+      var _cls = (0, _classnames["default"])('hi-datepicker-legacy__input', 'hi-datepicker-legacy__input--normal', disabled && 'hi-datepicker-legacy__input--disabled', showTime && 'hi-datepicker-legacy__input--middle');
+
+      return _react["default"].createElement("div", {
+        className: _cls
+      }, this._input(this.state.texts[0], 'input', this.state.leftPlaceholder), this._icon());
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this7 = this;
+
+      var _this$props9 = this.props,
+          type = _this$props9.type,
+          showTime = _this$props9.showTime;
+      return _react["default"].createElement("span", {
+        ref: function ref(el) {
+          _this7.inputRoot = el;
+        },
+        className: "hi-datepicker-legacy__input-root"
+      }, type.indexOf('range') !== -1 || type === 'timeperiod' ? this.renderRangeInput() : this.renderNormalInput(), this.state.showPanel ? _react["default"].createElement(_Modal["default"], {
+        clickOutSide: this.clickOutSide.bind(this),
+        showTime: showTime
+      }, this.initPanel(this.state, this.props)) : null);
+    }
+  }]);
+  return BasePicker;
+}(_react.Component);
+
+(0, _defineProperty2["default"])(BasePicker, "propTypes", {
+  type: _propTypes["default"].oneOf(Object.values(_Type["default"])),
+  value: function value(props, propName, componentName) {
+    // Invalid Date
+    var val = props[propName];
+
+    if (val === undefined || val === null) {
+      return null;
+    }
+
+    if (val.start && val.end) {
+      var _start = (0, _dateUtil.dateFormat)(val.start);
+
+      var _end = (0, _dateUtil.dateFormat)(val.end);
+
+      if (_start === 'Invalid Date' || _end === 'Invalid Date') {
+        return new Error("Invalid prop ".concat(propName, " supplied to ").concat(componentName, ". Validation failed. start or end is an invalid date."));
+      }
+    } else {
+      if ((0, _dateUtil.dateFormat)(val) === 'Invalid Date') {
+        return new Error("Invalid prop ".concat(propName, " supplied to ").concat(componentName, ". Validation failed. value is an invalid data."));
+      }
+    }
+  },
+  onChange: _propTypes["default"].func,
+  format: _propTypes["default"].string,
+  showTime: _propTypes["default"].bool,
+  disabled: _propTypes["default"].bool,
+  showWeekNumber: _propTypes["default"].bool,
+  weekOffset: _propTypes["default"].oneOf([0, 1]),
+  timeInterval: function timeInterval(props, propName, componentName) {
+    var val = props[propName];
+
+    if (val < 5 || val > 480 || val > 60 && val % 60 !== 0 || val < 60 && 60 % val !== 0) {
+      return new Error("Invalid prop ".concat(propName, " supplied to ").concat(componentName, ". This value must be greater than 5 and less than 480 and is a multiple of 60."));
+    }
+  }
+});
+(0, _defineProperty2["default"])(BasePicker, "defaultProps", {
+  type: 'date',
+  disabled: false,
+  showWeekNumber: true,
+  weekOffset: 0,
+  timeInterval: 240
+});
+var _default = BasePicker;
+exports["default"] = _default;