Skip to content

Commit 723ce12

Browse files
maneetgoyalmaneetgoyal
committed
Implement reset form logic
1 parent f200186 commit 723ce12

File tree

8 files changed

+352
-353
lines changed

8 files changed

+352
-353
lines changed

‎src/assets/index.js

Lines changed: 188 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,188 @@
1+
export const languageOptions = [
2+
{ value: undefined, label: "Default" },
3+
{ value: "ar-SA", label: "Arabic (Saudi Arabia)" },
4+
{ value: "bn-BD", label: "Bangla (Bangladesh)" },
5+
{ value: "bn-IN", label: "Bangla (India)" },
6+
{ value: "cs-CZ", label: "Czech (Czech Republic)" },
7+
{ value: "da-DK", label: "Danish (Denmark)" },
8+
{ value: "de-AT", label: "Austrian German" },
9+
{ value: "de-CH", label: "'Swiss' German" },
10+
{ value: "de-DE", label: "Standard German" },
11+
{ value: "el-GR", label: "Modern Greek" },
12+
{ value: "en-AU", label: "Australian English" },
13+
{ value: "en-CA", label: "Canadian English" },
14+
{ value: "en-GB", label: "British English" },
15+
{ value: "en-IE", label: "Irish English" },
16+
{ value: "en-IN", label: "Indian English" },
17+
{ value: "en-NZ", label: "New Zealand English" },
18+
{ value: "en-US", label: "US English" },
19+
{ value: "en-ZA", label: "English (South Africa)" },
20+
{ value: "es-AR", label: "Argentine Spanish" },
21+
{ value: "es-CL", label: "Chilean Spanish" },
22+
{ value: "es-CO", label: "Colombian Spanish" },
23+
{ value: "es-ES", label: "Castilian Spanish" },
24+
{ value: "es-MX", label: "Mexican Spanish" },
25+
{ value: "es-US", label: "American Spanish" },
26+
{ value: "fi-FI", label: "Finnish (Finland)" },
27+
{ value: "fr-BE", label: "Belgian French" },
28+
{ value: "fr-CA", label: "Canadian French" },
29+
{ value: "fr-CH", label: "'Swiss' French" },
30+
{ value: "fr-FR", label: "Standard French" },
31+
{ value: "he-IL", label: "Hebrew (Israel)" },
32+
{ value: "hi-IN", label: "Hindi (India)" },
33+
{ value: "hu-HU", label: "Hungarian (Hungary)" },
34+
{ value: "id-ID", label: "Indonesian (Indonesia)" },
35+
{ value: "it-CH", label: "'Swiss' Italian" },
36+
{ value: "it-IT", label: "Standard Italian" },
37+
{ value: "jp-JP", label: "Japanese (Japan)" },
38+
{ value: "ko-KR", label: "Korean (Republic of Korea)" },
39+
{ value: "nl-BE", label: "Belgian Dutch" },
40+
{ value: "nl-NL", label: "Standard Dutch" },
41+
{ value: "no-NO", label: "Norwegian (Norway)" },
42+
{ value: "pl-PL", label: "Polish (Poland)" },
43+
{ value: "pt-BR", label: "Brazilian Portuguese" },
44+
{ value: "pt-PT", label: "European Portugues" },
45+
{ value: "ro-RO", label: "Romanian (Romania)" },
46+
{ value: "ru-RU", label: "Russian (Russian Federation)" },
47+
{ value: "sk-SK", label: "Slovak (Slovakia)" },
48+
{ value: "sv-SE", label: "Swedish (Sweden)" },
49+
{ value: "ta-IN", label: "Indian Tamil" },
50+
{ value: "ta-LK", label: "Sri Lankan Tamil" },
51+
{ value: "th-TH", label: "Thai (Thailand)" },
52+
{ value: "tr-TR", label: "Turkish (Turkey)" },
53+
{ value: "zh-CN", label: "Chinese (Mainland China), simplified characters" },
54+
{ value: "zh-HK", label: "Chinese (Hong Kong), traditional characters" },
55+
{ value: "zh-TW", label: "Chinese (Taiwan), traditional characters" }
56+
];
57+
58+
export const numberingSystemOptions = [
59+
{ value: undefined, label: "Default" },
60+
{ value: "arab", label: "العربية-الهندية Arabic-Indic" },
61+
{ value: "arabext", label: "العربية-الهندية Extended Arabic-Indic" },
62+
{ value: "bali", label: "Balinese" },
63+
{ value: "beng", label: "বাংলা Bangla" },
64+
{ value: "deva", label: "देवनागरी Devanagari" },
65+
{ value: "fullwide", label: "Latin Full Width" },
66+
{ value: "gujr", label: "ગુજરાતી Gujarati" },
67+
{ value: "guru", label: "ਗੁਰਮੁਖੀ Gurmukhi" },
68+
{ value: "hanidec", label: "Han" },
69+
{ value: "khmr", label: "Khmer" },
70+
{ value: "knda", label: "ಕನ್ನಡ Kannada" },
71+
{ value: "laoo", label: "Laoo" },
72+
{ value: "latn", label: "Latin" },
73+
{ value: "limb", label: "Limbu" },
74+
{ value: "mlym", label: "മലയാളം Malayalam" },
75+
{ value: "mong", label: "Mongolian" },
76+
{ value: "mymr", label: "Myanmar" },
77+
{ value: "orya", label: "ଓଡ଼ିଆ Odia" },
78+
{ value: "tamldec", label: "தமிழ் Tamil" },
79+
{ value: "telu", label: "తెలుగు Telugu" },
80+
{ value: "thai", label: "คนไทย Thai" },
81+
{ value: "tibt", label: "བོད་སྐད་ Tibetan" }
82+
];
83+
84+
export const calendarTypeOptions = [
85+
{ value: undefined, label: "Default" },
86+
{ value: "buddhist", label: "☸️ Buddhist" },
87+
{ value: "chinese", label: "🐲 Chinese" },
88+
{ value: "coptic", label: "🌍 Coptic" },
89+
{ value: "ethiopia", label: "🌍 Ethiopia" },
90+
{ value: "ethiopic", label: "🌍 Ethiopic" },
91+
{ value: "gregory", label: "🌐 Gregory" },
92+
{ value: "hebrew", label: "🕍 Hebrew" },
93+
{ value: "indian", label: "🧘 Indian" },
94+
{ value: "islamic", label: "☪ Islamic" },
95+
{ value: "iso8601", label: "🌐 ISO-8601" },
96+
{ value: "japanese", label: "🎎 Japanese" },
97+
{ value: "persian", label: "🐫 Persian" },
98+
{ value: "roc", label: "🐲 Republic of China" }
99+
];
100+
101+
export const hourCycleOptions = [
102+
{ value: undefined, label: "Default" },
103+
{ value: "h11", label: "11-Hours Cycle" },
104+
{ value: "h12", label: "12-Hours Cycle" },
105+
{ value: "h23", label: "23-Hours Cycle" },
106+
{ value: "h24", label: "24-Hours Cycle" }
107+
];
108+
109+
export const dayLabels = [
110+
{ value: 0, label: "Hide" },
111+
{ value: 1, label: "2-Digit" },
112+
{ value: 2, label: "Numeric" }
113+
];
114+
115+
export const monthLabels = [
116+
{ value: 0, label: "Hide" },
117+
{ value: 1, label: "2-Digit" },
118+
{ value: 2, label: "Numeric" },
119+
{ value: 3, label: "Narrow" },
120+
{ value: 4, label: "Short" },
121+
{ value: 5, label: "Long" }
122+
];
123+
124+
export const yearLabels = [
125+
{ value: 0, label: "Hide" },
126+
{ value: 1, label: "2-Digit" },
127+
{ value: 2, label: "Numeric" }
128+
];
129+
130+
export const weekdayLabels = [
131+
{ value: 0, label: "Hide" },
132+
{ value: 1, label: "Narrow" },
133+
{ value: 2, label: "Short" },
134+
{ value: 3, label: "Long" }
135+
];
136+
137+
export const eraLabels = [
138+
{ value: 0, label: "Hide" },
139+
{ value: 1, label: "Narrow" },
140+
{ value: 2, label: "Short" },
141+
{ value: 3, label: "Long" }
142+
];
143+
144+
export const hourLabels = [
145+
{ value: 0, label: "Hide" },
146+
{ value: 1, label: "2-Digit" },
147+
{ value: 2, label: "Numeric" }
148+
];
149+
150+
export const minuteLabels = [
151+
{ value: 0, label: "Hide" },
152+
{ value: 1, label: "2-Digit" },
153+
{ value: 2, label: "Numeric" }
154+
];
155+
156+
export const secondLabels = [
157+
{ value: 0, label: "Hide" },
158+
{ value: 1, label: "2-Digit" },
159+
{ value: 2, label: "Numeric" }
160+
];
161+
162+
export const timeZoneNameLabels = [
163+
{ value: 0, label: "Hide" },
164+
{ value: 1, label: "Short" },
165+
{ value: 2, label: "Long" }
166+
];
167+
168+
export const defaultValue = {
169+
locale: {
170+
language: languageOptions[0],
171+
numberingSystem: numberingSystemOptions[0],
172+
calendarType: calendarTypeOptions[0],
173+
hourCycle: hourCycleOptions[0]
174+
},
175+
date: {
176+
day: 0,
177+
month: 0,
178+
year: 0,
179+
weekday: 0,
180+
era: 0
181+
},
182+
time: {
183+
hour: 0,
184+
minute: 0,
185+
second: 0,
186+
timeZoneName: 0
187+
}
188+
};

‎src/components/app-component/index.jsx

Lines changed: 20 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -3,58 +3,41 @@ import FormatPickerComponent from "../format-picker-component";
33
import FormatPreviewComponent from "../format-preview-component";
44
import RightFixedButtonComponent from "../right-fixed-button-component";
55
import LeftFixedButtonComponent from "../left-fixed-button-component";
6+
import { defaultValue } from "../../assets";
67

78
export default function AppComponent() {
8-
const initialState = {
9-
localeInfo: {
10-
language: undefined,
11-
numberingSystem: undefined,
12-
calendarType: undefined,
13-
hourCycle: undefined
14-
},
15-
options: {
16-
day: undefined,
17-
month: undefined,
18-
year: undefined,
19-
weekday: undefined,
20-
era: undefined,
21-
hour: undefined,
22-
minute: undefined,
23-
second: undefined,
24-
timeZoneName: undefined
25-
}
26-
};
27-
28-
const [intlJSON, setIntlJSON] = useState(initialState);
9+
const [value, setValue] = useState(defaultValue);
2910

30-
function setLocaleInfo(localeInfo) {
31-
const locale = { ...intlJSON.localeInfo, ...localeInfo };
32-
setIntlJSON({ localeInfo: locale, options: intlJSON.options });
11+
function setLocale(locale) {
12+
const newValue = { ...value, locale };
13+
setValue(newValue);
3314
}
3415

3516
function setDate(date) {
36-
const options = { ...intlJSON.options, ...date };
37-
setIntlJSON({ localeInfo: intlJSON.localeInfo, options });
17+
const newValue = { ...value, date };
18+
setValue(newValue);
3819
}
3920

4021
function setTime(time) {
41-
const options = { ...intlJSON.options, ...time };
42-
setIntlJSON({ localeInfo: intlJSON.localeInfo, options });
22+
const newValue = { ...value, time };
23+
setValue(newValue);
4324
}
4425

45-
function onReset() {
46-
setIntlJSON(initialState);
26+
function reset() {
27+
setValue(defaultValue);
4728
}
4829

30+
const onChange = {
31+
locale: setLocale,
32+
date: setDate,
33+
time: setTime
34+
};
35+
4936
return (
5037
<React.Fragment>
51-
<FormatPreviewComponent intlJSON={intlJSON} />
52-
<FormatPickerComponent
53-
localeInfoOnChange={setLocaleInfo}
54-
dateOnChange={setDate}
55-
timeOnChange={setTime}
56-
/>
57-
<LeftFixedButtonComponent onReset={onReset} />
38+
<FormatPreviewComponent value={value} />
39+
<FormatPickerComponent onChange={onChange} value={value} />
40+
<LeftFixedButtonComponent onClick={reset} />
5841
<RightFixedButtonComponent />
5942
</React.Fragment>
6043
);

0 commit comments

Comments
 (0)