@coorpacademy/components 11.40.14-alpha.9 → 11.40.15
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 +1 -24
- package/es/atom/checkbox-with-title/index.d.ts.map +1 -1
- package/es/atom/checkbox-with-title/index.js +2 -16
- 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 +1 -24
- package/es/atom/input-switch/index.d.ts.map +1 -1
- package/es/atom/input-switch/index.js +2 -16
- package/es/atom/input-switch/index.js.map +1 -1
- package/es/atom/range/index.d.ts +3 -33
- package/es/atom/range/index.d.ts.map +1 -1
- package/es/atom/range/index.js +20 -88
- package/es/atom/range/index.js.map +1 -1
- package/es/atom/range/style.css +0 -38
- package/es/molecule/multi-filter-panel/index.d.ts +0 -41
- package/es/molecule/multi-filter-panel/index.d.ts.map +1 -1
- package/es/molecule/multi-filter-panel/index.js +13 -28
- package/es/molecule/multi-filter-panel/index.js.map +1 -1
- package/es/molecule/multi-filter-panel/prop-types.d.ts +5 -31
- package/es/molecule/multi-filter-panel/prop-types.d.ts.map +1 -1
- package/es/molecule/multi-filter-panel/prop-types.js +0 -4
- package/es/molecule/multi-filter-panel/prop-types.js.map +1 -1
- package/es/molecule/questions/question-range/index.d.ts +1 -4
- package/es/molecule/quick-filters/index.js +1 -3
- package/es/molecule/quick-filters/index.js.map +1 -1
- package/es/molecule/quick-filters/style.css +0 -2
- package/es/organism/content-skill-modal/index.d.ts +0 -20
- package/es/organism/content-skill-modal/index.d.ts.map +1 -1
- package/es/organism/content-skill-modal/types.d.ts +0 -20
- package/es/organism/content-skill-modal/types.d.ts.map +1 -1
- package/es/organism/filter-checkbox-and-search/index.d.ts +0 -21
- package/es/organism/filter-checkbox-and-search/index.d.ts.map +1 -1
- package/es/organism/filter-checkbox-and-search/index.js +2 -13
- package/es/organism/filter-checkbox-and-search/index.js.map +1 -1
- package/es/organism/filter-chip/index.d.ts +0 -21
- package/es/organism/filter-chip/index.d.ts.map +1 -1
- package/es/organism/filter-chip/index.js +2 -14
- package/es/organism/filter-chip/index.js.map +1 -1
- package/es/organism/filter-switch/index.d.ts +0 -22
- package/es/organism/filter-switch/index.d.ts.map +1 -1
- package/es/organism/filter-switch/index.js +3 -18
- package/es/organism/filter-switch/index.js.map +1 -1
- package/es/organism/filter-switch/prop-types.d.ts +0 -2
- package/es/organism/filter-switch/prop-types.d.ts.map +1 -1
- package/es/organism/filter-switch/prop-types.js +1 -2
- package/es/organism/filter-switch/prop-types.js.map +1 -1
- package/es/template/back-office/brand-update/index.d.ts +0 -20
- package/es/template/common/search-page/index.d.ts +0 -36
- package/es/template/common/search-page/index.d.ts.map +1 -1
- package/es/template/common/search-page/index.js +6 -45
- package/es/template/common/search-page/index.js.map +1 -1
- package/es/template/common/search-page/style.css +1 -27
- package/es/variables/colors.css +0 -1
- package/lib/atom/checkbox-with-title/index.d.ts +1 -24
- package/lib/atom/checkbox-with-title/index.d.ts.map +1 -1
- package/lib/atom/checkbox-with-title/index.js +2 -16
- 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 +1 -24
- package/lib/atom/input-switch/index.d.ts.map +1 -1
- package/lib/atom/input-switch/index.js +2 -16
- package/lib/atom/input-switch/index.js.map +1 -1
- package/lib/atom/range/index.d.ts +3 -33
- package/lib/atom/range/index.d.ts.map +1 -1
- package/lib/atom/range/index.js +20 -88
- package/lib/atom/range/index.js.map +1 -1
- package/lib/atom/range/style.css +0 -38
- package/lib/molecule/multi-filter-panel/index.d.ts +0 -41
- package/lib/molecule/multi-filter-panel/index.d.ts.map +1 -1
- package/lib/molecule/multi-filter-panel/index.js +13 -28
- package/lib/molecule/multi-filter-panel/index.js.map +1 -1
- package/lib/molecule/multi-filter-panel/prop-types.d.ts +5 -31
- package/lib/molecule/multi-filter-panel/prop-types.d.ts.map +1 -1
- package/lib/molecule/multi-filter-panel/prop-types.js +0 -4
- package/lib/molecule/multi-filter-panel/prop-types.js.map +1 -1
- package/lib/molecule/questions/question-range/index.d.ts +1 -4
- package/lib/molecule/quick-filters/index.js +1 -3
- package/lib/molecule/quick-filters/index.js.map +1 -1
- package/lib/molecule/quick-filters/style.css +0 -2
- package/lib/organism/content-skill-modal/index.d.ts +0 -20
- package/lib/organism/content-skill-modal/index.d.ts.map +1 -1
- package/lib/organism/content-skill-modal/types.d.ts +0 -20
- package/lib/organism/content-skill-modal/types.d.ts.map +1 -1
- package/lib/organism/filter-checkbox-and-search/index.d.ts +0 -21
- package/lib/organism/filter-checkbox-and-search/index.d.ts.map +1 -1
- package/lib/organism/filter-checkbox-and-search/index.js +2 -13
- package/lib/organism/filter-checkbox-and-search/index.js.map +1 -1
- package/lib/organism/filter-chip/index.d.ts +0 -21
- package/lib/organism/filter-chip/index.d.ts.map +1 -1
- package/lib/organism/filter-chip/index.js +2 -14
- package/lib/organism/filter-chip/index.js.map +1 -1
- package/lib/organism/filter-switch/index.d.ts +0 -22
- package/lib/organism/filter-switch/index.d.ts.map +1 -1
- package/lib/organism/filter-switch/index.js +3 -18
- package/lib/organism/filter-switch/index.js.map +1 -1
- package/lib/organism/filter-switch/prop-types.d.ts +0 -2
- package/lib/organism/filter-switch/prop-types.d.ts.map +1 -1
- package/lib/organism/filter-switch/prop-types.js +1 -2
- package/lib/organism/filter-switch/prop-types.js.map +1 -1
- package/lib/template/back-office/brand-update/index.d.ts +0 -20
- package/lib/template/common/search-page/index.d.ts +0 -36
- package/lib/template/common/search-page/index.d.ts.map +1 -1
- package/lib/template/common/search-page/index.js +6 -45
- package/lib/template/common/search-page/index.js.map +1 -1
- package/lib/template/common/search-page/style.css +1 -27
- package/lib/variables/colors.css +0 -1
- package/locales/bs/global.json +4 -1
- package/locales/cs/global.json +4 -1
- package/locales/de/global.json +4 -1
- package/locales/en/global.json +3 -0
- package/locales/es/global.json +4 -1
- package/locales/et/global.json +4 -1
- package/locales/fi/global.json +4 -1
- package/locales/fr/global.json +4 -1
- package/locales/hr/global.json +4 -1
- package/locales/hu/global.json +4 -1
- package/locales/hy/global.json +4 -1
- package/locales/it/global.json +4 -1
- package/locales/ja/global.json +4 -1
- package/locales/ko/global.json +4 -1
- package/locales/lt/global.json +4 -1
- package/locales/nl/global.json +4 -1
- package/locales/pl/global.json +4 -1
- package/locales/pt/global.json +4 -1
- package/locales/ro/global.json +4 -1
- package/locales/ru/global.json +4 -1
- package/locales/sk/global.json +4 -1
- package/locales/sl/global.json +4 -1
- package/locales/sv/global.json +3 -0
- package/locales/tl/global.json +4 -1
- package/locales/tr/global.json +3 -0
- package/locales/uk/global.json +4 -1
- package/locales/vi/global.json +4 -1
- package/locales/zh/global.json +3 -0
- package/locales/zh_TW/global.json +3 -0
- package/package.json +2 -2
- package/es/organism/filter-range/index.d.ts +0 -28
- package/es/organism/filter-range/index.d.ts.map +0 -1
- package/es/organism/filter-range/index.js +0 -69
- package/es/organism/filter-range/index.js.map +0 -1
- package/es/organism/filter-range/prop-types.d.ts +0 -38
- package/es/organism/filter-range/prop-types.d.ts.map +0 -1
- package/es/organism/filter-range/prop-types.js +0 -20
- package/es/organism/filter-range/prop-types.js.map +0 -1
- package/es/organism/filter-range/style.css +0 -15
- package/lib/organism/filter-range/index.d.ts +0 -28
- package/lib/organism/filter-range/index.d.ts.map +0 -1
- package/lib/organism/filter-range/index.js +0 -76
- package/lib/organism/filter-range/index.js.map +0 -1
- package/lib/organism/filter-range/prop-types.d.ts +0 -38
- package/lib/organism/filter-range/prop-types.d.ts.map +0 -1
- package/lib/organism/filter-range/prop-types.js +0 -25
- package/lib/organism/filter-range/prop-types.js.map +0 -1
- package/lib/organism/filter-range/style.css +0 -15
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
export default CheckboxWithTitle;
|
|
2
|
-
declare function CheckboxWithTitle(props: any
|
|
2
|
+
declare function CheckboxWithTitle(props: any): JSX.Element;
|
|
3
3
|
declare namespace CheckboxWithTitle {
|
|
4
4
|
const propTypes: {
|
|
5
5
|
title: PropTypes.Requireable<string>;
|
|
@@ -17,29 +17,6 @@ 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
|
-
}
|
|
43
20
|
}
|
|
44
21
|
import PropTypes from "prop-types";
|
|
45
22
|
//# 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":";AAQA,4DA0DC"}
|
|
@@ -1,18 +1,15 @@
|
|
|
1
1
|
import _uniqueId from "lodash/fp/uniqueId";
|
|
2
2
|
import _noop from "lodash/fp/noop";
|
|
3
|
-
import _getOr from "lodash/fp/getOr";
|
|
4
3
|
import React, { useMemo } from 'react';
|
|
5
4
|
import PropTypes from 'prop-types';
|
|
6
5
|
import FaIcon from '../icon';
|
|
7
|
-
import { COLORS } from '../../variables/colors';
|
|
8
|
-
import Provider from '../provider';
|
|
9
6
|
import style from './style.css';
|
|
10
7
|
const DEFAULT_ICON_STYLE = {
|
|
11
8
|
padding: '0',
|
|
12
9
|
width: '20px',
|
|
13
10
|
height: '20px'
|
|
14
11
|
};
|
|
15
|
-
const CheckboxWithTitle =
|
|
12
|
+
const CheckboxWithTitle = props => {
|
|
16
13
|
const {
|
|
17
14
|
title,
|
|
18
15
|
name,
|
|
@@ -27,10 +24,6 @@ const CheckboxWithTitle = (props, context) => {
|
|
|
27
24
|
},
|
|
28
25
|
customStyle = {}
|
|
29
26
|
} = props;
|
|
30
|
-
const {
|
|
31
|
-
skin
|
|
32
|
-
} = context;
|
|
33
|
-
const primaryColor = _getOr(COLORS.cm_primary_blue, 'common.primary', skin);
|
|
34
27
|
const {
|
|
35
28
|
iconName,
|
|
36
29
|
iconColor,
|
|
@@ -55,11 +48,7 @@ const CheckboxWithTitle = (props, context) => {
|
|
|
55
48
|
"data-name": dataName,
|
|
56
49
|
"aria-label": ariaLabel
|
|
57
50
|
}), /*#__PURE__*/React.createElement("div", {
|
|
58
|
-
className: style.label
|
|
59
|
-
style: checked ? {
|
|
60
|
-
background: primaryColor,
|
|
61
|
-
borderColor: primaryColor
|
|
62
|
-
} : null
|
|
51
|
+
className: style.label
|
|
63
52
|
}, checked ? /*#__PURE__*/React.createElement(FaIcon, {
|
|
64
53
|
className: style.icon,
|
|
65
54
|
iconName: iconName,
|
|
@@ -93,8 +82,5 @@ CheckboxWithTitle.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
|
93
82
|
}),
|
|
94
83
|
customStyle: PropTypes.objectOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number]))
|
|
95
84
|
} : {};
|
|
96
|
-
CheckboxWithTitle.contextTypes = {
|
|
97
|
-
skin: Provider.childContextTypes.skin
|
|
98
|
-
};
|
|
99
85
|
export default CheckboxWithTitle;
|
|
100
86
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":["React","useMemo","PropTypes","FaIcon","
|
|
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 className={style.label}>\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};\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,6DAuEC"}
|
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 get from 'lodash/fp/get';
|
|
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 = DEFAULT_BACKGROUND_COLOR,
|
|
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 = get('common.primary', skin);
|
|
37
|
+
const selectedBgColor = backgroundColor === 'skin' && skinColor ? skinColor : backgroundColor;
|
|
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","get","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 get from 'lodash/fp/get';\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 = DEFAULT_BACKGROUND_COLOR,\n customStyle\n } = props;\n const {skin} = context;\n const skinColor = get('common.primary', skin);\n const selectedBgColor = backgroundColor === 'skin' && skinColor ? skinColor : backgroundColor;\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
|
|
2
|
+
declare function InputSwitch(props: any): JSX.Element;
|
|
3
3
|
declare namespace InputSwitch {
|
|
4
4
|
const propTypes: {
|
|
5
5
|
title: PropTypes.Requireable<string>;
|
|
@@ -19,29 +19,6 @@ 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
|
-
}
|
|
45
22
|
}
|
|
46
23
|
import PropTypes from "prop-types";
|
|
47
24
|
//# 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":";AAQA,sDAmGC"}
|
|
@@ -1,16 +1,13 @@
|
|
|
1
1
|
import _uniqueId from "lodash/fp/uniqueId";
|
|
2
2
|
import _noop from "lodash/fp/noop";
|
|
3
|
-
import _getOr from "lodash/fp/getOr";
|
|
4
3
|
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); }
|
|
5
4
|
import React, { useMemo } from 'react';
|
|
6
5
|
import PropTypes from 'prop-types';
|
|
7
6
|
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
|
|
8
7
|
import classNames from 'classnames';
|
|
9
8
|
import getClassState from '../../util/get-class-state';
|
|
10
|
-
import { COLORS } from '../../variables/colors';
|
|
11
|
-
import Provider from '../provider';
|
|
12
9
|
import style from './style.css';
|
|
13
|
-
const InputSwitch =
|
|
10
|
+
const InputSwitch = props => {
|
|
14
11
|
const {
|
|
15
12
|
title,
|
|
16
13
|
name,
|
|
@@ -29,10 +26,6 @@ const InputSwitch = (props, context) => {
|
|
|
29
26
|
'aria-label': ariaLabel,
|
|
30
27
|
icon
|
|
31
28
|
} = props;
|
|
32
|
-
const {
|
|
33
|
-
skin
|
|
34
|
-
} = context;
|
|
35
|
-
const primaryColor = _getOr(COLORS.cm_primary_blue, 'common.primary', skin);
|
|
36
29
|
const idSwitch = id || _uniqueId('input-switch-');
|
|
37
30
|
const isDisabled = disabled ? 'disabled' : '';
|
|
38
31
|
const handleChange = useMemo(() => e => onChange(e.target.checked), [onChange]);
|
|
@@ -104,11 +97,7 @@ const InputSwitch = (props, context) => {
|
|
|
104
97
|
"data-name": "input-switch-label",
|
|
105
98
|
tabIndex: 0,
|
|
106
99
|
"aria-label": ariaLabel,
|
|
107
|
-
title: ariaLabel
|
|
108
|
-
style: value ? {
|
|
109
|
-
background: primaryColor,
|
|
110
|
-
borderColor: primaryColor
|
|
111
|
-
} : null
|
|
100
|
+
title: ariaLabel
|
|
112
101
|
}))), /*#__PURE__*/React.createElement("div", {
|
|
113
102
|
className: !details ? style.alignedTextContainer : null
|
|
114
103
|
}, titlePosition === 'right' ? titleView : null, details ? /*#__PURE__*/React.createElement("div", {
|
|
@@ -133,8 +122,5 @@ InputSwitch.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
|
133
122
|
requiredSelection: PropTypes.bool,
|
|
134
123
|
icon: PropTypes.string
|
|
135
124
|
} : {};
|
|
136
|
-
InputSwitch.contextTypes = {
|
|
137
|
-
skin: Provider.childContextTypes.skin
|
|
138
|
-
};
|
|
139
125
|
export default InputSwitch;
|
|
140
126
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":["React","useMemo","PropTypes","FontAwesomeIcon","classNames","getClassState","
|
|
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\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 />\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};\nexport default InputSwitch;\n"],"mappings":";;;AAAA,OAAOA,KAAK,IAAGC,OAAO,QAAO,OAAO;AACpC,OAAOC,SAAS,MAAM,YAAY;AAElC,SAAQC,eAAe,QAAO,gCAAgC;AAC9D,OAAOC,UAAU,MAAM,YAAY;AACnC,OAAOC,aAAa,MAAM,4BAA4B;AACtD,OAAOC,KAAK,MAAM,aAAa;AAE/B,MAAMC,WAAW,GAAGC,KAAK,IAAI;EAC3B,MAAM;IACJC,KAAK;IACLC,IAAI;IACJC,EAAE;IACFC,KAAK;IACLC,QAAQ;IACRC,QAAQ,GAAAC,KAAO;IACfC,WAAW;IACXC,QAAQ,GAAG,KAAK;IAChBC,KAAK,GAAG,SAAS;IACjBC,aAAa,GAAG,MAAM;IACtBC,OAAO,GAAG,EAAE;IACZC,iBAAiB,GAAG,KAAK;IACzB,WAAW,EAAEC,QAAQ;IACrB,iBAAiB,EAAEC,cAAc;IACjC,YAAY,EAAEC,SAAS;IACvBC;EACF,CAAC,GAAGjB,KAAK;EAET,MAAMkB,QAAQ,GAAGf,EAAE,IAAIgB,SAAA,CAAS,eAAe,CAAC;EAChD,MAAMC,UAAU,GAAGf,QAAQ,GAAG,UAAU,GAAG,EAAE;EAC7C,MAAMgB,YAAY,GAAG5B,OAAO,CAAC,MAAM6B,CAAC,IAAIhB,QAAQ,CAACgB,CAAC,CAACC,MAAM,CAACC,OAAO,CAAC,EAAE,CAAClB,QAAQ,CAAC,CAAC;EAC/E,MAAMmB,SAAS,GAAGxB,KAAK,gBACrBT,KAAA,CAAAkC,aAAA;IACEC,SAAS,EAAE/B,UAAU,CACnBqB,IAAI,GAAGnB,KAAK,CAAC8B,cAAc,GAAG,IAAI,EAClClB,KAAK,KAAK,SAAS,GAAGZ,KAAK,CAAC+B,qBAAqB,GAAG,IACtD;EAAE,GAEDZ,IAAI,gBAAGzB,KAAA,CAAAkC,aAAA,CAAC/B,eAAe;IAACsB,IAAI,EAAEA,IAAK;IAACU,SAAS,EAAE7B,KAAK,CAACmB;EAAK,CAAE,CAAC,GAAG,IAAI,eACrEzB,KAAA,CAAAkC,aAAA;IAAMvB,EAAE,EAAE,cAAcW,QAAQ,EAAG;IAACa,SAAS,EAAE7B,KAAK,CAACG;EAAM,GACxDA,KACG,CACH,CAAC,GACJ,IAAI;EAER,MAAM6B,eAAe,GAAGtB,WAAW,gBACjChB,KAAA,CAAAkC,aAAA;IAAKC,SAAS,EAAE7B,KAAK,CAACU;EAAY,GAAEA,WAAiB,CAAC,GACpD,IAAI;EAER,MAAMuB,QAAQ,GAAGA,CAAA,KAAM;IACrB,QAAQrB,KAAK;MACX,KAAK,cAAc;QACjB,OAAO;UACLsB,YAAY,EAAElC,KAAK,CAACmC,YAAY;UAChCC,aAAa,EAAEpC,KAAK,CAACqC;QACvB,CAAC;MACH,KAAK,SAAS;QACZ,OAAO;UACLH,YAAY,EAAElC,KAAK,CAACsC,OAAO;UAC3BF,aAAa,EAAEpC,KAAK,CAACuC;QACvB,CAAC;MACH,KAAK,MAAM;QACT,OAAO;UACLL,YAAY,EAAElC,KAAK,CAACwC,cAAc;UAClCJ,aAAa,EAAEpC,KAAK,CAACqC;QACvB,CAAC;MACH;QACE,OAAO;UAACH,YAAY,EAAElC,KAAK,CAACyC,YAAY;UAAEL,aAAa,EAAEpC,KAAK,CAACW;QAAQ,CAAC;IAC5E;EACF,CAAC;EACD,MAAM;IAACuB,YAAY;IAAEE;EAAa,CAAC,GAAGH,QAAQ,CAAC,CAAC;EAChD,MAAMJ,SAAS,GAAG9B,aAAa,CAACmC,YAAY,EAAEE,aAAa,EAAE,IAAI,EAAEzB,QAAQ,CAAC;EAE5E,oBACEjB,KAAA,CAAAkC,aAAA;IAAKC,SAAS,EAAEA,SAAU;IAAC,aAAW,gBAAgBjB,KAAK,GAAGI,QAAQ;EAAG,GACtEH,aAAa,KAAK,MAAM,GAAGc,SAAS,GAAG,IAAI,eAC5CjC,KAAA,CAAAkC,aAAA;IAAKC,SAAS,EAAEd,iBAAiB,GAAGf,KAAK,CAACe,iBAAiB,GAAG;EAAK,gBACjErB,KAAA,CAAAkC,aAAA;IAAKC,SAAS,EAAE7B,KAAK,CAAC0C;EAAmB,gBACvChD,KAAA,CAAAkC,aAAA,UAAAe,QAAA,KACO1B,cAAc,GAAG;IAAC,iBAAiB,EAAEA;EAAc,CAAC,GAAG,CAAC,CAAC,EACzDd,KAAK,GAAG;IAAC,iBAAiB,EAAE,cAAca,QAAQ;EAAE,CAAC,GAAG,CAAC,CAAC,EAC1DE,SAAS,IAAI,CAACD,cAAc,IAAI,CAACd,KAAK,GAAG;IAAC,YAAY,EAAEe;EAAS,CAAC,GAAG,CAAC,CAAC;IAC5E0B,IAAI,EAAC,UAAU;IACfvC,EAAE,EAAEe,QAAS;IACbhB,IAAI,EAAEA,IAAK;IACXI,QAAQ,EAAEe,YAAa;IACvBG,OAAO,EAAEpB,KAAM;IACfC,QAAQ,EAAEe,UAAW;IACrBO,SAAS,EAAE7B,KAAK,CAAC6C,QAAS;IAC1B,mBAAiB5B;EAAe,EACjC,CAAC,eACFvB,KAAA,CAAAkC,aAAA;IACEkB,OAAO,EAAE1B,QAAS;IAClB,aAAU,oBAAoB;IAC9B2B,QAAQ,EAAE,CAAE;IACZ,cAAY7B,SAAU;IACtBf,KAAK,EAAEe;EAAU,CAClB,CACE,CACF,CAAC,eACNxB,KAAA,CAAAkC,aAAA;IAAKC,SAAS,EAAE,CAACf,OAAO,GAAGd,KAAK,CAACgD,oBAAoB,GAAG;EAAK,GAC1DnC,aAAa,KAAK,OAAO,GAAGc,SAAS,GAAG,IAAI,EAC5Cb,OAAO,gBAAGpB,KAAA,CAAAkC,aAAA;IAAKC,SAAS,EAAE7B,KAAK,CAACiD;EAAW,GAAEnC,OAAa,CAAC,GAAG,IAC5D,CAAC,EACLkB,eACE,CAAC;AAEV,CAAC;AAED/B,WAAW,CAACiD,SAAS,GAAAC,OAAA,CAAAC,GAAA,CAAAC,QAAA,oBAAG;EACtBlD,KAAK,EAAEP,SAAS,CAAC0D,MAAM;EACvBlD,IAAI,EAAER,SAAS,CAAC0D,MAAM;EACtBjD,EAAE,EAAET,SAAS,CAAC0D,MAAM;EACpBhD,KAAK,EAAEV,SAAS,CAAC2D,IAAI;EACrBhD,QAAQ,EAAEX,SAAS,CAAC2D,IAAI;EACxB/C,QAAQ,EAAEZ,SAAS,CAAC4D,IAAI;EACxB9C,WAAW,EAAEd,SAAS,CAAC0D,MAAM;EAC7B,iBAAiB,EAAE1D,SAAS,CAAC0D,MAAM;EACnC,YAAY,EAAE1D,SAAS,CAAC0D,MAAM;EAC9B3C,QAAQ,EAAEf,SAAS,CAAC2D,IAAI;EACxB1C,aAAa,EAAEjB,SAAS,CAAC6D,KAAK,CAAC,CAAC,OAAO,EAAE,MAAM,CAAC,CAAC;EACjD7C,KAAK,EAAEhB,SAAS,CAAC6D,KAAK,CAAC,CAAC,SAAS,EAAE,cAAc,EAAE,MAAM,EAAE,SAAS,CAAC,CAAC;EACtE3C,OAAO,EAAElB,SAAS,CAAC0D,MAAM;EACzB,WAAW,EAAE1D,SAAS,CAAC0D,MAAM;EAC7BvC,iBAAiB,EAAEnB,SAAS,CAAC2D,IAAI;EACjCpC,IAAI,EAAEvB,SAAS,CAAC0D;AAClB,CAAC;AACD,eAAerD,WAAW","ignoreList":[]}
|
package/es/atom/range/index.d.ts
CHANGED
|
@@ -4,12 +4,6 @@ declare class Range extends React.Component<any, any, any> {
|
|
|
4
4
|
onChange: PropTypes.Requireable<(...args: any[]) => any>;
|
|
5
5
|
onChangeEnd: PropTypes.Requireable<(...args: any[]) => any>;
|
|
6
6
|
multi: PropTypes.Requireable<boolean>;
|
|
7
|
-
theme: PropTypes.Requireable<string>;
|
|
8
|
-
min: PropTypes.Requireable<number>;
|
|
9
|
-
max: PropTypes.Requireable<number>;
|
|
10
|
-
step: PropTypes.Requireable<number>;
|
|
11
|
-
minLabel: PropTypes.Requireable<string>;
|
|
12
|
-
maxLabel: PropTypes.Requireable<string>;
|
|
13
7
|
HammerForTestingMin: PropTypes.Requireable<PropTypes.InferProps<{
|
|
14
8
|
on: PropTypes.Requireable<(...args: any[]) => any>;
|
|
15
9
|
destroy: PropTypes.Requireable<(...args: any[]) => any>;
|
|
@@ -20,39 +14,17 @@ declare class Range extends React.Component<any, any, any> {
|
|
|
20
14
|
destroy: PropTypes.Requireable<(...args: any[]) => any>;
|
|
21
15
|
stop: PropTypes.Requireable<(...args: any[]) => any>;
|
|
22
16
|
}>>;
|
|
23
|
-
|
|
24
|
-
static contextTypes: {
|
|
25
|
-
skin: PropTypes.Requireable<PropTypes.InferProps<{
|
|
26
|
-
common: PropTypes.Requireable<{
|
|
27
|
-
[x: string]: any;
|
|
28
|
-
}>;
|
|
29
|
-
images: PropTypes.Requireable<PropTypes.InferProps<{
|
|
30
|
-
'logo-mobile': PropTypes.Requireable<any>;
|
|
31
|
-
logo: PropTypes.Requireable<any>;
|
|
32
|
-
'logo-email': PropTypes.Requireable<any>;
|
|
33
|
-
login: PropTypes.Requireable<any>;
|
|
34
|
-
}>>;
|
|
35
|
-
icons: PropTypes.Requireable<{
|
|
36
|
-
[x: string]: any;
|
|
37
|
-
}>;
|
|
38
|
-
mod: PropTypes.Requireable<{
|
|
39
|
-
[x: string]: any;
|
|
40
|
-
}>;
|
|
41
|
-
courses: PropTypes.Requireable<any[]>;
|
|
42
|
-
texts: PropTypes.Requireable<{
|
|
43
|
-
[x: string]: any;
|
|
44
|
-
}>;
|
|
45
|
-
}>>;
|
|
17
|
+
value: PropTypes.Requireable<NonNullable<number | (number | null | undefined)[] | null | undefined>>;
|
|
46
18
|
};
|
|
47
19
|
static getDerivedStateFromProps(props: any, state: any): {
|
|
48
20
|
multi: any;
|
|
49
|
-
value:
|
|
21
|
+
value: any;
|
|
50
22
|
} | null;
|
|
51
23
|
constructor(props: any, context: any);
|
|
52
24
|
state: {
|
|
53
25
|
pending: boolean;
|
|
54
26
|
multi: any;
|
|
55
|
-
value:
|
|
27
|
+
value: any;
|
|
56
28
|
};
|
|
57
29
|
handleClick(e: any): void;
|
|
58
30
|
setRefTrack(track: any): void;
|
|
@@ -61,8 +33,6 @@ declare class Range extends React.Component<any, any, any> {
|
|
|
61
33
|
handleMinChangeEnd(e: any): void;
|
|
62
34
|
handleMaxChangeEnd(e: any): void;
|
|
63
35
|
track: any;
|
|
64
|
-
normalizedToActual(normalizedValue: any): any;
|
|
65
|
-
roundToStep(value: any): number;
|
|
66
36
|
handleChange(value: any, valueIndex: any, pending: any): void;
|
|
67
37
|
triggerChange(newValues: any, pending: any): any;
|
|
68
38
|
render(): JSX.Element;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atom/range/index.js"],"names":[],"mappings":";
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atom/range/index.js"],"names":[],"mappings":";AA4EA;IACE;;;;;;;;;;;;;;;MAQE;IAEF;;;aAMC;IAED,sCAcC;IAXC;;;;MAGC;IAkEH,0BAmBC;IA3ED,8BAEC;IAED,8BAKC;IAED,8BAKC;IAED,iCAKC;IAED,iCAKC;IA7BC,WAAkB;IA+BpB,8DAcC;IAED,iDAMC;IAuBD,sBAyCC;CACF"}
|
package/es/atom/range/index.js
CHANGED
|
@@ -1,10 +1,8 @@
|
|
|
1
|
-
import _getOr from "lodash/fp/getOr";
|
|
2
1
|
import _clamp from "lodash/fp/clamp";
|
|
3
2
|
import _set from "lodash/fp/set";
|
|
4
3
|
import _noop from "lodash/fp/noop";
|
|
5
4
|
import React from 'react';
|
|
6
5
|
import PropTypes from 'prop-types';
|
|
7
|
-
import Provider from '../provider';
|
|
8
6
|
import Handle from './handle';
|
|
9
7
|
import style from './style.css';
|
|
10
8
|
const valueOnTrack = (track, x) => {
|
|
@@ -17,20 +15,11 @@ const valueOnTrack = (track, x) => {
|
|
|
17
15
|
const extractStateFromProps = props => {
|
|
18
16
|
const {
|
|
19
17
|
multi = false,
|
|
20
|
-
value = multi ? [0, 1] : 0
|
|
21
|
-
min = 0,
|
|
22
|
-
max = 100
|
|
18
|
+
value = multi ? [0, 1] : 0
|
|
23
19
|
} = props;
|
|
24
|
-
const toNormalized = actualValue => (actualValue - min) / (max - min);
|
|
25
|
-
let normalizedValue;
|
|
26
|
-
if (multi) {
|
|
27
|
-
normalizedValue = Array.isArray(value) ? value.map(toNormalized) : [toNormalized(0), toNormalized(value)];
|
|
28
|
-
} else {
|
|
29
|
-
normalizedValue = toNormalized(value);
|
|
30
|
-
}
|
|
31
20
|
return {
|
|
32
21
|
multi,
|
|
33
|
-
value: multi ?
|
|
22
|
+
value: multi ? value : [0, value]
|
|
34
23
|
};
|
|
35
24
|
};
|
|
36
25
|
const RenderHandles = props => {
|
|
@@ -83,9 +72,6 @@ RenderHandles.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
|
83
72
|
HammerForTestingMax: Handle.propTypes.HammerForTesting
|
|
84
73
|
} : {};
|
|
85
74
|
class Range extends React.Component {
|
|
86
|
-
static contextTypes = {
|
|
87
|
-
skin: Provider.childContextTypes.skin
|
|
88
|
-
};
|
|
89
75
|
static getDerivedStateFromProps(props, state) {
|
|
90
76
|
const {
|
|
91
77
|
pending
|
|
@@ -109,19 +95,6 @@ class Range extends React.Component {
|
|
|
109
95
|
setRefTrack(track) {
|
|
110
96
|
this.track = track;
|
|
111
97
|
}
|
|
112
|
-
normalizedToActual(normalizedValue) {
|
|
113
|
-
const {
|
|
114
|
-
min = 0,
|
|
115
|
-
max = 100
|
|
116
|
-
} = this.props;
|
|
117
|
-
return min + normalizedValue * (max - min);
|
|
118
|
-
}
|
|
119
|
-
roundToStep(value) {
|
|
120
|
-
const {
|
|
121
|
-
step = 1
|
|
122
|
-
} = this.props;
|
|
123
|
-
return Math.round(value / step) * step;
|
|
124
|
-
}
|
|
125
98
|
handleMinChange(e) {
|
|
126
99
|
e.srcEvent.stopPropagation();
|
|
127
100
|
e.srcEvent.preventDefault();
|
|
@@ -166,8 +139,7 @@ class Range extends React.Component {
|
|
|
166
139
|
multi = false
|
|
167
140
|
} = this.props;
|
|
168
141
|
const handle = pending ? onChange : onChangeEnd;
|
|
169
|
-
|
|
170
|
-
return handle(multi ? actualValues : actualValues[1]);
|
|
142
|
+
return handle(multi ? newValues : newValues[1]);
|
|
171
143
|
}
|
|
172
144
|
handleClick(e) {
|
|
173
145
|
e.stopPropagation();
|
|
@@ -176,7 +148,8 @@ class Range extends React.Component {
|
|
|
176
148
|
value: [left, right],
|
|
177
149
|
multi
|
|
178
150
|
} = this.state;
|
|
179
|
-
const
|
|
151
|
+
const x = e.clientX;
|
|
152
|
+
const newValue = valueOnTrack(this.track, x);
|
|
180
153
|
if (!multi) return this.handleChange(newValue, 1, false);
|
|
181
154
|
if (left === right) {
|
|
182
155
|
const isClickToTheLeft = left - newValue > 0;
|
|
@@ -191,30 +164,22 @@ class Range extends React.Component {
|
|
|
191
164
|
value: [left, right],
|
|
192
165
|
pending
|
|
193
166
|
} = this.state;
|
|
194
|
-
const {
|
|
195
|
-
theme = 'default',
|
|
196
|
-
minLabel = 'Min',
|
|
197
|
-
maxLabel = 'Max',
|
|
198
|
-
HammerForTestingMin,
|
|
199
|
-
HammerForTestingMax
|
|
200
|
-
} = this.props;
|
|
201
167
|
const railWidth = right - left;
|
|
202
168
|
const railLeft = left;
|
|
203
|
-
const {
|
|
204
|
-
|
|
205
|
-
} = this.context;
|
|
206
|
-
const primaryColor = _getOr('#00B0FF', 'common.primary', skin);
|
|
207
|
-
const railStyle = theme === 'mooc' ? {
|
|
208
|
-
backgroundColor: primaryColor,
|
|
209
|
-
width: `${railWidth * 100}%`,
|
|
210
|
-
left: `${railLeft * 100}%`
|
|
211
|
-
} : {
|
|
169
|
+
const railStyle = {
|
|
170
|
+
backgroundColor: '#9999A8',
|
|
212
171
|
width: `${railWidth * 100}%`,
|
|
213
172
|
left: `${railLeft * 100}%`
|
|
214
173
|
};
|
|
215
|
-
const
|
|
216
|
-
|
|
217
|
-
|
|
174
|
+
const {
|
|
175
|
+
HammerForTestingMin,
|
|
176
|
+
HammerForTestingMax
|
|
177
|
+
} = this.props;
|
|
178
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
179
|
+
"data-testid": "slider",
|
|
180
|
+
className: style.containerWrapper,
|
|
181
|
+
onClick: this.handleClick
|
|
182
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
218
183
|
className: style.container
|
|
219
184
|
}, /*#__PURE__*/React.createElement("div", {
|
|
220
185
|
"data-testid": "track",
|
|
@@ -235,50 +200,17 @@ class Range extends React.Component {
|
|
|
235
200
|
onHandleMinChangeEnd: this.handleMinChangeEnd,
|
|
236
201
|
onHandleMaxChange: this.handleMaxChange,
|
|
237
202
|
onHandleMaxChangeEnd: this.handleMaxChangeEnd
|
|
238
|
-
}));
|
|
239
|
-
if (theme === 'mooc') {
|
|
240
|
-
return /*#__PURE__*/React.createElement("div", {
|
|
241
|
-
"data-testid": "slider",
|
|
242
|
-
className: style.containerWrapper
|
|
243
|
-
}, /*#__PURE__*/React.createElement("div", {
|
|
244
|
-
onClick: this.handleClick
|
|
245
|
-
}, sliderComponent), /*#__PURE__*/React.createElement("div", {
|
|
246
|
-
className: style.inputsRow
|
|
247
|
-
}, multi ? /*#__PURE__*/React.createElement("div", {
|
|
248
|
-
className: style.moocInput,
|
|
249
|
-
"data-testid": "min-value"
|
|
250
|
-
}, /*#__PURE__*/React.createElement("span", {
|
|
251
|
-
className: style.inputHint
|
|
252
|
-
}, minLabel), /*#__PURE__*/React.createElement("span", {
|
|
253
|
-
className: style.inputValue
|
|
254
|
-
}, minActualValue)) : null, /*#__PURE__*/React.createElement("div", {
|
|
255
|
-
className: style.moocInput,
|
|
256
|
-
"data-testid": "max-value"
|
|
257
|
-
}, /*#__PURE__*/React.createElement("span", {
|
|
258
|
-
className: style.inputHint
|
|
259
|
-
}, maxLabel), /*#__PURE__*/React.createElement("span", {
|
|
260
|
-
className: style.inputValue
|
|
261
|
-
}, maxActualValue))));
|
|
262
|
-
}
|
|
263
|
-
return /*#__PURE__*/React.createElement("div", {
|
|
264
|
-
"data-testid": "slider",
|
|
265
|
-
className: style.containerWrapper,
|
|
266
|
-
onClick: this.handleClick
|
|
267
|
-
}, sliderComponent);
|
|
203
|
+
})));
|
|
268
204
|
}
|
|
269
205
|
}
|
|
270
206
|
Range.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
271
207
|
onChange: PropTypes.func,
|
|
272
208
|
onChangeEnd: PropTypes.func,
|
|
273
209
|
multi: PropTypes.bool,
|
|
274
|
-
theme: PropTypes.oneOf(['default', 'mooc']),
|
|
275
|
-
min: PropTypes.number,
|
|
276
|
-
max: PropTypes.number,
|
|
277
|
-
step: PropTypes.number,
|
|
278
|
-
minLabel: PropTypes.string,
|
|
279
|
-
maxLabel: PropTypes.string,
|
|
280
210
|
HammerForTestingMin: RenderHandles.propTypes.HammerForTestingMin,
|
|
281
|
-
HammerForTestingMax: RenderHandles.propTypes.HammerForTestingMax
|
|
211
|
+
HammerForTestingMax: RenderHandles.propTypes.HammerForTestingMax,
|
|
212
|
+
// eslint-disable-next-line react/no-unused-prop-types
|
|
213
|
+
value: PropTypes.oneOfType([PropTypes.number, PropTypes.arrayOf(PropTypes.number)])
|
|
282
214
|
} : {};
|
|
283
215
|
export default Range;
|
|
284
216
|
//# sourceMappingURL=index.js.map
|