feat(RelativeDate): support custom relative date input parser (#65)

Author: ValeraS

src/components/RelativeDateField/hooks/useRelativeDateFieldState.ts

@@ -1,6 +1,11 @@
 import React from 'react';
 
-import {dateTimeParse, isValid} from '@gravity-ui/date-utils';
+import {
+    dateTimeParse,
+    // @ts-expect-error added in new version of date-utils
+    isLikeRelative,
+    isValid,
+} from '@gravity-ui/date-utils';
 import type {DateTime} from '@gravity-ui/date-utils';
 import {useControlledState} from '@gravity-ui/uikit';
 
@@ -99,5 +104,8 @@ export function useRelativeDateFieldState(props: RelativeDateFieldOptions): Rela
 }
 
 function isLikeRelativeDate(text: string) {
+    if (typeof isLikeRelative === 'function') {
+        return isLikeRelative(text);
+    }
     return /^now/i.test(text);
 }

src/components/RelativeRangeDatePicker/RelativeRangeDatePicker.tsx

@@ -18,6 +18,7 @@ import type {
 import {getButtonSizeForInput} from '../utils/getButtonSizeForInput';
 
 import {PickerDialog} from './components/PickerDialog/PickerDialog';
+import type {Preset} from './components/Presets/defaultPresets';
 import type {PresetTab} from './components/Presets/utils';
 import {useRelativeRangeDatePickerState} from './hooks/useRelativeRangeDatePickerState';
 import type {RelativeRangeDatePickerStateOptions} from './hooks/useRelativeRangeDatePickerState';
@@ -47,6 +48,8 @@ export interface RelativeRangeDatePickerProps
     withPresets?: boolean;
     /** Custom preset tabs */
     presetTabs?: PresetTab[];
+    /** Custom docs for presets, if empty array docs will be hidden */
+    docs?: Preset[];
     /** Show selected relative values as absolute dates */
     alwaysShowAsAbsolute?: boolean;
     /** */

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

@@ -135,6 +135,7 @@ function DialogContent(
                         );
                     }}
                     minValue={props.minValue}
+                    docs={props.docs}
                 />
             ) : null}
             {props.withZonesList ? (

src/components/RelativeRangeDatePicker/components/Presets/Presets.tsx

@@ -21,6 +21,7 @@ export interface PresetProps {
     minValue?: DateTime;
     size?: 's' | 'm' | 'l' | 'xl';
     presetTabs?: PresetTab[];
+    docs?: Preset[];
 }
 export function Presets({
     className,
@@ -29,6 +30,7 @@ export function Presets({
     withTime,
     onChoosePreset,
     presetTabs,
+    docs,
 }: PresetProps) {
     const tabs = React.useMemo(() => {
         return filterPresetTabs(presetTabs ?? getDefaultPresetTabs({withTime}), {minValue});
@@ -58,7 +60,7 @@ export function Presets({
                     items={tabs}
                     size={size === 's' ? 'm' : size}
                 />
-                <PresetsDoc className={b('doc')} size={size} />
+                <PresetsDoc className={b('doc')} size={size} docs={docs} />
             </div>
             <div className={b('content')}>
                 <PresetsList

src/components/RelativeRangeDatePicker/components/Presets/PresetsDoc.tsx

@@ -75,22 +75,24 @@ const data: Preset[] = [
 
 interface PresetsExamplesProps {
     size?: 's' | 'm' | 'l' | 'xl';
+    docs: Preset[];
 }
-function PresetsExamples({size}: PresetsExamplesProps) {
-    return <Table columns={columns} data={data} className={b('table', {size})} />;
+function PresetsExamples({size, docs}: PresetsExamplesProps) {
+    return <Table columns={columns} data={docs} className={b('table', {size})} />;
 }
 
 interface DesktopDocProps {
     className?: string;
     size?: 's' | 'm' | 'l' | 'xl';
+    docs: Preset[];
 }
-function DesktopDoc({className, size}: DesktopDocProps) {
+function DesktopDoc({className, size, docs}: DesktopDocProps) {
     return (
         <Popover
             className={b(null, className)}
             tooltipContentClassName={b('content')}
             hasArrow={false}
-            content={<PresetsExamples size={size} />}
+            content={<PresetsExamples size={size} docs={docs} />}
         >
             <Button
                 className={b('button')}
@@ -106,8 +108,9 @@ function DesktopDoc({className, size}: DesktopDocProps) {
 interface MobileDocProps {
     className?: string;
     size?: 's' | 'm' | 'l' | 'xl';
+    docs: Preset[];
 }
-function MobileDoc({className, size}: MobileDocProps) {
+function MobileDoc({className, size, docs}: MobileDocProps) {
     const [open, setOpen] = React.useState(false);
     return (
         <div className={b(null, className)}>
@@ -122,7 +125,7 @@ function MobileDoc({className, size}: MobileDocProps) {
                 <Icon data={CircleQuestion} />
             </Button>
             <Sheet visible={open} onClose={() => setOpen(false)}>
-                <PresetsExamples size={size} />
+                <PresetsExamples size={size} docs={docs} />
             </Sheet>
         </div>
     );
@@ -131,14 +134,19 @@ function MobileDoc({className, size}: MobileDocProps) {
 interface PresetsDocProps {
     className?: string;
     size?: 's' | 'm' | 'l' | 'xl';
+    docs?: Preset[];
 }
 
-export function PresetsDoc({className, size}: PresetsDocProps) {
+export function PresetsDoc({className, size, docs = data}: PresetsDocProps) {
     const isMobile = useMobile();
 
+    if (!Array.isArray(docs) || docs.length === 0) {
+        return null;
+    }
+
     if (isMobile) {
-        return <MobileDoc className={className} size={size} />;
+        return <MobileDoc className={className} size={size} docs={docs} />;
     }
 
-    return <DesktopDoc className={className} size={size} />;
+    return <DesktopDoc className={className} size={size} docs={docs} />;
 }