-
Notifications
You must be signed in to change notification settings - Fork 355
/
SelectLanguageStep.tsx
98 lines (88 loc) · 2.96 KB
/
SelectLanguageStep.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
import { Localized } from "@fluent/react/compat";
import React, { FunctionComponent, useCallback } from "react";
import { Field, Form } from "react-final-form";
import { LanguageCode } from "coral-common/helpers/i18n";
import { LocaleField } from "coral-framework/components";
import { useCoralContext } from "coral-framework/lib/bootstrap";
import { OnSubmit, ValidationMessage } from "coral-framework/lib/form";
import { required } from "coral-framework/lib/validation";
import {
CallOut,
Flex,
FormField,
HorizontalGutter,
InputLabel,
Typography,
} from "coral-ui/components/v2";
import NextButton from "./NextButton";
interface FormProps {
locale: string;
}
interface Props {
onGoToNextStep: () => void;
onGoToPreviousStep: () => void;
data: FormProps;
onSaveData: (newData: FormProps) => void;
}
const SelectLanguageStep: FunctionComponent<Props> = (props) => {
const { changeLocale } = useCoralContext();
const onSubmit = useCallback<OnSubmit<FormProps>>(
async (input, form) => {
props.onSaveData(input);
await changeLocale(input.locale as LanguageCode);
return props.onGoToNextStep();
},
[changeLocale, props.onSaveData, props.onGoToNextStep]
);
return (
<Form
onSubmit={onSubmit}
initialValues={{
locale: props.data.locale,
}}
>
{({ handleSubmit, submitting, submitError }) => (
<form autoComplete="off" onSubmit={handleSubmit}>
<HorizontalGutter size="double">
<Localized id="install-selectLanguage-selectLanguage">
<Typography variant="heading1" align="center">
Select language for Coral
</Typography>
</Localized>
<Localized id="install-selectLanguage-description">
<Typography variant="bodyCopy">
Choose the language to be used during the installation process.
This will also be the default language for your Coral community.
</Typography>
</Localized>
{submitError && (
<CallOut color="error" fullWidth>
{submitError}
</CallOut>
)}
<Field name="locale" validate={required}>
{({ input, meta }) => (
<FormField>
<Localized id="install-selectLanguage-language">
<InputLabel htmlFor={input.name}>Language</InputLabel>
</Localized>
<LocaleField
disabled={submitting}
fullWidth
id={input.name}
{...input}
/>
<ValidationMessage meta={meta} fullWidth />
</FormField>
)}
</Field>
<Flex direction="row-reverse">
<NextButton submitting={submitting} />
</Flex>
</HorizontalGutter>
</form>
)}
</Form>
);
};
export default SelectLanguageStep;