@synerise/ds-date-range-picker 0.15.6 → 0.17.0

package/CHANGELOG.md

@@ -3,6 +3,37 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [0.17.0](https://github.com/Synerise/synerise-design/compare/@synerise/ds-date-range-picker@0.16.0...@synerise/ds-date-range-picker@0.17.0) (2022-09-21)
+
+
+### Features
+
+* **menu:** add information card tooltip ([ded0bf1](https://github.com/Synerise/synerise-design/commit/ded0bf1b58e68f7061630810925669cb0fdad560))
+
+
+
+
+
+# [0.16.0](https://github.com/Synerise/synerise-design/compare/@synerise/ds-date-range-picker@0.15.6...@synerise/ds-date-range-picker@0.16.0) (2022-09-13)
+
+
+### Bug Fixes
+
+* **date-picker:** fix time picker updating ([f47725d](https://github.com/Synerise/synerise-design/commit/f47725da087b0381f6a7578b4e4952d27becaefd))
+* **time-picker:** fix scroll picker issue ([6ab6f23](https://github.com/Synerise/synerise-design/commit/6ab6f23e50cc063494afb22496b286672f29ff35))
+* **time-picker:** fixes for clear and hour select ([a060150](https://github.com/Synerise/synerise-design/commit/a0601503a9bfea4930c5b940d6f78e13599555a8))
+
+
+### Features
+
+* **date-picker:** fix start end valid logic ([171cb59](https://github.com/Synerise/synerise-design/commit/171cb5919a1e9da49fee06dbecd15c925c995808))
+* **date-picker:** proper updating with clear action ([6ac56e4](https://github.com/Synerise/synerise-design/commit/6ac56e4e0b62c5786015a6f5379da0e4c181dda9))
+* **date-picker:** test commit ([477311a](https://github.com/Synerise/synerise-design/commit/477311a51baf2561d189585cab03a0d2b168fbd9))
+
+
+
+
+
 ## [0.15.6](https://github.com/Synerise/synerise-design/compare/@synerise/ds-date-range-picker@0.15.5...@synerise/ds-date-range-picker@0.15.6) (2022-09-08)
 
 **Note:** Version bump only for package @synerise/ds-date-range-picker

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

@@ -82,20 +82,22 @@ var Weekly = function Weekly(_ref) {
   }, [value, activeDays, removeEmptyEntries]);
   var handleDayTimeChange = React.useCallback(function (dayValue, dayKey, guid) {
     var updatedSchedule = value;
+    var start = dayValue[0],
+        end = dayValue[1];
 
     if (dayKey instanceof Array) {
       dayKey.forEach(function (day) {
         updatedSchedule[guid][day] = _objectSpread({}, value[guid][day], {
           restricted: true,
-          start: dayjs(dayValue[0]).format(DEFAULT_TIME_FORMAT),
-          stop: dayjs(dayValue[1]).format(DEFAULT_TIME_FORMAT)
+          start: start ? dayjs(start).format(DEFAULT_TIME_FORMAT) : undefined,
+          stop: end ? dayjs(end).format(DEFAULT_TIME_FORMAT) : undefined
         });
       });
     } else {
       updatedSchedule[guid][dayKey] = _objectSpread({}, value[guid][dayKey], {
         restricted: true,
-        start: dayjs(dayValue[0]).format(DEFAULT_TIME_FORMAT),
-        stop: dayjs(dayValue[1]).format(DEFAULT_TIME_FORMAT)
+        start: start ? dayjs(start).format(DEFAULT_TIME_FORMAT) : undefined,
+        stop: end ? dayjs(end).format(DEFAULT_TIME_FORMAT) : undefined
       });
     }
 

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

@@ -36,9 +36,6 @@ var RangeForm = function RangeForm(_ref) {
       end = _React$useState2[0],
       setEnd = _React$useState2[1];
 
-  var areStartAndEndValid = React.useMemo(function () {
-    return !!start && !!end;
-  }, [start, end]);
   var getPopupContainer = React.useCallback(function (node) {
     return node.parentElement != null ? node.parentElement : document.body;
   }, []);
@@ -51,7 +48,9 @@ var RangeForm = function RangeForm(_ref) {
       disabled: disabled,
       clearTooltip: texts == null ? void 0 : texts.clear,
       onChange: function onChange(date) {
-        date && onExactHourSelect(date);
+        onExactHourSelect(date);
+        setStart(date);
+        setEnd(date);
       },
       value: start,
       dropdownProps: {
@@ -68,31 +67,31 @@ var RangeForm = function RangeForm(_ref) {
       clearTooltip: texts == null ? void 0 : texts.clear,
       onChange: function onChange(date) {
         setStart(date);
-        date && onStartChange(date);
+        onStartChange(date);
       },
       value: start,
       dropdownProps: {
         getPopupContainer: getPopupContainer
       },
-      disabledHours: areStartAndEndValid ? getDisabledTimeOptions(start, 'HOURS', null, end) : [],
-      disabledMinutes: areStartAndEndValid ? getDisabledTimeOptions(start, 'MINUTES', null, end) : [],
-      disabledSeconds: areStartAndEndValid ? getDisabledTimeOptions(start, 'SECONDS', null, end) : []
+      disabledHours: getDisabledTimeOptions(start || end, 'HOURS', null, end),
+      disabledMinutes: getDisabledTimeOptions(start || end, 'MINUTES', null, end),
+      disabledSeconds: getDisabledTimeOptions(start || end, 'SECONDS', null, end)
     }, timePickerProps)), /*#__PURE__*/React.createElement(S.Separator, null, "-"), /*#__PURE__*/React.createElement(TimePicker, _extends({
       disabled: disabled,
       clearTooltip: texts == null ? void 0 : texts.clear,
       onChange: function onChange(date) {
         setEnd(date);
-        date && onEndChange(date);
+        onEndChange(date);
       },
       value: end,
       dropdownProps: {
         getPopupContainer: getPopupContainer
       },
-      disabledHours: areStartAndEndValid ? getDisabledTimeOptions(end, 'HOURS', start, null) : [],
-      disabledMinutes: areStartAndEndValid ? getDisabledTimeOptions(end, 'MINUTES', start, null) : [],
-      disabledSeconds: areStartAndEndValid ? getDisabledTimeOptions(end, 'SECONDS', start, null) : []
+      disabledHours: getDisabledTimeOptions(end || start, 'HOURS', start, null),
+      disabledMinutes: getDisabledTimeOptions(end || start, 'MINUTES', start, null),
+      disabledSeconds: getDisabledTimeOptions(end || start, 'SECONDS', start, null)
     }, timePickerProps)));
-  }, [areStartAndEndValid, start, end, onStartChange, onEndChange, getPopupContainer, texts, timePickerProps, disabled]);
+  }, [start, end, onStartChange, onEndChange, setStart, setEnd, getPopupContainer, texts, timePickerProps, disabled]);
   var limitModeSelect = React.useMemo(function () {
     return valueSelectionModes.length > 1 ? /*#__PURE__*/React.createElement(Select, {
       value: mode,

package/dist/RangeFilter/Shared/TimeWindow/RangeFormContainer/RangeForm/RangeForm.types.d.ts

@@ -9,9 +9,9 @@ export declare type RangeFormProps = {
     title?: React.ReactNode;
     startDate: Date | undefined;
     endDate: Date | undefined;
-    onStartChange: (value: Date) => void;
-    onEndChange: (value: Date) => void;
-    onExactHourSelect: (value: Date) => void;
+    onStartChange: (value?: Date) => void;
+    onEndChange: (value?: Date) => void;
+    onExactHourSelect: (value?: Date) => void;
     onRangeDelete?: () => void;
     valueSelectionModes: DateLimitMode[];
 } & WithTranslations & WithDisabledProp & Pick<RangeFormContainerProps, 'timePickerProps'>;

package/dist/RangeFilter/Shared/TimeWindow/RangeFormContainer/RangeFormContainer.d.ts

@@ -1,4 +1,4 @@
 import * as React from 'react';
-import { RangeFormContainerProps } from './RangeFormContainer.types';
+import type { RangeFormContainerProps } from './RangeFormContainer.types';
 declare const RangeFormContainer: React.FC<RangeFormContainerProps>;
 export default RangeFormContainer;

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

@@ -60,6 +60,33 @@ var RangeFormContainer = function RangeFormContainer(_ref) {
   React.useEffect(function () {
     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 value = [start, end ? getDateFromDayValue(end, timeFormat) : undefined];
+
+    if (activeDays.length > 1) {
+      onMultipleDayTimeChange(value);
+    } else {
+      onDayTimeChange(value, dayKeys);
+    }
+  }, [activeDays, onMultipleDayTimeChange, onDayTimeChange, timeFormat, dayValue, dayKeys]);
+  var onEndChange = React.useCallback(function (end) {
+    var start = dayValue.start;
+    var value = [start ? getDateFromDayValue(dayValue.start, timeFormat) : undefined, end];
+
+    if (activeDays.length > 1) {
+      onMultipleDayTimeChange(value);
+    } else {
+      onDayTimeChange(value, dayKeys);
+    }
+  }, [activeDays, onMultipleDayTimeChange, onDayTimeChange, timeFormat, dayValue, dayKeys]);
+  var onExactHourSelect = React.useCallback(function (value) {
+    if (activeDays.length > 1) {
+      onMultipleDayTimeChange([value, value]);
+    } else {
+      onDayTimeChange([value, value], dayKeys);
+    }
+  }, [activeDays, onMultipleDayTimeChange, onDayTimeChange, dayKeys]);
   var rangeForm = React.useMemo(function () {
     return /*#__PURE__*/React.createElement(RangeForm, {
       disabled: disabled,
@@ -71,20 +98,14 @@ var RangeFormContainer = function RangeFormContainer(_ref) {
       mode: mode,
       startDate: dayValue != null && dayValue.start ? getDateFromDayValue(dayValue.start, timeFormat) : undefined,
       endDate: dayValue != null && dayValue.stop ? getDateFromDayValue(dayValue.stop, timeFormat) : undefined,
-      onStartChange: function onStartChange(value) {
-        return activeDays.length > 1 ? onMultipleDayTimeChange([value, getDateFromDayValue(dayValue.stop, timeFormat)]) : onDayTimeChange([value, getDateFromDayValue(dayValue.stop, timeFormat)], dayKeys);
-      },
-      onEndChange: function onEndChange(value) {
-        return activeDays.length > 1 ? onMultipleDayTimeChange([getDateFromDayValue(dayValue.start, timeFormat), value]) : onDayTimeChange([getDateFromDayValue(dayValue.start, timeFormat), value], dayKeys);
-      },
-      onExactHourSelect: function onExactHourSelect(value) {
-        activeDays.length > 1 ? onMultipleDayTimeChange([value, value]) : onDayTimeChange([value, value], dayKeys);
-      },
+      onStartChange: onStartChange,
+      onEndChange: onEndChange,
+      onExactHourSelect: onExactHourSelect,
       onRangeDelete: onRangeDelete,
       valueSelectionModes: valueSelectionModes,
       timePickerProps: timePickerProps
     });
-  }, [timeFormat, valueSelectionModes, handleModeChange, activeDays, onMultipleDayTimeChange, onDayTimeChange, mode, disabled, dayValue, dayKeys, onRangeDelete, texts, timePickerProps]);
+  }, [timeFormat, valueSelectionModes, handleModeChange, mode, disabled, dayValue, onRangeDelete, texts, timePickerProps, onStartChange, onEndChange, onExactHourSelect]);
   var suffix = React.useMemo(function () {
     return renderSuffix ? renderSuffix() : /*#__PURE__*/React.createElement(RangeActions, {
       onRangeClear: onRangeClear,

package/dist/RangeFilter/Shared/TimeWindow/RangeFormContainer/RangeFormContainer.types.d.ts

@@ -3,14 +3,15 @@ import { TimePickerProps } from '@synerise/ds-time-picker/dist/TimePicker.types'
 import { DayKey, RangeActions, TimeWindowProps, TimeWindowTexts } from '../TimeWindow.types';
 import { FilterDefinition, WithDisabledProp } from '../../../RangeFilter.types';
 import { DateLimitMode } from './RangeForm/RangeForm.types';
+export declare type DateValue = [Date | undefined, Date | undefined];
 export declare type RangeFormContainerProps = {
     activeDays: DayKey[];
     dayKeys: DayKey | DayKey[];
     getDayLabel: (dayKey: DayKey, long?: boolean) => string | object | React.ReactNode;
     getDayValue: (dayKey: DayKey) => Partial<FilterDefinition>;
-    onMultipleDayTimeChange: (value: [Date, Date]) => void;
+    onMultipleDayTimeChange: (value: DateValue) => void;
+    onDayTimeChange: (value: DateValue, dayKey: DayKey) => void;
     onModeChange?: (mode: DateLimitMode) => void;
-    onDayTimeChange: (value: [Date, Date], dayKey: DayKey) => void;
     onRangeDelete?: () => void;
     valueSelectionModes: DateLimitMode[];
     texts: Partial<TimeWindowTexts>;

package/dist/RangeFilter/Shared/TimeWindow/utils.d.ts

@@ -1,5 +1,5 @@
 import { DateLimitMode } from './RangeFormContainer/RangeForm/RangeForm.types';
 import { FilterDefinition } from '../../RangeFilter.types';
-export declare const getDateFromDayValue: (dayValue: string, hourTimeFormat?: string | undefined) => Date;
+export declare const getDateFromDayValue: (dayValue?: string | undefined, hourTimeFormat?: string | undefined) => Date;
 export declare const reverseRange: (inputRange: number[], groupItem: number) => number[];
 export declare const getDefaultFilterForLimitMode: (mode: DateLimitMode) => Partial<FilterDefinition>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synerise/ds-date-range-picker",
-  "version": "0.15.6",
+  "version": "0.17.0",
   "description": "Date-Range-Picker UI Component for the Synerise Design System",
   "license": "ISC",
   "repository": "Synerise/synerise-design",
@@ -34,10 +34,10 @@
   "dependencies": {
     "@date-fns/upgrade": "^1.0.3",
     "@synerise/ds-button": "^0.17.9",
-    "@synerise/ds-date-picker": "^0.6.38",
+    "@synerise/ds-date-picker": "^0.6.40",
     "@synerise/ds-icon": "^0.51.0",
-    "@synerise/ds-manageable-list": "^0.23.34",
-    "@synerise/ds-time-picker": "^0.6.37",
+    "@synerise/ds-manageable-list": "^0.23.35",
+    "@synerise/ds-time-picker": "^0.6.39",
     "@synerise/ds-tooltip": "^0.11.17",
     "@synerise/ds-utils": "^0.19.0",
     "date-fns": "^2.16.1",
@@ -54,5 +54,5 @@
   "devDependencies": {
     "@types/ramda": "^0.27.14"
   },
-  "gitHead": "fa548181a583df5c724b9ed0ebcd3141efe6e512"
+  "gitHead": "aef9ed09c6b307baccd74eb6a15d3134a6c7defe"
 }