@pushwoosh/smart-components-kit 1.0.3 → 1.0.5
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/DynamicContentPicker/styled.d.ts +51 -4
- package/DynamicContentPicker/styled.js +5 -2
- package/LanguagesSelector/LanguagesModal.d.ts +9 -0
- package/LanguagesSelector/LanguagesModal.js +30 -0
- package/LanguagesSelector/LanguagesSelectForm.d.ts +14 -0
- package/LanguagesSelector/LanguagesSelectForm.js +69 -0
- package/LanguagesSelector/LanguagesSelectFormLoader.d.ts +9 -0
- package/LanguagesSelector/LanguagesSelectFormLoader.js +54 -0
- package/LanguagesSelector/LanguagesSelector.d.ts +11 -0
- package/LanguagesSelector/LanguagesSelector.js +102 -0
- package/LanguagesSelector/constants.d.ts +2 -0
- package/LanguagesSelector/constants.js +2 -0
- package/LanguagesSelector/index.d.ts +1 -0
- package/LanguagesSelector/index.js +1 -0
- package/LanguagesSelector/styled.d.ts +57 -0
- package/LanguagesSelector/styled.js +11 -0
- package/LanguagesSelector/utils.d.ts +3 -0
- package/LanguagesSelector/utils.js +29 -0
- package/PlatformsConfigurationDrawer/PlatformsConfigurationDrawer.js +4 -3
- package/PlatformsConfigurationDrawer/components/MobilePage/MobilePage.js +0 -6
- package/PlatformsConfigurationDrawer/types.d.ts +1 -0
- package/index.d.ts +1 -0
- package/index.js +2 -1
- package/package.json +8 -8
|
@@ -1,16 +1,63 @@
|
|
|
1
|
+
import { Color, Shadow, ShapeRadius } from '@pushwoosh/kit-constants';
|
|
1
2
|
export declare const TagPickerDiv: import("styled-components").StyledComponent<"div", any, {
|
|
2
3
|
$alignContent?: "end" | "start" | "center" | "space-between" | "space-around" | "space-evenly" | "stretch" | undefined;
|
|
3
4
|
$alignItems?: "end" | "start" | "center" | "stretch" | "baseline" | undefined;
|
|
4
|
-
$
|
|
5
|
+
$bgColor?: string | undefined;
|
|
6
|
+
$border?: string | ({
|
|
7
|
+
top?: string | undefined;
|
|
8
|
+
right?: string | undefined;
|
|
9
|
+
bottom?: string | undefined;
|
|
10
|
+
left?: string | undefined;
|
|
11
|
+
} | {
|
|
12
|
+
horizontal: string;
|
|
13
|
+
top?: string | undefined;
|
|
14
|
+
bottom?: string | undefined;
|
|
15
|
+
} | {
|
|
16
|
+
vertical: string;
|
|
17
|
+
right?: string | undefined;
|
|
18
|
+
left?: string | undefined;
|
|
19
|
+
}) | undefined;
|
|
20
|
+
$borderRadius?: (string | number) | undefined;
|
|
21
|
+
$boxShadow?: string | undefined;
|
|
22
|
+
$gap?: (string | number) | undefined;
|
|
5
23
|
$gridAutoFlow?: "row" | "column" | "dense" | "row dense" | "column dense" | undefined;
|
|
6
24
|
$justifyContent?: "end" | "start" | "center" | "space-between" | "space-around" | "space-evenly" | "stretch" | undefined;
|
|
7
25
|
$justifyItems?: "end" | "start" | "center" | "stretch" | "baseline" | undefined;
|
|
8
|
-
$margin?: string | number |
|
|
9
|
-
|
|
26
|
+
$margin?: (string | number) | ({
|
|
27
|
+
top?: (string | number) | undefined;
|
|
28
|
+
right?: (string | number) | undefined;
|
|
29
|
+
bottom?: (string | number) | undefined;
|
|
30
|
+
left?: (string | number) | undefined;
|
|
31
|
+
} | {
|
|
32
|
+
horizontal: string | number;
|
|
33
|
+
top?: (string | number) | undefined;
|
|
34
|
+
bottom?: (string | number) | undefined;
|
|
35
|
+
} | {
|
|
36
|
+
vertical: string | number;
|
|
37
|
+
right?: (string | number) | undefined;
|
|
38
|
+
left?: (string | number) | undefined;
|
|
39
|
+
}) | undefined;
|
|
40
|
+
$padding?: (string | number) | ({
|
|
41
|
+
top?: (string | number) | undefined;
|
|
42
|
+
right?: (string | number) | undefined;
|
|
43
|
+
bottom?: (string | number) | undefined;
|
|
44
|
+
left?: (string | number) | undefined;
|
|
45
|
+
} | {
|
|
46
|
+
horizontal: string | number;
|
|
47
|
+
top?: (string | number) | undefined;
|
|
48
|
+
bottom?: (string | number) | undefined;
|
|
49
|
+
} | {
|
|
50
|
+
vertical: string | number;
|
|
51
|
+
right?: (string | number) | undefined;
|
|
52
|
+
left?: (string | number) | undefined;
|
|
53
|
+
}) | undefined;
|
|
10
54
|
$placeItems?: "end" | "start" | "center" | "stretch" | undefined;
|
|
11
55
|
} & {
|
|
12
56
|
$gridAutoFlow: string;
|
|
13
57
|
} & {
|
|
14
58
|
$gap: number;
|
|
15
59
|
$padding: number;
|
|
16
|
-
|
|
60
|
+
$borderRadius: ShapeRadius;
|
|
61
|
+
$bgColor: Color;
|
|
62
|
+
$boxShadow: Shadow;
|
|
63
|
+
}, "$gridAutoFlow" | "$bgColor" | "$borderRadius" | "$boxShadow" | "$gap" | "$padding">;
|
|
@@ -4,8 +4,11 @@ import { Color, Shadow, ShapeRadius } from '@pushwoosh/kit-constants';
|
|
|
4
4
|
import { Vertical } from '@pushwoosh/kit-helpers';
|
|
5
5
|
export const TagPickerDiv = styled(Vertical).attrs({
|
|
6
6
|
$gap: 16,
|
|
7
|
-
$padding: 16
|
|
7
|
+
$padding: 16,
|
|
8
|
+
$borderRadius: ShapeRadius.CONTROL,
|
|
9
|
+
$bgColor: Color.FROZEN,
|
|
10
|
+
$boxShadow: Shadow.REGULAR
|
|
8
11
|
}).withConfig({
|
|
9
12
|
displayName: "TagPickerDiv",
|
|
10
13
|
componentId: "sc-1blii2o-0"
|
|
11
|
-
})(["width:240px;
|
|
14
|
+
})(["width:240px;", "{width:100%;}"], NativeSelect);
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import { type FC } from 'react';
|
|
2
|
+
type LanguagesModalProps = {
|
|
3
|
+
applicationCode: string;
|
|
4
|
+
initialLanguages: string[];
|
|
5
|
+
onSubmit: (languages: string[]) => void;
|
|
6
|
+
onClose: () => void;
|
|
7
|
+
};
|
|
8
|
+
export declare const LanguagesModal: FC<LanguagesModalProps>;
|
|
9
|
+
export {};
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
import React, { useState } from 'react';
|
|
2
|
+
import { Button, ModalHeader, ModalBody, ModalFooter, ModalTitle } from '@pushwoosh/dumb-components';
|
|
3
|
+
import { Horizontal } from '@pushwoosh/kit-helpers';
|
|
4
|
+
import { LanguagesSelectFormLoader } from './LanguagesSelectFormLoader';
|
|
5
|
+
import { saveLastSelection } from './utils';
|
|
6
|
+
export const LanguagesModal = ({
|
|
7
|
+
applicationCode,
|
|
8
|
+
initialLanguages,
|
|
9
|
+
onSubmit,
|
|
10
|
+
onClose
|
|
11
|
+
}) => {
|
|
12
|
+
const [selectedLanguages, setSelectedLanguages] = useState(initialLanguages);
|
|
13
|
+
return React.createElement(React.Fragment, null, React.createElement(ModalHeader, null, React.createElement(ModalTitle, null, "Select languages")), React.createElement(ModalBody, null, React.createElement(LanguagesSelectFormLoader, {
|
|
14
|
+
application: applicationCode,
|
|
15
|
+
onChange: setSelectedLanguages,
|
|
16
|
+
value: selectedLanguages
|
|
17
|
+
})), React.createElement(ModalFooter, null, React.createElement(Horizontal, {
|
|
18
|
+
"$justifyContent": "end",
|
|
19
|
+
"$gap": 8
|
|
20
|
+
}, React.createElement(Button, {
|
|
21
|
+
color: "secondary",
|
|
22
|
+
onClick: onClose
|
|
23
|
+
}, "Cancel"), React.createElement(Button, {
|
|
24
|
+
color: "primary",
|
|
25
|
+
onClick: () => {
|
|
26
|
+
saveLastSelection(selectedLanguages);
|
|
27
|
+
onSubmit(selectedLanguages);
|
|
28
|
+
}
|
|
29
|
+
}, "Apply"))));
|
|
30
|
+
};
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import { type FC } from 'react';
|
|
2
|
+
type LanguageItem = {
|
|
3
|
+
code: string;
|
|
4
|
+
name: string;
|
|
5
|
+
subscribers: number;
|
|
6
|
+
};
|
|
7
|
+
type LanguagesSelectProps = {
|
|
8
|
+
allLanguageItems: LanguageItem[];
|
|
9
|
+
langs: string[];
|
|
10
|
+
onChange: (languages: string[]) => void;
|
|
11
|
+
systemLanguage?: string;
|
|
12
|
+
};
|
|
13
|
+
export declare const LanguagesSelectForm: FC<LanguagesSelectProps>;
|
|
14
|
+
export {};
|
|
@@ -0,0 +1,69 @@
|
|
|
1
|
+
import React, { useMemo, useState } from 'react';
|
|
2
|
+
import { Checkbox, NativeInput } from '@pushwoosh/dumb-components';
|
|
3
|
+
import { Columns, Horizontal, Vertical } from '@pushwoosh/kit-helpers';
|
|
4
|
+
import { ActionButton } from './styled';
|
|
5
|
+
import { fetchLastSelection, useGetLangName } from './utils';
|
|
6
|
+
export const LanguagesSelectForm = ({
|
|
7
|
+
allLanguageItems,
|
|
8
|
+
langs,
|
|
9
|
+
onChange,
|
|
10
|
+
systemLanguage = 'en'
|
|
11
|
+
}) => {
|
|
12
|
+
const getLangName = useGetLangName(systemLanguage);
|
|
13
|
+
const [lastSelection] = useState(fetchLastSelection);
|
|
14
|
+
const [search, setSearch] = useState('');
|
|
15
|
+
const [showAllLanguages, setShowAllLanguages] = useState(false);
|
|
16
|
+
const filteredLanguages = useMemo(() => {
|
|
17
|
+
const languageItems = showAllLanguages ? allLanguageItems : allLanguageItems.filter(lang => lang.subscribers > 0);
|
|
18
|
+
if (!search) {
|
|
19
|
+
return languageItems;
|
|
20
|
+
}
|
|
21
|
+
return languageItems.filter(lang => {
|
|
22
|
+
return lang.name.toLowerCase().includes(search.toLowerCase());
|
|
23
|
+
});
|
|
24
|
+
}, [allLanguageItems, search, showAllLanguages]);
|
|
25
|
+
return React.createElement(Vertical, {
|
|
26
|
+
"$gap": 8
|
|
27
|
+
}, React.createElement(NativeInput, {
|
|
28
|
+
value: search,
|
|
29
|
+
onChange: e => setSearch(e.target.value),
|
|
30
|
+
placeholder: "Search languages..."
|
|
31
|
+
}), React.createElement(Horizontal, {
|
|
32
|
+
"$justifyContent": "space-between"
|
|
33
|
+
}, React.createElement(Horizontal, {
|
|
34
|
+
"$gap": 16,
|
|
35
|
+
"$justifyContent": "start"
|
|
36
|
+
}, React.createElement(ActionButton, {
|
|
37
|
+
onClick: () => {
|
|
38
|
+
onChange(filteredLanguages.map(lang => lang.code));
|
|
39
|
+
}
|
|
40
|
+
}, "select all"), React.createElement(ActionButton, {
|
|
41
|
+
onClick: () => {
|
|
42
|
+
onChange([]);
|
|
43
|
+
}
|
|
44
|
+
}, "deselect all")), lastSelection.length > 0 && React.createElement(ActionButton, {
|
|
45
|
+
onClick: () => {
|
|
46
|
+
onChange(lastSelection);
|
|
47
|
+
}
|
|
48
|
+
}, "reuse last selection")), React.createElement(Vertical, {
|
|
49
|
+
"$gap": 24
|
|
50
|
+
}, React.createElement(Columns, {
|
|
51
|
+
"$sizes": 3,
|
|
52
|
+
"$gap": 8
|
|
53
|
+
}, filteredLanguages.map(lang => React.createElement(Checkbox, {
|
|
54
|
+
name: "languages",
|
|
55
|
+
value: lang.code,
|
|
56
|
+
isChecked: langs.includes(lang.code),
|
|
57
|
+
onChange: isChecked => {
|
|
58
|
+
if (isChecked) {
|
|
59
|
+
onChange([...langs, lang.code]);
|
|
60
|
+
} else {
|
|
61
|
+
onChange(langs.filter(code => code !== lang.code));
|
|
62
|
+
}
|
|
63
|
+
},
|
|
64
|
+
label: `${getLangName(lang.code)} (${lang.subscribers})`,
|
|
65
|
+
key: lang.code
|
|
66
|
+
}))), React.createElement("div", null, React.createElement(ActionButton, {
|
|
67
|
+
onClick: () => setShowAllLanguages(x => !x)
|
|
68
|
+
}, showAllLanguages ? 'Show only languages with subscribers' : 'Show all languages'))));
|
|
69
|
+
};
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import { type FC } from 'react';
|
|
2
|
+
type LanguagesSelectFormLoaderProps = {
|
|
3
|
+
application: string;
|
|
4
|
+
value: string[];
|
|
5
|
+
onChange: (languages: string[]) => void;
|
|
6
|
+
systemLanguage?: string;
|
|
7
|
+
};
|
|
8
|
+
export declare const LanguagesSelectFormLoader: FC<LanguagesSelectFormLoaderProps>;
|
|
9
|
+
export {};
|
|
@@ -0,0 +1,54 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { Spinner } from '@pushwoosh/dumb-components';
|
|
3
|
+
import { Horizontal, useAsync } from '@pushwoosh/kit-helpers';
|
|
4
|
+
import { langCodes } from './constants';
|
|
5
|
+
import { LanguagesSelectForm } from './LanguagesSelectForm';
|
|
6
|
+
import { useGetLangName } from './utils';
|
|
7
|
+
import { useSPAContext } from '../context';
|
|
8
|
+
export const LanguagesSelectFormLoader = ({
|
|
9
|
+
application,
|
|
10
|
+
value,
|
|
11
|
+
onChange,
|
|
12
|
+
systemLanguage = 'en'
|
|
13
|
+
}) => {
|
|
14
|
+
const getLangName = useGetLangName(systemLanguage);
|
|
15
|
+
const {
|
|
16
|
+
rpcGateway
|
|
17
|
+
} = useSPAContext();
|
|
18
|
+
const langAsync = useAsync(async () => {
|
|
19
|
+
const {
|
|
20
|
+
values
|
|
21
|
+
} = await rpcGateway.tags.GetTagValues({
|
|
22
|
+
application,
|
|
23
|
+
name: 'Language'
|
|
24
|
+
});
|
|
25
|
+
const valuesLangCodes = values.map(v => v.value);
|
|
26
|
+
const allLangCodes = new Set([...valuesLangCodes, ...langCodes]).values().toArray();
|
|
27
|
+
return allLangCodes.toSorted((a, b) => {
|
|
28
|
+
return a.localeCompare(b, systemLanguage, {
|
|
29
|
+
sensitivity: 'base'
|
|
30
|
+
});
|
|
31
|
+
}).map(code => {
|
|
32
|
+
var _values$find;
|
|
33
|
+
return {
|
|
34
|
+
code,
|
|
35
|
+
name: getLangName(code),
|
|
36
|
+
subscribers: ((_values$find = values.find(val => val.value === code)) === null || _values$find === void 0 ? void 0 : _values$find.count) || 0
|
|
37
|
+
};
|
|
38
|
+
});
|
|
39
|
+
}, [application, getLangName, systemLanguage]);
|
|
40
|
+
if (langAsync.loading) {
|
|
41
|
+
return React.createElement(Horizontal, {
|
|
42
|
+
"$placeItems": "center",
|
|
43
|
+
"$padding": 36
|
|
44
|
+
}, React.createElement(Spinner, {
|
|
45
|
+
size: "medium"
|
|
46
|
+
}));
|
|
47
|
+
}
|
|
48
|
+
return React.createElement(LanguagesSelectForm, {
|
|
49
|
+
allLanguageItems: langAsync.value,
|
|
50
|
+
langs: value,
|
|
51
|
+
onChange: onChange,
|
|
52
|
+
systemLanguage: systemLanguage
|
|
53
|
+
});
|
|
54
|
+
};
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { type FC } from 'react';
|
|
2
|
+
type SelectLanguageProps = {
|
|
3
|
+
applicationCode: string;
|
|
4
|
+
value: string;
|
|
5
|
+
languages: string[];
|
|
6
|
+
isDisabled?: boolean;
|
|
7
|
+
onChange: (language: string) => void;
|
|
8
|
+
onChangeLanguages: (languages: string[]) => void;
|
|
9
|
+
};
|
|
10
|
+
export declare const LanguagesSelector: FC<SelectLanguageProps>;
|
|
11
|
+
export {};
|
|
@@ -0,0 +1,102 @@
|
|
|
1
|
+
import React, { useMemo, useState } from 'react';
|
|
2
|
+
import { Button, Modal, DropdownMenu, DropdownMenuItem, DropdownMenuSection } from '@pushwoosh/dumb-components';
|
|
3
|
+
import { Horizontal } from '@pushwoosh/kit-helpers';
|
|
4
|
+
import { ArrowIcon, ChevronIcon, LanguageIcon, PlusIcon } from '@pushwoosh/kit-icons';
|
|
5
|
+
import { LanguagesModal } from './LanguagesModal';
|
|
6
|
+
import { ButtonGroup } from './styled';
|
|
7
|
+
import { useGetLangName } from './utils';
|
|
8
|
+
export const LanguagesSelector = ({
|
|
9
|
+
applicationCode,
|
|
10
|
+
value,
|
|
11
|
+
languages,
|
|
12
|
+
isDisabled,
|
|
13
|
+
onChange,
|
|
14
|
+
onChangeLanguages
|
|
15
|
+
}) => {
|
|
16
|
+
const [showLanguagesModal, setShowLanguagesModal] = useState(false);
|
|
17
|
+
const getLangName = useGetLangName('en');
|
|
18
|
+
const sortedLanguages = useMemo(() => {
|
|
19
|
+
const sorted = languages.filter(lang => lang !== 'default').sort((a, b) => getLangName(a).localeCompare(getLangName(b), 'en', {
|
|
20
|
+
sensitivity: 'base'
|
|
21
|
+
}));
|
|
22
|
+
return ['default', ...sorted];
|
|
23
|
+
}, [getLangName, languages]);
|
|
24
|
+
return React.createElement(Horizontal, {
|
|
25
|
+
"$gap": 8
|
|
26
|
+
}, React.createElement(DropdownMenu, {
|
|
27
|
+
isScrollable: true,
|
|
28
|
+
renderHandler: handlerProps => React.createElement(Button, {
|
|
29
|
+
style: {
|
|
30
|
+
minWidth: 200
|
|
31
|
+
},
|
|
32
|
+
color: "secondary",
|
|
33
|
+
icon: React.createElement(LanguageIcon, {
|
|
34
|
+
size: "medium",
|
|
35
|
+
view: "lined"
|
|
36
|
+
}),
|
|
37
|
+
rightIcon: React.createElement(ChevronIcon, {
|
|
38
|
+
size: "medium",
|
|
39
|
+
direction: "down"
|
|
40
|
+
}),
|
|
41
|
+
onClick: handlerProps.onClick,
|
|
42
|
+
boxRef: handlerProps.ref,
|
|
43
|
+
isOpen: handlerProps.isOpen,
|
|
44
|
+
isDisabled: isDisabled
|
|
45
|
+
}, getLangName(value))
|
|
46
|
+
}, () => React.createElement(React.Fragment, null, React.createElement(DropdownMenuSection, null, React.createElement(DropdownMenuItem, {
|
|
47
|
+
onClick: () => setShowLanguagesModal(true)
|
|
48
|
+
}, "Choose languages\u2026")), React.createElement(DropdownMenuSection, null, sortedLanguages.map(lang => React.createElement(DropdownMenuItem, {
|
|
49
|
+
key: lang,
|
|
50
|
+
isActive: lang === value,
|
|
51
|
+
onClick: () => onChange(lang)
|
|
52
|
+
}, getLangName(lang)))))), sortedLanguages.length > 1 && React.createElement(ButtonGroup, null, React.createElement(Button, {
|
|
53
|
+
color: "secondary",
|
|
54
|
+
isDisabled: isDisabled,
|
|
55
|
+
icon: React.createElement(ArrowIcon, {
|
|
56
|
+
size: "medium",
|
|
57
|
+
direction: "left"
|
|
58
|
+
}),
|
|
59
|
+
onClick: () => {
|
|
60
|
+
const index = sortedLanguages.indexOf(value);
|
|
61
|
+
if (index > 0) {
|
|
62
|
+
onChange(sortedLanguages[index - 1]);
|
|
63
|
+
} else {
|
|
64
|
+
onChange(sortedLanguages[sortedLanguages.length - 1]);
|
|
65
|
+
}
|
|
66
|
+
}
|
|
67
|
+
}), React.createElement(Button, {
|
|
68
|
+
color: "secondary",
|
|
69
|
+
isDisabled: isDisabled,
|
|
70
|
+
icon: React.createElement(ArrowIcon, {
|
|
71
|
+
size: "medium",
|
|
72
|
+
direction: "right"
|
|
73
|
+
}),
|
|
74
|
+
onClick: () => {
|
|
75
|
+
const index = sortedLanguages.indexOf(value);
|
|
76
|
+
if (index < sortedLanguages.length - 1) {
|
|
77
|
+
onChange(sortedLanguages[index + 1]);
|
|
78
|
+
} else {
|
|
79
|
+
onChange(sortedLanguages[0]);
|
|
80
|
+
}
|
|
81
|
+
}
|
|
82
|
+
})), sortedLanguages.length <= 1 && React.createElement(Button, {
|
|
83
|
+
color: "secondary",
|
|
84
|
+
icon: React.createElement(PlusIcon, {
|
|
85
|
+
size: "medium"
|
|
86
|
+
}),
|
|
87
|
+
onClick: () => setShowLanguagesModal(true)
|
|
88
|
+
}), React.createElement(Modal, {
|
|
89
|
+
size: "medium",
|
|
90
|
+
isOpen: showLanguagesModal
|
|
91
|
+
}, React.createElement(LanguagesModal, {
|
|
92
|
+
applicationCode: applicationCode,
|
|
93
|
+
initialLanguages: languages,
|
|
94
|
+
onSubmit: langs => {
|
|
95
|
+
onChangeLanguages(langs);
|
|
96
|
+
setShowLanguagesModal(false);
|
|
97
|
+
},
|
|
98
|
+
onClose: () => {
|
|
99
|
+
setShowLanguagesModal(false);
|
|
100
|
+
}
|
|
101
|
+
})));
|
|
102
|
+
};
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
export const LAST_SELECTION_KEY = 'PW_PUSH_EDITOR_LAST_SELECTION';
|
|
2
|
+
export const langCodes = ['aa', 'ab', 'ae', 'af', 'ak', 'am', 'an', 'ar', 'as', 'av', 'ay', 'az', 'ba', 'be', 'bg', 'bh', 'bi', 'bm', 'bn', 'bo', 'br', 'bs', 'ca', 'ce', 'ch', 'co', 'cr', 'cs', 'cu', 'cv', 'cy', 'da', 'de', 'dv', 'dz', 'ee', 'el', 'en', 'eo', 'es', 'et', 'eu', 'fa', 'ff', 'fi', 'fj', 'fo', 'fr', 'fy', 'ga', 'gd', 'gl', 'gn', 'gu', 'gv', 'ha', 'he', 'hi', 'ho', 'hr', 'ht', 'hu', 'hy', 'hz', 'ia', 'id', 'ie', 'ig', 'ii', 'ik', 'io', 'is', 'it', 'iu', 'ja', 'jv', 'ka', 'kg', 'ki', 'kj', 'kk', 'kl', 'km', 'kn', 'ko', 'kr', 'ks', 'ku', 'kv', 'kw', 'ky', 'la', 'lb', 'lg', 'li', 'ln', 'lo', 'lt', 'lu', 'lv', 'mg', 'mh', 'mi', 'mk', 'ml', 'mn', 'mr', 'ms', 'mt', 'my', 'na', 'nb', 'nd', 'ne', 'ng', 'nl', 'nn', 'no', 'nr', 'nv', 'ny', 'oc', 'oj', 'om', 'or', 'os', 'pa', 'pi', 'pl', 'ps', 'pt', 'qu', 'rm', 'rn', 'ro', 'ru', 'rw', 'sa', 'sc', 'sd', 'se', 'sg', 'si', 'sk', 'sl', 'sm', 'sn', 'so', 'sq', 'sr', 'ss', 'st', 'su', 'sv', 'sw', 'ta', 'te', 'tg', 'th', 'ti', 'tk', 'tl', 'tn', 'to', 'tr', 'ts', 'tt', 'tw', 'ty', 'ug', 'uk', 'ur', 'uz', 've', 'vi', 'vo', 'wa', 'wo', 'xh', 'yi', 'yo', 'za', 'zh', 'zh-hans', 'zh-hant', 'zu'];
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { LanguagesSelector } from './LanguagesSelector';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { LanguagesSelector } from './LanguagesSelector';
|
|
@@ -0,0 +1,57 @@
|
|
|
1
|
+
export declare const ButtonGroup: import("styled-components").StyledComponent<"div", any, {
|
|
2
|
+
$alignContent?: "end" | "start" | "center" | "space-between" | "space-around" | "space-evenly" | "stretch" | undefined;
|
|
3
|
+
$alignItems?: "end" | "start" | "center" | "stretch" | "baseline" | undefined;
|
|
4
|
+
$bgColor?: string | undefined;
|
|
5
|
+
$border?: string | ({
|
|
6
|
+
top?: string | undefined;
|
|
7
|
+
right?: string | undefined;
|
|
8
|
+
bottom?: string | undefined;
|
|
9
|
+
left?: string | undefined;
|
|
10
|
+
} | {
|
|
11
|
+
horizontal: string;
|
|
12
|
+
top?: string | undefined;
|
|
13
|
+
bottom?: string | undefined;
|
|
14
|
+
} | {
|
|
15
|
+
vertical: string;
|
|
16
|
+
right?: string | undefined;
|
|
17
|
+
left?: string | undefined;
|
|
18
|
+
}) | undefined;
|
|
19
|
+
$borderRadius?: (string | number) | undefined;
|
|
20
|
+
$boxShadow?: string | undefined;
|
|
21
|
+
$gap?: (string | number) | undefined;
|
|
22
|
+
$gridAutoFlow?: "row" | "column" | "dense" | "row dense" | "column dense" | undefined;
|
|
23
|
+
$justifyContent?: "end" | "start" | "center" | "space-between" | "space-around" | "space-evenly" | "stretch" | undefined;
|
|
24
|
+
$justifyItems?: "end" | "start" | "center" | "stretch" | "baseline" | undefined;
|
|
25
|
+
$margin?: (string | number) | ({
|
|
26
|
+
top?: (string | number) | undefined;
|
|
27
|
+
right?: (string | number) | undefined;
|
|
28
|
+
bottom?: (string | number) | undefined;
|
|
29
|
+
left?: (string | number) | undefined;
|
|
30
|
+
} | {
|
|
31
|
+
horizontal: string | number;
|
|
32
|
+
top?: (string | number) | undefined;
|
|
33
|
+
bottom?: (string | number) | undefined;
|
|
34
|
+
} | {
|
|
35
|
+
vertical: string | number;
|
|
36
|
+
right?: (string | number) | undefined;
|
|
37
|
+
left?: (string | number) | undefined;
|
|
38
|
+
}) | undefined;
|
|
39
|
+
$padding?: (string | number) | ({
|
|
40
|
+
top?: (string | number) | undefined;
|
|
41
|
+
right?: (string | number) | undefined;
|
|
42
|
+
bottom?: (string | number) | undefined;
|
|
43
|
+
left?: (string | number) | undefined;
|
|
44
|
+
} | {
|
|
45
|
+
horizontal: string | number;
|
|
46
|
+
top?: (string | number) | undefined;
|
|
47
|
+
bottom?: (string | number) | undefined;
|
|
48
|
+
} | {
|
|
49
|
+
vertical: string | number;
|
|
50
|
+
right?: (string | number) | undefined;
|
|
51
|
+
left?: (string | number) | undefined;
|
|
52
|
+
}) | undefined;
|
|
53
|
+
$placeItems?: "end" | "start" | "center" | "stretch" | undefined;
|
|
54
|
+
} & {
|
|
55
|
+
$gridAutoFlow: string;
|
|
56
|
+
}, "$gridAutoFlow">;
|
|
57
|
+
export declare const ActionButton: import("styled-components").StyledComponent<"button", any, {}, never>;
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import styled from 'styled-components';
|
|
2
|
+
import { Color } from '@pushwoosh/kit-constants';
|
|
3
|
+
import { Horizontal } from '@pushwoosh/kit-helpers';
|
|
4
|
+
export const ButtonGroup = styled(Horizontal).withConfig({
|
|
5
|
+
displayName: "ButtonGroup",
|
|
6
|
+
componentId: "sc-1ntyrsv-0"
|
|
7
|
+
})(["& > *:first-child{border-radius:4px 0 0 4px;}& > *:last-child{border-radius:0 4px 4px 0;}& > *:not(:first-child){border-left:none;}"]);
|
|
8
|
+
export const ActionButton = styled.button.withConfig({
|
|
9
|
+
displayName: "ActionButton",
|
|
10
|
+
componentId: "sc-1ntyrsv-1"
|
|
11
|
+
})(["display:grid;grid-auto-flow:column;align-items:center;gap:4px;text-transform:uppercase;color:", ";background-color:transparent;height:16px;padding:0;border:none;font-size:12px;font-style:normal;font-weight:500;line-height:16px;transition:box-shadow 0.5s;cursor:pointer;&:hover{color:", ";}&:active{box-shadow:inset 0 0 0 2em ", ";}"], Color.SOFT, Color.SOFT_HOVER, Color.SOFT_LIGHT);
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
import { useState } from 'react';
|
|
2
|
+
import { LAST_SELECTION_KEY } from './constants';
|
|
3
|
+
export function fetchLastSelection() {
|
|
4
|
+
var _localStorage$getItem;
|
|
5
|
+
return ((_localStorage$getItem = localStorage.getItem(LAST_SELECTION_KEY)) === null || _localStorage$getItem === void 0 ? void 0 : _localStorage$getItem.split(',')) || [];
|
|
6
|
+
}
|
|
7
|
+
export function saveLastSelection(languages) {
|
|
8
|
+
const langsForSave = languages.filter(l => l !== 'default').join(',');
|
|
9
|
+
localStorage.setItem(LAST_SELECTION_KEY, langsForSave);
|
|
10
|
+
}
|
|
11
|
+
export function useGetLangName(displayLang) {
|
|
12
|
+
const [getLangName] = useState(() => {
|
|
13
|
+
const idn = new Intl.DisplayNames([displayLang], {
|
|
14
|
+
type: 'language'
|
|
15
|
+
});
|
|
16
|
+
return lang => {
|
|
17
|
+
if (lang === 'default') {
|
|
18
|
+
return 'Default language';
|
|
19
|
+
}
|
|
20
|
+
try {
|
|
21
|
+
return idn.of(lang) || lang;
|
|
22
|
+
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
23
|
+
} catch (_error) {
|
|
24
|
+
return lang;
|
|
25
|
+
}
|
|
26
|
+
};
|
|
27
|
+
});
|
|
28
|
+
return getLangName;
|
|
29
|
+
}
|
|
@@ -7,10 +7,11 @@ export function PlatformsConfigurationDrawer(props) {
|
|
|
7
7
|
const {
|
|
8
8
|
application,
|
|
9
9
|
isOpen,
|
|
10
|
-
onClose
|
|
10
|
+
onClose,
|
|
11
|
+
subpage
|
|
11
12
|
} = props;
|
|
12
|
-
const [isOpenMobilePage, setIsOpenMobilePage] = useState(
|
|
13
|
-
const [isOpenDesktopPage, setIsOpenDesktopPage] = useState(
|
|
13
|
+
const [isOpenMobilePage, setIsOpenMobilePage] = useState(subpage === 'mobile');
|
|
14
|
+
const [isOpenDesktopPage, setIsOpenDesktopPage] = useState(subpage === 'desktop');
|
|
14
15
|
const toggleMobilePage = () => setIsOpenMobilePage(prev => !prev);
|
|
15
16
|
const toggleDesktopPage = () => setIsOpenDesktopPage(prev => !prev);
|
|
16
17
|
const onCloseHandler = () => {
|
|
@@ -67,12 +67,6 @@ export function MobilePage(props) {
|
|
|
67
67
|
type: "android",
|
|
68
68
|
size: "medium"
|
|
69
69
|
})), React.createElement(H4, null, "Android")), React.createElement(Card, {
|
|
70
|
-
as: "a",
|
|
71
|
-
href: `/applications/${application === null || application === void 0 ? void 0 : application.code}/configure/xiaomi`
|
|
72
|
-
}, React.createElement(CardIcon, null, React.createElement(PlatformLogoIcon, {
|
|
73
|
-
type: "xiaomi",
|
|
74
|
-
size: "medium"
|
|
75
|
-
})), React.createElement(H4, null, "Xiaomi")), React.createElement(Card, {
|
|
76
70
|
as: "a",
|
|
77
71
|
href: `/applications/${application === null || application === void 0 ? void 0 : application.code}/configure/huawei`
|
|
78
72
|
}, React.createElement(CardIcon, null, React.createElement(PlatformLogoIcon, {
|
package/index.d.ts
CHANGED
package/index.js
CHANGED
package/package.json
CHANGED
|
@@ -15,14 +15,14 @@
|
|
|
15
15
|
},
|
|
16
16
|
"pre-commit": "check",
|
|
17
17
|
"dependencies": {
|
|
18
|
-
"@pushwoosh/dumb-components": "^1.0.
|
|
19
|
-
"@pushwoosh/kit-constants": "^1.6.
|
|
20
|
-
"@pushwoosh/kit-helpers": "^4.
|
|
18
|
+
"@pushwoosh/dumb-components": "^1.0.39",
|
|
19
|
+
"@pushwoosh/kit-constants": "^1.6.9",
|
|
20
|
+
"@pushwoosh/kit-helpers": "^4.8.1",
|
|
21
21
|
"@pushwoosh/kit-icons": "^2.1.1",
|
|
22
|
-
"@pushwoosh/kit-typography": "^1.7.
|
|
22
|
+
"@pushwoosh/kit-typography": "^1.7.3"
|
|
23
23
|
},
|
|
24
24
|
"devDependencies": {
|
|
25
|
-
"@pushwoosh/frontend-builder-engine": "^1.0.
|
|
25
|
+
"@pushwoosh/frontend-builder-engine": "^1.0.17",
|
|
26
26
|
"@pushwoosh/grpc-bridge": "^1.5.36",
|
|
27
27
|
"@pushwoosh/http-client": "^2.4.12",
|
|
28
28
|
"@pushwoosh/session-store": "^2.5.0",
|
|
@@ -34,12 +34,12 @@
|
|
|
34
34
|
"react-dom": "^18.3.1",
|
|
35
35
|
"react-router-dom": "^5.3.4",
|
|
36
36
|
"styled-components": "^5.3.11",
|
|
37
|
-
"typescript": "^5.
|
|
37
|
+
"typescript": "^5.8.2"
|
|
38
38
|
},
|
|
39
39
|
"peerDependencies": {
|
|
40
40
|
"@pushwoosh/grpc-bridge": "^1.5.36",
|
|
41
41
|
"@pushwoosh/http-client": "^2.4.12",
|
|
42
|
-
"@pushwoosh/rpc-v2-http-api-data": "^0.1.
|
|
42
|
+
"@pushwoosh/rpc-v2-http-api-data": "^0.1.466",
|
|
43
43
|
"@pushwoosh/session-store": "^2.5.0",
|
|
44
44
|
"react": "^16.14.0 || ^18.0.0",
|
|
45
45
|
"react-dom": "^16.14.0 || ^18.0.0"
|
|
@@ -47,5 +47,5 @@
|
|
|
47
47
|
"engines": {
|
|
48
48
|
"node": ">= 18"
|
|
49
49
|
},
|
|
50
|
-
"version": "1.0.
|
|
50
|
+
"version": "1.0.5"
|
|
51
51
|
}
|