@rio-cloud/rio-uikit 0.16.4-beta.1 → 0.16.4-beta.2

package/lib/es/components/datepicker/DateRangePicker.js

@@ -1,239 +1,189 @@
 "use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-var _typeof = require("@babel/runtime/helpers/typeof");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = exports.DateRangePickerPure = void 0;
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-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 _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
-var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
-var _react = _interopRequireWildcard(require("react"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _reactDom = _interopRequireDefault(require("react-dom"));
-var _DatePicker = _interopRequireDefault(require("./DatePicker"));
-var _reactOnclickoutside = _interopRequireDefault(require("react-onclickoutside"));
-var _moment = _interopRequireDefault(require("moment"));
-var _classnames = _interopRequireDefault(require("classnames"));
-var _isNil = _interopRequireDefault(require("lodash/fp/isNil"));
-var _isNull = _interopRequireDefault(require("lodash/fp/isNull"));
-var _isEqual = _interopRequireDefault(require("lodash/fp/isEqual"));
-var _getDropDirection = _interopRequireDefault(require("../../utils/getDropDirection"));
-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 || _typeof(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 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) { (0, _defineProperty2["default"])(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 = (0, _getPrototypeOf2["default"])(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2["default"])(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2["default"])(this, result); }; }
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } } /**
-                                                                                                                                                                                                                                                                                                                                           * @fileOverview: Wrapper component for React-Datetime.
-                                                                                                                                                                                                                                                                                                                                           */
-var Placeholder = function Placeholder(_ref) {
-  var text = _ref.text;
-  return /*#__PURE__*/_react["default"].createElement("span", {
-    className: 'placeholder'
-  }, text);
-};
-
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DateRangePickerPure = void 0;
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+/**
+ * @fileOverview: Wrapper component for React-Datetime.
+ */
+const react_1 = tslib_1.__importStar(require("react"));
+const prop_types_1 = tslib_1.__importDefault(require("prop-types"));
+const react_dom_1 = tslib_1.__importDefault(require("react-dom"));
+const DatePicker_1 = tslib_1.__importDefault(require("./DatePicker"));
+const react_onclickoutside_1 = tslib_1.__importDefault(require("react-onclickoutside"));
+const moment_1 = tslib_1.__importDefault(require("moment"));
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const isNil_1 = tslib_1.__importDefault(require("lodash/fp/isNil"));
+const isNull_1 = tslib_1.__importDefault(require("lodash/fp/isNull"));
+const isEqual_1 = tslib_1.__importDefault(require("lodash/fp/isEqual"));
+const getDropDirection_1 = tslib_1.__importDefault(require("../../utils/getDropDirection"));
+const Placeholder = ({ text }) => (0, jsx_runtime_1.jsx)("span", Object.assign({ className: 'placeholder' }, { children: text }));
 /**
  * The DateRangePicker
  */
-
-var propTypes = {
-  startValue: _propTypes["default"].object,
-  endValue: _propTypes["default"].object,
-  defaultStartValue: _propTypes["default"].object,
-  defaultEndValue: _propTypes["default"].object,
-  minValue: _propTypes["default"].object,
-  maxValue: _propTypes["default"].object,
-  onRangeChange: _propTypes["default"].func,
-  locale: _propTypes["default"].string,
-  textDefault: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].node]),
-  textToday: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].node]),
-  textLastWeek: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].node]),
-  textLastMonth: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].node]),
-  textLastYear: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].node]),
-  textCustom: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].node]),
-  textApply: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].node]),
-  textCancel: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].node]),
-  textFrom: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].node]),
-  textTo: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].node]),
-  className: _propTypes["default"].string,
-  dropdownClass: _propTypes["default"].string,
-  dropdownMenuClass: _propTypes["default"].string,
-  hasTimePicker: _propTypes["default"].bool,
-  customRangeOnly: _propTypes["default"].bool,
-  customPresets: _propTypes["default"].arrayOf(_propTypes["default"].shape({
-    startValue: _propTypes["default"].object.isRequired,
-    endValue: _propTypes["default"].object.isRequired,
-    text: _propTypes["default"].string.isRequired,
-    onSelect: _propTypes["default"].func
-  })),
-  dropup: _propTypes["default"].bool,
-  pullRight: _propTypes["default"].bool,
-  autoDropDirection: _propTypes["default"].bool,
-  clearable: _propTypes["default"].bool,
-  onClear: _propTypes["default"].func
+const propTypes = {
+    startValue: prop_types_1.default.object,
+    endValue: prop_types_1.default.object,
+    defaultStartValue: prop_types_1.default.object,
+    defaultEndValue: prop_types_1.default.object,
+    minValue: prop_types_1.default.object,
+    maxValue: prop_types_1.default.object,
+    onRangeChange: prop_types_1.default.func,
+    locale: prop_types_1.default.string,
+    textDefault: prop_types_1.default.oneOfType([prop_types_1.default.string, prop_types_1.default.node]),
+    textToday: prop_types_1.default.oneOfType([prop_types_1.default.string, prop_types_1.default.node]),
+    textLastWeek: prop_types_1.default.oneOfType([prop_types_1.default.string, prop_types_1.default.node]),
+    textLastMonth: prop_types_1.default.oneOfType([prop_types_1.default.string, prop_types_1.default.node]),
+    textLastYear: prop_types_1.default.oneOfType([prop_types_1.default.string, prop_types_1.default.node]),
+    textCustom: prop_types_1.default.oneOfType([prop_types_1.default.string, prop_types_1.default.node]),
+    textApply: prop_types_1.default.oneOfType([prop_types_1.default.string, prop_types_1.default.node]),
+    textCancel: prop_types_1.default.oneOfType([prop_types_1.default.string, prop_types_1.default.node]),
+    textFrom: prop_types_1.default.oneOfType([prop_types_1.default.string, prop_types_1.default.node]),
+    textTo: prop_types_1.default.oneOfType([prop_types_1.default.string, prop_types_1.default.node]),
+    className: prop_types_1.default.string,
+    dropdownClass: prop_types_1.default.string,
+    dropdownMenuClass: prop_types_1.default.string,
+    hasTimePicker: prop_types_1.default.bool,
+    customRangeOnly: prop_types_1.default.bool,
+    customPresets: prop_types_1.default.arrayOf(prop_types_1.default.shape({
+        startValue: prop_types_1.default.object.isRequired,
+        endValue: prop_types_1.default.object.isRequired,
+        text: prop_types_1.default.string.isRequired,
+        onSelect: prop_types_1.default.func,
+    })),
+    dropup: prop_types_1.default.bool,
+    pullRight: prop_types_1.default.bool,
+    autoDropDirection: prop_types_1.default.bool,
+    clearable: prop_types_1.default.bool,
+    onClear: prop_types_1.default.func,
 };
-var defaultProps = {
-  defaultStartValue: (0, _moment["default"])().startOf('day'),
-  defaultEndValue: (0, _moment["default"])().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: (0, _moment["default"])().startOf('day'),
-    endValue: (0, _moment["default"])().endOf('day')
-  }, {
-    text: 'Last week',
-    startValue: (0, _moment["default"])().subtract(1, 'weeks').startOf('isoWeek'),
-    endValue: (0, _moment["default"])().subtract(1, 'weeks').endOf('isoWeek')
-  }, {
-    text: 'Last Month',
-    startValue: (0, _moment["default"])().subtract(1, 'months').startOf('month'),
-    endValue: (0, _moment["default"])().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;
-  }
+const defaultProps = {
+    defaultStartValue: (0, moment_1.default)().startOf('day'),
+    defaultEndValue: (0, moment_1.default)().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: (0, moment_1.default)().startOf('day'),
+            endValue: (0, moment_1.default)().endOf('day'),
+        },
+        {
+            text: 'Last week',
+            startValue: (0, moment_1.default)().subtract(1, 'weeks').startOf('isoWeek'),
+            endValue: (0, moment_1.default)().subtract(1, 'weeks').endOf('isoWeek'),
+        },
+        {
+            text: 'Last Month',
+            startValue: (0, moment_1.default)().subtract(1, 'months').startOf('month'),
+            endValue: (0, moment_1.default)().subtract(1, 'months').endOf('month'),
+        },
+    ],
+    onRangeChange: () => {
+        // function when range changes
+    },
+    autoDropDirection: true,
+    dropup: false,
+    pullRight: false,
+    clearable: false,
+    onClear: () => 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) {
-  (0, _inherits2["default"])(DateRangePicker, _Component);
-  var _super = _createSuper(DateRangePicker);
-  function DateRangePicker(props) {
-    var _this;
-    (0, _classCallCheck2["default"])(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: (0, _moment["default"])(customRangeStartValue),
-      // default value for individual datepickers
-      customRangeEndValue: (0, _moment["default"])(customRangeEndValue),
-      // default value for individual datepickers
-      isStartValid: true,
-      isEndValid: true,
-      dropdownToggleText: /*#__PURE__*/_react["default"].createElement(Placeholder, {
-        text: props.textDefault
-      }),
-      dropup: props.dropup,
-      pullRight: props.pullRight
-    };
-    _this.toggleDropdownOpen = _this.toggleDropdownOpen.bind((0, _assertThisInitialized2["default"])(_this));
-    _this.handleCustomToggle = _this.handleCustomToggle.bind((0, _assertThisInitialized2["default"])(_this));
-    _this.handleCustomApply = _this.handleCustomApply.bind((0, _assertThisInitialized2["default"])(_this));
-    _this.onStartChange = _this.onStartChange.bind((0, _assertThisInitialized2["default"])(_this));
-    _this.getValidStartDates = _this.getValidStartDates.bind((0, _assertThisInitialized2["default"])(_this));
-    _this.onEndChange = _this.onEndChange.bind((0, _assertThisInitialized2["default"])(_this));
-    _this.getValidEndDates = _this.getValidEndDates.bind((0, _assertThisInitialized2["default"])(_this));
-    _this.handleResetInternalState = _this.handleResetInternalState.bind((0, _assertThisInitialized2["default"])(_this));
-    return _this;
-  }
-  (0, _createClass2["default"])(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);
-      }
+const LOCAL_DATE_FORMAT = 'dd L LT';
+const LOCAL_DATE_FORMAT_NO_TIME = 'dd L';
+const DROPDOWN_WIDTH = 600;
+class DateRangePicker extends react_1.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: (0, moment_1.default)(customRangeStartValue),
+            customRangeEndValue: (0, moment_1.default)(customRangeEndValue),
+            isStartValid: true,
+            isEndValid: true,
+            dropdownToggleText: (0, jsx_runtime_1.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
-  }, {
-    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 = (0, _isNil["default"])(startValue) && (0, _isNil["default"])(endValue) && (0, _isNil["default"])(internalStartValue) && (0, _isNil["default"])(internalEndValue);
-
-      // reset condition 2 is for controlled components,
-      // when a time is set / defined, and the controlling component wants a hard reset
-      var resetCondition2 = (0, _isNull["default"])(startValue) && (0, _isNull["default"])(endValue);
-
-      // reset to original state
-      if (resetCondition1 || resetCondition2) {
-        this.setState({
-          internalStartValue: undefined,
-          internalEndValue: undefined,
-          customRangeStartValue: defaultStartValue,
-          customRangeEndValue: defaultEndValue,
-          dropdownToggleText: /*#__PURE__*/_react["default"].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);
-      }
+    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 = (0, isNil_1.default)(startValue) && (0, isNil_1.default)(endValue) && (0, isNil_1.default)(internalStartValue) && (0, isNil_1.default)(internalEndValue);
+        // reset condition 2 is for controlled components,
+        // when a time is set / defined, and the controlling component wants a hard reset
+        const resetCondition2 = (0, isNull_1.default)(startValue) && (0, isNull_1.default)(endValue);
+        // reset to original state
+        if (resetCondition1 || resetCondition2) {
+            this.setState({
+                internalStartValue: undefined,
+                internalEndValue: undefined,
+                customRangeStartValue: defaultStartValue,
+                customRangeEndValue: defaultEndValue,
+                dropdownToggleText: (0, jsx_runtime_1.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.
@@ -244,114 +194,73 @@ var DateRangePicker = /*#__PURE__*/function (_Component) {
      * @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 ? (0, _moment["default"])(startValue) : (0, _moment["default"])(startValue).startOf('day');
-      var finalEndValue = hasTimePicker ? (0, _moment["default"])(endValue) : (0, _moment["default"])(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);
-      });
+    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 ? (0, moment_1.default)(startValue) : (0, moment_1.default)(startValue).startOf('day');
+        const finalEndValue = hasTimePicker ? (0, moment_1.default)(endValue) : (0, moment_1.default)(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);
+        });
     }
-  }, {
-    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["default"].createElement(Placeholder, {
-          text: textDefault
-        }),
-        isCustomVisible: customRangeOnly,
-        isDropdownOpen: false,
-        isStartValid: true,
-        isEndValid: true,
-        startValueText: null,
-        endValueText: null,
-        pullRight: pullRight,
-        dropup: dropup
-      });
-      onClear();
+    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: (0, jsx_runtime_1.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}
      */
-  }, {
-    key: "handleClickOutside",
-    value: function handleClickOutside() {
-      if (this.state.isMounted) {
-        this.setState({
-          isDropdownOpen: false
-        });
-      }
+    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["default"].findDOMNode(this.refDropdownToggle);
-      var menuNode = _reactDom["default"].findDOMNode(this.refDropdownMenu);
-      var dropDirection = this.isAutoDropActive() && !this.state.isDropdownOpen ? (0, _getDropDirection["default"])(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
-        });
-      });
+    toggleDropdownOpen(event) {
+        const toggleNode = react_dom_1.default.findDOMNode(this.refDropdownToggle);
+        const menuNode = react_dom_1.default.findDOMNode(this.refDropdownMenu);
+        const dropDirection = this.isAutoDropActive() && !this.state.isDropdownOpen ? (0, getDropDirection_1.default)(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 })));
     }
-  }, {
-    key: "isAutoDropActive",
-    value: function isAutoDropActive() {
-      return !(!this.props.autoDropDirection || this.props.dropup || this.props.pullRight);
+    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.
@@ -363,344 +272,165 @@ var DateRangePicker = /*#__PURE__*/function (_Component) {
      * @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["default"].isMoment(startValue)) {
-        // necessary to set start to startOf / end day to endOf, when selecting "without time"
-        var finalStartValue = hasTimePicker ? startValue : (0, _moment["default"])(startValue).startOf('day');
-
-        // check validity of input (min/max)
-        var passesMin = minValue ? finalStartValue.isSameOrAfter((0, _moment["default"])(minValue)) : true;
-        var passesMax = maxValue ? finalStartValue.isSameOrBefore((0, _moment["default"])(maxValue)) : true;
-        var isValidInput = isValidDate && passesMin && passesMax;
-        newState.isStartValid = isValidInput;
-        if (isValidDate) {
-          newState.customRangeStartValue = finalStartValue;
-          newState.isEndValid = !customRangeEndValue.isBefore(finalStartValue);
+    onStartChange(startValue, isValidDate) {
+        const newState = { isStartValid: false };
+        const { hasTimePicker, minValue, maxValue } = this.props;
+        const { customRangeEndValue } = this.state;
+        if (moment_1.default.isMoment(startValue)) {
+            // necessary to set start to startOf / end day to endOf, when selecting "without time"
+            const finalStartValue = hasTimePicker ? startValue : (0, moment_1.default)(startValue).startOf('day');
+            // check validity of input (min/max)
+            const passesMin = minValue ? finalStartValue.isSameOrAfter((0, moment_1.default)(minValue)) : true;
+            const passesMax = maxValue ? finalStartValue.isSameOrBefore((0, moment_1.default)(maxValue)) : true;
+            const isValidInput = isValidDate && passesMin && passesMax;
+            newState.isStartValid = isValidInput;
+            if (isValidDate) {
+                newState.customRangeStartValue = finalStartValue;
+                newState.isEndValid = !customRangeEndValue.isBefore(finalStartValue);
+            }
         }
-      }
-      this.setState(newState);
+        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["default"].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 : (0, _moment["default"])(endValue).endOf('day');
-
-        // check validity of input (min/max)
-        var passesMin = minValue ? finalEndValue.isSameOrAfter((0, _moment["default"])(minValue)) : true;
-        var passesMax = maxValue ? finalEndValue.isSameOrBefore((0, _moment["default"])(maxValue)) : true;
-        var isValidInput = isValidDate && passesMin && passesMax && finalEndValue.isAfter(customRangeStartValue);
-        newState.isEndValid = isValidInput;
-        if (isValidDate) {
-          newState.customRangeEndValue = finalEndValue;
+    onEndChange(endValue, isValidDate) {
+        const newState = { isEndValid: false };
+        const { hasTimePicker, minValue, maxValue } = this.props;
+        const { customRangeStartValue } = this.state;
+        // let isValidInput = false;
+        if (moment_1.default.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 : (0, moment_1.default)(endValue).endOf('day');
+            // check validity of input (min/max)
+            const passesMin = minValue ? finalEndValue.isSameOrAfter((0, moment_1.default)(minValue)) : true;
+            const passesMax = maxValue ? finalEndValue.isSameOrBefore((0, moment_1.default)(maxValue)) : true;
+            const isValidInput = isValidDate && passesMin && passesMax && finalEndValue.isAfter(customRangeStartValue);
+            newState.isEndValid = isValidInput;
+            if (isValidDate) {
+                newState.customRangeEndValue = finalEndValue;
+            }
         }
-      }
-      this.setState(newState);
+        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 = (0, _moment["default"])(this.state.customRangeEndValue);
-      if (current.isSame(customRangeEndValue, 'day')) {
-        return true;
-      }
-      var passesMin = minValue ? current.isSameOrAfter((0, _moment["default"])(minValue)) : true;
-      var passesMax = maxValue ? current.isSameOrBefore((0, _moment["default"])(maxValue)) : true;
-      return passesMin && passesMax;
+    getValidStartDates(current) {
+        const { minValue, maxValue } = this.props;
+        const customRangeEndValue = (0, moment_1.default)(this.state.customRangeEndValue);
+        if (current.isSame(customRangeEndValue, 'day')) {
+            return true;
+        }
+        const passesMin = minValue ? current.isSameOrAfter((0, moment_1.default)(minValue)) : true;
+        const passesMax = maxValue ? current.isSameOrBefore((0, moment_1.default)(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 = (0, _moment["default"])(this.state.customRangeStartValue);
-      if (current.isSame(customRangeStartValue, 'day')) {
-        return true;
-      }
-      var passesMin = minValue ? current.isSameOrAfter((0, _moment["default"])(minValue)) : true;
-      var passesMax = maxValue ? current.isSameOrBefore((0, _moment["default"])(maxValue)) : true;
-      var isAfterStart = current.isAfter(customRangeStartValue);
-      return passesMin && passesMax && isAfterStart;
+    getValidEndDates(current) {
+        const { minValue, maxValue } = this.props;
+        const customRangeStartValue = (0, moment_1.default)(this.state.customRangeStartValue);
+        if (current.isSame(customRangeStartValue, 'day')) {
+            return true;
+        }
+        const passesMin = minValue ? current.isSameOrAfter((0, moment_1.default)(minValue)) : true;
+        const passesMax = maxValue ? current.isSameOrBefore((0, moment_1.default)(maxValue)) : true;
+        const 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
-        };
-      });
+    handleCustomToggle() {
+        this.setState(prevState => {
+            return {
+                isCustomVisible: !prevState.isCustomVisible,
+            };
+        });
     }
-  }, {
-    key: "handleCustomPresetSelect",
-    value: function handleCustomPresetSelect(preset) {
-      if (typeof preset.onSelect === 'function') {
-        preset.onSelect();
-      }
-      this.handleSelect(preset.startValue, preset.endValue);
+    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);
+    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}
      */
-  }, {
-    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 = (0, _classnames["default"])(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["default"].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;
+    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);
         }
-      }, isRenderCallback ? this.props.children(startValueText, endValueText) : /*#__PURE__*/_react["default"].createElement("span", {
-        className: labelClassNames
-      }, dropdownToggleText), isClearable && this.getClearButton(), /*#__PURE__*/_react["default"].createElement("span", {
-        className: 'caret'
-      }));
     }
-  }, {
-    key: "getClearButton",
-    value: function getClearButton() {
-      return /*#__PURE__*/_react["default"].createElement("span", {
-        className: 'clearButton',
-        onClick: this.handleResetInternalState
-      }, /*#__PURE__*/_react["default"].createElement("span", {
-        className: 'clearButtonIcon rioglyph rioglyph-remove-sign'
-      }));
+    getDropdownToggle(dropdownToggleText) {
+        const { children, clearable } = this.props;
+        const { startValueText, endValueText } = this.state;
+        const isClearable = clearable && dropdownToggleText.type !== Placeholder;
+        const labelClassNames = (0, classnames_1.default)(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 ((0, jsx_runtime_1.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)) : ((0, jsx_runtime_1.jsx)("span", Object.assign({ className: labelClassNames }, { children: dropdownToggleText }))), isClearable && this.getClearButton(), (0, jsx_runtime_1.jsx)("span", { className: 'caret' })] })));
+    }
+    getClearButton() {
+        return ((0, jsx_runtime_1.jsx)("span", Object.assign({ className: 'clearButton', onClick: this.handleResetInternalState }, { children: (0, jsx_runtime_1.jsx)("span", { className: 'clearButtonIcon rioglyph rioglyph-remove-sign' }) })));
     }
-  }, {
-    key: "getCustomPanelToggle",
-    value: function getCustomPanelToggle(isCustomVisible, textCustom) {
-      return /*#__PURE__*/_react["default"].createElement("li", {
-        className: (0, _classnames["default"])('custom-panel-toggle', isCustomVisible && 'hidden')
-      }, /*#__PURE__*/_react["default"].createElement("a", {
-        role: 'button',
-        onClick: this.handleCustomToggle
-      }, textCustom, " ..."));
+    getCustomPanelToggle(isCustomVisible, textCustom) {
+        return ((0, jsx_runtime_1.jsx)("li", Object.assign({ className: (0, classnames_1.default)('custom-panel-toggle', isCustomVisible && 'hidden') }, { children: (0, jsx_runtime_1.jsxs)("a", Object.assign({ role: 'button', onClick: this.handleCustomToggle }, { children: [textCustom, " ..."] })) })));
     }
-  }, {
-    key: "getCustomPanelButtons",
-    value: function getCustomPanelButtons(isCustomVisible, isStartValid, isEndValid, textApply, textCancel) {
-      return /*#__PURE__*/_react["default"].createElement("li", {
-        className: (0, _classnames["default"])('custom-panel-buttons', 'margin-20', !isCustomVisible && 'hidden')
-      }, /*#__PURE__*/_react["default"].createElement("div", {
-        className: 'btn-toolbar'
-      }, /*#__PURE__*/_react["default"].createElement("button", {
-        type: 'button',
-        disabled: !isStartValid || !isEndValid,
-        onClick: this.handleCustomApply,
-        className: 'btn btn-primary pull-right'
-      }, textApply), /*#__PURE__*/_react["default"].createElement("button", {
-        type: 'button',
-        onClick: this.toggleDropdownOpen,
-        className: 'btn btn-default pull-right'
-      }, textCancel)));
+    getCustomPanelButtons(isCustomVisible, isStartValid, isEndValid, textApply, textCancel) {
+        return ((0, jsx_runtime_1.jsx)("li", Object.assign({ className: (0, classnames_1.default)('custom-panel-buttons', 'margin-20', !isCustomVisible && 'hidden') }, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: 'btn-toolbar' }, { children: [(0, jsx_runtime_1.jsx)("button", Object.assign({ type: 'button', disabled: !isStartValid || !isEndValid, onClick: this.handleCustomApply, className: 'btn btn-primary pull-right' }, { children: textApply })), (0, jsx_runtime_1.jsx)("button", Object.assign({ type: 'button', onClick: this.toggleDropdownOpen, className: 'btn btn-default pull-right' }, { children: 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 && (0, _isEqual["default"])(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 = (0, _classnames["default"])('DateRangePicker', className && className);
-      var dropDownClassNames = (0, _classnames["default"])('select', 'dropdown', dropdownClass, isDropdownOpen && 'open', dropup && 'dropup');
-      return /*#__PURE__*/_react["default"].createElement("div", {
-        className: classes
-      }, /*#__PURE__*/_react["default"].createElement("div", {
-        className: dropDownClassNames
-      }, this.getDropdownToggle(dropdownToggleText, clearable), /*#__PURE__*/_react["default"].createElement("ul", {
-        className: (0, _classnames["default"])('dropdown-menu', pullRight && 'pull-right', dropdownMenuClass),
-        ref: function ref(node) {
-          return _this4.refDropdownMenu = node;
+    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 && (0, isEqual_1.default)(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;
         }
-      }, customPresets.map(function (preset, i) {
-        return /*#__PURE__*/_react["default"].createElement("li", {
-          key: "preset-".concat(i),
-          title: preset.disabled && preset.disabledText || null,
-          className: (0, _classnames["default"])(preset.disabled && 'disabled')
-        }, /*#__PURE__*/_react["default"].createElement("a", {
-          role: 'button',
-          className: (0, _classnames["default"])(isCustomVisible && 'hidden'),
-          onClick: !preset.disabled ? _this4.handleCustomPresetSelect.bind(_this4, preset) : undefined
-        }, preset.text));
-      }), /*#__PURE__*/_react["default"].createElement("li", {
-        role: 'separator',
-        className: (0, _classnames["default"])('divider', isCustomVisible && 'hidden')
-      }), this.getCustomPanelToggle(isCustomVisible, textCustom), /*#__PURE__*/_react["default"].createElement("li", {
-        className: (0, _classnames["default"])('custom-panel', !isCustomVisible && 'hidden')
-      }, /*#__PURE__*/_react["default"].createElement("div", {
-        className: 'row'
-      }, /*#__PURE__*/_react["default"].createElement("div", {
-        className: 'col-sm-6'
-      }, /*#__PURE__*/_react["default"].createElement("label", null, textFrom), /*#__PURE__*/_react["default"].createElement(_DatePicker["default"], {
-        locale: locale,
-        open: true,
-        autoDropDirection: false,
-        dateFormat: true,
-        timeFormat: hasTimePicker,
-        initialValue: customRangeStartValue,
-        onChange: this.onStartChange,
-        closeOnSelect: true,
-        isValidDate: this.getValidStartDates,
-        className: (0, _classnames["default"])('DatePicker', !isStartValid && 'has-error')
-      })), /*#__PURE__*/_react["default"].createElement("div", {
-        className: 'col-sm-6'
-      }, /*#__PURE__*/_react["default"].createElement("label", null, textTo), /*#__PURE__*/_react["default"].createElement(_DatePicker["default"], {
-        locale: locale,
-        open: true,
-        autoDropDirection: false,
-        dateFormat: true,
-        timeFormat: hasTimePicker,
-        initialValue: customRangeEndValue,
-        onChange: this.onEndChange,
-        closeOnSelect: true,
-        isValidDate: this.getValidEndDates,
-        className: (0, _classnames["default"])('DatePicker', !isEndValid && 'has-error')
-      })))), this.getCustomPanelButtons(isCustomVisible, isStartValid, isEndValid, textApply, textCancel))));
+        const classes = (0, classnames_1.default)('DateRangePicker', className && className);
+        const dropDownClassNames = (0, classnames_1.default)('select', 'dropdown', dropdownClass, isDropdownOpen && 'open', dropup && 'dropup');
+        return ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: classes }, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: dropDownClassNames }, { children: [this.getDropdownToggle(dropdownToggleText, clearable), (0, jsx_runtime_1.jsxs)("ul", Object.assign({ className: (0, classnames_1.default)('dropdown-menu', pullRight && 'pull-right', dropdownMenuClass), ref: node => (this.refDropdownMenu = node) }, { children: [customPresets.map((preset, i) => {
+                                return ((0, jsx_runtime_1.jsx)("li", Object.assign({ title: (preset.disabled && preset.disabledText) || null, className: (0, classnames_1.default)(preset.disabled && 'disabled') }, { children: (0, jsx_runtime_1.jsx)("a", Object.assign({ role: 'button', className: (0, classnames_1.default)(isCustomVisible && 'hidden'), onClick: !preset.disabled
+                                            ? this.handleCustomPresetSelect.bind(this, preset)
+                                            : undefined }, { children: preset.text })) }), `preset-${i}`));
+                            }), (0, jsx_runtime_1.jsx)("li", { role: 'separator', className: (0, classnames_1.default)('divider', isCustomVisible && 'hidden') }), this.getCustomPanelToggle(isCustomVisible, textCustom), (0, jsx_runtime_1.jsx)("li", Object.assign({ className: (0, classnames_1.default)('custom-panel', !isCustomVisible && 'hidden') }, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: 'row' }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: 'col-sm-6' }, { children: [(0, jsx_runtime_1.jsx)("label", { children: textFrom }), (0, jsx_runtime_1.jsx)(DatePicker_1.default, { locale: locale, open: true, autoDropDirection: false, dateFormat: true, timeFormat: hasTimePicker, initialValue: customRangeStartValue, onChange: this.onStartChange, closeOnSelect: true, isValidDate: this.getValidStartDates, className: (0, classnames_1.default)('DatePicker', !isStartValid && 'has-error') })] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: 'col-sm-6' }, { children: [(0, jsx_runtime_1.jsx)("label", { children: textTo }), (0, jsx_runtime_1.jsx)(DatePicker_1.default, { locale: locale, open: true, autoDropDirection: false, dateFormat: true, timeFormat: hasTimePicker, initialValue: customRangeEndValue, onChange: this.onEndChange, closeOnSelect: true, isValidDate: this.getValidEndDates, className: (0, classnames_1.default)('DatePicker', !isEndValid && 'has-error') })] }))] })) })), this.getCustomPanelButtons(isCustomVisible, isStartValid, isEndValid, textApply, textCancel)] }))] })) })));
     }
-  }]);
-  return DateRangePicker;
-}(_react.Component);
+}
 exports.DateRangePickerPure = DateRangePicker;
 DateRangePicker.propTypes = propTypes;
 DateRangePicker.defaultProps = defaultProps;
-var _default = (0, _reactOnclickoutside["default"])(DateRangePicker);
-exports["default"] = _default;
+exports.default = (0, react_onclickoutside_1.default)(DateRangePicker);