@synerise/ds-date-range-picker 0.21.23 → 0.21.24

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.21.24](https://github.com/Synerise/synerise-design/compare/@synerise/ds-date-range-picker@0.21.23...@synerise/ds-date-range-picker@0.21.24) (2023-08-09)
+
+
+### Bug Fixes
+
+* **date-range-picker:** weekly filter standalone starttime reset fixed ([63072c2](https://github.com/Synerise/synerise-design/commit/63072c21bbe63286f2b5b31decf7f58b22c1ac1d))
+
+
+
+
+
 ## [0.21.23](https://github.com/Synerise/synerise-design/compare/@synerise/ds-date-range-picker@0.21.22...@synerise/ds-date-range-picker@0.21.23) (2023-08-03)
 
 

package/README.md

@@ -60,6 +60,7 @@ const value = {
 | value                | Value of the picker                                                 | DateRange            | new Date()                                                    |
 | startAlwaysOnTheLeft | Enable not to move month from left side to right side               | boolean              | `false`                                                       |
 | onVisibleChange      | Callback executed when popover with dateRangePicker changes its visibility | (visible: boolean) => void | -                                                |
+| filterValueSelectionModes  | Allowed modes to display in filter | DateLimitMode[] | ["Range", "Hour"]                                                |
 
 ### DateRange
 

package/dist/DateRangePicker.types.d.ts

@@ -7,6 +7,7 @@ import { FilterDefinition } from './RangeFilter/RangeFilter.types';
 import { SavedFilter } from './RangeFilter/Shared/FilterDropdown/FilterDropdown.types';
 import { Props as FooterProps } from './Footer/Footer.types';
 import { RangePickerInputProps } from './RangePickerInput/RangePickerInput.types';
+import { DateLimitMode } from './RangeFilter/Shared/TimeWindow/RangeFormContainer/RangeForm/RangeForm.types';
 export { DateRange } from './date.types';
 export declare type CustomColorArrow = 'blue' | 'grey' | 'red' | 'green' | 'yellow' | 'pink' | 'mars' | 'orange' | 'fern' | 'cyan' | 'purple' | 'violet';
 export declare type AdditionalMapper = {
@@ -67,6 +68,7 @@ export interface DateRangePickerProps extends WrappedComponentProps {
     allowedFilterTypes?: string[];
     renderPopoverTrigger?: (...args: any) => JSX.Element;
     isTruncateMs?: boolean;
+    filterValueSelectionModes?: DateLimitMode[];
 }
 /**
  * @deprecated use `DateRangePickerProps`

package/dist/RangeFilter/Filters/new/Weekly/Weekly.js

@@ -6,7 +6,7 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
 
 import * as React from 'react';
 import { useIntl } from 'react-intl';
-import * as dayjs from 'dayjs';
+import dayjs from 'dayjs';
 import { v4 as uuid } from 'uuid';
 import { useDataFormat } from '@synerise/ds-data-format';
 import RangeFormContainer from '../../../Shared/TimeWindow/RangeFormContainer/RangeFormContainer';
@@ -15,7 +15,7 @@ import Grid from '../../../Shared/TimeWindow/Grid/Grid';
 import Day from '../../../Shared/TimeWindow/Day/Day';
 import * as S from '../../../RangeFilter.styles';
 import { useShiftAndControlKeys } from '../hooks/useShiftAndControlKeys';
-import { canAddAnotherRange, haveActiveDaysCommonRange, range } from './utils';
+import { canAddAnotherRange, haveActiveDaysCommonRange, range, removeEmptyEntries } from './utils';
 import { DEFAULT_RANGE_START, DEFAULT_RANGE_END, DEFAULT_TIME_FORMAT, EMPTY_OBJECT, DEFAULT_MAX_ENTRIES, RENDER_EMPTY_NODE_FN, NOOP } from '../constants';
 import { EU_NOTATION_WEEK_DAYS_INDEXES, US_NOTATION_WEEK_DAYS_INDEXES } from '../../../Shared/TimeWindow/constants/timeWindow.constants';
 
@@ -65,27 +65,14 @@ var Weekly = function Weekly(_ref) {
     return isSundayFirstWeekDay ? US_NOTATION_WEEK_DAYS_INDEXES : EU_NOTATION_WEEK_DAYS_INDEXES;
   }, [isSundayFirstWeekDay]);
   React.useEffect(function () {
-    setFilteredSchedule(Object.keys(value));
-  }, [value]);
-  var removeEmptyEntries = React.useCallback(function (weeklySchedule) {
-    var emptyEntries = Object.keys(weeklySchedule).filter(function (key) {
-      return Object.keys(weeklySchedule[key]).length === 0;
-    });
-    var scheduleToUpdate = weeklySchedule;
-    emptyEntries.forEach(function (emptyEntry) {
-      delete scheduleToUpdate[emptyEntry];
-    });
-    onChange(scheduleToUpdate);
-  }, [onChange]);
-  React.useEffect(function () {
+    removeEmptyEntries(value);
     var entriesWithActiveDaysValue = activeDays.length ? Object.keys(value).filter(function (id) {
       return activeDays.every(function (day) {
         return !!value[id][day] && haveActiveDaysCommonRange(value[id], activeDays);
       });
     }) : [];
-    removeEmptyEntries(value);
     setFilteredSchedule(entriesWithActiveDaysValue);
-  }, [value, activeDays, removeEmptyEntries]);
+  }, [value, activeDays]);
   var handleDayTimeChange = React.useCallback(function (dayValue, dayKey, guid) {
     var updatedSchedule = value;
     var start = dayValue[0],
@@ -93,13 +80,15 @@ var Weekly = function Weekly(_ref) {
 
     if (dayKey instanceof Array) {
       dayKey.forEach(function (day) {
-        updatedSchedule[guid][day] = _objectSpread({}, value[guid][day], {
-          restricted: true,
-          start: start ? dayjs(start).format(DEFAULT_TIME_FORMAT) : undefined,
-          stop: end ? dayjs(end).format(DEFAULT_TIME_FORMAT) : undefined
-        });
+        if (guid in updatedSchedule) {
+          updatedSchedule[guid][day] = _objectSpread({}, value[guid][day], {
+            restricted: true,
+            start: start ? dayjs(start).format(DEFAULT_TIME_FORMAT) : undefined,
+            stop: end ? dayjs(end).format(DEFAULT_TIME_FORMAT) : undefined
+          });
+        }
       });
-    } else {
+    } else if (guid in updatedSchedule) {
       updatedSchedule[guid][dayKey] = _objectSpread({}, value[guid][dayKey], {
         restricted: true,
         start: start ? dayjs(start).format(DEFAULT_TIME_FORMAT) : undefined,
@@ -301,6 +290,7 @@ var Weekly = function Weekly(_ref) {
       defaultMessage: 'The maximum amount of ranges have been selected.'
     })
   }), shouldRenderAddButton && /*#__PURE__*/React.createElement(AddButton, {
+    "data-testid": "drp-filter-add-range",
     label: intl.formatMessage({
       id: 'DS.DATE-RANGE-PICKER.ADD-TIME',
       defaultMessage: 'Add range'

package/dist/RangeFilter/Filters/new/Weekly/utils.d.ts

@@ -3,3 +3,4 @@ import { DayKey } from '../../WeeklyFilter/WeeklyFilter.types';
 export declare const range: (start: number, stop: number) => number[];
 export declare const haveActiveDaysCommonRange: (days: Record<DayOfWeekIndex, WeeklyScheduleDayValue>, activeDaysArray: DayKey[]) => boolean;
 export declare const canAddAnotherRange: (schedule: WeeklySchedule, activeDays: DayKey[], maxRanges?: number) => boolean;
+export declare const removeEmptyEntries: (weeklySchedule: WeeklySchedule) => void;

package/dist/RangeFilter/Filters/new/Weekly/utils.js

@@ -40,4 +40,13 @@ export var canAddAnotherRange = function canAddAnotherRange(schedule, activeDays
       return schedule[key][day] === undefined;
     }) && !haveActiveDaysCommonRange(schedule[key], activeDays);
   });
+};
+export var removeEmptyEntries = function removeEmptyEntries(weeklySchedule) {
+  var emptyEntries = Object.keys(weeklySchedule).filter(function (key) {
+    return Object.keys(weeklySchedule[key]).length === 0;
+  });
+  var scheduleToUpdate = weeklySchedule;
+  emptyEntries.forEach(function (emptyEntry) {
+    delete scheduleToUpdate[emptyEntry];
+  });
 };

package/dist/RangeFilter/Filters/new/Weekly/utils.spec.d.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom/extend-expect';

package/dist/RangeFilter/Filters/new/Weekly/utils.spec.js

@@ -0,0 +1,36 @@
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (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 = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+import '@testing-library/jest-dom/extend-expect';
+import { removeEmptyEntries } from './utils';
+var dayValue = {
+  "start": "06:00:00.000",
+  "stop": "20:59:59.999",
+  "restricted": true,
+  "display": false,
+  "inverted": false,
+  "mode": "Range"
+};
+var scheduleWithEmptyEntries = {
+  '5de64ead-e81e-4bf9-8e13-47e8829b8cc3': {
+    0: _objectSpread({}, dayValue),
+    1: _objectSpread({}, dayValue),
+    2: _objectSpread({}, dayValue),
+    3: _objectSpread({}, dayValue),
+    4: _objectSpread({}, dayValue),
+    5: _objectSpread({}, dayValue),
+    6: _objectSpread({}, dayValue)
+  },
+  // @ts-ignore
+  '5dr44ead-e81e-4bf9-8e13-47e8829b8cc3': {}
+};
+describe('Weekly utils', function () {
+  it('removeEmptyEntries should clear entries with no day data', function () {
+    removeEmptyEntries(scheduleWithEmptyEntries);
+    expect(Object.keys(scheduleWithEmptyEntries).length).toBe(1);
+    expect(Object.keys(scheduleWithEmptyEntries)[0]).toBe('5de64ead-e81e-4bf9-8e13-47e8829b8cc3');
+  });
+});

package/dist/RangeFilter/Shared/TimeWindow/RangeFormContainer/RangeFormContainer.js

@@ -62,7 +62,8 @@ var RangeFormContainer = function RangeFormContainer(_ref) {
     setMode((dayValue == null ? void 0 : dayValue.mode) || valueSelectionModes[0] || DEFAULT_LIMIT_MODE);
   }, [dayValue, valueSelectionModes]);
   var onStartChange = React.useCallback(function (start) {
-    var end = dayValue.stop;
+    var dayVal = getDayValue(activeDays[0]);
+    var end = dayVal.stop;
     var value = [start, end ? getDateFromDayValue(end, timeFormat) : undefined];
 
     if (activeDays.length > 1) {
@@ -70,17 +71,18 @@ var RangeFormContainer = function RangeFormContainer(_ref) {
     } else {
       onDayTimeChange(value, dayKeys);
     }
-  }, [activeDays, onMultipleDayTimeChange, onDayTimeChange, timeFormat, dayValue, dayKeys]);
+  }, [activeDays, onMultipleDayTimeChange, onDayTimeChange, timeFormat, getDayValue, dayKeys]);
   var onEndChange = React.useCallback(function (end) {
-    var start = dayValue.start;
-    var value = [start ? getDateFromDayValue(dayValue.start, timeFormat) : undefined, end];
+    var dayVal = getDayValue(activeDays[0]);
+    var start = dayVal.start;
+    var value = [start ? getDateFromDayValue(start, timeFormat) : undefined, end];
 
     if (activeDays.length > 1) {
       onMultipleDayTimeChange(value);
     } else {
       onDayTimeChange(value, dayKeys);
     }
-  }, [activeDays, onMultipleDayTimeChange, onDayTimeChange, timeFormat, dayValue, dayKeys]);
+  }, [activeDays, onMultipleDayTimeChange, onDayTimeChange, timeFormat, getDayValue, dayKeys]);
   var onExactHourSelect = React.useCallback(function (value) {
     if (activeDays.length > 1) {
       onMultipleDayTimeChange([value, value]);

package/dist/RawDateRangePicker.d.ts

@@ -27,7 +27,7 @@ export declare class RawDateRangePicker extends React.PureComponent<DateRangePic
     getAddons: () => AddonType[];
     render(): JSX.Element;
 }
-declare const _default: React.ForwardRefExoticComponent<Pick<DateRangePickerProps, "readOnly" | "texts" | "valueFormatOptions" | "format" | "value" | "onVisibleChange" | "rangeUnits" | "containerClass" | "disableDefaultTexts" | "disabledDate" | "forceAdjacentMonths" | "forceAbsolute" | "footerProps" | "onValueChange" | "onApply" | "onFilterSave" | "popoverProps" | "popoverTrigger" | "ranges" | "relativeFuture" | "relativePast" | "relativeModes" | "savedFilters" | "showRelativePicker" | "showFilter" | "showTime" | "showCustomRange" | "validate" | "valueTransformer" | "arrowColor" | "disableAbsoluteTimepickerInRelative" | "rangePickerInputProps" | "allowedFilterTypes" | "renderPopoverTrigger" | "isTruncateMs"> & {
+declare const _default: React.ForwardRefExoticComponent<Pick<DateRangePickerProps, "readOnly" | "texts" | "valueFormatOptions" | "format" | "value" | "onVisibleChange" | "rangeUnits" | "containerClass" | "disableDefaultTexts" | "disabledDate" | "forceAdjacentMonths" | "forceAbsolute" | "footerProps" | "onValueChange" | "onApply" | "onFilterSave" | "popoverProps" | "popoverTrigger" | "ranges" | "relativeFuture" | "relativePast" | "relativeModes" | "savedFilters" | "showRelativePicker" | "showFilter" | "showTime" | "showCustomRange" | "validate" | "valueTransformer" | "arrowColor" | "disableAbsoluteTimepickerInRelative" | "rangePickerInputProps" | "allowedFilterTypes" | "renderPopoverTrigger" | "isTruncateMs" | "filterValueSelectionModes"> & {
     forwardedRef?: ((instance: any) => void) | React.RefObject<any> | null | undefined;
 } & React.RefAttributes<any>> & {
     WrappedComponent: React.ComponentType<DateRangePickerProps>;

package/dist/RawDateRangePicker.js

@@ -29,17 +29,19 @@ import RangeFilter from './RangeFilter/RangeFilter';
 import RangeFilterStatus from './RangeFilter/Shared/RangeFilterStatus/RangeFilterStatus';
 import { isLifetime } from './RelativeRangePicker/Elements/RangeDropdown/RangeDropdown';
 export function defaultValueTransformer(value) {
-  if (value.key === 'ALL_TIME' || isLifetime(value)) {
-    return {
-      type: 'ABSOLUTE'
-    };
-  }
-
   var id = value.id,
       timestamp = value.timestamp,
       translationKey = value.translationKey,
       filter = value.filter;
 
+  if (value.key === 'ALL_TIME' || isLifetime(value)) {
+    return _objectSpread({
+      type: 'ABSOLUTE'
+    }, filter ? {
+      filter: filter
+    } : {});
+  }
+
   var baseValue = _objectSpread({}, id ? {
     id: id
   } : {}, {}, timestamp ? {
@@ -258,6 +260,7 @@ export var RawDateRangePicker = /*#__PURE__*/function (_React$PureComponent) {
         var _value$filter, _value$filter2;
 
         var _addonKey = 'filter';
+        var filterEnabled = value.from && value.to || isLifetime(value);
         var label = value != null && value.filter ? intl.formatMessage({
           id: "DS.DATE-RANGE-PICKER.FILTER-ENABLED",
           defaultMessage: 'Filter enabled'
@@ -270,7 +273,7 @@ export var RawDateRangePicker = /*#__PURE__*/function (_React$PureComponent) {
             content: /*#__PURE__*/React.createElement(RangeFilterStatus, {
               onFilterRemove: _this.handleRemoveFilterClick,
               filter: value.filter,
-              disabled: !value.from || !value.to,
+              disabled: !filterEnabled,
               label: label,
               onClick: _this.handleModalOpenClick
             }),
@@ -325,7 +328,8 @@ export var RawDateRangePicker = /*#__PURE__*/function (_React$PureComponent) {
         footerProps = _this$props4.footerProps,
         allowedFilterTypes = _this$props4.allowedFilterTypes,
         _this$props4$disableA = _this$props4.disableAbsoluteTimepickerInRelative,
-        disableAbsoluteTimepickerInRelative = _this$props4$disableA === void 0 ? false : _this$props4$disableA;
+        disableAbsoluteTimepickerInRelative = _this$props4$disableA === void 0 ? false : _this$props4$disableA,
+        filterValueSelectionModes = _this$props4.filterValueSelectionModes;
     var _this$state3 = this.state,
         value = _this$state3.value,
         mode = _this$state3.mode;
@@ -349,7 +353,8 @@ export var RawDateRangePicker = /*#__PURE__*/function (_React$PureComponent) {
       onApply: this.handleFilterApply,
       savedFilters: savedFilters,
       allowedFilterTypes: allowedFilterTypes,
-      onFilterSave: onFilterSave
+      onFilterSave: onFilterSave,
+      valueSelectionModes: filterValueSelectionModes
     }));
     var validator = validate ? validate(value) : {
       valid: true

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synerise/ds-date-range-picker",
-  "version": "0.21.23",
+  "version": "0.21.24",
   "description": "Date-Range-Picker UI Component for the Synerise Design System",
   "license": "ISC",
   "repository": "Synerise/synerise-design",
@@ -34,7 +34,7 @@
   "dependencies": {
     "@date-fns/upgrade": "^1.0.3",
     "@synerise/ds-button": "^0.17.20",
-    "@synerise/ds-date-picker": "^0.10.7",
+    "@synerise/ds-date-picker": "^0.10.8",
     "@synerise/ds-icon": "^0.58.0",
     "@synerise/ds-manageable-list": "^0.25.14",
     "@synerise/ds-time-picker": "^0.7.16",
@@ -54,5 +54,5 @@
   "devDependencies": {
     "@types/ramda": "^0.27.14"
   },
-  "gitHead": "3879c41ef7a22df15d5cd80ceaa41ec56e551429"
+  "gitHead": "1a5a5475cc50107c0da950887a91b003e77a96e4"
 }