Skip to content

Commit b8bae21

Browse files
ValeraSValeraS
authored
fix(RelativeRangeDatePicker): correctly show chosen preset title (#241)
1 parent 3005fc4 commit b8bae21

File tree

6 files changed

+70
-49
lines changed

6 files changed

+70
-49
lines changed

‎src/components/RelativeRangeDatePicker/__stories__/RelativeRangeDatePiker.stories.tsx‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -137,3 +137,24 @@ export const CustomControl: StoryObj<RelativeRangeDatePickerProps> = {
137137
);
138138
},
139139
};
140+
141+
export const CustomPresets: Story = {
142+
...Default,
143+
args: {
144+
...Default.args,
145+
withPresets: true,
146+
presetTabs: [
147+
{
148+
id: 'my-presets',
149+
title: 'My Presets',
150+
presets: [
151+
{to: 'now', from: 'now-5d', title: 'Last five days'},
152+
{to: 'now', from: 'now-5w', title: 'Last five weeks'},
153+
{to: 'now', from: 'now-5M', title: 'Last five months'},
154+
{to: 'now', from: 'now-5Q', title: 'Last five quarters'},
155+
{to: 'now', from: 'now-5y', title: 'Last five years'},
156+
],
157+
},
158+
],
159+
},
160+
};

‎src/components/RelativeRangeDatePicker/components/PickerDialog/PickerDoc.tsx‎

Lines changed: 10 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -8,37 +8,36 @@ import type {TableColumnConfig} from '@gravity-ui/uikit';
88

99
import {block} from '../../../../utils/cn';
1010
import {getButtonSizeForInput} from '../../../utils/getButtonSizeForInput';
11-
import {PresetTitle} from '../Presets/defaultPresets';
12-
import type {Preset} from '../Presets/defaultPresets';
11+
import type {DefaultPreset, Preset} from '../Presets/defaultPresets';
1312
import {i18n} from '../Presets/i18n';
1413

1514
import './PickerDoc.scss';
1615

1716
const b = block('relative-range-date-picker-doc');
1817

19-
const data: Preset[] = [
18+
const data: DefaultPreset[] = [
2019
{
21-
title: <PresetTitle title="Last 5 minutes" />,
20+
title: 'Last 5 minutes',
2221
from: 'now - 5m',
2322
to: 'now',
2423
},
2524
{
26-
title: <PresetTitle title="From start of day" />,
25+
title: 'From start of day',
2726
from: 'now/d',
2827
to: 'now',
2928
},
3029
{
31-
title: <PresetTitle title="This week" />,
30+
title: 'This week',
3231
from: 'now/w',
3332
to: 'now/w',
3433
},
3534
{
36-
title: <PresetTitle title="From start of week" />,
35+
title: 'From start of week',
3736
from: 'now/w',
3837
to: 'now',
3938
},
4039
{
41-
title: <PresetTitle title="Previous month" />,
40+
title: 'Previous month',
4241
from: 'now - 1M/M',
4342
to: 'now - 1M/M',
4443
},
@@ -59,6 +58,9 @@ function DocContent({size, docs, onStartUpdate, onEndUpdate}: DocContentProps) {
5958
name: () => {
6059
return t('Range');
6160
},
61+
template: (item) => {
62+
return t(item.title as any);
63+
},
6264
},
6365
{
6466
id: 'from',

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -89,6 +89,7 @@ interface PresetsListProps {
8989
}
9090
function PresetsList({presets, onChoosePreset, size = 'm'}: PresetsListProps) {
9191
const ref = React.useRef<List<Preset>>(null);
92+
const {t} = i18n.useTranslation();
9293

9394
React.useEffect(() => {
9495
const list = ref.current;
@@ -121,7 +122,7 @@ function PresetsList({presets, onChoosePreset, size = 'm'}: PresetsListProps) {
121122
items={presets}
122123
filterable={false}
123124
virtualized={false}
124-
renderItem={(item) => item.title}
125+
renderItem={(item) => t(item.title as any)}
125126
itemHeight={SIZE_TO_ITEM_HEIGHT[size]}
126127
onItemClick={(item) => {
127128
onChoosePreset(item.from, item.to);

‎src/components/RelativeRangeDatePicker/components/Presets/defaultPresets.tsx‎

Lines changed: 33 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -1,151 +1,148 @@
1-
import {i18n} from './i18n';
1+
import type {i18n} from './i18n';
22

33
export interface Preset {
44
from: string;
55
to: string;
6-
title: React.ReactNode;
6+
title: string;
77
}
88

9-
export function PresetTitle({
10-
title,
11-
}: {
9+
export interface DefaultPreset {
10+
from: string;
11+
to: string;
1212
title: keyof (typeof i18n.keysetData)['g-date-relative-range-date-picker-presets'];
13-
}) {
14-
const {t} = i18n.useTranslation();
15-
return t(title);
1613
}
1714

18-
export const DEFAULT_DATE_PRESETS: Preset[] = [
15+
export const DEFAULT_DATE_PRESETS: DefaultPreset[] = [
1916
{
2017
from: 'now-1d',
2118
to: 'now',
22-
title: <PresetTitle title="Last day" />,
19+
title: 'Last day',
2320
},
2421
{
2522
from: 'now-3d',
2623
to: 'now',
27-
title: <PresetTitle title="Last 3 days" />,
24+
title: 'Last 3 days',
2825
},
2926
{
3027
from: 'now-1w',
3128
to: 'now',
32-
title: <PresetTitle title="Last week" />,
29+
title: 'Last week',
3330
},
3431
{
3532
from: 'now-1M',
3633
to: 'now',
37-
title: <PresetTitle title="Last month" />,
34+
title: 'Last month',
3835
},
3936
{
4037
from: 'now-3M',
4138
to: 'now',
42-
title: <PresetTitle title="Last 3 months" />,
39+
title: 'Last 3 months',
4340
},
4441
{
4542
from: 'now-6M',
4643
to: 'now',
47-
title: <PresetTitle title="Last 6 months" />,
44+
title: 'Last 6 months',
4845
},
4946
{
5047
from: 'now-1y',
5148
to: 'now',
52-
title: <PresetTitle title="Last year" />,
49+
title: 'Last year',
5350
},
5451
{
5552
from: 'now-3y',
5653
to: 'now',
57-
title: <PresetTitle title="Last 3 years" />,
54+
title: 'Last 3 years',
5855
},
5956
];
6057

61-
export const DEFAULT_TIME_PRESETS: Preset[] = [
58+
export const DEFAULT_TIME_PRESETS: DefaultPreset[] = [
6259
{
6360
from: 'now-5m',
6461
to: 'now',
65-
title: <PresetTitle title="Last 5 minutes" />,
62+
title: 'Last 5 minutes',
6663
},
6764
{
6865
from: 'now-15m',
6966
to: 'now',
70-
title: <PresetTitle title="Last 15 minutes" />,
67+
title: 'Last 15 minutes',
7168
},
7269
{
7370
from: 'now-30m',
7471
to: 'now',
75-
title: <PresetTitle title="Last 30 minutes" />,
72+
title: 'Last 30 minutes',
7673
},
7774
{
7875
from: 'now-1h',
7976
to: 'now',
80-
title: <PresetTitle title="Last hour" />,
77+
title: 'Last hour',
8178
},
8279
{
8380
from: 'now-3h',
8481
to: 'now',
85-
title: <PresetTitle title="Last 3 hours" />,
82+
title: 'Last 3 hours',
8683
},
8784
{
8885
from: 'now-6h',
8986
to: 'now',
90-
title: <PresetTitle title="Last 6 hours" />,
87+
title: 'Last 6 hours',
9188
},
9289
{
9390
from: 'now-12h',
9491
to: 'now',
95-
title: <PresetTitle title="Last 12 hours" />,
92+
title: 'Last 12 hours',
9693
},
9794
];
9895

99-
export const DEFAULT_OTHERS_PRESETS: Preset[] = [
96+
export const DEFAULT_OTHERS_PRESETS: DefaultPreset[] = [
10097
{
10198
from: 'now/d',
10299
to: 'now/d',
103-
title: <PresetTitle title="Today" />,
100+
title: 'Today',
104101
},
105102
{
106103
from: 'now-1d/d',
107104
to: 'now-1d/d',
108-
title: <PresetTitle title="Yesterday" />,
105+
title: 'Yesterday',
109106
},
110107
{
111108
from: 'now-2d/d',
112109
to: 'now-2d/d',
113-
title: <PresetTitle title="Day before yesterday" />,
110+
title: 'Day before yesterday',
114111
},
115112
{
116113
from: 'now/w',
117114
to: 'now/w',
118-
title: <PresetTitle title="This week" />,
115+
title: 'This week',
119116
},
120117
{
121118
from: 'now/M',
122119
to: 'now/M',
123-
title: <PresetTitle title="This month" />,
120+
title: 'This month',
124121
},
125122
{
126123
from: 'now/y',
127124
to: 'now/y',
128-
title: <PresetTitle title="This year" />,
125+
title: 'This year',
129126
},
130127
{
131128
from: 'now/d',
132129
to: 'now',
133-
title: <PresetTitle title="From start of day" />,
130+
title: 'From start of day',
134131
},
135132
{
136133
from: 'now/w',
137134
to: 'now',
138-
title: <PresetTitle title="From start of week" />,
135+
title: 'From start of week',
139136
},
140137
{
141138
from: 'now/M',
142139
to: 'now',
143-
title: <PresetTitle title="From start of month" />,
140+
title: 'From start of month',
144141
},
145142
{
146143
from: 'now/y',
147144
to: 'now',
148-
title: <PresetTitle title="From start of year" />,
145+
title: 'From start of year',
149146
},
150147
];
151148

‎src/components/RelativeRangeDatePicker/components/Presets/utils.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -39,13 +39,13 @@ export function getPresetTitle(
3939
end: string,
4040
presets: Preset[] = allPresets,
4141
t: ExtractFunctionType<typeof i18n> = i18n,
42-
) {
42+
): string {
4343
const startText = start.replace(/\s+/g, '');
4444
const endText = end.replace(/\s+/g, '');
4545

4646
for (const preset of presets) {
4747
if (preset.from === startText && preset.to === endText) {
48-
return preset.title;
48+
return t(preset.title as any);
4949
}
5050
}
5151

‎src/components/RelativeRangeDatePicker/utils.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,7 @@ export function getDefaultTitle({
4545
presets,
4646
presetsTranslations = i18n,
4747
lang = 'en',
48-
}: GetDefaultTitleArgs) {
48+
}: GetDefaultTitleArgs): string {
4949
if (!value) {
5050
return '';
5151
}
@@ -74,7 +74,7 @@ export function getDefaultTitle({
7474
value.start?.type === 'relative' &&
7575
value.end?.type === 'relative'
7676
) {
77-
return `${getPresetTitle(value.start.value, value.end.value, presets, presetsTranslations)}`;
77+
return getPresetTitle(value.start.value, value.end.value, presets, presetsTranslations);
7878
}
7979

8080
const delimiter = ' — ';

0 commit comments

Comments
 (0)