Skip to content

Commit bfdf4b8

Browse files
pan-kotpan-kot
authored
refactor: Refactored test pages for date range picker (#3761)
1 parent 5686241 commit bfdf4b8

19 files changed

+783
-1240
lines changed

‎pages/app/templates.tsx

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
2+
// SPDX-License-Identifier: Apache-2.0
3+
4+
import React from 'react';
5+
6+
import { Box, SpaceBetween } from '~components';
7+
import I18nProvider, { I18nProviderProps } from '~components/i18n';
8+
import messages from '~components/i18n/messages/all.en';
9+
10+
import ScreenshotArea, { ScreenshotAreaProps } from '../utils/screenshot-area';
11+
12+
interface SimplePageProps {
13+
title: React.ReactNode;
14+
subtitle?: React.ReactNode;
15+
settings?: React.ReactNode;
16+
children: React.ReactNode;
17+
screenshotArea?: ScreenshotAreaProps;
18+
i18n?: Partial<I18nProviderProps>;
19+
}
20+
21+
export function SimplePage({ title, subtitle, settings, children, screenshotArea, i18n }: SimplePageProps) {
22+
const content = (
23+
<Box margin="m">
24+
<SpaceBetween size="m">
25+
<Box variant="h1">{title}</Box>
26+
27+
{subtitle ? <Box variant="p">{subtitle}</Box> : null}
28+
29+
{settings ? (
30+
<SpaceBetween size="s">
31+
<div>{settings}</div>
32+
<hr />
33+
</SpaceBetween>
34+
) : null}
35+
36+
{screenshotArea ? (
37+
<ScreenshotArea gutters={false} {...screenshotArea}>
38+
{children}
39+
</ScreenshotArea>
40+
) : (
41+
<Box>{children}</Box>
42+
)}
43+
</SpaceBetween>
44+
</Box>
45+
);
46+
return i18n ? (
47+
<I18nProvider messages={[messages]} locale="en-GB" {...i18n}>
48+
{content}
49+
</I18nProvider>
50+
) : (
51+
content
52+
);
53+
}
54+
55+
export function PermutationsPage({ screenshotArea = {}, ...props }: SimplePageProps) {
56+
return <SimplePage {...props} screenshotArea={screenshotArea} />;
57+
}

‎pages/date-range-picker/absolute-format-all-locales.page.tsx

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
2+
// SPDX-License-Identifier: Apache-2.0
3+
4+
import React from 'react';
5+
6+
import { DateRangePicker, FormField, Grid } from '~components';
7+
8+
import { SimplePage } from '../app/templates';
9+
import { locales } from '../date-input/common';
10+
import { Settings, useDateRangePickerSettings } from './common';
11+
12+
const rtlLocales = new Set(['ar', 'he']);
13+
14+
export default function DateRangePickerScenario() {
15+
const { props, settings, setSettings } = useDateRangePickerSettings({ rangeSelectorMode: 'absolute-only' });
16+
return (
17+
<SimplePage
18+
title="Date range picker: all locales for absolute format"
19+
settings={<Settings settings={settings} setSettings={setSettings} />}
20+
>
21+
{locales.map(locale => (
22+
<div key={`pickers-${locale}`} dir={rtlLocales.has(locale) ? 'rtl' : 'ltr'}>
23+
<Grid gridDefinition={[{ colspan: 1 }, { colspan: 11 }]}>
24+
<div style={{ textAlign: 'right' }}>{locale}</div>
25+
<FormField label="Date Range Picker field">
26+
<DateRangePicker {...props} locale={locale} />
27+
</FormField>
28+
</Grid>
29+
</div>
30+
))}
31+
</SimplePage>
32+
);
33+
}

‎pages/date-range-picker/absolute-format-day-picker.permutations.page.tsx

Lines changed: 26 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -1,70 +1,50 @@
11
// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
22
// SPDX-License-Identifier: Apache-2.0
3+
34
import React from 'react';
45

5-
import { Box, DateRangePicker, DateRangePickerProps, SpaceBetween } from '~components';
6+
import { DateRangePicker, DateRangePickerProps } from '~components';
67

8+
import { PermutationsPage } from '../app/templates';
79
import createPermutations from '../utils/permutations';
810
import PermutationsView from '../utils/permutations-view';
9-
import ScreenshotArea from '../utils/screenshot-area';
10-
import { generatePlaceholder, i18nStrings, isValid } from './common';
11+
import { isValid, placeholders } from './common';
1112

12-
const permutations = createPermutations<
13-
Pick<DateRangePickerProps, 'absoluteFormat' | 'dateOnly' | 'hideTimeOffset' | 'value' | 'granularity'>
14-
>([
13+
const permutations = createPermutations<DateRangePickerProps>([
1514
{
1615
absoluteFormat: ['iso', 'long-localized'],
1716
dateOnly: [true, false],
18-
value: [
19-
{
20-
type: 'absolute',
21-
startDate: '2024-12-30',
22-
endDate: '2024-12-31',
23-
},
24-
],
17+
value: [{ type: 'absolute', startDate: '2024-12-30', endDate: '2024-12-31' }],
18+
isValidRange: [() => ({ valid: true })],
19+
relativeOptions: [[]],
2520
},
2621
{
2722
absoluteFormat: ['iso', 'long-localized'],
2823
dateOnly: [true, false],
2924
hideTimeOffset: [true, false],
30-
value: [
31-
{
32-
type: 'absolute',
33-
startDate: '2024-12-30T00:00:00+01:00',
34-
endDate: '2024-12-31T23:59:59+01:00',
35-
},
36-
],
25+
value: [{ type: 'absolute', startDate: '2024-12-30T00:00:00+01:00', endDate: '2024-12-31T23:59:59+01:00' }],
26+
isValidRange: [() => ({ valid: true })],
27+
relativeOptions: [[]],
3728
},
3829
]);
3930

4031
export default function DateRangePickerPermutations() {
4132
return (
42-
<Box padding="s">
43-
<SpaceBetween direction="vertical" size="m">
44-
<h1>Absolute date range picker month calendar with custom absolute format</h1>
45-
<hr />
46-
<ScreenshotArea>
47-
<PermutationsView
48-
permutations={permutations}
49-
render={permutation => (
50-
<DateRangePicker
51-
value={permutation.value}
52-
absoluteFormat={permutation.absoluteFormat}
53-
dateOnly={permutation.dateOnly}
54-
granularity="day"
55-
hideTimeOffset={permutation.hideTimeOffset}
56-
locale="en-US"
57-
i18nStrings={i18nStrings}
58-
placeholder={generatePlaceholder(permutation.dateOnly, false)}
59-
relativeOptions={[]}
60-
isValidRange={value => isValid('day')(value)}
61-
rangeSelectorMode={'absolute-only'}
62-
getTimeOffset={() => 60}
63-
/>
64-
)}
33+
<PermutationsPage title="Date range picker permutations: absolute with day granularity" i18n={{}}>
34+
<PermutationsView
35+
permutations={permutations}
36+
render={permutation => (
37+
<DateRangePicker
38+
{...permutation}
39+
placeholder={permutation.dateOnly ? placeholders['date-only'] : placeholders.mixed}
40+
granularity="day"
41+
locale="en-US"
42+
rangeSelectorMode="absolute-only"
43+
isValidRange={value => isValid('day')(value)}
44+
getTimeOffset={() => 60}
6545
/>
66-
</ScreenshotArea>
67-
</SpaceBetween>
68-
</Box>
46+
)}
47+
/>
48+
</PermutationsPage>
6949
);
7050
}

‎pages/date-range-picker/absolute-format-month-picker.permutations.page.tsx

Lines changed: 25 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,16 @@
11
// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
22
// SPDX-License-Identifier: Apache-2.0
3+
34
import React from 'react';
45

5-
import { Box, DateRangePicker, DateRangePickerProps, SpaceBetween } from '~components';
6+
import { DateRangePicker, DateRangePickerProps } from '~components';
67

8+
import { PermutationsPage } from '../app/templates';
79
import createPermutations from '../utils/permutations';
810
import PermutationsView from '../utils/permutations-view';
9-
import ScreenshotArea from '../utils/screenshot-area';
10-
import { generatePlaceholder, i18nStrings, isValid } from './common';
11+
import { isValid, placeholders } from './common';
1112

12-
const permutations = createPermutations<
13-
Pick<DateRangePickerProps, 'absoluteFormat' | 'dateOnly' | 'hideTimeOffset' | 'value' | 'granularity'>
14-
>([
13+
const permutations = createPermutations<DateRangePickerProps>([
1514
{
1615
absoluteFormat: ['iso', 'long-localized'],
1716
value: [
@@ -21,6 +20,8 @@ const permutations = createPermutations<
2120
endDate: '2025-01',
2221
},
2322
],
23+
isValidRange: [() => ({ valid: true })],
24+
relativeOptions: [[]],
2425
},
2526
{
2627
absoluteFormat: ['iso', 'long-localized'],
@@ -32,37 +33,29 @@ const permutations = createPermutations<
3233
endDate: '2024-02',
3334
},
3435
],
36+
isValidRange: [() => ({ valid: true })],
37+
relativeOptions: [[]],
3538
},
3639
]);
3740

3841
export default function DateRangePickerPermutations() {
3942
return (
40-
<Box padding="s">
41-
<SpaceBetween direction="vertical" size="m">
42-
<h1>Absolute date range picker year calendar with custom absolute format</h1>
43-
<hr />
44-
<ScreenshotArea>
45-
<PermutationsView
46-
permutations={permutations}
47-
render={permutation => (
48-
<DateRangePicker
49-
value={permutation.value}
50-
absoluteFormat={permutation.absoluteFormat}
51-
dateOnly={false}
52-
granularity="month"
53-
hideTimeOffset={permutation.hideTimeOffset}
54-
locale="en-US"
55-
i18nStrings={i18nStrings}
56-
placeholder={generatePlaceholder(permutation.dateOnly, permutation.granularity === 'month')}
57-
relativeOptions={[]}
58-
isValidRange={value => isValid('month')(value)}
59-
rangeSelectorMode={'absolute-only'}
60-
getTimeOffset={() => 60}
61-
/>
62-
)}
43+
<PermutationsPage title="Date range picker permutations: absolute with month granularity" i18n={{}}>
44+
<PermutationsView
45+
permutations={permutations}
46+
render={permutation => (
47+
<DateRangePicker
48+
{...permutation}
49+
placeholder={placeholders['month-only']}
50+
dateOnly={false}
51+
granularity="month"
52+
locale="en-US"
53+
rangeSelectorMode="absolute-only"
54+
isValidRange={value => isValid('month')(value)}
55+
getTimeOffset={() => 60}
6356
/>
64-
</ScreenshotArea>
65-
</SpaceBetween>
66-
</Box>
57+
)}
58+
/>
59+
</PermutationsPage>
6760
);
6861
}

0 commit comments

Comments
 (0)