From 0e86c5d611a68f627a20c6aa9aab4d7d95a55956 Mon Sep 17 00:00:00 2001 From: Valerii Sidorenko Date: Sun, 23 Nov 2025 18:54:49 +0100 Subject: [PATCH] fix(RelativeRangeDatePicker): correctly show chosen preset title --- .../RelativeRangeDatePiker.stories.tsx | 21 ++++++ .../components/PickerDialog/PickerDoc.tsx | 18 ++--- .../components/Presets/Presets.tsx | 3 +- .../components/Presets/defaultPresets.tsx | 69 +++++++++---------- .../components/Presets/utils.ts | 4 +- .../RelativeRangeDatePicker/utils.ts | 4 +- 6 files changed, 70 insertions(+), 49 deletions(-) diff --git a/src/components/RelativeRangeDatePicker/__stories__/RelativeRangeDatePiker.stories.tsx b/src/components/RelativeRangeDatePicker/__stories__/RelativeRangeDatePiker.stories.tsx index 1bc6030..2a506de 100644 --- a/src/components/RelativeRangeDatePicker/__stories__/RelativeRangeDatePiker.stories.tsx +++ b/src/components/RelativeRangeDatePicker/__stories__/RelativeRangeDatePiker.stories.tsx @@ -137,3 +137,24 @@ export const CustomControl: StoryObj = { ); }, }; + +export const CustomPresets: Story = { + ...Default, + args: { + ...Default.args, + withPresets: true, + presetTabs: [ + { + id: 'my-presets', + title: 'My Presets', + presets: [ + {to: 'now', from: 'now-5d', title: 'Last five days'}, + {to: 'now', from: 'now-5w', title: 'Last five weeks'}, + {to: 'now', from: 'now-5M', title: 'Last five months'}, + {to: 'now', from: 'now-5Q', title: 'Last five quarters'}, + {to: 'now', from: 'now-5y', title: 'Last five years'}, + ], + }, + ], + }, +}; diff --git a/src/components/RelativeRangeDatePicker/components/PickerDialog/PickerDoc.tsx b/src/components/RelativeRangeDatePicker/components/PickerDialog/PickerDoc.tsx index 77e443c..f2b77c5 100644 --- a/src/components/RelativeRangeDatePicker/components/PickerDialog/PickerDoc.tsx +++ b/src/components/RelativeRangeDatePicker/components/PickerDialog/PickerDoc.tsx @@ -8,37 +8,36 @@ import type {TableColumnConfig} from '@gravity-ui/uikit'; import {block} from '../../../../utils/cn'; import {getButtonSizeForInput} from '../../../utils/getButtonSizeForInput'; -import {PresetTitle} from '../Presets/defaultPresets'; -import type {Preset} from '../Presets/defaultPresets'; +import type {DefaultPreset, Preset} from '../Presets/defaultPresets'; import {i18n} from '../Presets/i18n'; import './PickerDoc.scss'; const b = block('relative-range-date-picker-doc'); -const data: Preset[] = [ +const data: DefaultPreset[] = [ { - title: , + title: 'Last 5 minutes', from: 'now - 5m', to: 'now', }, { - title: , + title: 'From start of day', from: 'now/d', to: 'now', }, { - title: , + title: 'This week', from: 'now/w', to: 'now/w', }, { - title: , + title: 'From start of week', from: 'now/w', to: 'now', }, { - title: , + title: 'Previous month', from: 'now - 1M/M', to: 'now - 1M/M', }, @@ -59,6 +58,9 @@ function DocContent({size, docs, onStartUpdate, onEndUpdate}: DocContentProps) { name: () => { return t('Range'); }, + template: (item) => { + return t(item.title as any); + }, }, { id: 'from', diff --git a/src/components/RelativeRangeDatePicker/components/Presets/Presets.tsx b/src/components/RelativeRangeDatePicker/components/Presets/Presets.tsx index f2ef300..82304cf 100644 --- a/src/components/RelativeRangeDatePicker/components/Presets/Presets.tsx +++ b/src/components/RelativeRangeDatePicker/components/Presets/Presets.tsx @@ -89,6 +89,7 @@ interface PresetsListProps { } function PresetsList({presets, onChoosePreset, size = 'm'}: PresetsListProps) { const ref = React.useRef>(null); + const {t} = i18n.useTranslation(); React.useEffect(() => { const list = ref.current; @@ -121,7 +122,7 @@ function PresetsList({presets, onChoosePreset, size = 'm'}: PresetsListProps) { items={presets} filterable={false} virtualized={false} - renderItem={(item) => item.title} + renderItem={(item) => t(item.title as any)} itemHeight={SIZE_TO_ITEM_HEIGHT[size]} onItemClick={(item) => { onChoosePreset(item.from, item.to); diff --git a/src/components/RelativeRangeDatePicker/components/Presets/defaultPresets.tsx b/src/components/RelativeRangeDatePicker/components/Presets/defaultPresets.tsx index a46216f..0963001 100644 --- a/src/components/RelativeRangeDatePicker/components/Presets/defaultPresets.tsx +++ b/src/components/RelativeRangeDatePicker/components/Presets/defaultPresets.tsx @@ -1,151 +1,148 @@ -import {i18n} from './i18n'; +import type {i18n} from './i18n'; export interface Preset { from: string; to: string; - title: React.ReactNode; + title: string; } -export function PresetTitle({ - title, -}: { +export interface DefaultPreset { + from: string; + to: string; title: keyof (typeof i18n.keysetData)['g-date-relative-range-date-picker-presets']; -}) { - const {t} = i18n.useTranslation(); - return t(title); } -export const DEFAULT_DATE_PRESETS: Preset[] = [ +export const DEFAULT_DATE_PRESETS: DefaultPreset[] = [ { from: 'now-1d', to: 'now', - title: , + title: 'Last day', }, { from: 'now-3d', to: 'now', - title: , + title: 'Last 3 days', }, { from: 'now-1w', to: 'now', - title: , + title: 'Last week', }, { from: 'now-1M', to: 'now', - title: , + title: 'Last month', }, { from: 'now-3M', to: 'now', - title: , + title: 'Last 3 months', }, { from: 'now-6M', to: 'now', - title: , + title: 'Last 6 months', }, { from: 'now-1y', to: 'now', - title: , + title: 'Last year', }, { from: 'now-3y', to: 'now', - title: , + title: 'Last 3 years', }, ]; -export const DEFAULT_TIME_PRESETS: Preset[] = [ +export const DEFAULT_TIME_PRESETS: DefaultPreset[] = [ { from: 'now-5m', to: 'now', - title: , + title: 'Last 5 minutes', }, { from: 'now-15m', to: 'now', - title: , + title: 'Last 15 minutes', }, { from: 'now-30m', to: 'now', - title: , + title: 'Last 30 minutes', }, { from: 'now-1h', to: 'now', - title: , + title: 'Last hour', }, { from: 'now-3h', to: 'now', - title: , + title: 'Last 3 hours', }, { from: 'now-6h', to: 'now', - title: , + title: 'Last 6 hours', }, { from: 'now-12h', to: 'now', - title: , + title: 'Last 12 hours', }, ]; -export const DEFAULT_OTHERS_PRESETS: Preset[] = [ +export const DEFAULT_OTHERS_PRESETS: DefaultPreset[] = [ { from: 'now/d', to: 'now/d', - title: , + title: 'Today', }, { from: 'now-1d/d', to: 'now-1d/d', - title: , + title: 'Yesterday', }, { from: 'now-2d/d', to: 'now-2d/d', - title: , + title: 'Day before yesterday', }, { from: 'now/w', to: 'now/w', - title: , + title: 'This week', }, { from: 'now/M', to: 'now/M', - title: , + title: 'This month', }, { from: 'now/y', to: 'now/y', - title: , + title: 'This year', }, { from: 'now/d', to: 'now', - title: , + title: 'From start of day', }, { from: 'now/w', to: 'now', - title: , + title: 'From start of week', }, { from: 'now/M', to: 'now', - title: , + title: 'From start of month', }, { from: 'now/y', to: 'now', - title: , + title: 'From start of year', }, ]; diff --git a/src/components/RelativeRangeDatePicker/components/Presets/utils.ts b/src/components/RelativeRangeDatePicker/components/Presets/utils.ts index 8933e03..d26e6c6 100644 --- a/src/components/RelativeRangeDatePicker/components/Presets/utils.ts +++ b/src/components/RelativeRangeDatePicker/components/Presets/utils.ts @@ -39,13 +39,13 @@ export function getPresetTitle( end: string, presets: Preset[] = allPresets, t: ExtractFunctionType = i18n, -) { +): string { const startText = start.replace(/\s+/g, ''); const endText = end.replace(/\s+/g, ''); for (const preset of presets) { if (preset.from === startText && preset.to === endText) { - return preset.title; + return t(preset.title as any); } } diff --git a/src/components/RelativeRangeDatePicker/utils.ts b/src/components/RelativeRangeDatePicker/utils.ts index b9acb86..69df86b 100644 --- a/src/components/RelativeRangeDatePicker/utils.ts +++ b/src/components/RelativeRangeDatePicker/utils.ts @@ -45,7 +45,7 @@ export function getDefaultTitle({ presets, presetsTranslations = i18n, lang = 'en', -}: GetDefaultTitleArgs) { +}: GetDefaultTitleArgs): string { if (!value) { return ''; } @@ -74,7 +74,7 @@ export function getDefaultTitle({ value.start?.type === 'relative' && value.end?.type === 'relative' ) { - return `${getPresetTitle(value.start.value, value.end.value, presets, presetsTranslations)}`; + return getPresetTitle(value.start.value, value.end.value, presets, presetsTranslations); } const delimiter = ' — ';