@autobusal/common 0.0.6 → 0.0.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/ChangeLanguage/ChangeLanguage.tsx +17 -14
- package/ChangeLanguage/styles.ts +10 -16
- package/package.json +1 -1
|
@@ -3,43 +3,46 @@ import { TFunction, i18n } from 'i18next';
|
|
|
3
3
|
import { IoGlobeOutline } from 'react-icons/io5';
|
|
4
4
|
import { useOutside } from '@autobusal/hooks';
|
|
5
5
|
import { Container, Title, ContainerButtons, ButtonChange } from './styles';
|
|
6
|
+
import { GetSettings } from '@autobusal/providers/services';
|
|
6
7
|
|
|
7
8
|
interface Props {
|
|
8
|
-
breakpoints: any
|
|
9
9
|
type: 'top' | 'bottom'
|
|
10
10
|
t: TFunction<'public'>
|
|
11
11
|
i18n: i18n
|
|
12
12
|
onClose: () => void
|
|
13
13
|
}
|
|
14
14
|
|
|
15
|
-
const ChangeLanguage = ({
|
|
15
|
+
const ChangeLanguage = ({ type, t, i18n, onClose }: Props): JSX.Element => {
|
|
16
16
|
const ref = useRef<HTMLDivElement>(null);
|
|
17
17
|
|
|
18
|
+
const { data } = GetSettings();
|
|
19
|
+
|
|
18
20
|
useOutside(ref, onClose);
|
|
19
21
|
|
|
20
22
|
const onChange = (language: string): void => {
|
|
21
23
|
// @todo: sa o fac cand fac in private
|
|
22
|
-
|
|
23
24
|
i18n.changeLanguage(language);
|
|
24
|
-
|
|
25
|
+
|
|
26
|
+
// @todo: sa fac refresh pt limba noua?
|
|
25
27
|
|
|
26
28
|
onClose();
|
|
27
29
|
};
|
|
28
30
|
|
|
31
|
+
const available = data.preferences.languages.available;
|
|
32
|
+
|
|
33
|
+
const items = available.map(item => (
|
|
34
|
+
<ButtonChange onClick={ () => onChange(item) }>
|
|
35
|
+
<IoGlobeOutline />
|
|
36
|
+
{ `${ t('languages.change', { ns: 'common' }) } ${ t(`languages.${ item }`, { ns: 'common' }) }` }
|
|
37
|
+
</ButtonChange>
|
|
38
|
+
));
|
|
39
|
+
|
|
29
40
|
return (
|
|
30
|
-
<Container ref={ ref } $type={ type } $
|
|
41
|
+
<Container ref={ ref } $type={ type } $languages={ available.length }>
|
|
31
42
|
<Title>{ t('languages.title', { ns: 'common' }) }</Title>
|
|
32
43
|
|
|
33
44
|
<ContainerButtons>
|
|
34
|
-
|
|
35
|
-
<IoGlobeOutline />
|
|
36
|
-
{ `${ t('languages.change', { ns: 'common' }) } ${ t('languages.en', { ns: 'common' }) }` }
|
|
37
|
-
</ButtonChange>
|
|
38
|
-
|
|
39
|
-
<ButtonChange onClick={ () => onChange('sq') }>
|
|
40
|
-
<IoGlobeOutline />
|
|
41
|
-
{ `${ t('languages.change', { ns: 'common' }) } ${ t('languages.sq', { ns: 'common' }) }` }
|
|
42
|
-
</ButtonChange>
|
|
45
|
+
{ items }
|
|
43
46
|
</ContainerButtons>
|
|
44
47
|
</Container>
|
|
45
48
|
);
|
package/ChangeLanguage/styles.ts
CHANGED
|
@@ -2,35 +2,29 @@ import styled, { css } from 'styled-components';
|
|
|
2
2
|
|
|
3
3
|
export const Container = styled.div<{
|
|
4
4
|
$type: 'top' | 'bottom'
|
|
5
|
-
$
|
|
5
|
+
$languages: number
|
|
6
6
|
}>`
|
|
7
7
|
position: absolute;
|
|
8
|
-
|
|
9
|
-
left:
|
|
8
|
+
bottom: calc((-1 * ${ props => props.$languages } * 27px) - 50px - 8px);
|
|
9
|
+
left: 0;
|
|
10
10
|
z-index: 101;
|
|
11
|
-
width:
|
|
11
|
+
width: 200px;
|
|
12
12
|
padding: 10px;
|
|
13
13
|
background-color: ${ props => props.theme.background.normal };
|
|
14
14
|
box-shadow: ${ props => props.theme.boxShadow };
|
|
15
15
|
border-radius: ${ props => props.theme.borderRadius };
|
|
16
16
|
|
|
17
|
-
// // @todo: de verificat in private
|
|
18
|
-
// ${ props => props.$type === 'bottom' && css`
|
|
19
|
-
// // top: auto;
|
|
20
|
-
// // bottom: 30px;
|
|
21
|
-
// ` }
|
|
22
|
-
|
|
23
|
-
@media (min-width: ${ props => props.$breakpoints.DESKTOP }px) {
|
|
24
|
-
top: 25px;
|
|
25
|
-
right: 0;
|
|
26
|
-
left: auto;
|
|
27
|
-
}
|
|
17
|
+
// // // @todo: de verificat in private
|
|
18
|
+
// // ${ props => props.$type === 'bottom' && css`
|
|
19
|
+
// // // top: auto;
|
|
20
|
+
// // // bottom: 30px;
|
|
21
|
+
// // ` }
|
|
28
22
|
`;
|
|
29
23
|
|
|
30
24
|
export const Title = styled.h5`
|
|
31
25
|
text-align: center;
|
|
32
26
|
font-size: ${ props => props.theme.size.s };
|
|
33
|
-
margin-bottom:
|
|
27
|
+
margin-bottom: 10px;
|
|
34
28
|
`;
|
|
35
29
|
|
|
36
30
|
export const ContainerButtons = styled.div`
|