Skip to content

Commit 3cc0966

Browse files
veroglezveroglez
committed
feat(@clayui/language-picker): LPD-45714 Add LanguagePicker component
1 parent 66fede5 commit 3cc0966

File tree

8 files changed

+319
-0
lines changed

8 files changed

+319
-0
lines changed

‎packages/clay-language-picker/BREAKING.md

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
# List of Breaking Changes for 4.x

‎packages/clay-language-picker/CHANGELOG.md

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
# Change Log
2+
3+
All notable changes to this project will be documented in this file.
4+
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.

‎packages/clay-language-picker/README.md

+19
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
# `@clayui/language-picker`
2+
3+
A Picker used to select different languages. It also has the possibility of being used to select translation languages.
4+
5+
- [Documentation](https://clayui.com/docs/components/language-picker.html)
6+
- [Changelog](./CHANGELOG.md)
7+
- [Breaking change schedule](./BREAKING.md)
8+
9+
## Install
10+
11+
Run `yarn`
12+
13+
```shell
14+
yarn add @clayui/language-picker
15+
```
16+
17+
## Contribute
18+
19+
We'd love to get contributions from you! Please, check our [Contributing Guidelines](https://github.com/liferay/clay/blob/master/CONTRIBUTING.md) to see how you can help us improve.

‎packages/clay-language-picker/package.json

+43
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
{
2+
"name": "@clayui/language-picker",
3+
"version": "1.0.0",
4+
"description": "ClayLanguagePicker component",
5+
"license": "BSD-3-Clause",
6+
"repository": "https://github.com/liferay/clay",
7+
"engines": {
8+
"node": ">=0.12.0",
9+
"npm": ">=3.0.0"
10+
},
11+
"main": "lib/index.js",
12+
"types": "lib/index.d.ts",
13+
"ts:main": "src/index.tsx",
14+
"files": [
15+
"lib"
16+
],
17+
"scripts": {
18+
"build": "cross-env NODE_ENV=production babel src --root-mode upward --out-dir lib --extensions .ts,.tsx",
19+
"buildTypes": "cross-env NODE_ENV=production tsc --project ./tsconfig.declarations.json",
20+
"test": "jest --config ../../jest.config.js"
21+
},
22+
"keywords": [
23+
"clay",
24+
"react"
25+
],
26+
"dependencies": {
27+
"@clayui/button": "^3.116.0",
28+
"@clayui/core": "^3.124.0",
29+
"@clayui/icon": "^3.111.0",
30+
"@clayui/label": "^3.111.0",
31+
"@clayui/layout": "^3.111.0",
32+
"@clayui/shared": "^3.119.0",
33+
"classnames": "^2.2.6"
34+
},
35+
"peerDependencies": {
36+
"@clayui/css": "3.x",
37+
"react": "^16.12.0",
38+
"react-dom": "^16.12.0"
39+
},
40+
"browserslist": [
41+
"extends browserslist-config-clay"
42+
]
43+
}

‎packages/clay-language-picker/src/index.tsx

+176
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,176 @@
1+
/**
2+
* SPDX-FileCopyrightText: © 2020 Liferay, Inc. <https://liferay.com>
3+
* SPDX-License-Identifier: BSD-3-Clause
4+
*/
5+
6+
import ClayButton from '@clayui/button';
7+
import {Option, Picker} from '@clayui/core';
8+
import ClayIcon from '@clayui/icon';
9+
import ClayLayout from '@clayui/layout';
10+
import {InternalDispatch, sub} from '@clayui/shared';
11+
import classNames from 'classnames';
12+
import React from 'react';
13+
14+
type Item = {
15+
href?: string;
16+
id: string;
17+
label: string;
18+
symbol: string;
19+
};
20+
21+
type Props = {
22+
/**
23+
* Flag to indicate if the Picker is active or not (controlled).
24+
*/
25+
active?: boolean;
26+
27+
/**
28+
* Class names for the trigger.
29+
*/
30+
31+
classNamesTrigger?: string;
32+
33+
/**
34+
* The id of the component.
35+
*/
36+
id?: string;
37+
38+
/**
39+
* Labels for the component
40+
*/
41+
labels?: {
42+
default: string;
43+
trigger: string;
44+
translated: string;
45+
untranslated: string;
46+
};
47+
48+
/**
49+
* List of locales to allow localization for
50+
*/
51+
locales: Array<Item>;
52+
53+
/**
54+
* Callback for when the active state changes (controlled).
55+
*/
56+
57+
onActiveChange?: InternalDispatch<boolean>;
58+
59+
/**
60+
* Callback that gets called when a selected locale gets changed
61+
*/
62+
onSelectedLocaleChange: (val: React.Key) => void;
63+
64+
/**
65+
* Exposes the currently selected locale
66+
*/
67+
selectedLocale: Item;
68+
69+
/**
70+
* Flag to show the picker in small size.
71+
*/
72+
small?: boolean;
73+
74+
/**
75+
* Path to the location of the spritemap resource.
76+
*/
77+
spritemap?: string;
78+
};
79+
80+
const Trigger = React.forwardRef<HTMLButtonElement>(
81+
(
82+
{
83+
ariaLabelTrigger,
84+
classNamesTrigger,
85+
selectedLocale,
86+
small,
87+
spritemap,
88+
...otherProps
89+
}: Record<string, any>,
90+
ref
91+
) => {
92+
return (
93+
<ClayButton
94+
{...otherProps}
95+
aria-label={ariaLabelTrigger}
96+
className={classNames(classNamesTrigger, 'form-control-select')}
97+
displayType="secondary"
98+
ref={ref}
99+
size={small ? 'sm' : undefined}
100+
>
101+
<span className="inline-item-before">
102+
<ClayIcon
103+
spritemap={spritemap}
104+
symbol={selectedLocale.symbol}
105+
/>
106+
</span>
107+
</ClayButton>
108+
);
109+
}
110+
);
111+
112+
Trigger.displayName = 'Trigger';
113+
114+
const ClayLanguagePicker = ({
115+
labels = {
116+
default: 'Default',
117+
translated: 'Translated',
118+
trigger: 'Select a language, current language: {0}.',
119+
untranslated: 'Untranslated',
120+
},
121+
active,
122+
classNamesTrigger,
123+
id,
124+
locales,
125+
onActiveChange,
126+
onSelectedLocaleChange,
127+
selectedLocale,
128+
small,
129+
spritemap,
130+
}: Props) => {
131+
return (
132+
<Picker
133+
active={active}
134+
ariaLabelTrigger={sub(labels.trigger, [selectedLocale.label])}
135+
as={Trigger}
136+
classNamesTrigger={classNamesTrigger}
137+
id={id}
138+
items={locales}
139+
onActiveChange={onActiveChange}
140+
onSelectionChange={(id: React.Key) => {
141+
onSelectedLocaleChange(id);
142+
}}
143+
selectedKey={selectedLocale.id}
144+
selectedLocale={selectedLocale}
145+
small={small}
146+
spritemap={spritemap}
147+
>
148+
{(locale) => {
149+
return (
150+
<Option key={locale.id} textValue={locale.label}>
151+
<ClayLayout.ContentRow containerElement="span">
152+
<ClayLayout.ContentCol
153+
containerElement="span"
154+
expand
155+
>
156+
<ClayLayout.ContentSection>
157+
<ClayIcon
158+
className="inline-item inline-item-before"
159+
spritemap={spritemap}
160+
symbol={locale.symbol}
161+
/>
162+
163+
{locale.label}
164+
</ClayLayout.ContentSection>
165+
</ClayLayout.ContentCol>
166+
</ClayLayout.ContentRow>
167+
</Option>
168+
);
169+
}}
170+
</Picker>
171+
);
172+
};
173+
174+
ClayLanguagePicker.displayName = 'ClayLanguagePicker';
175+
176+
export default ClayLanguagePicker;

‎packages/clay-language-picker/stories/LanguagePicker.stories.tsx

+64
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
/**
2+
* SPDX-FileCopyrightText: © 2020 Liferay, Inc. <https://liferay.com>
3+
* SPDX-License-Identifier: BSD-3-Clause
4+
*/
5+
6+
import React, {useState} from 'react';
7+
8+
import ClayLanguagePicker from '../src';
9+
10+
export default {
11+
component: ClayLanguagePicker,
12+
title: 'Design System/Components/LanguagePicker',
13+
};
14+
15+
export const Default = (args: any) => {
16+
const locales = [
17+
{
18+
displayName: 'English (United States)',
19+
id: 'en_US',
20+
label: 'en-US',
21+
symbol: 'en-us',
22+
},
23+
{
24+
displayName: 'Arabic (Saudi Arabia)',
25+
id: 'ar_SA',
26+
label: 'ar-SA',
27+
symbol: 'ar-sa',
28+
},
29+
{
30+
displayName: 'Catalan (Spain)',
31+
id: 'ca_ES',
32+
label: 'ca-ES',
33+
symbol: 'ca-es',
34+
},
35+
{
36+
displayName: 'Dutch (Netherlands)',
37+
id: 'nl_NL',
38+
label: 'nl-NL',
39+
symbol: 'nl-nl',
40+
},
41+
];
42+
43+
const [selectedLocale, setSelectedLocale] = useState<any>(locales[0]);
44+
45+
return (
46+
<ClayLanguagePicker
47+
id="languagePicker"
48+
locales={locales}
49+
onSelectedLocaleChange={(id) => {
50+
const locale = locales.find((locale) => locale.id === id);
51+
52+
if (locale) {
53+
setSelectedLocale(locale);
54+
}
55+
}}
56+
selectedLocale={selectedLocale}
57+
small={args.small}
58+
/>
59+
);
60+
};
61+
62+
Default.args = {
63+
small: false,
64+
};

‎packages/clay-language-picker/tsconfig.declarations.json

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
{
2+
"compilerOptions": {
3+
"baseUrl": ".",
4+
"declarationDir": "./lib"
5+
},
6+
"extends": "../../tsconfig.declarations.json",
7+
"include": ["src"]
8+
}

‎packages/clay-language-picker/tsconfig.json

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
{
2+
"extends": "../../tsconfig.json",
3+
"include": ["src"]
4+
}

0 commit comments

Comments
 (0)