@synerise/ds-date-range-picker 0.31.10 → 0.32.0

package/dist/RawDateRangePicker.js

@@ -1,14 +1,7 @@
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-function _inheritsLoose(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; _setPrototypeOf(subClass, superClass); }
-function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
-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 _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
-function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
-import React, { PureComponent } from 'react';
+import React, { useState, useMemo, useCallback } from 'react';
 import { omitBy, isUndefined } from 'lodash';
-import { injectIntl } from 'react-intl';
+import { useIntl } from 'react-intl';
 import fnsIsValid from 'date-fns/isValid';
 import fnsStartOfSecond from 'date-fns/startOfSecond';
 import { legacyParse } from '@date-fns/upgrade/v2';
@@ -24,39 +17,45 @@ import { getDefaultTexts, normalizeRange, toIsoString } from './utils';
 import RangeFilter from './RangeFilter/RangeFilter';
 import RangeFilterStatus from './RangeFilter/Shared/RangeFilterStatus/RangeFilterStatus';
 import { isLifetime } from './RelativeRangePicker/Elements/RangeDropdown/RangeDropdown';
+var isRelative = function isRelative(dateRange) {
+  var isLegacyCustom = Object.keys(dateRange).includes('key') && dateRange.key === undefined;
+  return dateRange.key && (CONST.RELATIVE_PRESETS.map(function (preset) {
+    return preset.key;
+  }).includes(dateRange.key) || dateRange.key === CONST.CUSTOM_RANGE_KEY) || isLegacyCustom;
+};
 export function defaultValueTransformer(value) {
   var id = value.id,
     timestamp = value.timestamp,
     translationKey = value.translationKey,
     filter = value.filter;
   if (value.key === 'ALL_TIME' || isLifetime(value)) {
-    return _objectSpread({
+    return _extends({
       type: 'ABSOLUTE',
       translationKey: translationKey
     }, filter ? {
       filter: filter
     } : {});
   }
-  var baseValue = _objectSpread({}, id ? {
+  var baseValue = _extends({}, id ? {
     id: id
-  } : {}, {}, timestamp ? {
+  } : {}, timestamp ? {
     timestamp: timestamp
-  } : {}, {}, translationKey ? {
+  } : {}, translationKey ? {
     translationKey: translationKey
-  } : {}, {}, filter ? {
+  } : {}, filter ? {
     filter: filter
   } : {});
   if (value.type === 'ABSOLUTE') {
-    return _objectSpread({}, baseValue, {
+    return _extends({}, baseValue, {
       type: value.type
     }, value.from ? {
       from: value.from
-    } : {}, {}, value.to ? {
+    } : {}, value.to ? {
       to: value.to
     } : {});
   }
   if (value.type === 'RELATIVE') {
-    return _objectSpread({}, baseValue, {
+    return _extends({}, baseValue, {
       type: value.type,
       key: value.key,
       duration: value.duration,
@@ -66,318 +65,263 @@ export function defaultValueTransformer(value) {
   }
   return value;
 }
-export var RawDateRangePicker = /*#__PURE__*/function (_PureComponent) {
-  function RawDateRangePicker(props) {
-    var _this;
-    _this = _PureComponent.call(this, props) || this;
-    // eslint-disable-next-line react/state-in-constructor
-    _defineProperty(_this, "handleFilterCancel", function () {
-      _this.setState({
-        mode: MODES.DATE
-      });
-    });
-    _defineProperty(_this, "handleFilterApply", function (filter) {
-      var value = _this.state.value;
-      _this.setState({
-        mode: MODES.DATE,
-        value: _objectSpread({}, value, {
-          filter: filter
-        })
-      });
-    });
-    _defineProperty(_this, "allTexts", function () {
-      var _this$props = _this.props,
-        texts = _this$props.texts,
-        intl = _this$props.intl;
-      return getDefaultTexts(intl, false, texts);
-    });
-    _defineProperty(_this, "handleRangeChange", function (range) {
-      var _valueTransformer;
-      if (!range) {
-        return;
-      }
-      if (range.from && !fnsIsValid(range == null ? void 0 : range.from)) {
-        return;
-      }
-      var _this$props2 = _this.props,
-        onValueChange = _this$props2.onValueChange,
-        valueTransformer = _this$props2.valueTransformer,
-        isTruncateMs = _this$props2.isTruncateMs;
-      var _this$state = _this.state,
-        value = _this$state.value,
-        mode = _this$state.mode;
-      var newValue = normalizeRange(_objectSpread({}, range, {
-        filter: value.filter
-      }));
-      if (isTruncateMs) {
-        if (newValue.from !== undefined) {
-          newValue.from = fnsStartOfSecond(legacyParse(newValue.from));
-        }
-        if (newValue.to !== undefined) {
-          newValue.to = fnsStartOfSecond(legacyParse(newValue.to));
-        }
-      }
-      if ((newValue.type === 'RELATIVE' || newValue.key === CONST.ALL_TIME) && mode === MODES.TIME) {
-        _this.setState({
-          mode: MODES.DATE
-        });
-      }
-      if (range != null && range.key) {
-        newValue.key = range == null ? void 0 : range.key;
-      }
-      // transformation has to take place here, because `key` property might get omitted by valueTransformer
-      var legacyValue = (_valueTransformer = valueTransformer == null ? void 0 : valueTransformer(newValue)) != null ? _valueTransformer : newValue;
-      _this.setState({
-        value: _objectSpread({}, legacyValue, {
-          translationKey: range == null ? void 0 : range.translationKey
-        })
-      });
-      onValueChange && onValueChange(legacyValue);
-    });
-    _defineProperty(_this, "handleApply", function () {
-      var intl = _this.props.intl;
-      var value = _this.state.value;
-      var _this$props3 = _this.props,
-        forceAbsolute = _this$props3.forceAbsolute,
-        onApply = _this$props3.onApply;
-      if (forceAbsolute && value.type === RELATIVE) {
-        onApply && onApply(_objectSpread({}, value, {}, relativeToAbsolute(value)));
-        return;
-      }
-      if (value.key === CONST.ALL_TIME) {
-        onApply && onApply(omitBy(value, isUndefined));
-        return;
+export var RawDateRangePicker = function RawDateRangePicker(_ref) {
+  var _ref$showRelativePick = _ref.showRelativePicker,
+    showRelativePicker = _ref$showRelativePick === void 0 ? true : _ref$showRelativePick,
+    showFilter = _ref.showFilter,
+    showTime = _ref.showTime,
+    format = _ref.format,
+    valueFormatOptions = _ref.valueFormatOptions,
+    disabledDate = _ref.disabledDate,
+    _ref$validate = _ref.validate,
+    validate = _ref$validate === void 0 ? function () {
+      return {
+        valid: true
+      };
+    } : _ref$validate,
+    forceAdjacentMonths = _ref.forceAdjacentMonths,
+    savedFilters = _ref.savedFilters,
+    onFilterSave = _ref.onFilterSave,
+    _ref$containerClass = _ref.containerClass,
+    containerClass = _ref$containerClass === void 0 ? 'ds-date-range-picker' : _ref$containerClass,
+    footerProps = _ref.footerProps,
+    allowedFilterTypes = _ref.allowedFilterTypes,
+    _ref$disableAbsoluteT = _ref.disableAbsoluteTimepickerInRelative,
+    disableAbsoluteTimepickerInRelative = _ref$disableAbsoluteT === void 0 ? false : _ref$disableAbsoluteT,
+    filterValueSelectionModes = _ref.filterValueSelectionModes,
+    filterRangeDisplayMode = _ref.filterRangeDisplayMode,
+    _ref$showNowButton = _ref.showNowButton,
+    showNowButton = _ref$showNowButton === void 0 ? true : _ref$showNowButton,
+    alignContentToTop = _ref.alignContentToTop,
+    relativeFuture = _ref.relativeFuture,
+    _ref$relativePast = _ref.relativePast,
+    relativePast = _ref$relativePast === void 0 ? true : _ref$relativePast,
+    _ref$ranges = _ref.ranges,
+    ranges = _ref$ranges === void 0 ? [].concat(RELATIVE_PRESETS, ABSOLUTE_PRESETS) : _ref$ranges,
+    relativeModes = _ref.relativeModes,
+    rangeUnits = _ref.rangeUnits,
+    showCustomRange = _ref.showCustomRange,
+    _ref$valueTransformer = _ref.valueTransformer,
+    valueTransformer = _ref$valueTransformer === void 0 ? defaultValueTransformer : _ref$valueTransformer,
+    onValueChange = _ref.onValueChange,
+    _ref$isTruncateMs = _ref.isTruncateMs,
+    isTruncateMs = _ref$isTruncateMs === void 0 ? true : _ref$isTruncateMs,
+    forceAbsolute = _ref.forceAbsolute,
+    onApply = _ref.onApply,
+    texts = _ref.texts,
+    value = _ref.value;
+  var _useState = useState(normalizeRange(value)),
+    localValue = _useState[0],
+    setLocalValue = _useState[1];
+  var _useState2 = useState(MODES.DATE),
+    mode = _useState2[0],
+    setMode = _useState2[1];
+  var _useState3 = useState('relative-picker'),
+    visibleAddonKey = _useState3[0],
+    setVisibleAddonKey = _useState3[1];
+  var intl = useIntl();
+  var timeZone = intl.timeZone;
+  var allTexts = useMemo(function () {
+    return getDefaultTexts(intl, false, texts);
+  }, [intl, texts]);
+  var handleRangeChange = useCallback(function (range) {
+    var _valueTransformer;
+    if (!range) {
+      return;
+    }
+    if (range.from && !fnsIsValid(range == null ? void 0 : range.from)) {
+      return;
+    }
+    var newValue = normalizeRange(_extends({}, range, {
+      filter: localValue.filter
+    }));
+    if (isTruncateMs) {
+      if (newValue.from !== undefined) {
+        newValue.from = fnsStartOfSecond(legacyParse(newValue.from));
       }
-      if (onApply) {
-        var valueToEmit = _objectSpread({}, value, {
-          from: value.type === ABSOLUTE && value.from instanceof Date ? toIsoString(value.from, intl.timeZone) : undefined,
-          to: value.type === ABSOLUTE && value.to instanceof Date ? toIsoString(value.to, intl.timeZone) : undefined,
-          type: value.type
-        });
-        onApply(valueToEmit);
+      if (newValue.to !== undefined) {
+        newValue.to = fnsStartOfSecond(legacyParse(newValue.to));
       }
-    });
-    _defineProperty(_this, "handleModalOpenClick", function () {
-      _this.setState({
-        mode: MODES.FILTER
-      });
-    });
-    _defineProperty(_this, "handleRemoveFilterClick", function () {
-      _this.handleFilterApply(undefined);
-    });
-    _defineProperty(_this, "handleSwitchMode", function () {
-      var mode = _this.state.mode;
-      var updatedMode = mode === MODES.TIME ? MODES.DATE : MODES.TIME;
-      _this.setState({
-        mode: updatedMode
+    }
+    if ((newValue.type === 'RELATIVE' || newValue.key === CONST.ALL_TIME) && mode === MODES.TIME) {
+      setMode(MODES.DATE);
+    }
+    if (range != null && range.key) {
+      newValue.key = range == null ? void 0 : range.key;
+    }
+
+    // transformation has to take place here, because `key` property might get omitted by valueTransformer
+    var legacyValue = (_valueTransformer = valueTransformer == null ? void 0 : valueTransformer(newValue)) != null ? _valueTransformer : newValue;
+    setLocalValue(_extends({}, legacyValue, {
+      translationKey: range == null ? void 0 : range.translationKey
+    }));
+    onValueChange && onValueChange(legacyValue);
+  }, [isTruncateMs, mode, localValue.filter, onValueChange, valueTransformer]);
+  var handleAddonCollapse = useCallback(function (addonKey, expanded) {
+    setVisibleAddonKey(expanded ? addonKey : undefined);
+  }, []);
+  var handleFilterApply = useCallback(function (filter) {
+    setMode(MODES.DATE);
+    setLocalValue(_extends({}, localValue, {
+      filter: filter
+    }));
+  }, [localValue]);
+  var handleRemoveFilterClick = useCallback(function () {
+    handleFilterApply(undefined);
+  }, [handleFilterApply]);
+  var handleModalOpenClick = useCallback(function () {
+    setMode(MODES.FILTER);
+  }, []);
+  var handleFilterCancel = useCallback(function () {
+    setMode(MODES.DATE);
+  }, []);
+  var handleApply = useCallback(function () {
+    if (forceAbsolute && localValue.type === RELATIVE) {
+      onApply && onApply(_extends({}, localValue, relativeToAbsolute(localValue)));
+      return;
+    }
+    if (localValue.key === CONST.ALL_TIME) {
+      onApply && onApply(omitBy(localValue, isUndefined));
+      return;
+    }
+    if (onApply) {
+      var valueToEmit = _extends({}, localValue, {
+        from: localValue.type === ABSOLUTE && localValue.from instanceof Date ? toIsoString(localValue.from, timeZone) : undefined,
+        to: localValue.type === ABSOLUTE && localValue.to instanceof Date ? toIsoString(localValue.to, timeZone) : undefined,
+        type: localValue.type
       });
-    });
-    _defineProperty(_this, "handleAddonCollapse", function (addonKey, expanded) {
-      _this.setState(function (state) {
-        return _objectSpread({}, state, {
-          visibleAddonKey: expanded ? addonKey : undefined
-        });
+      onApply(valueToEmit);
+    }
+  }, [forceAbsolute, timeZone, localValue, onApply]);
+  var handleSwitchMode = useCallback(function () {
+    var updatedMode = mode === MODES.TIME ? MODES.DATE : MODES.TIME;
+    setMode(updatedMode);
+  }, [mode]);
+  var fullValue = useMemo(function () {
+    if (localValue && localValue.type === 'RELATIVE' && (!localValue.from || !localValue.to)) {
+      var _normalizeRange = normalizeRange(localValue),
+        to = _normalizeRange.to,
+        from = _normalizeRange.from;
+      return _extends({}, localValue, {
+        from: from,
+        to: to
       });
-    });
-    _defineProperty(_this, "getAddons", function () {
-      var _this$props4 = _this.props,
-        showRelativePicker = _this$props4.showRelativePicker,
-        showFilter = _this$props4.showFilter,
-        relativeFuture = _this$props4.relativeFuture,
-        relativePast = _this$props4.relativePast,
-        ranges = _this$props4.ranges,
-        relativeModes = _this$props4.relativeModes,
-        rangeUnits = _this$props4.rangeUnits,
-        showCustomRange = _this$props4.showCustomRange,
-        valueTransformer = _this$props4.valueTransformer;
-      var _this$state2 = _this.state,
-        value = _this$state2.value,
-        visibleAddonKey = _this$state2.visibleAddonKey;
-      var allTexts = _this.allTexts();
-      var addons = [];
-      if (showRelativePicker && !!relativeModes && (relativeModes == null ? void 0 : relativeModes.length) > 0) {
-        var addonKey = 'relative-picker';
-        var rangeTranslationKey = value == null ? void 0 : value.translationKey;
-        addons.push({
-          content: /*#__PURE__*/React.createElement(AddonCollapse, {
-            content: /*#__PURE__*/React.createElement(RelativeRangePicker, {
-              future: relativeFuture,
-              past: relativePast,
-              ranges: ranges,
-              value: value,
-              onChange: _this.handleRangeChange,
-              relativeModes: relativeModes,
-              texts: allTexts,
-              rangeUnits: rangeUnits,
-              showCustomRange: showCustomRange,
-              valueTransformer: valueTransformer
-            }),
-            expanded: addonKey === visibleAddonKey,
-            title: allTexts.relativeDateRange,
-            onCollapseChange: function onCollapseChange(expanded) {
-              return _this.handleAddonCollapse(addonKey, expanded);
-            },
-            collapsedSummary: rangeTranslationKey && allTexts[rangeTranslationKey]
-          }),
-          key: addonKey
-        });
-      }
-      if (showFilter) {
-        var _addonKey = 'filter';
-        var filterEnabled = value.from && value.to || isLifetime(value);
-        var label = value != null && value.filter ? allTexts.filterEnabled : allTexts.selectDateFilter;
-        addons.push({
-          content: /*#__PURE__*/React.createElement(RangeFilterStatus, {
-            onFilterRemove: _this.handleRemoveFilterClick,
-            filter: value.filter,
+    }
+    return localValue;
+  }, [localValue]);
+  var addons = useMemo(function () {
+    var result = [];
+    if (showRelativePicker && !!relativeModes && (relativeModes == null ? void 0 : relativeModes.length) > 0) {
+      var addonKey = 'relative-picker';
+      var rangeTranslationKey = localValue == null ? void 0 : localValue.translationKey;
+      result.push({
+        content: /*#__PURE__*/React.createElement(AddonCollapse, {
+          content: /*#__PURE__*/React.createElement(RelativeRangePicker, {
+            future: relativeFuture,
+            past: relativePast,
+            ranges: ranges,
+            value: localValue,
+            onChange: handleRangeChange,
+            relativeModes: relativeModes,
             texts: allTexts,
-            disabled: !filterEnabled,
-            label: label,
-            onClick: _this.handleModalOpenClick
+            rangeUnits: rangeUnits,
+            showCustomRange: showCustomRange,
+            valueTransformer: valueTransformer
           }),
-          key: _addonKey
-        });
-      }
-      return addons;
-    });
-    _this.state = {
-      mode: MODES.DATE,
-      value: normalizeRange(props.value),
-      visibleAddonKey: 'relative-picker'
-    };
-    return _this;
-  }
-  _inheritsLoose(RawDateRangePicker, _PureComponent);
-  var _proto = RawDateRangePicker.prototype;
-  _proto.componentDidUpdate = function componentDidUpdate(prevProps) {
-    var value = this.props.value;
-    if (prevProps.value !== value) {
-      this.handleRangeChange(value);
-    }
-  };
-  _proto.render = function render() {
-    var _this$props5 = this.props,
-      showRelativePicker = _this$props5.showRelativePicker,
-      showFilter = _this$props5.showFilter,
-      showTime = _this$props5.showTime,
-      format = _this$props5.format,
-      valueFormatOptions = _this$props5.valueFormatOptions,
-      disabledDate = _this$props5.disabledDate,
-      validate = _this$props5.validate,
-      forceAdjacentMonths = _this$props5.forceAdjacentMonths,
-      savedFilters = _this$props5.savedFilters,
-      onFilterSave = _this$props5.onFilterSave,
-      intl = _this$props5.intl,
-      _this$props5$containe = _this$props5.containerClass,
-      containerClass = _this$props5$containe === void 0 ? 'ds-date-range-picker' : _this$props5$containe,
-      footerProps = _this$props5.footerProps,
-      allowedFilterTypes = _this$props5.allowedFilterTypes,
-      _this$props5$disableA = _this$props5.disableAbsoluteTimepickerInRelative,
-      disableAbsoluteTimepickerInRelative = _this$props5$disableA === void 0 ? false : _this$props5$disableA,
-      filterValueSelectionModes = _this$props5.filterValueSelectionModes,
-      filterRangeDisplayMode = _this$props5.filterRangeDisplayMode,
-      _this$props5$showNowB = _this$props5.showNowButton,
-      showNowButton = _this$props5$showNowB === void 0 ? true : _this$props5$showNowB,
-      alignContentToTop = _this$props5.alignContentToTop;
-    var _this$state3 = this.state,
-      value = _this$state3.value,
-      mode = _this$state3.mode;
-    if (value.type === 'RELATIVE' && (!value.from || !value.to)) {
-      var absolute = normalizeRange(value);
-      Object.assign(value, {
-        from: absolute.from,
-        to: absolute.to
+          expanded: addonKey === visibleAddonKey,
+          title: allTexts.relativeDateRange,
+          onCollapseChange: function onCollapseChange(expanded) {
+            return handleAddonCollapse(addonKey, expanded);
+          },
+          collapsedSummary: rangeTranslationKey && allTexts[rangeTranslationKey]
+        }),
+        key: addonKey
       });
     }
-    var from = value.from,
-      to = value.to,
-      key = value.key;
-    var addons = this.getAddons();
-    var allTexts = this.allTexts();
-    function isRelative(dateRange) {
-      var isLegacyCustom = Object.keys(value).includes('key') && key === undefined;
-      return dateRange.key && (CONST.RELATIVE_PRESETS.map(function (e) {
-        return e.key;
-      }).includes(dateRange.key) || dateRange.key === CONST.CUSTOM_RANGE_KEY) || isLegacyCustom;
-    }
-    var content;
-    if (mode === MODES.FILTER) {
-      content = /*#__PURE__*/React.createElement(Container, null, /*#__PURE__*/React.createElement(RangeFilter, {
-        texts: allTexts,
-        value: value.filter,
-        onCancel: this.handleFilterCancel,
-        onApply: this.handleFilterApply,
-        savedFilters: savedFilters,
-        allowedFilterTypes: allowedFilterTypes,
-        onFilterSave: onFilterSave,
-        valueSelectionModes: filterValueSelectionModes,
-        rangeDisplayMode: filterRangeDisplayMode
-      }));
-    } else {
-      var validator = validate ? validate(value) : {
-        valid: true
-      };
-      var isValidAbsolute = !Object.keys(value).includes('key') && Boolean(from && to);
-      var isValidRelative = isRelative(value) && Boolean(value.offset && value.duration);
-      var isValidSince = value.type === 'SINCE' && Boolean(value.offset && value.duration);
-      // TODO apply ranges and find mapped lifetime here, this applies only for defaultValueTransformer
-      var isValid = (isValidAbsolute || isValidRelative || isValidSince || key === CONST.ALL_TIME) && validator.valid;
-      var canSwitchToTimePicker = isValid && !isLifetime(value) && (!disableAbsoluteTimepickerInRelative || value.type === 'ABSOLUTE');
-      content = /*#__PURE__*/React.createElement(Container, {
-        className: containerClass
-      }, /*#__PURE__*/React.createElement(RangePicker, {
-        showNowButton: showNowButton,
-        value: normalizeRange(value),
-        onChange: this.handleRangeChange,
-        mode: mode,
-        disabledDate: disabledDate,
-        onSwitchMode: this.handleSwitchMode,
-        dateOnly: !showTime,
-        canSwitchMode: canSwitchToTimePicker,
-        texts: allTexts,
-        forceAdjacentMonths: forceAdjacentMonths,
-        intl: intl
-      }), addons.length > 0 && /*#__PURE__*/React.createElement(Separator, null), addons.map(function (addon, index) {
-        return /*#__PURE__*/React.createElement(Addon, {
-          last: addons.length === index + 1,
-          className: "addon-wrapper",
-          key: addon.key
-        }, addon.content);
-      }), /*#__PURE__*/React.createElement(Footer, _extends({
-        canApply: isValid || isLifetime(value),
-        onApply: this.handleApply,
-        dateOnly: !showTime,
-        mode: mode,
-        canSwitchMode: isValid,
-        message: !validator.valid ? validator.message : null,
-        onSwitchMode: this.handleSwitchMode,
-        texts: allTexts,
-        value: value,
-        showTime: showTime,
-        format: format,
-        valueFormatOptions: valueFormatOptions
-      }, footerProps)));
+    if (showFilter) {
+      var _addonKey = 'filter';
+      var filterEnabled = fullValue.from && fullValue.to || isLifetime(fullValue);
+      var label = localValue != null && localValue.filter ? allTexts.filterEnabled : allTexts.selectDateFilter;
+      result.push({
+        content: /*#__PURE__*/React.createElement(RangeFilterStatus, {
+          onFilterRemove: handleRemoveFilterClick,
+          filter: localValue.filter,
+          texts: allTexts,
+          disabled: !filterEnabled,
+          label: label,
+          onClick: handleModalOpenClick
+        }),
+        key: _addonKey
+      });
     }
-    return /*#__PURE__*/React.createElement(PopupWrapper, {
-      alignContentToTop: alignContentToTop,
-      hasFilter: showFilter,
-      hasRelativePicker: showRelativePicker
-    }, content);
-  };
-  return RawDateRangePicker;
-}(PureComponent);
-
-// @ts-ignore
-_defineProperty(RawDateRangePicker, "defaultProps", {
-  ranges: [].concat(RELATIVE_PRESETS, ABSOLUTE_PRESETS),
-  relativePast: true,
-  showRelativePicker: true,
-  validate: function validate() {
-    return {
+    return result;
+  }, [showRelativePicker, relativeModes, showFilter, localValue, relativeFuture, relativePast, ranges, handleRangeChange, allTexts, rangeUnits, showCustomRange, valueTransformer, visibleAddonKey, handleAddonCollapse, fullValue, handleRemoveFilterClick, handleModalOpenClick]);
+  var content;
+  if (mode === MODES.FILTER) {
+    content = /*#__PURE__*/React.createElement(Container, null, /*#__PURE__*/React.createElement(RangeFilter, {
+      texts: allTexts,
+      value: localValue.filter,
+      onCancel: handleFilterCancel,
+      onApply: handleFilterApply,
+      savedFilters: savedFilters,
+      allowedFilterTypes: allowedFilterTypes,
+      onFilterSave: onFilterSave,
+      valueSelectionModes: filterValueSelectionModes,
+      rangeDisplayMode: filterRangeDisplayMode
+    }));
+  } else {
+    var from = localValue.from,
+      to = localValue.to,
+      key = localValue.key;
+    var validator = validate ? validate(localValue) : {
       valid: true
     };
-  },
-  valueTransformer: defaultValueTransformer,
-  isTruncateMs: true
-});
-export default injectIntl(RawDateRangePicker);
+    var isValidAbsolute = !Object.keys(localValue).includes('key') && Boolean(from && to);
+    var isValidRelative = isRelative(localValue) && Boolean(localValue.offset && localValue.duration);
+    var isValidSince = localValue.type === 'SINCE' && Boolean(localValue.offset && localValue.duration);
+    // TODO apply ranges and find mapped lifetime here, this applies only for defaultValueTransformer
+    var isValid = (isValidAbsolute || isValidRelative || isValidSince || key === CONST.ALL_TIME) && validator.valid;
+    var canSwitchToTimePicker = isValid && !isLifetime(localValue) && (!disableAbsoluteTimepickerInRelative || localValue.type === 'ABSOLUTE');
+    content = /*#__PURE__*/React.createElement(Container, {
+      className: containerClass
+    }, /*#__PURE__*/React.createElement(RangePicker, {
+      showNowButton: showNowButton,
+      value: normalizeRange(localValue),
+      onChange: handleRangeChange,
+      mode: mode,
+      disabledDate: disabledDate,
+      onSwitchMode: handleSwitchMode,
+      dateOnly: !showTime,
+      canSwitchMode: canSwitchToTimePicker,
+      texts: allTexts,
+      forceAdjacentMonths: forceAdjacentMonths,
+      intl: intl
+    }), addons.length > 0 && /*#__PURE__*/React.createElement(Separator, null), addons.map(function (addon, index) {
+      return /*#__PURE__*/React.createElement(Addon, {
+        last: addons.length === index + 1,
+        className: "addon-wrapper",
+        key: addon.key
+      }, addon.content);
+    }), /*#__PURE__*/React.createElement(Footer, _extends({
+      canApply: isValid || isLifetime(localValue),
+      onApply: handleApply,
+      dateOnly: !showTime,
+      mode: mode,
+      canSwitchMode: isValid,
+      message: !validator.valid ? validator.message : null,
+      onSwitchMode: handleSwitchMode,
+      texts: allTexts,
+      value: fullValue,
+      showTime: showTime,
+      format: format,
+      valueFormatOptions: valueFormatOptions
+    }, footerProps)));
+  }
+  return /*#__PURE__*/React.createElement(PopupWrapper, {
+    "data-testid": "date-range-picker-container",
+    alignContentToTop: alignContentToTop,
+    hasFilter: showFilter,
+    hasRelativePicker: showRelativePicker
+  }, content);
+};
+export default RawDateRangePicker;

package/dist/RelativeRangePicker/Elements/CustomRangeForm/CustomRangeForm.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
 import { Props } from './CustomRangeForm.types';
 export declare const setOffsetType: (a: any, obj: any) => any;
-declare const CustomRangeForm: React.FC<Props>;
+declare const CustomRangeForm: ({ ranges, rangeUnits, currentRange, currentGroup, handleDurationValueChange, handleOffsetValueChange, handleModeChange, handleChange, texts, handleTimestampChange, timestamp, relativeModes, }: Props) => React.JSX.Element;
 export default CustomRangeForm;