@coorpacademy/components 10.1.10 → 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/atom/tag/test/fixtures.js +4 -2
- package/es/atom/tag/test/fixtures.js.map +1 -1
- package/es/molecule/banner/index.js +1 -1
- package/es/molecule/banner/index.js.map +1 -1
- package/es/molecule/brand-form-group/style.css +5 -0
- package/es/molecule/brand-tabs/style.css +0 -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/molecule/vertical-tabs/style.css +2 -2
- package/es/organism/accordion/coorp-manager/index.js +5 -2
- package/es/organism/accordion/coorp-manager/index.js.map +1 -1
- package/es/organism/brand-dashboard/index.js +1 -3
- package/es/organism/brand-dashboard/index.js.map +1 -1
- package/es/organism/brand-dashboard/style.css +0 -10
- package/es/organism/list-item/index.js +68 -0
- package/es/organism/list-item/index.js.map +1 -0
- package/es/organism/list-item/style.css +49 -0
- package/es/organism/list-item/test/fixtures/archived.js +39 -0
- package/es/organism/list-item/test/fixtures/archived.js.map +1 -0
- package/es/organism/list-item/test/fixtures/draft.js +39 -0
- package/es/organism/list-item/test/fixtures/draft.js.map +1 -0
- package/es/organism/list-item/test/fixtures/published.js +39 -0
- package/es/organism/list-item/test/fixtures/published.js.map +1 -0
- package/es/organism/list-item/test/fixtures/revised.js +41 -0
- package/es/organism/list-item/test/fixtures/revised.js.map +1 -0
- package/es/organism/list-item/test/fixtures.js +19 -0
- package/es/organism/list-item/test/fixtures.js.map +1 -0
- package/es/organism/playlist-translation/style.css +9 -2
- package/es/organism/setup-header/style.css +16 -7
- package/es/template/back-office/brand-update/index.js +106 -92
- package/es/template/back-office/brand-update/index.js.map +1 -1
- package/es/template/back-office/brand-update/style.css +22 -66
- package/es/template/back-office/brand-update/test/fixtures/default.js +1 -58
- package/es/template/back-office/brand-update/test/fixtures/default.js.map +1 -1
- package/es/template/back-office/brand-update/test/fixtures/general-settings.js +77 -3
- package/es/template/back-office/brand-update/test/fixtures/general-settings.js.map +1 -1
- package/es/template/back-office/brand-update/test/fixtures/loader.js +1 -1
- package/es/template/back-office/brand-update/test/fixtures/loader.js.map +1 -1
- package/es/template/back-office/brand-update/test/fixtures/manageusers-edit.js +1 -1
- package/es/template/back-office/brand-update/test/fixtures/manageusers-edit.js.map +1 -1
- package/es/template/back-office/brand-update/test/fixtures/manageusers-list.js +1 -1
- package/es/template/back-office/brand-update/test/fixtures/manageusers-list.js.map +1 -1
- package/es/template/back-office/brand-update/test/fixtures/uploadusers.js +1 -1
- package/es/template/back-office/brand-update/test/fixtures/uploadusers.js.map +1 -1
- package/es/template/back-office/brand-update/test/fixtures.js +0 -2
- package/es/template/back-office/brand-update/test/fixtures.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/atom/tag/test/fixtures.js +5 -2
- package/lib/atom/tag/test/fixtures.js.map +1 -1
- package/lib/molecule/banner/index.js +1 -1
- package/lib/molecule/banner/index.js.map +1 -1
- package/lib/molecule/brand-form-group/style.css +5 -0
- package/lib/molecule/brand-tabs/style.css +0 -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/molecule/vertical-tabs/style.css +2 -2
- package/lib/organism/accordion/coorp-manager/index.js +4 -2
- package/lib/organism/accordion/coorp-manager/index.js.map +1 -1
- package/lib/organism/brand-dashboard/index.js +1 -3
- package/lib/organism/brand-dashboard/index.js.map +1 -1
- package/lib/organism/brand-dashboard/style.css +0 -10
- package/lib/organism/list-item/index.js +82 -0
- package/lib/organism/list-item/index.js.map +1 -0
- package/lib/organism/list-item/style.css +49 -0
- package/lib/organism/list-item/test/fixtures/archived.js +44 -0
- package/lib/organism/list-item/test/fixtures/archived.js.map +1 -0
- package/lib/organism/list-item/test/fixtures/draft.js +44 -0
- package/lib/organism/list-item/test/fixtures/draft.js.map +1 -0
- package/lib/organism/list-item/test/fixtures/published.js +44 -0
- package/lib/organism/list-item/test/fixtures/published.js.map +1 -0
- package/lib/organism/list-item/test/fixtures/revised.js +46 -0
- package/lib/organism/list-item/test/fixtures/revised.js.map +1 -0
- package/lib/organism/list-item/test/fixtures.js +31 -0
- package/lib/organism/list-item/test/fixtures.js.map +1 -0
- package/lib/organism/playlist-translation/style.css +9 -2
- package/lib/organism/setup-header/style.css +16 -7
- package/lib/template/back-office/brand-update/index.js +106 -93
- package/lib/template/back-office/brand-update/index.js.map +1 -1
- package/lib/template/back-office/brand-update/style.css +22 -66
- package/lib/template/back-office/brand-update/test/fixtures/default.js +1 -58
- package/lib/template/back-office/brand-update/test/fixtures/default.js.map +1 -1
- package/lib/template/back-office/brand-update/test/fixtures/general-settings.js +76 -3
- package/lib/template/back-office/brand-update/test/fixtures/general-settings.js.map +1 -1
- package/lib/template/back-office/brand-update/test/fixtures/loader.js +2 -2
- package/lib/template/back-office/brand-update/test/fixtures/loader.js.map +1 -1
- package/lib/template/back-office/brand-update/test/fixtures/manageusers-edit.js +2 -2
- package/lib/template/back-office/brand-update/test/fixtures/manageusers-edit.js.map +1 -1
- package/lib/template/back-office/brand-update/test/fixtures/manageusers-list.js +2 -2
- package/lib/template/back-office/brand-update/test/fixtures/manageusers-list.js.map +1 -1
- package/lib/template/back-office/brand-update/test/fixtures/uploadusers.js +2 -2
- package/lib/template/back-office/brand-update/test/fixtures/uploadusers.js.map +1 -1
- package/lib/template/back-office/brand-update/test/fixtures.js +0 -3
- package/lib/template/back-office/brand-update/test/fixtures.js.map +1 -1
- package/package.json +2 -2
- package/es/molecule/search/test/fixtures.js +0 -15
- package/es/molecule/search/test/fixtures.js.map +0 -1
- package/es/template/back-office/brand-update/test/fixtures/manageusers.js +0 -11
- package/es/template/back-office/brand-update/test/fixtures/manageusers.js.map +0 -1
- package/lib/molecule/search/test/fixtures.js +0 -25
- package/lib/molecule/search/test/fixtures.js.map +0 -1
- package/lib/template/back-office/brand-update/test/fixtures/manageusers.js +0 -25
- package/lib/template/back-office/brand-update/test/fixtures/manageusers.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":";;;AAAA,OAAOA,KAAP,IAAeC,OAAf,QAA6B,OAA7B;AACA,OAAOC,SAAP,MAAsB,YAAtB;AACA,SAAQC,uBAAuB,IAAIC,SAAnC,QAAmD,0BAAnD;AAEA,OAAOC,aAAP,MAA0B,4BAA1B;AACA,OAAOC,KAAP,MAAkB,aAAlB;AAEA,MAAMC,qBAAqB,GAAG;AAC5BC,EAAAA,OAAO,EAAEF,KAAK,CAACE,OADa;AAE5BC,EAAAA,OAAO,EAAEH,KAAK,CAACG,OAFa;AAG5BC,EAAAA,SAAS,EAAEJ,KAAK,CAACI,SAHW;AAI5BC,EAAAA,QAAQ,EAAEL,KAAK,CAACK;AAJY,CAA9B;;AAOA,MAAMC,aAAa,GAAGC,KAAK,IAAI;AAC7B,QAAM;AACJC,IAAAA,OADI;AAEJC,IAAAA,QAAQ,QAFJ;AAGJC,IAAAA,KAHI;AAIJC,IAAAA,QAJI;AAKJC,IAAAA,QALI;AAMJC,IAAAA,UAAU,GAAG,SANT;AAOJC,IAAAA,QAAQ,GAAG,KAPP;AAQJC,IAAAA,KAAK,GAAG,SARJ;AASJC,IAAAA,KAAK,EAAEC,UATH;AAUJC,IAAAA,cAAc,GAAG;AAVb,MAWFX,KAXJ;AAaA,QAAMY,mBAAmB,GAAGlB,qBAAqB,CAACY,UAAD,CAAjD;;AACA,QAAMO,UAAU,GAAG,UAAS,iBAAT,CAAnB;;AACA,QAAMJ,KAAK,GAAI,GAAEC,UAAW,GAAEL,QAAQ,GAAG,GAAH,GAAS,EAAG,EAAlD;AACA,QAAMS,YAAY,GAAG1B,OAAO,CAAC,MAAM2B,CAAC,IAAIb,QAAQ,CAACa,CAAC,CAACC,MAAF,CAASf,OAAV,CAApB,EAAwC,CAACC,QAAD,CAAxC,CAA5B;AAEA,QAAMe,iBAAiB,GACrBT,KAAK,KAAK,cAAV,GAA2Bf,KAAK,CAACyB,oBAAjC,GAAwDzB,KAAK,CAAC0B,eADhE;AAEA,QAAMC,cAAc,GAAGZ,KAAK,KAAK,cAAV,GAA2Bf,KAAK,CAAC4B,iBAAjC,GAAqD5B,KAAK,CAAC6B,YAAlF;AACA,QAAMC,yBAAyB,GAAGf,KAAK,KAAK,cAAV,GAA2Bf,KAAK,CAAC+B,YAAjC,GAAgD/B,KAAK,CAACgC,OAAxF;AAEA,QAAMC,SAAS,GAAGlC,aAAa,CAC7B+B,yBAD6B,EAE7BN,iBAF6B,EAG7BG,cAH6B,EAI7Bb,QAJ6B,EAK7BJ,KAL6B,CAA/B;AAQA,sBACE;AAAK,IAAA,SAAS,EAAEuB;AAAhB,kBACE;AACE,IAAA,IAAI,EAAC,UADP;AAEE,IAAA,SAAS,EAAEjC,KAAK,CAACkC,QAFnB;AAGE,IAAA,IAAI,EAAElB,KAHR;AAIE,IAAA,EAAE,EAAEI,UAJN;AAKE,IAAA,OAAO,EAAEZ,OALX;AAME,IAAA,QAAQ,EAAEa,YANZ;AAOE,IAAA,QAAQ,EAAEV;AAPZ,IADF,eAUE;AAAO,IAAA,SAAS,EAAEO,cAAc,GAAGlB,KAAK,CAACkB,cAAT,GAA0BiB,SAA1D;AAAqE,IAAA,OAAO,EAAEf;AAA9E,kBACE,oBAAC,SAAD;AAAW,IAAA,SAAS,EAAEpB,KAAK,CAACoC;AAA5B,IADF,CAVF,eAaE;AAAM,IAAA,SAAS,EAAEjB,mBAAjB;AAAsC,IAAA,KAAK,EAAEH;AAA7C,KACGA,KADH,CAbF,CADF;AAmBD,CAnDD;;AAqDAV,aAAa,CAAC+B,SAAd,2CAA0B;AACxBrB,EAAAA,KAAK,EAAEpB,SAAS,CAAC0C,MAAV,CAAiBC,UADA;AAExB5B,EAAAA,QAAQ,EAAEf,SAAS,CAAC4C,IAFI;AAGxB5B,EAAAA,QAAQ,EAAEhB,SAAS,CAAC4C,IAHI;AAIxBhC,EAAAA,OAAO,EAAEZ,SAAS,CAAC4C,IAJK;AAKxB9B,EAAAA,KAAK,EAAEd,SAAS,CAAC4C,IALO;AAMxB/B,EAAAA,QAAQ,EAAEb,SAAS,CAAC6C,IANI;AAOxB3B,EAAAA,QAAQ,EAAElB,SAAS,CAAC4C,IAPI;AAQxBtB,EAAAA,cAAc,EAAEtB,SAAS,CAAC4C,IARF;AASxBzB,EAAAA,KAAK,EAAEnB,SAAS,CAAC8C,KAAV,CAAgB,CAAC,cAAD,EAAiB,SAAjB,CAAhB,CATiB;AAUxB7B,EAAAA,UAAU,EAAEjB,SAAS,CAAC8C,KAAV,CAAgB,MAAKzC,qBAAL,CAAhB;AAVY,CAA1B;AAaA,eAAeK,aAAf","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,9 @@ import renderComponentMacro from '../../../test/helpers/render-component';
|
|
|
4
4
|
import AtomTag from '..';
|
|
5
5
|
import fixtureArchived from './fixtures/archived';
|
|
6
6
|
import fixtureDefault from './fixtures/default';
|
|
7
|
+
import fixtureDraft from './fixtures/draft';
|
|
7
8
|
import fixturePublished from './fixtures/published';
|
|
8
|
-
import
|
|
9
|
+
import fixtureRevised from './fixtures/revised';
|
|
9
10
|
test('Atom › AtomTag > should have valid propTypes', t => {
|
|
10
11
|
t.pass();
|
|
11
12
|
forEach(AtomTag.propTypes, (value, key) => {
|
|
@@ -14,6 +15,7 @@ test('Atom › AtomTag > should have valid propTypes', t => {
|
|
|
14
15
|
});
|
|
15
16
|
test('Atom › AtomTag › Archived › should be rendered', renderComponentMacro, AtomTag, fixtureArchived);
|
|
16
17
|
test('Atom › AtomTag › Default › should be rendered', renderComponentMacro, AtomTag, fixtureDefault);
|
|
18
|
+
test('Atom › AtomTag › Draft › should be rendered', renderComponentMacro, AtomTag, fixtureDraft);
|
|
17
19
|
test('Atom › AtomTag › Published › should be rendered', renderComponentMacro, AtomTag, fixturePublished);
|
|
18
|
-
test('Atom › AtomTag ›
|
|
20
|
+
test('Atom › AtomTag › Revised › should be rendered', renderComponentMacro, AtomTag, fixtureRevised);
|
|
19
21
|
//# sourceMappingURL=fixtures.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/atom/tag/test/fixtures.js"],"names":["test","forEach","renderComponentMacro","AtomTag","fixtureArchived","fixtureDefault","fixturePublished","
|
|
1
|
+
{"version":3,"sources":["../../../../src/atom/tag/test/fixtures.js"],"names":["test","forEach","renderComponentMacro","AtomTag","fixtureArchived","fixtureDefault","fixtureDraft","fixturePublished","fixtureRevised","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,OAAP,MAAoB,IAApB;AACA,OAAOC,eAAP,MAA4B,qBAA5B;AACA,OAAOC,cAAP,MAA2B,oBAA3B;AACA,OAAOC,YAAP,MAAyB,kBAAzB;AACA,OAAOC,gBAAP,MAA6B,sBAA7B;AACA,OAAOC,cAAP,MAA2B,oBAA3B;AAEAR,IAAI,CAAC,8CAAD,EAAiDS,CAAC,IAAI;AACxDA,EAAAA,CAAC,CAACC,IAAF;AACAT,EAAAA,OAAO,CAACE,OAAO,CAACQ,SAAT,EAAoB,CAACC,KAAD,EAAQC,GAAR,KAAgB;AACzCJ,IAAAA,CAAC,CAACK,GAAF,CAAMF,KAAN,EAAaG,SAAb,EAAyB,wCAAuCF,GAAI,mEAApE;AACD,GAFM,CAAP;AAGD,CALG,CAAJ;AAOAb,IAAI,CAAC,gDAAD,EAAmDE,oBAAnD,EAAyEC,OAAzE,EAAkFC,eAAlF,CAAJ;AACAJ,IAAI,CAAC,+CAAD,EAAkDE,oBAAlD,EAAwEC,OAAxE,EAAiFE,cAAjF,CAAJ;AACAL,IAAI,CAAC,6CAAD,EAAgDE,oBAAhD,EAAsEC,OAAtE,EAA+EG,YAA/E,CAAJ;AACAN,IAAI,CAAC,iDAAD,EAAoDE,oBAApD,EAA0EC,OAA1E,EAAmFI,gBAAnF,CAAJ;AACAP,IAAI,CAAC,+CAAD,EAAkDE,oBAAlD,EAAwEC,OAAxE,EAAiFK,cAAjF,CAAJ","sourcesContent":["import test from 'ava';\nimport forEach from 'lodash/forEach';\nimport renderComponentMacro from '../../../test/helpers/render-component';\nimport AtomTag from '..';\nimport fixtureArchived from './fixtures/archived';\nimport fixtureDefault from './fixtures/default';\nimport fixtureDraft from './fixtures/draft';\nimport fixturePublished from './fixtures/published';\nimport fixtureRevised from './fixtures/revised';\n\ntest('Atom › AtomTag > should have valid propTypes', t => {\n t.pass();\n forEach(AtomTag.propTypes, (value, key) => {\n t.not(value, undefined, `PropType for \"Atom.AtomTag.propTypes.${key}\" may not be undefined. Did you mistype the propTypes definition?`);\n });\n});\n\ntest('Atom › AtomTag › Archived › should be rendered', renderComponentMacro, AtomTag, fixtureArchived);\ntest('Atom › AtomTag › Default › should be rendered', renderComponentMacro, AtomTag, fixtureDefault);\ntest('Atom › AtomTag › Draft › should be rendered', renderComponentMacro, AtomTag, fixtureDraft);\ntest('Atom › AtomTag › Published › should be rendered', renderComponentMacro, AtomTag, fixturePublished);\ntest('Atom › AtomTag › Revised › should be rendered', renderComponentMacro, AtomTag, fixtureRevised);\n"],"file":"fixtures.js"}
|
|
@@ -44,7 +44,7 @@ const Banner = props => {
|
|
|
44
44
|
};
|
|
45
45
|
|
|
46
46
|
Banner.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
47
|
-
type: PropTypes.oneOf(['information', 'error']),
|
|
47
|
+
type: PropTypes.oneOf(['information', 'error', 'success']),
|
|
48
48
|
message: PropTypes.string.isRequired,
|
|
49
49
|
firstCTA: PropTypes.func,
|
|
50
50
|
firstCTALabel: PropTypes.string,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/molecule/banner/index.js"],"names":["React","PropTypes","classnames","NovaSolidInterfaceFeedbackInterfaceAlertDiamond","QuestionIcon","Link","style","Banner","props","type","message","firstCTA","firstCTALabel","secondCTALabel","secondCTA","banner","errorBanner","icon","button","buttonsBar","propTypes","oneOf","string","isRequired","func"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,OAAOC,SAAP,MAAsB,YAAtB;AACA,OAAOC,UAAP,MAAuB,YAAvB;AACA,SAAQC,+CAA+C,IAAIC,YAA3D,QAA8E,0BAA9E;AACA,OAAOC,IAAP,MAAiB,wBAAjB;AACA,OAAOC,KAAP,MAAkB,aAAlB;;AAEA,MAAMC,MAAM,GAAGC,KAAK,IAAI;AACtB,QAAM;AAACC,IAAAA,IAAD;AAAOC,IAAAA,OAAP;AAAgBC,IAAAA,QAAhB;AAA0BC,IAAAA,aAA1B;AAAyCC,IAAAA,cAAzC;AAAyDC,IAAAA;AAAzD,MAAsEN,KAA5E;AACA,sBACE;AACE,IAAA,SAAS,EAAEN,UAAU,CAACI,KAAK,CAACS,MAAP,EAAeN,IAAI,KAAK,OAAT,IAAoBH,KAAK,CAACU,WAAzC,CADvB;AAEE,IAAA,KAAK,EAAEN;AAFT,kBAIE;AAAK,iBAAY,GAAED,IAAK,iBAAxB;AAA0C,IAAA,SAAS,EAAEH,KAAK,CAACI;AAA3D,kBACE,oBAAC,YAAD;AAAc,IAAA,SAAS,EAAEJ,KAAK,CAACW;AAA/B,IADF,EAEGP,OAFH,CAJF,EAQGE,aAAa,gBACZ;AAAK,IAAA,SAAS,EAAEN,KAAK,CAACY;AAAtB,kBACE,oBAAC,IAAD;AACE,iBAAU,kBADZ;AAEE,kBAAYN,aAFd;AAGE,IAAA,KAAK,EAAEA,aAHT;AAIE,IAAA,OAAO,EAAED,QAJX;AAKE,IAAA,IAAI,EAAC;AALP,IADF,CADY,GAUV,IAlBN,EAmBGC,aAAa,IAAIC,cAAjB,gBAAkC;AAAK,IAAA,SAAS,EAAEP,KAAK,CAACa;AAAtB,IAAlC,GAAyE,IAnB5E,EAoBGN,cAAc,gBACb;AAAK,IAAA,SAAS,EAAEP,KAAK,CAACY;AAAtB,kBACE,oBAAC,IAAD;AACE,iBAAU,mBADZ;AAEE,IAAA,OAAO,EAAEJ,SAFX;AAGE,kBAAYD,cAHd;AAIE,IAAA,KAAK,EAAEA,cAJT;AAKE,IAAA,IAAI,EAAC;AALP,IADF,CADa,GAUX,IA9BN,CADF;AAkCD,CApCD;;AAsCAN,MAAM,CAACa,SAAP,2CAAmB;AACjBX,EAAAA,IAAI,EAAER,SAAS,CAACoB,KAAV,CAAgB,CAAC,aAAD,EAAgB,OAAhB,CAAhB,CADW;AAEjBX,EAAAA,OAAO,EAAET,SAAS,CAACqB,MAAV,CAAiBC,UAFT;AAGjBZ,EAAAA,QAAQ,EAAEV,SAAS,CAACuB,IAHH;AAIjBZ,EAAAA,aAAa,EAAEX,SAAS,CAACqB,MAJR;AAKjBT,EAAAA,cAAc,EAAEZ,SAAS,CAACqB,MALT;AAMjBR,EAAAA,SAAS,EAAEb,SAAS,CAACuB;AANJ,CAAnB;AASA,eAAejB,MAAf","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport classnames from 'classnames';\nimport {NovaSolidInterfaceFeedbackInterfaceAlertDiamond as QuestionIcon} from '@coorpacademy/nova-icons';\nimport Link from '../../atom/button-link';\nimport style from './style.css';\n\nconst Banner = props => {\n const {type, message, firstCTA, firstCTALabel, secondCTALabel, secondCTA} = props;\n return (\n <div\n className={classnames(style.banner, type === 'error' && style.errorBanner)}\n title={message}\n >\n <div data-name={`${type}-banner-message`} className={style.message}>\n <QuestionIcon className={style.icon} />\n {message}\n </div>\n {firstCTALabel ? (\n <div className={style.button}>\n <Link\n data-name=\"first-banner-cta\"\n aria-label={firstCTALabel}\n label={firstCTALabel}\n onClick={firstCTA}\n type=\"text\"\n />\n </div>\n ) : null}\n {firstCTALabel && secondCTALabel ? <div className={style.buttonsBar} /> : null}\n {secondCTALabel ? (\n <div className={style.button}>\n <Link\n data-name=\"second-banner-cta\"\n onClick={secondCTA}\n aria-label={secondCTALabel}\n label={secondCTALabel}\n type=\"text\"\n />\n </div>\n ) : null}\n </div>\n );\n};\n\nBanner.propTypes = {\n type: PropTypes.oneOf(['information', 'error']),\n message: PropTypes.string.isRequired,\n firstCTA: PropTypes.func,\n firstCTALabel: PropTypes.string,\n secondCTALabel: PropTypes.string,\n secondCTA: PropTypes.func\n};\n\nexport default Banner;\n"],"file":"index.js"}
|
|
1
|
+
{"version":3,"sources":["../../../src/molecule/banner/index.js"],"names":["React","PropTypes","classnames","NovaSolidInterfaceFeedbackInterfaceAlertDiamond","QuestionIcon","Link","style","Banner","props","type","message","firstCTA","firstCTALabel","secondCTALabel","secondCTA","banner","errorBanner","icon","button","buttonsBar","propTypes","oneOf","string","isRequired","func"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,OAAOC,SAAP,MAAsB,YAAtB;AACA,OAAOC,UAAP,MAAuB,YAAvB;AACA,SAAQC,+CAA+C,IAAIC,YAA3D,QAA8E,0BAA9E;AACA,OAAOC,IAAP,MAAiB,wBAAjB;AACA,OAAOC,KAAP,MAAkB,aAAlB;;AAEA,MAAMC,MAAM,GAAGC,KAAK,IAAI;AACtB,QAAM;AAACC,IAAAA,IAAD;AAAOC,IAAAA,OAAP;AAAgBC,IAAAA,QAAhB;AAA0BC,IAAAA,aAA1B;AAAyCC,IAAAA,cAAzC;AAAyDC,IAAAA;AAAzD,MAAsEN,KAA5E;AACA,sBACE;AACE,IAAA,SAAS,EAAEN,UAAU,CAACI,KAAK,CAACS,MAAP,EAAeN,IAAI,KAAK,OAAT,IAAoBH,KAAK,CAACU,WAAzC,CADvB;AAEE,IAAA,KAAK,EAAEN;AAFT,kBAIE;AAAK,iBAAY,GAAED,IAAK,iBAAxB;AAA0C,IAAA,SAAS,EAAEH,KAAK,CAACI;AAA3D,kBACE,oBAAC,YAAD;AAAc,IAAA,SAAS,EAAEJ,KAAK,CAACW;AAA/B,IADF,EAEGP,OAFH,CAJF,EAQGE,aAAa,gBACZ;AAAK,IAAA,SAAS,EAAEN,KAAK,CAACY;AAAtB,kBACE,oBAAC,IAAD;AACE,iBAAU,kBADZ;AAEE,kBAAYN,aAFd;AAGE,IAAA,KAAK,EAAEA,aAHT;AAIE,IAAA,OAAO,EAAED,QAJX;AAKE,IAAA,IAAI,EAAC;AALP,IADF,CADY,GAUV,IAlBN,EAmBGC,aAAa,IAAIC,cAAjB,gBAAkC;AAAK,IAAA,SAAS,EAAEP,KAAK,CAACa;AAAtB,IAAlC,GAAyE,IAnB5E,EAoBGN,cAAc,gBACb;AAAK,IAAA,SAAS,EAAEP,KAAK,CAACY;AAAtB,kBACE,oBAAC,IAAD;AACE,iBAAU,mBADZ;AAEE,IAAA,OAAO,EAAEJ,SAFX;AAGE,kBAAYD,cAHd;AAIE,IAAA,KAAK,EAAEA,cAJT;AAKE,IAAA,IAAI,EAAC;AALP,IADF,CADa,GAUX,IA9BN,CADF;AAkCD,CApCD;;AAsCAN,MAAM,CAACa,SAAP,2CAAmB;AACjBX,EAAAA,IAAI,EAAER,SAAS,CAACoB,KAAV,CAAgB,CAAC,aAAD,EAAgB,OAAhB,EAAyB,SAAzB,CAAhB,CADW;AAEjBX,EAAAA,OAAO,EAAET,SAAS,CAACqB,MAAV,CAAiBC,UAFT;AAGjBZ,EAAAA,QAAQ,EAAEV,SAAS,CAACuB,IAHH;AAIjBZ,EAAAA,aAAa,EAAEX,SAAS,CAACqB,MAJR;AAKjBT,EAAAA,cAAc,EAAEZ,SAAS,CAACqB,MALT;AAMjBR,EAAAA,SAAS,EAAEb,SAAS,CAACuB;AANJ,CAAnB;AASA,eAAejB,MAAf","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport classnames from 'classnames';\nimport {NovaSolidInterfaceFeedbackInterfaceAlertDiamond as QuestionIcon} from '@coorpacademy/nova-icons';\nimport Link from '../../atom/button-link';\nimport style from './style.css';\n\nconst Banner = props => {\n const {type, message, firstCTA, firstCTALabel, secondCTALabel, secondCTA} = props;\n return (\n <div\n className={classnames(style.banner, type === 'error' && style.errorBanner)}\n title={message}\n >\n <div data-name={`${type}-banner-message`} className={style.message}>\n <QuestionIcon className={style.icon} />\n {message}\n </div>\n {firstCTALabel ? (\n <div className={style.button}>\n <Link\n data-name=\"first-banner-cta\"\n aria-label={firstCTALabel}\n label={firstCTALabel}\n onClick={firstCTA}\n type=\"text\"\n />\n </div>\n ) : null}\n {firstCTALabel && secondCTALabel ? <div className={style.buttonsBar} /> : null}\n {secondCTALabel ? (\n <div className={style.button}>\n <Link\n data-name=\"second-banner-cta\"\n onClick={secondCTA}\n aria-label={secondCTALabel}\n label={secondCTALabel}\n type=\"text\"\n />\n </div>\n ) : null}\n </div>\n );\n};\n\nBanner.propTypes = {\n type: PropTypes.oneOf(['information', 'error', 'success']),\n message: PropTypes.string.isRequired,\n firstCTA: PropTypes.func,\n firstCTALabel: PropTypes.string,\n secondCTALabel: PropTypes.string,\n secondCTA: PropTypes.func\n};\n\nexport default Banner;\n"],"file":"index.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":"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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} 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"}
|