feat(time-slice): allow always absolute formatting via null formatInput prop

Author: bizarre

src/timeslice/time-slice.stories.tsx

@@ -58,6 +58,54 @@ export const Basic = () => {
   )
 }
 
+export const Absolute = () => {
+  const [dateRange, setDateRange] = React.useState<TimeSliceProps['dateRange']>(
+    {
+      startDate: undefined,
+      endDate: undefined
+    }
+  )
+
+  const onDateRangeChange = (dateRange: TimeSliceProps['dateRange']) => {
+    setDateRange(dateRange)
+  }
+
+  return (
+    <>
+      <TimeSlice.Root onDateRangeChange={onDateRangeChange} formatInput={null}>
+        <TimeSlice.Input style={{ border: '1px solid black', width: '100%' }} />
+        <TimeSlice.Portal
+          style={{ border: '1px solid black', backgroundColor: 'white' }}
+        >
+          <TimeSlice.Shortcut duration={{ minutes: 15 }} asChild>
+            <div className="focus:bg-gray-100">15 minutes</div>
+          </TimeSlice.Shortcut>
+          <TimeSlice.Shortcut
+            className="focus:bg-gray-100"
+            duration={{ hours: 1 }}
+          >
+            <div>1 hour</div>
+          </TimeSlice.Shortcut>
+          <TimeSlice.Shortcut
+            className="focus:bg-gray-100"
+            duration={{ days: 1 }}
+          >
+            <div>1 day</div>
+          </TimeSlice.Shortcut>
+          <TimeSlice.Shortcut
+            className="focus:bg-gray-100"
+            duration={{ years: 1 }}
+          >
+            <div>1 year</div>
+          </TimeSlice.Shortcut>
+        </TimeSlice.Portal>
+      </TimeSlice.Root>
+
+      <pre>{JSON.stringify(dateRange, null, 2)}</pre>
+    </>
+  )
+}
+
 export const DataDog = () => {
   const [dateRange, setDateRange] = React.useState<TimeSliceProps['dateRange']>(
     {

src/timeslice/time-slice.tsx

@@ -51,11 +51,13 @@ type TimeSliceProps = ScopedProps<{
   defaultOpen?: boolean
   onOpenChange?: (open: boolean) => void
   setOpen?: (open: boolean) => void
-  formatInput?: (args: {
-    startDate?: Date
-    endDate?: Date
-    isRelative: boolean
-  }) => string
+  formatInput?:
+    | ((args: {
+        startDate?: Date
+        endDate?: Date
+        isRelative: boolean
+      }) => string)
+    | null
   dateRange?: DateRange
   defaultDateRange?: DateRange
   onDateRangeChange?: (range: DateRange) => void
@@ -129,10 +131,24 @@ const TimeSlice: React.FC<TimeSliceProps> = ({
     [timeZone]
   )
 
-  const formatInputValue = useMemo(
-    () => formatInputProp || defaultFormatInput,
-    [formatInputProp, defaultFormatInput]
-  )
+  const formatInputValue = useMemo(() => {
+    if (formatInputProp) {
+      return formatInputProp
+    }
+
+    if (formatInputProp === null) {
+      return (args: {
+        startDate?: Date
+        endDate?: Date
+        isRelative: boolean
+      }) => {
+        if (!args.startDate || !args.endDate) return ''
+        return buildSegments(args.startDate, args.endDate, timeZone).text
+      }
+    }
+
+    return defaultFormatInput
+  }, [formatInputProp, defaultFormatInput])
 
   const focusPortal = useCallback(() => {
     if (portalContentRef.current) {