diff --git a/src/components/RelativeDateField/hooks/useRelativeDateFieldState.ts b/src/components/RelativeDateField/hooks/useRelativeDateFieldState.ts index b6a98d8..c07c014 100644 --- a/src/components/RelativeDateField/hooks/useRelativeDateFieldState.ts +++ b/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); } diff --git a/src/components/RelativeRangeDatePicker/RelativeRangeDatePicker.tsx b/src/components/RelativeRangeDatePicker/RelativeRangeDatePicker.tsx index 373ae9a..e21b2e1 100644 --- a/src/components/RelativeRangeDatePicker/RelativeRangeDatePicker.tsx +++ b/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; /** */ diff --git a/src/components/RelativeRangeDatePicker/components/PickerDialog/PickerDialog.tsx b/src/components/RelativeRangeDatePicker/components/PickerDialog/PickerDialog.tsx index 546bc08..dab0642 100644 --- a/src/components/RelativeRangeDatePicker/components/PickerDialog/PickerDialog.tsx +++ b/src/components/RelativeRangeDatePicker/components/PickerDialog/PickerDialog.tsx @@ -135,6 +135,7 @@ function DialogContent( ); }} minValue={props.minValue} + docs={props.docs} /> ) : null} {props.withZonesList ? ( diff --git a/src/components/RelativeRangeDatePicker/components/Presets/Presets.tsx b/src/components/RelativeRangeDatePicker/components/Presets/Presets.tsx index b42b7e4..0b87936 100644 --- a/src/components/RelativeRangeDatePicker/components/Presets/Presets.tsx +++ b/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} /> - +
; +function PresetsExamples({size, docs}: PresetsExamplesProps) { + return ; } interface DesktopDocProps { className?: string; size?: 's' | 'm' | 'l' | 'xl'; + docs: Preset[]; } -function DesktopDoc({className, size}: DesktopDocProps) { +function DesktopDoc({className, size, docs}: DesktopDocProps) { return ( } + content={} > setOpen(false)}> - + ); @@ -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 ; + return ; } - return ; + return ; }