feat(RelativeRangeDatePicker): allow apply presets immediately (#196)

Author: ValeraS

src/components/RelativeRangeDatePicker/RelativeRangeDatePicker.tsx

@@ -150,6 +150,7 @@ export function RelativeRangeDatePicker(props: RelativeRangeDatePickerProps) {
                 isDateUnavailable={props.isDateUnavailable}
                 placeholderValue={props.placeholderValue}
                 withPresets={props.withPresets}
+                applyPresetsImmediately={props.applyPresetsImmediately}
                 presetTabs={props.presetTabs}
                 docs={props.docs}
                 withApplyButton={props.withApplyButton}

src/components/RelativeRangeDatePicker/components/PickerDialog/PickerForm.tsx

@@ -40,6 +40,8 @@ export interface PickerFormProps extends RelativeRangeDatePickerStateOptions, Do
     withZonesList?: boolean;
     /** Show relative range presets */
     withPresets?: boolean;
+    /** Apply presets immediately */
+    applyPresetsImmediately?: boolean;
     /** Show header with docs tooltip */
     withHeader?: boolean;
     /** Custom preset tabs */
@@ -139,8 +141,9 @@ export function PickerForm(
                         state.setRange(
                             {type: 'relative', value: start},
                             {type: 'relative', value: end},
+                            props.applyPresetsImmediately,
                         );
-                        if (!props.withApplyButton) {
+                        if (!props.withApplyButton || props.applyPresetsImmediately) {
                             props.onApply();
                         }
                     }}

src/components/RelativeRangeDatePicker/components/PickerDialog/useRelativeRangeDatePickerDialogState.tsx

@@ -67,12 +67,12 @@ export function useRelativeRangeDatePickerDialogState(props: PickerFormProps) {
             return;
         }
         setTimeZone(newTimeZone);
-        const newStart = start ? {...start} : start;
+        const newStart = start ? {...start} : null;
         if (newStart?.type === 'absolute') {
             newStart.value = newStart.value.timeZone(newTimeZone, true);
             setStart(newStart);
         }
-        const newEnd = end ? {...end} : end;
+        const newEnd = end ? {...end} : null;
         if (newEnd?.type === 'absolute') {
             newEnd.value = newEnd.value.timeZone(newTimeZone, true);
             setEnd(newEnd);
@@ -89,13 +89,13 @@ export function useRelativeRangeDatePickerDialogState(props: PickerFormProps) {
         }
     }
 
-    function setRange(newStart: Value, newEnd: Value) {
+    function setRange(newStart: Value, newEnd: Value, force?: boolean) {
         if (props.readOnly) {
             return;
         }
         setStart(newStart);
         setEnd(newEnd);
-        if (!withApplyButton) {
+        if (!withApplyButton || force) {
             setValue(
                 getRangeValue(newStart, newEnd, {...props, timeZone, allowNullableValues}),
                 timeZone,

src/components/RelativeRangeDatePicker/types.ts

@@ -70,6 +70,8 @@ export interface RelativeRangeDatePickerProps
     withZonesList?: boolean;
     /** Show relative range presets */
     withPresets?: boolean;
+    /** Apply presets immediately */
+    applyPresetsImmediately?: boolean;
     /** Show header with docs tooltip */
     withHeader?: boolean;
     /** Custom preset tabs */