@coorpacademy/components 11.36.2-alpha.9 → 11.36.2
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/es/atom/button-link/types.d.ts +3 -4
- package/es/atom/button-link/types.d.ts.map +1 -1
- package/es/atom/button-link/types.js.map +1 -1
- package/es/atom/input-switch/index.d.ts +0 -1
- package/es/atom/input-switch/index.d.ts.map +1 -1
- package/es/atom/input-switch/index.js +5 -18
- package/es/atom/input-switch/index.js.map +1 -1
- package/es/atom/input-switch/style.css +0 -75
- package/es/atom/link/index.d.ts.map +1 -1
- package/es/atom/link/index.js +0 -3
- package/es/atom/link/index.js.map +1 -1
- package/es/molecule/cm-popin/types.d.ts +0 -1
- package/es/molecule/cm-popin/types.d.ts.map +1 -1
- package/es/molecule/draggable-list/index.d.ts +0 -1
- package/es/molecule/setup-section/index.d.ts +0 -1
- package/es/molecule/setup-section/index.d.ts.map +1 -1
- package/es/molecule/setup-sections/index.d.ts +0 -1
- package/es/organism/brand-learning-priorities/index.d.ts +0 -1
- package/es/organism/list-items/index.d.ts.map +1 -1
- package/es/organism/list-items/index.js +6 -2
- package/es/organism/list-items/index.js.map +1 -1
- package/es/organism/mooc-header/index.d.ts +0 -1
- package/es/organism/mooc-header/index.d.ts.map +1 -1
- package/es/organism/mooc-header/index.js +52 -48
- package/es/organism/mooc-header/index.js.map +1 -1
- package/es/organism/mooc-header/style.css +110 -122
- package/es/organism/skill-edition/index.d.ts.map +1 -1
- package/es/organism/skill-edition/index.js +49 -3
- package/es/organism/skill-edition/index.js.map +1 -1
- package/es/organism/skill-edition/types.d.ts +9 -0
- package/es/organism/skill-edition/types.d.ts.map +1 -1
- package/es/organism/skill-edition/types.js.map +1 -1
- package/es/organism/user-preferences/index.d.ts +0 -1
- package/es/template/app-player/loading/index.d.ts +0 -1
- package/es/template/app-player/player/index.d.ts +0 -2
- package/es/template/app-player/player/slides/index.d.ts +0 -1
- package/es/template/app-player/player/slides/index.d.ts.map +1 -1
- package/es/template/app-player/popin-correction/index.d.ts +0 -1
- package/es/template/app-player/popin-correction/index.d.ts.map +1 -1
- package/es/template/app-player/popin-end/index.d.ts +0 -1
- package/es/template/app-review/index.d.ts +0 -1
- package/es/template/app-review/index.d.ts.map +1 -1
- package/es/template/app-review/player/prop-types.d.ts +0 -1
- package/es/template/app-review/player/prop-types.d.ts.map +1 -1
- package/es/template/app-review/prop-types.d.ts +0 -1
- package/es/template/app-review/prop-types.d.ts.map +1 -1
- package/es/template/back-office/brand-update/index.d.ts +0 -2
- package/es/template/common/dashboard/index.d.ts +0 -2
- package/es/template/common/search-page/index.d.ts +0 -1
- package/es/template/external-course/index.d.ts +0 -1
- package/es/variables/colors.css +6 -8
- package/lib/atom/button-link/types.d.ts +3 -4
- package/lib/atom/button-link/types.d.ts.map +1 -1
- package/lib/atom/button-link/types.js.map +1 -1
- package/lib/atom/input-switch/index.d.ts +0 -1
- package/lib/atom/input-switch/index.d.ts.map +1 -1
- package/lib/atom/input-switch/index.js +5 -18
- package/lib/atom/input-switch/index.js.map +1 -1
- package/lib/atom/input-switch/style.css +0 -75
- package/lib/atom/link/index.d.ts.map +1 -1
- package/lib/atom/link/index.js +0 -3
- package/lib/atom/link/index.js.map +1 -1
- package/lib/molecule/cm-popin/types.d.ts +0 -1
- package/lib/molecule/cm-popin/types.d.ts.map +1 -1
- package/lib/molecule/draggable-list/index.d.ts +0 -1
- package/lib/molecule/setup-section/index.d.ts +0 -1
- package/lib/molecule/setup-section/index.d.ts.map +1 -1
- package/lib/molecule/setup-sections/index.d.ts +0 -1
- package/lib/organism/brand-learning-priorities/index.d.ts +0 -1
- package/lib/organism/list-items/index.d.ts.map +1 -1
- package/lib/organism/list-items/index.js +6 -2
- package/lib/organism/list-items/index.js.map +1 -1
- package/lib/organism/mooc-header/index.d.ts +0 -1
- package/lib/organism/mooc-header/index.d.ts.map +1 -1
- package/lib/organism/mooc-header/index.js +51 -47
- package/lib/organism/mooc-header/index.js.map +1 -1
- package/lib/organism/mooc-header/style.css +110 -122
- package/lib/organism/skill-edition/index.d.ts.map +1 -1
- package/lib/organism/skill-edition/index.js +49 -3
- package/lib/organism/skill-edition/index.js.map +1 -1
- package/lib/organism/skill-edition/types.d.ts +9 -0
- package/lib/organism/skill-edition/types.d.ts.map +1 -1
- package/lib/organism/skill-edition/types.js.map +1 -1
- package/lib/organism/user-preferences/index.d.ts +0 -1
- package/lib/template/app-player/loading/index.d.ts +0 -1
- package/lib/template/app-player/player/index.d.ts +0 -2
- package/lib/template/app-player/player/slides/index.d.ts +0 -1
- package/lib/template/app-player/player/slides/index.d.ts.map +1 -1
- package/lib/template/app-player/popin-correction/index.d.ts +0 -1
- package/lib/template/app-player/popin-correction/index.d.ts.map +1 -1
- package/lib/template/app-player/popin-end/index.d.ts +0 -1
- package/lib/template/app-review/index.d.ts +0 -1
- package/lib/template/app-review/index.d.ts.map +1 -1
- package/lib/template/app-review/player/prop-types.d.ts +0 -1
- package/lib/template/app-review/player/prop-types.d.ts.map +1 -1
- package/lib/template/app-review/prop-types.d.ts +0 -1
- package/lib/template/app-review/prop-types.d.ts.map +1 -1
- package/lib/template/back-office/brand-update/index.d.ts +0 -2
- package/lib/template/common/dashboard/index.d.ts +0 -2
- package/lib/template/common/search-page/index.d.ts +0 -1
- package/lib/template/external-course/index.d.ts +0 -1
- package/lib/variables/colors.css +6 -8
- package/locales/bs/global.json +2 -2
- package/locales/cs/global.json +2 -2
- package/locales/de/global.json +2 -2
- package/locales/es/global.json +2 -2
- package/locales/et/global.json +2 -2
- package/locales/fi/global.json +2 -2
- package/locales/fr/global.json +2 -2
- package/locales/hr/global.json +2 -2
- package/locales/hu/global.json +2 -2
- package/locales/hy/global.json +2 -2
- package/locales/it/global.json +2 -2
- package/locales/ja/global.json +2 -2
- package/locales/ko/global.json +2 -2
- package/locales/nl/global.json +2 -2
- package/locales/pl/global.json +2 -2
- package/locales/pt/global.json +2 -2
- package/locales/ro/global.json +2 -2
- package/locales/ru/global.json +2 -2
- package/locales/sk/global.json +2 -2
- package/locales/sl/global.json +2 -2
- package/locales/sv/global.json +2 -2
- package/locales/tl/global.json +2 -2
- package/locales/tr/global.json +2 -2
- package/locales/uk/global.json +2 -2
- package/locales/vi/global.json +2 -2
- package/locales/zh/global.json +2 -2
- package/locales/zh_TW/global.json +2 -2
- package/package.json +7 -7
- package/es/atom/input-select/index.d.ts +0 -28
- package/es/atom/input-select/index.d.ts.map +0 -1
- package/es/atom/input-select/index.js +0 -109
- package/es/atom/input-select/index.js.map +0 -1
- package/es/atom/input-select/style.css +0 -169
- package/lib/atom/input-select/index.d.ts +0 -28
- package/lib/atom/input-select/index.d.ts.map +0 -1
- package/lib/atom/input-select/index.js +0 -116
- package/lib/atom/input-select/index.js.map +0 -1
- package/lib/atom/input-select/style.css +0 -169
package/locales/zh/global.json
CHANGED
|
@@ -42,13 +42,13 @@
|
|
|
42
42
|
"cookies_title": "我们如何使用 cookies:",
|
|
43
43
|
"Create a new cohort": "Create a new cohort",
|
|
44
44
|
"courses": "课程",
|
|
45
|
-
"content": "
|
|
45
|
+
"content": "内容",
|
|
46
46
|
"courses_completed": "已完成的课程",
|
|
47
47
|
"continue_learning": "继续学习",
|
|
48
48
|
"learning_priority_modal_title": "新的学习重点",
|
|
49
49
|
"learning_priority_modal_description": "通过选择一项技能、播放列表或认证来创建学习优先级。",
|
|
50
50
|
"locked": "未解锁",
|
|
51
|
-
"rewards": "
|
|
51
|
+
"rewards": "奖励",
|
|
52
52
|
"icon_picker_title": "更改图标",
|
|
53
53
|
"icon_picker_description": "为您的技能选择一个新图标",
|
|
54
54
|
"icon_editor_color": "图标颜色",
|
|
@@ -42,13 +42,13 @@
|
|
|
42
42
|
"cookies_title": "我們如何使用 Cookies:",
|
|
43
43
|
"Create a new cohort": "Create a new cohort",
|
|
44
44
|
"courses": "課程",
|
|
45
|
-
"content": "
|
|
45
|
+
"content": "內容",
|
|
46
46
|
"courses_completed": "課程已完成",
|
|
47
47
|
"continue_learning": "繼續學習",
|
|
48
48
|
"learning_priority_modal_title": "新的學習重點",
|
|
49
49
|
"learning_priority_modal_description": "透過選擇一項技能、播放清單或認證來建立學習優先順序。",
|
|
50
50
|
"locked": "已上鎖",
|
|
51
|
-
"rewards": "
|
|
51
|
+
"rewards": "獎勵",
|
|
52
52
|
"icon_picker_title": "更換圖標",
|
|
53
53
|
"icon_picker_description": "為您的技能選擇新圖標",
|
|
54
54
|
"icon_editor_color": "圖示顏色",
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@coorpacademy/components",
|
|
3
|
-
"version": "11.36.2
|
|
3
|
+
"version": "11.36.2",
|
|
4
4
|
"description": "",
|
|
5
5
|
"main": "lib/index.js",
|
|
6
6
|
"module": "es/index.js",
|
|
@@ -58,8 +58,8 @@
|
|
|
58
58
|
"Soualmi Djamel <djamel.soualmi@coorpacademy.com>"
|
|
59
59
|
],
|
|
60
60
|
"dependencies": {
|
|
61
|
-
"@coorpacademy/nova-icons": "4.5.
|
|
62
|
-
"@coorpacademy/react-native-animation": "1.1.
|
|
61
|
+
"@coorpacademy/nova-icons": "4.5.1",
|
|
62
|
+
"@coorpacademy/react-native-animation": "1.1.0",
|
|
63
63
|
"@fortawesome/fontawesome-svg-core": "^6.5.1",
|
|
64
64
|
"@fortawesome/pro-solid-svg-icons": "^6.5.1",
|
|
65
65
|
"@fortawesome/react-fontawesome": "^0.2.0",
|
|
@@ -99,12 +99,12 @@
|
|
|
99
99
|
"@babel/preset-react": "^7.26.3",
|
|
100
100
|
"@babel/preset-typescript": "^7.26.0",
|
|
101
101
|
"@babel/types": "^7.26.7",
|
|
102
|
-
"@coorpacademy/css-modules-require-hook": "4.1.
|
|
102
|
+
"@coorpacademy/css-modules-require-hook": "4.1.0",
|
|
103
103
|
"@coorpacademy/eslint-plugin-coorpacademy": "^10.0.0",
|
|
104
104
|
"@coorpacademy/react-native-mock-render": "^0.2.9",
|
|
105
105
|
"@coorpacademy/react-native-slider": "^0.11.1",
|
|
106
|
-
"@coorpacademy/translate": "6.3.
|
|
107
|
-
"@coorpacademy/webpack-config": "13.1.
|
|
106
|
+
"@coorpacademy/translate": "6.3.0",
|
|
107
|
+
"@coorpacademy/webpack-config": "13.1.3",
|
|
108
108
|
"@react-native-community/blur": "^4.2.0",
|
|
109
109
|
"@storybook/addon-actions": "^6.5.12",
|
|
110
110
|
"@storybook/addon-controls": "^6.5.12",
|
|
@@ -165,5 +165,5 @@
|
|
|
165
165
|
"last 2 versions",
|
|
166
166
|
"IE 11"
|
|
167
167
|
],
|
|
168
|
-
"gitHead": "
|
|
168
|
+
"gitHead": "02960c9c1a36e3b70e8f2fc881d6de626d6f92f2"
|
|
169
169
|
}
|
|
@@ -1,28 +0,0 @@
|
|
|
1
|
-
export default InputSelect;
|
|
2
|
-
declare function InputSelect({ options, value, onChange, placeholder, className, "aria-label": ariaLabel, iconClosed, selectedIcon }: {
|
|
3
|
-
options?: any[] | undefined;
|
|
4
|
-
value: any;
|
|
5
|
-
onChange: any;
|
|
6
|
-
placeholder: any;
|
|
7
|
-
className: any;
|
|
8
|
-
"aria-label": any;
|
|
9
|
-
iconClosed?: string | undefined;
|
|
10
|
-
selectedIcon?: string | undefined;
|
|
11
|
-
}): JSX.Element;
|
|
12
|
-
declare namespace InputSelect {
|
|
13
|
-
const propTypes: {
|
|
14
|
-
options: PropTypes.Requireable<(PropTypes.InferProps<{
|
|
15
|
-
value: PropTypes.Validator<string>;
|
|
16
|
-
label: PropTypes.Validator<string>;
|
|
17
|
-
}> | null | undefined)[]>;
|
|
18
|
-
value: PropTypes.Requireable<string>;
|
|
19
|
-
onChange: PropTypes.Requireable<(...args: any[]) => any>;
|
|
20
|
-
placeholder: PropTypes.Requireable<string>;
|
|
21
|
-
className: PropTypes.Requireable<string>;
|
|
22
|
-
'aria-label': PropTypes.Requireable<string>;
|
|
23
|
-
iconClosed: PropTypes.Requireable<string>;
|
|
24
|
-
selectedIcon: PropTypes.Requireable<string>;
|
|
25
|
-
};
|
|
26
|
-
}
|
|
27
|
-
import PropTypes from "prop-types";
|
|
28
|
-
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atom/input-select/index.js"],"names":[],"mappings":";AAQA;;;;;;;;;gBAqGC"}
|
|
@@ -1,109 +0,0 @@
|
|
|
1
|
-
import React, { useState, useRef, useCallback } from 'react';
|
|
2
|
-
import PropTypes from 'prop-types';
|
|
3
|
-
import classnames from 'classnames';
|
|
4
|
-
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
|
|
5
|
-
import style from './style.css';
|
|
6
|
-
const COMPONENT_ID = 'input-select';
|
|
7
|
-
const InputSelect = ({
|
|
8
|
-
options = [],
|
|
9
|
-
value,
|
|
10
|
-
onChange,
|
|
11
|
-
placeholder,
|
|
12
|
-
className,
|
|
13
|
-
'aria-label': ariaLabel,
|
|
14
|
-
iconClosed = 'chevron-down',
|
|
15
|
-
selectedIcon = 'circle-check'
|
|
16
|
-
}) => {
|
|
17
|
-
const [open, setOpen] = useState(false);
|
|
18
|
-
const wrapperRef = useRef(null);
|
|
19
|
-
const componentId = `${COMPONENT_ID}-${placeholder?.toLowerCase().replace(/\s+/g, '-') || 'default'}`;
|
|
20
|
-
const handleToggle = useCallback(() => {
|
|
21
|
-
setOpen(o => !o);
|
|
22
|
-
}, []);
|
|
23
|
-
const handleOnOptionClick = useCallback(optionValue => {
|
|
24
|
-
onChange(optionValue);
|
|
25
|
-
setOpen(false);
|
|
26
|
-
}, [onChange]);
|
|
27
|
-
React.useEffect(() => {
|
|
28
|
-
if (!open) return;
|
|
29
|
-
const handleClickOutside = event => {
|
|
30
|
-
if (wrapperRef.current && !wrapperRef.current.contains(event.target)) {
|
|
31
|
-
setOpen(false);
|
|
32
|
-
}
|
|
33
|
-
};
|
|
34
|
-
document.addEventListener('mousedown', handleClickOutside);
|
|
35
|
-
return () => document.removeEventListener('mousedown', handleClickOutside);
|
|
36
|
-
}, [open]);
|
|
37
|
-
const selectedOption = options.find(opt => opt.value === value);
|
|
38
|
-
const renderOption = option => {
|
|
39
|
-
function handleClick() {
|
|
40
|
-
handleOnOptionClick(option.value);
|
|
41
|
-
}
|
|
42
|
-
return /*#__PURE__*/React.createElement("li", {
|
|
43
|
-
key: option.value,
|
|
44
|
-
className: classnames(style.option, option.value === value && style.selected),
|
|
45
|
-
role: "option",
|
|
46
|
-
"aria-selected": option.value === value,
|
|
47
|
-
onClick: handleClick
|
|
48
|
-
}, /*#__PURE__*/React.createElement("span", {
|
|
49
|
-
className: style.optionIcon
|
|
50
|
-
}, option.icon), /*#__PURE__*/React.createElement("span", {
|
|
51
|
-
className: style.optionLabel
|
|
52
|
-
}, option.label), option.value === value ? /*#__PURE__*/React.createElement("span", {
|
|
53
|
-
className: style.checkIcon
|
|
54
|
-
}, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
|
|
55
|
-
icon: selectedIcon
|
|
56
|
-
})) : null);
|
|
57
|
-
};
|
|
58
|
-
return /*#__PURE__*/React.createElement("div", {
|
|
59
|
-
className: classnames(style.outerWrapper, {
|
|
60
|
-
[style.open]: open
|
|
61
|
-
})
|
|
62
|
-
}, /*#__PURE__*/React.createElement("div", {
|
|
63
|
-
ref: wrapperRef,
|
|
64
|
-
className: classnames(style.wrapper, className),
|
|
65
|
-
"aria-label": ariaLabel
|
|
66
|
-
}, /*#__PURE__*/React.createElement("button", {
|
|
67
|
-
type: "button",
|
|
68
|
-
className: style.display,
|
|
69
|
-
onClick: handleToggle,
|
|
70
|
-
"aria-haspopup": "listbox",
|
|
71
|
-
"aria-expanded": open,
|
|
72
|
-
"aria-controls": open ? `${componentId}-listbox` : undefined,
|
|
73
|
-
id: componentId
|
|
74
|
-
}, /*#__PURE__*/React.createElement("div", {
|
|
75
|
-
className: style.content
|
|
76
|
-
}, /*#__PURE__*/React.createElement("span", {
|
|
77
|
-
className: style.label
|
|
78
|
-
}, placeholder), selectedOption ? /*#__PURE__*/React.createElement("span", {
|
|
79
|
-
className: style.value
|
|
80
|
-
}, selectedOption.label) : null), /*#__PURE__*/React.createElement("span", {
|
|
81
|
-
className: classnames(style.iconWrapper, {
|
|
82
|
-
[style.open]: open
|
|
83
|
-
})
|
|
84
|
-
}, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
|
|
85
|
-
className: classnames(style.icon, {
|
|
86
|
-
[style.rotated]: open
|
|
87
|
-
}),
|
|
88
|
-
icon: iconClosed
|
|
89
|
-
}))), open ? /*#__PURE__*/React.createElement("ul", {
|
|
90
|
-
id: `${componentId}-listbox`,
|
|
91
|
-
className: style.menu,
|
|
92
|
-
role: "listbox"
|
|
93
|
-
}, options.map(renderOption)) : null));
|
|
94
|
-
};
|
|
95
|
-
InputSelect.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
96
|
-
options: PropTypes.arrayOf(PropTypes.shape({
|
|
97
|
-
value: PropTypes.string.isRequired,
|
|
98
|
-
label: PropTypes.string.isRequired
|
|
99
|
-
})),
|
|
100
|
-
value: PropTypes.string,
|
|
101
|
-
onChange: PropTypes.func,
|
|
102
|
-
placeholder: PropTypes.string,
|
|
103
|
-
className: PropTypes.string,
|
|
104
|
-
'aria-label': PropTypes.string,
|
|
105
|
-
iconClosed: PropTypes.string,
|
|
106
|
-
selectedIcon: PropTypes.string
|
|
107
|
-
} : {};
|
|
108
|
-
export default InputSelect;
|
|
109
|
-
//# sourceMappingURL=index.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":["React","useState","useRef","useCallback","PropTypes","classnames","FontAwesomeIcon","style","COMPONENT_ID","InputSelect","options","value","onChange","placeholder","className","ariaLabel","iconClosed","selectedIcon","open","setOpen","wrapperRef","componentId","toLowerCase","replace","handleToggle","o","handleOnOptionClick","optionValue","useEffect","handleClickOutside","event","current","contains","target","document","addEventListener","removeEventListener","selectedOption","find","opt","renderOption","option","handleClick","createElement","key","selected","role","onClick","optionIcon","icon","optionLabel","label","checkIcon","outerWrapper","ref","wrapper","type","display","undefined","id","content","iconWrapper","rotated","menu","map","propTypes","process","env","NODE_ENV","arrayOf","shape","string","isRequired","func"],"sources":["../../../src/atom/input-select/index.js"],"sourcesContent":["import React, {useState, useRef, useCallback} from 'react';\nimport PropTypes from 'prop-types';\nimport classnames from 'classnames';\nimport {FontAwesomeIcon} from '@fortawesome/react-fontawesome';\nimport style from './style.css';\n\nconst COMPONENT_ID = 'input-select';\n\nconst InputSelect = ({\n options = [],\n value,\n onChange,\n placeholder,\n className,\n 'aria-label': ariaLabel,\n iconClosed = 'chevron-down',\n selectedIcon = 'circle-check'\n}) => {\n const [open, setOpen] = useState(false);\n const wrapperRef = useRef(null);\n\n const componentId = `${COMPONENT_ID}-${\n placeholder?.toLowerCase().replace(/\\s+/g, '-') || 'default'\n }`;\n\n const handleToggle = useCallback(() => {\n setOpen(o => !o);\n }, []);\n\n const handleOnOptionClick = useCallback(\n optionValue => {\n onChange(optionValue);\n setOpen(false);\n },\n [onChange]\n );\n\n React.useEffect(() => {\n if (!open) return;\n const handleClickOutside = event => {\n if (wrapperRef.current && !wrapperRef.current.contains(event.target)) {\n setOpen(false);\n }\n };\n document.addEventListener('mousedown', handleClickOutside);\n return () => document.removeEventListener('mousedown', handleClickOutside);\n }, [open]);\n\n const selectedOption = options.find(opt => opt.value === value);\n\n const renderOption = option => {\n function handleClick() {\n handleOnOptionClick(option.value);\n }\n\n return (\n <li\n key={option.value}\n className={classnames(style.option, option.value === value && style.selected)}\n role=\"option\"\n aria-selected={option.value === value}\n onClick={handleClick}\n >\n <span className={style.optionIcon}>{option.icon}</span>\n <span className={style.optionLabel}>{option.label}</span>\n {option.value === value ? (\n <span className={style.checkIcon}>\n <FontAwesomeIcon icon={selectedIcon} />\n </span>\n ) : null}\n </li>\n );\n };\n\n return (\n <div\n className={classnames(style.outerWrapper, {\n [style.open]: open\n })}\n >\n <div ref={wrapperRef} className={classnames(style.wrapper, className)} aria-label={ariaLabel}>\n <button\n type=\"button\"\n className={style.display}\n onClick={handleToggle}\n aria-haspopup=\"listbox\"\n aria-expanded={open}\n aria-controls={open ? `${componentId}-listbox` : undefined}\n id={componentId}\n >\n <div className={style.content}>\n <span className={style.label}>{placeholder}</span>\n {selectedOption ? <span className={style.value}>{selectedOption.label}</span> : null}\n </div>\n <span className={classnames(style.iconWrapper, {[style.open]: open})}>\n <FontAwesomeIcon\n className={classnames(style.icon, {[style.rotated]: open})}\n icon={iconClosed}\n />\n </span>\n </button>\n {open ? (\n <ul id={`${componentId}-listbox`} className={style.menu} role=\"listbox\">\n {options.map(renderOption)}\n </ul>\n ) : null}\n </div>\n </div>\n );\n};\n\nInputSelect.propTypes = {\n options: PropTypes.arrayOf(\n PropTypes.shape({\n value: PropTypes.string.isRequired,\n label: PropTypes.string.isRequired\n })\n ),\n value: PropTypes.string,\n onChange: PropTypes.func,\n placeholder: PropTypes.string,\n className: PropTypes.string,\n 'aria-label': PropTypes.string,\n iconClosed: PropTypes.string,\n selectedIcon: PropTypes.string\n};\n\nexport default InputSelect;\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -1,169 +0,0 @@
|
|
|
1
|
-
@value colors: "../../variables/colors.css";
|
|
2
|
-
@value cm_grey_700 from colors;
|
|
3
|
-
@value cm_grey_500 from colors;
|
|
4
|
-
@value cm_grey_400 from colors;
|
|
5
|
-
@value cm_grey_200 from colors;
|
|
6
|
-
@value cm_negative_300 from colors;
|
|
7
|
-
@value white from colors;
|
|
8
|
-
@value cm_grey_100 from colors;
|
|
9
|
-
@value brand from colors;
|
|
10
|
-
@value cm_primary_blue from colors;
|
|
11
|
-
@value primary_100 from colors;
|
|
12
|
-
@value cm_blue_50 from colors;
|
|
13
|
-
@value cm_grey_150 from colors;
|
|
14
|
-
|
|
15
|
-
.outerWrapper {
|
|
16
|
-
width: 100%;
|
|
17
|
-
border-radius: 12px;
|
|
18
|
-
transition: box-shadow 0.2s;
|
|
19
|
-
}
|
|
20
|
-
|
|
21
|
-
.outerWrapper:hover {
|
|
22
|
-
box-shadow: 0 0 0 2px brand;
|
|
23
|
-
}
|
|
24
|
-
|
|
25
|
-
.outerWrapper.open {
|
|
26
|
-
box-shadow: 0 0 0 2px white, 0 0 0 4px brand;
|
|
27
|
-
}
|
|
28
|
-
|
|
29
|
-
.wrapper {
|
|
30
|
-
background: white;
|
|
31
|
-
border-radius: 12px;
|
|
32
|
-
position: relative;
|
|
33
|
-
width: 100%;
|
|
34
|
-
}
|
|
35
|
-
|
|
36
|
-
.display {
|
|
37
|
-
width: 100%;
|
|
38
|
-
height: 44px;
|
|
39
|
-
background: cm_grey_100;
|
|
40
|
-
border: none;
|
|
41
|
-
border-radius: 12px;
|
|
42
|
-
display: flex;
|
|
43
|
-
align-items: center;
|
|
44
|
-
justify-content: space-between;
|
|
45
|
-
padding: 0 4px 0 24px;
|
|
46
|
-
cursor: pointer;
|
|
47
|
-
transition: box-shadow 0.2s;
|
|
48
|
-
font-family: 'Gilroy';
|
|
49
|
-
font-size: 14px;
|
|
50
|
-
font-weight: 500;
|
|
51
|
-
outline: none;
|
|
52
|
-
}
|
|
53
|
-
|
|
54
|
-
.content {
|
|
55
|
-
display: flex;
|
|
56
|
-
align-items: center;
|
|
57
|
-
gap: 8px;
|
|
58
|
-
flex: 1;
|
|
59
|
-
}
|
|
60
|
-
|
|
61
|
-
.label {
|
|
62
|
-
color: cm_grey_400;
|
|
63
|
-
font-weight: 400;
|
|
64
|
-
font-size: 14px;
|
|
65
|
-
}
|
|
66
|
-
|
|
67
|
-
.value {
|
|
68
|
-
color: cm_grey_700;
|
|
69
|
-
font-weight: 700;
|
|
70
|
-
font-size: 14px;
|
|
71
|
-
}
|
|
72
|
-
.iconWrapper{
|
|
73
|
-
width: 36px;
|
|
74
|
-
height: 36px;
|
|
75
|
-
display: flex;
|
|
76
|
-
align-items: center;
|
|
77
|
-
justify-content: center;
|
|
78
|
-
}
|
|
79
|
-
|
|
80
|
-
.iconWrapper.open{
|
|
81
|
-
background-color: cm_grey_150;
|
|
82
|
-
border-radius: 8px;
|
|
83
|
-
}
|
|
84
|
-
|
|
85
|
-
.icon {
|
|
86
|
-
color: cm_grey_500;
|
|
87
|
-
width: 14px;
|
|
88
|
-
height: 14px;
|
|
89
|
-
display: flex;
|
|
90
|
-
align-items: center;
|
|
91
|
-
transition: transform 0.5s cubic-bezier(0.4,0,0.2,1);
|
|
92
|
-
}
|
|
93
|
-
|
|
94
|
-
.rotated {
|
|
95
|
-
transform: rotate(180deg);
|
|
96
|
-
}
|
|
97
|
-
|
|
98
|
-
.menu {
|
|
99
|
-
position: absolute;
|
|
100
|
-
left: 0;
|
|
101
|
-
right: 0;
|
|
102
|
-
margin-top: 8px;
|
|
103
|
-
background: white;
|
|
104
|
-
border-radius: 12px;
|
|
105
|
-
box-shadow: 0 4px 8px 0px rgba(0,0,0,0.04);
|
|
106
|
-
z-index: 10;
|
|
107
|
-
padding: 12px;
|
|
108
|
-
list-style: none;
|
|
109
|
-
width: 100%;
|
|
110
|
-
box-sizing: border-box;
|
|
111
|
-
}
|
|
112
|
-
|
|
113
|
-
.option {
|
|
114
|
-
display: flex;
|
|
115
|
-
align-items: center;
|
|
116
|
-
justify-content: space-between;
|
|
117
|
-
padding: 12px 12px;
|
|
118
|
-
font-size: 14px;
|
|
119
|
-
color: cm_grey_700;
|
|
120
|
-
cursor: pointer;
|
|
121
|
-
background: white;
|
|
122
|
-
border: none;
|
|
123
|
-
text-align: left;
|
|
124
|
-
width: 100%;
|
|
125
|
-
font-family: 'Gilroy';
|
|
126
|
-
transition: background 0.15s, color 0.15s;
|
|
127
|
-
box-sizing: border-box;
|
|
128
|
-
border-radius: 12px;
|
|
129
|
-
margin-bottom: 4px;
|
|
130
|
-
}
|
|
131
|
-
|
|
132
|
-
.option.selected {
|
|
133
|
-
background-color: color(brand lightness(95%));
|
|
134
|
-
}
|
|
135
|
-
|
|
136
|
-
.option.selected:hover,
|
|
137
|
-
.option.selected:focus {
|
|
138
|
-
background-color: color(brand lightness(90%));
|
|
139
|
-
}
|
|
140
|
-
|
|
141
|
-
.option:hover:not(.selected),
|
|
142
|
-
.option:focus:not(.selected) {
|
|
143
|
-
background: cm_grey_100;
|
|
144
|
-
}
|
|
145
|
-
|
|
146
|
-
.wrapper:disabled::after {
|
|
147
|
-
border-top-color: cm_grey_500;
|
|
148
|
-
}
|
|
149
|
-
|
|
150
|
-
.optionIcon {
|
|
151
|
-
margin-right: 12px;
|
|
152
|
-
font-size: 20px;
|
|
153
|
-
display: inline-flex;
|
|
154
|
-
align-items: center;
|
|
155
|
-
}
|
|
156
|
-
|
|
157
|
-
.optionLabel {
|
|
158
|
-
flex: 1;
|
|
159
|
-
font-size: 14px;
|
|
160
|
-
color: cm_grey_700;
|
|
161
|
-
display: flex;
|
|
162
|
-
align-items: center;
|
|
163
|
-
}
|
|
164
|
-
|
|
165
|
-
.checkIcon {
|
|
166
|
-
color: brand;
|
|
167
|
-
display: inline-flex;
|
|
168
|
-
align-items: center;
|
|
169
|
-
}
|
|
@@ -1,28 +0,0 @@
|
|
|
1
|
-
export default InputSelect;
|
|
2
|
-
declare function InputSelect({ options, value, onChange, placeholder, className, "aria-label": ariaLabel, iconClosed, selectedIcon }: {
|
|
3
|
-
options?: any[] | undefined;
|
|
4
|
-
value: any;
|
|
5
|
-
onChange: any;
|
|
6
|
-
placeholder: any;
|
|
7
|
-
className: any;
|
|
8
|
-
"aria-label": any;
|
|
9
|
-
iconClosed?: string | undefined;
|
|
10
|
-
selectedIcon?: string | undefined;
|
|
11
|
-
}): JSX.Element;
|
|
12
|
-
declare namespace InputSelect {
|
|
13
|
-
const propTypes: {
|
|
14
|
-
options: PropTypes.Requireable<(PropTypes.InferProps<{
|
|
15
|
-
value: PropTypes.Validator<string>;
|
|
16
|
-
label: PropTypes.Validator<string>;
|
|
17
|
-
}> | null | undefined)[]>;
|
|
18
|
-
value: PropTypes.Requireable<string>;
|
|
19
|
-
onChange: PropTypes.Requireable<(...args: any[]) => any>;
|
|
20
|
-
placeholder: PropTypes.Requireable<string>;
|
|
21
|
-
className: PropTypes.Requireable<string>;
|
|
22
|
-
'aria-label': PropTypes.Requireable<string>;
|
|
23
|
-
iconClosed: PropTypes.Requireable<string>;
|
|
24
|
-
selectedIcon: PropTypes.Requireable<string>;
|
|
25
|
-
};
|
|
26
|
-
}
|
|
27
|
-
import PropTypes from "prop-types";
|
|
28
|
-
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atom/input-select/index.js"],"names":[],"mappings":";AAQA;;;;;;;;;gBAqGC"}
|
|
@@ -1,116 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
exports.__esModule = true;
|
|
4
|
-
exports.default = void 0;
|
|
5
|
-
var _react = _interopRequireWildcard(require("react"));
|
|
6
|
-
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
7
|
-
var _classnames = _interopRequireDefault(require("classnames"));
|
|
8
|
-
var _reactFontawesome = require("@fortawesome/react-fontawesome");
|
|
9
|
-
var _style = _interopRequireDefault(require("./style.css"));
|
|
10
|
-
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
11
|
-
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
|
|
12
|
-
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
|
|
13
|
-
const COMPONENT_ID = 'input-select';
|
|
14
|
-
const InputSelect = ({
|
|
15
|
-
options = [],
|
|
16
|
-
value,
|
|
17
|
-
onChange,
|
|
18
|
-
placeholder,
|
|
19
|
-
className,
|
|
20
|
-
'aria-label': ariaLabel,
|
|
21
|
-
iconClosed = 'chevron-down',
|
|
22
|
-
selectedIcon = 'circle-check'
|
|
23
|
-
}) => {
|
|
24
|
-
const [open, setOpen] = (0, _react.useState)(false);
|
|
25
|
-
const wrapperRef = (0, _react.useRef)(null);
|
|
26
|
-
const componentId = `${COMPONENT_ID}-${placeholder?.toLowerCase().replace(/\s+/g, '-') || 'default'}`;
|
|
27
|
-
const handleToggle = (0, _react.useCallback)(() => {
|
|
28
|
-
setOpen(o => !o);
|
|
29
|
-
}, []);
|
|
30
|
-
const handleOnOptionClick = (0, _react.useCallback)(optionValue => {
|
|
31
|
-
onChange(optionValue);
|
|
32
|
-
setOpen(false);
|
|
33
|
-
}, [onChange]);
|
|
34
|
-
_react.default.useEffect(() => {
|
|
35
|
-
if (!open) return;
|
|
36
|
-
const handleClickOutside = event => {
|
|
37
|
-
if (wrapperRef.current && !wrapperRef.current.contains(event.target)) {
|
|
38
|
-
setOpen(false);
|
|
39
|
-
}
|
|
40
|
-
};
|
|
41
|
-
document.addEventListener('mousedown', handleClickOutside);
|
|
42
|
-
return () => document.removeEventListener('mousedown', handleClickOutside);
|
|
43
|
-
}, [open]);
|
|
44
|
-
const selectedOption = options.find(opt => opt.value === value);
|
|
45
|
-
const renderOption = option => {
|
|
46
|
-
function handleClick() {
|
|
47
|
-
handleOnOptionClick(option.value);
|
|
48
|
-
}
|
|
49
|
-
return /*#__PURE__*/_react.default.createElement("li", {
|
|
50
|
-
key: option.value,
|
|
51
|
-
className: (0, _classnames.default)(_style.default.option, option.value === value && _style.default.selected),
|
|
52
|
-
role: "option",
|
|
53
|
-
"aria-selected": option.value === value,
|
|
54
|
-
onClick: handleClick
|
|
55
|
-
}, /*#__PURE__*/_react.default.createElement("span", {
|
|
56
|
-
className: _style.default.optionIcon
|
|
57
|
-
}, option.icon), /*#__PURE__*/_react.default.createElement("span", {
|
|
58
|
-
className: _style.default.optionLabel
|
|
59
|
-
}, option.label), option.value === value ? /*#__PURE__*/_react.default.createElement("span", {
|
|
60
|
-
className: _style.default.checkIcon
|
|
61
|
-
}, /*#__PURE__*/_react.default.createElement(_reactFontawesome.FontAwesomeIcon, {
|
|
62
|
-
icon: selectedIcon
|
|
63
|
-
})) : null);
|
|
64
|
-
};
|
|
65
|
-
return /*#__PURE__*/_react.default.createElement("div", {
|
|
66
|
-
className: (0, _classnames.default)(_style.default.outerWrapper, {
|
|
67
|
-
[_style.default.open]: open
|
|
68
|
-
})
|
|
69
|
-
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
70
|
-
ref: wrapperRef,
|
|
71
|
-
className: (0, _classnames.default)(_style.default.wrapper, className),
|
|
72
|
-
"aria-label": ariaLabel
|
|
73
|
-
}, /*#__PURE__*/_react.default.createElement("button", {
|
|
74
|
-
type: "button",
|
|
75
|
-
className: _style.default.display,
|
|
76
|
-
onClick: handleToggle,
|
|
77
|
-
"aria-haspopup": "listbox",
|
|
78
|
-
"aria-expanded": open,
|
|
79
|
-
"aria-controls": open ? `${componentId}-listbox` : undefined,
|
|
80
|
-
id: componentId
|
|
81
|
-
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
82
|
-
className: _style.default.content
|
|
83
|
-
}, /*#__PURE__*/_react.default.createElement("span", {
|
|
84
|
-
className: _style.default.label
|
|
85
|
-
}, placeholder), selectedOption ? /*#__PURE__*/_react.default.createElement("span", {
|
|
86
|
-
className: _style.default.value
|
|
87
|
-
}, selectedOption.label) : null), /*#__PURE__*/_react.default.createElement("span", {
|
|
88
|
-
className: (0, _classnames.default)(_style.default.iconWrapper, {
|
|
89
|
-
[_style.default.open]: open
|
|
90
|
-
})
|
|
91
|
-
}, /*#__PURE__*/_react.default.createElement(_reactFontawesome.FontAwesomeIcon, {
|
|
92
|
-
className: (0, _classnames.default)(_style.default.icon, {
|
|
93
|
-
[_style.default.rotated]: open
|
|
94
|
-
}),
|
|
95
|
-
icon: iconClosed
|
|
96
|
-
}))), open ? /*#__PURE__*/_react.default.createElement("ul", {
|
|
97
|
-
id: `${componentId}-listbox`,
|
|
98
|
-
className: _style.default.menu,
|
|
99
|
-
role: "listbox"
|
|
100
|
-
}, options.map(renderOption)) : null));
|
|
101
|
-
};
|
|
102
|
-
InputSelect.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
103
|
-
options: _propTypes.default.arrayOf(_propTypes.default.shape({
|
|
104
|
-
value: _propTypes.default.string.isRequired,
|
|
105
|
-
label: _propTypes.default.string.isRequired
|
|
106
|
-
})),
|
|
107
|
-
value: _propTypes.default.string,
|
|
108
|
-
onChange: _propTypes.default.func,
|
|
109
|
-
placeholder: _propTypes.default.string,
|
|
110
|
-
className: _propTypes.default.string,
|
|
111
|
-
'aria-label': _propTypes.default.string,
|
|
112
|
-
iconClosed: _propTypes.default.string,
|
|
113
|
-
selectedIcon: _propTypes.default.string
|
|
114
|
-
} : {};
|
|
115
|
-
var _default = exports.default = InputSelect;
|
|
116
|
-
//# sourceMappingURL=index.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":["_react","_interopRequireWildcard","require","_propTypes","_interopRequireDefault","_classnames","_reactFontawesome","_style","e","__esModule","default","_getRequireWildcardCache","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","COMPONENT_ID","InputSelect","options","value","onChange","placeholder","className","ariaLabel","iconClosed","selectedIcon","open","setOpen","useState","wrapperRef","useRef","componentId","toLowerCase","replace","handleToggle","useCallback","o","handleOnOptionClick","optionValue","React","useEffect","handleClickOutside","event","current","contains","target","document","addEventListener","removeEventListener","selectedOption","find","opt","renderOption","option","handleClick","createElement","key","classnames","style","selected","role","onClick","optionIcon","icon","optionLabel","label","checkIcon","FontAwesomeIcon","outerWrapper","ref","wrapper","type","display","undefined","id","content","iconWrapper","rotated","menu","map","propTypes","process","env","NODE_ENV","PropTypes","arrayOf","shape","string","isRequired","func","_default","exports"],"sources":["../../../src/atom/input-select/index.js"],"sourcesContent":["import React, {useState, useRef, useCallback} from 'react';\nimport PropTypes from 'prop-types';\nimport classnames from 'classnames';\nimport {FontAwesomeIcon} from '@fortawesome/react-fontawesome';\nimport style from './style.css';\n\nconst COMPONENT_ID = 'input-select';\n\nconst InputSelect = ({\n options = [],\n value,\n onChange,\n placeholder,\n className,\n 'aria-label': ariaLabel,\n iconClosed = 'chevron-down',\n selectedIcon = 'circle-check'\n}) => {\n const [open, setOpen] = useState(false);\n const wrapperRef = useRef(null);\n\n const componentId = `${COMPONENT_ID}-${\n placeholder?.toLowerCase().replace(/\\s+/g, '-') || 'default'\n }`;\n\n const handleToggle = useCallback(() => {\n setOpen(o => !o);\n }, []);\n\n const handleOnOptionClick = useCallback(\n optionValue => {\n onChange(optionValue);\n setOpen(false);\n },\n [onChange]\n );\n\n React.useEffect(() => {\n if (!open) return;\n const handleClickOutside = event => {\n if (wrapperRef.current && !wrapperRef.current.contains(event.target)) {\n setOpen(false);\n }\n };\n document.addEventListener('mousedown', handleClickOutside);\n return () => document.removeEventListener('mousedown', handleClickOutside);\n }, [open]);\n\n const selectedOption = options.find(opt => opt.value === value);\n\n const renderOption = option => {\n function handleClick() {\n handleOnOptionClick(option.value);\n }\n\n return (\n <li\n key={option.value}\n className={classnames(style.option, option.value === value && style.selected)}\n role=\"option\"\n aria-selected={option.value === value}\n onClick={handleClick}\n >\n <span className={style.optionIcon}>{option.icon}</span>\n <span className={style.optionLabel}>{option.label}</span>\n {option.value === value ? (\n <span className={style.checkIcon}>\n <FontAwesomeIcon icon={selectedIcon} />\n </span>\n ) : null}\n </li>\n );\n };\n\n return (\n <div\n className={classnames(style.outerWrapper, {\n [style.open]: open\n })}\n >\n <div ref={wrapperRef} className={classnames(style.wrapper, className)} aria-label={ariaLabel}>\n <button\n type=\"button\"\n className={style.display}\n onClick={handleToggle}\n aria-haspopup=\"listbox\"\n aria-expanded={open}\n aria-controls={open ? `${componentId}-listbox` : undefined}\n id={componentId}\n >\n <div className={style.content}>\n <span className={style.label}>{placeholder}</span>\n {selectedOption ? <span className={style.value}>{selectedOption.label}</span> : null}\n </div>\n <span className={classnames(style.iconWrapper, {[style.open]: open})}>\n <FontAwesomeIcon\n className={classnames(style.icon, {[style.rotated]: open})}\n icon={iconClosed}\n />\n </span>\n </button>\n {open ? (\n <ul id={`${componentId}-listbox`} className={style.menu} role=\"listbox\">\n {options.map(renderOption)}\n </ul>\n ) : null}\n </div>\n </div>\n );\n};\n\nInputSelect.propTypes = {\n options: PropTypes.arrayOf(\n PropTypes.shape({\n value: PropTypes.string.isRequired,\n label: PropTypes.string.isRequired\n })\n ),\n value: PropTypes.string,\n onChange: PropTypes.func,\n placeholder: PropTypes.string,\n className: PropTypes.string,\n 'aria-label': PropTypes.string,\n iconClosed: PropTypes.string,\n selectedIcon: PropTypes.string\n};\n\nexport default InputSelect;\n"],"mappings":"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","ignoreList":[]}
|