@rio-cloud/rio-uikit 0.16.3 → 0.16.4-beta.10

package/components/datepicker/DateRangePicker.js

@@ -1,697 +1,432 @@
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
-import _createClass from "@babel/runtime/helpers/createClass";
-import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
-import _inherits from "@babel/runtime/helpers/inherits";
-import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
-import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(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 { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
-/**
- * @fileOverview: Wrapper component for React-Datetime.
- */
-
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import ReactDOM from 'react-dom';
-import DatePicker from './DatePicker';
-import onClickOutside from 'react-onclickoutside';
-import moment from 'moment';
-import classNames from 'classnames';
-import isNil from 'lodash/fp/isNil';
-import isNull from 'lodash/fp/isNull';
-import isEqual from 'lodash/fp/isEqual';
-import getDropDirection from '../../utils/getDropDirection';
-var Placeholder = function Placeholder(_ref) {
-  var text = _ref.text;
-  return /*#__PURE__*/React.createElement("span", {
-    className: 'placeholder'
-  }, text);
-};
-
-/**
- * The DateRangePicker
- */
-
-var propTypes = {
-  startValue: PropTypes.object,
-  endValue: PropTypes.object,
-  defaultStartValue: PropTypes.object,
-  defaultEndValue: PropTypes.object,
-  minValue: PropTypes.object,
-  maxValue: PropTypes.object,
-  onRangeChange: PropTypes.func,
-  locale: PropTypes.string,
-  textDefault: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
-  textToday: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
-  textLastWeek: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
-  textLastMonth: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
-  textLastYear: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
-  textCustom: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
-  textApply: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
-  textCancel: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
-  textFrom: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
-  textTo: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
-  className: PropTypes.string,
-  dropdownClass: PropTypes.string,
-  dropdownMenuClass: PropTypes.string,
-  hasTimePicker: PropTypes.bool,
-  customRangeOnly: PropTypes.bool,
-  customPresets: PropTypes.arrayOf(PropTypes.shape({
-    startValue: PropTypes.object.isRequired,
-    endValue: PropTypes.object.isRequired,
-    text: PropTypes.string.isRequired,
-    onSelect: PropTypes.func
-  })),
-  dropup: PropTypes.bool,
-  pullRight: PropTypes.bool,
-  autoDropDirection: PropTypes.bool,
-  clearable: PropTypes.bool,
-  onClear: PropTypes.func
-};
-var defaultProps = {
-  defaultStartValue: moment().startOf('day'),
-  defaultEndValue: moment().endOf('day'),
-  minValue: null,
-  maxValue: null,
-  locale: 'en-GB',
-  textDefault: 'Select date range ...',
-  textToday: 'Today',
-  textLastWeek: 'Last week',
-  textLastMonth: 'Last month',
-  textCustom: 'Custom',
-  textFrom: 'From',
-  textTo: 'To',
-  textApply: 'Apply',
-  textCancel: 'Cancel',
-  dropdownClass: '',
-  dropdownMenuClass: '',
-  hasTimePicker: false,
-  customRangeOnly: false,
-  customPresets: [{
-    text: 'Today',
-    startValue: moment().startOf('day'),
-    endValue: moment().endOf('day')
-  }, {
-    text: 'Last week',
-    startValue: moment().subtract(1, 'weeks').startOf('isoWeek'),
-    endValue: moment().subtract(1, 'weeks').endOf('isoWeek')
-  }, {
-    text: 'Last Month',
-    startValue: moment().subtract(1, 'months').startOf('month'),
-    endValue: moment().subtract(1, 'months').endOf('month')
-  }],
-  onRangeChange: function onRangeChange() {
-    // function when range changes
-  },
-  autoDropDirection: true,
-  dropup: false,
-  pullRight: false,
-  clearable: false,
-  onClear: function onClear() {
-    return undefined;
-  }
-};
-var LOCAL_DATE_FORMAT = 'dd L LT';
-var LOCAL_DATE_FORMAT_NO_TIME = 'dd L';
-var DROPDOWN_WIDTH = 600;
-var DateRangePicker = /*#__PURE__*/function (_Component) {
-  _inherits(DateRangePicker, _Component);
-  var _super = _createSuper(DateRangePicker);
-  function DateRangePicker(props) {
-    var _this;
-    _classCallCheck(this, DateRangePicker);
-    _this = _super.call(this, props);
-    var customRangeStartValue = props.startValue ? props.startValue : props.defaultStartValue;
-    var customRangeEndValue = props.endValue ? props.endValue : props.defaultEndValue;
-    _this.state = {
-      internalStartValue: props.startValue,
-      internalEndValue: props.endValue,
-      isMounted: false,
-      isCustomVisible: props.customRangeOnly,
-      isDropdownOpen: false,
-      customRangeStartValue: moment(customRangeStartValue),
-      // default value for individual datepickers
-      customRangeEndValue: moment(customRangeEndValue),
-      // default value for individual datepickers
-      isStartValid: true,
-      isEndValid: true,
-      dropdownToggleText: /*#__PURE__*/React.createElement(Placeholder, {
-        text: props.textDefault
-      }),
-      dropup: props.dropup,
-      pullRight: props.pullRight
-    };
-    _this.toggleDropdownOpen = _this.toggleDropdownOpen.bind(_assertThisInitialized(_this));
-    _this.handleCustomToggle = _this.handleCustomToggle.bind(_assertThisInitialized(_this));
-    _this.handleCustomApply = _this.handleCustomApply.bind(_assertThisInitialized(_this));
-    _this.onStartChange = _this.onStartChange.bind(_assertThisInitialized(_this));
-    _this.getValidStartDates = _this.getValidStartDates.bind(_assertThisInitialized(_this));
-    _this.onEndChange = _this.onEndChange.bind(_assertThisInitialized(_this));
-    _this.getValidEndDates = _this.getValidEndDates.bind(_assertThisInitialized(_this));
-    _this.handleResetInternalState = _this.handleResetInternalState.bind(_assertThisInitialized(_this));
-    return _this;
-  }
-  _createClass(DateRangePicker, [{
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      var _this$props = this.props,
-        startValue = _this$props.startValue,
-        endValue = _this$props.endValue,
-        locale = _this$props.locale;
-      if (!this.state.isMounted) {
-        this.setState({
-          isMounted: true
-        });
-      }
-
-      // initial mount value
-      if (startValue && endValue) {
-        this.update(startValue, endValue, locale);
-      }
-    }
-
-    /**
-     * Responsible for handling start/end values given from outside (controlled component context).
-     * @param {object} nextProps - The next props.
-     * @returns {undefined}
-     */
-    // eslint-disable-next-line camelcase
-  }, {
-    key: "UNSAFE_componentWillReceiveProps",
-    value: function UNSAFE_componentWillReceiveProps(nextProps) {
-      var startValue = nextProps.startValue,
-        endValue = nextProps.endValue,
-        textDefault = nextProps.textDefault,
-        customRangeOnly = nextProps.customRangeOnly,
-        locale = nextProps.locale,
-        defaultStartValue = nextProps.defaultStartValue,
-        defaultEndValue = nextProps.defaultEndValue;
-      var _this$state = this.state,
-        internalStartValue = _this$state.internalStartValue,
-        internalEndValue = _this$state.internalEndValue;
-
-      // handle reset:
-      // reset condition 1 is for uncontrolled components,
-      // making sure that when a time is selected, and then the locale changed, that the selection remains
-      var resetCondition1 = isNil(startValue) && isNil(endValue) && isNil(internalStartValue) && isNil(internalEndValue);
-
-      // reset condition 2 is for controlled components,
-      // when a time is set / defined, and the controlling component wants a hard reset
-      var resetCondition2 = isNull(startValue) && isNull(endValue);
-
-      // reset to original state
-      if (resetCondition1 || resetCondition2) {
-        this.setState({
-          internalStartValue: undefined,
-          internalEndValue: undefined,
-          customRangeStartValue: defaultStartValue,
-          customRangeEndValue: defaultEndValue,
-          dropdownToggleText: /*#__PURE__*/React.createElement(Placeholder, {
-            text: textDefault
-          }),
-          isCustomVisible: customRangeOnly,
-          isDropdownOpen: false,
-          isStartValid: true,
-          isEndValid: true,
-          pullRight: nextProps.pullRight,
-          dropup: nextProps.dropup
-        });
-      } else if (startValue !== this.props.startValue || endValue !== this.props.endValue) {
-        this.update(startValue, endValue, locale);
-      } else {
-        this.update(internalStartValue, internalEndValue, locale);
-      }
-    }
-
-    /**
-     * Converts start/end values to moments, makes them readable,
-     * crafts a dropdownToggleText and updates state.
-     * @param {object} startValue - the start date (date or moment).
-     * @param {object} endValue - the start date (date or moment).
-     * @param {object} locale - the locale to use.
-     * @param {object} extras - additional state, which needs to update.
-     * @param {object} callback - callback to be called, after state has changed.
-     * @returns {undefined}
-     */
-  }, {
-    key: "update",
-    value: function update(startValue, endValue, locale, extras, callback) {
-      var hasTimePicker = this.props.hasTimePicker;
-      var format = hasTimePicker ? LOCAL_DATE_FORMAT : LOCAL_DATE_FORMAT_NO_TIME;
-
-      // necessary to set start to startOf / end day to endOf, when selecting "without time"
-      var finalStartValue = hasTimePicker ? moment(startValue) : moment(startValue).startOf('day');
-      var finalEndValue = hasTimePicker ? moment(endValue) : moment(endValue).endOf('day');
-
-      // composition of dropdownToggleText
-      var startValueText = "".concat(finalStartValue.locale(locale).format(format));
-      var endValueText = "".concat(finalEndValue.locale(locale).format(format));
-      var dropdownToggleText = startValueText === endValueText ? startValueText : "".concat(startValueText, " \u2192 ").concat(endValueText);
-
-      // set state, and call callback
-      this.setState(_objectSpread({
-        internalStartValue: finalStartValue,
-        internalEndValue: finalEndValue,
-        customRangeStartValue: finalStartValue,
-        customRangeEndValue: finalEndValue,
-        dropdownToggleText: dropdownToggleText,
-        startValueText: startValueText,
-        endValueText: endValueText,
-        isStartValid: true,
-        isEndValid: !finalEndValue.isBefore(finalStartValue)
-      }, extras), function () {
-        callback && callback(finalStartValue, finalEndValue);
-      });
-    }
-  }, {
-    key: "handleResetInternalState",
-    value: function handleResetInternalState(event) {
-      if (event) {
-        event.preventDefault();
-        event.stopPropagation();
-      }
-      var _this$props2 = this.props,
-        textDefault = _this$props2.textDefault,
-        customRangeOnly = _this$props2.customRangeOnly,
-        defaultStartValue = _this$props2.defaultStartValue,
-        defaultEndValue = _this$props2.defaultEndValue,
-        pullRight = _this$props2.pullRight,
-        dropup = _this$props2.dropup,
-        onClear = _this$props2.onClear;
-      this.setState({
-        internalStartValue: undefined,
-        internalEndValue: undefined,
-        customRangeStartValue: defaultStartValue,
-        customRangeEndValue: defaultEndValue,
-        dropdownToggleText: /*#__PURE__*/React.createElement(Placeholder, {
-          text: textDefault
-        }),
-        isCustomVisible: customRangeOnly,
-        isDropdownOpen: false,
-        isStartValid: true,
-        isEndValid: true,
-        startValueText: null,
-        endValueText: null,
-        pullRight: pullRight,
-        dropup: dropup
-      });
-      onClear();
-    }
-
-    /**
-     * Gets called by wrapper component "onClickOutside".
-     * Responsible for closing the dropdown when a click occured outside.
-     * @returns {undefined}
-     */
-  }, {
-    key: "handleClickOutside",
-    value: function handleClickOutside() {
-      if (this.state.isMounted) {
-        this.setState({
-          isDropdownOpen: false
-        });
-      }
-    }
-
-    /**
-     * Toggles dropdown open status and visibility of custom range area.
-     * @param {object} event - mouse event on toggle dropdown
-     * @returns {undefined}
-     */
-  }, {
-    key: "toggleDropdownOpen",
-    value: function toggleDropdownOpen(event) {
-      var _this2 = this;
-      var toggleNode = ReactDOM.findDOMNode(this.refDropdownToggle);
-      var menuNode = ReactDOM.findDOMNode(this.refDropdownMenu);
-      var dropDirection = this.isAutoDropActive() && !this.state.isDropdownOpen ? getDropDirection(toggleNode, menuNode) : {};
-      var left = event.currentTarget.getBoundingClientRect().left;
-      this.setState(function (prevState) {
-        return _objectSpread(_objectSpread({
-          isDropdownOpen: !prevState.isDropdownOpen,
-          isCustomVisible: _this2.props.customRangeOnly
-        }, dropDirection), {}, {
-          pullRight: left + DROPDOWN_WIDTH > document.body.clientWidth
-        });
-      });
-    }
-  }, {
-    key: "isAutoDropActive",
-    value: function isAutoDropActive() {
-      return !(!this.props.autoDropDirection || this.props.dropup || this.props.pullRight);
-    }
-
-    /**
-     * Only gets called on manual change of datePicker (user interaction).
-     * Has influence the validity of the end date.
-     *
-     * Important to note that the start date is not limited,
-     * whereas the end date is limited by the start date (see 'getValidEndDates').
-     *
-     * @param {object} startValue - the start date (date or moment).
-     * @param {object} isValidDate - if the date is valid or not.
-     * @returns {undefined}
-     */
-  }, {
-    key: "onStartChange",
-    value: function onStartChange(startValue, isValidDate) {
-      var newState = {
-        isStartValid: false
-      };
-      var _this$props3 = this.props,
-        hasTimePicker = _this$props3.hasTimePicker,
-        minValue = _this$props3.minValue,
-        maxValue = _this$props3.maxValue;
-      var customRangeEndValue = this.state.customRangeEndValue;
-      if (moment.isMoment(startValue)) {
-        // necessary to set start to startOf / end day to endOf, when selecting "without time"
-        var finalStartValue = hasTimePicker ? startValue : moment(startValue).startOf('day');
-
-        // check validity of input (min/max)
-        var passesMin = minValue ? finalStartValue.isSameOrAfter(moment(minValue)) : true;
-        var passesMax = maxValue ? finalStartValue.isSameOrBefore(moment(maxValue)) : true;
-        var isValidInput = isValidDate && passesMin && passesMax;
-        newState.isStartValid = isValidInput;
-        if (isValidDate) {
-          newState.customRangeStartValue = finalStartValue;
-          newState.isEndValid = !customRangeEndValue.isBefore(finalStartValue);
-        }
-      }
-      this.setState(newState);
-    }
-
-    /**
-     * Only gets called on manual change of datePicker (user interaction)
-     * @param {object} endValue - the start date (date or moment).
-     * @param {object} isValidDate - if the date is valid or not.
-     * @returns {undefined}
-     */
-  }, {
-    key: "onEndChange",
-    value: function onEndChange(endValue, isValidDate) {
-      var newState = {
-        isEndValid: false
-      };
-      var _this$props4 = this.props,
-        hasTimePicker = _this$props4.hasTimePicker,
-        minValue = _this$props4.minValue,
-        maxValue = _this$props4.maxValue;
-      var customRangeStartValue = this.state.customRangeStartValue;
-      // let isValidInput = false;
-
-      if (moment.isMoment(endValue)) {
-        // necessary to set end of seconds and milliseconds for every end value
-        var correctedEndValue = isValidDate ? endValue.endOf('minute') : endValue;
-
-        // necessary to set start to startOf / end day to endOf, when selecting "without time"
-        var finalEndValue = hasTimePicker ? correctedEndValue : moment(endValue).endOf('day');
-
-        // check validity of input (min/max)
-        var passesMin = minValue ? finalEndValue.isSameOrAfter(moment(minValue)) : true;
-        var passesMax = maxValue ? finalEndValue.isSameOrBefore(moment(maxValue)) : true;
-        var isValidInput = isValidDate && passesMin && passesMax && finalEndValue.isAfter(customRangeStartValue);
-        newState.isEndValid = isValidInput;
-        if (isValidDate) {
-          newState.customRangeEndValue = finalEndValue;
-        }
-      }
-      this.setState(newState);
-    }
-
-    /**
-     * Callback method for DatePicker to limit selection in DatePicker.
-     * @param {object} current - Current date in the loop.
-     * @returns {undefined}
-     */
-  }, {
-    key: "getValidStartDates",
-    value: function getValidStartDates(current) {
-      var _this$props5 = this.props,
-        minValue = _this$props5.minValue,
-        maxValue = _this$props5.maxValue;
-      var customRangeEndValue = moment(this.state.customRangeEndValue);
-      if (current.isSame(customRangeEndValue, 'day')) {
-        return true;
-      }
-      var passesMin = minValue ? current.isSameOrAfter(moment(minValue)) : true;
-      var passesMax = maxValue ? current.isSameOrBefore(moment(maxValue)) : true;
-      return passesMin && passesMax;
-    }
-
-    /**
-     * Callback method for DatePicker to limit selection in DatePicker.
-     * End date has to be after start date.
-     * @param {object} current - Current date in the loop.
-     * @returns {undefined}
-     */
-  }, {
-    key: "getValidEndDates",
-    value: function getValidEndDates(current) {
-      var _this$props6 = this.props,
-        minValue = _this$props6.minValue,
-        maxValue = _this$props6.maxValue;
-      var customRangeStartValue = moment(this.state.customRangeStartValue);
-      if (current.isSame(customRangeStartValue, 'day')) {
-        return true;
-      }
-      var passesMin = minValue ? current.isSameOrAfter(moment(minValue)) : true;
-      var passesMax = maxValue ? current.isSameOrBefore(moment(maxValue)) : true;
-      var isAfterStart = current.isAfter(customRangeStartValue);
-      return passesMin && passesMax && isAfterStart;
-    }
-
-    /**
-     * Gets called when "custom ..." has been selected.
-     * @returns {undefined}
-     */
-  }, {
-    key: "handleCustomToggle",
-    value: function handleCustomToggle() {
-      this.setState(function (prevState) {
-        return {
-          isCustomVisible: !prevState.isCustomVisible
-        };
-      });
-    }
-  }, {
-    key: "handleCustomPresetSelect",
-    value: function handleCustomPresetSelect(preset) {
-      if (typeof preset.onSelect === 'function') {
-        preset.onSelect();
-      }
-      this.handleSelect(preset.startValue, preset.endValue);
-    }
-
-    /**
-     * Gets called when a preset has been selected.
-     * @param {object} startValue - the start date (date or moment).
-     * @param {object} endValue - the start date (date or moment).
-     * @returns {undefined}
-     */
-  }, {
-    key: "handleSelect",
-    value: function handleSelect(startValue, endValue) {
-      var _this$props7 = this.props,
-        onRangeChange = _this$props7.onRangeChange,
-        locale = _this$props7.locale;
-      var extras = {
-        isDropdownOpen: false
-      };
-      this.update(startValue, endValue, locale, extras, onRangeChange);
-    }
-
-    /**
-     * Gets called user clicks the apply button.
-     * @returns {undefined}
-     */
-  }, {
-    key: "handleCustomApply",
-    value: function handleCustomApply() {
-      var _this$state2 = this.state,
-        customRangeStartValue = _this$state2.customRangeStartValue,
-        customRangeEndValue = _this$state2.customRangeEndValue,
-        isStartValid = _this$state2.isStartValid,
-        isEndValid = _this$state2.isEndValid;
-      var _this$props8 = this.props,
-        onRangeChange = _this$props8.onRangeChange,
-        locale = _this$props8.locale;
-      if (isStartValid && isEndValid) {
-        var extras = {
-          isDropdownOpen: false
-        };
-        this.update(customRangeStartValue, customRangeEndValue, locale, extras, onRangeChange);
-      }
-    }
-  }, {
-    key: "getDropdownToggle",
-    value: function getDropdownToggle(dropdownToggleText) {
-      var _this3 = this;
-      var _this$props9 = this.props,
-        children = _this$props9.children,
-        clearable = _this$props9.clearable;
-      var _this$state3 = this.state,
-        startValueText = _this$state3.startValueText,
-        endValueText = _this$state3.endValueText;
-      var isClearable = clearable && dropdownToggleText.type !== Placeholder;
-      var labelClassNames = classNames(isClearable && 'withClearButton');
-      var isRenderCallback = children && typeof children === 'function';
-
-      // Note: due to issues with nested events in Firefox (for toggle and inside the clear)
-      // the toggle element must not be a <button> but a div.
-      return /*#__PURE__*/React.createElement("div", {
-        type: 'button',
-        className: 'DateRangePickerToggle form-control dropdown-toggle text-left',
-        "aria-haspopup": 'true',
-        "aria-expanded": 'true',
-        onClick: this.toggleDropdownOpen,
-        ref: function ref(node) {
-          return _this3.refDropdownToggle = node;
-        }
-      }, isRenderCallback ? this.props.children(startValueText, endValueText) : /*#__PURE__*/React.createElement("span", {
-        className: labelClassNames
-      }, dropdownToggleText), isClearable && this.getClearButton(), /*#__PURE__*/React.createElement("span", {
-        className: 'caret'
-      }));
-    }
-  }, {
-    key: "getClearButton",
-    value: function getClearButton() {
-      return /*#__PURE__*/React.createElement("span", {
-        className: 'clearButton',
-        onClick: this.handleResetInternalState
-      }, /*#__PURE__*/React.createElement("span", {
-        className: 'clearButtonIcon rioglyph rioglyph-remove-sign'
-      }));
-    }
-  }, {
-    key: "getCustomPanelToggle",
-    value: function getCustomPanelToggle(isCustomVisible, textCustom) {
-      return /*#__PURE__*/React.createElement("li", {
-        className: classNames('custom-panel-toggle', isCustomVisible && 'hidden')
-      }, /*#__PURE__*/React.createElement("a", {
-        role: 'button',
-        onClick: this.handleCustomToggle
-      }, textCustom, " ..."));
-    }
-  }, {
-    key: "getCustomPanelButtons",
-    value: function getCustomPanelButtons(isCustomVisible, isStartValid, isEndValid, textApply, textCancel) {
-      return /*#__PURE__*/React.createElement("li", {
-        className: classNames('custom-panel-buttons', 'margin-20', !isCustomVisible && 'hidden')
-      }, /*#__PURE__*/React.createElement("div", {
-        className: 'btn-toolbar'
-      }, /*#__PURE__*/React.createElement("button", {
-        type: 'button',
-        disabled: !isStartValid || !isEndValid,
-        onClick: this.handleCustomApply,
-        className: 'btn btn-primary pull-right'
-      }, textApply), /*#__PURE__*/React.createElement("button", {
-        type: 'button',
-        onClick: this.toggleDropdownOpen,
-        className: 'btn btn-default pull-right'
-      }, textCancel)));
-    }
-
-    // eslint-disable-next-line complexity
-  }, {
-    key: "render",
-    value: function render() {
-      var _this4 = this;
-      var _this$props10 = this.props,
-        locale = _this$props10.locale,
-        textCustom = _this$props10.textCustom,
-        textApply = _this$props10.textApply,
-        textCancel = _this$props10.textCancel,
-        textFrom = _this$props10.textFrom,
-        textTo = _this$props10.textTo,
-        textToday = _this$props10.textToday,
-        textLastWeek = _this$props10.textLastWeek,
-        textLastMonth = _this$props10.textLastMonth,
-        className = _this$props10.className,
-        clearable = _this$props10.clearable,
-        dropdownClass = _this$props10.dropdownClass,
-        dropdownMenuClass = _this$props10.dropdownMenuClass,
-        customPresets = _this$props10.customPresets,
-        hasTimePicker = _this$props10.hasTimePicker;
-      var _this$state4 = this.state,
-        customRangeStartValue = _this$state4.customRangeStartValue,
-        customRangeEndValue = _this$state4.customRangeEndValue,
-        isStartValid = _this$state4.isStartValid,
-        isEndValid = _this$state4.isEndValid,
-        isCustomVisible = _this$state4.isCustomVisible,
-        isDropdownOpen = _this$state4.isDropdownOpen,
-        dropdownToggleText = _this$state4.dropdownToggleText;
-      var pullRight = this.isAutoDropActive() ? this.state.pullRight : this.props.pullRight;
-      var dropup = this.isAutoDropActive() ? this.state.dropup : this.props.dropup;
-      if (customPresets && isEqual(customPresets, defaultProps.customPresets)) {
-        // support backward compatibility to override default drop down text values
-        customPresets[0].text = textToday;
-        customPresets[1].text = textLastWeek;
-        customPresets[2].text = textLastMonth;
-      }
-      var classes = classNames('DateRangePicker', className && className);
-      var dropDownClassNames = classNames('select', 'dropdown', dropdownClass, isDropdownOpen && 'open', dropup && 'dropup');
-      return /*#__PURE__*/React.createElement("div", {
-        className: classes
-      }, /*#__PURE__*/React.createElement("div", {
-        className: dropDownClassNames
-      }, this.getDropdownToggle(dropdownToggleText, clearable), /*#__PURE__*/React.createElement("ul", {
-        className: classNames('dropdown-menu', pullRight && 'pull-right', dropdownMenuClass),
-        ref: function ref(node) {
-          return _this4.refDropdownMenu = node;
-        }
-      }, customPresets.map(function (preset, i) {
-        return /*#__PURE__*/React.createElement("li", {
-          key: "preset-".concat(i),
-          title: preset.disabled && preset.disabledText || null,
-          className: classNames(preset.disabled && 'disabled')
-        }, /*#__PURE__*/React.createElement("a", {
-          role: 'button',
-          className: classNames(isCustomVisible && 'hidden'),
-          onClick: !preset.disabled ? _this4.handleCustomPresetSelect.bind(_this4, preset) : undefined
-        }, preset.text));
-      }), /*#__PURE__*/React.createElement("li", {
-        role: 'separator',
-        className: classNames('divider', isCustomVisible && 'hidden')
-      }), this.getCustomPanelToggle(isCustomVisible, textCustom), /*#__PURE__*/React.createElement("li", {
-        className: classNames('custom-panel', !isCustomVisible && 'hidden')
-      }, /*#__PURE__*/React.createElement("div", {
-        className: 'row'
-      }, /*#__PURE__*/React.createElement("div", {
-        className: 'col-sm-6'
-      }, /*#__PURE__*/React.createElement("label", null, textFrom), /*#__PURE__*/React.createElement(DatePicker, {
-        locale: locale,
-        open: true,
-        autoDropDirection: false,
-        dateFormat: true,
-        timeFormat: hasTimePicker,
-        initialValue: customRangeStartValue,
-        onChange: this.onStartChange,
-        closeOnSelect: true,
-        isValidDate: this.getValidStartDates,
-        className: classNames('DatePicker', !isStartValid && 'has-error')
-      })), /*#__PURE__*/React.createElement("div", {
-        className: 'col-sm-6'
-      }, /*#__PURE__*/React.createElement("label", null, textTo), /*#__PURE__*/React.createElement(DatePicker, {
-        locale: locale,
-        open: true,
-        autoDropDirection: false,
-        dateFormat: true,
-        timeFormat: hasTimePicker,
-        initialValue: customRangeEndValue,
-        onChange: this.onEndChange,
-        closeOnSelect: true,
-        isValidDate: this.getValidEndDates,
-        className: classNames('DatePicker', !isEndValid && 'has-error')
-      })))), this.getCustomPanelButtons(isCustomVisible, isStartValid, isEndValid, textApply, textCancel))));
-    }
-  }]);
-  return DateRangePicker;
-}(Component);
-DateRangePicker.propTypes = propTypes;
-DateRangePicker.defaultProps = defaultProps;
-export default onClickOutside(DateRangePicker);
-export { DateRangePicker as DateRangePickerPure };
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * @fileOverview: Wrapper component for React-Datetime.
+ */
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import ReactDOM from 'react-dom';
+import DatePicker from './DatePicker';
+import onClickOutside from 'react-onclickoutside';
+import moment from 'moment';
+import classNames from 'classnames';
+import isNil from 'lodash/fp/isNil';
+import isNull from 'lodash/fp/isNull';
+import isEqual from 'lodash/fp/isEqual';
+import getDropDirection from '../../utils/getDropDirection';
+const Placeholder = ({ text }) => _jsx("span", Object.assign({ className: 'placeholder' }, { children: text }));
+/**
+ * The DateRangePicker
+ */
+const propTypes = {
+    startValue: PropTypes.object,
+    endValue: PropTypes.object,
+    defaultStartValue: PropTypes.object,
+    defaultEndValue: PropTypes.object,
+    minValue: PropTypes.object,
+    maxValue: PropTypes.object,
+    onRangeChange: PropTypes.func,
+    locale: PropTypes.string,
+    textDefault: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+    textToday: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+    textLastWeek: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+    textLastMonth: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+    textLastYear: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+    textCustom: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+    textApply: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+    textCancel: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+    textFrom: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+    textTo: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+    className: PropTypes.string,
+    dropdownClass: PropTypes.string,
+    dropdownMenuClass: PropTypes.string,
+    hasTimePicker: PropTypes.bool,
+    customRangeOnly: PropTypes.bool,
+    customPresets: PropTypes.arrayOf(PropTypes.shape({
+        startValue: PropTypes.object.isRequired,
+        endValue: PropTypes.object.isRequired,
+        text: PropTypes.string.isRequired,
+        onSelect: PropTypes.func,
+    })),
+    dropup: PropTypes.bool,
+    pullRight: PropTypes.bool,
+    autoDropDirection: PropTypes.bool,
+    clearable: PropTypes.bool,
+    onClear: PropTypes.func,
+};
+const defaultProps = {
+    defaultStartValue: moment().startOf('day'),
+    defaultEndValue: moment().endOf('day'),
+    minValue: null,
+    maxValue: null,
+    locale: 'en-GB',
+    textDefault: 'Select date range ...',
+    textToday: 'Today',
+    textLastWeek: 'Last week',
+    textLastMonth: 'Last month',
+    textCustom: 'Custom',
+    textFrom: 'From',
+    textTo: 'To',
+    textApply: 'Apply',
+    textCancel: 'Cancel',
+    dropdownClass: '',
+    dropdownMenuClass: '',
+    hasTimePicker: false,
+    customRangeOnly: false,
+    customPresets: [
+        {
+            text: 'Today',
+            startValue: moment().startOf('day'),
+            endValue: moment().endOf('day'),
+        },
+        {
+            text: 'Last week',
+            startValue: moment().subtract(1, 'weeks').startOf('isoWeek'),
+            endValue: moment().subtract(1, 'weeks').endOf('isoWeek'),
+        },
+        {
+            text: 'Last Month',
+            startValue: moment().subtract(1, 'months').startOf('month'),
+            endValue: moment().subtract(1, 'months').endOf('month'),
+        },
+    ],
+    onRangeChange: () => {
+        // function when range changes
+    },
+    autoDropDirection: true,
+    dropup: false,
+    pullRight: false,
+    clearable: false,
+    onClear: () => undefined,
+};
+const LOCAL_DATE_FORMAT = 'dd L LT';
+const LOCAL_DATE_FORMAT_NO_TIME = 'dd L';
+const DROPDOWN_WIDTH = 600;
+class DateRangePicker extends Component {
+    constructor(props) {
+        super(props);
+        const customRangeStartValue = props.startValue ? props.startValue : props.defaultStartValue;
+        const customRangeEndValue = props.endValue ? props.endValue : props.defaultEndValue;
+        this.state = {
+            internalStartValue: props.startValue,
+            internalEndValue: props.endValue,
+            isMounted: false,
+            isCustomVisible: props.customRangeOnly,
+            isDropdownOpen: false,
+            customRangeStartValue: moment(customRangeStartValue),
+            customRangeEndValue: moment(customRangeEndValue),
+            isStartValid: true,
+            isEndValid: true,
+            dropdownToggleText: _jsx(Placeholder, { text: props.textDefault }),
+            dropup: props.dropup,
+            pullRight: props.pullRight,
+        };
+        this.toggleDropdownOpen = this.toggleDropdownOpen.bind(this);
+        this.handleCustomToggle = this.handleCustomToggle.bind(this);
+        this.handleCustomApply = this.handleCustomApply.bind(this);
+        this.onStartChange = this.onStartChange.bind(this);
+        this.getValidStartDates = this.getValidStartDates.bind(this);
+        this.onEndChange = this.onEndChange.bind(this);
+        this.getValidEndDates = this.getValidEndDates.bind(this);
+        this.handleResetInternalState = this.handleResetInternalState.bind(this);
+    }
+    componentDidMount() {
+        const { startValue, endValue, locale } = this.props;
+        if (!this.state.isMounted) {
+            this.setState({
+                isMounted: true,
+            });
+        }
+        // initial mount value
+        if (startValue && endValue) {
+            this.update(startValue, endValue, locale);
+        }
+    }
+    /**
+     * Responsible for handling start/end values given from outside (controlled component context).
+     * @param {object} nextProps - The next props.
+     * @returns {undefined}
+     */
+    // eslint-disable-next-line camelcase
+    UNSAFE_componentWillReceiveProps(nextProps) {
+        const { startValue, endValue, textDefault, customRangeOnly, locale, defaultStartValue, defaultEndValue } = nextProps;
+        const { internalStartValue, internalEndValue } = this.state;
+        // handle reset:
+        // reset condition 1 is for uncontrolled components,
+        // making sure that when a time is selected, and then the locale changed, that the selection remains
+        const resetCondition1 = isNil(startValue) && isNil(endValue) && isNil(internalStartValue) && isNil(internalEndValue);
+        // reset condition 2 is for controlled components,
+        // when a time is set / defined, and the controlling component wants a hard reset
+        const resetCondition2 = isNull(startValue) && isNull(endValue);
+        // reset to original state
+        if (resetCondition1 || resetCondition2) {
+            this.setState({
+                internalStartValue: undefined,
+                internalEndValue: undefined,
+                customRangeStartValue: defaultStartValue,
+                customRangeEndValue: defaultEndValue,
+                dropdownToggleText: _jsx(Placeholder, { text: textDefault }),
+                isCustomVisible: customRangeOnly,
+                isDropdownOpen: false,
+                isStartValid: true,
+                isEndValid: true,
+                pullRight: nextProps.pullRight,
+                dropup: nextProps.dropup,
+            });
+        }
+        else if (startValue !== this.props.startValue || endValue !== this.props.endValue) {
+            this.update(startValue, endValue, locale);
+        }
+        else {
+            this.update(internalStartValue, internalEndValue, locale);
+        }
+    }
+    /**
+     * Converts start/end values to moments, makes them readable,
+     * crafts a dropdownToggleText and updates state.
+     * @param {object} startValue - the start date (date or moment).
+     * @param {object} endValue - the start date (date or moment).
+     * @param {object} locale - the locale to use.
+     * @param {object} extras - additional state, which needs to update.
+     * @param {object} callback - callback to be called, after state has changed.
+     * @returns {undefined}
+     */
+    update(startValue, endValue, locale, extras, callback) {
+        const { hasTimePicker } = this.props;
+        const format = hasTimePicker ? LOCAL_DATE_FORMAT : LOCAL_DATE_FORMAT_NO_TIME;
+        // necessary to set start to startOf / end day to endOf, when selecting "without time"
+        const finalStartValue = hasTimePicker ? moment(startValue) : moment(startValue).startOf('day');
+        const finalEndValue = hasTimePicker ? moment(endValue) : moment(endValue).endOf('day');
+        // composition of dropdownToggleText
+        const startValueText = `${finalStartValue.locale(locale).format(format)}`;
+        const endValueText = `${finalEndValue.locale(locale).format(format)}`;
+        const dropdownToggleText = startValueText === endValueText ? startValueText : `${startValueText} → ${endValueText}`;
+        // set state, and call callback
+        this.setState(Object.assign({ internalStartValue: finalStartValue, internalEndValue: finalEndValue, customRangeStartValue: finalStartValue, customRangeEndValue: finalEndValue, dropdownToggleText,
+            startValueText,
+            endValueText, isStartValid: true, isEndValid: !finalEndValue.isBefore(finalStartValue) }, extras), () => {
+            callback && callback(finalStartValue, finalEndValue);
+        });
+    }
+    handleResetInternalState(event) {
+        if (event) {
+            event.preventDefault();
+            event.stopPropagation();
+        }
+        const { textDefault, customRangeOnly, defaultStartValue, defaultEndValue, pullRight, dropup, onClear } = this.props;
+        this.setState({
+            internalStartValue: undefined,
+            internalEndValue: undefined,
+            customRangeStartValue: defaultStartValue,
+            customRangeEndValue: defaultEndValue,
+            dropdownToggleText: _jsx(Placeholder, { text: textDefault }),
+            isCustomVisible: customRangeOnly,
+            isDropdownOpen: false,
+            isStartValid: true,
+            isEndValid: true,
+            startValueText: null,
+            endValueText: null,
+            pullRight: pullRight,
+            dropup: dropup,
+        });
+        onClear();
+    }
+    /**
+     * Gets called by wrapper component "onClickOutside".
+     * Responsible for closing the dropdown when a click occured outside.
+     * @returns {undefined}
+     */
+    handleClickOutside() {
+        if (this.state.isMounted) {
+            this.setState({
+                isDropdownOpen: false,
+            });
+        }
+    }
+    /**
+     * Toggles dropdown open status and visibility of custom range area.
+     * @param {object} event - mouse event on toggle dropdown
+     * @returns {undefined}
+     */
+    toggleDropdownOpen(event) {
+        const toggleNode = ReactDOM.findDOMNode(this.refDropdownToggle);
+        const menuNode = ReactDOM.findDOMNode(this.refDropdownMenu);
+        const dropDirection = this.isAutoDropActive() && !this.state.isDropdownOpen ? getDropDirection(toggleNode, menuNode) : {};
+        const left = event.currentTarget.getBoundingClientRect().left;
+        this.setState(prevState => (Object.assign(Object.assign({ isDropdownOpen: !prevState.isDropdownOpen, isCustomVisible: this.props.customRangeOnly }, dropDirection), { pullRight: left + DROPDOWN_WIDTH > document.body.clientWidth })));
+    }
+    isAutoDropActive() {
+        return !(!this.props.autoDropDirection || this.props.dropup || this.props.pullRight);
+    }
+    /**
+     * Only gets called on manual change of datePicker (user interaction).
+     * Has influence the validity of the end date.
+     *
+     * Important to note that the start date is not limited,
+     * whereas the end date is limited by the start date (see 'getValidEndDates').
+     *
+     * @param {object} startValue - the start date (date or moment).
+     * @param {object} isValidDate - if the date is valid or not.
+     * @returns {undefined}
+     */
+    onStartChange(startValue, isValidDate) {
+        const newState = { isStartValid: false };
+        const { hasTimePicker, minValue, maxValue } = this.props;
+        const { customRangeEndValue } = this.state;
+        if (moment.isMoment(startValue)) {
+            // necessary to set start to startOf / end day to endOf, when selecting "without time"
+            const finalStartValue = hasTimePicker ? startValue : moment(startValue).startOf('day');
+            // check validity of input (min/max)
+            const passesMin = minValue ? finalStartValue.isSameOrAfter(moment(minValue)) : true;
+            const passesMax = maxValue ? finalStartValue.isSameOrBefore(moment(maxValue)) : true;
+            const isValidInput = isValidDate && passesMin && passesMax;
+            newState.isStartValid = isValidInput;
+            if (isValidDate) {
+                newState.customRangeStartValue = finalStartValue;
+                newState.isEndValid = !customRangeEndValue.isBefore(finalStartValue);
+            }
+        }
+        this.setState(newState);
+    }
+    /**
+     * Only gets called on manual change of datePicker (user interaction)
+     * @param {object} endValue - the start date (date or moment).
+     * @param {object} isValidDate - if the date is valid or not.
+     * @returns {undefined}
+     */
+    onEndChange(endValue, isValidDate) {
+        const newState = { isEndValid: false };
+        const { hasTimePicker, minValue, maxValue } = this.props;
+        const { customRangeStartValue } = this.state;
+        // let isValidInput = false;
+        if (moment.isMoment(endValue)) {
+            // necessary to set end of seconds and milliseconds for every end value
+            const correctedEndValue = isValidDate ? endValue.endOf('minute') : endValue;
+            // necessary to set start to startOf / end day to endOf, when selecting "without time"
+            const finalEndValue = hasTimePicker ? correctedEndValue : moment(endValue).endOf('day');
+            // check validity of input (min/max)
+            const passesMin = minValue ? finalEndValue.isSameOrAfter(moment(minValue)) : true;
+            const passesMax = maxValue ? finalEndValue.isSameOrBefore(moment(maxValue)) : true;
+            const isValidInput = isValidDate && passesMin && passesMax && finalEndValue.isAfter(customRangeStartValue);
+            newState.isEndValid = isValidInput;
+            if (isValidDate) {
+                newState.customRangeEndValue = finalEndValue;
+            }
+        }
+        this.setState(newState);
+    }
+    /**
+     * Callback method for DatePicker to limit selection in DatePicker.
+     * @param {object} current - Current date in the loop.
+     * @returns {undefined}
+     */
+    getValidStartDates(current) {
+        const { minValue, maxValue } = this.props;
+        const customRangeEndValue = moment(this.state.customRangeEndValue);
+        if (current.isSame(customRangeEndValue, 'day')) {
+            return true;
+        }
+        const passesMin = minValue ? current.isSameOrAfter(moment(minValue)) : true;
+        const passesMax = maxValue ? current.isSameOrBefore(moment(maxValue)) : true;
+        return passesMin && passesMax;
+    }
+    /**
+     * Callback method for DatePicker to limit selection in DatePicker.
+     * End date has to be after start date.
+     * @param {object} current - Current date in the loop.
+     * @returns {undefined}
+     */
+    getValidEndDates(current) {
+        const { minValue, maxValue } = this.props;
+        const customRangeStartValue = moment(this.state.customRangeStartValue);
+        if (current.isSame(customRangeStartValue, 'day')) {
+            return true;
+        }
+        const passesMin = minValue ? current.isSameOrAfter(moment(minValue)) : true;
+        const passesMax = maxValue ? current.isSameOrBefore(moment(maxValue)) : true;
+        const isAfterStart = current.isAfter(customRangeStartValue);
+        return passesMin && passesMax && isAfterStart;
+    }
+    /**
+     * Gets called when "custom ..." has been selected.
+     * @returns {undefined}
+     */
+    handleCustomToggle() {
+        this.setState(prevState => {
+            return {
+                isCustomVisible: !prevState.isCustomVisible,
+            };
+        });
+    }
+    handleCustomPresetSelect(preset) {
+        if (typeof preset.onSelect === 'function') {
+            preset.onSelect();
+        }
+        this.handleSelect(preset.startValue, preset.endValue);
+    }
+    /**
+     * Gets called when a preset has been selected.
+     * @param {object} startValue - the start date (date or moment).
+     * @param {object} endValue - the start date (date or moment).
+     * @returns {undefined}
+     */
+    handleSelect(startValue, endValue) {
+        const { onRangeChange, locale } = this.props;
+        const extras = { isDropdownOpen: false };
+        this.update(startValue, endValue, locale, extras, onRangeChange);
+    }
+    /**
+     * Gets called user clicks the apply button.
+     * @returns {undefined}
+     */
+    handleCustomApply() {
+        const { customRangeStartValue, customRangeEndValue, isStartValid, isEndValid } = this.state;
+        const { onRangeChange, locale } = this.props;
+        if (isStartValid && isEndValid) {
+            const extras = { isDropdownOpen: false };
+            this.update(customRangeStartValue, customRangeEndValue, locale, extras, onRangeChange);
+        }
+    }
+    getDropdownToggle(dropdownToggleText) {
+        const { children, clearable } = this.props;
+        const { startValueText, endValueText } = this.state;
+        const isClearable = clearable && dropdownToggleText.type !== Placeholder;
+        const labelClassNames = classNames(isClearable && 'withClearButton');
+        const isRenderCallback = children && typeof children === 'function';
+        // Note: due to issues with nested events in Firefox (for toggle and inside the clear)
+        // the toggle element must not be a <button> but a div.
+        return (_jsxs("div", Object.assign({ type: 'button', className: 'DateRangePickerToggle form-control dropdown-toggle text-left', "aria-haspopup": 'true', "aria-expanded": 'true', onClick: this.toggleDropdownOpen, ref: node => (this.refDropdownToggle = node) }, { children: [isRenderCallback ? (this.props.children(startValueText, endValueText)) : (_jsx("span", Object.assign({ className: labelClassNames }, { children: dropdownToggleText }))), isClearable && this.getClearButton(), _jsx("span", { className: 'caret' })] })));
+    }
+    getClearButton() {
+        return (_jsx("span", Object.assign({ className: 'clearButton', onClick: this.handleResetInternalState }, { children: _jsx("span", { className: 'clearButtonIcon rioglyph rioglyph-remove-sign' }) })));
+    }
+    getCustomPanelToggle(isCustomVisible, textCustom) {
+        return (_jsx("li", Object.assign({ className: classNames('custom-panel-toggle', isCustomVisible && 'hidden') }, { children: _jsxs("a", Object.assign({ role: 'button', onClick: this.handleCustomToggle }, { children: [textCustom, " ..."] })) })));
+    }
+    getCustomPanelButtons(isCustomVisible, isStartValid, isEndValid, textApply, textCancel) {
+        return (_jsx("li", Object.assign({ className: classNames('custom-panel-buttons', 'margin-20', !isCustomVisible && 'hidden') }, { children: _jsxs("div", Object.assign({ className: 'btn-toolbar' }, { children: [_jsx("button", Object.assign({ type: 'button', disabled: !isStartValid || !isEndValid, onClick: this.handleCustomApply, className: 'btn btn-primary pull-right' }, { children: textApply })), _jsx("button", Object.assign({ type: 'button', onClick: this.toggleDropdownOpen, className: 'btn btn-default pull-right' }, { children: textCancel }))] })) })));
+    }
+    // eslint-disable-next-line complexity
+    render() {
+        const { locale, textCustom, textApply, textCancel, textFrom, textTo, textToday, textLastWeek, textLastMonth, className, clearable, dropdownClass, dropdownMenuClass, customPresets, hasTimePicker, } = this.props;
+        const { customRangeStartValue, customRangeEndValue, isStartValid, isEndValid, isCustomVisible, isDropdownOpen, dropdownToggleText, } = this.state;
+        const pullRight = this.isAutoDropActive() ? this.state.pullRight : this.props.pullRight;
+        const dropup = this.isAutoDropActive() ? this.state.dropup : this.props.dropup;
+        if (customPresets && isEqual(customPresets, defaultProps.customPresets)) {
+            // support backward compatibility to override default drop down text values
+            customPresets[0].text = textToday;
+            customPresets[1].text = textLastWeek;
+            customPresets[2].text = textLastMonth;
+        }
+        const classes = classNames('DateRangePicker', className && className);
+        const dropDownClassNames = classNames('select', 'dropdown', dropdownClass, isDropdownOpen && 'open', dropup && 'dropup');
+        return (_jsx("div", Object.assign({ className: classes }, { children: _jsxs("div", Object.assign({ className: dropDownClassNames }, { children: [this.getDropdownToggle(dropdownToggleText, clearable), _jsxs("ul", Object.assign({ className: classNames('dropdown-menu', pullRight && 'pull-right', dropdownMenuClass), ref: node => (this.refDropdownMenu = node) }, { children: [customPresets.map((preset, i) => {
+                                return (_jsx("li", Object.assign({ title: (preset.disabled && preset.disabledText) || null, className: classNames(preset.disabled && 'disabled') }, { children: _jsx("a", Object.assign({ role: 'button', className: classNames(isCustomVisible && 'hidden'), onClick: !preset.disabled
+                                            ? this.handleCustomPresetSelect.bind(this, preset)
+                                            : undefined }, { children: preset.text })) }), `preset-${i}`));
+                            }), _jsx("li", { role: 'separator', className: classNames('divider', isCustomVisible && 'hidden') }), this.getCustomPanelToggle(isCustomVisible, textCustom), _jsx("li", Object.assign({ className: classNames('custom-panel', !isCustomVisible && 'hidden') }, { children: _jsxs("div", Object.assign({ className: 'row' }, { children: [_jsxs("div", Object.assign({ className: 'col-sm-6' }, { children: [_jsx("label", { children: textFrom }), _jsx(DatePicker, { locale: locale, open: true, autoDropDirection: false, dateFormat: true, timeFormat: hasTimePicker, initialValue: customRangeStartValue, onChange: this.onStartChange, closeOnSelect: true, isValidDate: this.getValidStartDates, className: classNames('DatePicker', !isStartValid && 'has-error') })] })), _jsxs("div", Object.assign({ className: 'col-sm-6' }, { children: [_jsx("label", { children: textTo }), _jsx(DatePicker, { locale: locale, open: true, autoDropDirection: false, dateFormat: true, timeFormat: hasTimePicker, initialValue: customRangeEndValue, onChange: this.onEndChange, closeOnSelect: true, isValidDate: this.getValidEndDates, className: classNames('DatePicker', !isEndValid && 'has-error') })] }))] })) })), this.getCustomPanelButtons(isCustomVisible, isStartValid, isEndValid, textApply, textCancel)] }))] })) })));
+    }
+}
+DateRangePicker.propTypes = propTypes;
+DateRangePicker.defaultProps = defaultProps;
+export default onClickOutside(DateRangePicker);
+export { DateRangePicker as DateRangePickerPure };