Skip to content

Commit 41739a3

Browse files
christiansamaniego-oktachristiansamaniego-okta
committed
use react-select to add dropdown
1 parent 5d183b5 commit 41739a3

File tree

7 files changed

+107
-77
lines changed

7 files changed

+107
-77
lines changed

‎src/features/common/components/bars/ribbon/ribbon.component.tsx‎

Lines changed: 0 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,6 @@ import {
1414
import { RibbonPickerComponent } from "@/features/common/components/bars/ribbon/ribbon-picker/ribbon-picker.component";
1515
import { LightIconComponent } from "@/features/common/components/bars/ribbon/assets/light-icon.component";
1616
import { DarkIconComponent } from "@/features/common/components/bars/ribbon/assets/dark-icon.component";
17-
import { GlobeIconComponent } from "@/features/common/components/bars/ribbon/assets/globe-icon.component";
1817
import { ThemeModel } from "@/features/common/models/theme.model";
1918
import { useAppStore } from "@/features/common/services/app.store";
2019
import { SystemIconComponent } from "@/features/common/components/bars/ribbon/assets/system-icon.component";
@@ -37,10 +36,6 @@ export const RibbonComponent: React.FC<RibbonComponentProps> = ({
3736
}) => {
3837
const theme$ = useAppStore((state) => state.theme$);
3938

40-
const currentLanguage = dictionary.languagePicker.options.filter(
41-
(element) => element.code === languageCode,
42-
)[0];
43-
4439
const sanitizedThemePickerCodeValue = useMemo(() => {
4540
return getSanitizedThemePickerCodeValue(themeCode);
4641
}, [themeCode]);
@@ -85,25 +80,6 @@ export const RibbonComponent: React.FC<RibbonComponentProps> = ({
8580
[dictionary.themePicker.options],
8681
);
8782

88-
const languageOptions = useMemo(
89-
() =>
90-
dictionary.languagePicker.options.map((option) => {
91-
return {
92-
code: option.code,
93-
full: {
94-
...option,
95-
icon: null,
96-
},
97-
compact: {
98-
...option,
99-
label: option.code.toUpperCase(),
100-
icon: null,
101-
},
102-
};
103-
}),
104-
[dictionary.languagePicker.options],
105-
);
106-
10783
const handleThemeSelection = useCallback(
10884
async (value: ThemePickerCodeValues) => {
10985
const themePreference = await savePreferredThemeInCookie(
@@ -202,21 +178,6 @@ export const RibbonComponent: React.FC<RibbonComponentProps> = ({
202178
listLabel: dictionary.themePicker.list.ariaLabel,
203179
}}
204180
/>
205-
{dictionary.languagePicker.options.length > 1 && (
206-
<RibbonPickerComponent
207-
icon={<GlobeIconComponent />}
208-
label={currentLanguage.label}
209-
compactLabel={currentLanguage.code.toUpperCase()}
210-
languageCode={languageCode}
211-
selectedOptionCode={languageCode}
212-
handleSelection={handleLanguageSelection}
213-
options={languageOptions}
214-
aria={{
215-
buttonLabel: dictionary.languagePicker.button.ariaLabel,
216-
listLabel: dictionary.languagePicker.list.ariaLabel,
217-
}}
218-
/>
219-
)}
220181
</div>
221182
</BoxComponent>
222183
</>

‎src/features/common/components/footer/footer.component.tsx‎

Lines changed: 69 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
"use client";
22

33
import React, { MouseEvent, useState } from "react";
4+
import Select, { SingleValue, OptionsOrGroups, GroupBase, NonceProvider } from "react-select";
45
import { FooterIconsComponent } from "./footer-Icons.component";
56
import { MonoFont, SecondaryFont } from "@/libs/theme/fonts";
67
import Image from "next/image";
@@ -18,6 +19,8 @@ import { SiteBrandComponent } from "@/features/common/components/site-brand/site
1819
import { Button } from "react-aria-components";
1920
import { Auth0LogoComponent } from "../../assets/auth0-logo.component";
2021
import { getBrandDictionary } from "@/features/localization/services/brand-dictionary.service";
22+
import { savePreferredLanguage } from "@/features/localization/services/ui-language.utils";
23+
import { UiLanguageModel } from "../../models/ui-language.model";
2124

2225
interface FooterComponentProps {
2326
languageCode: string;
@@ -28,8 +31,19 @@ export const FooterComponent: React.FC<FooterComponentProps> = ({
2831
languageCode,
2932
dictionary,
3033
}) => {
34+
const currentLanguage = dictionary.languagePicker.options.filter(
35+
(element) => element.value === languageCode
36+
)[0];
37+
38+
const handleChange = (selection: SingleValue<UiLanguageModel>) => {
39+
if (!selection) {
40+
return;
41+
}
42+
savePreferredLanguage(selection.value);
43+
};
44+
3145
const [modalState, setModalState] = useState<ModalStateValues>(
32-
ModalStateValues.CLOSED,
46+
ModalStateValues.CLOSED
3347
);
3448
const images = getBrandDictionary(languageCode);
3549

@@ -64,7 +78,10 @@ export const FooterComponent: React.FC<FooterComponentProps> = ({
6478
contentClassName={styles.content}
6579
>
6680
<div className={styles.siteLogo}>
67-
<SiteBrandComponent path={languagePathPrefix} languageCode={languageCode} />
81+
<SiteBrandComponent
82+
path={languagePathPrefix}
83+
languageCode={languageCode}
84+
/>
6885
</div>
6986
<div className={styles.resources}>
7087
<span className={clsx(styles.resources__title, MonoFont.className)}>
@@ -110,7 +127,7 @@ export const FooterComponent: React.FC<FooterComponentProps> = ({
110127
}}
111128
className={clsx(
112129
styles.resource__button,
113-
SecondaryFont.className,
130+
SecondaryFont.className
114131
)}
115132
>
116133
{trigger.text}
@@ -158,11 +175,59 @@ export const FooterComponent: React.FC<FooterComponentProps> = ({
158175
target="_blank"
159176
href="https://auth0.com/"
160177
>
161-
<Auth0LogoComponent title={images.tooltip}/>
178+
<Auth0LogoComponent title={images.tooltip} />
162179
</Link>
163180
<span className={styles.bottomSection__copyright}>
164181
{dictionary.copyright}
165182
</span>
183+
{dictionary.languagePicker.options.length > 1 && (
184+
<Select
185+
aria-label={"Language picker"}
186+
className={styles.languageSelect__container}
187+
onChange={handleChange}
188+
options={dictionary.languagePicker.options as OptionsOrGroups<UiLanguageModel, GroupBase<UiLanguageModel>>}
189+
menuPortalTarget={document.body}
190+
classNamePrefix={"language-select"}
191+
isSearchable={false}
192+
placeholder={currentLanguage.label}
193+
value={currentLanguage}
194+
styles={{
195+
control: (base) => ({
196+
...base,
197+
background: "transparent",
198+
border: "none",
199+
borderRadius: "0px",
200+
display: "flex",
201+
alignItems: "center",
202+
cursor: "pointer",
203+
minHeight: "2.5rem",
204+
boxSizing: "border-box",
205+
}),
206+
207+
input: (base) => ({
208+
...base,
209+
margin: "0px",
210+
}),
211+
indicatorSeparator: () => ({
212+
display: "none",
213+
}),
214+
indicatorsContainer: (base) => ({
215+
...base,
216+
height: "20px",
217+
alignSelf: "center",
218+
}),
219+
dropdownIndicator: (base) => ({
220+
padding: "0px",
221+
height: "100%",
222+
alignSelf: "center",
223+
}),
224+
singleValue: (base) => ({
225+
...base,
226+
color: "unset",
227+
})
228+
}}
229+
></Select>
230+
)}
166231
</div>
167232
</BoxComponent>
168233
</footer>

‎src/features/common/components/footer/footer.module.scss‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -267,3 +267,7 @@
267267

268268
color: var(--color_fg_default);
269269
}
270+
271+
.languageSelect__container {
272+
color: var(--color_fg_default);
273+
}

‎src/features/common/models/ui-language.model.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
11
export interface UiLanguageModel {
2-
code: string;
2+
value: string;
33
label: string;
44
}

‎src/features/localization/dictionaries/layout/en.tsx‎

Lines changed: 16 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -39,20 +39,6 @@ export const enLayoutDictionary: LayoutDictionaryModel = {
3939
},
4040
],
4141
},
42-
languagePicker: {
43-
button: {
44-
ariaLabel: "Select page language",
45-
},
46-
list: {
47-
ariaLabel: "list of page languages",
48-
},
49-
options: [
50-
{
51-
code: "en",
52-
label: "English",
53-
},
54-
],
55-
},
5642
},
5743
header: {
5844
links: [
@@ -162,6 +148,20 @@ export const enLayoutDictionary: LayoutDictionaryModel = {
162148
},
163149
],
164150
},
151+
languagePicker: {
152+
button: {
153+
ariaLabel: "Select page language",
154+
},
155+
list: {
156+
ariaLabel: "list of page languages",
157+
},
158+
options: [
159+
{
160+
value: "en",
161+
label: "English",
162+
},
163+
],
164+
},
165165
},
166166
errors: {
167167
notFound: {
@@ -187,8 +187,8 @@ export const enLayoutDictionary: LayoutDictionaryModel = {
187187
};
188188

189189
if (withJapanese) {
190-
enLayoutDictionary.ribbon.languagePicker.options.push({
190+
enLayoutDictionary.footer.languagePicker.options.push({
191191
label: "日本語",
192-
code: "ja",
192+
value: "ja",
193193
});
194194
}

‎src/features/localization/dictionaries/layout/ja.tsx‎

Lines changed: 16 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -39,20 +39,6 @@ export const jaLayoutDictionary: LayoutDictionaryModel = {
3939
},
4040
],
4141
},
42-
languagePicker: {
43-
button: {
44-
ariaLabel: "ページの言語を選択してください",
45-
},
46-
list: {
47-
ariaLabel: "ページ言語の一覧",
48-
},
49-
options: [
50-
{
51-
code: "en",
52-
label: "English",
53-
},
54-
],
55-
},
5642
},
5743
header: {
5844
links: [
@@ -162,6 +148,20 @@ export const jaLayoutDictionary: LayoutDictionaryModel = {
162148
},
163149
],
164150
},
151+
languagePicker: {
152+
button: {
153+
ariaLabel: "ページの言語を選択してください",
154+
},
155+
list: {
156+
ariaLabel: "ページ言語の一覧",
157+
},
158+
options: [
159+
{
160+
value: "en",
161+
label: "English",
162+
},
163+
],
164+
},
165165
},
166166
errors: {
167167
notFound: {
@@ -187,8 +187,8 @@ export const jaLayoutDictionary: LayoutDictionaryModel = {
187187
};
188188

189189
if (withJapanese) {
190-
jaLayoutDictionary.ribbon.languagePicker.options.push({
190+
jaLayoutDictionary.footer.languagePicker.options.push({
191191
label: "日本語",
192-
code: "ja",
192+
value: "ja",
193193
});
194194
}

‎src/features/localization/models/layout-dictionary.model.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,6 @@ export interface LayoutDictionaryModel {
2626
};
2727
};
2828
themePicker: RibbonPickerModel<ThemeModel>;
29-
languagePicker: RibbonPickerModel<UiLanguageModel>;
3029
};
3130
header: {
3231
links: LinkMetadataModel[];
@@ -69,6 +68,7 @@ export interface LayoutDictionaryModel {
6968
id: string;
7069
}[];
7170
};
71+
languagePicker: RibbonPickerModel<UiLanguageModel>;
7272
};
7373
errors: {
7474
notFound: {

0 commit comments

Comments
 (0)