@coorpacademy/components 10.22.16-alpha.13 → 10.22.16
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/provider/index.js +0 -15
- package/es/atom/provider/index.js.map +1 -1
- package/es/atom/range/handle.js +59 -59
- package/es/atom/range/handle.js.map +1 -1
- package/es/atom/range/index.js +43 -55
- package/es/atom/range/index.js.map +1 -1
- package/es/atom/select/index.js +5 -3
- package/es/atom/select/index.js.map +1 -1
- package/es/molecule/cm-popin/style.css +1 -1
- package/es/molecule/questions/free-text/index.js +3 -4
- package/es/molecule/questions/free-text/index.js.map +1 -1
- package/es/molecule/questions/qcm/index.js +5 -3
- package/es/molecule/questions/qcm/index.js.map +1 -1
- package/es/molecule/questions/qcm-drag/index.js +8 -3
- package/es/molecule/questions/qcm-drag/index.js.map +1 -1
- package/es/molecule/questions/qcm-graphic/index.js +5 -3
- package/es/molecule/questions/qcm-graphic/index.js.map +1 -1
- package/es/molecule/questions/question-range/index.js +5 -3
- package/es/molecule/questions/question-range/index.js.map +1 -1
- package/es/organism/review-slide/index.js +10 -5
- package/es/organism/review-slide/index.js.map +1 -1
- package/es/template/app-review/template-context.js +7 -3
- package/es/template/app-review/template-context.js.map +1 -1
- package/lib/atom/provider/index.js +1 -23
- package/lib/atom/provider/index.js.map +1 -1
- package/lib/atom/range/handle.js +57 -61
- package/lib/atom/range/handle.js.map +1 -1
- package/lib/atom/range/index.js +43 -55
- package/lib/atom/range/index.js.map +1 -1
- package/lib/atom/select/index.js +5 -3
- package/lib/atom/select/index.js.map +1 -1
- package/lib/molecule/cm-popin/style.css +1 -1
- package/lib/molecule/questions/free-text/index.js +3 -4
- package/lib/molecule/questions/free-text/index.js.map +1 -1
- package/lib/molecule/questions/qcm/index.js +5 -3
- package/lib/molecule/questions/qcm/index.js.map +1 -1
- package/lib/molecule/questions/qcm-drag/index.js +8 -7
- package/lib/molecule/questions/qcm-drag/index.js.map +1 -1
- package/lib/molecule/questions/qcm-graphic/index.js +5 -7
- package/lib/molecule/questions/qcm-graphic/index.js.map +1 -1
- package/lib/molecule/questions/question-range/index.js +5 -7
- package/lib/molecule/questions/question-range/index.js.map +1 -1
- package/lib/organism/review-slide/index.js +11 -6
- package/lib/organism/review-slide/index.js.map +1 -1
- package/lib/template/app-review/template-context.js +6 -3
- package/lib/template/app-review/template-context.js.map +1 -1
- package/package.json +2 -2
- package/es/atom/provider/web-context.js +0 -27
- package/es/atom/provider/web-context.js.map +0 -1
- package/lib/atom/provider/web-context.js +0 -40
- package/lib/atom/provider/web-context.js.map +0 -1
|
@@ -1,5 +1,3 @@
|
|
|
1
|
-
import _getOr from "lodash/fp/getOr";
|
|
2
|
-
import _get from "lodash/fp/get";
|
|
3
1
|
import _defaultsDeep from "lodash/fp/defaultsDeep";
|
|
4
2
|
|
|
5
3
|
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; }
|
|
@@ -7,7 +5,6 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
|
|
|
7
5
|
import React from 'react';
|
|
8
6
|
import PropTypes from 'prop-types';
|
|
9
7
|
import { SrcPropType, ColorPropType, HexPropType } from '../../util/proptypes';
|
|
10
|
-
import WebContext, { useWebContext } from './web-context';
|
|
11
8
|
const DEFAULT_SKIN = {
|
|
12
9
|
common: {
|
|
13
10
|
good: '#24b694',
|
|
@@ -116,17 +113,5 @@ Provider.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
|
116
113
|
common: PropTypes.func
|
|
117
114
|
})
|
|
118
115
|
} : {};
|
|
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 };
|
|
131
116
|
export default Provider;
|
|
132
117
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/atom/provider/index.js"],"names":["React","PropTypes","SrcPropType","ColorPropType","HexPropType","
|
|
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":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport {defaultsDeep} from 'lodash/fp';\nimport {SrcPropType, ColorPropType, HexPropType} from '../../util/proptypes';\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\nexport default Provider;\n"],"file":"index.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
|
-
|
|
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';
|
|
4
7
|
import PropTypes from 'prop-types';
|
|
5
|
-
import Provider
|
|
8
|
+
import Provider from '../provider';
|
|
6
9
|
import { getShadowBoxColorFromPrimary } from '../../util/get-shadow-box-color-from-primary';
|
|
7
10
|
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;
|
|
8
15
|
|
|
9
|
-
class
|
|
10
|
-
constructor() {
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
return;
|
|
15
|
-
} // eslint-disable-next-line class-methods-use-this
|
|
16
|
+
class Handle extends React.Component {
|
|
17
|
+
constructor(props, context) {
|
|
18
|
+
super(props, context);
|
|
19
|
+
this.setHandle = this.setHandle.bind(this);
|
|
20
|
+
}
|
|
16
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
|
+
}
|
|
17
36
|
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
37
|
+
componentWillUnmount() {
|
|
38
|
+
if (this.hammer) {
|
|
39
|
+
this.hammer.stop();
|
|
40
|
+
this.hammer.destroy();
|
|
41
|
+
}
|
|
21
42
|
|
|
43
|
+
this.hammer = null;
|
|
44
|
+
}
|
|
22
45
|
|
|
23
|
-
|
|
24
|
-
|
|
46
|
+
setHandle(el) {
|
|
47
|
+
this.handle = el;
|
|
25
48
|
}
|
|
26
49
|
|
|
27
|
-
|
|
50
|
+
render() {
|
|
51
|
+
const {
|
|
52
|
+
skin
|
|
53
|
+
} = this.context;
|
|
28
54
|
|
|
29
|
-
const
|
|
30
|
-
typeof window !== 'undefined' ?
|
|
31
|
-
/* istanbul ignore next */
|
|
32
|
-
require('hammerjs') : NoopHammer;
|
|
55
|
+
const primaryColor = _getOr('#00B0FF', 'common.primary', skin);
|
|
33
56
|
|
|
34
|
-
const
|
|
35
|
-
|
|
57
|
+
const backgroundColor = primaryColor;
|
|
58
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
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
|
+
}));
|
|
69
|
+
}
|
|
36
70
|
|
|
37
|
-
|
|
71
|
+
}
|
|
38
72
|
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
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
|
-
};
|
|
73
|
+
_defineProperty(Handle, "contextTypes", {
|
|
74
|
+
skin: Provider.childContextTypes.skin
|
|
75
|
+
});
|
|
73
76
|
|
|
74
77
|
Handle.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
75
78
|
onPan: PropTypes.func,
|
|
76
79
|
onPanStart: PropTypes.func,
|
|
77
80
|
onPanEnd: PropTypes.func
|
|
78
81
|
} : {};
|
|
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","PropTypes","Provider","getShadowBoxColorFromPrimary","style","Hammer","window","require","undefined","Handle","Component","constructor","props","context","setHandle","bind","componentDidMount","onPanStart","onPanEnd","onPan","hammer","handle","on","componentWillUnmount","stop","destroy","el","render","skin","primaryColor","backgroundColor","wrapper","boxShadow","default","childContextTypes","propTypes","func"],"mappings":";;;;;AACA,OAAOA,KAAP,MAAkB,OAAlB;AACA,OAAOC,SAAP,MAAsB,YAAtB;AACA,OAAOC,QAAP,MAAqB,aAArB;AACA,SAAQC,4BAAR,QAA2C,8CAA3C;AACA,OAAOC,KAAP,MAAkB,cAAlB;AAEA,MAAMC,MAAM,GACV;AACA,OAAOC,MAAP,KAAkB,WAAlB,GAAgCC,OAAO,CAAC,UAAD,CAAvC;AAAsD;AAA2BC,SAFnF;;AAIA,MAAMC,MAAN,SAAqBT,KAAK,CAACU,SAA3B,CAAqC;AAWnCC,EAAAA,WAAW,CAACC,KAAD,EAAQC,OAAR,EAAiB;AAC1B,UAAMD,KAAN,EAAaC,OAAb;AAEA,SAAKC,SAAL,GAAiB,KAAKA,SAAL,CAAeC,IAAf,CAAoB,IAApB,CAAjB;AACD;;AAEDC,EAAAA,iBAAiB,GAAG;AAClB;AACA,QAAIX,MAAJ,EAAY;AACV,YAAM;AAACY,QAAAA,UAAU,QAAX;AAAoBC,QAAAA,QAAQ,QAA5B;AAAqCC,QAAAA,KAAK;AAA1C,UAAqD,KAAKP,KAAhE;AAEA,WAAKQ,MAAL,GAAc,IAAIf,MAAJ,CAAW,KAAKgB,MAAhB,CAAd;AACA,WAAKD,MAAL,CAAYE,EAAZ,CAAe,UAAf,EAA2BL,UAA3B;AACA,WAAKG,MAAL,CAAYE,EAAZ,CAAe,QAAf,EAAyBJ,QAAzB;AAEA,WAAKE,MAAL,CAAYE,EAAZ,CAAe,kBAAf,EAAmCH,KAAnC;AACD;AACF;;AAEDI,EAAAA,oBAAoB,GAAG;AACrB,QAAI,KAAKH,MAAT,EAAiB;AACf,WAAKA,MAAL,CAAYI,IAAZ;AACA,WAAKJ,MAAL,CAAYK,OAAZ;AACD;;AACD,SAAKL,MAAL,GAAc,IAAd;AACD;;AAEDN,EAAAA,SAAS,CAACY,EAAD,EAAK;AACZ,SAAKL,MAAL,GAAcK,EAAd;AACD;;AAEDC,EAAAA,MAAM,GAAG;AACP,UAAM;AAACC,MAAAA;AAAD,QAAS,KAAKf,OAApB;;AACA,UAAMgB,YAAY,GAAG,OAAM,SAAN,EAAiB,gBAAjB,EAAmCD,IAAnC,CAArB;;AACA,UAAME,eAAe,GAAGD,YAAxB;AAEA,wBACE;AAAK,MAAA,SAAS,EAAEzB,KAAK,CAAC2B;AAAtB,oBACE;AACE,MAAA,KAAK,EAAE;AACLD,QAAAA,eADK;AAELE,QAAAA,SAAS,EAAG,gBAAe7B,4BAA4B,CAAC0B,YAAD,CAAe;AAFjE,OADT;AAKE,MAAA,SAAS,EAAEzB,KAAK,CAAC6B,OALnB;AAME,MAAA,GAAG,EAAE,KAAKnB,SANZ;AAOE,mBAAW;AAPb,MADF,CADF;AAaD;;AA5DkC;;gBAA/BL,M,kBAOkB;AACpBmB,EAAAA,IAAI,EAAE1B,QAAQ,CAACgC,iBAAT,CAA2BN;AADb,C;;AAPlBnB,M,CACG0B,S,2CAAY;AACjBhB,EAAAA,KAAK,EAAElB,SAAS,CAACmC,IADA;AAEjBnB,EAAAA,UAAU,EAAEhB,SAAS,CAACmC,IAFL;AAGjBlB,EAAAA,QAAQ,EAAEjB,SAAS,CAACmC;AAHH,C;AA8DrB,eAAe3B,MAAf","sourcesContent":["import {noop, getOr} from 'lodash/fp';\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport Provider from '../provider';\nimport {getShadowBoxColorFromPrimary} from '../../util/get-shadow-box-color-from-primary';\nimport style from './handle.css';\n\nconst Hammer =\n // eslint-disable-next-line no-undef\n typeof window !== 'undefined' ? require('hammerjs') : /* istanbul ignore next */ undefined;\n\nclass Handle extends React.Component {\n static propTypes = {\n onPan: PropTypes.func,\n onPanStart: PropTypes.func,\n onPanEnd: PropTypes.func\n };\n\n static contextTypes = {\n skin: Provider.childContextTypes.skin\n };\n\n constructor(props, context) {\n super(props, context);\n\n this.setHandle = this.setHandle.bind(this);\n }\n\n componentDidMount() {\n /* istanbul ignore else */\n if (Hammer) {\n const {onPanStart = noop, onPanEnd = noop, onPan = noop} = this.props;\n\n this.hammer = new Hammer(this.handle);\n this.hammer.on('panstart', onPanStart);\n this.hammer.on('panend', onPanEnd);\n\n this.hammer.on('panleft panright', onPan);\n }\n }\n\n componentWillUnmount() {\n if (this.hammer) {\n this.hammer.stop();\n this.hammer.destroy();\n }\n this.hammer = null;\n }\n\n setHandle(el) {\n this.handle = el;\n }\n\n render() {\n const {skin} = this.context;\n const primaryColor = getOr('#00B0FF', 'common.primary', skin);\n const backgroundColor = primaryColor;\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={this.setHandle}\n data-name={'handle'}\n />\n </div>\n );\n }\n}\n\nexport default Handle;\n"],"file":"handle.js"}
|
package/es/atom/range/index.js
CHANGED
|
@@ -1,11 +1,15 @@
|
|
|
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";
|
|
4
5
|
|
|
5
6
|
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); }
|
|
6
7
|
|
|
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
|
+
|
|
7
10
|
import React from 'react';
|
|
8
11
|
import PropTypes from 'prop-types';
|
|
12
|
+
import Provider from '../provider';
|
|
9
13
|
import Handle from './handle';
|
|
10
14
|
import style from './style.css';
|
|
11
15
|
|
|
@@ -28,49 +32,6 @@ const extractStateFromProps = props => {
|
|
|
28
32
|
};
|
|
29
33
|
};
|
|
30
34
|
|
|
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
|
-
|
|
74
35
|
class Range extends React.Component {
|
|
75
36
|
static getDerivedStateFromProps(props, state) {
|
|
76
37
|
const {
|
|
@@ -171,16 +132,48 @@ class Range extends React.Component {
|
|
|
171
132
|
return this.handleChange(newValue, closestHandle, false);
|
|
172
133
|
}
|
|
173
134
|
|
|
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
|
+
|
|
174
162
|
render() {
|
|
175
163
|
const {
|
|
176
|
-
|
|
164
|
+
skin
|
|
165
|
+
} = this.context;
|
|
166
|
+
|
|
167
|
+
const defaultColor = _getOr('#00B0FF', 'common.primary', skin);
|
|
168
|
+
|
|
169
|
+
const {
|
|
177
170
|
value: [left, right],
|
|
178
171
|
pending
|
|
179
172
|
} = this.state;
|
|
180
173
|
const railWidth = right - left;
|
|
181
174
|
const railLeft = left;
|
|
182
175
|
const railStyle = {
|
|
183
|
-
backgroundColor:
|
|
176
|
+
backgroundColor: defaultColor,
|
|
184
177
|
width: `${railWidth * 100}%`,
|
|
185
178
|
left: `${railLeft * 100}%`
|
|
186
179
|
};
|
|
@@ -196,20 +189,15 @@ class Range extends React.Component {
|
|
|
196
189
|
}), /*#__PURE__*/React.createElement("div", {
|
|
197
190
|
className: pending ? style.rail : style.animatedRail,
|
|
198
191
|
style: railStyle
|
|
199
|
-
}),
|
|
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
|
-
})));
|
|
192
|
+
}), this.renderHandles()));
|
|
209
193
|
}
|
|
210
194
|
|
|
211
195
|
}
|
|
212
196
|
|
|
197
|
+
_defineProperty(Range, "contextTypes", {
|
|
198
|
+
skin: Provider.childContextTypes.skin
|
|
199
|
+
});
|
|
200
|
+
|
|
213
201
|
Range.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
214
202
|
onChange: PropTypes.func,
|
|
215
203
|
onChangeEnd: PropTypes.func,
|
|
@@ -1 +1 @@
|
|
|
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"}
|
|
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"}
|
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
|
|
15
|
+
import Provider 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, context) => {
|
|
32
32
|
const {
|
|
33
33
|
name,
|
|
34
34
|
options = [],
|
|
@@ -44,7 +44,9 @@ const Select = (props, legacyContext) => {
|
|
|
44
44
|
error = false,
|
|
45
45
|
title: propTitle
|
|
46
46
|
} = props;
|
|
47
|
-
const
|
|
47
|
+
const {
|
|
48
|
+
skin
|
|
49
|
+
} = context;
|
|
48
50
|
const title = useMemo(() => propTitle ? `${propTitle}${required ? '*' : ''}` : null, [propTitle, required]);
|
|
49
51
|
const optionList = options && options.map((option, index) => {
|
|
50
52
|
return /*#__PURE__*/React.createElement("option", {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/atom/select/index.js"],"names":["React","useMemo","PropTypes","classnames","filter","find","get","getOr","includes","keys","map","size","NovaCompositionNavigationArrowDown","ArrowDown","Provider","GetSkinFromContext","getClassState","style","themeStyle","invalid","header","mooc","question","sort","thematiques","player","template","coorpmanager","Select","props","legacyContext","name","options","className","borderClassName","onChange","multiple","disabled","required","description","theme","modified","error","title","propTitle","skin","optionList","option","index","value","selectOption","titleView","selected","selectedLabel","isSelectedInValidOption","validOption","handleChange","e","target","selectedOptions","black","color","shouldUseSkinFontColor","arrowColor","undefined","arrowView","selectedArrow","arrow","behaviourClassName","default","composedClassName","unselected","labelSize","isLongLabel","selectWrapper","selectSpan","noLabelCommon","longLabel","selectBox","SelectOptionPropTypes","string","isRequired","oneOfType","number","bool","contextTypes","childContextTypes","propTypes","func","oneOf","arrayOf","shape"],"mappings":"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","sourcesContent":["import React, {useMemo} from 'react';\nimport PropTypes from 'prop-types';\nimport classnames from 'classnames';\nimport filter from 'lodash/fp/filter';\nimport find from 'lodash/fp/find';\nimport get from 'lodash/fp/get';\nimport getOr from 'lodash/fp/getOr';\nimport includes from 'lodash/fp/includes';\nimport keys from 'lodash/fp/keys';\nimport map from 'lodash/fp/map';\nimport size from 'lodash/fp/size';\nimport {NovaCompositionNavigationArrowDown as ArrowDown} from '@coorpacademy/nova-icons';\nimport Provider, {GetSkinFromContext} from '../provider';\nimport getClassState from '../../util/get-class-state';\nimport style from './style.css';\n\nconst themeStyle = {\n filter: style.filter,\n invalid: style.invalid,\n header: style.header,\n mooc: style.mooc,\n question: style.question,\n sort: style.sort,\n thematiques: style.thematiques,\n player: style.player,\n template: style.template,\n coorpmanager: null\n};\n\nconst Select = (props, legacyContext) => {\n const {\n name,\n options = [],\n className,\n borderClassName,\n onChange,\n multiple = false,\n disabled,\n required,\n description,\n theme,\n modified = false,\n error = false,\n title: propTitle\n } = props;\n\n const skin = GetSkinFromContext(legacyContext);\n const title = useMemo(() => (propTitle ? `${propTitle}${required ? '*' : ''}` : null), [\n propTitle,\n required\n ]);\n\n const optionList =\n options &&\n options.map((option, index) => {\n return (\n <option key={index} value={option.value} className={style.selectOption}>\n {option.name}\n </option>\n );\n });\n\n const titleView = title ? <span className={style.title}>{title} </span> : null;\n\n const selected = useMemo(\n () =>\n multiple\n ? map(get('value'), filter({selected: true}, options))\n : get('value', find({selected: true}, options)),\n [multiple, options]\n );\n const selectedLabel = useMemo(\n () =>\n multiple\n ? map(get('name'), filter({selected: true}, options))\n : get('name', find({selected: true}, options)),\n [multiple, options]\n );\n\n const isSelectedInValidOption = useMemo(\n () =>\n theme === 'player' &&\n getOr(false, 'name', find({validOption: false, selected: true}, options)),\n [options, theme]\n );\n\n const handleChange = useMemo(\n () =>\n multiple\n ? e => {\n onChange(map(get('value'), e.target.selectedOptions));\n }\n : e => {\n onChange(e.target.value);\n },\n [onChange, multiple]\n );\n\n const black = useMemo(() => getOr('#14171A', 'common.black', skin), [skin]);\n const color = useMemo(() => getOr('#00B0FF', 'common.primary', skin), [skin]);\n const shouldUseSkinFontColor = useMemo(\n () =>\n !isSelectedInValidOption && selected && includes(theme, ['question', 'template', 'player']),\n [isSelectedInValidOption, selected, theme]\n );\n const arrowColor = selected ? color : undefined;\n\n const arrowView = !multiple ? (\n <ArrowDown\n color={includes(theme, ['question', 'template', 'player']) ? arrowColor : black}\n className={shouldUseSkinFontColor ? style.selectedArrow : style.arrow}\n />\n ) : null;\n const behaviourClassName = useMemo(\n () => getClassState(style.default, style.modified, style.error, modified, error),\n [error, modified]\n );\n const composedClassName = useMemo(\n () =>\n classnames(\n theme && theme !== 'coorpmanager' ? themeStyle[theme] : behaviourClassName,\n selected ? style.selected : style.unselected,\n className\n ),\n [behaviourClassName, className, selected, theme]\n );\n\n const labelSize = useMemo(() => size(selectedLabel), [selectedLabel]);\n\n const isLongLabel = useMemo(() => labelSize >= 65, [labelSize]);\n\n return (\n <div\n className={classnames(\n composedClassName,\n theme === 'coorpmanager' ? style.coorpmanager : null\n )}\n >\n <label\n data-name=\"select-wrapper\"\n style={{\n ...(shouldUseSkinFontColor && {\n color\n })\n }}\n className={style.selectWrapper}\n >\n {titleView}\n <span\n data-name=\"select-span\"\n className={classnames(\n style.selectSpan,\n includes(theme, ['player', 'invalid', 'question', 'thematiques', 'template'])\n ? style.noLabelCommon\n : null,\n borderClassName,\n isLongLabel ? style.longLabel : null\n )}\n style={{\n ...(shouldUseSkinFontColor && {\n color\n })\n }}\n >\n {selectedLabel}\n </span>\n {arrowView}\n <select\n data-name=\"native-select\"\n className={style.selectBox}\n title={selectedLabel}\n name={name}\n onChange={handleChange}\n value={selected}\n multiple={multiple}\n disabled={disabled}\n >\n {optionList}\n </select>\n </label>\n <div className={style.description}>{description}</div>\n </div>\n );\n};\n\nexport const SelectOptionPropTypes = {\n name: PropTypes.string.isRequired,\n value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n selected: PropTypes.bool,\n validOption: PropTypes.bool\n};\n\nSelect.contextTypes = {\n skin: Provider.childContextTypes.skin\n};\n\nSelect.propTypes = {\n title: PropTypes.string,\n name: PropTypes.string,\n className: PropTypes.string,\n borderClassName: PropTypes.string,\n disabled: PropTypes.bool,\n multiple: PropTypes.bool,\n description: PropTypes.string,\n required: PropTypes.bool,\n onChange: PropTypes.func,\n theme: PropTypes.oneOf(keys(themeStyle)),\n options: PropTypes.arrayOf(PropTypes.shape(SelectOptionPropTypes)),\n modified: PropTypes.bool,\n error: PropTypes.bool\n};\n\nexport default Select;\n"],"file":"index.js"}
|
|
1
|
+
{"version":3,"sources":["../../../src/atom/select/index.js"],"names":["React","useMemo","PropTypes","classnames","filter","find","get","getOr","includes","keys","map","size","NovaCompositionNavigationArrowDown","ArrowDown","Provider","getClassState","style","themeStyle","invalid","header","mooc","question","sort","thematiques","player","template","coorpmanager","Select","props","context","name","options","className","borderClassName","onChange","multiple","disabled","required","description","theme","modified","error","title","propTitle","skin","optionList","option","index","value","selectOption","titleView","selected","selectedLabel","isSelectedInValidOption","validOption","handleChange","e","target","selectedOptions","black","color","shouldUseSkinFontColor","arrowColor","undefined","arrowView","selectedArrow","arrow","behaviourClassName","default","composedClassName","unselected","labelSize","isLongLabel","selectWrapper","selectSpan","noLabelCommon","longLabel","selectBox","SelectOptionPropTypes","string","isRequired","oneOfType","number","bool","contextTypes","childContextTypes","propTypes","func","oneOf","arrayOf","shape"],"mappings":"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","sourcesContent":["import React, {useMemo} from 'react';\nimport PropTypes from 'prop-types';\nimport classnames from 'classnames';\nimport filter from 'lodash/fp/filter';\nimport find from 'lodash/fp/find';\nimport get from 'lodash/fp/get';\nimport getOr from 'lodash/fp/getOr';\nimport includes from 'lodash/fp/includes';\nimport keys from 'lodash/fp/keys';\nimport map from 'lodash/fp/map';\nimport size from 'lodash/fp/size';\nimport {NovaCompositionNavigationArrowDown as ArrowDown} from '@coorpacademy/nova-icons';\nimport Provider from '../provider';\nimport getClassState from '../../util/get-class-state';\nimport style from './style.css';\n\nconst themeStyle = {\n filter: style.filter,\n invalid: style.invalid,\n header: style.header,\n mooc: style.mooc,\n question: style.question,\n sort: style.sort,\n thematiques: style.thematiques,\n player: style.player,\n template: style.template,\n coorpmanager: null\n};\n\nconst Select = (props, context) => {\n const {\n name,\n options = [],\n className,\n borderClassName,\n onChange,\n multiple = false,\n disabled,\n required,\n description,\n theme,\n modified = false,\n error = false,\n title: propTitle\n } = props;\n\n const {skin} = context;\n\n const title = useMemo(() => (propTitle ? `${propTitle}${required ? '*' : ''}` : null), [\n propTitle,\n required\n ]);\n\n const optionList =\n options &&\n options.map((option, index) => {\n return (\n <option key={index} value={option.value} className={style.selectOption}>\n {option.name}\n </option>\n );\n });\n\n const titleView = title ? <span className={style.title}>{title} </span> : null;\n\n const selected = useMemo(\n () =>\n multiple\n ? map(get('value'), filter({selected: true}, options))\n : get('value', find({selected: true}, options)),\n [multiple, options]\n );\n const selectedLabel = useMemo(\n () =>\n multiple\n ? map(get('name'), filter({selected: true}, options))\n : get('name', find({selected: true}, options)),\n [multiple, options]\n );\n\n const isSelectedInValidOption = useMemo(\n () =>\n theme === 'player' &&\n getOr(false, 'name', find({validOption: false, selected: true}, options)),\n [options, theme]\n );\n\n const handleChange = useMemo(\n () =>\n multiple\n ? e => {\n onChange(map(get('value'), e.target.selectedOptions));\n }\n : e => {\n onChange(e.target.value);\n },\n [onChange, multiple]\n );\n\n const black = useMemo(() => getOr('#14171A', 'common.black', skin), [skin]);\n const color = useMemo(() => getOr('#00B0FF', 'common.primary', skin), [skin]);\n const shouldUseSkinFontColor = useMemo(\n () =>\n !isSelectedInValidOption && selected && includes(theme, ['question', 'template', 'player']),\n [isSelectedInValidOption, selected, theme]\n );\n const arrowColor = selected ? color : undefined;\n\n const arrowView = !multiple ? (\n <ArrowDown\n color={includes(theme, ['question', 'template', 'player']) ? arrowColor : black}\n className={shouldUseSkinFontColor ? style.selectedArrow : style.arrow}\n />\n ) : null;\n const behaviourClassName = useMemo(\n () => getClassState(style.default, style.modified, style.error, modified, error),\n [error, modified]\n );\n const composedClassName = useMemo(\n () =>\n classnames(\n theme && theme !== 'coorpmanager' ? themeStyle[theme] : behaviourClassName,\n selected ? style.selected : style.unselected,\n className\n ),\n [behaviourClassName, className, selected, theme]\n );\n\n const labelSize = useMemo(() => size(selectedLabel), [selectedLabel]);\n\n const isLongLabel = useMemo(() => labelSize >= 65, [labelSize]);\n\n return (\n <div\n className={classnames(\n composedClassName,\n theme === 'coorpmanager' ? style.coorpmanager : null\n )}\n >\n <label\n data-name=\"select-wrapper\"\n style={{\n ...(shouldUseSkinFontColor && {\n color\n })\n }}\n className={style.selectWrapper}\n >\n {titleView}\n <span\n data-name=\"select-span\"\n className={classnames(\n style.selectSpan,\n includes(theme, ['player', 'invalid', 'question', 'thematiques', 'template'])\n ? style.noLabelCommon\n : null,\n borderClassName,\n isLongLabel ? style.longLabel : null\n )}\n style={{\n ...(shouldUseSkinFontColor && {\n color\n })\n }}\n >\n {selectedLabel}\n </span>\n {arrowView}\n <select\n data-name=\"native-select\"\n className={style.selectBox}\n title={selectedLabel}\n name={name}\n onChange={handleChange}\n value={selected}\n multiple={multiple}\n disabled={disabled}\n >\n {optionList}\n </select>\n </label>\n <div className={style.description}>{description}</div>\n </div>\n );\n};\n\nexport const SelectOptionPropTypes = {\n name: PropTypes.string.isRequired,\n value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n selected: PropTypes.bool,\n validOption: PropTypes.bool\n};\n\nSelect.contextTypes = {\n skin: Provider.childContextTypes.skin\n};\n\nSelect.propTypes = {\n title: PropTypes.string,\n name: PropTypes.string,\n className: PropTypes.string,\n borderClassName: PropTypes.string,\n disabled: PropTypes.bool,\n multiple: PropTypes.bool,\n description: PropTypes.string,\n required: PropTypes.bool,\n onChange: PropTypes.func,\n theme: PropTypes.oneOf(keys(themeStyle)),\n options: PropTypes.arrayOf(PropTypes.shape(SelectOptionPropTypes)),\n modified: PropTypes.bool,\n error: PropTypes.bool\n};\n\nexport default Select;\n"],"file":"index.js"}
|
|
@@ -6,11 +6,10 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
|
|
|
6
6
|
import React, { useCallback, useMemo, useState } from 'react';
|
|
7
7
|
import PropTypes from 'prop-types';
|
|
8
8
|
import { convert } from 'css-color-function';
|
|
9
|
-
import Provider
|
|
9
|
+
import Provider from '../../../atom/provider';
|
|
10
10
|
import style from './style.css';
|
|
11
11
|
|
|
12
|
-
const FreeText = (props,
|
|
13
|
-
const skin = GetSkinFromContext(legacyContext);
|
|
12
|
+
const FreeText = (props, context) => {
|
|
14
13
|
const {
|
|
15
14
|
placeholder = '',
|
|
16
15
|
value = '',
|
|
@@ -20,7 +19,7 @@ const FreeText = (props, legacyContext) => {
|
|
|
20
19
|
const [hovered, setHovered] = useState(false);
|
|
21
20
|
const handleChange = useCallback(e => onChange(e.target.value), [onChange]);
|
|
22
21
|
|
|
23
|
-
const primarySkinColor = _getOr('#00B0FF', 'common.primary',
|
|
22
|
+
const primarySkinColor = _getOr('#00B0FF', 'skin.common.primary', context);
|
|
24
23
|
|
|
25
24
|
const handleMouseOver = useCallback(() => setHovered(true), [setHovered]);
|
|
26
25
|
const handleMouseLeave = useCallback(() => setHovered(false), [setHovered]);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/molecule/questions/free-text/index.js"],"names":["React","useCallback","useMemo","useState","PropTypes","convert","Provider","
|
|
1
|
+
{"version":3,"sources":["../../../../src/molecule/questions/free-text/index.js"],"names":["React","useCallback","useMemo","useState","PropTypes","convert","Provider","style","FreeText","props","context","placeholder","value","onChange","ariaLabel","hovered","setHovered","handleChange","e","target","primarySkinColor","handleMouseOver","handleMouseLeave","shadowBoxPrimaryColor","wrapper","boxShadow","freeText","color","contextTypes","skin","childContextTypes","propTypes","string","func"],"mappings":";;;;;AAAA,OAAOA,KAAP,IAAeC,WAAf,EAA4BC,OAA5B,EAAqCC,QAArC,QAAoD,OAApD;AACA,OAAOC,SAAP,MAAsB,YAAtB;AAEA,SAAQC,OAAR,QAAsB,oBAAtB;AACA,OAAOC,QAAP,MAAqB,wBAArB;AACA,OAAOC,KAAP,MAAkB,aAAlB;;AAEA,MAAMC,QAAQ,GAAG,CAACC,KAAD,EAAQC,OAAR,KAAoB;AACnC,QAAM;AAACC,IAAAA,WAAW,GAAG,EAAf;AAAmBC,IAAAA,KAAK,GAAG,EAA3B;AAA+BC,IAAAA,QAAQ,QAAvC;AAAgD,kBAAcC;AAA9D,MAA2EL,KAAjF;AACA,QAAM,CAACM,OAAD,EAAUC,UAAV,IAAwBb,QAAQ,CAAC,KAAD,CAAtC;AAEA,QAAMc,YAAY,GAAGhB,WAAW,CAACiB,CAAC,IAAIL,QAAQ,CAACK,CAAC,CAACC,MAAF,CAASP,KAAV,CAAd,EAAgC,CAACC,QAAD,CAAhC,CAAhC;;AACA,QAAMO,gBAAgB,GAAG,OAAM,SAAN,EAAiB,qBAAjB,EAAwCV,OAAxC,CAAzB;;AAEA,QAAMW,eAAe,GAAGpB,WAAW,CAAC,MAAMe,UAAU,CAAC,IAAD,CAAjB,EAAyB,CAACA,UAAD,CAAzB,CAAnC;AAEA,QAAMM,gBAAgB,GAAGrB,WAAW,CAAC,MAAMe,UAAU,CAAC,KAAD,CAAjB,EAA0B,CAACA,UAAD,CAA1B,CAApC;AAEA,QAAMO,qBAAqB,GAAGrB,OAAO,CAAC,MAAMG,OAAO,CAAE,SAAQe,gBAAiB,UAA3B,CAAd,EAAqD,CACxFA,gBADwF,CAArD,CAArC;AAIA,sBACE;AACE,iBAAU,UADZ;AAEE,IAAA,SAAS,EAAEb,KAAK,CAACiB,OAFnB;AAGE,IAAA,WAAW,EAAEH,eAHf;AAIE,IAAA,YAAY,EAAEC,gBAJhB;AAKE,IAAA,KAAK,eACCV,KAAK,IAAI;AACXa,MAAAA,SAAS,EAAEV,OAAO,GAAG,MAAH,GAAa,cAAaQ,qBAAsB;AADvD,KADV;AALP,kBAWE;AACE,iBAAU,iBADZ;AAEE,IAAA,IAAI,EAAC,MAFP;AAGE,kBAAYT,SAAS,IAAIF,KAAb,IAAsBD,WAHpC;AAIE,IAAA,SAAS,EAAEJ,KAAK,CAACmB,QAJnB;AAKE,IAAA,WAAW,EAAEf,WALf;AAME,IAAA,KAAK,EAAEC,KANT;AAOE,IAAA,OAAO,EAAEK,YAPX;AAQE,IAAA,QAAQ,OARV;AASE,IAAA,KAAK;AACHQ,MAAAA,SAAS,EAAG,cAAaF,qBAAsB;AAD5C,OAECX,KAAK,IAAI;AACXa,MAAAA,SAAS,EAAG,cACVV,OAAO,GAAGV,OAAO,CAAE,SAAQe,gBAAiB,UAA3B,CAAV,GAAkDG,qBAC1D;AAHU,KAFV;AAOHI,MAAAA,KAAK,EAAEP;AAPJ;AATP,IAXF,CADF;AAiCD,CAhDD;;AAkDAZ,QAAQ,CAACoB,YAAT,GAAwB;AACtBC,EAAAA,IAAI,EAAEvB,QAAQ,CAACwB,iBAAT,CAA2BD;AADX,CAAxB;AAIArB,QAAQ,CAACuB,SAAT,2CAAqB;AACnBpB,EAAAA,WAAW,EAAEP,SAAS,CAAC4B,MADJ;AAEnBpB,EAAAA,KAAK,EAAER,SAAS,CAAC4B,MAFE;AAGnBnB,EAAAA,QAAQ,EAAET,SAAS,CAAC6B,IAHD;AAInB,gBAAc7B,SAAS,CAAC4B;AAJL,CAArB;AAOA,eAAexB,QAAf","sourcesContent":["import React, {useCallback, useMemo, useState} from 'react';\nimport PropTypes from 'prop-types';\nimport {noop, getOr} from 'lodash/fp';\nimport {convert} from 'css-color-function';\nimport Provider from '../../../atom/provider';\nimport style from './style.css';\n\nconst FreeText = (props, context) => {\n const {placeholder = '', value = '', onChange = noop, 'aria-label': ariaLabel} = props;\n const [hovered, setHovered] = useState(false);\n\n const handleChange = useCallback(e => onChange(e.target.value), [onChange]);\n const primarySkinColor = getOr('#00B0FF', 'skin.common.primary', context);\n\n const handleMouseOver = useCallback(() => setHovered(true), [setHovered]);\n\n const handleMouseLeave = useCallback(() => setHovered(false), [setHovered]);\n\n const shadowBoxPrimaryColor = useMemo(() => convert(`color(${primarySkinColor} a(12%))`), [\n primarySkinColor\n ]);\n\n return (\n <div\n data-name=\"freeText\"\n className={style.wrapper}\n onMouseOver={handleMouseOver}\n onMouseLeave={handleMouseLeave}\n style={{\n ...(value && {\n boxShadow: hovered ? 'none' : `0 4px 16px ${shadowBoxPrimaryColor}`\n })\n }}\n >\n <input\n data-name=\"free-text-input\"\n type=\"text\"\n aria-label={ariaLabel || value || placeholder}\n className={style.freeText}\n placeholder={placeholder}\n value={value}\n onInput={handleChange}\n onChange={noop}\n style={{\n boxShadow: `0 4px 16px ${shadowBoxPrimaryColor}`,\n ...(value && {\n boxShadow: `0 4px 16px ${\n hovered ? convert(`color(${primarySkinColor} a(20%))`) : shadowBoxPrimaryColor\n }`\n }),\n color: primarySkinColor\n }}\n />\n </div>\n );\n};\n\nFreeText.contextTypes = {\n skin: Provider.childContextTypes.skin\n};\n\nFreeText.propTypes = {\n placeholder: PropTypes.string,\n value: PropTypes.string,\n onChange: PropTypes.func,\n 'aria-label': PropTypes.string\n};\n\nexport default FreeText;\n"],"file":"index.js"}
|