qt-public-ui/es/CompatibleAntd3/date-picker/RangePicker.js

新设计规范下业务组件库

import _extends from "@babel/runtime/helpers/esm/extends";
import _inheritsLoose from "@babel/runtime/helpers/esm/inheritsLoose";
/* eslint-disable */
/* tslint:disable jsx-no-multiline-js */
import * as React from 'react';
import * as moment from 'moment';
import { polyfill } from 'react-lifecycles-compat';
import RangeCalendar from 'rc-calendar/lib/RangeCalendar';
import RcDatePicker from 'rc-calendar/lib/Picker';
import classNames from 'classnames';
import { isEqualWith } from 'lodash';
import Icon from '../../Icon';
import Tag from '../tag';
import { ConfigConsumer } from '../config-provider/context';
import warning from '../_util/warning';
import interopDefault from '../_util/interopDefault';
import { formatDate } from './utils';
import InputIcon from './InputIcon';
function getShowDateFromValue(value, mode) {
  var start = value[0],
    end = value[1];
  // value could be an empty array, then we should not reset showDate
  if (!start && !end) {
    return;
  }
  if (mode && mode[0] === 'month') {
    return [start, end];
  }
  var newEnd = end && end.isSame(start, 'month') ? end.clone().add(1, 'month') : end;
  return [start, newEnd];
}
function pickerValueAdapter(value) {
  if (!value) {
    return;
  }
  if (Array.isArray(value)) {
    return value;
  }
  return [value, value.clone().add(1, 'month')];
}
function isEmptyArray(arr) {
  if (Array.isArray(arr)) {
    return arr.length === 0 || arr.every(function (i) {
      return !i;
    });
  }
  return false;
}
function fixLocale(value, localeCode) {
  if (!localeCode) {
    return;
  }
  if (!value || value.length === 0) {
    return;
  }
  var start = value[0],
    end = value[1];
  if (start) {
    start.locale(localeCode);
  }
  if (end) {
    end.locale(localeCode);
  }
}
var RangePicker = /*#__PURE__*/function (_React$Component) {
  function RangePicker(_props) {
    var _this;
    _this = _React$Component.call(this, _props) || this;
    _this.picker = void 0;
    _this.prefixCls = void 0;
    _this.tagPrefixCls = void 0;
    _this.savePicker = function (node) {
      _this.picker = node;
    };
    _this.clearSelection = function (e) {
      e.preventDefault();
      e.stopPropagation();
      _this.setState({
        value: []
      });
      _this.handleChange([]);
    };
    _this.clearHoverValue = function () {
      return _this.setState({
        hoverValue: []
      });
    };
    _this.handleChange = function (value) {
      var _this2 = _this,
        props = _this2.props;
      if (!('value' in props)) {
        _this.setState(function (_ref) {
          var showDate = _ref.showDate;
          return {
            value: value,
            showDate: getShowDateFromValue(value) || showDate
          };
        });
      }
      if (value[0] && value[1] && value[0].diff(value[1]) > 0) {
        value[1] = undefined;
      }
      var start = value[0],
        end = value[1];
      if (typeof props.onChange === 'function') {
        props.onChange(value, [formatDate(start, props.format), formatDate(end, props.format)]);
      }
    };
    _this.handleOpenChange = function (open) {
      if (!('open' in _this.props)) {
        _this.setState({
          open: open
        });
      }
      if (open === false) {
        _this.clearHoverValue();
      }
      var onOpenChange = _this.props.onOpenChange;
      if (onOpenChange) {
        onOpenChange(open);
      }
    };
    _this.handleShowDateChange = function (showDate) {
      return _this.setState({
        showDate: showDate
      });
    };
    _this.handleHoverChange = function (hoverValue) {
      return _this.setState({
        hoverValue: hoverValue
      });
    };
    _this.handleRangeMouseLeave = function () {
      if (_this.state.open) {
        _this.clearHoverValue();
      }
    };
    _this.handleCalendarInputSelect = function (value) {
      var start = value[0];
      if (!start) {
        return;
      }
      _this.setState(function (_ref2) {
        var showDate = _ref2.showDate;
        return {
          value: value,
          showDate: getShowDateFromValue(value) || showDate
        };
      });
    };
    _this.handleRangeClick = function (value) {
      if (typeof value === 'function') {
        value = value();
      }
      _this.setValue(value, true);
      var _this$props = _this.props,
        onOk = _this$props.onOk,
        onOpenChange = _this$props.onOpenChange;
      if (onOk) {
        onOk(value);
      }
      if (onOpenChange) {
        onOpenChange(false);
      }
    };
    _this.renderFooter = function () {
      var _this$props2 = _this.props,
        ranges = _this$props2.ranges,
        renderExtraFooter = _this$props2.renderExtraFooter;
      var _this3 = _this,
        prefixCls = _this3.prefixCls,
        tagPrefixCls = _this3.tagPrefixCls;
      if (!ranges && !renderExtraFooter) {
        return null;
      }
      var customFooter = renderExtraFooter ? /*#__PURE__*/React.createElement("div", {
        className: prefixCls + "-footer-extra",
        key: "extra"
      }, renderExtraFooter()) : null;
      var operations = ranges && Object.keys(ranges).map(function (range) {
        var value = ranges[range];
        var hoverValue = typeof value === 'function' ? value.call(_this) : value;
        return /*#__PURE__*/React.createElement(Tag, {
          key: range,
          prefixCls: tagPrefixCls,
          color: "blue",
          onClick: function onClick() {
            return _this.handleRangeClick(value);
          },
          onMouseEnter: function onMouseEnter() {
            return _this.setState({
              hoverValue: hoverValue
            });
          },
          onMouseLeave: _this.handleRangeMouseLeave
        }, range);
      });
      var rangeNode = operations && operations.length > 0 ? /*#__PURE__*/React.createElement("div", {
        className: prefixCls + "-footer-extra " + prefixCls + "-range-quick-selector",
        key: "range"
      }, operations) : null;
      return [rangeNode, customFooter];
    };
    _this.renderRangePicker = function (_ref3) {
      var _classNames;
      var getPrefixCls = _ref3.getPrefixCls;
      var _this4 = _this,
        state = _this4.state,
        props = _this4.props;
      var value = state.value,
        showDate = state.showDate,
        hoverValue = state.hoverValue,
        open = state.open;
      var customizePrefixCls = props.prefixCls,
        customizeTagPrefixCls = props.tagPrefixCls,
        popupStyle = props.popupStyle,
        style = props.style,
        disabledDate = props.disabledDate,
        disabledTime = props.disabledTime,
        showTime = props.showTime,
        showToday = props.showToday,
        ranges = props.ranges,
        onOk = props.onOk,
        locale = props.locale,
        localeCode = props.localeCode,
        format = props.format,
        dateRender = props.dateRender,
        onCalendarChange = props.onCalendarChange,
        suffixIcon = props.suffixIcon,
        separator = props.separator;
      var prefixCls = getPrefixCls('calendar', customizePrefixCls);
      var tagPrefixCls = getPrefixCls('tag', customizeTagPrefixCls);
      // To support old version react.
      // Have to add prefixCls on the instance.
      // https://github.com/facebook/react/issues/12397
      _this.prefixCls = prefixCls;
      _this.tagPrefixCls = tagPrefixCls;
      fixLocale(value, localeCode);
      fixLocale(showDate, localeCode);
      warning(!('onOK' in props), 'RangePicker', 'It should be `RangePicker[onOk]`, instead of `onOK`!');
      var calendarClassName = classNames((_classNames = {}, _classNames[prefixCls + "-time"] = showTime, _classNames[prefixCls + "-range-with-ranges"] = ranges, _classNames));

      // 需要选择时间时，点击 ok 时才触发 onChange
      var pickerChangeHandler = {
        onChange: _this.handleChange
      };
      var calendarProps = {
        onOk: _this.handleChange
      };
      if (props.timePicker) {
        pickerChangeHandler.onChange = function (changedValue) {
          return _this.handleChange(changedValue);
        };
      } else {
        calendarProps = {};
      }
      if ('mode' in props) {
        calendarProps.mode = props.mode;
      }
      var startPlaceholder = Array.isArray(props.placeholder) ? props.placeholder[0] : locale.lang.rangePlaceholder[0];
      var endPlaceholder = Array.isArray(props.placeholder) ? props.placeholder[1] : locale.lang.rangePlaceholder[1];
      var calendar = /*#__PURE__*/React.createElement(RangeCalendar, _extends({}, calendarProps, {
        seperator: separator,
        onChange: onCalendarChange,
        format: format,
        prefixCls: prefixCls,
        className: calendarClassName,
        renderFooter: _this.renderFooter,
        timePicker: props.timePicker,
        disabledDate: disabledDate,
        disabledTime: disabledTime,
        dateInputPlaceholder: [startPlaceholder, endPlaceholder],
        locale: locale.lang,
        onOk: onOk,
        dateRender: dateRender,
        value: showDate,
        onValueChange: _this.handleShowDateChange,
        hoverValue: hoverValue,
        onHoverChange: _this.handleHoverChange,
        onPanelChange: props.onPanelChange,
        showToday: showToday,
        onInputSelect: _this.handleCalendarInputSelect
      }));

      // default width for showTime
      var pickerStyle = {};
      if (props.showTime) {
        pickerStyle.width = style && style.width || 350;
      }
      var _ref4 = value,
        startValue = _ref4[0],
        endValue = _ref4[1];
      var clearIcon = !props.disabled && props.allowClear && value && (startValue || endValue) ? /*#__PURE__*/React.createElement(Icon, {
        type: "close-circle",
        className: prefixCls + "-picker-clear",
        onClick: _this.clearSelection,
        theme: "filled"
      }) : null;
      var inputIcon = /*#__PURE__*/React.createElement(InputIcon, {
        suffixIcon: suffixIcon,
        prefixCls: prefixCls
      });
      var input = function input(_ref5) {
        var inputValue = _ref5.value;
        var start = inputValue[0],
          end = inputValue[1];
        return /*#__PURE__*/React.createElement("span", {
          className: props.pickerInputClass
        }, /*#__PURE__*/React.createElement("input", {
          disabled: props.disabled,
          readOnly: true,
          value: formatDate(start, props.format),
          placeholder: startPlaceholder,
          className: prefixCls + "-range-picker-input",
          tabIndex: -1
        }), /*#__PURE__*/React.createElement("span", {
          className: prefixCls + "-range-picker-separator"
        }, " ", separator, " "), /*#__PURE__*/React.createElement("input", {
          disabled: props.disabled,
          readOnly: true,
          value: formatDate(end, props.format),
          placeholder: endPlaceholder,
          className: prefixCls + "-range-picker-input",
          tabIndex: -1
        }), clearIcon, inputIcon);
      };
      return /*#__PURE__*/React.createElement("span", {
        ref: _this.savePicker,
        id: typeof props.id === 'number' ? props.id.toString() : props.id,
        className: classNames(props.className, props.pickerClass),
        style: _extends({}, style, pickerStyle),
        tabIndex: props.disabled ? -1 : 0,
        onFocus: props.onFocus,
        onBlur: props.onBlur,
        onMouseEnter: props.onMouseEnter,
        onMouseLeave: props.onMouseLeave
      }, /*#__PURE__*/React.createElement(RcDatePicker, _extends({}, props, pickerChangeHandler, {
        calendar: calendar,
        value: value,
        open: open,
        onOpenChange: _this.handleOpenChange,
        prefixCls: prefixCls + "-picker-container",
        style: popupStyle
      }), input));
    };
    var _value = _props.value || _props.defaultValue || [];
    var _start = _value[0],
      _end = _value[1];
    if (_start && !interopDefault(moment).isMoment(_start) || _end && !interopDefault(moment).isMoment(_end)) {
      throw new Error('The value/defaultValue of RangePicker must be a moment object array after `antd@2.0`, ' + 'see: https://u.ant.design/date-picker-value');
    }
    var pickerValue = !_value || isEmptyArray(_value) ? _props.defaultPickerValue : _value;
    _this.state = {
      value: _value,
      showDate: pickerValueAdapter(pickerValue || interopDefault(moment)()),
      open: _props.open,
      hoverValue: []
    };
    return _this;
  }
  _inheritsLoose(RangePicker, _React$Component);
  RangePicker.getDerivedStateFromProps = function getDerivedStateFromProps(nextProps, prevState) {
    var state = null;
    if ('value' in nextProps) {
      var value = nextProps.value || [];
      state = {
        value: value
      };
      if (!isEqualWith(nextProps.value, prevState.value)) {
        state = _extends({}, state, {
          showDate: getShowDateFromValue(value, nextProps.mode) || prevState.showDate
        });
      }
    }
    if ('open' in nextProps && prevState.open !== nextProps.open) {
      state = _extends({}, state, {
        open: nextProps.open
      });
    }
    return state;
  };
  var _proto = RangePicker.prototype;
  _proto.componentDidUpdate = function componentDidUpdate(_, prevState) {
    if (!('open' in this.props) && prevState.open && !this.state.open) {
      this.focus();
    }
  };
  _proto.setValue = function setValue(value, hidePanel) {
    this.handleChange(value);
    if ((hidePanel || !this.props.showTime) && !('open' in this.props)) {
      this.setState({
        open: false
      });
    }
  };
  _proto.focus = function focus() {
    this.picker.focus();
  };
  _proto.blur = function blur() {
    this.picker.blur();
  };
  _proto.render = function render() {
    return /*#__PURE__*/React.createElement(ConfigConsumer, null, this.renderRangePicker);
  };
  return RangePicker;
}(React.Component);
RangePicker.defaultProps = {
  allowClear: true,
  showToday: false,
  separator: '~'
};
polyfill(RangePicker);
export default RangePicker;