fix: stopPorpagation on RT button

DevoInc · Mar 19, 2024 · 132fdda · 132fdda
1 parent 085aa4b
commit 132fdda
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 1 deletion.
diff --git a/packages/datetime/src/components/DateTimeRangeControl/DateTimeRangeControl.tsx b/packages/datetime/src/components/DateTimeRangeControl/DateTimeRangeControl.tsx
@@ -145,6 +145,14 @@ export const DateTimeRangeControl: React.FC<DateTimeRangeControlProps> = ({
     [from, onChange],
   );
 
+  const onClickRTCallback = React.useCallback(
+    (event) => {
+      event.stopPropagation();
+      onRealTimeClick(event);
+    },
+    [onRealTimeClick],
+  );
+
   const theme = useTheme();
 
   return (
@@ -233,7 +241,7 @@ export const DateTimeRangeControl: React.FC<DateTimeRangeControlProps> = ({
       </Field>
       {hasRealTime(realTime) && (
         <RealTimeButton
-          onClick={onRealTimeClick}
+          onClick={onClickRTCallback}
           state={realTime}
           size={REAL_TIME_SIZE_MAP[size]}
         />

diff --git a/packages/datetime/src/components/DateTimeRangePicker/DateTimeRangePicker.stories.tsx b/packages/datetime/src/components/DateTimeRangePicker/DateTimeRangePicker.stories.tsx
@@ -33,6 +33,30 @@ export const Base: Story = {
           value={date}
           onApply={onApply(setDate)}
           onChange={onChange(setDate)}
+          onRealTimeClick={(event) => {
+            console.log('He pisado RT', event);
+          }}
+          presets={[
+            {
+              label: 'Relative too',
+              options: [
+                {
+                  value: {
+                    from: 'now() - 30s',
+                    to: 'now()',
+                  },
+                  label: 'Last 30 seconds',
+                },
+                {
+                  value: {
+                    from: 'now() - 1m',
+                    to: 'now()',
+                  },
+                  label: 'Last minute',
+                },
+              ],
+            },
+          ]}
         />
       );
     })(args),

diff --git a/packages/datetime/src/components/DateTimeRangePicker/DateTimeRangePicker.tsx b/packages/datetime/src/components/DateTimeRangePicker/DateTimeRangePicker.tsx
@@ -55,6 +55,7 @@ export interface DateTimeRangePickerProps
       | 'statusTo'
       | 'onChange'
       | 'onBlur'
+      | 'onRealTimeClick'
       | 'wide'
     >,
     Required<Pick<GlobalAttrProps, 'id'>>,