deer-ui/lib/date-picker/datePicker.js

React.js UI components for PC Web

"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 _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));

var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));

var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));

var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));

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 _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));

var _react = _interopRequireWildcard(require("react"));

var _reactDom = require("react-dom");

var _propTypes = _interopRequireDefault(require("prop-types"));

var _moment = _interopRequireDefault(require("moment"));

var _scrollIntoViewIfNeeded = _interopRequireDefault(require("scroll-into-view-if-needed"));

var _localeWrapper = _interopRequireDefault(require("../locale/localeWrapper"));

var _classnames = _interopRequireDefault(require("classnames"));

var _input = _interopRequireDefault(require("../input"));

var _spin = _interopRequireDefault(require("../spin"));

var _icon = require("../icon");

function _createSuper(Derived) { return function () { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (_isNativeReflectConstruct()) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }

function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }

var sizes = {
  default: "default",
  small: "small",
  large: "large"
};
var WEEKDAY = 7;

var DatePicker = /*#__PURE__*/function (_Component) {
  (0, _inherits2.default)(DatePicker, _Component);

  var _super = _createSuper(DatePicker);

  function DatePicker(props) {
    var _this;

    (0, _classCallCheck2.default)(this, DatePicker);
    _this = _super.call(this, props);
    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "state", {
      momentSelected: _this.props.defaultValue || _this.props.value || (0, _moment.default)(),
      momentSelectedTemp: _this.props.defaultValue || _this.props.value || (0, _moment.default)(),
      visible: _this.props.visible || false,
      isSelectedMoment: !!(_this.props.defaultValue || _this.props.value),
      left: 0,
      top: 0,
      width: 0
    });
    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onClickOutsideHandler", function (e) {
      e.stopPropagation();

      if (_this.state.visible && !_this.toggleContainer.current.contains(e.target) && !_this.wrapper.current.contains(e.target)) {
        _this.setState({
          visible: false
        });
      }
    });
    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "addMonth", function () {
      _this.setState({
        momentSelected: _this.state.momentSelected.clone().add(1, "month")
      });
    });
    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "subtractMonth", function () {
      _this.setState({
        momentSelected: _this.state.momentSelected.clone().add(-1, "month")
      });
    });
    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onClickHandler", function () {
      var visible = !_this.state.visible;

      _this.setState({
        visible: visible
      }, function () {
        if (visible) {
          _this.setWrapperBounding(function () {
            (0, _scrollIntoViewIfNeeded.default)(_this.wrapper.current, {
              scrollMode: "if-needed",
              behavior: "smooth",
              block: "nearest",
              inline: "nearest"
            });
          });
        }
      });
    });
    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "selectedDate", function (currentDate) {
      return function (isNextMonth) {
        return function () {
          var momentSelected = _this.state.momentSelected.clone();

          if (isNextMonth === true) {
            momentSelected.add(1, "month").date(currentDate);
          } else if (isNextMonth === false) {
            momentSelected.subtract(1, "month").date(currentDate);
          } else {
            momentSelected.date(currentDate);
          }

          _this.setState({
            momentSelected: momentSelected,
            visible: false,
            momentSelectedTemp: momentSelected.clone(),
            isSelectedMoment: true
          }, function () {
            _this.props.onChange(currentDate, _this.state.momentSelected, _this.state.momentSelected.format(_this.props.format));
          });
        };
      };
    });
    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "renderCalendarContent", function () {
      var _this$props = _this.props,
          prefixCls = _this$props.prefixCls,
          disabledDate = _this$props.disabledDate,
          showDayInPrevMonth = _this$props.showDayInPrevMonth,
          showDayInNextMonth = _this$props.showDayInNextMonth,
          locale = _this$props.locale;

      var momentDateFirst = _this.state.momentSelected.clone().date(1);

      var dayOfFirstDate = momentDateFirst.day(); //获取第一天在周几  0是周天

      var weekdayInMonth = momentDateFirst.isoWeekday(); //获取或设置 ISO 星期几  其中 1 是星期一、7 是星期日。

      var momentLastMonth = momentDateFirst.clone().add(-1, "months");
      var lastMonthDaysInMonth = momentLastMonth.daysInMonth(); //获取上个月的天数

      var daysInMonth = momentDateFirst.daysInMonth(); //获取本月天数

      var lastDaysInMonth = (daysInMonth + weekdayInMonth - 1) % WEEKDAY; // 后面还剩余几天

      return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", null, locale.week_days.map(function (day) {
        return /*#__PURE__*/_react.default.createElement("span", {
          className: (0, _classnames.default)("".concat(prefixCls, "-item"), "".concat(prefixCls, "-day-title")),
          key: day
        }, day);
      })), new Array(weekdayInMonth - 1).fill().map(function (_, date) {
        var currentDate = dayOfFirstDate === 0 ? lastMonthDaysInMonth - WEEKDAY + date + 2 : lastMonthDaysInMonth - dayOfFirstDate + date + 2;
        var isDisabled = disabledDate(momentDateFirst.clone().date(date + 1));
        return /*#__PURE__*/_react.default.createElement("span", {
          className: (0, _classnames.default)("".concat(prefixCls, "-item"), "".concat(prefixCls, "-last-month"), (0, _defineProperty2.default)({}, "".concat(prefixCls, "-disabled-date"), isDisabled)),
          key: "first-date-".concat(date),
          onClick: !isDisabled ? _this.selectedDate(currentDate)(false) : undefined
        }, showDayInPrevMonth && currentDate);
      }), new Array(daysInMonth).fill(null).map(function (_, date) {
        var _cls2;

        var currentDate = date + 1;
        var isDisabled = disabledDate(momentDateFirst.clone().date(currentDate));
        return /*#__PURE__*/_react.default.createElement("span", {
          className: (0, _classnames.default)("".concat(prefixCls, "-item"), "".concat(prefixCls, "-current-month"), (_cls2 = {}, (0, _defineProperty2.default)(_cls2, "".concat(prefixCls, "-selected-date"), _this.state.momentSelected.date() === currentDate), (0, _defineProperty2.default)(_cls2, "".concat(prefixCls, "-disabled-date"), isDisabled), _cls2)),
          key: "date-".concat(date),
          onClick: !isDisabled ? _this.selectedDate(currentDate)() : undefined
        }, currentDate);
      }), new Array(lastDaysInMonth === 0 ? 0 : WEEKDAY - lastDaysInMonth).fill(null).map(function (_, date) {
        var currentDate = date + 1;
        var isDisabled = disabledDate(momentDateFirst.clone().add(1, "month").date(currentDate));
        return /*#__PURE__*/_react.default.createElement("span", {
          className: (0, _classnames.default)("".concat(prefixCls, "-item"), "".concat(prefixCls, "-next-month"), (0, _defineProperty2.default)({}, "".concat(prefixCls, "-disabled-date"), isDisabled)),
          key: "next-date-".concat(date),
          onClick: showDayInNextMonth && !isDisabled ? _this.selectedDate(currentDate)(true) : undefined
        }, showDayInNextMonth && currentDate);
      }));
    });
    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onClear", function () {
      var momentSelected = (0, _moment.default)();

      _this.setState({
        momentSelected: momentSelected,
        visible: _this.state.visible === null ? null : false,
        isSelectedMoment: false
      });
    });
    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onSelectToday", function () {
      var momentSelected = (0, _moment.default)();

      _this.setState({
        momentSelected: momentSelected,
        selectedDate: momentSelected.date(),
        isSelectedMoment: false
      }, function () {
        _this.selectedDate(_this.state.selectedDate)()();
      });
    });
    _this.wrapper = (0, _react.createRef)();
    _this.toggleContainer = (0, _react.createRef)();
    return _this;
  }

  (0, _createClass2.default)(DatePicker, [{
    key: "componentDidMount",
    value: function componentDidMount() {
      window.addEventListener("click", this.onClickOutsideHandler, false);

      if (this.props.visible) {
        this.setWrapperBounding();
      }
    }
  }, {
    key: "componentWillUnmount",
    value: function componentWillUnmount() {
      window.removeEventListener("click", this.onClickOutsideHandler);
    }
  }, {
    key: "setWrapperBounding",
    value: function setWrapperBounding() {
      var cb = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : function () {};

      var _this$getWrapperBound = this.getWrapperBounding(),
          left = _this$getWrapperBound.left,
          top = _this$getWrapperBound.top,
          width = _this$getWrapperBound.width;

      this.setState({
        left: left,
        top: top,
        width: width
      }, cb);
    }
  }, {
    key: "getWrapperBounding",
    value: function getWrapperBounding() {
      var _this$toggleContainer = this.toggleContainer.current.getBoundingClientRect(),
          left = _this$toggleContainer.left,
          top = _this$toggleContainer.top,
          height = _this$toggleContainer.height,
          width = _this$toggleContainer.width;

      var _this$wrapper$current = this.wrapper.current.getBoundingClientRect(),
          wrapperHeight = _this$wrapper$current.height;

      var _window = window,
          scrollY = _window.scrollY,
          scrollX = _window.scrollX;
      var positions = {
        //显示在上
        top: {
          top: top + scrollY - wrapperHeight - 10,
          left: left + scrollX,
          width: width
        },
        //显示在下
        bottom: {
          top: top + height + scrollY,
          left: left + scrollX,
          width: width
        }
      };
      return positions[this.props.position];
    }
  }, {
    key: "render",
    value: function render() {
      var _cls5, _cls7;

      var _this$state = this.state,
          visible = _this$state.visible,
          width = _this$state.width,
          left = _this$state.left,
          top = _this$state.top,
          momentSelectedTemp = _this$state.momentSelectedTemp,
          isSelectedMoment = _this$state.isSelectedMoment;
      var _this$props2 = this.props,
          prefixCls = _this$props2.prefixCls,
          className = _this$props2.className,
          size = _this$props2.size,
          getPopupContainer = _this$props2.getPopupContainer,
          style = _this$props2.style,
          placeholder = _this$props2.placeholder,
          allowClear = _this$props2.allowClear,
          disabled = _this$props2.disabled,
          loading = _this$props2.loading,
          tip = _this$props2.tip,
          format = _this$props2.format,
          suffix = _this$props2.suffix,
          extraFooter = _this$props2.extraFooter,
          showToday = _this$props2.showToday,
          locale = _this$props2.locale,
          disabledDate = _this$props2.disabledDate,
          showDayInPrevMonth = _this$props2.showDayInPrevMonth,
          showDayInNextMonth = _this$props2.showDayInNextMonth,
          attr = (0, _objectWithoutProperties2.default)(_this$props2, ["prefixCls", "className", "size", "getPopupContainer", "style", "placeholder", "allowClear", "disabled", "loading", "tip", "format", "suffix", "extraFooter", "showToday", "locale", "disabledDate", "showDayInPrevMonth", "showDayInNextMonth"]);
      return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({
        className: (0, _classnames.default)(prefixCls, className)
      }, attr, {
        style: style,
        ref: this.toggleContainer
      }), /*#__PURE__*/_react.default.createElement("div", {
        className: (0, _classnames.default)("".concat(prefixCls, "-inner"), (0, _defineProperty2.default)({}, "".concat(prefixCls, "-active"), visible))
      }, /*#__PURE__*/_react.default.createElement(_input.default, {
        value: isSelectedMoment ? momentSelectedTemp.format(format) : "",
        disabled: disabled,
        readOnly: true,
        size: size,
        placeholder: placeholder || locale.placeholder,
        style: {
          width: style && style.width
        },
        suffix: suffix,
        allowClear: allowClear,
        onClear: this.onClear,
        onClick: this.onClickHandler
      })), (0, _reactDom.createPortal)( /*#__PURE__*/_react.default.createElement("div", {
        className: (0, _classnames.default)("".concat(prefixCls, "-content"), (_cls5 = {}, (0, _defineProperty2.default)(_cls5, "".concat(prefixCls, "-open"), visible), (0, _defineProperty2.default)(_cls5, "".concat(prefixCls, "-close"), !visible), _cls5)),
        ref: this.wrapper,
        style: {
          width: width,
          left: left,
          top: top
        }
      }, /*#__PURE__*/_react.default.createElement(_spin.default, {
        spinning: loading,
        tip: tip,
        size: "large"
      }, /*#__PURE__*/_react.default.createElement("div", {
        className: (0, _classnames.default)("".concat(prefixCls, "-header"))
      }, /*#__PURE__*/_react.default.createElement("span", {
        className: (0, _classnames.default)("".concat(prefixCls, "-date"))
      }, this.state.momentSelected.year(), "\u5E74 ", "  ", this.state.momentSelected.month() + 1, "\u6708"), /*#__PURE__*/_react.default.createElement("span", {
        className: (0, _classnames.default)("".concat(prefixCls, "-switch"))
      }, /*#__PURE__*/_react.default.createElement("span", {
        className: (0, _classnames.default)("".concat(prefixCls, "-switch-group")),
        onClick: this.subtractMonth
      }, /*#__PURE__*/_react.default.createElement(_icon.ArrowLeftIcon, null)), /*#__PURE__*/_react.default.createElement("span", {
        className: (0, _classnames.default)("".concat(prefixCls, "-switch-group")),
        onClick: this.addMonth
      }, /*#__PURE__*/_react.default.createElement(_icon.ArrowRightIcon, null)))), /*#__PURE__*/_react.default.createElement("div", {
        className: (0, _classnames.default)("".concat(prefixCls, "-items"), (0, _defineProperty2.default)({}, "".concat(prefixCls, "-loading"), loading))
      }, this.renderCalendarContent()), extraFooter && /*#__PURE__*/_react.default.createElement("div", {
        className: "".concat(prefixCls, "-footer-extra")
      }, extraFooter), showToday || allowClear ? /*#__PURE__*/_react.default.createElement("div", {
        className: (0, _classnames.default)("".concat(prefixCls, "-footer"), (_cls7 = {}, (0, _defineProperty2.default)(_cls7, "".concat(prefixCls, "-has-extra-footer"), extraFooter), (0, _defineProperty2.default)(_cls7, "".concat(prefixCls, "-has-border"), showToday || allowClear), _cls7))
      }, showToday && /*#__PURE__*/_react.default.createElement("div", {
        className: (0, _classnames.default)("".concat(prefixCls, "-footer-today")),
        onClick: this.onSelectToday
      }, locale.today), allowClear && /*#__PURE__*/_react.default.createElement("div", {
        className: (0, _classnames.default)("".concat(prefixCls, "-footer-clear")),
        onClick: this.onClear
      }, locale.clear)) : undefined)), getPopupContainer()));
    }
  }]);
  return DatePicker;
}(_react.Component);

(0, _defineProperty2.default)(DatePicker, "propTypes", {
  prefixCls: _propTypes.default.string.isRequired,
  format: _propTypes.default.string,
  placeholder: _propTypes.default.string,
  allowClear: _propTypes.default.bool,
  size: _propTypes.default.oneOf(Object.values(sizes)),
  onChange: _propTypes.default.func,
  getPopupContainer: _propTypes.default.func,
  position: _propTypes.default.string,
  loading: _propTypes.default.bool,
  tip: _propTypes.default.string,
  showDayInPrevMonth: _propTypes.default.bool,
  showDayInNextMonth: _propTypes.default.bool,
  showToday: _propTypes.default.bool
});
(0, _defineProperty2.default)(DatePicker, "defaultProps", {
  prefixCls: "deer-ui-date-picker",
  format: "YYYY-MM-DD",
  size: "default",
  placeholder: "",
  allowClear: true,
  onChange: function onChange() {},
  getPopupContainer: function getPopupContainer() {
    return document.body;
  },
  position: "bottom",
  loading: false,
  tip: "",
  suffix: /*#__PURE__*/_react.default.createElement(_icon.CalendarIcon, null),
  disabledDate: function disabledDate() {
    return false;
  },
  showDayInPrevMonth: true,
  showDayInNextMonth: true,
  showToday: true
});

var _default = (0, _localeWrapper.default)(DatePicker, 'DatePicker');

exports.default = _default;