@coorpacademy/components 10.1.12 → 10.1.13
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/input-checkbox/index.js +9 -3
- package/es/atom/input-checkbox/index.js.map +1 -1
- package/es/atom/input-checkbox/style.css +15 -0
- package/es/molecule/banner/test/fixtures.js +0 -4
- package/es/molecule/banner/test/fixtures.js.map +1 -1
- package/es/molecule/bullet-point-menu-button/index.js +1 -5
- package/es/molecule/bullet-point-menu-button/index.js.map +1 -1
- package/es/molecule/bullet-point-menu-button/style.css +11 -7
- package/es/molecule/select-multiple/index.js +101 -16
- package/es/molecule/select-multiple/index.js.map +1 -1
- package/es/molecule/select-multiple/style.css +292 -11
- package/es/molecule/select-multiple/test/fixtures/checked-cm-theme-multiple.js +32 -0
- package/es/molecule/select-multiple/test/fixtures/checked-cm-theme-multiple.js.map +1 -0
- package/es/molecule/select-multiple/test/fixtures/checked-cm-theme.js +32 -0
- package/es/molecule/select-multiple/test/fixtures/checked-cm-theme.js.map +1 -0
- package/es/molecule/select-multiple/test/fixtures/setup-theme-error.js +1 -1
- package/es/molecule/select-multiple/test/fixtures/setup-theme-error.js.map +1 -1
- package/es/organism/accordion/coorp-manager/index.js +5 -2
- package/es/organism/accordion/coorp-manager/index.js.map +1 -1
- package/lib/atom/input-checkbox/index.js +10 -3
- package/lib/atom/input-checkbox/index.js.map +1 -1
- package/lib/atom/input-checkbox/style.css +15 -0
- package/lib/molecule/banner/test/fixtures.js +0 -6
- package/lib/molecule/banner/test/fixtures.js.map +1 -1
- package/lib/molecule/bullet-point-menu-button/index.js +1 -5
- package/lib/molecule/bullet-point-menu-button/index.js.map +1 -1
- package/lib/molecule/bullet-point-menu-button/style.css +11 -7
- package/lib/molecule/select-multiple/index.js +103 -15
- package/lib/molecule/select-multiple/index.js.map +1 -1
- package/lib/molecule/select-multiple/style.css +292 -11
- package/lib/molecule/select-multiple/test/fixtures/checked-cm-theme-multiple.js +37 -0
- package/lib/molecule/select-multiple/test/fixtures/checked-cm-theme-multiple.js.map +1 -0
- package/lib/molecule/select-multiple/test/fixtures/checked-cm-theme.js +37 -0
- package/lib/molecule/select-multiple/test/fixtures/checked-cm-theme.js.map +1 -0
- package/lib/molecule/select-multiple/test/fixtures/setup-theme-error.js +1 -1
- package/lib/molecule/select-multiple/test/fixtures/setup-theme-error.js.map +1 -1
- package/lib/organism/accordion/coorp-manager/index.js +4 -2
- package/lib/organism/accordion/coorp-manager/index.js.map +1 -1
- package/package.json +2 -2
- package/es/molecule/short-lived-banner/test/fixtures.js +0 -15
- package/es/molecule/short-lived-banner/test/fixtures.js.map +0 -1
- package/lib/molecule/short-lived-banner/test/fixtures.js +0 -25
- package/lib/molecule/short-lived-banner/test/fixtures.js.map +0 -1
|
@@ -1,11 +1,13 @@
|
|
|
1
1
|
import _uniqueId from "lodash/fp/uniqueId";
|
|
2
2
|
import _noop from "lodash/fp/noop";
|
|
3
|
+
import _keys from "lodash/fp/keys";
|
|
3
4
|
import React, { useMemo } from 'react';
|
|
4
5
|
import PropTypes from 'prop-types';
|
|
5
6
|
import { NovaSolidStatusValidate as CheckIcon } from '@coorpacademy/nova-icons';
|
|
6
7
|
import getClassState from '../../util/get-class-state';
|
|
7
8
|
import style from './style.css';
|
|
8
9
|
const titleStylesClassNames = {
|
|
10
|
+
inherit: style.inherit,
|
|
9
11
|
primary: style.primary,
|
|
10
12
|
secondary: style.secondary,
|
|
11
13
|
tertiary: style.tertiary
|
|
@@ -21,7 +23,8 @@ const InputCheckbox = props => {
|
|
|
21
23
|
titleStyle = 'primary',
|
|
22
24
|
modified = false,
|
|
23
25
|
theme = 'default',
|
|
24
|
-
title: propsTitle
|
|
26
|
+
title: propsTitle,
|
|
27
|
+
noLabelMargins = false
|
|
25
28
|
} = props;
|
|
26
29
|
const titleStyleClassName = titleStylesClassNames[titleStyle];
|
|
27
30
|
|
|
@@ -44,11 +47,13 @@ const InputCheckbox = props => {
|
|
|
44
47
|
onChange: handleChange,
|
|
45
48
|
disabled: disabled
|
|
46
49
|
}), /*#__PURE__*/React.createElement("label", {
|
|
50
|
+
className: noLabelMargins ? style.noLabelMargins : undefined,
|
|
47
51
|
htmlFor: idCheckbox
|
|
48
52
|
}, /*#__PURE__*/React.createElement(CheckIcon, {
|
|
49
53
|
className: style.icon
|
|
50
54
|
})), /*#__PURE__*/React.createElement("span", {
|
|
51
|
-
className: titleStyleClassName
|
|
55
|
+
className: titleStyleClassName,
|
|
56
|
+
title: title
|
|
52
57
|
}, title));
|
|
53
58
|
};
|
|
54
59
|
|
|
@@ -60,8 +65,9 @@ InputCheckbox.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
|
60
65
|
error: PropTypes.bool,
|
|
61
66
|
onChange: PropTypes.func,
|
|
62
67
|
modified: PropTypes.bool,
|
|
68
|
+
noLabelMargins: PropTypes.bool,
|
|
63
69
|
theme: PropTypes.oneOf(['coorpmanager', 'default']),
|
|
64
|
-
titleStyle: PropTypes.oneOf(
|
|
70
|
+
titleStyle: PropTypes.oneOf(_keys(titleStylesClassNames))
|
|
65
71
|
} : {};
|
|
66
72
|
export default InputCheckbox;
|
|
67
73
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/atom/input-checkbox/index.js"],"names":["React","useMemo","PropTypes","NovaSolidStatusValidate","CheckIcon","getClassState","style","titleStylesClassNames","primary","secondary","tertiary","InputCheckbox","props","checked","onChange","error","disabled","required","titleStyle","modified","theme","title","propsTitle","titleStyleClassName","idCheckbox","handleChange","e","target","modifiedClassName","coorpManagerModified","defaultModified","errorClassName","coorpManagerError","defaultError","defaultContainerClassName","coorpManager","default","className","checkbox","icon","propTypes","string","isRequired","bool","func","oneOf"],"mappings":"
|
|
1
|
+
{"version":3,"sources":["../../../src/atom/input-checkbox/index.js"],"names":["React","useMemo","PropTypes","NovaSolidStatusValidate","CheckIcon","getClassState","style","titleStylesClassNames","inherit","primary","secondary","tertiary","InputCheckbox","props","checked","onChange","error","disabled","required","titleStyle","modified","theme","title","propsTitle","noLabelMargins","titleStyleClassName","idCheckbox","handleChange","e","target","modifiedClassName","coorpManagerModified","defaultModified","errorClassName","coorpManagerError","defaultError","defaultContainerClassName","coorpManager","default","className","checkbox","undefined","icon","propTypes","string","isRequired","bool","func","oneOf"],"mappings":"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","sourcesContent":["import React, {useMemo} from 'react';\nimport PropTypes from 'prop-types';\nimport {NovaSolidStatusValidate as CheckIcon} from '@coorpacademy/nova-icons';\nimport {keys, noop, uniqueId} from 'lodash/fp';\nimport getClassState from '../../util/get-class-state';\nimport style from './style.css';\n\nconst titleStylesClassNames = {\n inherit: style.inherit,\n primary: style.primary,\n secondary: style.secondary,\n tertiary: style.tertiary\n};\n\nconst InputCheckbox = props => {\n const {\n checked,\n onChange = noop,\n error,\n disabled,\n required,\n titleStyle = 'primary',\n modified = false,\n theme = 'default',\n title: propsTitle,\n noLabelMargins = false\n } = props;\n\n const titleStyleClassName = titleStylesClassNames[titleStyle];\n const idCheckbox = uniqueId('input-checkbox-');\n const title = `${propsTitle}${required ? '*' : ''}`;\n const handleChange = useMemo(() => e => onChange(e.target.checked), [onChange]);\n\n const modifiedClassName =\n theme === 'coorpmanager' ? style.coorpManagerModified : style.defaultModified;\n const errorClassName = theme === 'coorpmanager' ? style.coorpManagerError : style.defaultError;\n const defaultContainerClassName = theme === 'coorpmanager' ? style.coorpManager : style.default;\n\n const className = getClassState(\n defaultContainerClassName,\n modifiedClassName,\n errorClassName,\n modified,\n error\n );\n\n return (\n <div className={className}>\n <input\n type=\"checkbox\"\n className={style.checkbox}\n name={title}\n id={idCheckbox}\n checked={checked}\n onChange={handleChange}\n disabled={disabled}\n />\n <label className={noLabelMargins ? style.noLabelMargins : undefined} htmlFor={idCheckbox}>\n <CheckIcon className={style.icon} />\n </label>\n <span className={titleStyleClassName} title={title}>\n {title}\n </span>\n </div>\n );\n};\n\nInputCheckbox.propTypes = {\n title: PropTypes.string.isRequired,\n disabled: PropTypes.bool,\n required: PropTypes.bool,\n checked: PropTypes.bool,\n error: PropTypes.bool,\n onChange: PropTypes.func,\n modified: PropTypes.bool,\n noLabelMargins: PropTypes.bool,\n theme: PropTypes.oneOf(['coorpmanager', 'default']),\n titleStyle: PropTypes.oneOf(keys(titleStylesClassNames))\n};\n\nexport default InputCheckbox;\n"],"file":"index.js"}
|
|
@@ -143,3 +143,18 @@
|
|
|
143
143
|
.coorpManagerModified .checkbox:checked + label {
|
|
144
144
|
outline: 2px solid battle;
|
|
145
145
|
}
|
|
146
|
+
|
|
147
|
+
.default .inherit,
|
|
148
|
+
.coorpManager .inherit {
|
|
149
|
+
color: inherit;
|
|
150
|
+
text-overflow: ellipsis;
|
|
151
|
+
white-space: nowrap;
|
|
152
|
+
overflow: hidden;
|
|
153
|
+
width: 100%;
|
|
154
|
+
}
|
|
155
|
+
|
|
156
|
+
.coorpManager .noLabelMargins,
|
|
157
|
+
.default .noLabelMargins {
|
|
158
|
+
margin-right: 0;
|
|
159
|
+
margin-left: 0;
|
|
160
|
+
}
|
|
@@ -4,8 +4,6 @@ import renderComponentMacro from '../../../test/helpers/render-component';
|
|
|
4
4
|
import MoleculeBanner from '..';
|
|
5
5
|
import fixtureDefault from './fixtures/default';
|
|
6
6
|
import fixtureErrorBanner from './fixtures/error-banner';
|
|
7
|
-
import fixtureErrorTemporaryBanner from './fixtures/error-temporary-banner';
|
|
8
|
-
import fixtureSuccessTemporaryBanner from './fixtures/success-temporary-banner';
|
|
9
7
|
test('Molecule › MoleculeBanner > should have valid propTypes', t => {
|
|
10
8
|
t.pass();
|
|
11
9
|
forEach(MoleculeBanner.propTypes, (value, key) => {
|
|
@@ -14,6 +12,4 @@ test('Molecule › MoleculeBanner > should have valid propTypes', t => {
|
|
|
14
12
|
});
|
|
15
13
|
test('Molecule › MoleculeBanner › Default › should be rendered', renderComponentMacro, MoleculeBanner, fixtureDefault);
|
|
16
14
|
test('Molecule › MoleculeBanner › ErrorBanner › should be rendered', renderComponentMacro, MoleculeBanner, fixtureErrorBanner);
|
|
17
|
-
test('Molecule › MoleculeBanner › ErrorTemporaryBanner › should be rendered', renderComponentMacro, MoleculeBanner, fixtureErrorTemporaryBanner);
|
|
18
|
-
test('Molecule › MoleculeBanner › SuccessTemporaryBanner › should be rendered', renderComponentMacro, MoleculeBanner, fixtureSuccessTemporaryBanner);
|
|
19
15
|
//# sourceMappingURL=fixtures.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/molecule/banner/test/fixtures.js"],"names":["test","forEach","renderComponentMacro","MoleculeBanner","fixtureDefault","fixtureErrorBanner","
|
|
1
|
+
{"version":3,"sources":["../../../../src/molecule/banner/test/fixtures.js"],"names":["test","forEach","renderComponentMacro","MoleculeBanner","fixtureDefault","fixtureErrorBanner","t","pass","propTypes","value","key","not","undefined"],"mappings":"AAAA,OAAOA,IAAP,MAAiB,KAAjB;AACA,OAAOC,OAAP,MAAoB,gBAApB;AACA,OAAOC,oBAAP,MAAiC,wCAAjC;AACA,OAAOC,cAAP,MAA2B,IAA3B;AACA,OAAOC,cAAP,MAA2B,oBAA3B;AACA,OAAOC,kBAAP,MAA+B,yBAA/B;AAEAL,IAAI,CAAC,yDAAD,EAA4DM,CAAC,IAAI;AACnEA,EAAAA,CAAC,CAACC,IAAF;AACAN,EAAAA,OAAO,CAACE,cAAc,CAACK,SAAhB,EAA2B,CAACC,KAAD,EAAQC,GAAR,KAAgB;AAChDJ,IAAAA,CAAC,CAACK,GAAF,CAAMF,KAAN,EAAaG,SAAb,EAAyB,mDAAkDF,GAAI,mEAA/E;AACD,GAFM,CAAP;AAGD,CALG,CAAJ;AAOAV,IAAI,CAAC,0DAAD,EAA6DE,oBAA7D,EAAmFC,cAAnF,EAAmGC,cAAnG,CAAJ;AACAJ,IAAI,CAAC,8DAAD,EAAiEE,oBAAjE,EAAuFC,cAAvF,EAAuGE,kBAAvG,CAAJ","sourcesContent":["import test from 'ava';\nimport forEach from 'lodash/forEach';\nimport renderComponentMacro from '../../../test/helpers/render-component';\nimport MoleculeBanner from '..';\nimport fixtureDefault from './fixtures/default';\nimport fixtureErrorBanner from './fixtures/error-banner';\n\ntest('Molecule › MoleculeBanner > should have valid propTypes', t => {\n t.pass();\n forEach(MoleculeBanner.propTypes, (value, key) => {\n t.not(value, undefined, `PropType for \"Molecule.MoleculeBanner.propTypes.${key}\" may not be undefined. Did you mistype the propTypes definition?`);\n });\n});\n\ntest('Molecule › MoleculeBanner › Default › should be rendered', renderComponentMacro, MoleculeBanner, fixtureDefault);\ntest('Molecule › MoleculeBanner › ErrorBanner › should be rendered', renderComponentMacro, MoleculeBanner, fixtureErrorBanner);\n"],"file":"fixtures.js"}
|
|
@@ -1,5 +1,3 @@
|
|
|
1
|
-
function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
2
|
-
|
|
3
1
|
import React, { useCallback } from 'react';
|
|
4
2
|
import PropTypes from 'prop-types';
|
|
5
3
|
import ButtonLinkIconOnly from '../../atom/button-link-icon-only';
|
|
@@ -35,9 +33,7 @@ const BulletPointMenuButton = props => {
|
|
|
35
33
|
return /*#__PURE__*/React.createElement("div", {
|
|
36
34
|
className: style.bulletPointWrapper,
|
|
37
35
|
"data-name": "bullet-point-wrapper"
|
|
38
|
-
}, /*#__PURE__*/React.createElement(ButtonLinkIconOnly,
|
|
39
|
-
className: style.bulletPointButton
|
|
40
|
-
})), menu);
|
|
36
|
+
}, /*#__PURE__*/React.createElement(ButtonLinkIconOnly, bulletPointButtonProps), menu);
|
|
41
37
|
};
|
|
42
38
|
|
|
43
39
|
BulletPointMenuButton.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/molecule/bullet-point-menu-button/index.js"],"names":["React","useCallback","PropTypes","ButtonLinkIconOnly","ButtonMenu","style","BulletPointMenuButton","props","disabled","buttonAriaLabel","menuAriaLabel","onClick","buttons","handleOnClick","menuProps","menu","bulletPointMenu","bulletPointButtonProps","size","icon","bulletPointWrapper","
|
|
1
|
+
{"version":3,"sources":["../../../src/molecule/bullet-point-menu-button/index.js"],"names":["React","useCallback","PropTypes","ButtonLinkIconOnly","ButtonMenu","style","BulletPointMenuButton","props","disabled","buttonAriaLabel","menuAriaLabel","onClick","buttons","handleOnClick","menuProps","menu","bulletPointMenu","bulletPointButtonProps","size","icon","bulletPointWrapper","propTypes","bool","string","func"],"mappings":"AAAA,OAAOA,KAAP,IAAeC,WAAf,QAAiC,OAAjC;AACA,OAAOC,SAAP,MAAsB,YAAtB;AACA,OAAOC,kBAAP,MAA+B,kCAA/B;AACA,OAAOC,UAAP,MAAuB,wBAAvB;AACA,OAAOC,KAAP,MAAkB,aAAlB;;AAEA,MAAMC,qBAAqB,GAAGC,KAAK,IAAI;AACrC,QAAM;AAACC,IAAAA,QAAQ,GAAG,KAAZ;AAAmBC,IAAAA,eAAnB;AAAoCC,IAAAA,aAApC;AAAmDC,IAAAA,OAAnD;AAA4DC,IAAAA;AAA5D,MAAuEL,KAA7E;AACA,QAAMM,aAAa,GAAGZ,WAAW,CAAC,MAAMU,OAAO,EAAd,EAAkB,CAACA,OAAD,CAAlB,CAAjC;AAEA,QAAMG,SAAS,GAAG;AAChB,iBAAa,aADG;AAEhBF,IAAAA;AAFgB,GAAlB;AAKA,QAAMG,IAAI,gBACR;AAAK,IAAA,SAAS,EAAEV,KAAK,CAACW,eAAtB;AAAuC,iBAAU,cAAjD;AAAgE,kBAAYN;AAA5E,kBACE,oBAAC,UAAD,EAAgBI,SAAhB,CADF,CADF;AAKA,QAAMG,sBAAsB,GAAG;AAC7BC,IAAAA,IAAI,EAAE,SADuB;AAE7B,kBAAcT,eAFe;AAG7B,iBAAa,qBAHgB;AAI7BU,IAAAA,IAAI,EAAE,cAJuB;AAK7BR,IAAAA,OAAO,EAAEE,aALoB;AAM7BL,IAAAA;AAN6B,GAA/B;AASA,sBACE;AAAK,IAAA,SAAS,EAAEH,KAAK,CAACe,kBAAtB;AAA0C,iBAAU;AAApD,kBACE,oBAAC,kBAAD,EAAwBH,sBAAxB,CADF,EAEGF,IAFH,CADF;AAMD,CA7BD;;AA+BAT,qBAAqB,CAACe,SAAtB,2CAAkC;AAChCb,EAAAA,QAAQ,EAAEN,SAAS,CAACoB,IADY;AAEhCb,EAAAA,eAAe,EAAEP,SAAS,CAACqB,MAFK;AAGhCb,EAAAA,aAAa,EAAER,SAAS,CAACqB,MAHO;AAIhCX,EAAAA,OAAO,EAAER,UAAU,CAACiB,SAAX,CAAqBT,OAJE;AAKhCD,EAAAA,OAAO,EAAET,SAAS,CAACsB;AALa,CAAlC;AAQA,eAAelB,qBAAf","sourcesContent":["import React, {useCallback} from 'react';\nimport PropTypes from 'prop-types';\nimport ButtonLinkIconOnly from '../../atom/button-link-icon-only';\nimport ButtonMenu from '../../atom/button-menu';\nimport style from './style.css';\n\nconst BulletPointMenuButton = props => {\n const {disabled = false, buttonAriaLabel, menuAriaLabel, onClick, buttons} = props;\n const handleOnClick = useCallback(() => onClick(), [onClick]);\n\n const menuProps = {\n 'data-name': 'button-menu',\n buttons\n };\n\n const menu = (\n <div className={style.bulletPointMenu} data-name=\"menu-wrapper\" aria-label={menuAriaLabel}>\n <ButtonMenu {...menuProps} />\n </div>\n );\n const bulletPointButtonProps = {\n size: 'default',\n 'aria-label': buttonAriaLabel,\n 'data-name': 'bullet-point-button',\n icon: 'bullet-point',\n onClick: handleOnClick,\n disabled\n };\n\n return (\n <div className={style.bulletPointWrapper} data-name=\"bullet-point-wrapper\">\n <ButtonLinkIconOnly {...bulletPointButtonProps} />\n {menu}\n </div>\n );\n};\n\nBulletPointMenuButton.propTypes = {\n disabled: PropTypes.bool,\n buttonAriaLabel: PropTypes.string,\n menuAriaLabel: PropTypes.string,\n buttons: ButtonMenu.propTypes.buttons,\n onClick: PropTypes.func\n};\n\nexport default BulletPointMenuButton;\n"],"file":"index.js"}
|
|
@@ -10,7 +10,7 @@
|
|
|
10
10
|
position: relative;
|
|
11
11
|
}
|
|
12
12
|
|
|
13
|
-
.
|
|
13
|
+
.bulletPointWrapper > button {
|
|
14
14
|
position: relative;
|
|
15
15
|
cursor: pointer;
|
|
16
16
|
}
|
|
@@ -31,8 +31,8 @@
|
|
|
31
31
|
background-color: cm_grey_100;
|
|
32
32
|
}
|
|
33
33
|
|
|
34
|
-
/* Fade-in - Fade-out */
|
|
35
|
-
|
|
34
|
+
/* Fade-in - Fade-out, does target button class but bulletPointMenu only */
|
|
35
|
+
button + .bulletPointMenu {
|
|
36
36
|
max-height: 0;
|
|
37
37
|
/* fade out combo */
|
|
38
38
|
visibility: hidden;
|
|
@@ -40,13 +40,17 @@
|
|
|
40
40
|
transition:visibility 0.5s ease,opacity 0.5s ease;
|
|
41
41
|
}
|
|
42
42
|
|
|
43
|
-
|
|
43
|
+
/* Does target button class but bulletPointMenu only */
|
|
44
|
+
button:focus + .bulletPointMenu {
|
|
44
45
|
/* fade in combo */
|
|
45
46
|
max-height: max-content;
|
|
46
47
|
visibility:visible;
|
|
47
48
|
opacity:1;
|
|
48
49
|
}
|
|
49
50
|
|
|
50
|
-
/*
|
|
51
|
-
|
|
52
|
-
|
|
51
|
+
/*
|
|
52
|
+
Recover - unset pointer-events,
|
|
53
|
+
to be able to click on the button when the menu is open to close it
|
|
54
|
+
*/
|
|
55
|
+
.bulletPointWrapper > button:focus { pointer-events: none; }
|
|
56
|
+
.bulletPointWrapper > button:not(:focus) { pointer-events: auto; }
|
|
@@ -1,3 +1,5 @@
|
|
|
1
|
+
import _isEmpty from "lodash/fp/isEmpty";
|
|
2
|
+
import _keys from "lodash/fp/keys";
|
|
1
3
|
import _set from "lodash/fp/set";
|
|
2
4
|
import _get from "lodash/fp/get";
|
|
3
5
|
import _filter from "lodash/fp/filter";
|
|
@@ -10,15 +12,17 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
|
|
|
10
12
|
import React, { useState, useEffect, useRef, useCallback } from 'react';
|
|
11
13
|
import PropTypes from 'prop-types';
|
|
12
14
|
import classnames from 'classnames';
|
|
13
|
-
import { NovaCompositionNavigationArrowDown as ArrowDown } from '@coorpacademy/nova-icons';
|
|
15
|
+
import { NovaCompositionNavigationArrowDown as ArrowDown, NovaSolidStatusClose as ErrorIcon, NovaCompositionCoorpacademyInformationIcon as InfoIcon } from '@coorpacademy/nova-icons';
|
|
14
16
|
import TitledCheckbox from '../titled-checkbox';
|
|
15
17
|
import Provider from '../../atom/provider';
|
|
18
|
+
import Checkbox from '../../atom/input-checkbox';
|
|
16
19
|
import getClassState from '../../util/get-class-state';
|
|
17
20
|
import style from './style.css';
|
|
18
21
|
const themeStyle = {
|
|
19
22
|
setup: style.setup,
|
|
20
23
|
cockpit: style.cockpit,
|
|
21
|
-
sidebar: style.sidebar
|
|
24
|
+
sidebar: style.sidebar,
|
|
25
|
+
coorpmanager: style.coorpmanager
|
|
22
26
|
};
|
|
23
27
|
export const useChoices = options => {
|
|
24
28
|
const choicesRef = useRef(options);
|
|
@@ -36,17 +40,49 @@ export const useChoices = options => {
|
|
|
36
40
|
return [getChoices, setChoices];
|
|
37
41
|
};
|
|
38
42
|
|
|
43
|
+
const CMMultipleView = ({
|
|
44
|
+
multiple,
|
|
45
|
+
choice,
|
|
46
|
+
onChange
|
|
47
|
+
}) => {
|
|
48
|
+
const handleChange = useCallback(checked => {
|
|
49
|
+
if (!multiple) {
|
|
50
|
+
return onChange(choice);
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
return onChange(_extends(_extends({}, choice), {}, {
|
|
54
|
+
selected: checked
|
|
55
|
+
}));
|
|
56
|
+
}, [onChange, choice]);
|
|
57
|
+
return multiple ? /*#__PURE__*/React.createElement("div", {
|
|
58
|
+
className: style.item
|
|
59
|
+
}, /*#__PURE__*/React.createElement(Checkbox, {
|
|
60
|
+
titleStyle: "inherit",
|
|
61
|
+
checked: choice.selected,
|
|
62
|
+
onChange: handleChange,
|
|
63
|
+
noLabelMargins: true,
|
|
64
|
+
title: choice.name
|
|
65
|
+
})) : /*#__PURE__*/React.createElement("span", {
|
|
66
|
+
className: style.item,
|
|
67
|
+
onClick: handleChange,
|
|
68
|
+
title: choice.name
|
|
69
|
+
}, choice.name);
|
|
70
|
+
};
|
|
71
|
+
|
|
39
72
|
const SelectMultiple = ({
|
|
40
73
|
title,
|
|
41
74
|
options,
|
|
42
75
|
theme,
|
|
43
76
|
placeholder,
|
|
44
77
|
description,
|
|
78
|
+
hint,
|
|
45
79
|
multiple,
|
|
46
80
|
onChange,
|
|
81
|
+
onError,
|
|
47
82
|
modified = false,
|
|
48
83
|
required = false,
|
|
49
|
-
error =
|
|
84
|
+
error = '',
|
|
85
|
+
disabled = false
|
|
50
86
|
}, {
|
|
51
87
|
skin
|
|
52
88
|
}) => {
|
|
@@ -61,7 +97,10 @@ const SelectMultiple = ({
|
|
|
61
97
|
const handleOnClick = useCallback(e => {
|
|
62
98
|
e.preventDefault();
|
|
63
99
|
e.stopPropagation();
|
|
64
|
-
|
|
100
|
+
|
|
101
|
+
if (!disabled) {
|
|
102
|
+
updateIsOpened(prev => !prev);
|
|
103
|
+
}
|
|
65
104
|
}, []);
|
|
66
105
|
const closeHandle = useCallback(e => {
|
|
67
106
|
if (nodeRef && nodeRef.current && !nodeRef.current.contains(e.target)) {
|
|
@@ -86,6 +125,7 @@ const SelectMultiple = ({
|
|
|
86
125
|
document.removeEventListener('touchstart', closeHandle);
|
|
87
126
|
};
|
|
88
127
|
}, [closeHandle]);
|
|
128
|
+
const isCMTheme = theme === 'coorpmanager';
|
|
89
129
|
|
|
90
130
|
const lines = _map.convert({
|
|
91
131
|
cap: false
|
|
@@ -93,7 +133,13 @@ const SelectMultiple = ({
|
|
|
93
133
|
return /*#__PURE__*/React.createElement("li", {
|
|
94
134
|
key: i,
|
|
95
135
|
className: style.choice
|
|
96
|
-
}, /*#__PURE__*/React.createElement(
|
|
136
|
+
}, isCMTheme ? /*#__PURE__*/React.createElement(CMMultipleView, {
|
|
137
|
+
multiple: multiple,
|
|
138
|
+
choice: _extends(_extends({}, choice), {}, {
|
|
139
|
+
i
|
|
140
|
+
}),
|
|
141
|
+
onChange: handleChange
|
|
142
|
+
}) : /*#__PURE__*/React.createElement(TitledCheckbox, {
|
|
97
143
|
onToggle: handleChange,
|
|
98
144
|
choice: _extends(_extends({}, choice), {}, {
|
|
99
145
|
i
|
|
@@ -108,47 +154,86 @@ const SelectMultiple = ({
|
|
|
108
154
|
|
|
109
155
|
const _title = title && `${title}${required ? ' *' : ''}`;
|
|
110
156
|
|
|
111
|
-
const titleView = title ? /*#__PURE__*/React.createElement("span", {
|
|
112
|
-
className: style.title
|
|
113
|
-
}, _title, " ") : null;
|
|
114
157
|
const isActive = isOpened === true;
|
|
158
|
+
const titleView = title ? /*#__PURE__*/React.createElement("span", {
|
|
159
|
+
className: classnames(style.title, isCMTheme && selection && style.titleWithSelection, isCMTheme && _isEmpty(selection) && style.noValue, isActive && style.active)
|
|
160
|
+
}, _title, isCMTheme ? /*#__PURE__*/React.createElement("div", {
|
|
161
|
+
className: style.infoIconWrapper
|
|
162
|
+
}, /*#__PURE__*/React.createElement(InfoIcon, {
|
|
163
|
+
className: style.infoIcon
|
|
164
|
+
}), /*#__PURE__*/React.createElement("div", {
|
|
165
|
+
className: style.descriptionLabel
|
|
166
|
+
}, description)) : null) : null;
|
|
167
|
+
const hintView = isCMTheme && !isActive ? /*#__PURE__*/React.createElement("div", {
|
|
168
|
+
className: style.hint // eslint-disable-next-line react/no-danger
|
|
169
|
+
,
|
|
170
|
+
dangerouslySetInnerHTML: {
|
|
171
|
+
__html: error || hint
|
|
172
|
+
}
|
|
173
|
+
}) : null;
|
|
115
174
|
const mainClass = theme ? themeStyle[theme] : style.default;
|
|
175
|
+
const showPlaceholder = isCMTheme && isActive;
|
|
116
176
|
const behaviourClassName = getClassState(style.default, style.modified, style.error, modified, error);
|
|
177
|
+
const errorIconView = error ? /*#__PURE__*/React.createElement(ErrorIcon, {
|
|
178
|
+
onClick: onError,
|
|
179
|
+
className: style.errorIcon
|
|
180
|
+
}) : null;
|
|
117
181
|
return /*#__PURE__*/React.createElement("div", {
|
|
118
|
-
className: classnames(mainClass, behaviourClassName),
|
|
182
|
+
className: classnames(mainClass, behaviourClassName, disabled && style.disabled),
|
|
119
183
|
ref: nodeRef
|
|
120
|
-
}, /*#__PURE__*/React.createElement("label", null, titleView, /*#__PURE__*/React.createElement("div", {
|
|
184
|
+
}, /*#__PURE__*/React.createElement("label", null, !isCMTheme && titleView, /*#__PURE__*/React.createElement("div", {
|
|
121
185
|
className: style.select,
|
|
122
186
|
title: selection || placeholder,
|
|
123
187
|
onClick: handleOnClick
|
|
124
|
-
},
|
|
188
|
+
}, isCMTheme && titleView, /*#__PURE__*/React.createElement("span", {
|
|
189
|
+
className: classnames(style.selection, isCMTheme && _isEmpty(selection) && style.noselection)
|
|
190
|
+
}, selection || !isCMTheme || showPlaceholder && placeholder || null), isCMTheme ? /*#__PURE__*/React.createElement("div", {
|
|
191
|
+
className: style.iconsWrapper
|
|
192
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
193
|
+
className: style.flex
|
|
194
|
+
}, errorIconView), /*#__PURE__*/React.createElement("div", {
|
|
195
|
+
className: classnames(style.flex, isActive && style.clicked)
|
|
196
|
+
}, /*#__PURE__*/React.createElement(ArrowDown, {
|
|
197
|
+
color: black,
|
|
198
|
+
className: classnames(style.arrow, {
|
|
199
|
+
[style.down]: isActive
|
|
200
|
+
})
|
|
201
|
+
}))) : /*#__PURE__*/React.createElement(ArrowDown, {
|
|
125
202
|
color: black,
|
|
126
203
|
className: classnames(style.arrow, {
|
|
127
204
|
[style.down]: isActive
|
|
128
205
|
})
|
|
129
206
|
})), /*#__PURE__*/React.createElement("div", {
|
|
130
|
-
className: isActive
|
|
207
|
+
className: classnames(style.choices, isActive && style.activeChoices)
|
|
131
208
|
}, /*#__PURE__*/React.createElement("ul", {
|
|
132
209
|
className: style.list
|
|
133
|
-
}, lines))), /*#__PURE__*/React.createElement("div", {
|
|
210
|
+
}, lines))), !isCMTheme ? /*#__PURE__*/React.createElement("div", {
|
|
134
211
|
className: style.description
|
|
135
|
-
}, description));
|
|
212
|
+
}, description) : null, hintView);
|
|
136
213
|
};
|
|
137
214
|
|
|
138
215
|
SelectMultiple.contextTypes = {
|
|
139
216
|
skin: Provider.childContextTypes.skin
|
|
140
217
|
};
|
|
218
|
+
CMMultipleView.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
219
|
+
multiple: PropTypes.bool,
|
|
220
|
+
choice: TitledCheckbox.propTypes.choice,
|
|
221
|
+
onChange: PropTypes.func
|
|
222
|
+
} : {};
|
|
141
223
|
SelectMultiple.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
142
224
|
title: PropTypes.string,
|
|
143
225
|
placeholder: PropTypes.string,
|
|
144
226
|
description: PropTypes.string,
|
|
227
|
+
hint: PropTypes.string,
|
|
145
228
|
options: PropTypes.arrayOf(TitledCheckbox.propTypes.choice),
|
|
146
229
|
onChange: PropTypes.func,
|
|
230
|
+
onError: PropTypes.func,
|
|
147
231
|
multiple: PropTypes.bool,
|
|
148
|
-
theme: PropTypes.string,
|
|
149
232
|
modified: PropTypes.bool,
|
|
233
|
+
disabled: PropTypes.bool,
|
|
150
234
|
required: PropTypes.bool,
|
|
151
|
-
error: PropTypes.
|
|
235
|
+
error: PropTypes.string,
|
|
236
|
+
theme: PropTypes.oneOf(_keys(themeStyle))
|
|
152
237
|
} : {};
|
|
153
238
|
export default SelectMultiple;
|
|
154
239
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/molecule/select-multiple/index.js"],"names":["React","useState","useEffect","useRef","useCallback","PropTypes","classnames","NovaCompositionNavigationArrowDown","ArrowDown","TitledCheckbox","Provider","getClassState","style","themeStyle","setup","cockpit","sidebar","useChoices","options","choicesRef","getChoices","current","setChoices","choice","choices","i","selected","filter","c","SelectMultiple","title","theme","placeholder","description","multiple","onChange","modified","required","error","skin","isOpened","updateIsOpened","nodeRef","defaultColor","black","handleOnClick","e","preventDefault","stopPropagation","prev","closeHandle","contains","target","handleChange","document","addEventListener","removeEventListener","lines","convert","cap","selection","_title","titleView","isActive","mainClass","default","behaviourClassName","select","arrow","down","activeChoices","list","contextTypes","childContextTypes","propTypes","string","arrayOf","func","bool"],"mappings":";;;;;;;;;AAAA,OAAOA,KAAP,IAAeC,QAAf,EAAyBC,SAAzB,EAAoCC,MAApC,EAA4CC,WAA5C,QAA8D,OAA9D;AACA,OAAOC,SAAP,MAAsB,YAAtB;AACA,OAAOC,UAAP,MAAuB,YAAvB;AAEA,SAAQC,kCAAkC,IAAIC,SAA9C,QAA8D,0BAA9D;AACA,OAAOC,cAAP,MAA2B,oBAA3B;AACA,OAAOC,QAAP,MAAqB,qBAArB;AACA,OAAOC,aAAP,MAA0B,4BAA1B;AACA,OAAOC,KAAP,MAAkB,aAAlB;AAEA,MAAMC,UAAU,GAAG;AACjBC,EAAAA,KAAK,EAAEF,KAAK,CAACE,KADI;AAEjBC,EAAAA,OAAO,EAAEH,KAAK,CAACG,OAFE;AAGjBC,EAAAA,OAAO,EAAEJ,KAAK,CAACI;AAHE,CAAnB;AAMA,OAAO,MAAMC,UAAU,GAAGC,OAAO,IAAI;AACnC,QAAMC,UAAU,GAAGhB,MAAM,CAACe,OAAD,CAAzB;;AAEA,QAAME,UAAU,GAAG,MAAM;AACvB,WAAOD,UAAU,CAACE,OAAlB;AACD,GAFD;;AAIA,QAAMC,UAAU,GAAGC,MAAM,IAAI;AAC3B,UAAMC,OAAO,GAAG,KAAK,IAAGD,MAAM,CAACE,CAAE,YAAjB,EAA8B,CAACF,MAAM,CAACG,QAAtC,EAAgDN,UAAU,EAA1D,CAAhB;;AAEAD,IAAAA,UAAU,CAACE,OAAX,GAAqBG,OAAO,CAACG,MAAR,CAAeC,CAAC,IAAIA,CAAC,CAACF,QAAtB,CAArB;AACD,GAJD;;AAMA,SAAO,CAACN,UAAD,EAAaE,UAAb,CAAP;AACD,CAdM;;AAgBP,MAAMO,cAAc,GAAG,CACrB;AACEC,EAAAA,KADF;AAEEZ,EAAAA,OAFF;AAGEa,EAAAA,KAHF;AAIEC,EAAAA,WAJF;AAKEC,EAAAA,WALF;AAMEC,EAAAA,QANF;AAOEC,EAAAA,QAPF;AAQEC,EAAAA,QAAQ,GAAG,KARb;AASEC,EAAAA,QAAQ,GAAG,KATb;AAUEC,EAAAA,KAAK,GAAG;AAVV,CADqB,EAarB;AAACC,EAAAA;AAAD,CAbqB,KAclB;AACH,QAAM,CAACC,QAAD,EAAWC,cAAX,IAA6BxC,QAAQ,CAAC,KAAD,CAA3C;AACA,QAAM,CAACmB,UAAD,EAAaE,UAAb,IAA2BL,UAAU,CAACC,OAAD,CAA3C;AACA,QAAMwB,OAAO,GAAGvC,MAAM,CAAC,IAAD,CAAtB;;AAEA,QAAMwC,YAAY,GAAG,KAAI,gBAAJ,EAAsBJ,IAAtB,CAArB;;AACA,QAAMK,KAAK,GAAG,KAAI,cAAJ,EAAoBL,IAApB,CAAd;;AAEA,QAAMM,aAAa,GAAGzC,WAAW,CAAC0C,CAAC,IAAI;AACrCA,IAAAA,CAAC,CAACC,cAAF;AACAD,IAAAA,CAAC,CAACE,eAAF;AAEAP,IAAAA,cAAc,CAACQ,IAAI,IAAI,CAACA,IAAV,CAAd;AACD,GALgC,EAK9B,EAL8B,CAAjC;AAOA,QAAMC,WAAW,GAAG9C,WAAW,CAAC0C,CAAC,IAAI;AACnC,QAAIJ,OAAO,IAAIA,OAAO,CAACrB,OAAnB,IAA8B,CAACqB,OAAO,CAACrB,OAAR,CAAgB8B,QAAhB,CAAyBL,CAAC,CAACM,MAA3B,CAAnC,EAAuE;AACrEX,MAAAA,cAAc,CAAC,KAAD,CAAd;AACD;AACF,GAJ8B,EAI5B,EAJ4B,CAA/B;AAMA,QAAMY,YAAY,GAAGjD,WAAW,CAC9BmB,MAAM,IAAI;AACR;AACA;AACA,QAAIW,QAAJ,EAAc;AACZZ,MAAAA,UAAU,CAACC,MAAD,CAAV;AAEA,aAAOY,QAAQ,CAACf,UAAU,EAAX,CAAf;AACD;;AAED,WAAOe,QAAQ,CAACZ,MAAD,CAAf;AACD,GAX6B,EAY9B,CAACD,UAAD,EAAaY,QAAb,EAAuBC,QAAvB,CAZ8B,CAAhC;AAeAjC,EAAAA,SAAS,CAAC,MAAM;AACdoD,IAAAA,QAAQ,CAACC,gBAAT,CAA0B,OAA1B,EAAmCL,WAAnC;AACAI,IAAAA,QAAQ,CAACC,gBAAT,CAA0B,YAA1B,EAAwCL,WAAxC;AAEA,WAAO,MAAM;AACXI,MAAAA,QAAQ,CAACE,mBAAT,CAA6B,OAA7B,EAAsCN,WAAtC;AACAI,MAAAA,QAAQ,CAACE,mBAAT,CAA6B,YAA7B,EAA2CN,WAA3C;AACD,KAHD;AAID,GARQ,EAQN,CAACA,WAAD,CARM,CAAT;;AAUA,QAAMO,KAAK,GAAG,KAAIC,OAAJ,CAAY;AAACC,IAAAA,GAAG,EAAE;AAAN,GAAZ,EAA0B,CAACpC,MAAD,EAASE,CAAT,KAAe;AACrD,wBACE;AAAI,MAAA,GAAG,EAAEA,CAAT;AAAY,MAAA,SAAS,EAAEb,KAAK,CAACW;AAA7B,oBACE,oBAAC,cAAD;AAAgB,MAAA,QAAQ,EAAE8B,YAA1B;AAAwC,MAAA,MAAM,wBAAM9B,MAAN;AAAcE,QAAAA;AAAd,QAA9C;AAAgE,MAAA,UAAU,EAAEkB;AAA5E,MADF,CADF;AAKD,GANa,EAMXzB,OANW,CAAd;;AAQA,QAAM0C,SAAS,GAAG,MAAK,QAAO;AAAClC,IAAAA,QAAQ,EAAE;AAAX,GAAP,CAAL,EAA+B,KAAI,MAAJ,CAA/B,EAA4C,MAAK,IAAL,CAA5C,EAAwDR,OAAxD,CAAlB;;AAEA,QAAM2C,MAAM,GAAG/B,KAAK,IAAK,GAAEA,KAAM,GAAEO,QAAQ,GAAG,IAAH,GAAU,EAAG,EAAxD;;AAEA,QAAMyB,SAAS,GAAGhC,KAAK,gBAAG;AAAM,IAAA,SAAS,EAAElB,KAAK,CAACkB;AAAvB,KAA+B+B,MAA/B,MAAH,GAAoD,IAA3E;AACA,QAAME,QAAQ,GAAGvB,QAAQ,KAAK,IAA9B;AACA,QAAMwB,SAAS,GAAGjC,KAAK,GAAGlB,UAAU,CAACkB,KAAD,CAAb,GAAuBnB,KAAK,CAACqD,OAApD;AACA,QAAMC,kBAAkB,GAAGvD,aAAa,CACtCC,KAAK,CAACqD,OADgC,EAEtCrD,KAAK,CAACwB,QAFgC,EAGtCxB,KAAK,CAAC0B,KAHgC,EAItCF,QAJsC,EAKtCE,KALsC,CAAxC;AAQA,sBACE;AAAK,IAAA,SAAS,EAAEhC,UAAU,CAAC0D,SAAD,EAAYE,kBAAZ,CAA1B;AAA2D,IAAA,GAAG,EAAExB;AAAhE,kBACE,mCACGoB,SADH,eAEE;AAAK,IAAA,SAAS,EAAElD,KAAK,CAACuD,MAAtB;AAA8B,IAAA,KAAK,EAAEP,SAAS,IAAI5B,WAAlD;AAA+D,IAAA,OAAO,EAAEa;AAAxE,KACGe,SAAS,IAAI5B,WADhB,eAEE,oBAAC,SAAD;AAAW,IAAA,KAAK,EAAEY,KAAlB;AAAyB,IAAA,SAAS,EAAEtC,UAAU,CAACM,KAAK,CAACwD,KAAP,EAAc;AAAC,OAACxD,KAAK,CAACyD,IAAP,GAAcN;AAAf,KAAd;AAA9C,IAFF,CAFF,eAME;AAAK,IAAA,SAAS,EAAEA,QAAQ,GAAGnD,KAAK,CAAC0D,aAAT,GAAyB1D,KAAK,CAACY;AAAvD,kBACE;AAAI,IAAA,SAAS,EAAEZ,KAAK,CAAC2D;AAArB,KAA4Bd,KAA5B,CADF,CANF,CADF,eAWE;AAAK,IAAA,SAAS,EAAE7C,KAAK,CAACqB;AAAtB,KAAoCA,WAApC,CAXF,CADF;AAeD,CAlGD;;AAoGAJ,cAAc,CAAC2C,YAAf,GAA8B;AAC5BjC,EAAAA,IAAI,EAAE7B,QAAQ,CAAC+D,iBAAT,CAA2BlC;AADL,CAA9B;AAIAV,cAAc,CAAC6C,SAAf,2CAA2B;AACzB5C,EAAAA,KAAK,EAAEzB,SAAS,CAACsE,MADQ;AAEzB3C,EAAAA,WAAW,EAAE3B,SAAS,CAACsE,MAFE;AAGzB1C,EAAAA,WAAW,EAAE5B,SAAS,CAACsE,MAHE;AAIzBzD,EAAAA,OAAO,EAAEb,SAAS,CAACuE,OAAV,CAAkBnE,cAAc,CAACiE,SAAf,CAAyBnD,MAA3C,CAJgB;AAKzBY,EAAAA,QAAQ,EAAE9B,SAAS,CAACwE,IALK;AAMzB3C,EAAAA,QAAQ,EAAE7B,SAAS,CAACyE,IANK;AAOzB/C,EAAAA,KAAK,EAAE1B,SAAS,CAACsE,MAPQ;AAQzBvC,EAAAA,QAAQ,EAAE/B,SAAS,CAACyE,IARK;AASzBzC,EAAAA,QAAQ,EAAEhC,SAAS,CAACyE,IATK;AAUzBxC,EAAAA,KAAK,EAAEjC,SAAS,CAACyE;AAVQ,CAA3B;AAaA,eAAejD,cAAf","sourcesContent":["import React, {useState, useEffect, useRef, useCallback} from 'react';\nimport PropTypes from 'prop-types';\nimport classnames from 'classnames';\nimport {map, pipe, join, filter, get, set} from 'lodash/fp';\nimport {NovaCompositionNavigationArrowDown as ArrowDown} from '@coorpacademy/nova-icons';\nimport TitledCheckbox from '../titled-checkbox';\nimport Provider from '../../atom/provider';\nimport getClassState from '../../util/get-class-state';\nimport style from './style.css';\n\nconst themeStyle = {\n setup: style.setup,\n cockpit: style.cockpit,\n sidebar: style.sidebar\n};\n\nexport const useChoices = options => {\n const choicesRef = useRef(options);\n\n const getChoices = () => {\n return choicesRef.current;\n };\n\n const setChoices = choice => {\n const choices = set(`[${choice.i}].selected`, !choice.selected, getChoices());\n\n choicesRef.current = choices.filter(c => c.selected);\n };\n\n return [getChoices, setChoices];\n};\n\nconst SelectMultiple = (\n {\n title,\n options,\n theme,\n placeholder,\n description,\n multiple,\n onChange,\n modified = false,\n required = false,\n error = false\n },\n {skin}\n) => {\n const [isOpened, updateIsOpened] = useState(false);\n const [getChoices, setChoices] = useChoices(options);\n const nodeRef = useRef(null);\n\n const defaultColor = get('common.primary', skin);\n const black = get('common.black', skin);\n\n const handleOnClick = useCallback(e => {\n e.preventDefault();\n e.stopPropagation();\n\n updateIsOpened(prev => !prev);\n }, []);\n\n const closeHandle = useCallback(e => {\n if (nodeRef && nodeRef.current && !nodeRef.current.contains(e.target)) {\n updateIsOpened(false);\n }\n }, []);\n\n const handleChange = useCallback(\n choice => {\n // if multiple prop is turned on\n // we return all selected choices\n if (multiple) {\n setChoices(choice);\n\n return onChange(getChoices());\n }\n\n return onChange(choice);\n },\n [setChoices, multiple, onChange]\n );\n\n useEffect(() => {\n document.addEventListener('click', closeHandle);\n document.addEventListener('touchstart', closeHandle);\n\n return () => {\n document.removeEventListener('click', closeHandle);\n document.removeEventListener('touchstart', closeHandle);\n };\n }, [closeHandle]);\n\n const lines = map.convert({cap: false})((choice, i) => {\n return (\n <li key={i} className={style.choice}>\n <TitledCheckbox onToggle={handleChange} choice={{...choice, i}} background={defaultColor} />\n </li>\n );\n }, options);\n\n const selection = pipe(filter({selected: true}), map('name'), join(', '))(options);\n\n const _title = title && `${title}${required ? ' *' : ''}`;\n\n const titleView = title ? <span className={style.title}>{_title} </span> : null;\n const isActive = isOpened === true;\n const mainClass = theme ? themeStyle[theme] : style.default;\n const behaviourClassName = getClassState(\n style.default,\n style.modified,\n style.error,\n modified,\n error\n );\n\n return (\n <div className={classnames(mainClass, behaviourClassName)} ref={nodeRef}>\n <label>\n {titleView}\n <div className={style.select} title={selection || placeholder} onClick={handleOnClick}>\n {selection || placeholder}\n <ArrowDown color={black} className={classnames(style.arrow, {[style.down]: isActive})} />\n </div>\n <div className={isActive ? style.activeChoices : style.choices}>\n <ul className={style.list}>{lines}</ul>\n </div>\n </label>\n <div className={style.description}>{description}</div>\n </div>\n );\n};\n\nSelectMultiple.contextTypes = {\n skin: Provider.childContextTypes.skin\n};\n\nSelectMultiple.propTypes = {\n title: PropTypes.string,\n placeholder: PropTypes.string,\n description: PropTypes.string,\n options: PropTypes.arrayOf(TitledCheckbox.propTypes.choice),\n onChange: PropTypes.func,\n multiple: PropTypes.bool,\n theme: PropTypes.string,\n modified: PropTypes.bool,\n required: PropTypes.bool,\n error: PropTypes.bool\n};\n\nexport default SelectMultiple;\n"],"file":"index.js"}
|
|
1
|
+
{"version":3,"sources":["../../../src/molecule/select-multiple/index.js"],"names":["React","useState","useEffect","useRef","useCallback","PropTypes","classnames","NovaCompositionNavigationArrowDown","ArrowDown","NovaSolidStatusClose","ErrorIcon","NovaCompositionCoorpacademyInformationIcon","InfoIcon","TitledCheckbox","Provider","Checkbox","getClassState","style","themeStyle","setup","cockpit","sidebar","coorpmanager","useChoices","options","choicesRef","getChoices","current","setChoices","choice","choices","i","selected","filter","c","CMMultipleView","multiple","onChange","handleChange","checked","item","name","SelectMultiple","title","theme","placeholder","description","hint","onError","modified","required","error","disabled","skin","isOpened","updateIsOpened","nodeRef","defaultColor","black","handleOnClick","e","preventDefault","stopPropagation","prev","closeHandle","contains","target","document","addEventListener","removeEventListener","isCMTheme","lines","convert","cap","selection","_title","isActive","titleView","titleWithSelection","noValue","active","infoIconWrapper","infoIcon","descriptionLabel","hintView","__html","mainClass","default","showPlaceholder","behaviourClassName","errorIconView","errorIcon","select","noselection","iconsWrapper","flex","clicked","arrow","down","activeChoices","list","contextTypes","childContextTypes","propTypes","bool","func","string","arrayOf","oneOf"],"mappings":"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","sourcesContent":["import React, {useState, useEffect, useRef, useCallback} from 'react';\nimport PropTypes from 'prop-types';\nimport classnames from 'classnames';\nimport {map, pipe, join, filter, get, set, keys, isEmpty} from 'lodash/fp';\nimport {\n NovaCompositionNavigationArrowDown as ArrowDown,\n NovaSolidStatusClose as ErrorIcon,\n NovaCompositionCoorpacademyInformationIcon as InfoIcon\n} from '@coorpacademy/nova-icons';\nimport TitledCheckbox from '../titled-checkbox';\nimport Provider from '../../atom/provider';\nimport Checkbox from '../../atom/input-checkbox';\nimport getClassState from '../../util/get-class-state';\nimport style from './style.css';\n\nconst themeStyle = {\n setup: style.setup,\n cockpit: style.cockpit,\n sidebar: style.sidebar,\n coorpmanager: style.coorpmanager\n};\n\nexport const useChoices = options => {\n const choicesRef = useRef(options);\n\n const getChoices = () => {\n return choicesRef.current;\n };\n\n const setChoices = choice => {\n const choices = set(`[${choice.i}].selected`, !choice.selected, getChoices());\n\n choicesRef.current = choices.filter(c => c.selected);\n };\n\n return [getChoices, setChoices];\n};\n\nconst CMMultipleView = ({multiple, choice, onChange}) => {\n const handleChange = useCallback(\n checked => {\n if (!multiple) {\n return onChange(choice);\n }\n return onChange({...choice, selected: checked});\n },\n [onChange, choice]\n );\n\n return multiple ? (\n <div className={style.item}>\n <Checkbox\n titleStyle=\"inherit\"\n checked={choice.selected}\n onChange={handleChange}\n noLabelMargins\n title={choice.name}\n />\n </div>\n ) : (\n <span className={style.item} onClick={handleChange} title={choice.name}>\n {choice.name}\n </span>\n );\n};\n\nconst SelectMultiple = (\n {\n title,\n options,\n theme,\n placeholder,\n description,\n hint,\n multiple,\n onChange,\n onError,\n modified = false,\n required = false,\n error = '',\n disabled = false\n },\n {skin}\n) => {\n const [isOpened, updateIsOpened] = useState(false);\n const [getChoices, setChoices] = useChoices(options);\n const nodeRef = useRef(null);\n\n const defaultColor = get('common.primary', skin);\n const black = get('common.black', skin);\n\n const handleOnClick = useCallback(e => {\n e.preventDefault();\n e.stopPropagation();\n\n if (!disabled) {\n updateIsOpened(prev => !prev);\n }\n }, []);\n\n const closeHandle = useCallback(e => {\n if (nodeRef && nodeRef.current && !nodeRef.current.contains(e.target)) {\n updateIsOpened(false);\n }\n }, []);\n\n const handleChange = useCallback(\n choice => {\n // if multiple prop is turned on\n // we return all selected choices\n if (multiple) {\n setChoices(choice);\n\n return onChange(getChoices());\n }\n\n return onChange(choice);\n },\n [setChoices, multiple, onChange]\n );\n\n useEffect(() => {\n document.addEventListener('click', closeHandle);\n document.addEventListener('touchstart', closeHandle);\n\n return () => {\n document.removeEventListener('click', closeHandle);\n document.removeEventListener('touchstart', closeHandle);\n };\n }, [closeHandle]);\n\n const isCMTheme = theme === 'coorpmanager';\n\n const lines = map.convert({cap: false})((choice, i) => {\n return (\n <li key={i} className={style.choice}>\n {isCMTheme ? (\n <CMMultipleView multiple={multiple} choice={{...choice, i}} onChange={handleChange} />\n ) : (\n <TitledCheckbox\n onToggle={handleChange}\n choice={{...choice, i}}\n background={defaultColor}\n />\n )}\n </li>\n );\n }, options);\n\n const selection = pipe(filter({selected: true}), map('name'), join(', '))(options);\n\n const _title = title && `${title}${required ? ' *' : ''}`;\n\n const isActive = isOpened === true;\n\n const titleView = title ? (\n <span\n className={classnames(\n style.title,\n isCMTheme && selection && style.titleWithSelection,\n isCMTheme && isEmpty(selection) && style.noValue,\n isActive && style.active\n )}\n >\n {_title}\n {isCMTheme ? (\n <div className={style.infoIconWrapper}>\n <InfoIcon className={style.infoIcon} />\n <div className={style.descriptionLabel}>{description}</div>\n </div>\n ) : null}\n </span>\n ) : null;\n\n const hintView =\n isCMTheme && !isActive ? (\n <div\n className={style.hint}\n // eslint-disable-next-line react/no-danger\n dangerouslySetInnerHTML={{__html: error || hint}}\n />\n ) : null;\n\n const mainClass = theme ? themeStyle[theme] : style.default;\n const showPlaceholder = isCMTheme && isActive;\n const behaviourClassName = getClassState(\n style.default,\n style.modified,\n style.error,\n modified,\n error\n );\n\n const errorIconView = error ? <ErrorIcon onClick={onError} className={style.errorIcon} /> : null;\n\n return (\n <div\n className={classnames(mainClass, behaviourClassName, disabled && style.disabled)}\n ref={nodeRef}\n >\n <label>\n {!isCMTheme && titleView}\n <div className={style.select} title={selection || placeholder} onClick={handleOnClick}>\n {isCMTheme && titleView}\n <span\n className={classnames(\n style.selection,\n isCMTheme && isEmpty(selection) && style.noselection\n )}\n >\n {selection || !isCMTheme || (showPlaceholder && placeholder) || null}\n </span>\n {isCMTheme ? (\n <div className={style.iconsWrapper}>\n <div className={style.flex}>{errorIconView}</div>\n <div className={classnames(style.flex, isActive && style.clicked)}>\n <ArrowDown\n color={black}\n className={classnames(style.arrow, {[style.down]: isActive})}\n />\n </div>\n </div>\n ) : (\n <ArrowDown\n color={black}\n className={classnames(style.arrow, {[style.down]: isActive})}\n />\n )}\n </div>\n <div className={classnames(style.choices, isActive && style.activeChoices)}>\n <ul className={style.list}>{lines}</ul>\n </div>\n </label>\n {!isCMTheme ? <div className={style.description}>{description}</div> : null}\n {hintView}\n </div>\n );\n};\n\nSelectMultiple.contextTypes = {\n skin: Provider.childContextTypes.skin\n};\n\nCMMultipleView.propTypes = {\n multiple: PropTypes.bool,\n choice: TitledCheckbox.propTypes.choice,\n onChange: PropTypes.func\n};\n\nSelectMultiple.propTypes = {\n title: PropTypes.string,\n placeholder: PropTypes.string,\n description: PropTypes.string,\n hint: PropTypes.string,\n options: PropTypes.arrayOf(TitledCheckbox.propTypes.choice),\n onChange: PropTypes.func,\n onError: PropTypes.func,\n multiple: PropTypes.bool,\n modified: PropTypes.bool,\n disabled: PropTypes.bool,\n required: PropTypes.bool,\n error: PropTypes.string,\n theme: PropTypes.oneOf(keys(themeStyle))\n};\n\nexport default SelectMultiple;\n"],"file":"index.js"}
|