@coorpacademy/components 10.22.16 → 10.22.19
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/es/atom/input-switch/index.js +4 -2
- package/es/atom/input-switch/index.js.map +1 -1
- package/es/atom/provider/index.js +15 -0
- package/es/atom/provider/index.js.map +1 -1
- package/es/atom/provider/web-context.js +27 -0
- package/es/atom/provider/web-context.js.map +1 -0
- package/es/atom/range/handle.js +59 -59
- package/es/atom/range/handle.js.map +1 -1
- package/es/atom/range/index.js +55 -43
- package/es/atom/range/index.js.map +1 -1
- package/es/atom/select/index.js +3 -5
- package/es/atom/select/index.js.map +1 -1
- package/es/molecule/cm-popin/index.js +4 -2
- package/es/molecule/cm-popin/index.js.map +1 -1
- package/es/molecule/news/index.js +9 -7
- package/es/molecule/news/index.js.map +1 -1
- package/es/molecule/news/style.css +2 -0
- package/es/molecule/questions/free-text/index.js +4 -3
- package/es/molecule/questions/free-text/index.js.map +1 -1
- package/es/molecule/questions/qcm/index.js +3 -5
- package/es/molecule/questions/qcm/index.js.map +1 -1
- package/es/molecule/questions/qcm-drag/index.js +3 -8
- package/es/molecule/questions/qcm-drag/index.js.map +1 -1
- package/es/molecule/questions/qcm-graphic/index.js +3 -5
- package/es/molecule/questions/qcm-graphic/index.js.map +1 -1
- package/es/molecule/questions/question-range/index.js +3 -5
- package/es/molecule/questions/question-range/index.js.map +1 -1
- package/es/organism/review-slide/index.js +5 -10
- package/es/organism/review-slide/index.js.map +1 -1
- package/es/template/app-review/template-context.js +3 -7
- package/es/template/app-review/template-context.js.map +1 -1
- package/lib/atom/input-switch/index.js +4 -2
- package/lib/atom/input-switch/index.js.map +1 -1
- package/lib/atom/provider/index.js +23 -1
- package/lib/atom/provider/index.js.map +1 -1
- package/lib/atom/provider/web-context.js +40 -0
- package/lib/atom/provider/web-context.js.map +1 -0
- package/lib/atom/range/handle.js +61 -57
- package/lib/atom/range/handle.js.map +1 -1
- package/lib/atom/range/index.js +55 -43
- package/lib/atom/range/index.js.map +1 -1
- package/lib/atom/select/index.js +3 -5
- package/lib/atom/select/index.js.map +1 -1
- package/lib/molecule/cm-popin/index.js +4 -2
- package/lib/molecule/cm-popin/index.js.map +1 -1
- package/lib/molecule/news/index.js +9 -7
- package/lib/molecule/news/index.js.map +1 -1
- package/lib/molecule/news/style.css +2 -0
- package/lib/molecule/questions/free-text/index.js +4 -3
- package/lib/molecule/questions/free-text/index.js.map +1 -1
- package/lib/molecule/questions/qcm/index.js +3 -5
- package/lib/molecule/questions/qcm/index.js.map +1 -1
- package/lib/molecule/questions/qcm-drag/index.js +7 -8
- package/lib/molecule/questions/qcm-drag/index.js.map +1 -1
- package/lib/molecule/questions/qcm-graphic/index.js +7 -5
- package/lib/molecule/questions/qcm-graphic/index.js.map +1 -1
- package/lib/molecule/questions/question-range/index.js +7 -5
- package/lib/molecule/questions/question-range/index.js.map +1 -1
- package/lib/organism/review-slide/index.js +6 -11
- package/lib/organism/review-slide/index.js.map +1 -1
- package/lib/template/app-review/template-context.js +3 -6
- package/lib/template/app-review/template-context.js.map +1 -1
- package/package.json +2 -2
|
@@ -18,7 +18,8 @@ const InputSwitch = props => {
|
|
|
18
18
|
theme = 'default',
|
|
19
19
|
titlePosition = 'left',
|
|
20
20
|
details = '',
|
|
21
|
-
requiredSelection = false
|
|
21
|
+
requiredSelection = false,
|
|
22
|
+
'data-name': dataName
|
|
22
23
|
} = props;
|
|
23
24
|
|
|
24
25
|
const idSwitch = id || _uniqueId('input-switch-');
|
|
@@ -61,7 +62,7 @@ const InputSwitch = props => {
|
|
|
61
62
|
const className = getClassState(defaultClass, modifiedClass, null, modified);
|
|
62
63
|
return /*#__PURE__*/React.createElement("div", {
|
|
63
64
|
className: className,
|
|
64
|
-
"data-name": `switch-input-${theme}`
|
|
65
|
+
"data-name": `switch-input-${theme}${dataName}`
|
|
65
66
|
}, titlePosition === 'left' ? titleView : null, /*#__PURE__*/React.createElement("div", {
|
|
66
67
|
className: requiredSelection ? style.requiredSelection : null
|
|
67
68
|
}, /*#__PURE__*/React.createElement("div", {
|
|
@@ -96,6 +97,7 @@ InputSwitch.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
|
96
97
|
titlePosition: PropTypes.oneOf(['right', 'left']),
|
|
97
98
|
theme: PropTypes.oneOf(['default', 'coorpmanager', 'mooc']),
|
|
98
99
|
details: PropTypes.string,
|
|
100
|
+
'data-name': PropTypes.string,
|
|
99
101
|
requiredSelection: PropTypes.bool
|
|
100
102
|
} : {};
|
|
101
103
|
export default InputSwitch;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/atom/input-switch/index.js"],"names":["React","useMemo","PropTypes","getClassState","style","InputSwitch","props","title","name","id","value","disabled","onChange","description","modified","theme","titlePosition","details","requiredSelection","idSwitch","isDisabled","handleChange","e","target","checked","titleView","descriptionView","getClass","defaultClass","coorpmanager","modifiedClass","coorpmanagerModified","partielUncheck","default","className","btnSwitchContainer","checkbox","alignedTextContainer","detailsTxt","propTypes","string","bool","func","oneOf"],"mappings":";;AAAA,OAAOA,KAAP,IAAeC,OAAf,QAA6B,OAA7B;AACA,OAAOC,SAAP,MAAsB,YAAtB;AAEA,OAAOC,aAAP,MAA0B,4BAA1B;AACA,OAAOC,KAAP,MAAkB,aAAlB;;AAEA,MAAMC,WAAW,GAAGC,KAAK,IAAI;AAC3B,QAAM;AACJC,IAAAA,KADI;AAEJC,IAAAA,IAFI;AAGJC,IAAAA,EAHI;AAIJC,IAAAA,KAJI;AAKJC,IAAAA,QALI;AAMJC,IAAAA,QAAQ,QANJ;AAOJC,IAAAA,WAPI;AAQJC,IAAAA,QAAQ,GAAG,KARP;AASJC,IAAAA,KAAK,GAAG,SATJ;AAUJC,IAAAA,aAAa,GAAG,MAVZ;AAWJC,IAAAA,OAAO,GAAG,EAXN;AAYJC,IAAAA,iBAAiB,GAAG;
|
|
1
|
+
{"version":3,"sources":["../../../src/atom/input-switch/index.js"],"names":["React","useMemo","PropTypes","getClassState","style","InputSwitch","props","title","name","id","value","disabled","onChange","description","modified","theme","titlePosition","details","requiredSelection","dataName","idSwitch","isDisabled","handleChange","e","target","checked","titleView","descriptionView","getClass","defaultClass","coorpmanager","modifiedClass","coorpmanagerModified","partielUncheck","default","className","btnSwitchContainer","checkbox","alignedTextContainer","detailsTxt","propTypes","string","bool","func","oneOf"],"mappings":";;AAAA,OAAOA,KAAP,IAAeC,OAAf,QAA6B,OAA7B;AACA,OAAOC,SAAP,MAAsB,YAAtB;AAEA,OAAOC,aAAP,MAA0B,4BAA1B;AACA,OAAOC,KAAP,MAAkB,aAAlB;;AAEA,MAAMC,WAAW,GAAGC,KAAK,IAAI;AAC3B,QAAM;AACJC,IAAAA,KADI;AAEJC,IAAAA,IAFI;AAGJC,IAAAA,EAHI;AAIJC,IAAAA,KAJI;AAKJC,IAAAA,QALI;AAMJC,IAAAA,QAAQ,QANJ;AAOJC,IAAAA,WAPI;AAQJC,IAAAA,QAAQ,GAAG,KARP;AASJC,IAAAA,KAAK,GAAG,SATJ;AAUJC,IAAAA,aAAa,GAAG,MAVZ;AAWJC,IAAAA,OAAO,GAAG,EAXN;AAYJC,IAAAA,iBAAiB,GAAG,KAZhB;AAaJ,iBAAaC;AAbT,MAcFb,KAdJ;;AAgBA,QAAMc,QAAQ,GAAGX,EAAE,IAAI,UAAS,eAAT,CAAvB;;AACA,QAAMY,UAAU,GAAGV,QAAQ,GAAG,UAAH,GAAgB,EAA3C;AACA,QAAMW,YAAY,GAAGrB,OAAO,CAAC,MAAMsB,CAAC,IAAIX,QAAQ,CAACW,CAAC,CAACC,MAAF,CAASC,OAAV,CAApB,EAAwC,CAACb,QAAD,CAAxC,CAA5B;AAEA,QAAMc,SAAS,GAAGnB,KAAK,gBAAG;AAAM,IAAA,SAAS,EAAEH,KAAK,CAACG;AAAvB,KAAgC,GAAEA,KAAM,GAAxC,CAAH,GAAwD,IAA/E;AAEA,QAAMoB,eAAe,GAAGd,WAAW,gBACjC;AAAK,IAAA,SAAS,EAAET,KAAK,CAACS;AAAtB,KAAoCA,WAApC,CADiC,GAE/B,IAFJ;;AAIA,QAAMe,QAAQ,GAAG,MAAM;AACrB,YAAQb,KAAR;AACE,WAAK,cAAL;AACE,eAAO;AACLc,UAAAA,YAAY,EAAEzB,KAAK,CAAC0B,YADf;AAELC,UAAAA,aAAa,EAAE3B,KAAK,CAAC4B;AAFhB,SAAP;;AAIF,WAAK,MAAL;AACE,eAAO;AACLH,UAAAA,YAAY,EAAEzB,KAAK,CAAC6B,cADf;AAELF,UAAAA,aAAa,EAAE3B,KAAK,CAAC4B;AAFhB,SAAP;;AAIF;AACE,eAAO;AAACH,UAAAA,YAAY,EAAEzB,KAAK,CAAC8B,OAArB;AAA8BH,UAAAA,aAAa,EAAE3B,KAAK,CAACU;AAAnD,SAAP;AAZJ;AAcD,GAfD;;AAgBA,QAAM;AAACe,IAAAA,YAAD;AAAeE,IAAAA;AAAf,MAAgCH,QAAQ,EAA9C;AACA,QAAMO,SAAS,GAAGhC,aAAa,CAAC0B,YAAD,EAAeE,aAAf,EAA8B,IAA9B,EAAoCjB,QAApC,CAA/B;AAEA,sBACE;AAAK,IAAA,SAAS,EAAEqB,SAAhB;AAA2B,iBAAY,gBAAepB,KAAM,GAAEI,QAAS;AAAvE,KACGH,aAAa,KAAK,MAAlB,GAA2BU,SAA3B,GAAuC,IAD1C,eAEE;AAAK,IAAA,SAAS,EAAER,iBAAiB,GAAGd,KAAK,CAACc,iBAAT,GAA6B;AAA9D,kBACE;AAAK,IAAA,SAAS,EAAEd,KAAK,CAACgC;AAAtB,kBACE;AACE,IAAA,IAAI,EAAC,UADP;AAEE,IAAA,EAAE,EAAEhB,QAFN;AAGE,IAAA,IAAI,EAAEZ,IAHR;AAIE,IAAA,QAAQ,EAAEc,YAJZ;AAKE,IAAA,OAAO,EAAEZ,KALX;AAME,IAAA,QAAQ,EAAEW,UANZ;AAOE,IAAA,SAAS,EAAEjB,KAAK,CAACiC;AAPnB,IADF,eAUE;AAAO,IAAA,OAAO,EAAEjB,QAAhB;AAA0B,iBAAU;AAApC,IAVF,CADF,CAFF,eAgBE;AAAK,IAAA,SAAS,EAAE,CAACH,OAAD,GAAWb,KAAK,CAACkC,oBAAjB,GAAwC;AAAxD,KACGtB,aAAa,KAAK,OAAlB,GAA4BU,SAA5B,GAAwC,IAD3C,EAEGT,OAAO,gBAAG;AAAK,IAAA,SAAS,EAAEb,KAAK,CAACmC;AAAtB,KAAmCtB,OAAnC,CAAH,GAAuD,IAFjE,CAhBF,EAoBGU,eApBH,CADF;AAwBD,CAtED;;AAwEAtB,WAAW,CAACmC,SAAZ,2CAAwB;AACtBjC,EAAAA,KAAK,EAAEL,SAAS,CAACuC,MADK;AAEtBjC,EAAAA,IAAI,EAAEN,SAAS,CAACuC,MAFM;AAGtBhC,EAAAA,EAAE,EAAEP,SAAS,CAACuC,MAHQ;AAItB/B,EAAAA,KAAK,EAAER,SAAS,CAACwC,IAJK;AAKtB/B,EAAAA,QAAQ,EAAET,SAAS,CAACwC,IALE;AAMtB9B,EAAAA,QAAQ,EAAEV,SAAS,CAACyC,IANE;AAOtB9B,EAAAA,WAAW,EAAEX,SAAS,CAACuC,MAPD;AAQtB3B,EAAAA,QAAQ,EAAEZ,SAAS,CAACwC,IARE;AAStB1B,EAAAA,aAAa,EAAEd,SAAS,CAAC0C,KAAV,CAAgB,CAAC,OAAD,EAAU,MAAV,CAAhB,CATO;AAUtB7B,EAAAA,KAAK,EAAEb,SAAS,CAAC0C,KAAV,CAAgB,CAAC,SAAD,EAAY,cAAZ,EAA4B,MAA5B,CAAhB,CAVe;AAWtB3B,EAAAA,OAAO,EAAEf,SAAS,CAACuC,MAXG;AAYtB,eAAavC,SAAS,CAACuC,MAZD;AAatBvB,EAAAA,iBAAiB,EAAEhB,SAAS,CAACwC;AAbP,CAAxB;AAeA,eAAerC,WAAf","sourcesContent":["import React, {useMemo} from 'react';\nimport PropTypes from 'prop-types';\nimport {noop, uniqueId} from 'lodash/fp';\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 } = 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\n const titleView = title ? <span className={style.title}>{`${title} `}</span> : 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 'mooc':\n return {\n defaultClass: style.partielUncheck,\n modifiedClass: style.coorpmanagerModified\n };\n default:\n return {defaultClass: style.default, 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 type=\"checkbox\"\n id={idSwitch}\n name={name}\n onChange={handleChange}\n checked={value}\n disabled={isDisabled}\n className={style.checkbox}\n />\n <label htmlFor={idSwitch} data-name=\"input-switch-label\" />\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 modified: PropTypes.bool,\n titlePosition: PropTypes.oneOf(['right', 'left']),\n theme: PropTypes.oneOf(['default', 'coorpmanager', 'mooc']),\n details: PropTypes.string,\n 'data-name': PropTypes.string,\n requiredSelection: PropTypes.bool\n};\nexport default InputSwitch;\n"],"file":"index.js"}
|
|
@@ -1,3 +1,5 @@
|
|
|
1
|
+
import _getOr from "lodash/fp/getOr";
|
|
2
|
+
import _get from "lodash/fp/get";
|
|
1
3
|
import _defaultsDeep from "lodash/fp/defaultsDeep";
|
|
2
4
|
|
|
3
5
|
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
|
@@ -5,6 +7,7 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
|
|
|
5
7
|
import React from 'react';
|
|
6
8
|
import PropTypes from 'prop-types';
|
|
7
9
|
import { SrcPropType, ColorPropType, HexPropType } from '../../util/proptypes';
|
|
10
|
+
import WebContext, { useWebContext } from './web-context';
|
|
8
11
|
const DEFAULT_SKIN = {
|
|
9
12
|
common: {
|
|
10
13
|
good: '#24b694',
|
|
@@ -113,5 +116,17 @@ Provider.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
|
113
116
|
common: PropTypes.func
|
|
114
117
|
})
|
|
115
118
|
} : {};
|
|
119
|
+
|
|
120
|
+
const GetSkinFromContext = legacyContext => {
|
|
121
|
+
const context = useWebContext();
|
|
122
|
+
|
|
123
|
+
const legacySkin = _get('skin', legacyContext);
|
|
124
|
+
|
|
125
|
+
const skin = _getOr(legacySkin, 'skin', context);
|
|
126
|
+
|
|
127
|
+
return skin;
|
|
128
|
+
};
|
|
129
|
+
|
|
130
|
+
export { WebContext, useWebContext, GetSkinFromContext };
|
|
116
131
|
export default Provider;
|
|
117
132
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/atom/provider/index.js"],"names":["React","PropTypes","SrcPropType","ColorPropType","HexPropType","DEFAULT_SKIN","common","good","bad","primary","life","brand","primaryAdd1","primaryAdd2","primaryAdd3","primaryAdd4","xtraLightGrey","light","medium","dark","grey","orangeAdd","orange","positive","lightGreen","negative","battle","white","black","mergeSkin","skin","historyShape","shape","createHref","func","push","skinShape","objectOf","images","logo","login","icons","mod","courses","arrayOf","texts","translateShape","Provider","Component","getDerivedStateFromProps","props","history","translate","constructor","context","Vimeo","state","getChildContext","render","children","Children","only","isRequired","object","propTypes","node"],"mappings":"
|
|
1
|
+
{"version":3,"sources":["../../../src/atom/provider/index.js"],"names":["React","PropTypes","SrcPropType","ColorPropType","HexPropType","WebContext","useWebContext","DEFAULT_SKIN","common","good","bad","primary","life","brand","primaryAdd1","primaryAdd2","primaryAdd3","primaryAdd4","xtraLightGrey","light","medium","dark","grey","orangeAdd","orange","positive","lightGreen","negative","battle","white","black","mergeSkin","skin","historyShape","shape","createHref","func","push","skinShape","objectOf","images","logo","login","icons","mod","courses","arrayOf","texts","translateShape","Provider","Component","getDerivedStateFromProps","props","history","translate","constructor","context","Vimeo","state","getChildContext","render","children","Children","only","isRequired","object","propTypes","node","GetSkinFromContext","legacyContext","legacySkin"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport {defaultsDeep, get, getOr} from 'lodash/fp';\nimport {SrcPropType, ColorPropType, HexPropType} from '../../util/proptypes';\nimport WebContext, {useWebContext} from './web-context';\n\nconst DEFAULT_SKIN = {\n common: {\n good: '#24b694',\n bad: '#ed1c24',\n primary: '#00B0FF',\n life: '#ed1c24',\n brand: '#00B0FF',\n primaryAdd1: '#B3E5FC',\n primaryAdd2: '#0091EA',\n primaryAdd3: '#0277BD',\n primaryAdd4: '#015798',\n xtraLightGrey: '#FAFAFA',\n light: '#ECEFF1',\n medium: '#90A4AE',\n dark: '#546E7A',\n grey: '#607D8B',\n orangeAdd: '#FF7043',\n orange: '#FFA000',\n positive: '#3EC483',\n lightGreen: '#66BB6A',\n negative: '#F73F52',\n battle: '#FFE100',\n white: '#FFFFFF',\n black: '#14171A'\n }\n};\n\nconst mergeSkin = (skin = {}) => defaultsDeep(DEFAULT_SKIN, skin);\n\nconst historyShape = PropTypes.shape({\n createHref: PropTypes.func,\n push: PropTypes.func\n});\n\nconst skinShape = PropTypes.shape({\n common: PropTypes.objectOf(ColorPropType),\n images: PropTypes.shape({\n 'logo-mobile': SrcPropType,\n logo: SrcPropType,\n 'logo-email': SrcPropType,\n login: SrcPropType\n }),\n icons: PropTypes.objectOf(HexPropType),\n mod: PropTypes.objectOf(ColorPropType),\n courses: PropTypes.arrayOf(ColorPropType),\n texts: PropTypes.objectOf(ColorPropType)\n});\n\nconst translateShape = PropTypes.func;\n\nclass Provider extends React.Component {\n static propTypes = {\n history: historyShape,\n skin: skinShape,\n translate: translateShape,\n children: PropTypes.node.isRequired,\n Vimeo: PropTypes.shape({\n common: PropTypes.func\n })\n };\n\n static childContextTypes = {\n history: historyShape,\n skin: skinShape,\n translate: translateShape.isRequired,\n Vimeo: PropTypes.object\n };\n\n static getDerivedStateFromProps(props) {\n const {history, skin, translate} = props;\n\n return {\n history,\n skin: mergeSkin(skin),\n translate\n };\n }\n\n constructor(props, context) {\n super(props, context);\n const {history, skin, translate, Vimeo} = props;\n // eslint-disable-next-line react/no-unused-state\n this.state = {history, skin: mergeSkin(skin), translate, Vimeo};\n }\n\n getChildContext() {\n return this.state;\n }\n\n render() {\n const {children} = this.props;\n return React.Children.only(children);\n }\n}\n\nconst GetSkinFromContext = legacyContext => {\n const context = useWebContext();\n const legacySkin = get('skin', legacyContext);\n const skin = getOr(legacySkin, 'skin', context);\n\n return skin;\n};\n\nexport {WebContext, useWebContext, GetSkinFromContext};\nexport default Provider;\n"],"file":"index.js"}
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
2
|
+
|
|
3
|
+
import React, { createContext, useContext } from 'react';
|
|
4
|
+
const Context = createContext({
|
|
5
|
+
translate: key => key
|
|
6
|
+
});
|
|
7
|
+
|
|
8
|
+
const WebContext = ({
|
|
9
|
+
values,
|
|
10
|
+
children
|
|
11
|
+
}) => {
|
|
12
|
+
return /*#__PURE__*/React.createElement(Context.Provider, {
|
|
13
|
+
value: _extends({}, values)
|
|
14
|
+
}, children);
|
|
15
|
+
};
|
|
16
|
+
|
|
17
|
+
export const useWebContext = () => {
|
|
18
|
+
const context = useContext(Context);
|
|
19
|
+
|
|
20
|
+
if (!context) {
|
|
21
|
+
throw new Error('❌ [WebContext] useWebContext must be used within a provider <WebContext>');
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
return context;
|
|
25
|
+
};
|
|
26
|
+
export default WebContext;
|
|
27
|
+
//# sourceMappingURL=web-context.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../../src/atom/provider/web-context.tsx"],"names":["React","createContext","useContext","Context","translate","key","WebContext","values","children","useWebContext","context","Error"],"mappings":";;AAAA,OAAOA,KAAP,IAAeC,aAAf,EAA8BC,UAA9B,QAA+C,OAA/C;AAaA,MAAMC,OAAO,GAAGF,aAAa,CAAC;AAC5BG,EAAAA,SAAS,EAAGC,GAAD,IAAiBA;AADA,CAAD,CAA7B;;AAMA,MAAMC,UAAU,GAAG,CAAC;AAACC,EAAAA,MAAD;AAASC,EAAAA;AAAT,CAAD,KAA+B;AAChD,sBAAO,oBAAC,OAAD,CAAS,QAAT;AAAkB,IAAA,KAAK,eAAMD,MAAN;AAAvB,KAAuCC,QAAvC,CAAP;AACD,CAFD;;AAIA,OAAO,MAAMC,aAAa,GAAG,MAAwB;AACnD,QAAMC,OAAO,GAAGR,UAAU,CAACC,OAAD,CAA1B;;AAEA,MAAI,CAACO,OAAL,EAAc;AACZ,UAAM,IAAIC,KAAJ,CAAU,0EAAV,CAAN;AACD;;AAED,SAAOD,OAAP;AACD,CARM;AAUP,eAAeJ,UAAf","sourcesContent":["import React, {createContext, useContext} from 'react';\n\ntype Skin = {\n common: {\n primary: string;\n };\n};\n\ntype WebContextValues = {\n skin?: Skin;\n translate: (key: string) => string;\n};\n\nconst Context = createContext({\n translate: (key: string) => key\n});\n\ntype Props = {values: WebContextValues; children: any};\n\nconst WebContext = ({values, children}: Props) => {\n return <Context.Provider value={{...values}}>{children}</Context.Provider>;\n};\n\nexport const useWebContext = (): WebContextValues => {\n const context = useContext(Context);\n\n if (!context) {\n throw new Error('❌ [WebContext] useWebContext must be used within a provider <WebContext>');\n }\n\n return context;\n};\n\nexport default WebContext;\n"],"file":"web-context.js"}
|
package/es/atom/range/handle.js
CHANGED
|
@@ -1,83 +1,83 @@
|
|
|
1
1
|
import _getOr from "lodash/fp/getOr";
|
|
2
2
|
import _noop from "lodash/fp/noop";
|
|
3
|
-
|
|
4
|
-
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
|
5
|
-
|
|
6
|
-
import React from 'react';
|
|
3
|
+
import React, { useEffect, useRef, useState } from 'react';
|
|
7
4
|
import PropTypes from 'prop-types';
|
|
8
|
-
import Provider from '../provider';
|
|
5
|
+
import Provider, { GetSkinFromContext } from '../provider';
|
|
9
6
|
import { getShadowBoxColorFromPrimary } from '../../util/get-shadow-box-color-from-primary';
|
|
10
7
|
import style from './handle.css';
|
|
11
|
-
const Hammer = // eslint-disable-next-line no-undef
|
|
12
|
-
typeof window !== 'undefined' ? require('hammerjs') :
|
|
13
|
-
/* istanbul ignore next */
|
|
14
|
-
undefined;
|
|
15
8
|
|
|
16
|
-
class
|
|
17
|
-
constructor(
|
|
18
|
-
super(props, context);
|
|
19
|
-
this.setHandle = this.setHandle.bind(this);
|
|
20
|
-
}
|
|
21
|
-
|
|
22
|
-
componentDidMount() {
|
|
23
|
-
/* istanbul ignore else */
|
|
24
|
-
if (Hammer) {
|
|
25
|
-
const {
|
|
26
|
-
onPanStart = _noop,
|
|
27
|
-
onPanEnd = _noop,
|
|
28
|
-
onPan = _noop
|
|
29
|
-
} = this.props;
|
|
30
|
-
this.hammer = new Hammer(this.handle);
|
|
31
|
-
this.hammer.on('panstart', onPanStart);
|
|
32
|
-
this.hammer.on('panend', onPanEnd);
|
|
33
|
-
this.hammer.on('panleft panright', onPan);
|
|
34
|
-
}
|
|
35
|
-
}
|
|
9
|
+
class NoopHammer {
|
|
10
|
+
constructor() {} // eslint-disable-next-line class-methods-use-this
|
|
36
11
|
|
|
37
|
-
componentWillUnmount() {
|
|
38
|
-
if (this.hammer) {
|
|
39
|
-
this.hammer.stop();
|
|
40
|
-
this.hammer.destroy();
|
|
41
|
-
}
|
|
42
12
|
|
|
43
|
-
|
|
44
|
-
|
|
13
|
+
on() {
|
|
14
|
+
return;
|
|
15
|
+
} // eslint-disable-next-line class-methods-use-this
|
|
45
16
|
|
|
46
|
-
setHandle(el) {
|
|
47
|
-
this.handle = el;
|
|
48
|
-
}
|
|
49
17
|
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
} = this.context;
|
|
18
|
+
stop() {
|
|
19
|
+
return;
|
|
20
|
+
} // eslint-disable-next-line class-methods-use-this
|
|
54
21
|
|
|
55
|
-
const primaryColor = _getOr('#00B0FF', 'common.primary', skin);
|
|
56
22
|
|
|
57
|
-
|
|
58
|
-
return
|
|
59
|
-
className: style.wrapper
|
|
60
|
-
}, /*#__PURE__*/React.createElement("div", {
|
|
61
|
-
style: {
|
|
62
|
-
backgroundColor,
|
|
63
|
-
boxShadow: `0px 0px 20px ${getShadowBoxColorFromPrimary(primaryColor)}`
|
|
64
|
-
},
|
|
65
|
-
className: style.default,
|
|
66
|
-
ref: this.setHandle,
|
|
67
|
-
"data-name": 'handle'
|
|
68
|
-
}));
|
|
23
|
+
destroy() {
|
|
24
|
+
return;
|
|
69
25
|
}
|
|
70
26
|
|
|
71
27
|
}
|
|
72
28
|
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
29
|
+
const Hammer = // eslint-disable-next-line no-undef
|
|
30
|
+
typeof window !== 'undefined' ?
|
|
31
|
+
/* istanbul ignore next */
|
|
32
|
+
require('hammerjs') : NoopHammer;
|
|
33
|
+
|
|
34
|
+
const Handle = (props, legacyContext) => {
|
|
35
|
+
const skin = GetSkinFromContext(legacyContext);
|
|
36
|
+
|
|
37
|
+
const primaryColor = _getOr('#00B0FF', 'common.primary', skin);
|
|
38
|
+
|
|
39
|
+
const backgroundColor = primaryColor;
|
|
40
|
+
const {
|
|
41
|
+
onPanStart = _noop,
|
|
42
|
+
onPanEnd = _noop,
|
|
43
|
+
onPan = _noop
|
|
44
|
+
} = props;
|
|
45
|
+
const handle = useRef();
|
|
46
|
+
const [hammer, setHammer] = useState();
|
|
47
|
+
useEffect(() => {
|
|
48
|
+
setHammer(new Hammer(handle.current));
|
|
49
|
+
}, [handle]);
|
|
50
|
+
useEffect(() => {
|
|
51
|
+
if (!hammer) return;
|
|
52
|
+
hammer.on('panstart', onPanStart);
|
|
53
|
+
hammer.on('panend', onPanEnd);
|
|
54
|
+
hammer.on('panleft panright', onPan);
|
|
55
|
+
return () => {
|
|
56
|
+
hammer.stop();
|
|
57
|
+
hammer.destroy();
|
|
58
|
+
setHammer(null);
|
|
59
|
+
};
|
|
60
|
+
}, [hammer, onPanStart, onPanEnd, onPan]);
|
|
61
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
62
|
+
className: style.wrapper
|
|
63
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
64
|
+
style: {
|
|
65
|
+
backgroundColor,
|
|
66
|
+
boxShadow: `0px 0px 20px ${getShadowBoxColorFromPrimary(primaryColor)}`
|
|
67
|
+
},
|
|
68
|
+
className: style.default,
|
|
69
|
+
ref: handle,
|
|
70
|
+
"data-name": 'handle'
|
|
71
|
+
}));
|
|
72
|
+
};
|
|
76
73
|
|
|
77
74
|
Handle.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
78
75
|
onPan: PropTypes.func,
|
|
79
76
|
onPanStart: PropTypes.func,
|
|
80
77
|
onPanEnd: PropTypes.func
|
|
81
78
|
} : {};
|
|
79
|
+
Handle.contextTypes = {
|
|
80
|
+
skin: Provider.childContextTypes.skin
|
|
81
|
+
};
|
|
82
82
|
export default Handle;
|
|
83
83
|
//# sourceMappingURL=handle.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/atom/range/handle.js"],"names":["React","
|
|
1
|
+
{"version":3,"sources":["../../../src/atom/range/handle.js"],"names":["React","useEffect","useRef","useState","PropTypes","Provider","GetSkinFromContext","getShadowBoxColorFromPrimary","style","NoopHammer","constructor","on","stop","destroy","Hammer","window","require","Handle","props","legacyContext","skin","primaryColor","backgroundColor","onPanStart","onPanEnd","onPan","handle","hammer","setHammer","current","wrapper","boxShadow","default","propTypes","func","contextTypes","childContextTypes"],"mappings":";;AACA,OAAOA,KAAP,IAAeC,SAAf,EAA0BC,MAA1B,EAAkCC,QAAlC,QAAiD,OAAjD;AACA,OAAOC,SAAP,MAAsB,YAAtB;AACA,OAAOC,QAAP,IAAkBC,kBAAlB,QAA2C,aAA3C;AACA,SAAQC,4BAAR,QAA2C,8CAA3C;AACA,OAAOC,KAAP,MAAkB,cAAlB;;AAEA,MAAMC,UAAN,CAAiB;AACfC,EAAAA,WAAW,GAAG,CAAE,CADD,CAGf;;;AACAC,EAAAA,EAAE,GAAG;AACH;AACD,GANc,CAQf;;;AACAC,EAAAA,IAAI,GAAG;AACL;AACD,GAXc,CAaf;;;AACAC,EAAAA,OAAO,GAAG;AACR;AACD;;AAhBc;;AAmBjB,MAAMC,MAAM,GAAG;AACb,OAAOC,MAAP,KAAkB,WAAlB;AAAgC;AAA2BC,OAAO,CAAC,UAAD,CAAlE,GAAiFP,UADnF;;AAGA,MAAMQ,MAAM,GAAG,CAACC,KAAD,EAAQC,aAAR,KAA0B;AACvC,QAAMC,IAAI,GAAGd,kBAAkB,CAACa,aAAD,CAA/B;;AACA,QAAME,YAAY,GAAG,OAAM,SAAN,EAAiB,gBAAjB,EAAmCD,IAAnC,CAArB;;AACA,QAAME,eAAe,GAAGD,YAAxB;AACA,QAAM;AAACE,IAAAA,UAAU,QAAX;AAAoBC,IAAAA,QAAQ,QAA5B;AAAqCC,IAAAA,KAAK;AAA1C,MAAqDP,KAA3D;AAEA,QAAMQ,MAAM,GAAGxB,MAAM,EAArB;AACA,QAAM,CAACyB,MAAD,EAASC,SAAT,IAAsBzB,QAAQ,EAApC;AAEAF,EAAAA,SAAS,CAAC,MAAM;AACd2B,IAAAA,SAAS,CAAC,IAAId,MAAJ,CAAWY,MAAM,CAACG,OAAlB,CAAD,CAAT;AACD,GAFQ,EAEN,CAACH,MAAD,CAFM,CAAT;AAIAzB,EAAAA,SAAS,CAAC,MAAM;AACd,QAAI,CAAC0B,MAAL,EAAa;AACbA,IAAAA,MAAM,CAAChB,EAAP,CAAU,UAAV,EAAsBY,UAAtB;AACAI,IAAAA,MAAM,CAAChB,EAAP,CAAU,QAAV,EAAoBa,QAApB;AAEAG,IAAAA,MAAM,CAAChB,EAAP,CAAU,kBAAV,EAA8Bc,KAA9B;AAEA,WAAO,MAAM;AACXE,MAAAA,MAAM,CAACf,IAAP;AACAe,MAAAA,MAAM,CAACd,OAAP;AACAe,MAAAA,SAAS,CAAC,IAAD,CAAT;AACD,KAJD;AAKD,GAZQ,EAYN,CAACD,MAAD,EAASJ,UAAT,EAAqBC,QAArB,EAA+BC,KAA/B,CAZM,CAAT;AAcA,sBACE;AAAK,IAAA,SAAS,EAAEjB,KAAK,CAACsB;AAAtB,kBACE;AACE,IAAA,KAAK,EAAE;AACLR,MAAAA,eADK;AAELS,MAAAA,SAAS,EAAG,gBAAexB,4BAA4B,CAACc,YAAD,CAAe;AAFjE,KADT;AAKE,IAAA,SAAS,EAAEb,KAAK,CAACwB,OALnB;AAME,IAAA,GAAG,EAAEN,MANP;AAOE,iBAAW;AAPb,IADF,CADF;AAaD,CAxCD;;AA0CAT,MAAM,CAACgB,SAAP,2CAAmB;AACjBR,EAAAA,KAAK,EAAErB,SAAS,CAAC8B,IADA;AAEjBX,EAAAA,UAAU,EAAEnB,SAAS,CAAC8B,IAFL;AAGjBV,EAAAA,QAAQ,EAAEpB,SAAS,CAAC8B;AAHH,CAAnB;AAMAjB,MAAM,CAACkB,YAAP,GAAsB;AACpBf,EAAAA,IAAI,EAAEf,QAAQ,CAAC+B,iBAAT,CAA2BhB;AADb,CAAtB;AAIA,eAAeH,MAAf","sourcesContent":["import {noop, getOr} from 'lodash/fp';\nimport React, {useEffect, useRef, useState} from 'react';\nimport PropTypes from 'prop-types';\nimport Provider, {GetSkinFromContext} from '../provider';\nimport {getShadowBoxColorFromPrimary} from '../../util/get-shadow-box-color-from-primary';\nimport style from './handle.css';\n\nclass NoopHammer {\n constructor() {}\n\n // eslint-disable-next-line class-methods-use-this\n on() {\n return;\n }\n\n // eslint-disable-next-line class-methods-use-this\n stop() {\n return;\n }\n\n // eslint-disable-next-line class-methods-use-this\n destroy() {\n return;\n }\n}\n\nconst Hammer = // eslint-disable-next-line no-undef\n typeof window !== 'undefined' ? /* istanbul ignore next */ require('hammerjs') : NoopHammer;\n\nconst Handle = (props, legacyContext) => {\n const skin = GetSkinFromContext(legacyContext);\n const primaryColor = getOr('#00B0FF', 'common.primary', skin);\n const backgroundColor = primaryColor;\n const {onPanStart = noop, onPanEnd = noop, onPan = noop} = props;\n\n const handle = useRef();\n const [hammer, setHammer] = useState();\n\n useEffect(() => {\n setHammer(new Hammer(handle.current));\n }, [handle]);\n\n useEffect(() => {\n if (!hammer) return;\n hammer.on('panstart', onPanStart);\n hammer.on('panend', onPanEnd);\n\n hammer.on('panleft panright', onPan);\n\n return () => {\n hammer.stop();\n hammer.destroy();\n setHammer(null);\n };\n }, [hammer, onPanStart, onPanEnd, onPan]);\n\n return (\n <div className={style.wrapper}>\n <div\n style={{\n backgroundColor,\n boxShadow: `0px 0px 20px ${getShadowBoxColorFromPrimary(primaryColor)}`\n }}\n className={style.default}\n ref={handle}\n data-name={'handle'}\n />\n </div>\n );\n};\n\nHandle.propTypes = {\n onPan: PropTypes.func,\n onPanStart: PropTypes.func,\n onPanEnd: PropTypes.func\n};\n\nHandle.contextTypes = {\n skin: Provider.childContextTypes.skin\n};\n\nexport default Handle;\n"],"file":"handle.js"}
|
package/es/atom/range/index.js
CHANGED
|
@@ -1,15 +1,11 @@
|
|
|
1
1
|
import _clamp from "lodash/fp/clamp";
|
|
2
2
|
import _set from "lodash/fp/set";
|
|
3
3
|
import _noop from "lodash/fp/noop";
|
|
4
|
-
import _getOr from "lodash/fp/getOr";
|
|
5
4
|
|
|
6
5
|
function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
7
6
|
|
|
8
|
-
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
|
9
|
-
|
|
10
7
|
import React from 'react';
|
|
11
8
|
import PropTypes from 'prop-types';
|
|
12
|
-
import Provider from '../provider';
|
|
13
9
|
import Handle from './handle';
|
|
14
10
|
import style from './style.css';
|
|
15
11
|
|
|
@@ -32,6 +28,49 @@ const extractStateFromProps = props => {
|
|
|
32
28
|
};
|
|
33
29
|
};
|
|
34
30
|
|
|
31
|
+
const RenderHandles = props => {
|
|
32
|
+
const {
|
|
33
|
+
left,
|
|
34
|
+
right,
|
|
35
|
+
multi = false,
|
|
36
|
+
pending,
|
|
37
|
+
onHandleMinChange,
|
|
38
|
+
onHandleMinChangeEnd,
|
|
39
|
+
onHandleMaxChange,
|
|
40
|
+
onHandleMaxChangeEnd
|
|
41
|
+
} = props;
|
|
42
|
+
return /*#__PURE__*/React.createElement("div", null, multi ? /*#__PURE__*/React.createElement("span", {
|
|
43
|
+
className: pending ? style.handle : style.animatedHandle,
|
|
44
|
+
style: {
|
|
45
|
+
left: `${left * 100}%`
|
|
46
|
+
}
|
|
47
|
+
}, /*#__PURE__*/React.createElement(Handle, {
|
|
48
|
+
axis: "x",
|
|
49
|
+
onPan: onHandleMinChange,
|
|
50
|
+
onPanEnd: onHandleMinChangeEnd
|
|
51
|
+
})) : null, /*#__PURE__*/React.createElement("span", {
|
|
52
|
+
className: pending ? style.handle : style.animatedHandle,
|
|
53
|
+
style: {
|
|
54
|
+
left: `${right * 100}%`
|
|
55
|
+
}
|
|
56
|
+
}, /*#__PURE__*/React.createElement(Handle, {
|
|
57
|
+
axis: "x",
|
|
58
|
+
onPan: onHandleMaxChange,
|
|
59
|
+
onPanEnd: onHandleMaxChangeEnd
|
|
60
|
+
})));
|
|
61
|
+
};
|
|
62
|
+
|
|
63
|
+
RenderHandles.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
64
|
+
left: PropTypes.number,
|
|
65
|
+
right: PropTypes.number,
|
|
66
|
+
multi: PropTypes.bool,
|
|
67
|
+
pending: PropTypes.bool,
|
|
68
|
+
onHandleMinChange: PropTypes.func,
|
|
69
|
+
onHandleMinChangeEnd: PropTypes.func,
|
|
70
|
+
onHandleMaxChange: PropTypes.func,
|
|
71
|
+
onHandleMaxChangeEnd: PropTypes.func
|
|
72
|
+
} : {};
|
|
73
|
+
|
|
35
74
|
class Range extends React.Component {
|
|
36
75
|
static getDerivedStateFromProps(props, state) {
|
|
37
76
|
const {
|
|
@@ -132,48 +171,16 @@ class Range extends React.Component {
|
|
|
132
171
|
return this.handleChange(newValue, closestHandle, false);
|
|
133
172
|
}
|
|
134
173
|
|
|
135
|
-
renderHandles() {
|
|
136
|
-
const {
|
|
137
|
-
value: [left, right],
|
|
138
|
-
multi,
|
|
139
|
-
pending
|
|
140
|
-
} = this.state;
|
|
141
|
-
return /*#__PURE__*/React.createElement("div", null, multi ? /*#__PURE__*/React.createElement("span", {
|
|
142
|
-
className: pending ? style.handle : style.animatedHandle,
|
|
143
|
-
style: {
|
|
144
|
-
left: `${left * 100}%`
|
|
145
|
-
}
|
|
146
|
-
}, /*#__PURE__*/React.createElement(Handle, {
|
|
147
|
-
axis: "x",
|
|
148
|
-
onPan: this.handleMinChange,
|
|
149
|
-
onPanEnd: this.handleMinChangeEnd
|
|
150
|
-
})) : null, /*#__PURE__*/React.createElement("span", {
|
|
151
|
-
className: pending ? style.handle : style.animatedHandle,
|
|
152
|
-
style: {
|
|
153
|
-
left: `${right * 100}%`
|
|
154
|
-
}
|
|
155
|
-
}, /*#__PURE__*/React.createElement(Handle, {
|
|
156
|
-
axis: "x",
|
|
157
|
-
onPan: this.handleMaxChange,
|
|
158
|
-
onPanEnd: this.handleMaxChangeEnd
|
|
159
|
-
})));
|
|
160
|
-
}
|
|
161
|
-
|
|
162
174
|
render() {
|
|
163
175
|
const {
|
|
164
|
-
|
|
165
|
-
} = this.context;
|
|
166
|
-
|
|
167
|
-
const defaultColor = _getOr('#00B0FF', 'common.primary', skin);
|
|
168
|
-
|
|
169
|
-
const {
|
|
176
|
+
multi = false,
|
|
170
177
|
value: [left, right],
|
|
171
178
|
pending
|
|
172
179
|
} = this.state;
|
|
173
180
|
const railWidth = right - left;
|
|
174
181
|
const railLeft = left;
|
|
175
182
|
const railStyle = {
|
|
176
|
-
backgroundColor:
|
|
183
|
+
backgroundColor: '#9999A8',
|
|
177
184
|
width: `${railWidth * 100}%`,
|
|
178
185
|
left: `${railLeft * 100}%`
|
|
179
186
|
};
|
|
@@ -189,15 +196,20 @@ class Range extends React.Component {
|
|
|
189
196
|
}), /*#__PURE__*/React.createElement("div", {
|
|
190
197
|
className: pending ? style.rail : style.animatedRail,
|
|
191
198
|
style: railStyle
|
|
192
|
-
}),
|
|
199
|
+
}), /*#__PURE__*/React.createElement(RenderHandles, {
|
|
200
|
+
left: left,
|
|
201
|
+
right: right,
|
|
202
|
+
pending: pending,
|
|
203
|
+
multi: multi,
|
|
204
|
+
onHandleMinChange: this.handleMinChange,
|
|
205
|
+
onHandleMinChangeEnd: this.handleMinChangeEnd,
|
|
206
|
+
onHandleMaxChange: this.handleMaxChange,
|
|
207
|
+
onHandleMaxChangeEnd: this.handleMaxChangeEnd
|
|
208
|
+
})));
|
|
193
209
|
}
|
|
194
210
|
|
|
195
211
|
}
|
|
196
212
|
|
|
197
|
-
_defineProperty(Range, "contextTypes", {
|
|
198
|
-
skin: Provider.childContextTypes.skin
|
|
199
|
-
});
|
|
200
|
-
|
|
201
213
|
Range.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
202
214
|
onChange: PropTypes.func,
|
|
203
215
|
onChangeEnd: PropTypes.func,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/atom/range/index.js"],"names":["React","PropTypes","Provider","Handle","style","valueOnTrack","track","x","left","right","getBoundingClientRect","extractStateFromProps","props","multi","value","Range","Component","getDerivedStateFromProps","state","pending","constructor","context","handleClick","bind","setRefTrack","handleMinChange","handleMaxChange","handleMinChangeEnd","handleMaxChangeEnd","e","srcEvent","stopPropagation","preventDefault","newValue","center","handleChange","valueIndex","prevValue","minValue","maxValue","nextValue","triggerChange","setState","newValues","onChange","onChangeEnd","handle","clientX","isClickToTheLeft","closestHandle","Math","abs","renderHandles","animatedHandle","render","skin","defaultColor","railWidth","railLeft","railStyle","backgroundColor","width","containerWrapper","container","rail","animatedRail","childContextTypes","propTypes","func","bool","oneOfType","number","arrayOf"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport {getOr, noop, set, clamp} from 'lodash/fp';\nimport Provider from '../provider';\nimport Handle from './handle';\nimport style from './style.css';\n\nconst valueOnTrack = (track, x) => {\n const {left, right} = track.getBoundingClientRect();\n return clamp(0, 1, (x - left) / (right - left));\n};\n\nconst extractStateFromProps = props => {\n const {multi = false, value = multi ? [0, 1] : 0} = props;\n return {\n multi,\n value: multi ? value : [0, value]\n };\n};\n\nclass Range extends React.Component {\n static propTypes = {\n onChange: PropTypes.func,\n onChangeEnd: PropTypes.func,\n multi: PropTypes.bool,\n // eslint-disable-next-line react/no-unused-prop-types\n value: PropTypes.oneOfType([PropTypes.number, PropTypes.arrayOf(PropTypes.number)])\n };\n\n static contextTypes = {\n skin: Provider.childContextTypes.skin\n };\n\n static getDerivedStateFromProps(props, state) {\n const {pending} = state;\n\n if (pending) return null;\n\n return extractStateFromProps(props);\n }\n\n constructor(props, context) {\n super(props, context);\n\n this.state = {\n ...extractStateFromProps(props),\n pending: false\n };\n\n this.handleClick = this.handleClick.bind(this);\n this.setRefTrack = this.setRefTrack.bind(this);\n this.handleMinChange = this.handleMinChange.bind(this);\n this.handleMaxChange = this.handleMaxChange.bind(this);\n this.handleMinChangeEnd = this.handleMinChangeEnd.bind(this);\n this.handleMaxChangeEnd = this.handleMaxChangeEnd.bind(this);\n }\n\n setRefTrack(track) {\n this.track = track;\n }\n\n handleMinChange(e) {\n e.srcEvent.stopPropagation();\n e.srcEvent.preventDefault();\n const newValue = valueOnTrack(this.track, e.center.x);\n return this.handleChange(newValue, 0, true);\n }\n\n handleMaxChange(e) {\n e.srcEvent.stopPropagation();\n e.srcEvent.preventDefault();\n const newValue = valueOnTrack(this.track, e.center.x);\n return this.handleChange(newValue, 1, true);\n }\n\n handleMinChangeEnd(e) {\n e.srcEvent.stopPropagation();\n e.srcEvent.preventDefault();\n const newValue = valueOnTrack(this.track, e.center.x);\n return this.handleChange(newValue, 0, false);\n }\n\n handleMaxChangeEnd(e) {\n e.srcEvent.stopPropagation();\n e.srcEvent.preventDefault();\n const newValue = valueOnTrack(this.track, e.center.x);\n return this.handleChange(newValue, 1, false);\n }\n\n handleChange(value, valueIndex, pending) {\n const {value: prevValue} = this.state;\n\n const newValue = set(valueIndex, value, prevValue);\n\n const [minValue, maxValue] = newValue;\n\n const nextValue = minValue > maxValue ? prevValue : newValue;\n\n this.triggerChange(nextValue, pending);\n return this.setState({\n pending,\n value: pending ? nextValue : extractStateFromProps(this.props).value\n });\n }\n\n triggerChange(newValues, pending) {\n const {onChange = noop, onChangeEnd = onChange, multi = false} = this.props;\n\n const handle = pending ? onChange : onChangeEnd;\n\n return handle(multi ? newValues : newValues[1]);\n }\n\n handleClick(e) {\n e.stopPropagation();\n e.preventDefault();\n const {\n value: [left, right],\n multi\n } = this.state;\n const x = e.clientX;\n const newValue = valueOnTrack(this.track, x);\n\n if (!multi) return this.handleChange(newValue, 1, false);\n\n if (left === right) {\n const isClickToTheLeft = left - newValue > 0;\n return this.handleChange(newValue, isClickToTheLeft ? 0 : 1, false);\n }\n\n const closestHandle = Math.abs(newValue - left) < Math.abs(newValue - right) ? 0 : 1;\n return this.handleChange(newValue, closestHandle, false);\n }\n\n renderHandles() {\n const {\n value: [left, right],\n multi,\n pending\n } = this.state;\n\n return (\n <div>\n {multi ? (\n <span\n className={pending ? style.handle : style.animatedHandle}\n style={{left: `${left * 100}%`}}\n >\n <Handle axis=\"x\" onPan={this.handleMinChange} onPanEnd={this.handleMinChangeEnd} />\n </span>\n ) : null}\n <span\n className={pending ? style.handle : style.animatedHandle}\n style={{left: `${right * 100}%`}}\n >\n <Handle axis=\"x\" onPan={this.handleMaxChange} onPanEnd={this.handleMaxChangeEnd} />\n </span>\n </div>\n );\n }\n\n render() {\n const {skin} = this.context;\n const defaultColor = getOr('#00B0FF', 'common.primary', skin);\n\n const {\n value: [left, right],\n pending\n } = this.state;\n const railWidth = right - left;\n const railLeft = left;\n const railStyle = {\n backgroundColor: defaultColor,\n width: `${railWidth * 100}%`,\n left: `${railLeft * 100}%`\n };\n\n return (\n <div className={style.containerWrapper} onClick={this.handleClick}>\n <div className={style.container}>\n <div className={style.track} data-name=\"sliderTrack\" ref={this.setRefTrack} />\n <div className={pending ? style.rail : style.animatedRail} style={railStyle} />\n {this.renderHandles()}\n </div>\n </div>\n );\n }\n}\n\nexport default Range;\n"],"file":"index.js"}
|
|
1
|
+
{"version":3,"sources":["../../../src/atom/range/index.js"],"names":["React","PropTypes","Handle","style","valueOnTrack","track","x","left","right","getBoundingClientRect","extractStateFromProps","props","multi","value","RenderHandles","pending","onHandleMinChange","onHandleMinChangeEnd","onHandleMaxChange","onHandleMaxChangeEnd","handle","animatedHandle","propTypes","number","bool","func","Range","Component","getDerivedStateFromProps","state","constructor","context","handleClick","bind","setRefTrack","handleMinChange","handleMaxChange","handleMinChangeEnd","handleMaxChangeEnd","e","srcEvent","stopPropagation","preventDefault","newValue","center","handleChange","valueIndex","prevValue","minValue","maxValue","nextValue","triggerChange","setState","newValues","onChange","onChangeEnd","clientX","isClickToTheLeft","closestHandle","Math","abs","render","railWidth","railLeft","railStyle","backgroundColor","width","containerWrapper","container","rail","animatedRail","oneOfType","arrayOf"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport {noop, set, clamp} from 'lodash/fp';\nimport Handle from './handle';\nimport style from './style.css';\n\nconst valueOnTrack = (track, x) => {\n const {left, right} = track.getBoundingClientRect();\n return clamp(0, 1, (x - left) / (right - left));\n};\n\nconst extractStateFromProps = props => {\n const {multi = false, value = multi ? [0, 1] : 0} = props;\n return {\n multi,\n value: multi ? value : [0, value]\n };\n};\n\nconst RenderHandles = props => {\n const {\n left,\n right,\n multi = false,\n pending,\n onHandleMinChange,\n onHandleMinChangeEnd,\n onHandleMaxChange,\n onHandleMaxChangeEnd\n } = props;\n\n return (\n <div>\n {multi ? (\n <span\n className={pending ? style.handle : style.animatedHandle}\n style={{left: `${left * 100}%`}}\n >\n <Handle axis=\"x\" onPan={onHandleMinChange} onPanEnd={onHandleMinChangeEnd} />\n </span>\n ) : null}\n <span\n className={pending ? style.handle : style.animatedHandle}\n style={{left: `${right * 100}%`}}\n >\n <Handle axis=\"x\" onPan={onHandleMaxChange} onPanEnd={onHandleMaxChangeEnd} />\n </span>\n </div>\n );\n};\n\nRenderHandles.propTypes = {\n left: PropTypes.number,\n right: PropTypes.number,\n multi: PropTypes.bool,\n pending: PropTypes.bool,\n onHandleMinChange: PropTypes.func,\n onHandleMinChangeEnd: PropTypes.func,\n onHandleMaxChange: PropTypes.func,\n onHandleMaxChangeEnd: PropTypes.func\n};\n\nclass Range extends React.Component {\n static propTypes = {\n onChange: PropTypes.func,\n onChangeEnd: PropTypes.func,\n multi: PropTypes.bool,\n // eslint-disable-next-line react/no-unused-prop-types\n value: PropTypes.oneOfType([PropTypes.number, PropTypes.arrayOf(PropTypes.number)])\n };\n\n static getDerivedStateFromProps(props, state) {\n const {pending} = state;\n\n if (pending) return null;\n\n return extractStateFromProps(props);\n }\n\n constructor(props, context) {\n super(props, context);\n\n this.state = {\n ...extractStateFromProps(props),\n pending: false\n };\n\n this.handleClick = this.handleClick.bind(this);\n this.setRefTrack = this.setRefTrack.bind(this);\n this.handleMinChange = this.handleMinChange.bind(this);\n this.handleMaxChange = this.handleMaxChange.bind(this);\n this.handleMinChangeEnd = this.handleMinChangeEnd.bind(this);\n this.handleMaxChangeEnd = this.handleMaxChangeEnd.bind(this);\n }\n\n setRefTrack(track) {\n this.track = track;\n }\n\n handleMinChange(e) {\n e.srcEvent.stopPropagation();\n e.srcEvent.preventDefault();\n const newValue = valueOnTrack(this.track, e.center.x);\n return this.handleChange(newValue, 0, true);\n }\n\n handleMaxChange(e) {\n e.srcEvent.stopPropagation();\n e.srcEvent.preventDefault();\n const newValue = valueOnTrack(this.track, e.center.x);\n return this.handleChange(newValue, 1, true);\n }\n\n handleMinChangeEnd(e) {\n e.srcEvent.stopPropagation();\n e.srcEvent.preventDefault();\n const newValue = valueOnTrack(this.track, e.center.x);\n return this.handleChange(newValue, 0, false);\n }\n\n handleMaxChangeEnd(e) {\n e.srcEvent.stopPropagation();\n e.srcEvent.preventDefault();\n const newValue = valueOnTrack(this.track, e.center.x);\n return this.handleChange(newValue, 1, false);\n }\n\n handleChange(value, valueIndex, pending) {\n const {value: prevValue} = this.state;\n\n const newValue = set(valueIndex, value, prevValue);\n\n const [minValue, maxValue] = newValue;\n\n const nextValue = minValue > maxValue ? prevValue : newValue;\n\n this.triggerChange(nextValue, pending);\n return this.setState({\n pending,\n value: pending ? nextValue : extractStateFromProps(this.props).value\n });\n }\n\n triggerChange(newValues, pending) {\n const {onChange = noop, onChangeEnd = onChange, multi = false} = this.props;\n\n const handle = pending ? onChange : onChangeEnd;\n\n return handle(multi ? newValues : newValues[1]);\n }\n\n handleClick(e) {\n e.stopPropagation();\n e.preventDefault();\n const {\n value: [left, right],\n multi\n } = this.state;\n const x = e.clientX;\n const newValue = valueOnTrack(this.track, x);\n\n if (!multi) return this.handleChange(newValue, 1, false);\n\n if (left === right) {\n const isClickToTheLeft = left - newValue > 0;\n return this.handleChange(newValue, isClickToTheLeft ? 0 : 1, false);\n }\n\n const closestHandle = Math.abs(newValue - left) < Math.abs(newValue - right) ? 0 : 1;\n return this.handleChange(newValue, closestHandle, false);\n }\n\n render() {\n const {\n multi = false,\n value: [left, right],\n pending\n } = this.state;\n const railWidth = right - left;\n const railLeft = left;\n const railStyle = {\n backgroundColor: '#9999A8',\n width: `${railWidth * 100}%`,\n left: `${railLeft * 100}%`\n };\n\n return (\n <div className={style.containerWrapper} onClick={this.handleClick}>\n <div className={style.container}>\n <div className={style.track} data-name=\"sliderTrack\" ref={this.setRefTrack} />\n <div className={pending ? style.rail : style.animatedRail} style={railStyle} />\n <RenderHandles\n left={left}\n right={right}\n pending={pending}\n multi={multi}\n onHandleMinChange={this.handleMinChange}\n onHandleMinChangeEnd={this.handleMinChangeEnd}\n onHandleMaxChange={this.handleMaxChange}\n onHandleMaxChangeEnd={this.handleMaxChangeEnd}\n />\n </div>\n </div>\n );\n }\n}\n\nexport default Range;\n"],"file":"index.js"}
|
package/es/atom/select/index.js
CHANGED
|
@@ -12,7 +12,7 @@ import keys from 'lodash/fp/keys';
|
|
|
12
12
|
import map from 'lodash/fp/map';
|
|
13
13
|
import size from 'lodash/fp/size';
|
|
14
14
|
import { NovaCompositionNavigationArrowDown as ArrowDown } from '@coorpacademy/nova-icons';
|
|
15
|
-
import Provider from '../provider';
|
|
15
|
+
import Provider, { GetSkinFromContext } from '../provider';
|
|
16
16
|
import getClassState from '../../util/get-class-state';
|
|
17
17
|
import style from './style.css';
|
|
18
18
|
const themeStyle = {
|
|
@@ -28,7 +28,7 @@ const themeStyle = {
|
|
|
28
28
|
coorpmanager: null
|
|
29
29
|
};
|
|
30
30
|
|
|
31
|
-
const Select = (props,
|
|
31
|
+
const Select = (props, legacyContext) => {
|
|
32
32
|
const {
|
|
33
33
|
name,
|
|
34
34
|
options = [],
|
|
@@ -44,9 +44,7 @@ const Select = (props, context) => {
|
|
|
44
44
|
error = false,
|
|
45
45
|
title: propTitle
|
|
46
46
|
} = props;
|
|
47
|
-
const
|
|
48
|
-
skin
|
|
49
|
-
} = context;
|
|
47
|
+
const skin = GetSkinFromContext(legacyContext);
|
|
50
48
|
const title = useMemo(() => propTitle ? `${propTitle}${required ? '*' : ''}` : null, [propTitle, required]);
|
|
51
49
|
const optionList = options && options.map((option, index) => {
|
|
52
50
|
return /*#__PURE__*/React.createElement("option", {
|