"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof3 = require("@babel/runtime/helpers/typeof");
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 _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/createSuper"));
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _classnames = _interopRequireDefault(require("classnames"));
var _useMergedState7 = _interopRequireDefault(require("rc-util/lib/hooks/useMergedState"));
var _raf = _interopRequireDefault(require("rc-util/lib/raf"));
var _warning = _interopRequireDefault(require("rc-util/lib/warning"));
var _pickAttrs = _interopRequireDefault(require("rc-util/lib/pickAttrs"));
var React = _interopRequireWildcard(require("react"));
var _useCellRender = require("./hooks/useCellRender");
var _useHoverValue5 = _interopRequireDefault(require("./hooks/useHoverValue"));
var _usePickerInput5 = _interopRequireDefault(require("./hooks/usePickerInput"));
var _usePresets = _interopRequireDefault(require("./hooks/usePresets"));
var _useRangeDisabled3 = _interopRequireDefault(require("./hooks/useRangeDisabled"));
var _useRangeOpen3 = _interopRequireDefault(require("./hooks/useRangeOpen"));
var _useRangeViewDates3 = _interopRequireDefault(require("./hooks/useRangeViewDates"));
var _useTextValueMapping5 = _interopRequireDefault(require("./hooks/useTextValueMapping"));
var _useValueTexts5 = _interopRequireDefault(require("./hooks/useValueTexts"));
var _PanelContext = _interopRequireDefault(require("./PanelContext"));
var _PickerPanel = _interopRequireDefault(require("./PickerPanel"));
var _PickerTrigger = _interopRequireDefault(require("./PickerTrigger"));
var _PresetPanel = _interopRequireDefault(require("./PresetPanel"));
var _RangeContext = _interopRequireDefault(require("./RangeContext"));
var _dateUtil = require("./utils/dateUtil");
var _getExtraFooter = _interopRequireDefault(require("./utils/getExtraFooter"));
var _getRanges = _interopRequireDefault(require("./utils/getRanges"));
var _miscUtil = require("./utils/miscUtil");
var _uiUtil = require("./utils/uiUtil");
var _warnUtil = require("./utils/warnUtil");
var _getClearIcon = require("./utils/getClearIcon");
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof3(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
function reorderValues(values, generateConfig) {
  if (values && values[0] && values[1] && generateConfig.isAfter(values[0], values[1])) {
    return [values[1], values[0]];
  }
  return values;
}
function canValueTrigger(value, index, disabled, allowEmpty) {
  if (value) {
    return true;
  }
  if (allowEmpty && allowEmpty[index]) {
    return true;
  }
  if (disabled[(index + 1) % 2]) {
    return true;
  }
  return false;
}

// TMP type to fit for ts 3.9.2

function InnerRangePicker(props) {
  var _classNames2, _classNames3, _classNames4;
  var _ref = props,
    _ref$prefixCls = _ref.prefixCls,
    prefixCls = _ref$prefixCls === void 0 ? 'rc-picker' : _ref$prefixCls,
    id = _ref.id,
    style = _ref.style,
    className = _ref.className,
    popupStyle = _ref.popupStyle,
    dropdownClassName = _ref.dropdownClassName,
    transitionName = _ref.transitionName,
    dropdownAlign = _ref.dropdownAlign,
    getPopupContainer = _ref.getPopupContainer,
    generateConfig = _ref.generateConfig,
    locale = _ref.locale,
    placeholder = _ref.placeholder,
    autoFocus = _ref.autoFocus,
    disabled = _ref.disabled,
    format = _ref.format,
    _ref$picker = _ref.picker,
    picker = _ref$picker === void 0 ? 'date' : _ref$picker,
    showTime = _ref.showTime,
    use12Hours = _ref.use12Hours,
    _ref$separator = _ref.separator,
    separator = _ref$separator === void 0 ? '~' : _ref$separator,
    value = _ref.value,
    defaultValue = _ref.defaultValue,
    defaultPickerValue = _ref.defaultPickerValue,
    open = _ref.open,
    defaultOpen = _ref.defaultOpen,
    disabledDate = _ref.disabledDate,
    _disabledTime = _ref.disabledTime,
    dateRender = _ref.dateRender,
    monthCellRender = _ref.monthCellRender,
    cellRender = _ref.cellRender,
    panelRender = _ref.panelRender,
    presets = _ref.presets,
    ranges = _ref.ranges,
    allowEmpty = _ref.allowEmpty,
    allowClear = _ref.allowClear,
    suffixIcon = _ref.suffixIcon,
    clearIcon = _ref.clearIcon,
    pickerRef = _ref.pickerRef,
    inputReadOnly = _ref.inputReadOnly,
    mode = _ref.mode,
    renderExtraFooter = _ref.renderExtraFooter,
    onChange = _ref.onChange,
    onOpenChange = _ref.onOpenChange,
    onPanelChange = _ref.onPanelChange,
    onCalendarChange = _ref.onCalendarChange,
    _onFocus = _ref.onFocus,
    onBlur = _ref.onBlur,
    onMouseDown = _ref.onMouseDown,
    onMouseUp = _ref.onMouseUp,
    onMouseEnter = _ref.onMouseEnter,
    onMouseLeave = _ref.onMouseLeave,
    onClick = _ref.onClick,
    _onOk = _ref.onOk,
    _onKeyDown = _ref.onKeyDown,
    components = _ref.components,
    order = _ref.order,
    direction = _ref.direction,
    activePickerIndex = _ref.activePickerIndex,
    _ref$autoComplete = _ref.autoComplete,
    autoComplete = _ref$autoComplete === void 0 ? 'off' : _ref$autoComplete,
    changeOnBlur = _ref.changeOnBlur;
  var needConfirmButton = picker === 'date' && !!showTime || picker === 'time';
  var containerRef = (0, React.useRef)(null);
  var panelDivRef = (0, React.useRef)(null);
  var startInputDivRef = (0, React.useRef)(null);
  var endInputDivRef = (0, React.useRef)(null);
  var separatorRef = (0, React.useRef)(null);
  var startInputRef = (0, React.useRef)(null);
  var endInputRef = (0, React.useRef)(null);
  var arrowRef = (0, React.useRef)(null);

  // ============================ Warning ============================
  if (process.env.NODE_ENV !== 'production') {
    (0, _warnUtil.legacyPropsWarning)(props);
  }

  // ============================= Misc ==============================
  var formatList = (0, _miscUtil.toArray)((0, _uiUtil.getDefaultFormat)(format, picker, showTime, use12Hours));
  var formatDateValue = function formatDateValue(values, index) {
    return values && values[index] ? (0, _dateUtil.formatValue)(values[index], {
      generateConfig: generateConfig,
      locale: locale,
      format: formatList[0]
    }) : '';
  };

  // Operation ref
  var operationRef = (0, React.useRef)(null);
  var mergedDisabled = React.useMemo(function () {
    if (Array.isArray(disabled)) {
      return disabled;
    }
    return [disabled || false, disabled || false];
  }, [disabled]);

  // ============================= Value =============================
  var _useMergedState = (0, _useMergedState7.default)(null, {
      value: value,
      defaultValue: defaultValue,
      postState: function postState(values) {
        return picker === 'time' && !order ? values : reorderValues(values, generateConfig);
      }
    }),
    _useMergedState2 = (0, _slicedToArray2.default)(_useMergedState, 2),
    mergedValue = _useMergedState2[0],
    setInnerValue = _useMergedState2[1];

  // =========================== View Date ===========================
  // Config view panel
  var _useRangeViewDates = (0, _useRangeViewDates3.default)({
      values: mergedValue,
      picker: picker,
      defaultDates: defaultPickerValue,
      generateConfig: generateConfig
    }),
    _useRangeViewDates2 = (0, _slicedToArray2.default)(_useRangeViewDates, 2),
    getViewDate = _useRangeViewDates2[0],
    setViewDate = _useRangeViewDates2[1];

  // ========================= Select Values =========================
  var _useMergedState3 = (0, _useMergedState7.default)(mergedValue, {
      postState: function postState(values) {
        var postValues = values;
        if (mergedDisabled[0] && mergedDisabled[1]) {
          return postValues;
        }

        // Fill disabled unit
        for (var i = 0; i < 2; i += 1) {
          if (mergedDisabled[i] && !postValues && !(0, _miscUtil.getValue)(postValues, i) && !(0, _miscUtil.getValue)(allowEmpty, i)) {
            postValues = (0, _miscUtil.updateValues)(postValues, generateConfig.getNow(), i);
          }
        }
        return postValues;
      }
    }),
    _useMergedState4 = (0, _slicedToArray2.default)(_useMergedState3, 2),
    selectedValue = _useMergedState4[0],
    setSelectedValue = _useMergedState4[1];

  // ============================= Modes =============================
  var _useMergedState5 = (0, _useMergedState7.default)([picker, picker], {
      value: mode
    }),
    _useMergedState6 = (0, _slicedToArray2.default)(_useMergedState5, 2),
    mergedModes = _useMergedState6[0],
    setInnerModes = _useMergedState6[1];
  (0, React.useEffect)(function () {
    setInnerModes([picker, picker]);
  }, [picker]);
  var triggerModesChange = function triggerModesChange(modes, values) {
    setInnerModes(modes);
    if (onPanelChange) {
      onPanelChange(values, modes);
    }
  };

  // ============================= Open ==============================
  var _useRangeOpen = (0, _useRangeOpen3.default)(defaultOpen, open, activePickerIndex, changeOnBlur, needConfirmButton, startInputRef, endInputRef, (0, _miscUtil.getValue)(selectedValue, 0), (0, _miscUtil.getValue)(selectedValue, 1), mergedDisabled, onOpenChange),
    _useRangeOpen2 = (0, _slicedToArray2.default)(_useRangeOpen, 4),
    mergedOpen = _useRangeOpen2[0],
    mergedActivePickerIndex = _useRangeOpen2[1],
    firstTimeOpen = _useRangeOpen2[2],
    _triggerOpen = _useRangeOpen2[3];
  var startOpen = mergedOpen && mergedActivePickerIndex === 0;
  var endOpen = mergedOpen && mergedActivePickerIndex === 1;

  // ========================= Disable Date ==========================
  var _useRangeDisabled = (0, _useRangeDisabled3.default)({
      picker: picker,
      selectedValue: selectedValue,
      locale: locale,
      disabled: mergedDisabled,
      disabledDate: disabledDate,
      generateConfig: generateConfig
    }, !mergedOpen || firstTimeOpen),
    _useRangeDisabled2 = (0, _slicedToArray2.default)(_useRangeDisabled, 2),
    disabledStartDate = _useRangeDisabled2[0],
    disabledEndDate = _useRangeDisabled2[1];

  // ============================= Popup =============================
  // Popup min width
  var _useState = (0, React.useState)(0),
    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
    popupMinWidth = _useState2[0],
    setPopupMinWidth = _useState2[1];
  (0, React.useEffect)(function () {
    if (!mergedOpen && containerRef.current) {
      setPopupMinWidth(containerRef.current.offsetWidth);
    }
  }, [mergedOpen]);

  // ============================ Trigger ============================
  function triggerOpenAndFocus(index) {
    _triggerOpen(true, index, 'open');
    // Use setTimeout to make sure panel DOM exists
    (0, _raf.default)(function () {
      var _inputRef$current;
      var inputRef = [startInputRef, endInputRef][index];
      (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.focus();
    }, 0);
  }
  function triggerChange(newValue, sourceIndex, triggerCalendarChangeOnly) {
    var values = newValue;
    var startValue = (0, _miscUtil.getValue)(values, 0);
    var endValue = (0, _miscUtil.getValue)(values, 1);

    // >>>>> Format start & end values
    if (startValue && endValue && generateConfig.isAfter(startValue, endValue)) {
      if (
      // WeekPicker only compare week
      picker === 'week' && !(0, _dateUtil.isSameWeek)(generateConfig, locale.locale, startValue, endValue) ||
      // QuotaPicker only compare week
      picker === 'quarter' && !(0, _dateUtil.isSameQuarter)(generateConfig, startValue, endValue) ||
      // Other non-TimePicker compare date
      picker !== 'week' && picker !== 'quarter' && picker !== 'time' && !(0, _dateUtil.isSameDate)(generateConfig, startValue, endValue)) {
        // Clean up end date when start date is after end date
        if (sourceIndex === 0) {
          values = [startValue, null];
          endValue = null;
        } else {
          startValue = null;
          values = [null, endValue];
        }
      } else if (picker !== 'time' || order !== false) {
        // Reorder when in same date
        values = reorderValues(values, generateConfig);
      }
    }
    setSelectedValue(values);
    var startStr = formatDateValue(values, 0);
    var endStr = formatDateValue(values, 1);
    if (onCalendarChange) {
      var _info = {
        range: sourceIndex === 0 ? 'start' : 'end'
      };
      onCalendarChange(values, [startStr, endStr], _info);
    }
    if (!triggerCalendarChangeOnly) {
      // >>>>> Trigger `onChange` event
      var canStartValueTrigger = canValueTrigger(startValue, 0, mergedDisabled, allowEmpty);
      var canEndValueTrigger = canValueTrigger(endValue, 1, mergedDisabled, allowEmpty);
      var canTrigger = values === null || canStartValueTrigger && canEndValueTrigger;
      if (canTrigger) {
        // Trigger onChange only when value is validate
        setInnerValue(values);
        if (onChange && (!(0, _dateUtil.isEqual)(generateConfig, (0, _miscUtil.getValue)(mergedValue, 0), startValue) || !(0, _dateUtil.isEqual)(generateConfig, (0, _miscUtil.getValue)(mergedValue, 1), endValue))) {
          onChange(values, [startStr, endStr]);
        }
      }
    }
  }
  var forwardKeyDown = function forwardKeyDown(e) {
    if (mergedOpen && operationRef.current && operationRef.current.onKeyDown) {
      // Let popup panel handle keyboard
      return operationRef.current.onKeyDown(e);
    }

    /* istanbul ignore next */
    /* eslint-disable no-lone-blocks */
    {
      (0, _warning.default)(false, 'Picker not correct forward KeyDown operation. Please help to fire issue about this.');
      return false;
    }
  };

  // ============================= Text ==============================
  var sharedTextHooksProps = {
    formatList: formatList,
    generateConfig: generateConfig,
    locale: locale
  };
  var _useValueTexts = (0, _useValueTexts5.default)((0, _miscUtil.getValue)(selectedValue, 0), sharedTextHooksProps),
    _useValueTexts2 = (0, _slicedToArray2.default)(_useValueTexts, 2),
    startValueTexts = _useValueTexts2[0],
    firstStartValueText = _useValueTexts2[1];
  var _useValueTexts3 = (0, _useValueTexts5.default)((0, _miscUtil.getValue)(selectedValue, 1), sharedTextHooksProps),
    _useValueTexts4 = (0, _slicedToArray2.default)(_useValueTexts3, 2),
    endValueTexts = _useValueTexts4[0],
    firstEndValueText = _useValueTexts4[1];
  var _onTextChange = function onTextChange(newText, index) {
    var inputDate = (0, _dateUtil.parseValue)(newText, {
      locale: locale,
      formatList: formatList,
      generateConfig: generateConfig
    });
    var disabledFunc = index === 0 ? disabledStartDate : disabledEndDate;
    if (inputDate && !disabledFunc(inputDate)) {
      setSelectedValue((0, _miscUtil.updateValues)(selectedValue, inputDate, index));
      setViewDate(inputDate, index);
    }
  };
  var _useTextValueMapping = (0, _useTextValueMapping5.default)({
      valueTexts: startValueTexts,
      onTextChange: function onTextChange(newText) {
        return _onTextChange(newText, 0);
      }
    }),
    _useTextValueMapping2 = (0, _slicedToArray2.default)(_useTextValueMapping, 3),
    startText = _useTextValueMapping2[0],
    triggerStartTextChange = _useTextValueMapping2[1],
    resetStartText = _useTextValueMapping2[2];
  var _useTextValueMapping3 = (0, _useTextValueMapping5.default)({
      valueTexts: endValueTexts,
      onTextChange: function onTextChange(newText) {
        return _onTextChange(newText, 1);
      }
    }),
    _useTextValueMapping4 = (0, _slicedToArray2.default)(_useTextValueMapping3, 3),
    endText = _useTextValueMapping4[0],
    triggerEndTextChange = _useTextValueMapping4[1],
    resetEndText = _useTextValueMapping4[2];
  var _useState3 = (0, React.useState)(null),
    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
    rangeHoverValue = _useState4[0],
    setRangeHoverValue = _useState4[1];

  // ========================== Hover Range ==========================
  var _useState5 = (0, React.useState)(null),
    _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
    hoverRangedValue = _useState6[0],
    setHoverRangedValue = _useState6[1];
  var _useHoverValue = (0, _useHoverValue5.default)(startText, {
      formatList: formatList,
      generateConfig: generateConfig,
      locale: locale
    }),
    _useHoverValue2 = (0, _slicedToArray2.default)(_useHoverValue, 3),
    startHoverValue = _useHoverValue2[0],
    onStartEnter = _useHoverValue2[1],
    onStartLeave = _useHoverValue2[2];
  var _useHoverValue3 = (0, _useHoverValue5.default)(endText, {
      formatList: formatList,
      generateConfig: generateConfig,
      locale: locale
    }),
    _useHoverValue4 = (0, _slicedToArray2.default)(_useHoverValue3, 3),
    endHoverValue = _useHoverValue4[0],
    onEndEnter = _useHoverValue4[1],
    onEndLeave = _useHoverValue4[2];
  var onDateMouseEnter = function onDateMouseEnter(date) {
    setHoverRangedValue((0, _miscUtil.updateValues)(selectedValue, date, mergedActivePickerIndex));
    if (mergedActivePickerIndex === 0) {
      onStartEnter(date);
    } else {
      onEndEnter(date);
    }
  };
  var onDateMouseLeave = function onDateMouseLeave() {
    setHoverRangedValue((0, _miscUtil.updateValues)(selectedValue, null, mergedActivePickerIndex));
    if (mergedActivePickerIndex === 0) {
      onStartLeave();
    } else {
      onEndLeave();
    }
  };

  // ============================= Input =============================
  // We call effect to update `delayOpen` here since
  // when popup closed and input focused, should not trigger change when click another input
  var _React$useState = React.useState(mergedOpen),
    _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
    delayOpen = _React$useState2[0],
    setDelayOpen = _React$useState2[1];
  React.useEffect(function () {
    setDelayOpen(mergedOpen);
  }, [mergedOpen]);
  var onInternalBlur = function onInternalBlur(e) {
    if (delayOpen) {
      if (needConfirmButton) {
        // when in dateTime mode, switching between two date input fields will trigger onCalendarChange.
        // when onBlur is triggered, the input field has already switched, 
        // so it's necessary to obtain the value of the previous input field here.
        var needTriggerIndex = mergedActivePickerIndex ? 0 : 1;
        var selectedIndexValue = (0, _miscUtil.getValue)(selectedValue, needTriggerIndex);
        if (selectedIndexValue) {
          triggerChange(selectedValue, needTriggerIndex, true);
        }
      } else if (changeOnBlur) {
        var _selectedIndexValue = (0, _miscUtil.getValue)(selectedValue, mergedActivePickerIndex);
        if (_selectedIndexValue) {
          triggerChange(selectedValue, mergedActivePickerIndex);
        }
      }
    }
    return onBlur === null || onBlur === void 0 ? void 0 : onBlur(e);
  };
  var getSharedInputHookProps = function getSharedInputHookProps(index, resetText) {
    return {
      blurToCancel: !changeOnBlur && needConfirmButton,
      changeOnBlur: changeOnBlur,
      forwardKeyDown: forwardKeyDown,
      onBlur: onInternalBlur,
      isClickOutside: function isClickOutside(target) {
        var elementsRefs = [startInputDivRef.current, endInputDivRef.current, containerRef.current];
        return !(0, _uiUtil.elementsContains)([].concat((0, _toConsumableArray2.default)(needConfirmButton ? [elementsRefs[mergedActivePickerIndex]] : elementsRefs), [panelDivRef.current]), target);
      },
      onFocus: function onFocus(e) {
        if (_onFocus) {
          _onFocus(e);
        }
      },
      triggerOpen: function triggerOpen(newOpen) {
        if (newOpen) {
          _triggerOpen(newOpen, index, 'open');
        } else {
          _triggerOpen(newOpen,
          // Close directly if no selected value provided
          (0, _miscUtil.getValue)(selectedValue, index) ? index : false, 'blur');
        }
      },
      onSubmit: function onSubmit() {
        if (
        // When user typing disabledDate with keyboard and enter, this value will be empty
        !selectedValue ||
        // Normal disabled check
        disabledDate && disabledDate(selectedValue[index])) {
          return false;
        }
        triggerChange(selectedValue, index);
        resetText();

        // Switch
        _triggerOpen(false, mergedActivePickerIndex, 'confirm');
      },
      onCancel: function onCancel() {
        _triggerOpen(false, index, 'cancel');
        setSelectedValue(mergedValue);
        resetText();
      }
    };
  };
  var sharedPickerInput = {
    onKeyDown: function onKeyDown(e, preventDefault) {
      _onKeyDown === null || _onKeyDown === void 0 ? void 0 : _onKeyDown(e, preventDefault);
    }
  };
  var _usePickerInput = (0, _usePickerInput5.default)((0, _objectSpread2.default)((0, _objectSpread2.default)({}, getSharedInputHookProps(0, resetStartText)), {}, {
      open: startOpen,
      value: startText
    }, sharedPickerInput)),
    _usePickerInput2 = (0, _slicedToArray2.default)(_usePickerInput, 2),
    startInputProps = _usePickerInput2[0],
    _usePickerInput2$ = _usePickerInput2[1],
    startFocused = _usePickerInput2$.focused,
    startTyping = _usePickerInput2$.typing;
  var _usePickerInput3 = (0, _usePickerInput5.default)((0, _objectSpread2.default)((0, _objectSpread2.default)({}, getSharedInputHookProps(1, resetEndText)), {}, {
      open: endOpen,
      value: endText
    }, sharedPickerInput)),
    _usePickerInput4 = (0, _slicedToArray2.default)(_usePickerInput3, 2),
    endInputProps = _usePickerInput4[0],
    _usePickerInput4$ = _usePickerInput4[1],
    endFocused = _usePickerInput4$.focused,
    endTyping = _usePickerInput4$.typing;

  // ========================== Click Picker ==========================
  var onPickerClick = function onPickerClick(e) {
    // When click inside the picker & outside the picker's input elements
    // the panel should still be opened
    if (onClick) {
      onClick(e);
    }
    if (!mergedOpen && !startInputRef.current.contains(e.target) && !endInputRef.current.contains(e.target)) {
      if (!mergedDisabled[0]) {
        triggerOpenAndFocus(0);
      } else if (!mergedDisabled[1]) {
        triggerOpenAndFocus(1);
      }
    }
  };
  var onPickerMouseDown = function onPickerMouseDown(e) {
    // shouldn't affect input elements if picker is active
    if (onMouseDown) {
      onMouseDown(e);
    }
    if (mergedOpen && (startFocused || endFocused) && !startInputRef.current.contains(e.target) && !endInputRef.current.contains(e.target)) {
      e.preventDefault();
    }
  };

  // ============================= Sync ==============================
  // Close should sync back with text value
  var startStr = mergedValue && mergedValue[0] ? (0, _dateUtil.formatValue)(mergedValue[0], {
    locale: locale,
    format: 'YYYYMMDDHHmmss',
    generateConfig: generateConfig
  }) : '';
  var endStr = mergedValue && mergedValue[1] ? (0, _dateUtil.formatValue)(mergedValue[1], {
    locale: locale,
    format: 'YYYYMMDDHHmmss',
    generateConfig: generateConfig
  }) : '';
  (0, React.useEffect)(function () {
    if (!mergedOpen) {
      setSelectedValue(mergedValue);
      if (!startValueTexts.length || startValueTexts[0] === '') {
        triggerStartTextChange('');
      } else if (firstStartValueText !== startText) {
        resetStartText();
      }
      if (!endValueTexts.length || endValueTexts[0] === '') {
        triggerEndTextChange('');
      } else if (firstEndValueText !== endText) {
        resetEndText();
      }
    }
  }, [mergedOpen, startValueTexts, endValueTexts]);

  // Sync innerValue with control mode
  (0, React.useEffect)(function () {
    setSelectedValue(mergedValue);
  }, [startStr, endStr]);
  var mergedCellRender = (0, _useCellRender.useCellRender)({
    cellRender: cellRender,
    monthCellRender: monthCellRender,
    dateRender: dateRender
  });
  var panelDateRender = React.useMemo(function () {
    if (!mergedCellRender) return undefined;
    return function (date, info) {
      return mergedCellRender(date, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, info), {}, {
        range: mergedActivePickerIndex ? 'end' : 'start'
      }));
    };
  }, [mergedActivePickerIndex, mergedCellRender]);

  // ============================ Warning ============================
  if (process.env.NODE_ENV !== 'production') {
    if (value && Array.isArray(disabled) && ((0, _miscUtil.getValue)(disabled, 0) && !(0, _miscUtil.getValue)(value, 0) || (0, _miscUtil.getValue)(disabled, 1) && !(0, _miscUtil.getValue)(value, 1))) {
      (0, _warning.default)(false, '`disabled` should not set with empty `value`. You should set `allowEmpty` or `value` instead.');
    }
    (0, _warning.default)(!dateRender, "'dateRender' is deprecated. Please use 'cellRender' instead.");
    (0, _warning.default)(!monthCellRender, "'monthCellRender' is deprecated. Please use 'cellRender' instead.");
    (0, _warning.default)(!clearIcon, '`clearIcon` will be removed in future. Please use `allowClear` instead.');
  }

  // ============================ Private ============================
  if (pickerRef) {
    pickerRef.current = {
      focus: function focus() {
        if (startInputRef.current) {
          startInputRef.current.focus();
        }
      },
      blur: function blur() {
        if (startInputRef.current) {
          startInputRef.current.blur();
        }
        if (endInputRef.current) {
          endInputRef.current.blur();
        }
      }
    };
  }

  // ============================ Ranges =============================
  var presetList = (0, _usePresets.default)(presets, ranges);

  // ============================= Panel =============================
  function renderPanel() {
    var panelPosition = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
    var panelProps = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
    var panelHoverRangedValue = null;
    if (mergedOpen && hoverRangedValue && hoverRangedValue[0] && hoverRangedValue[1] && generateConfig.isAfter(hoverRangedValue[1], hoverRangedValue[0])) {
      panelHoverRangedValue = hoverRangedValue;
    }
    var panelShowTime = showTime;
    if (showTime && (0, _typeof2.default)(showTime) === 'object' && showTime.defaultValue) {
      var timeDefaultValues = showTime.defaultValue;
      panelShowTime = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, showTime), {}, {
        defaultValue: (0, _miscUtil.getValue)(timeDefaultValues, mergedActivePickerIndex) || undefined
      });
    }
    return /*#__PURE__*/React.createElement(_RangeContext.default.Provider, {
      value: {
        inRange: true,
        panelPosition: panelPosition,
        rangedValue: rangeHoverValue || selectedValue,
        hoverRangedValue: panelHoverRangedValue
      }
    }, /*#__PURE__*/React.createElement(_PickerPanel.default, (0, _extends2.default)({}, props, panelProps, {
      cellRender: panelDateRender,
      showTime: panelShowTime,
      mode: mergedModes[mergedActivePickerIndex],
      generateConfig: generateConfig,
      style: undefined,
      direction: direction,
      disabledDate: mergedActivePickerIndex === 0 ? disabledStartDate : disabledEndDate,
      disabledTime: function disabledTime(date) {
        if (_disabledTime) {
          return _disabledTime(date, mergedActivePickerIndex === 0 ? 'start' : 'end');
        }
        return false;
      },
      className: (0, _classnames.default)((0, _defineProperty2.default)({}, "".concat(prefixCls, "-panel-focused"), mergedActivePickerIndex === 0 ? !startTyping : !endTyping)),
      value: (0, _miscUtil.getValue)(selectedValue, mergedActivePickerIndex),
      locale: locale,
      tabIndex: -1,
      onPanelChange: function onPanelChange(date, newMode) {
        // clear hover value when panel change
        if (mergedActivePickerIndex === 0) {
          onStartLeave(true);
        }
        if (mergedActivePickerIndex === 1) {
          onEndLeave(true);
        }
        triggerModesChange((0, _miscUtil.updateValues)(mergedModes, newMode, mergedActivePickerIndex), (0, _miscUtil.updateValues)(selectedValue, date, mergedActivePickerIndex));
        var viewDate = date;
        if (panelPosition === 'right' && mergedModes[mergedActivePickerIndex] === newMode) {
          viewDate = (0, _dateUtil.getClosingViewDate)(viewDate, newMode, generateConfig, -1);
        }
        setViewDate(viewDate, mergedActivePickerIndex);
      },
      onOk: null,
      onSelect: undefined,
      onChange: undefined,
      defaultValue: mergedActivePickerIndex === 0 ? (0, _miscUtil.getValue)(selectedValue, 1) : (0, _miscUtil.getValue)(selectedValue, 0)
      // defaultPickerValue={undefined}
    })));
  }

  var arrowLeft = 0;
  var panelLeft = 0;
  if (mergedActivePickerIndex && startInputDivRef.current && separatorRef.current && panelDivRef.current && arrowRef.current) {
    // Arrow offset
    arrowLeft = startInputDivRef.current.offsetWidth + separatorRef.current.offsetWidth;

    // If panelWidth - arrowWidth - arrowMarginLeft < arrowLeft, panel should move to right side.
    // If arrowOffsetLeft > arrowLeft, arrowMarginLeft = arrowOffsetLeft - arrowLeft
    var arrowMarginLeft = arrowRef.current.offsetLeft > arrowLeft ? arrowRef.current.offsetLeft - arrowLeft : arrowRef.current.offsetLeft;
    var panelWidth = panelDivRef.current.offsetWidth;
    var arrowWidth = arrowRef.current.offsetWidth;
    if (panelWidth && arrowWidth && arrowLeft > panelWidth - arrowWidth - (direction === 'rtl' ? 0 : arrowMarginLeft)) {
      panelLeft = arrowLeft;
    }
  }
  var arrowPositionStyle = direction === 'rtl' ? {
    right: arrowLeft
  } : {
    left: arrowLeft
  };
  function renderPanels() {
    var panels;
    var extraNode = (0, _getExtraFooter.default)(prefixCls, mergedModes[mergedActivePickerIndex], renderExtraFooter);
    var rangesNode = (0, _getRanges.default)({
      prefixCls: prefixCls,
      components: components,
      needConfirmButton: needConfirmButton,
      okDisabled: !(0, _miscUtil.getValue)(selectedValue, mergedActivePickerIndex) || disabledDate && disabledDate(selectedValue[mergedActivePickerIndex]),
      locale: locale,
      // rangeList,
      onOk: function onOk() {
        var selectedIndexValue = (0, _miscUtil.getValue)(selectedValue, mergedActivePickerIndex);
        if (selectedIndexValue) {
          triggerChange(selectedValue, mergedActivePickerIndex);
          _onOk === null || _onOk === void 0 ? void 0 : _onOk(selectedValue);

          // Switch
          _triggerOpen(false, mergedActivePickerIndex, 'confirm');
        }
      }
    });
    if (picker !== 'time' && !showTime) {
      var viewDate = getViewDate(mergedActivePickerIndex);
      var nextViewDate = (0, _dateUtil.getClosingViewDate)(viewDate, picker, generateConfig);
      var currentMode = mergedModes[mergedActivePickerIndex];
      var showDoublePanel = currentMode === picker;
      var leftPanel = renderPanel(showDoublePanel ? 'left' : false, {
        pickerValue: viewDate,
        onPickerValueChange: function onPickerValueChange(newViewDate) {
          setViewDate(newViewDate, mergedActivePickerIndex);
        }
      });
      var rightPanel = renderPanel('right', {
        pickerValue: nextViewDate,
        onPickerValueChange: function onPickerValueChange(newViewDate) {
          setViewDate((0, _dateUtil.getClosingViewDate)(newViewDate, picker, generateConfig, -1), mergedActivePickerIndex);
        }
      });
      if (direction === 'rtl') {
        panels = /*#__PURE__*/React.createElement(React.Fragment, null, rightPanel, showDoublePanel && leftPanel);
      } else {
        panels = /*#__PURE__*/React.createElement(React.Fragment, null, leftPanel, showDoublePanel && rightPanel);
      }
    } else {
      panels = renderPanel();
    }
    var mergedNodes = /*#__PURE__*/React.createElement("div", {
      className: "".concat(prefixCls, "-panel-layout")
    }, /*#__PURE__*/React.createElement(_PresetPanel.default, {
      prefixCls: prefixCls,
      presets: presetList,
      onClick: function onClick(nextValue) {
        triggerChange(nextValue, null);
        _triggerOpen(false, mergedActivePickerIndex, 'preset');
      },
      onHover: function onHover(hoverValue) {
        setRangeHoverValue(hoverValue);
      }
    }), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
      className: "".concat(prefixCls, "-panels")
    }, panels), (extraNode || rangesNode) && /*#__PURE__*/React.createElement("div", {
      className: "".concat(prefixCls, "-footer")
    }, extraNode, rangesNode)));
    if (panelRender) {
      mergedNodes = panelRender(mergedNodes);
    }
    return /*#__PURE__*/React.createElement("div", {
      className: "".concat(prefixCls, "-panel-container"),
      style: {
        marginLeft: panelLeft
      },
      ref: panelDivRef,
      onMouseDown: function onMouseDown(e) {
        e.preventDefault();
      }
    }, mergedNodes);
  }
  var rangePanel = /*#__PURE__*/React.createElement("div", {
    className: (0, _classnames.default)("".concat(prefixCls, "-range-wrapper"), "".concat(prefixCls, "-").concat(picker, "-range-wrapper")),
    style: {
      minWidth: popupMinWidth
    }
  }, /*#__PURE__*/React.createElement("div", {
    ref: arrowRef,
    className: "".concat(prefixCls, "-range-arrow"),
    style: arrowPositionStyle
  }), renderPanels());

  // ============================= Icons =============================
  var suffixNode;
  if (suffixIcon) {
    suffixNode = /*#__PURE__*/React.createElement("span", {
      className: "".concat(prefixCls, "-suffix"),
      onMouseDown: function onMouseDown(e) {
        // Not lost focus
        e.preventDefault();
      }
    }, suffixIcon);
  }
  var mergedClearIcon = (0, _getClearIcon.getClearIcon)(prefixCls, allowClear, clearIcon);
  var clearNode = /*#__PURE__*/React.createElement("span", {
    onMouseDown: function onMouseDown(e) {
      e.preventDefault();
      e.stopPropagation();
    },
    onMouseUp: function onMouseUp(e) {
      e.preventDefault();
      e.stopPropagation();
      var values = mergedValue;
      if (!mergedDisabled[0]) {
        values = (0, _miscUtil.updateValues)(values, null, 0);
      }
      if (!mergedDisabled[1]) {
        values = (0, _miscUtil.updateValues)(values, null, 1);
      }
      triggerChange(values, null);
      _triggerOpen(false, mergedActivePickerIndex, 'clear');
    },
    className: "".concat(prefixCls, "-clear"),
    role: "button"
  }, mergedClearIcon);
  var mergedAllowClear = allowClear && ((0, _miscUtil.getValue)(mergedValue, 0) && !mergedDisabled[0] || (0, _miscUtil.getValue)(mergedValue, 1) && !mergedDisabled[1]);
  var inputSharedProps = {
    size: (0, _uiUtil.getInputSize)(picker, formatList[0], generateConfig)
  };
  var activeBarLeft = 0;
  var activeBarWidth = 0;
  if (startInputDivRef.current && endInputDivRef.current && separatorRef.current) {
    if (mergedActivePickerIndex === 0) {
      activeBarWidth = startInputDivRef.current.offsetWidth;
    } else {
      activeBarLeft = arrowLeft;
      activeBarWidth = endInputDivRef.current.offsetWidth;
    }
  }
  var activeBarPositionStyle = direction === 'rtl' ? {
    right: activeBarLeft
  } : {
    left: activeBarLeft
  };
  // ============================ Return =============================
  var onContextSelect = function onContextSelect(date, type) {
    var values = (0, _miscUtil.updateValues)(selectedValue, date, mergedActivePickerIndex);
    if (type === 'submit' || type !== 'key' && !needConfirmButton) {
      // triggerChange will also update selected values
      triggerChange(values, mergedActivePickerIndex);
      // clear hover value style
      if (mergedActivePickerIndex === 0) {
        onStartLeave();
      } else {
        onEndLeave();
      }

      // Switch
      var nextActivePickerIndex = mergedActivePickerIndex === 0 ? 1 : 0;
      if (mergedDisabled[nextActivePickerIndex]) {
        _triggerOpen(false, false, 'confirm');
      } else {
        _triggerOpen(false, mergedActivePickerIndex, 'confirm');
      }
    } else {
      setSelectedValue(values);
    }
  };
  return /*#__PURE__*/React.createElement(_PanelContext.default.Provider, {
    value: {
      operationRef: operationRef,
      hideHeader: picker === 'time',
      onDateMouseEnter: onDateMouseEnter,
      onDateMouseLeave: onDateMouseLeave,
      hideRanges: true,
      onSelect: onContextSelect,
      open: mergedOpen
    }
  }, /*#__PURE__*/React.createElement(_PickerTrigger.default, {
    visible: mergedOpen,
    popupElement: rangePanel,
    popupStyle: popupStyle,
    prefixCls: prefixCls,
    dropdownClassName: dropdownClassName,
    dropdownAlign: dropdownAlign,
    getPopupContainer: getPopupContainer,
    transitionName: transitionName,
    range: true,
    direction: direction
  }, /*#__PURE__*/React.createElement("div", (0, _extends2.default)({
    ref: containerRef,
    className: (0, _classnames.default)(prefixCls, "".concat(prefixCls, "-range"), className, (_classNames2 = {}, (0, _defineProperty2.default)(_classNames2, "".concat(prefixCls, "-disabled"), mergedDisabled[0] && mergedDisabled[1]), (0, _defineProperty2.default)(_classNames2, "".concat(prefixCls, "-focused"), mergedActivePickerIndex === 0 ? startFocused : endFocused), (0, _defineProperty2.default)(_classNames2, "".concat(prefixCls, "-rtl"), direction === 'rtl'), _classNames2)),
    style: style,
    onClick: onPickerClick,
    onMouseEnter: onMouseEnter,
    onMouseLeave: onMouseLeave,
    onMouseDown: onPickerMouseDown,
    onMouseUp: onMouseUp
  }, (0, _pickAttrs.default)(props, {
    aria: true,
    data: true
  })), /*#__PURE__*/React.createElement("div", {
    className: (0, _classnames.default)("".concat(prefixCls, "-input"), (_classNames3 = {}, (0, _defineProperty2.default)(_classNames3, "".concat(prefixCls, "-input-active"), mergedActivePickerIndex === 0), (0, _defineProperty2.default)(_classNames3, "".concat(prefixCls, "-input-placeholder"), !!startHoverValue), _classNames3)),
    ref: startInputDivRef
  }, /*#__PURE__*/React.createElement("input", (0, _extends2.default)({
    id: id,
    disabled: mergedDisabled[0],
    readOnly: inputReadOnly || typeof formatList[0] === 'function' || !startTyping,
    value: startHoverValue || startText,
    onChange: function onChange(e) {
      triggerStartTextChange(e.target.value);
    },
    autoFocus: autoFocus,
    placeholder: (0, _miscUtil.getValue)(placeholder, 0) || '',
    ref: startInputRef
  }, startInputProps, inputSharedProps, {
    autoComplete: autoComplete
  }))), /*#__PURE__*/React.createElement("div", {
    className: "".concat(prefixCls, "-range-separator"),
    ref: separatorRef
  }, separator), /*#__PURE__*/React.createElement("div", {
    className: (0, _classnames.default)("".concat(prefixCls, "-input"), (_classNames4 = {}, (0, _defineProperty2.default)(_classNames4, "".concat(prefixCls, "-input-active"), mergedActivePickerIndex === 1), (0, _defineProperty2.default)(_classNames4, "".concat(prefixCls, "-input-placeholder"), !!endHoverValue), _classNames4)),
    ref: endInputDivRef
  }, /*#__PURE__*/React.createElement("input", (0, _extends2.default)({
    disabled: mergedDisabled[1],
    readOnly: inputReadOnly || typeof formatList[0] === 'function' || !endTyping,
    value: endHoverValue || endText,
    onChange: function onChange(e) {
      triggerEndTextChange(e.target.value);
    },
    placeholder: (0, _miscUtil.getValue)(placeholder, 1) || '',
    ref: endInputRef
  }, endInputProps, inputSharedProps, {
    autoComplete: autoComplete
  }))), /*#__PURE__*/React.createElement("div", {
    className: "".concat(prefixCls, "-active-bar"),
    style: (0, _objectSpread2.default)((0, _objectSpread2.default)({}, activeBarPositionStyle), {}, {
      width: activeBarWidth,
      position: 'absolute'
    })
  }), suffixNode, mergedAllowClear && clearNode)));
}

// Wrap with class component to enable pass generic with instance method
var RangePicker = /*#__PURE__*/function (_React$Component) {
  (0, _inherits2.default)(RangePicker, _React$Component);
  var _super = (0, _createSuper2.default)(RangePicker);
  function RangePicker() {
    var _this;
    (0, _classCallCheck2.default)(this, RangePicker);
    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }
    _this = _super.call.apply(_super, [this].concat(args));
    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "pickerRef", /*#__PURE__*/React.createRef());
    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "focus", function () {
      if (_this.pickerRef.current) {
        _this.pickerRef.current.focus();
      }
    });
    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "blur", function () {
      if (_this.pickerRef.current) {
        _this.pickerRef.current.blur();
      }
    });
    return _this;
  }
  (0, _createClass2.default)(RangePicker, [{
    key: "render",
    value: function render() {
      return /*#__PURE__*/React.createElement(InnerRangePicker, (0, _extends2.default)({}, this.props, {
        pickerRef: this.pickerRef
      }));
    }
  }]);
  return RangePicker;
}(React.Component);
var _default = RangePicker;
exports.default = _default;