@coorpacademy/components 11.40.13 → 11.40.14-alpha.4.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/es/atom/checkbox-with-title/index.d.ts +24 -1
- package/es/atom/checkbox-with-title/index.d.ts.map +1 -1
- package/es/atom/checkbox-with-title/index.js +16 -2
- package/es/atom/checkbox-with-title/index.js.map +1 -1
- package/es/atom/chip/index.d.ts.map +1 -1
- package/es/atom/chip/index.js +4 -4
- package/es/atom/chip/index.js.map +1 -1
- package/es/atom/input-switch/index.d.ts +24 -1
- package/es/atom/input-switch/index.d.ts.map +1 -1
- package/es/atom/input-switch/index.js +16 -2
- package/es/atom/input-switch/index.js.map +1 -1
- package/es/molecule/multi-filter-panel/index.d.ts +21 -0
- package/es/molecule/multi-filter-panel/index.d.ts.map +1 -1
- package/es/molecule/multi-filter-panel/index.js +23 -10
- package/es/molecule/multi-filter-panel/index.js.map +1 -1
- package/es/molecule/multi-filter-panel/prop-types.d.ts +5 -4
- package/es/molecule/multi-filter-panel/prop-types.d.ts.map +1 -1
- package/es/molecule/multi-filter-panel/prop-types.js.map +1 -1
- package/es/molecule/quick-filters/index.js +3 -1
- package/es/molecule/quick-filters/index.js.map +1 -1
- package/es/molecule/quick-filters/style.css +2 -0
- package/es/organism/filter-checkbox-and-search/index.d.ts +21 -0
- package/es/organism/filter-checkbox-and-search/index.d.ts.map +1 -1
- package/es/organism/filter-checkbox-and-search/index.js +13 -2
- package/es/organism/filter-checkbox-and-search/index.js.map +1 -1
- package/es/organism/filter-chip/index.d.ts +21 -0
- package/es/organism/filter-chip/index.d.ts.map +1 -1
- package/es/organism/filter-chip/index.js +14 -2
- package/es/organism/filter-chip/index.js.map +1 -1
- package/es/organism/filter-switch/index.d.ts +21 -0
- package/es/organism/filter-switch/index.d.ts.map +1 -1
- package/es/organism/filter-switch/index.js +13 -2
- package/es/organism/filter-switch/index.js.map +1 -1
- package/es/template/common/search-page/index.d.ts +36 -0
- package/es/template/common/search-page/index.d.ts.map +1 -1
- package/es/template/common/search-page/index.js +45 -6
- package/es/template/common/search-page/index.js.map +1 -1
- package/es/template/common/search-page/style.css +27 -1
- package/lib/atom/checkbox-with-title/index.d.ts +24 -1
- package/lib/atom/checkbox-with-title/index.d.ts.map +1 -1
- package/lib/atom/checkbox-with-title/index.js +16 -2
- package/lib/atom/checkbox-with-title/index.js.map +1 -1
- package/lib/atom/chip/index.d.ts.map +1 -1
- package/lib/atom/chip/index.js +4 -4
- package/lib/atom/chip/index.js.map +1 -1
- package/lib/atom/input-switch/index.d.ts +24 -1
- package/lib/atom/input-switch/index.d.ts.map +1 -1
- package/lib/atom/input-switch/index.js +16 -2
- package/lib/atom/input-switch/index.js.map +1 -1
- package/lib/molecule/multi-filter-panel/index.d.ts +21 -0
- package/lib/molecule/multi-filter-panel/index.d.ts.map +1 -1
- package/lib/molecule/multi-filter-panel/index.js +22 -10
- package/lib/molecule/multi-filter-panel/index.js.map +1 -1
- package/lib/molecule/multi-filter-panel/prop-types.d.ts +5 -4
- package/lib/molecule/multi-filter-panel/prop-types.d.ts.map +1 -1
- package/lib/molecule/multi-filter-panel/prop-types.js.map +1 -1
- package/lib/molecule/quick-filters/index.js +3 -1
- package/lib/molecule/quick-filters/index.js.map +1 -1
- package/lib/molecule/quick-filters/style.css +2 -0
- package/lib/organism/filter-checkbox-and-search/index.d.ts +21 -0
- package/lib/organism/filter-checkbox-and-search/index.d.ts.map +1 -1
- package/lib/organism/filter-checkbox-and-search/index.js +13 -2
- package/lib/organism/filter-checkbox-and-search/index.js.map +1 -1
- package/lib/organism/filter-chip/index.d.ts +21 -0
- package/lib/organism/filter-chip/index.d.ts.map +1 -1
- package/lib/organism/filter-chip/index.js +14 -2
- package/lib/organism/filter-chip/index.js.map +1 -1
- package/lib/organism/filter-switch/index.d.ts +21 -0
- package/lib/organism/filter-switch/index.d.ts.map +1 -1
- package/lib/organism/filter-switch/index.js +13 -2
- package/lib/organism/filter-switch/index.js.map +1 -1
- package/lib/template/common/search-page/index.d.ts +36 -0
- package/lib/template/common/search-page/index.d.ts.map +1 -1
- package/lib/template/common/search-page/index.js +45 -6
- package/lib/template/common/search-page/index.js.map +1 -1
- package/lib/template/common/search-page/style.css +27 -1
- package/package.json +2 -2
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
export default CheckboxWithTitle;
|
|
2
|
-
declare function CheckboxWithTitle(props: any): JSX.Element;
|
|
2
|
+
declare function CheckboxWithTitle(props: any, context: any): JSX.Element;
|
|
3
3
|
declare namespace CheckboxWithTitle {
|
|
4
4
|
const propTypes: {
|
|
5
5
|
title: PropTypes.Requireable<string>;
|
|
@@ -17,6 +17,29 @@ declare namespace CheckboxWithTitle {
|
|
|
17
17
|
[x: string]: NonNullable<string | number | null | undefined> | null | undefined;
|
|
18
18
|
}>;
|
|
19
19
|
};
|
|
20
|
+
namespace contextTypes {
|
|
21
|
+
const skin: PropTypes.Requireable<PropTypes.InferProps<{
|
|
22
|
+
common: PropTypes.Requireable<{
|
|
23
|
+
[x: string]: any;
|
|
24
|
+
}>;
|
|
25
|
+
images: PropTypes.Requireable<PropTypes.InferProps<{
|
|
26
|
+
'logo-mobile': PropTypes.Requireable<any>;
|
|
27
|
+
logo: PropTypes.Requireable<any>;
|
|
28
|
+
'logo-email': PropTypes.Requireable<any>;
|
|
29
|
+
login: PropTypes.Requireable<any>;
|
|
30
|
+
}>>;
|
|
31
|
+
icons: PropTypes.Requireable<{
|
|
32
|
+
[x: string]: any;
|
|
33
|
+
}>;
|
|
34
|
+
mod: PropTypes.Requireable<{
|
|
35
|
+
[x: string]: any;
|
|
36
|
+
}>;
|
|
37
|
+
courses: PropTypes.Requireable<any[]>;
|
|
38
|
+
texts: PropTypes.Requireable<{
|
|
39
|
+
[x: string]: any;
|
|
40
|
+
}>;
|
|
41
|
+
}>>;
|
|
42
|
+
}
|
|
20
43
|
}
|
|
21
44
|
import PropTypes from "prop-types";
|
|
22
45
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atom/checkbox-with-title/index.js"],"names":[],"mappings":";
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atom/checkbox-with-title/index.js"],"names":[],"mappings":";AAUA,0EA+DC"}
|
|
@@ -1,15 +1,18 @@
|
|
|
1
1
|
import _uniqueId from "lodash/fp/uniqueId";
|
|
2
2
|
import _noop from "lodash/fp/noop";
|
|
3
|
+
import _getOr from "lodash/fp/getOr";
|
|
3
4
|
import React, { useMemo } from 'react';
|
|
4
5
|
import PropTypes from 'prop-types';
|
|
5
6
|
import FaIcon from '../icon';
|
|
7
|
+
import { COLORS } from '../../variables/colors';
|
|
8
|
+
import Provider from '../provider';
|
|
6
9
|
import style from './style.css';
|
|
7
10
|
const DEFAULT_ICON_STYLE = {
|
|
8
11
|
padding: '0',
|
|
9
12
|
width: '20px',
|
|
10
13
|
height: '20px'
|
|
11
14
|
};
|
|
12
|
-
const CheckboxWithTitle = props => {
|
|
15
|
+
const CheckboxWithTitle = (props, context) => {
|
|
13
16
|
const {
|
|
14
17
|
title,
|
|
15
18
|
name,
|
|
@@ -24,6 +27,10 @@ const CheckboxWithTitle = props => {
|
|
|
24
27
|
},
|
|
25
28
|
customStyle = {}
|
|
26
29
|
} = props;
|
|
30
|
+
const {
|
|
31
|
+
skin
|
|
32
|
+
} = context;
|
|
33
|
+
const primaryColor = _getOr(COLORS.cm_primary_blue, 'common.primary', skin);
|
|
27
34
|
const {
|
|
28
35
|
iconName,
|
|
29
36
|
iconColor,
|
|
@@ -48,7 +55,11 @@ const CheckboxWithTitle = props => {
|
|
|
48
55
|
"data-name": dataName,
|
|
49
56
|
"aria-label": ariaLabel
|
|
50
57
|
}), /*#__PURE__*/React.createElement("div", {
|
|
51
|
-
className: style.label
|
|
58
|
+
className: style.label,
|
|
59
|
+
style: checked ? {
|
|
60
|
+
background: primaryColor,
|
|
61
|
+
borderColor: primaryColor
|
|
62
|
+
} : null
|
|
52
63
|
}, checked ? /*#__PURE__*/React.createElement(FaIcon, {
|
|
53
64
|
className: style.icon,
|
|
54
65
|
iconName: iconName,
|
|
@@ -82,5 +93,8 @@ CheckboxWithTitle.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
|
82
93
|
}),
|
|
83
94
|
customStyle: PropTypes.objectOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number]))
|
|
84
95
|
} : {};
|
|
96
|
+
CheckboxWithTitle.contextTypes = {
|
|
97
|
+
skin: Provider.childContextTypes.skin
|
|
98
|
+
};
|
|
85
99
|
export default CheckboxWithTitle;
|
|
86
100
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":["React","useMemo","PropTypes","FaIcon","style","DEFAULT_ICON_STYLE","padding","width","height","CheckboxWithTitle","props","title","name","checked","onChange","_noop","dataName","ariaLabel","icon","iconName","iconColor","preset","customStyle","idCheckbox","_uniqueId","handleChange","e","target","createElement","className","container","htmlFor","type","id","checkbox","label","dangerouslySetInnerHTML","__html","propTypes","process","env","NODE_ENV","string","bool","func","shape","objectOf","oneOfType","number"],"sources":["../../../src/atom/checkbox-with-title/index.js"],"sourcesContent":["import React, {useMemo} from 'react';\nimport PropTypes from 'prop-types';\nimport {noop, uniqueId} from 'lodash/fp';\nimport FaIcon from '../icon';\nimport style from './style.css';\n\nconst DEFAULT_ICON_STYLE = {padding: '0', width: '20px', height: '20px'};\n\nconst CheckboxWithTitle = props => {\n const {\n title,\n name,\n checked,\n onChange = noop,\n 'data-name': dataName,\n 'aria-label': ariaLabel,\n icon = {iconName: 'check', iconColor: 'white', preset: 's'},\n customStyle = {}\n } = props;\n const {iconName, iconColor, preset} = icon;\n const idCheckbox = useMemo(() => uniqueId('input-checkbox-'), []);\n const handleChange = useMemo(() => e => onChange(e.target.checked), [onChange]);\n\n return (\n <div className={style.container} style={{...customStyle}}>\n {onChange !== noop ? (\n <label htmlFor={idCheckbox}>\n <input\n type=\"checkbox\"\n id={idCheckbox}\n name={name}\n onChange={handleChange}\n checked={checked}\n className={style.checkbox}\n data-name={dataName}\n aria-label={ariaLabel}\n />\n <div
|
|
1
|
+
{"version":3,"file":"index.js","names":["React","useMemo","PropTypes","FaIcon","COLORS","Provider","style","DEFAULT_ICON_STYLE","padding","width","height","CheckboxWithTitle","props","context","title","name","checked","onChange","_noop","dataName","ariaLabel","icon","iconName","iconColor","preset","customStyle","skin","primaryColor","_getOr","cm_primary_blue","idCheckbox","_uniqueId","handleChange","e","target","createElement","className","container","htmlFor","type","id","checkbox","label","background","borderColor","dangerouslySetInnerHTML","__html","propTypes","process","env","NODE_ENV","string","bool","func","shape","objectOf","oneOfType","number","contextTypes","childContextTypes"],"sources":["../../../src/atom/checkbox-with-title/index.js"],"sourcesContent":["import React, {useMemo} from 'react';\nimport PropTypes from 'prop-types';\nimport {getOr, noop, uniqueId} from 'lodash/fp';\nimport FaIcon from '../icon';\nimport {COLORS} from '../../variables/colors';\nimport Provider from '../provider';\nimport style from './style.css';\n\nconst DEFAULT_ICON_STYLE = {padding: '0', width: '20px', height: '20px'};\n\nconst CheckboxWithTitle = (props, context) => {\n const {\n title,\n name,\n checked,\n onChange = noop,\n 'data-name': dataName,\n 'aria-label': ariaLabel,\n icon = {iconName: 'check', iconColor: 'white', preset: 's'},\n customStyle = {}\n } = props;\n const {skin} = context;\n const primaryColor = getOr(COLORS.cm_primary_blue, 'common.primary', skin);\n const {iconName, iconColor, preset} = icon;\n const idCheckbox = useMemo(() => uniqueId('input-checkbox-'), []);\n const handleChange = useMemo(() => e => onChange(e.target.checked), [onChange]);\n\n return (\n <div className={style.container} style={{...customStyle}}>\n {onChange !== noop ? (\n <label htmlFor={idCheckbox}>\n <input\n type=\"checkbox\"\n id={idCheckbox}\n name={name}\n onChange={handleChange}\n checked={checked}\n className={style.checkbox}\n data-name={dataName}\n aria-label={ariaLabel}\n />\n <div\n className={style.label}\n style={checked ? {background: primaryColor, borderColor: primaryColor} : null}\n >\n {checked ? (\n <FaIcon\n className={style.icon}\n iconName={iconName}\n iconColor={iconColor}\n preset={preset}\n customStyle={DEFAULT_ICON_STYLE}\n />\n ) : (\n <FaIcon\n className={style.icon}\n iconName={'square'}\n iconColor={'transparent'}\n preset=\"s\"\n customStyle={DEFAULT_ICON_STYLE}\n />\n )}\n </div>\n </label>\n ) : null}\n {title ? (\n <span\n // eslint-disable-next-line react/no-danger\n dangerouslySetInnerHTML={{__html: title}}\n />\n ) : null}\n </div>\n );\n};\n\nCheckboxWithTitle.propTypes = {\n title: PropTypes.string,\n name: PropTypes.string,\n checked: PropTypes.bool,\n onChange: PropTypes.func,\n 'aria-label': PropTypes.string,\n 'data-name': PropTypes.string,\n icon: PropTypes.shape({\n iconName: PropTypes.string,\n iconColor: PropTypes.string,\n preset: PropTypes.string\n }),\n customStyle: PropTypes.objectOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number]))\n};\n\nCheckboxWithTitle.contextTypes = {\n skin: Provider.childContextTypes.skin\n};\nexport default CheckboxWithTitle;\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atom/chip/index.js"],"names":[],"mappings":"AAmBO,qGAG0E;;AAGjF,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atom/chip/index.js"],"names":[],"mappings":"AAmBO,qGAG0E;;AAGjF,6DA0EC"}
|
package/es/atom/chip/index.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import React, { useMemo, useState, useCallback } from 'react';
|
|
2
2
|
import PropTypes from 'prop-types';
|
|
3
3
|
import classnames from 'classnames';
|
|
4
|
-
import
|
|
4
|
+
import getOr from 'lodash/fp/getOr';
|
|
5
5
|
import { convert } from 'css-color-function';
|
|
6
6
|
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
|
|
7
7
|
import { fas } from '@fortawesome/pro-solid-svg-icons';
|
|
@@ -27,14 +27,14 @@ const Chip = (props, context) => {
|
|
|
27
27
|
customIcon,
|
|
28
28
|
onClick,
|
|
29
29
|
leftIcon,
|
|
30
|
-
backgroundColor
|
|
30
|
+
backgroundColor,
|
|
31
31
|
customStyle
|
|
32
32
|
} = props;
|
|
33
33
|
const {
|
|
34
34
|
skin
|
|
35
35
|
} = context;
|
|
36
|
-
const skinColor =
|
|
37
|
-
const selectedBgColor = backgroundColor === 'skin' && skinColor ? skinColor : backgroundColor;
|
|
36
|
+
const skinColor = getOr(DEFAULT_BACKGROUND_COLOR, 'common.primary', skin);
|
|
37
|
+
const selectedBgColor = backgroundColor === 'skin' && skinColor ? skinColor : backgroundColor || DEFAULT_BACKGROUND_COLOR;
|
|
38
38
|
const hoveredSelectedBgColor = calculateHoveredSelectedBgColor(selectedBgColor);
|
|
39
39
|
const [isHovered, setIsHovered] = useState(false);
|
|
40
40
|
const handleClick = useMemo(() => onClick, [onClick]);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":["React","useMemo","useState","useCallback","PropTypes","classnames","
|
|
1
|
+
{"version":3,"file":"index.js","names":["React","useMemo","useState","useCallback","PropTypes","classnames","getOr","convert","FontAwesomeIcon","fas","library","Provider","COLORS","style","add","LUMINOSITY_DELTA","cm_primary_blue","DEFAULT_BACKGROUND_COLOR","ICON_SIZE","calculateHoveredSelectedBgColor","selectedBgColor","luminosityDelta","Chip","props","context","text","subText","textColor","cm_grey_700","selected","customIcon","onClick","leftIcon","backgroundColor","customStyle","skin","skinColor","hoveredSelectedBgColor","isHovered","setIsHovered","handleClick","handleMouseEnter","handleMouseLeave","hoverStyle","defaultIcon","showIcon","color","white","createElement","className","container","unselected","onMouseEnter","onMouseLeave","left","icon","fontSize","title","contextTypes","childContextTypes","propTypes","process","env","NODE_ENV","string","bool","func","objectOf","oneOfType","number"],"sources":["../../../src/atom/chip/index.js"],"sourcesContent":["import React, {useMemo, useState, useCallback} from 'react';\nimport PropTypes from 'prop-types';\nimport classnames from 'classnames';\n\nimport getOr from 'lodash/fp/getOr';\nimport {convert} from 'css-color-function';\nimport {FontAwesomeIcon} from '@fortawesome/react-fontawesome';\nimport {fas} from '@fortawesome/pro-solid-svg-icons';\nimport {library} from '@fortawesome/fontawesome-svg-core';\nimport Provider from '../provider';\nimport {COLORS} from '../../variables/colors';\nimport style from './style.css';\n\nlibrary.add(fas);\n\nconst LUMINOSITY_DELTA = 0.08;\nconst {cm_primary_blue: DEFAULT_BACKGROUND_COLOR} = COLORS;\nconst ICON_SIZE = '12px';\n\nexport const calculateHoveredSelectedBgColor = (\n selectedBgColor,\n luminosityDelta = LUMINOSITY_DELTA\n) => convert(`hsl(from ${selectedBgColor} h s calc(l*(1 - ${luminosityDelta})))`);\n// note: luminosity decrease is relative to the selected color\n\nconst Chip = (props, context) => {\n const {\n text,\n subText,\n textColor = COLORS.cm_grey_700,\n selected = false,\n customIcon,\n onClick,\n leftIcon,\n backgroundColor,\n customStyle\n } = props;\n const {skin} = context;\n const skinColor = getOr(DEFAULT_BACKGROUND_COLOR, 'common.primary', skin);\n const selectedBgColor =\n backgroundColor === 'skin' && skinColor\n ? skinColor\n : backgroundColor || DEFAULT_BACKGROUND_COLOR;\n const hoveredSelectedBgColor = calculateHoveredSelectedBgColor(selectedBgColor);\n\n const [isHovered, setIsHovered] = useState(false);\n\n const handleClick = useMemo(() => onClick, [onClick]);\n\n const handleMouseEnter = useCallback(() => {\n setIsHovered(true);\n }, []);\n\n const handleMouseLeave = useCallback(() => {\n setIsHovered(false);\n }, []);\n\n const hoverStyle = isHovered ? {backgroundColor: hoveredSelectedBgColor} : {};\n\n const defaultIcon = selected ? 'fa-check' : 'fa-plus';\n const showIcon = customIcon !== 'none';\n const color = selected ? COLORS.white : textColor;\n\n return (\n <div\n className={classnames(style.container, !selected && style.unselected)}\n style={{\n ...(selected && selectedBgColor ? {backgroundColor: selectedBgColor} : {}),\n ...(selected && hoverStyle),\n ...customStyle\n }}\n onClick={handleClick}\n onMouseEnter={handleMouseEnter}\n onMouseLeave={handleMouseLeave}\n aria-label={text}\n data-name={`chip-${text}`}\n >\n <div className={style.left}>\n {leftIcon ? <FontAwesomeIcon style={{color}} icon={leftIcon} fontSize={ICON_SIZE} /> : null}\n <div title={text}>\n <span className={style.text} style={{color}}>\n {text}\n </span>\n {subText ? (\n <span className={style.subText} style={{color}}>\n {subText}\n </span>\n ) : null}\n </div>\n </div>\n {showIcon ? (\n <FontAwesomeIcon\n style={{color}}\n icon={customIcon ? `fa-${customIcon}` : defaultIcon}\n fontSize={ICON_SIZE}\n />\n ) : null}\n </div>\n );\n};\n\nChip.contextTypes = {\n skin: Provider.childContextTypes.skin\n};\n\nChip.propTypes = {\n text: PropTypes.string,\n subText: PropTypes.string,\n textColor: PropTypes.string,\n selected: PropTypes.bool,\n customIcon: PropTypes.string,\n backgroundColor: PropTypes.string,\n onClick: PropTypes.func,\n leftIcon: PropTypes.string,\n customStyle: PropTypes.objectOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number]))\n};\n\nexport default Chip;\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
export default InputSwitch;
|
|
2
|
-
declare function InputSwitch(props: any): JSX.Element;
|
|
2
|
+
declare function InputSwitch(props: any, context: any): JSX.Element;
|
|
3
3
|
declare namespace InputSwitch {
|
|
4
4
|
const propTypes: {
|
|
5
5
|
title: PropTypes.Requireable<string>;
|
|
@@ -19,6 +19,29 @@ declare namespace InputSwitch {
|
|
|
19
19
|
requiredSelection: PropTypes.Requireable<boolean>;
|
|
20
20
|
icon: PropTypes.Requireable<string>;
|
|
21
21
|
};
|
|
22
|
+
namespace contextTypes {
|
|
23
|
+
const skin: PropTypes.Requireable<PropTypes.InferProps<{
|
|
24
|
+
common: PropTypes.Requireable<{
|
|
25
|
+
[x: string]: any;
|
|
26
|
+
}>;
|
|
27
|
+
images: PropTypes.Requireable<PropTypes.InferProps<{
|
|
28
|
+
'logo-mobile': PropTypes.Requireable<any>;
|
|
29
|
+
logo: PropTypes.Requireable<any>;
|
|
30
|
+
'logo-email': PropTypes.Requireable<any>;
|
|
31
|
+
login: PropTypes.Requireable<any>;
|
|
32
|
+
}>>;
|
|
33
|
+
icons: PropTypes.Requireable<{
|
|
34
|
+
[x: string]: any;
|
|
35
|
+
}>;
|
|
36
|
+
mod: PropTypes.Requireable<{
|
|
37
|
+
[x: string]: any;
|
|
38
|
+
}>;
|
|
39
|
+
courses: PropTypes.Requireable<any[]>;
|
|
40
|
+
texts: PropTypes.Requireable<{
|
|
41
|
+
[x: string]: any;
|
|
42
|
+
}>;
|
|
43
|
+
}>>;
|
|
44
|
+
}
|
|
22
45
|
}
|
|
23
46
|
import PropTypes from "prop-types";
|
|
24
47
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atom/input-switch/index.js"],"names":[],"mappings":";
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atom/input-switch/index.js"],"names":[],"mappings":";AAUA,oEAqGC"}
|
|
@@ -1,13 +1,16 @@
|
|
|
1
1
|
import _uniqueId from "lodash/fp/uniqueId";
|
|
2
2
|
import _noop from "lodash/fp/noop";
|
|
3
|
+
import _getOr from "lodash/fp/getOr";
|
|
3
4
|
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
|
|
4
5
|
import React, { useMemo } from 'react';
|
|
5
6
|
import PropTypes from 'prop-types';
|
|
6
7
|
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
|
|
7
8
|
import classNames from 'classnames';
|
|
8
9
|
import getClassState from '../../util/get-class-state';
|
|
10
|
+
import { COLORS } from '../../variables/colors';
|
|
11
|
+
import Provider from '../provider';
|
|
9
12
|
import style from './style.css';
|
|
10
|
-
const InputSwitch = props => {
|
|
13
|
+
const InputSwitch = (props, context) => {
|
|
11
14
|
const {
|
|
12
15
|
title,
|
|
13
16
|
name,
|
|
@@ -26,6 +29,10 @@ const InputSwitch = props => {
|
|
|
26
29
|
'aria-label': ariaLabel,
|
|
27
30
|
icon
|
|
28
31
|
} = props;
|
|
32
|
+
const {
|
|
33
|
+
skin
|
|
34
|
+
} = context;
|
|
35
|
+
const primaryColor = _getOr(COLORS.cm_primary_blue, 'common.primary', skin);
|
|
29
36
|
const idSwitch = id || _uniqueId('input-switch-');
|
|
30
37
|
const isDisabled = disabled ? 'disabled' : '';
|
|
31
38
|
const handleChange = useMemo(() => e => onChange(e.target.checked), [onChange]);
|
|
@@ -97,7 +104,11 @@ const InputSwitch = props => {
|
|
|
97
104
|
"data-name": "input-switch-label",
|
|
98
105
|
tabIndex: 0,
|
|
99
106
|
"aria-label": ariaLabel,
|
|
100
|
-
title: ariaLabel
|
|
107
|
+
title: ariaLabel,
|
|
108
|
+
style: value ? {
|
|
109
|
+
background: primaryColor,
|
|
110
|
+
borderColor: primaryColor
|
|
111
|
+
} : null
|
|
101
112
|
}))), /*#__PURE__*/React.createElement("div", {
|
|
102
113
|
className: !details ? style.alignedTextContainer : null
|
|
103
114
|
}, titlePosition === 'right' ? titleView : null, details ? /*#__PURE__*/React.createElement("div", {
|
|
@@ -122,5 +133,8 @@ InputSwitch.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
|
122
133
|
requiredSelection: PropTypes.bool,
|
|
123
134
|
icon: PropTypes.string
|
|
124
135
|
} : {};
|
|
136
|
+
InputSwitch.contextTypes = {
|
|
137
|
+
skin: Provider.childContextTypes.skin
|
|
138
|
+
};
|
|
125
139
|
export default InputSwitch;
|
|
126
140
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":["React","useMemo","PropTypes","FontAwesomeIcon","classNames","getClassState","style","InputSwitch","props","title","name","id","value","disabled","onChange","_noop","description","modified","theme","titlePosition","details","requiredSelection","dataName","ariaLabelledBy","ariaLabel","icon","idSwitch","_uniqueId","isDisabled","handleChange","e","target","checked","titleView","createElement","className","titleContainer","newMoocTitleContainer","descriptionView","getClass","defaultClass","coorpmanager","modifiedClass","coorpmanagerModified","newMooc","newMoocModified","partielUncheck","defaultStyle","btnSwitchContainer","_extends","type","checkbox","htmlFor","tabIndex","alignedTextContainer","detailsTxt","propTypes","process","env","NODE_ENV","string","bool","func","oneOf"],"sources":["../../../src/atom/input-switch/index.js"],"sourcesContent":["import React, {useMemo} from 'react';\nimport PropTypes from 'prop-types';\nimport {noop, uniqueId} from 'lodash/fp';\nimport {FontAwesomeIcon} from '@fortawesome/react-fontawesome';\nimport classNames from 'classnames';\nimport getClassState from '../../util/get-class-state';\nimport style from './style.css';\n\nconst InputSwitch = props => {\n const {\n title,\n name,\n id,\n value,\n disabled,\n onChange = noop,\n description,\n modified = false,\n theme = 'default',\n titlePosition = 'left',\n details = '',\n requiredSelection = false,\n 'data-name': dataName,\n 'aria-labelledby': ariaLabelledBy,\n 'aria-label': ariaLabel,\n icon\n } = props;\n
|
|
1
|
+
{"version":3,"file":"index.js","names":["React","useMemo","PropTypes","FontAwesomeIcon","classNames","getClassState","COLORS","Provider","style","InputSwitch","props","context","title","name","id","value","disabled","onChange","_noop","description","modified","theme","titlePosition","details","requiredSelection","dataName","ariaLabelledBy","ariaLabel","icon","skin","primaryColor","_getOr","cm_primary_blue","idSwitch","_uniqueId","isDisabled","handleChange","e","target","checked","titleView","createElement","className","titleContainer","newMoocTitleContainer","descriptionView","getClass","defaultClass","coorpmanager","modifiedClass","coorpmanagerModified","newMooc","newMoocModified","partielUncheck","defaultStyle","btnSwitchContainer","_extends","type","checkbox","htmlFor","tabIndex","background","borderColor","alignedTextContainer","detailsTxt","propTypes","process","env","NODE_ENV","string","bool","func","oneOf","contextTypes","childContextTypes"],"sources":["../../../src/atom/input-switch/index.js"],"sourcesContent":["import React, {useMemo} from 'react';\nimport PropTypes from 'prop-types';\nimport {getOr, noop, uniqueId} from 'lodash/fp';\nimport {FontAwesomeIcon} from '@fortawesome/react-fontawesome';\nimport classNames from 'classnames';\nimport getClassState from '../../util/get-class-state';\nimport {COLORS} from '../../variables/colors';\nimport Provider from '../provider';\nimport style from './style.css';\n\nconst InputSwitch = (props, context) => {\n const {\n title,\n name,\n id,\n value,\n disabled,\n onChange = noop,\n description,\n modified = false,\n theme = 'default',\n titlePosition = 'left',\n details = '',\n requiredSelection = false,\n 'data-name': dataName,\n 'aria-labelledby': ariaLabelledBy,\n 'aria-label': ariaLabel,\n icon\n } = props;\n const {skin} = context;\n const primaryColor = getOr(COLORS.cm_primary_blue, 'common.primary', skin);\n const idSwitch = id || uniqueId('input-switch-');\n const isDisabled = disabled ? 'disabled' : '';\n const handleChange = useMemo(() => e => onChange(e.target.checked), [onChange]);\n const titleView = title ? (\n <div\n className={classNames(\n icon ? style.titleContainer : null,\n theme === 'newMooc' ? style.newMoocTitleContainer : null\n )}\n >\n {icon ? <FontAwesomeIcon icon={icon} className={style.icon} /> : null}\n <span id={`title-view-${dataName}`} className={style.title}>\n {title}\n </span>\n </div>\n ) : null;\n\n const descriptionView = description ? (\n <div className={style.description}>{description}</div>\n ) : null;\n\n const getClass = () => {\n switch (theme) {\n case 'coorpmanager':\n return {\n defaultClass: style.coorpmanager,\n modifiedClass: style.coorpmanagerModified\n };\n case 'newMooc':\n return {\n defaultClass: style.newMooc,\n modifiedClass: style.newMoocModified\n };\n case 'mooc':\n return {\n defaultClass: style.partielUncheck,\n modifiedClass: style.coorpmanagerModified\n };\n default:\n return {defaultClass: style.defaultStyle, modifiedClass: style.modified};\n }\n };\n const {defaultClass, modifiedClass} = getClass();\n const className = getClassState(defaultClass, modifiedClass, null, modified);\n\n return (\n <div className={className} data-name={`switch-input-${theme}${dataName}`}>\n {titlePosition === 'left' ? titleView : null}\n <div className={requiredSelection ? style.requiredSelection : null}>\n <div className={style.btnSwitchContainer}>\n <input\n {...(ariaLabelledBy ? {'aria-labelledby': ariaLabelledBy} : {})}\n {...(title ? {'aria-labelledby': `title-view-${dataName}`} : {})}\n {...(ariaLabel && !ariaLabelledBy && !title ? {'aria-label': ariaLabel} : {})}\n type=\"checkbox\"\n id={idSwitch}\n name={name}\n onChange={handleChange}\n checked={value}\n disabled={isDisabled}\n className={style.checkbox}\n aria-labelledby={ariaLabelledBy}\n />\n <label\n htmlFor={idSwitch}\n data-name=\"input-switch-label\"\n tabIndex={0}\n aria-label={ariaLabel}\n title={ariaLabel}\n style={value ? {background: primaryColor, borderColor: primaryColor} : null}\n />\n </div>\n </div>\n <div className={!details ? style.alignedTextContainer : null}>\n {titlePosition === 'right' ? titleView : null}\n {details ? <div className={style.detailsTxt}>{details}</div> : null}\n </div>\n {descriptionView}\n </div>\n );\n};\n\nInputSwitch.propTypes = {\n title: PropTypes.string,\n name: PropTypes.string,\n id: PropTypes.string,\n value: PropTypes.bool,\n disabled: PropTypes.bool,\n onChange: PropTypes.func,\n description: PropTypes.string,\n 'aria-labelledby': PropTypes.string,\n 'aria-label': PropTypes.string,\n modified: PropTypes.bool,\n titlePosition: PropTypes.oneOf(['right', 'left']),\n theme: PropTypes.oneOf(['default', 'coorpmanager', 'mooc', 'newMooc']),\n details: PropTypes.string,\n 'data-name': PropTypes.string,\n requiredSelection: PropTypes.bool,\n icon: PropTypes.string\n};\n\nInputSwitch.contextTypes = {\n skin: Provider.childContextTypes.skin\n};\n\nexport default InputSwitch;\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -69,6 +69,27 @@ declare const MultiFilterPanel: {
|
|
|
69
69
|
};
|
|
70
70
|
contextTypes: {
|
|
71
71
|
translate: import("prop-types").Requireable<(...args: any[]) => any>;
|
|
72
|
+
skin: import("prop-types").Requireable<import("prop-types").InferProps<{
|
|
73
|
+
common: import("prop-types").Requireable<{
|
|
74
|
+
[x: string]: any;
|
|
75
|
+
}>;
|
|
76
|
+
images: import("prop-types").Requireable<import("prop-types").InferProps<{
|
|
77
|
+
'logo-mobile': import("prop-types").Requireable<any>;
|
|
78
|
+
logo: import("prop-types").Requireable<any>;
|
|
79
|
+
'logo-email': import("prop-types").Requireable<any>;
|
|
80
|
+
login: import("prop-types").Requireable<any>;
|
|
81
|
+
}>>;
|
|
82
|
+
icons: import("prop-types").Requireable<{
|
|
83
|
+
[x: string]: any;
|
|
84
|
+
}>;
|
|
85
|
+
mod: import("prop-types").Requireable<{
|
|
86
|
+
[x: string]: any;
|
|
87
|
+
}>;
|
|
88
|
+
courses: import("prop-types").Requireable<any[]>;
|
|
89
|
+
texts: import("prop-types").Requireable<{
|
|
90
|
+
[x: string]: any;
|
|
91
|
+
}>;
|
|
92
|
+
}>>;
|
|
72
93
|
};
|
|
73
94
|
};
|
|
74
95
|
export default MultiFilterPanel;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/molecule/multi-filter-panel/index.tsx"],"names":[],"mappings":";
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/molecule/multi-filter-panel/index.tsx"],"names":[],"mappings":";AAQA,OAAO,EAAC,gBAAgB,EAAC,MAAM,iCAAiC,CAAC;AAMjE,OAAkB,EAAC,qBAAqB,EAAqC,MAAM,cAAc,CAAC;AAiDlG,QAAA,MAAM,gBAAgB;YAAW,qBAAqB,WAAW,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6DhF,CAAC;AASF,eAAe,gBAAgB,CAAC"}
|
|
@@ -1,3 +1,5 @@
|
|
|
1
|
+
import _noop from "lodash/fp/noop";
|
|
2
|
+
import _getOr from "lodash/fp/getOr";
|
|
1
3
|
import _toString from "lodash/fp/toString";
|
|
2
4
|
import _flatMap from "lodash/fp/flatMap";
|
|
3
5
|
import _filter from "lodash/fp/filter";
|
|
@@ -5,6 +7,7 @@ import _pipe from "lodash/fp/pipe";
|
|
|
5
7
|
import _size from "lodash/fp/size";
|
|
6
8
|
import _map from "lodash/fp/map";
|
|
7
9
|
import React from 'react';
|
|
10
|
+
import { convert } from 'css-color-function';
|
|
8
11
|
import FilterChip from '../../organism/filter-chip';
|
|
9
12
|
import FilterCheckboxAndSearch from '../../organism/filter-checkbox-and-search';
|
|
10
13
|
import Title from '../../atom/title';
|
|
@@ -16,14 +19,11 @@ import { COLORS } from '../../variables/colors';
|
|
|
16
19
|
import FilterSwitch from '../../organism/filter-switch';
|
|
17
20
|
import style from './style.css';
|
|
18
21
|
import propTypes from './prop-types';
|
|
22
|
+
|
|
19
23
|
// @ts-expect-error convert is not recognized by the types
|
|
20
24
|
const uncappedMap = _map.convert({
|
|
21
25
|
cap: false
|
|
22
26
|
});
|
|
23
|
-
const CLEAR_ALL_BUTTON_STYLE = {
|
|
24
|
-
fontWeight: 'normal',
|
|
25
|
-
padding: 0
|
|
26
|
-
};
|
|
27
27
|
const FilterSeparator = /*#__PURE__*/React.createElement("div", {
|
|
28
28
|
className: style.filterSeparator
|
|
29
29
|
});
|
|
@@ -52,7 +52,7 @@ const buildAllSelectedFilterChips = (selectedFilters, onRemoveSelectedFilter) =>
|
|
|
52
52
|
label
|
|
53
53
|
} = filterItem;
|
|
54
54
|
function handleClick() {
|
|
55
|
-
return onRemoveSelectedFilter(
|
|
55
|
+
return onRemoveSelectedFilter(filterItem);
|
|
56
56
|
}
|
|
57
57
|
return /*#__PURE__*/React.createElement(Chip, {
|
|
58
58
|
key: label,
|
|
@@ -69,11 +69,15 @@ const buildAllSelectedFilterChips = (selectedFilters, onRemoveSelectedFilter) =>
|
|
|
69
69
|
}));
|
|
70
70
|
};
|
|
71
71
|
const MultiFilterPanel = (props, context) => {
|
|
72
|
+
const {
|
|
73
|
+
skin
|
|
74
|
+
} = context;
|
|
75
|
+
const primaryColor = _getOr(COLORS.cm_primary_blue, 'common.primary', skin);
|
|
72
76
|
const {
|
|
73
77
|
title,
|
|
74
78
|
onClearAll,
|
|
75
79
|
options,
|
|
76
|
-
onRemoveSelectedFilter =
|
|
80
|
+
onRemoveSelectedFilter = _noop
|
|
77
81
|
} = props;
|
|
78
82
|
const translate = GetTranslateFromContext(context);
|
|
79
83
|
const allSelectedFilters = _pipe(_map('options'), _flatMap('options'), _filter(filterOptions => filterOptions.selected || filterOptions.value === true))(options);
|
|
@@ -95,22 +99,31 @@ const MultiFilterPanel = (props, context) => {
|
|
|
95
99
|
}), hasSelectedFilters ? /*#__PURE__*/React.createElement(Tag, {
|
|
96
100
|
label: _toString(_size(allSelectedFilters)),
|
|
97
101
|
type: "info",
|
|
98
|
-
size: "S"
|
|
102
|
+
size: "S",
|
|
103
|
+
customStyle: {
|
|
104
|
+
color: primaryColor,
|
|
105
|
+
backgroundColor: convert(`color(${primaryColor} lightness(92%))`)
|
|
106
|
+
}
|
|
99
107
|
}) : null), hasSelectedFilters ? /*#__PURE__*/React.createElement("div", {
|
|
100
108
|
className: style.buttonContainer
|
|
101
109
|
}, /*#__PURE__*/React.createElement(ButtonLink, {
|
|
102
|
-
customStyle:
|
|
110
|
+
customStyle: {
|
|
111
|
+
fontWeight: 'normal',
|
|
112
|
+
padding: 0,
|
|
113
|
+
color: primaryColor
|
|
114
|
+
},
|
|
103
115
|
label: translate('clear_all'),
|
|
104
116
|
type: "text",
|
|
105
117
|
"data-name": "filters-all-clear-button",
|
|
106
118
|
"aria-label": "filters all clear button",
|
|
107
119
|
onClick: onClearAll,
|
|
108
120
|
hoverColor: COLORS.primary_600
|
|
109
|
-
})) : null),
|
|
121
|
+
})) : null), hasSelectedFilters ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", null, buildAllSelectedFilterChips(allSelectedFilters, onRemoveSelectedFilter)), FilterSeparator) : null, filters);
|
|
110
122
|
};
|
|
111
123
|
MultiFilterPanel.propTypes = process.env.NODE_ENV !== "production" ? propTypes : {};
|
|
112
124
|
MultiFilterPanel.contextTypes = {
|
|
113
|
-
translate: Provider.childContextTypes.translate
|
|
125
|
+
translate: Provider.childContextTypes.translate,
|
|
126
|
+
skin: Provider.childContextTypes.skin
|
|
114
127
|
};
|
|
115
128
|
export default MultiFilterPanel;
|
|
116
129
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":["React","FilterChip","FilterCheckboxAndSearch","Title","Tag","ButtonLink","Provider","GetTranslateFromContext","Chip","COLORS","FilterSwitch","style","propTypes","uncappedMap","_map","
|
|
1
|
+
{"version":3,"file":"index.js","names":["React","convert","FilterChip","FilterCheckboxAndSearch","Title","Tag","ButtonLink","Provider","GetTranslateFromContext","Chip","COLORS","FilterSwitch","style","propTypes","uncappedMap","_map","cap","FilterSeparator","createElement","className","filterSeparator","buildFilters","filterOptions","type","options","buildAllSelectedFilterChips","selectedFilters","onRemoveSelectedFilter","selectedFiltersContainer","map","filterItem","label","handleClick","key","onClick","text","textColor","neutral_500","backgroundColor","cm_grey_150","customIcon","customStyle","height","padding","MultiFilterPanel","props","context","skin","primaryColor","_getOr","cm_primary_blue","title","onClearAll","_noop","translate","allSelectedFilters","_pipe","_flatMap","_filter","selected","value","hasSelectedFilters","_size","filters","i","isLastItem","Fragment","header","titleContainer","titleSize","_toString","size","color","buttonContainer","fontWeight","hoverColor","primary_600","process","env","NODE_ENV","contextTypes","childContextTypes"],"sources":["../../../src/molecule/multi-filter-panel/index.tsx"],"sourcesContent":["import React from 'react';\nimport {map, size, pipe, filter, flatMap, toString, getOr, noop} from 'lodash/fp';\nimport {convert} from 'css-color-function';\nimport FilterChip from '../../organism/filter-chip';\nimport FilterCheckboxAndSearch from '../../organism/filter-checkbox-and-search';\nimport Title from '../../atom/title';\nimport Tag from '../../atom/tag';\nimport ButtonLink from '../../atom/button-link';\nimport {WebContextValues} from '../../atom/provider/web-context';\nimport Provider, {GetTranslateFromContext} from '../../atom/provider';\nimport Chip from '../../atom/chip';\nimport {COLORS} from '../../variables/colors';\nimport FilterSwitch from '../../organism/filter-switch';\nimport style from './style.css';\nimport propTypes, {MultiFilterPanelProps, FilterOptionsProps, SelectedFilter} from './prop-types';\n\n// @ts-expect-error convert is not recognized by the types\nconst uncappedMap = map.convert({cap: false});\n\nconst FilterSeparator = <div className={style.filterSeparator} />;\n\nconst buildFilters = (filterOptions: FilterOptionsProps) => {\n const {type, options} = filterOptions;\n switch (type) {\n case 'chip':\n return <FilterChip {...options} />;\n case 'checkbox':\n return <FilterCheckboxAndSearch {...options} />;\n case 'switch':\n return <FilterSwitch {...options} />;\n default:\n return null;\n }\n};\n\nconst buildAllSelectedFilterChips = (\n selectedFilters: SelectedFilter[],\n onRemoveSelectedFilter: (filterItem: SelectedFilter) => void\n) => {\n return (\n <div className={style.selectedFiltersContainer} data-testid=\"selected-filters-container\">\n {selectedFilters.map((filterItem: SelectedFilter) => {\n const {label} = filterItem;\n function handleClick() {\n return onRemoveSelectedFilter(filterItem);\n }\n\n return (\n <Chip\n key={label}\n onClick={handleClick}\n text={label}\n textColor={COLORS.neutral_500}\n backgroundColor={COLORS.cm_grey_150}\n customIcon={'xmark'}\n customStyle={{height: '28px', padding: '4px 8px'}}\n />\n );\n })}\n </div>\n );\n};\n\nconst MultiFilterPanel = (props: MultiFilterPanelProps, context: WebContextValues) => {\n const {skin} = context;\n const primaryColor = getOr(COLORS.cm_primary_blue, 'common.primary', skin);\n const {title, onClearAll, options, onRemoveSelectedFilter = noop} = props;\n const translate = GetTranslateFromContext(context);\n const allSelectedFilters: SelectedFilter[] = pipe(\n map('options'),\n flatMap('options'),\n filter(filterOptions => filterOptions.selected || filterOptions.value === true)\n )(options);\n const hasSelectedFilters = size(allSelectedFilters) > 0;\n const filters = uncappedMap((filterOptions: FilterOptionsProps, i: number) => {\n const isLastItem = i + 1 === size(options);\n\n return (\n <div key={i}>\n {buildFilters(filterOptions)}\n {isLastItem ? null : FilterSeparator}\n </div>\n );\n }, options);\n return (\n <>\n <div className={style.header}>\n <div className={style.titleContainer}>\n <Title title={title} type=\"form-group\" titleSize=\"standard-light-weight\" />\n {hasSelectedFilters ? (\n <Tag\n label={toString(size(allSelectedFilters))}\n type=\"info\"\n size=\"S\"\n customStyle={{\n color: primaryColor,\n backgroundColor: convert(`color(${primaryColor} lightness(92%))`)\n }}\n />\n ) : null}\n </div>\n {hasSelectedFilters ? (\n <div className={style.buttonContainer}>\n <ButtonLink\n customStyle={{fontWeight: 'normal', padding: 0, color: primaryColor}}\n label={translate('clear_all')}\n type=\"text\"\n data-name=\"filters-all-clear-button\"\n aria-label=\"filters all clear button\"\n onClick={onClearAll}\n hoverColor={COLORS.primary_600}\n />\n </div>\n ) : null}\n </div>\n {hasSelectedFilters ? (\n <>\n <div>{buildAllSelectedFilterChips(allSelectedFilters, onRemoveSelectedFilter)}</div>\n {FilterSeparator}\n </>\n ) : null}\n {filters}\n </>\n );\n};\n\nMultiFilterPanel.propTypes = propTypes;\n\nMultiFilterPanel.contextTypes = {\n translate: Provider.childContextTypes.translate,\n skin: Provider.childContextTypes.skin\n};\n\nexport default MultiFilterPanel;\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import PropTypes from 'prop-types';
|
|
2
|
-
import { FilterChipProps } from '../../organism/filter-chip/prop-types';
|
|
3
|
-
import { FilterCheckboxAndSearchProps } from '../../organism/filter-checkbox-and-search/props-types';
|
|
4
|
-
import { FilterSwitchProps } from '../../organism/filter-switch/prop-types';
|
|
2
|
+
import { FilterChipOptionsProps, FilterChipProps } from '../../organism/filter-chip/prop-types';
|
|
3
|
+
import { FilterCheckboxAndSearchOptions, FilterCheckboxAndSearchProps } from '../../organism/filter-checkbox-and-search/props-types';
|
|
4
|
+
import { FilterSwitchOptionsProps, FilterSwitchProps } from '../../organism/filter-switch/prop-types';
|
|
5
5
|
declare const propTypes: {
|
|
6
6
|
title: PropTypes.Requireable<string>;
|
|
7
7
|
onClearAll: PropTypes.Requireable<(...args: any[]) => any>;
|
|
@@ -79,9 +79,10 @@ export declare type OptionsSwitchProps = {
|
|
|
79
79
|
options: FilterSwitchProps;
|
|
80
80
|
};
|
|
81
81
|
export declare type FilterOptionsProps = OptionsChipProps | OptionsCheckboxProps | OptionsSwitchProps;
|
|
82
|
+
export declare type SelectedFilter = FilterChipOptionsProps | FilterSwitchOptionsProps | FilterCheckboxAndSearchOptions;
|
|
82
83
|
export declare type MultiFilterPanelProps = {
|
|
83
84
|
title: string;
|
|
84
|
-
onRemoveSelectedFilter?: (
|
|
85
|
+
onRemoveSelectedFilter?: (filterItem: SelectedFilter) => void;
|
|
85
86
|
onClearAll: () => void;
|
|
86
87
|
options: FilterOptionsProps[];
|
|
87
88
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"prop-types.d.ts","sourceRoot":"","sources":["../../../src/molecule/multi-filter-panel/prop-types.ts"],"names":[],"mappings":"AAAA,OAAO,SAAS,MAAM,YAAY,CAAC;AACnC,OAA4B,
|
|
1
|
+
{"version":3,"file":"prop-types.d.ts","sourceRoot":"","sources":["../../../src/molecule/multi-filter-panel/prop-types.ts"],"names":[],"mappings":"AAAA,OAAO,SAAS,MAAM,YAAY,CAAC;AACnC,OAA4B,EAC1B,sBAAsB,EACtB,eAAe,EAChB,MAAM,uCAAuC,CAAC;AAC/C,OAAyC,EACvC,8BAA8B,EAC9B,4BAA4B,EAC7B,MAAM,uDAAuD,CAAC;AAC/D,OAA8B,EAC5B,wBAAwB,EACxB,iBAAiB,EAClB,MAAM,yCAAyC,CAAC;AAEjD,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoBd,CAAC;AAEF,oBAAY,gBAAgB,GAAG;IAC7B,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,eAAe,CAAC;CAC1B,CAAC;AAEF,oBAAY,oBAAoB,GAAG;IACjC,IAAI,EAAE,UAAU,CAAC;IACjB,OAAO,EAAE,4BAA4B,CAAC;CACvC,CAAC;AAEF,oBAAY,kBAAkB,GAAG;IAC/B,IAAI,EAAE,QAAQ,CAAC;IACf,OAAO,EAAE,iBAAiB,CAAC;CAC5B,CAAC;AAEF,oBAAY,kBAAkB,GAAG,gBAAgB,GAAG,oBAAoB,GAAG,kBAAkB,CAAC;AAE9F,oBAAY,cAAc,GACtB,sBAAsB,GACtB,wBAAwB,GACxB,8BAA8B,CAAC;AAEnC,oBAAY,qBAAqB,GAAG;IAClC,KAAK,EAAE,MAAM,CAAC;IACd,sBAAsB,CAAC,EAAE,CAAC,UAAU,EAAE,cAAc,KAAK,IAAI,CAAC;IAC9D,UAAU,EAAE,MAAM,IAAI,CAAC;IACvB,OAAO,EAAE,kBAAkB,EAAE,CAAC;CAC/B,CAAC;AAEF,eAAe,SAAS,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"prop-types.js","names":["PropTypes","filterChipProptypes","filterCheckboxAndSearchProptypes","filterSwitchProptypes","propTypes","title","string","onClearAll","func","onRemoveSelectedFilter","options","arrayOf","oneOfType","shape","type","oneOf"],"sources":["../../../src/molecule/multi-filter-panel/prop-types.ts"],"sourcesContent":["import PropTypes from 'prop-types';\nimport filterChipProptypes, {FilterChipProps} from '../../organism/filter-chip/prop-types';\nimport filterCheckboxAndSearchProptypes, {\n FilterCheckboxAndSearchProps\n} from '../../organism/filter-checkbox-and-search/props-types';\nimport filterSwitchProptypes, {FilterSwitchProps} from '../../organism/filter-switch/prop-types';\n\nconst propTypes = {\n title: PropTypes.string,\n onClearAll: PropTypes.func,\n onRemoveSelectedFilter: PropTypes.func,\n options: PropTypes.arrayOf(\n PropTypes.oneOfType([\n PropTypes.shape({\n type: PropTypes.oneOf(['chip']),\n options: PropTypes.shape(filterChipProptypes)\n }),\n PropTypes.shape({\n type: PropTypes.oneOf(['checkbox']),\n options: PropTypes.shape(filterCheckboxAndSearchProptypes)\n }),\n PropTypes.shape({\n type: PropTypes.oneOf(['switch']),\n options: PropTypes.shape(filterSwitchProptypes)\n })\n ])\n )\n};\n\nexport type OptionsChipProps = {\n type: 'chip';\n options: FilterChipProps;\n};\n\nexport type OptionsCheckboxProps = {\n type: 'checkbox';\n options: FilterCheckboxAndSearchProps;\n};\n\nexport type OptionsSwitchProps = {\n type: 'switch';\n options: FilterSwitchProps;\n};\n\nexport type FilterOptionsProps = OptionsChipProps | OptionsCheckboxProps | OptionsSwitchProps;\n\nexport type MultiFilterPanelProps = {\n title: string;\n onRemoveSelectedFilter?: (
|
|
1
|
+
{"version":3,"file":"prop-types.js","names":["PropTypes","filterChipProptypes","filterCheckboxAndSearchProptypes","filterSwitchProptypes","propTypes","title","string","onClearAll","func","onRemoveSelectedFilter","options","arrayOf","oneOfType","shape","type","oneOf"],"sources":["../../../src/molecule/multi-filter-panel/prop-types.ts"],"sourcesContent":["import PropTypes from 'prop-types';\nimport filterChipProptypes, {\n FilterChipOptionsProps,\n FilterChipProps\n} from '../../organism/filter-chip/prop-types';\nimport filterCheckboxAndSearchProptypes, {\n FilterCheckboxAndSearchOptions,\n FilterCheckboxAndSearchProps\n} from '../../organism/filter-checkbox-and-search/props-types';\nimport filterSwitchProptypes, {\n FilterSwitchOptionsProps,\n FilterSwitchProps\n} from '../../organism/filter-switch/prop-types';\n\nconst propTypes = {\n title: PropTypes.string,\n onClearAll: PropTypes.func,\n onRemoveSelectedFilter: PropTypes.func,\n options: PropTypes.arrayOf(\n PropTypes.oneOfType([\n PropTypes.shape({\n type: PropTypes.oneOf(['chip']),\n options: PropTypes.shape(filterChipProptypes)\n }),\n PropTypes.shape({\n type: PropTypes.oneOf(['checkbox']),\n options: PropTypes.shape(filterCheckboxAndSearchProptypes)\n }),\n PropTypes.shape({\n type: PropTypes.oneOf(['switch']),\n options: PropTypes.shape(filterSwitchProptypes)\n })\n ])\n )\n};\n\nexport type OptionsChipProps = {\n type: 'chip';\n options: FilterChipProps;\n};\n\nexport type OptionsCheckboxProps = {\n type: 'checkbox';\n options: FilterCheckboxAndSearchProps;\n};\n\nexport type OptionsSwitchProps = {\n type: 'switch';\n options: FilterSwitchProps;\n};\n\nexport type FilterOptionsProps = OptionsChipProps | OptionsCheckboxProps | OptionsSwitchProps;\n\nexport type SelectedFilter =\n | FilterChipOptionsProps\n | FilterSwitchOptionsProps\n | FilterCheckboxAndSearchOptions;\n\nexport type MultiFilterPanelProps = {\n title: string;\n onRemoveSelectedFilter?: (filterItem: SelectedFilter) => void;\n onClearAll: () => void;\n options: FilterOptionsProps[];\n};\n\nexport default propTypes;\n"],"mappings":"AAAA,OAAOA,SAAS,MAAM,YAAY;AAClC,OAAOC,mBAAmB,MAGnB,uCAAuC;AAC9C,OAAOC,gCAAgC,MAGhC,uDAAuD;AAC9D,OAAOC,qBAAqB,MAGrB,yCAAyC;AAEhD,MAAMC,SAAS,GAAG;EAChBC,KAAK,EAAEL,SAAS,CAACM,MAAM;EACvBC,UAAU,EAAEP,SAAS,CAACQ,IAAI;EAC1BC,sBAAsB,EAAET,SAAS,CAACQ,IAAI;EACtCE,OAAO,EAAEV,SAAS,CAACW,OAAO,CACxBX,SAAS,CAACY,SAAS,CAAC,CAClBZ,SAAS,CAACa,KAAK,CAAC;IACdC,IAAI,EAAEd,SAAS,CAACe,KAAK,CAAC,CAAC,MAAM,CAAC,CAAC;IAC/BL,OAAO,EAAEV,SAAS,CAACa,KAAK,CAACZ,mBAAmB;EAC9C,CAAC,CAAC,EACFD,SAAS,CAACa,KAAK,CAAC;IACdC,IAAI,EAAEd,SAAS,CAACe,KAAK,CAAC,CAAC,UAAU,CAAC,CAAC;IACnCL,OAAO,EAAEV,SAAS,CAACa,KAAK,CAACX,gCAAgC;EAC3D,CAAC,CAAC,EACFF,SAAS,CAACa,KAAK,CAAC;IACdC,IAAI,EAAEd,SAAS,CAACe,KAAK,CAAC,CAAC,QAAQ,CAAC,CAAC;IACjCL,OAAO,EAAEV,SAAS,CAACa,KAAK,CAACV,qBAAqB;EAChD,CAAC,CAAC,CACH,CACH;AACF,CAAC;AA+BD,eAAeC,SAAS","ignoreList":[]}
|
|
@@ -175,7 +175,9 @@ const QuickFilters = ({
|
|
|
175
175
|
wrapperSize: 20
|
|
176
176
|
},
|
|
177
177
|
"aria-label": ariaLabel
|
|
178
|
-
}), /*#__PURE__*/React.createElement("span",
|
|
178
|
+
}), /*#__PURE__*/React.createElement("span", {
|
|
179
|
+
className: style.filterLabel
|
|
180
|
+
}, label), /*#__PURE__*/React.createElement("div", {
|
|
179
181
|
className: style.bar,
|
|
180
182
|
style: {
|
|
181
183
|
background: primarySkinColor
|