@coorpacademy/components 11.11.13-alpha.9 → 11.11.14
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/button/index.d.ts.map +1 -1
- package/es/atom/button/index.js +6 -3
- package/es/atom/button/index.js.map +1 -1
- package/es/atom/input-switch/style.css +1 -2
- package/es/atom/range/handle.d.ts +5 -0
- package/es/atom/range/handle.js +15 -9
- package/es/atom/range/handle.js.map +1 -1
- package/es/atom/range/index.d.ts +10 -0
- package/es/atom/range/index.d.ts.map +1 -1
- package/es/atom/range/index.js +23 -5
- package/es/atom/range/index.js.map +1 -1
- package/es/atom/select/index.d.ts.map +1 -1
- package/es/atom/select/index.js +2 -1
- package/es/atom/select/index.js.map +1 -1
- package/es/atom/select/style.css +6 -1
- package/es/molecule/filters/filters-wapper.css +1 -0
- package/es/molecule/forum/forum-comment/index.d.ts.map +1 -1
- package/es/molecule/forum/forum-comment/index.js +1 -0
- package/es/molecule/forum/forum-comment/index.js.map +1 -1
- package/es/molecule/questions/mobile/template/index.native.d.ts.map +1 -1
- package/es/molecule/questions/mobile/template/index.native.js +4 -6
- package/es/molecule/questions/mobile/template/index.native.js.map +1 -1
- package/es/molecule/questions/question-range/index.d.ts +10 -0
- package/es/molecule/skill-card/index.js +1 -1
- package/es/molecule/skill-card/index.js.map +1 -1
- package/es/organism/mooc-header/index.d.ts +1 -0
- package/es/organism/mooc-header/index.d.ts.map +1 -1
- package/es/organism/mooc-header/index.js +10 -5
- package/es/organism/mooc-header/index.js.map +1 -1
- package/es/organism/mooc-header/style.css +37 -26
- package/es/organism/review-header/index.d.ts +2 -1
- package/es/organism/review-header/index.d.ts.map +1 -1
- package/es/organism/review-header/index.js +7 -7
- package/es/organism/review-header/index.js.map +1 -1
- package/es/organism/review-slide/index.d.ts +26 -1
- package/es/organism/review-slide/index.d.ts.map +1 -1
- package/es/organism/review-slide/index.js +16 -7
- package/es/organism/review-slide/index.js.map +1 -1
- package/lib/atom/button/index.d.ts.map +1 -1
- package/lib/atom/button/index.js +6 -3
- package/lib/atom/button/index.js.map +1 -1
- package/lib/atom/input-switch/style.css +1 -2
- package/lib/atom/range/handle.d.ts +5 -0
- package/lib/atom/range/handle.js +14 -8
- package/lib/atom/range/handle.js.map +1 -1
- package/lib/atom/range/index.d.ts +10 -0
- package/lib/atom/range/index.d.ts.map +1 -1
- package/lib/atom/range/index.js +23 -5
- package/lib/atom/range/index.js.map +1 -1
- package/lib/atom/select/index.d.ts.map +1 -1
- package/lib/atom/select/index.js +2 -1
- package/lib/atom/select/index.js.map +1 -1
- package/lib/atom/select/style.css +6 -1
- package/lib/molecule/filters/filters-wapper.css +1 -0
- package/lib/molecule/forum/forum-comment/index.d.ts.map +1 -1
- package/lib/molecule/forum/forum-comment/index.js +1 -0
- package/lib/molecule/forum/forum-comment/index.js.map +1 -1
- package/lib/molecule/questions/mobile/template/index.native.d.ts.map +1 -1
- package/lib/molecule/questions/mobile/template/index.native.js +4 -6
- package/lib/molecule/questions/mobile/template/index.native.js.map +1 -1
- package/lib/molecule/questions/question-range/index.d.ts +10 -0
- package/lib/molecule/skill-card/index.js +1 -1
- package/lib/molecule/skill-card/index.js.map +1 -1
- package/lib/organism/mooc-header/index.d.ts +1 -0
- package/lib/organism/mooc-header/index.d.ts.map +1 -1
- package/lib/organism/mooc-header/index.js +10 -6
- package/lib/organism/mooc-header/index.js.map +1 -1
- package/lib/organism/mooc-header/style.css +37 -26
- package/lib/organism/review-header/index.d.ts +2 -1
- package/lib/organism/review-header/index.d.ts.map +1 -1
- package/lib/organism/review-header/index.js +11 -7
- package/lib/organism/review-header/index.js.map +1 -1
- package/lib/organism/review-slide/index.d.ts +26 -1
- package/lib/organism/review-slide/index.d.ts.map +1 -1
- package/lib/organism/review-slide/index.js +16 -7
- package/lib/organism/review-slide/index.js.map +1 -1
- package/locales/.mtslconfig.json +1 -0
- package/locales/en/global.json +4 -1
- package/package.json +2 -2
|
@@ -1,25 +1,24 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import classnames from 'classnames';
|
|
3
3
|
import getOr from 'lodash/fp/getOr';
|
|
4
|
-
import Provider from '../../atom/provider';
|
|
4
|
+
import Provider, { GetTranslateFromContext, GetSkinFromContext } from '../../atom/provider';
|
|
5
5
|
import ButtonLinkIconOnly from '../../atom/button-link-icon-only';
|
|
6
6
|
import ReviewHeaderSteps from '../../molecule/review-header-steps';
|
|
7
7
|
import style from './style.css';
|
|
8
8
|
import propTypes from './types';
|
|
9
9
|
|
|
10
|
-
const ReviewHeader = (props,
|
|
10
|
+
const ReviewHeader = (props, legacyContext) => {
|
|
11
11
|
const {
|
|
12
12
|
steps,
|
|
13
13
|
mode,
|
|
14
14
|
skillName,
|
|
15
15
|
'aria-label': ariaLabel,
|
|
16
|
-
closeButtonAriaLabel,
|
|
17
16
|
onQuitClick,
|
|
18
17
|
hiddenSteps
|
|
19
18
|
} = props;
|
|
20
|
-
const
|
|
21
|
-
|
|
22
|
-
|
|
19
|
+
const translate = GetTranslateFromContext(legacyContext);
|
|
20
|
+
const skin = GetSkinFromContext(legacyContext);
|
|
21
|
+
const closeButtonAriaLabel = translate('close_button_ariaLabel');
|
|
23
22
|
const primarySkinColor = getOr('#00B0FF', 'common.primary', skin);
|
|
24
23
|
const buttonProps = {
|
|
25
24
|
icon: 'close',
|
|
@@ -62,7 +61,8 @@ const ReviewHeader = (props, context) => {
|
|
|
62
61
|
|
|
63
62
|
ReviewHeader.propTypes = process.env.NODE_ENV !== "production" ? propTypes : {};
|
|
64
63
|
ReviewHeader.contextTypes = {
|
|
65
|
-
skin: Provider.childContextTypes.skin
|
|
64
|
+
skin: Provider.childContextTypes.skin,
|
|
65
|
+
translate: Provider.childContextTypes.translate
|
|
66
66
|
};
|
|
67
67
|
export default ReviewHeader;
|
|
68
68
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":["React","classnames","getOr","Provider","ButtonLinkIconOnly","ReviewHeaderSteps","style","propTypes","ReviewHeader","props","
|
|
1
|
+
{"version":3,"file":"index.js","names":["React","classnames","getOr","Provider","GetTranslateFromContext","GetSkinFromContext","ButtonLinkIconOnly","ReviewHeaderSteps","style","propTypes","ReviewHeader","props","legacyContext","steps","mode","skillName","ariaLabel","onQuitClick","hiddenSteps","translate","skin","closeButtonAriaLabel","primarySkinColor","buttonProps","icon","onClick","size","className","review","stepsWrapper","stepsWrapperAnimation","headerWrapper","titlesWrapper","title","color","iconButtonWrapper","contextTypes","childContextTypes"],"sources":["../../../src/organism/review-header/index.js"],"sourcesContent":["import React from 'react';\nimport classnames from 'classnames';\nimport getOr from 'lodash/fp/getOr';\nimport Provider, {GetTranslateFromContext, GetSkinFromContext} from '../../atom/provider';\nimport ButtonLinkIconOnly from '../../atom/button-link-icon-only';\nimport ReviewHeaderSteps from '../../molecule/review-header-steps';\nimport style from './style.css';\nimport propTypes from './types';\n\nconst ReviewHeader = (props, legacyContext) => {\n const {steps, mode, skillName, 'aria-label': ariaLabel, onQuitClick, hiddenSteps} = props;\n const translate = GetTranslateFromContext(legacyContext);\n const skin = GetSkinFromContext(legacyContext);\n const closeButtonAriaLabel = translate('close_button_ariaLabel');\n const primarySkinColor = getOr('#00B0FF', 'common.primary', skin);\n\n const buttonProps = {\n icon: 'close',\n 'data-name': 'review-header-close-button',\n 'aria-label': closeButtonAriaLabel,\n onClick: onQuitClick,\n size: 'responsive',\n className: style.review\n };\n\n const stepsWrapper = classnames(\n style.stepsWrapper,\n hiddenSteps ? style.stepsWrapperAnimation : null\n );\n\n return (\n <div className={style.headerWrapper} data-name=\"review-header\" aria-label={ariaLabel}>\n <div className={style.titlesWrapper}>\n <div className={style.title} title={mode} aria-label={mode} data-name=\"review-header-mode\">\n {mode}\n </div>\n <div\n className={style.skillName}\n style={{\n color: primarySkinColor\n }}\n title={skillName}\n aria-label={skillName}\n data-name=\"review-header-skill-name\"\n >\n {skillName}\n </div>\n </div>\n\n <div className={stepsWrapper}>\n <ReviewHeaderSteps steps={steps} key={'review-header-steps'} />\n </div>\n\n <div className={style.iconButtonWrapper} data-testid=\"review-header-close-button-wrapper\">\n <ButtonLinkIconOnly {...buttonProps} />\n </div>\n </div>\n );\n};\n\nReviewHeader.propTypes = propTypes;\n\nReviewHeader.contextTypes = {\n skin: Provider.childContextTypes.skin,\n translate: Provider.childContextTypes.translate\n};\n\nexport default ReviewHeader;\n"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,OAAOC,UAAP,MAAuB,YAAvB;AACA,OAAOC,KAAP,MAAkB,iBAAlB;AACA,OAAOC,QAAP,IAAkBC,uBAAlB,EAA2CC,kBAA3C,QAAoE,qBAApE;AACA,OAAOC,kBAAP,MAA+B,kCAA/B;AACA,OAAOC,iBAAP,MAA8B,oCAA9B;AACA,OAAOC,KAAP,MAAkB,aAAlB;AACA,OAAOC,SAAP,MAAsB,SAAtB;;AAEA,MAAMC,YAAY,GAAG,CAACC,KAAD,EAAQC,aAAR,KAA0B;EAC7C,MAAM;IAACC,KAAD;IAAQC,IAAR;IAAcC,SAAd;IAAyB,cAAcC,SAAvC;IAAkDC,WAAlD;IAA+DC;EAA/D,IAA8EP,KAApF;EACA,MAAMQ,SAAS,GAAGf,uBAAuB,CAACQ,aAAD,CAAzC;EACA,MAAMQ,IAAI,GAAGf,kBAAkB,CAACO,aAAD,CAA/B;EACA,MAAMS,oBAAoB,GAAGF,SAAS,CAAC,wBAAD,CAAtC;EACA,MAAMG,gBAAgB,GAAGpB,KAAK,CAAC,SAAD,EAAY,gBAAZ,EAA8BkB,IAA9B,CAA9B;EAEA,MAAMG,WAAW,GAAG;IAClBC,IAAI,EAAE,OADY;IAElB,aAAa,4BAFK;IAGlB,cAAcH,oBAHI;IAIlBI,OAAO,EAAER,WAJS;IAKlBS,IAAI,EAAE,YALY;IAMlBC,SAAS,EAAEnB,KAAK,CAACoB;EANC,CAApB;EASA,MAAMC,YAAY,GAAG5B,UAAU,CAC7BO,KAAK,CAACqB,YADuB,EAE7BX,WAAW,GAAGV,KAAK,CAACsB,qBAAT,GAAiC,IAFf,CAA/B;EAKA,oBACE;IAAK,SAAS,EAAEtB,KAAK,CAACuB,aAAtB;IAAqC,aAAU,eAA/C;IAA+D,cAAYf;EAA3E,gBACE;IAAK,SAAS,EAAER,KAAK,CAACwB;EAAtB,gBACE;IAAK,SAAS,EAAExB,KAAK,CAACyB,KAAtB;IAA6B,KAAK,EAAEnB,IAApC;IAA0C,cAAYA,IAAtD;IAA4D,aAAU;EAAtE,GACGA,IADH,CADF,eAIE;IACE,SAAS,EAAEN,KAAK,CAACO,SADnB;IAEE,KAAK,EAAE;MACLmB,KAAK,EAAEZ;IADF,CAFT;IAKE,KAAK,EAAEP,SALT;IAME,cAAYA,SANd;IAOE,aAAU;EAPZ,GASGA,SATH,CAJF,CADF,eAkBE;IAAK,SAAS,EAAEc;EAAhB,gBACE,oBAAC,iBAAD;IAAmB,KAAK,EAAEhB,KAA1B;IAAiC,GAAG,EAAE;EAAtC,EADF,CAlBF,eAsBE;IAAK,SAAS,EAAEL,KAAK,CAAC2B,iBAAtB;IAAyC,eAAY;EAArD,gBACE,oBAAC,kBAAD,EAAwBZ,WAAxB,CADF,CAtBF,CADF;AA4BD,CAjDD;;AAmDAb,YAAY,CAACD,SAAb,2CAAyBA,SAAzB;AAEAC,YAAY,CAAC0B,YAAb,GAA4B;EAC1BhB,IAAI,EAAEjB,QAAQ,CAACkC,iBAAT,CAA2BjB,IADP;EAE1BD,SAAS,EAAEhB,QAAQ,CAACkC,iBAAT,CAA2BlB;AAFZ,CAA5B;AAKA,eAAeT,YAAf"}
|
|
@@ -1,7 +1,32 @@
|
|
|
1
1
|
export default ReviewSlide;
|
|
2
|
-
declare function ReviewSlide(props: any): JSX.Element;
|
|
2
|
+
declare function ReviewSlide(props: any, legacyContext: any): JSX.Element;
|
|
3
3
|
declare namespace ReviewSlide {
|
|
4
4
|
export { propTypes };
|
|
5
|
+
export namespace contextTypes {
|
|
6
|
+
const skin: PropTypes.Requireable<PropTypes.InferProps<{
|
|
7
|
+
common: PropTypes.Requireable<{
|
|
8
|
+
[x: string]: any;
|
|
9
|
+
}>;
|
|
10
|
+
images: PropTypes.Requireable<PropTypes.InferProps<{
|
|
11
|
+
'logo-mobile': PropTypes.Requireable<any>;
|
|
12
|
+
logo: PropTypes.Requireable<any>;
|
|
13
|
+
'logo-email': PropTypes.Requireable<any>;
|
|
14
|
+
login: PropTypes.Requireable<any>;
|
|
15
|
+
}>>;
|
|
16
|
+
icons: PropTypes.Requireable<{
|
|
17
|
+
[x: string]: any;
|
|
18
|
+
}>;
|
|
19
|
+
mod: PropTypes.Requireable<{
|
|
20
|
+
[x: string]: any;
|
|
21
|
+
}>;
|
|
22
|
+
courses: PropTypes.Requireable<any[]>;
|
|
23
|
+
texts: PropTypes.Requireable<{
|
|
24
|
+
[x: string]: any;
|
|
25
|
+
}>;
|
|
26
|
+
}>>;
|
|
27
|
+
const translate: PropTypes.Requireable<(...args: any[]) => any>;
|
|
28
|
+
}
|
|
5
29
|
}
|
|
6
30
|
import propTypes from "./prop-types";
|
|
31
|
+
import PropTypes from "prop-types";
|
|
7
32
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/organism/review-slide/index.js"],"names":[],"mappings":";
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/organism/review-slide/index.js"],"names":[],"mappings":";AA8JA,0EAkDC"}
|
|
@@ -9,7 +9,7 @@ import Answer from '../../molecule/answer';
|
|
|
9
9
|
import ButtonLink from '../../atom/button-link';
|
|
10
10
|
import Loader from '../../atom/loader';
|
|
11
11
|
import ReviewCorrectionPopin from '../../molecule/review-correction-popin';
|
|
12
|
-
import { GetSkinFromContext } from '../../atom/provider';
|
|
12
|
+
import Provider, { GetSkinFromContext, GetTranslateFromContext } from '../../atom/provider';
|
|
13
13
|
import propTypes from './prop-types';
|
|
14
14
|
import style from './style.css';
|
|
15
15
|
|
|
@@ -69,7 +69,8 @@ CorrectionPopin.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
|
69
69
|
const ValidateButton = ({
|
|
70
70
|
slideIndex,
|
|
71
71
|
validateButton,
|
|
72
|
-
primarySkinColor
|
|
72
|
+
primarySkinColor,
|
|
73
|
+
ariaLabel
|
|
73
74
|
}) => {
|
|
74
75
|
const {
|
|
75
76
|
label,
|
|
@@ -79,7 +80,7 @@ const ValidateButton = ({
|
|
|
79
80
|
const validateButtonProps = {
|
|
80
81
|
type: 'primary',
|
|
81
82
|
label,
|
|
82
|
-
'aria-label':
|
|
83
|
+
'aria-label': ariaLabel,
|
|
83
84
|
'data-name': `slide-validate-button-${slideIndex}`,
|
|
84
85
|
onClick,
|
|
85
86
|
disabled,
|
|
@@ -111,7 +112,8 @@ const ValidateButton = ({
|
|
|
111
112
|
ValidateButton.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
112
113
|
slideIndex: PropTypes.string,
|
|
113
114
|
validateButton: propTypes.validateButton,
|
|
114
|
-
primarySkinColor: PropTypes.string
|
|
115
|
+
primarySkinColor: PropTypes.string,
|
|
116
|
+
ariaLabel: PropTypes.string
|
|
115
117
|
} : {};
|
|
116
118
|
|
|
117
119
|
const QuestionContainer = props => {
|
|
@@ -159,14 +161,16 @@ QuestionContainer.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
|
159
161
|
disableContent: PropTypes.bool
|
|
160
162
|
} : {};
|
|
161
163
|
|
|
162
|
-
const ReviewSlide = props => {
|
|
164
|
+
const ReviewSlide = (props, legacyContext) => {
|
|
163
165
|
const {
|
|
164
166
|
slide,
|
|
165
167
|
validateButton,
|
|
166
168
|
correctionPopinProps,
|
|
167
169
|
slideIndex = '0'
|
|
168
170
|
} = props;
|
|
169
|
-
const skin = GetSkinFromContext();
|
|
171
|
+
const skin = GetSkinFromContext(legacyContext);
|
|
172
|
+
const translate = GetTranslateFromContext(legacyContext);
|
|
173
|
+
const validateariaLabel = translate('validate_aria_label');
|
|
170
174
|
const primarySkinColor = useMemo(() => getOr('#00B0FF', 'common.primary', skin), [skin]);
|
|
171
175
|
const {
|
|
172
176
|
loading,
|
|
@@ -195,7 +199,8 @@ const ReviewSlide = props => {
|
|
|
195
199
|
slideIndex: slideIndex,
|
|
196
200
|
validateButton: validateButton,
|
|
197
201
|
primarySkinColor: primarySkinColor,
|
|
198
|
-
key: "validate-button"
|
|
202
|
+
key: "validate-button",
|
|
203
|
+
ariaLabel: validateariaLabel
|
|
199
204
|
}), /*#__PURE__*/React.createElement(CorrectionPopin, {
|
|
200
205
|
correctionPopinProps: correctionPopinProps,
|
|
201
206
|
slideIndex: slideIndex,
|
|
@@ -206,5 +211,9 @@ const ReviewSlide = props => {
|
|
|
206
211
|
};
|
|
207
212
|
|
|
208
213
|
ReviewSlide.propTypes = process.env.NODE_ENV !== "production" ? propTypes : {};
|
|
214
|
+
ReviewSlide.contextTypes = {
|
|
215
|
+
skin: Provider.childContextTypes.skin,
|
|
216
|
+
translate: Provider.childContextTypes.translate
|
|
217
|
+
};
|
|
209
218
|
export default ReviewSlide;
|
|
210
219
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":["React","useMemo","useEffect","PropTypes","classnames","get","getOr","Answer","ButtonLink","Loader","ReviewCorrectionPopin","GetSkinFromContext","propTypes","style","CorrectionPopin","correctionPopinProps","slideIndex","showCorrectionPopin","animateCorrectionPopin","klf","information","label","message","next","onClick","_correctionPopinProps","type","resultLabel","keyDownHandler","event","key","preventDefault","document","removeEventListener","addEventListener","correctionPopinWrapper","popinAnimation","string","bool","ValidateButton","validateButton","primarySkinColor","disabled","validateButtonProps","className","customStyle","backgroundColor","validateButtonWrapper","QuestionContainer","props","answerUI","questionText","questionOrigin","disableContent","slideContentContainer","disabledSlideContent","question","__html","help","answerContainer","shape","slide","ReviewSlide","skin","loading","loadingAriaLabel","parentContentTitle","disabledContent","loader"],"sources":["../../../src/organism/review-slide/index.js"],"sourcesContent":["import React, {useMemo, useEffect} from 'react';\nimport PropTypes from 'prop-types';\nimport classnames from 'classnames';\nimport get from 'lodash/fp/get';\nimport getOr from 'lodash/fp/getOr';\nimport Answer from '../../molecule/answer';\nimport ButtonLink from '../../atom/button-link';\nimport Loader from '../../atom/loader';\nimport ReviewCorrectionPopin from '../../molecule/review-correction-popin';\nimport {GetSkinFromContext} from '../../atom/provider';\nimport propTypes from './prop-types';\nimport style from './style.css';\n\nconst CorrectionPopin = ({\n correctionPopinProps,\n slideIndex,\n showCorrectionPopin,\n animateCorrectionPopin\n}) => {\n if (!showCorrectionPopin) return null;\n\n const klf = getOr({}, 'klf', correctionPopinProps);\n const information = getOr({label: '', message: ''}, 'information', correctionPopinProps);\n const next = get('next', correctionPopinProps);\n const onClick = get(['next', 'onClick'], correctionPopinProps);\n\n const _correctionPopinProps = {\n next: {\n onClick,\n label: next && next.label,\n 'data-name': `next-question-button-${slideIndex}`,\n 'aria-label': next && next['aria-label']\n },\n klf,\n information,\n type: correctionPopinProps.type,\n resultLabel: correctionPopinProps.resultLabel\n };\n\n // there is an error of eslint here because this useEffect will be only there when the correctionPopin will be there\n // but that is on purpose to go to the next slide if you press enter when the correctionPopin is present\n // istanbul ignore next\n // eslint-disable-next-line react-hooks/rules-of-hooks\n useEffect(() => {\n const keyDownHandler = event => {\n if (event.key === 'Enter' || event.key === ' ') {\n event.preventDefault();\n onClick();\n document.removeEventListener('keydown', keyDownHandler);\n }\n };\n document.addEventListener('keydown', keyDownHandler);\n }, []);\n\n return (\n <div\n className={classnames(\n style.correctionPopinWrapper,\n animateCorrectionPopin ? style.popinAnimation : null\n )}\n >\n <ReviewCorrectionPopin {..._correctionPopinProps} />\n </div>\n );\n};\n\nCorrectionPopin.propTypes = {\n slideIndex: PropTypes.string,\n showCorrectionPopin: PropTypes.bool,\n animateCorrectionPopin: PropTypes.bool,\n correctionPopinProps: propTypes.correctionPopinProps\n};\n\nconst ValidateButton = ({slideIndex, validateButton, primarySkinColor}) => {\n const {label, onClick, disabled} = validateButton;\n const validateButtonProps = {\n type: 'primary',\n label,\n 'aria-label': label,\n 'data-name': `slide-validate-button-${slideIndex}`,\n onClick,\n disabled,\n className: style.validateButton,\n customStyle: {\n backgroundColor: primarySkinColor\n }\n };\n\n /* istanbul ignore next */\n useEffect(() => {\n const keyDownHandler = event => {\n if (event.key === 'Enter' || event.key === ' ') {\n event.preventDefault();\n }\n };\n if (disabled) document.addEventListener('keydown', keyDownHandler);\n return () => {\n document.removeEventListener('keydown', keyDownHandler);\n };\n }, [disabled]);\n\n return (\n <div key=\"button-wrapper\" className={style.validateButtonWrapper}>\n <ButtonLink {...validateButtonProps} />\n </div>\n );\n};\n\nValidateButton.propTypes = {\n slideIndex: PropTypes.string,\n validateButton: propTypes.validateButton,\n primarySkinColor: PropTypes.string\n};\n\nconst QuestionContainer = props => {\n const {answerUI, questionText, questionOrigin, disableContent} = props;\n if (!answerUI || !questionText) return null;\n\n return (\n <div\n key=\"content-container\"\n data-testid=\"content-container\"\n className={classnames(\n style.slideContentContainer,\n disableContent ? style.disabledSlideContent : null\n )}\n >\n <div key=\"from-course\" className={style.questionOrigin}>\n {questionOrigin}\n </div>\n <div\n key=\"title\"\n data-testid=\"slide-question\"\n className={style.question}\n // eslint-disable-next-line react/no-danger\n dangerouslySetInnerHTML={{__html: questionText}}\n />\n <div\n key=\"help\"\n className={style.help}\n // eslint-disable-next-line react/no-danger\n dangerouslySetInnerHTML={{__html: get('help', answerUI)}}\n />\n <div key=\"answer-container\" className={style.answerContainer}>\n <Answer {...answerUI} key=\"answer\" />\n </div>\n </div>\n );\n};\n\nQuestionContainer.propTypes = {\n answerUI: PropTypes.shape(propTypes.slide.answerUI),\n questionText: PropTypes.string,\n questionOrigin: PropTypes.string,\n disableContent: PropTypes.bool\n};\n\nconst ReviewSlide = props => {\n const {slide, validateButton, correctionPopinProps, slideIndex = '0'} = props;\n\n const skin = GetSkinFromContext();\n const primarySkinColor = useMemo(() => getOr('#00B0FF', 'common.primary', skin), [skin]);\n const {\n loading,\n loadingAriaLabel,\n parentContentTitle,\n questionText,\n disabledContent,\n answerUI,\n showCorrectionPopin,\n animateCorrectionPopin\n } = slide;\n\n return (\n <div data-testid=\"review-slide\" className={style.slide}>\n {loading ? (\n <Loader className={style.loader} theme=\"default\" aria-label={loadingAriaLabel} />\n ) : (\n <>\n <QuestionContainer\n questionOrigin={parentContentTitle}\n questionText={questionText}\n answerUI={answerUI}\n disableContent={disabledContent}\n key=\"question-container\"\n />\n <ValidateButton\n slideIndex={slideIndex}\n validateButton={validateButton}\n primarySkinColor={primarySkinColor}\n key=\"validate-button\"\n />\n <CorrectionPopin\n correctionPopinProps={correctionPopinProps}\n slideIndex={slideIndex}\n showCorrectionPopin={showCorrectionPopin}\n animateCorrectionPopin={animateCorrectionPopin}\n key=\"correction-popin\"\n />\n </>\n )}\n </div>\n );\n};\n\nReviewSlide.propTypes = propTypes;\n\nexport default ReviewSlide;\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"index.js","names":["React","useMemo","useEffect","PropTypes","classnames","get","getOr","Answer","ButtonLink","Loader","ReviewCorrectionPopin","Provider","GetSkinFromContext","GetTranslateFromContext","propTypes","style","CorrectionPopin","correctionPopinProps","slideIndex","showCorrectionPopin","animateCorrectionPopin","klf","information","label","message","next","onClick","_correctionPopinProps","type","resultLabel","keyDownHandler","event","key","preventDefault","document","removeEventListener","addEventListener","correctionPopinWrapper","popinAnimation","string","bool","ValidateButton","validateButton","primarySkinColor","ariaLabel","disabled","validateButtonProps","className","customStyle","backgroundColor","validateButtonWrapper","QuestionContainer","props","answerUI","questionText","questionOrigin","disableContent","slideContentContainer","disabledSlideContent","question","__html","help","answerContainer","shape","slide","ReviewSlide","legacyContext","skin","translate","validateariaLabel","loading","loadingAriaLabel","parentContentTitle","disabledContent","loader","contextTypes","childContextTypes"],"sources":["../../../src/organism/review-slide/index.js"],"sourcesContent":["import React, {useMemo, useEffect} from 'react';\nimport PropTypes from 'prop-types';\nimport classnames from 'classnames';\nimport get from 'lodash/fp/get';\nimport getOr from 'lodash/fp/getOr';\nimport Answer from '../../molecule/answer';\nimport ButtonLink from '../../atom/button-link';\nimport Loader from '../../atom/loader';\nimport ReviewCorrectionPopin from '../../molecule/review-correction-popin';\nimport Provider, {GetSkinFromContext, GetTranslateFromContext} from '../../atom/provider';\nimport propTypes from './prop-types';\nimport style from './style.css';\n\nconst CorrectionPopin = ({\n correctionPopinProps,\n slideIndex,\n showCorrectionPopin,\n animateCorrectionPopin\n}) => {\n if (!showCorrectionPopin) return null;\n\n const klf = getOr({}, 'klf', correctionPopinProps);\n const information = getOr({label: '', message: ''}, 'information', correctionPopinProps);\n const next = get('next', correctionPopinProps);\n const onClick = get(['next', 'onClick'], correctionPopinProps);\n\n const _correctionPopinProps = {\n next: {\n onClick,\n label: next && next.label,\n 'data-name': `next-question-button-${slideIndex}`,\n 'aria-label': next && next['aria-label']\n },\n klf,\n information,\n type: correctionPopinProps.type,\n resultLabel: correctionPopinProps.resultLabel\n };\n\n // there is an error of eslint here because this useEffect will be only there when the correctionPopin will be there\n // but that is on purpose to go to the next slide if you press enter when the correctionPopin is present\n // istanbul ignore next\n // eslint-disable-next-line react-hooks/rules-of-hooks\n useEffect(() => {\n const keyDownHandler = event => {\n if (event.key === 'Enter' || event.key === ' ') {\n event.preventDefault();\n onClick();\n document.removeEventListener('keydown', keyDownHandler);\n }\n };\n document.addEventListener('keydown', keyDownHandler);\n }, []);\n\n return (\n <div\n className={classnames(\n style.correctionPopinWrapper,\n animateCorrectionPopin ? style.popinAnimation : null\n )}\n >\n <ReviewCorrectionPopin {..._correctionPopinProps} />\n </div>\n );\n};\n\nCorrectionPopin.propTypes = {\n slideIndex: PropTypes.string,\n showCorrectionPopin: PropTypes.bool,\n animateCorrectionPopin: PropTypes.bool,\n correctionPopinProps: propTypes.correctionPopinProps\n};\n\nconst ValidateButton = ({slideIndex, validateButton, primarySkinColor, ariaLabel}) => {\n const {label, onClick, disabled} = validateButton;\n const validateButtonProps = {\n type: 'primary',\n label,\n 'aria-label': ariaLabel,\n 'data-name': `slide-validate-button-${slideIndex}`,\n onClick,\n disabled,\n className: style.validateButton,\n customStyle: {\n backgroundColor: primarySkinColor\n }\n };\n\n /* istanbul ignore next */\n useEffect(() => {\n const keyDownHandler = event => {\n if (event.key === 'Enter' || event.key === ' ') {\n event.preventDefault();\n }\n };\n if (disabled) document.addEventListener('keydown', keyDownHandler);\n return () => {\n document.removeEventListener('keydown', keyDownHandler);\n };\n }, [disabled]);\n\n return (\n <div key=\"button-wrapper\" className={style.validateButtonWrapper}>\n <ButtonLink {...validateButtonProps} />\n </div>\n );\n};\n\nValidateButton.propTypes = {\n slideIndex: PropTypes.string,\n validateButton: propTypes.validateButton,\n primarySkinColor: PropTypes.string,\n ariaLabel: PropTypes.string\n};\n\nconst QuestionContainer = props => {\n const {answerUI, questionText, questionOrigin, disableContent} = props;\n if (!answerUI || !questionText) return null;\n\n return (\n <div\n key=\"content-container\"\n data-testid=\"content-container\"\n className={classnames(\n style.slideContentContainer,\n disableContent ? style.disabledSlideContent : null\n )}\n >\n <div key=\"from-course\" className={style.questionOrigin}>\n {questionOrigin}\n </div>\n <div\n key=\"title\"\n data-testid=\"slide-question\"\n className={style.question}\n // eslint-disable-next-line react/no-danger\n dangerouslySetInnerHTML={{__html: questionText}}\n />\n <div\n key=\"help\"\n className={style.help}\n // eslint-disable-next-line react/no-danger\n dangerouslySetInnerHTML={{__html: get('help', answerUI)}}\n />\n <div key=\"answer-container\" className={style.answerContainer}>\n <Answer {...answerUI} key=\"answer\" />\n </div>\n </div>\n );\n};\n\nQuestionContainer.propTypes = {\n answerUI: PropTypes.shape(propTypes.slide.answerUI),\n questionText: PropTypes.string,\n questionOrigin: PropTypes.string,\n disableContent: PropTypes.bool\n};\n\nconst ReviewSlide = (props, legacyContext) => {\n const {slide, validateButton, correctionPopinProps, slideIndex = '0'} = props;\n\n const skin = GetSkinFromContext(legacyContext);\n const translate = GetTranslateFromContext(legacyContext);\n\n const validateariaLabel = translate('validate_aria_label');\n const primarySkinColor = useMemo(() => getOr('#00B0FF', 'common.primary', skin), [skin]);\n const {\n loading,\n loadingAriaLabel,\n parentContentTitle,\n questionText,\n disabledContent,\n answerUI,\n showCorrectionPopin,\n animateCorrectionPopin\n } = slide;\n\n return (\n <div data-testid=\"review-slide\" className={style.slide}>\n {loading ? (\n <Loader className={style.loader} theme=\"default\" aria-label={loadingAriaLabel} />\n ) : (\n <>\n <QuestionContainer\n questionOrigin={parentContentTitle}\n questionText={questionText}\n answerUI={answerUI}\n disableContent={disabledContent}\n key=\"question-container\"\n />\n <ValidateButton\n slideIndex={slideIndex}\n validateButton={validateButton}\n primarySkinColor={primarySkinColor}\n key=\"validate-button\"\n ariaLabel={validateariaLabel}\n />\n <CorrectionPopin\n correctionPopinProps={correctionPopinProps}\n slideIndex={slideIndex}\n showCorrectionPopin={showCorrectionPopin}\n animateCorrectionPopin={animateCorrectionPopin}\n key=\"correction-popin\"\n />\n </>\n )}\n </div>\n );\n};\n\nReviewSlide.propTypes = propTypes;\n\nReviewSlide.contextTypes = {\n skin: Provider.childContextTypes.skin,\n translate: Provider.childContextTypes.translate\n};\n\nexport default ReviewSlide;\n"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atom/button/index.js"],"names":[],"mappings":";
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atom/button/index.js"],"names":[],"mappings":";AA6FA,iDA0BC"}
|
package/lib/atom/button/index.js
CHANGED
|
@@ -32,7 +32,8 @@ const ButtonContent = props => {
|
|
|
32
32
|
children,
|
|
33
33
|
type,
|
|
34
34
|
style,
|
|
35
|
-
'data-name': dataName
|
|
35
|
+
'data-name': dataName,
|
|
36
|
+
'aria-label': ariaLabel
|
|
36
37
|
} = props;
|
|
37
38
|
const anchorClassName = disabled && `${className} ${_style.default.disabledAnchor}` || className;
|
|
38
39
|
const anchorOnClick = disabled && null || onClick;
|
|
@@ -48,7 +49,8 @@ const ButtonContent = props => {
|
|
|
48
49
|
onClick: anchorOnClick,
|
|
49
50
|
target: target,
|
|
50
51
|
className: anchorClassName,
|
|
51
|
-
style: style
|
|
52
|
+
style: style,
|
|
53
|
+
"aria-label": ariaLabel
|
|
52
54
|
}, submitValue || children || 'submit');
|
|
53
55
|
|
|
54
56
|
case 'a':
|
|
@@ -88,7 +90,8 @@ ButtonContent.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
|
88
90
|
children: _propTypes.default.node,
|
|
89
91
|
className: _propTypes.default.string,
|
|
90
92
|
style: _propTypes.default.shape({}),
|
|
91
|
-
'data-name': _propTypes.default.string
|
|
93
|
+
'data-name': _propTypes.default.string,
|
|
94
|
+
'aria-label': _propTypes.default.string
|
|
92
95
|
} : {};
|
|
93
96
|
|
|
94
97
|
const Button = props => {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":["ButtonContent","props","color","submitValue","disabled","download","href","target","onClick","className","cssStyle","button","children","type","style","dataName","anchorClassName","disabledAnchor","anchorOnClick","anchorHref","inputClassName","buttonDisabled","propTypes","ColorPropType","PropTypes","string","bool","oneOf","func","node","shape","Button","buttonContentClassName","isLinkDisabled","cNames","classnames","buttonContent"],"sources":["../../../src/atom/button/index.js"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport classnames from 'classnames';\nimport {ColorPropType} from '../../util/proptypes';\nimport Link from '../link';\nimport cssStyle from './style.css';\n\nconst ButtonContent = props => {\n const {\n color,\n submitValue,\n disabled,\n download,\n href,\n target,\n onClick,\n className = cssStyle.button,\n children,\n type,\n style,\n 'data-name': dataName\n } = props;\n const anchorClassName = (disabled && `${className} ${cssStyle.disabledAnchor}`) || className;\n const anchorOnClick = (disabled && null) || onClick;\n const anchorHref = (disabled && null) || href;\n const inputClassName = (disabled && `${className} ${cssStyle.buttonDisabled}`) || className;\n\n switch (type) {\n case 'link':\n return (\n <Link\n data-name={dataName}\n href={anchorHref}\n download={download}\n onClick={anchorOnClick}\n target={target}\n className={anchorClassName}\n style={style}\n >\n {submitValue || children || 'submit'}\n </Link>\n );\n\n case 'a':\n return (\n <a\n data-name={dataName}\n href={anchorHref}\n target={target}\n className={anchorClassName}\n onClick={anchorOnClick}\n style={style}\n >\n {submitValue || children}\n </a>\n );\n\n default:\n return (\n <input\n data-name={dataName}\n type={type}\n value={submitValue}\n disabled={disabled}\n onClick={onClick}\n className={inputClassName}\n style={{\n color,\n ...style\n }}\n />\n );\n }\n};\n\nButtonContent.propTypes = {\n color: ColorPropType,\n submitValue: PropTypes.string,\n disabled: PropTypes.bool,\n href: PropTypes.string,\n download: PropTypes.bool,\n target: PropTypes.oneOf(['_self', '_blank', '_parent', '_top']),\n type: PropTypes.string,\n onClick: PropTypes.func,\n children: PropTypes.node,\n className: PropTypes.string,\n style: PropTypes.shape({}),\n 'data-name': PropTypes.string\n};\n\nconst Button = props => {\n const {\n className,\n buttonContentClassName,\n isLinkDisabled,\n type = 'submit',\n children,\n style\n } = props;\n const cNames =\n (isLinkDisabled && classnames([cssStyle.disabledAnchor, className])) ||\n classnames([cssStyle.button, className]);\n return (\n <div className={cNames}>\n <ButtonContent\n {...props}\n type={type}\n className={buttonContentClassName ? buttonContentClassName : cssStyle.buttonContent}\n style={{\n ...style\n }}\n >\n {children}\n </ButtonContent>\n </div>\n );\n};\n\nButton.propTypes = {\n color: ColorPropType,\n submitValue: PropTypes.string,\n disabled: PropTypes.bool,\n isLinkDisabled: PropTypes.bool,\n href: PropTypes.string,\n download: PropTypes.bool,\n target: PropTypes.oneOf(['_self', '_blank', '_parent', '_top']),\n type: PropTypes.string,\n onClick: PropTypes.func,\n children: PropTypes.node,\n className: PropTypes.string,\n buttonContentClassName: PropTypes.string,\n style: PropTypes.shape({}),\n 'data-name': PropTypes.string\n};\n\nexport default Button;\n"],"mappings":";;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;AAEA,MAAMA,aAAa,GAAGC,KAAK,IAAI;EAC7B,MAAM;IACJC,KADI;IAEJC,WAFI;IAGJC,QAHI;IAIJC,QAJI;IAKJC,IALI;IAMJC,MANI;IAOJC,OAPI;IAQJC,SAAS,GAAGC,cAAA,CAASC,MARjB;IASJC,QATI;IAUJC,IAVI;IAWJC,KAXI;IAYJ,aAAaC;
|
|
1
|
+
{"version":3,"file":"index.js","names":["ButtonContent","props","color","submitValue","disabled","download","href","target","onClick","className","cssStyle","button","children","type","style","dataName","ariaLabel","anchorClassName","disabledAnchor","anchorOnClick","anchorHref","inputClassName","buttonDisabled","propTypes","ColorPropType","PropTypes","string","bool","oneOf","func","node","shape","Button","buttonContentClassName","isLinkDisabled","cNames","classnames","buttonContent"],"sources":["../../../src/atom/button/index.js"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport classnames from 'classnames';\nimport {ColorPropType} from '../../util/proptypes';\nimport Link from '../link';\nimport cssStyle from './style.css';\n\nconst ButtonContent = props => {\n const {\n color,\n submitValue,\n disabled,\n download,\n href,\n target,\n onClick,\n className = cssStyle.button,\n children,\n type,\n style,\n 'data-name': dataName,\n 'aria-label': ariaLabel\n } = props;\n const anchorClassName = (disabled && `${className} ${cssStyle.disabledAnchor}`) || className;\n const anchorOnClick = (disabled && null) || onClick;\n const anchorHref = (disabled && null) || href;\n const inputClassName = (disabled && `${className} ${cssStyle.buttonDisabled}`) || className;\n\n switch (type) {\n case 'link':\n return (\n <Link\n data-name={dataName}\n href={anchorHref}\n download={download}\n onClick={anchorOnClick}\n target={target}\n className={anchorClassName}\n style={style}\n aria-label={ariaLabel}\n >\n {submitValue || children || 'submit'}\n </Link>\n );\n\n case 'a':\n return (\n <a\n data-name={dataName}\n href={anchorHref}\n target={target}\n className={anchorClassName}\n onClick={anchorOnClick}\n style={style}\n >\n {submitValue || children}\n </a>\n );\n\n default:\n return (\n <input\n data-name={dataName}\n type={type}\n value={submitValue}\n disabled={disabled}\n onClick={onClick}\n className={inputClassName}\n style={{\n color,\n ...style\n }}\n />\n );\n }\n};\n\nButtonContent.propTypes = {\n color: ColorPropType,\n submitValue: PropTypes.string,\n disabled: PropTypes.bool,\n href: PropTypes.string,\n download: PropTypes.bool,\n target: PropTypes.oneOf(['_self', '_blank', '_parent', '_top']),\n type: PropTypes.string,\n onClick: PropTypes.func,\n children: PropTypes.node,\n className: PropTypes.string,\n style: PropTypes.shape({}),\n 'data-name': PropTypes.string,\n 'aria-label': PropTypes.string\n};\n\nconst Button = props => {\n const {\n className,\n buttonContentClassName,\n isLinkDisabled,\n type = 'submit',\n children,\n style\n } = props;\n const cNames =\n (isLinkDisabled && classnames([cssStyle.disabledAnchor, className])) ||\n classnames([cssStyle.button, className]);\n return (\n <div className={cNames}>\n <ButtonContent\n {...props}\n type={type}\n className={buttonContentClassName ? buttonContentClassName : cssStyle.buttonContent}\n style={{\n ...style\n }}\n >\n {children}\n </ButtonContent>\n </div>\n );\n};\n\nButton.propTypes = {\n color: ColorPropType,\n submitValue: PropTypes.string,\n disabled: PropTypes.bool,\n isLinkDisabled: PropTypes.bool,\n href: PropTypes.string,\n download: PropTypes.bool,\n target: PropTypes.oneOf(['_self', '_blank', '_parent', '_top']),\n type: PropTypes.string,\n onClick: PropTypes.func,\n children: PropTypes.node,\n className: PropTypes.string,\n buttonContentClassName: PropTypes.string,\n style: PropTypes.shape({}),\n 'data-name': PropTypes.string\n};\n\nexport default Button;\n"],"mappings":"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"}
|
|
@@ -4,7 +4,6 @@
|
|
|
4
4
|
@value white from colors;
|
|
5
5
|
@value light from colors;
|
|
6
6
|
@value dark from colors;
|
|
7
|
-
@value positive from colors;
|
|
8
7
|
@value cm_grey_200 from colors;
|
|
9
8
|
@value black from colors;
|
|
10
9
|
@value cm_primary_blue from colors;
|
|
@@ -79,7 +78,7 @@
|
|
|
79
78
|
}
|
|
80
79
|
|
|
81
80
|
.checkbox:checked ~ label {
|
|
82
|
-
background:
|
|
81
|
+
background: cm_primary_blue;
|
|
83
82
|
}
|
|
84
83
|
|
|
85
84
|
.default input:checked ~ label::after {
|
|
@@ -5,6 +5,11 @@ declare namespace Handle {
|
|
|
5
5
|
const onPan: PropTypes.Requireable<(...args: any[]) => any>;
|
|
6
6
|
const onPanStart: PropTypes.Requireable<(...args: any[]) => any>;
|
|
7
7
|
const onPanEnd: PropTypes.Requireable<(...args: any[]) => any>;
|
|
8
|
+
const HammerForTesting: PropTypes.Requireable<PropTypes.InferProps<{
|
|
9
|
+
on: PropTypes.Requireable<(...args: any[]) => any>;
|
|
10
|
+
destroy: PropTypes.Requireable<(...args: any[]) => any>;
|
|
11
|
+
stop: PropTypes.Requireable<(...args: any[]) => any>;
|
|
12
|
+
}>>;
|
|
8
13
|
}
|
|
9
14
|
namespace contextTypes {
|
|
10
15
|
const skin: PropTypes.Requireable<PropTypes.InferProps<{
|
package/lib/atom/range/handle.js
CHANGED
|
@@ -55,13 +55,14 @@ const Handle = (props, legacyContext) => {
|
|
|
55
55
|
const {
|
|
56
56
|
onPanStart = _noop2.default,
|
|
57
57
|
onPanEnd = _noop2.default,
|
|
58
|
-
onPan = _noop2.default
|
|
58
|
+
onPan = _noop2.default,
|
|
59
|
+
HammerForTesting
|
|
59
60
|
} = props;
|
|
60
61
|
const handle = (0, _react.useRef)();
|
|
61
|
-
const
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
}, [handle]);
|
|
62
|
+
const hammer = (0, _react.useMemo)(() => {
|
|
63
|
+
return HammerForTesting || handle.current && new Hammer(handle.current); // (we need to mount Hammer when handle.current is rendered and ready)
|
|
64
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
65
|
+
}, [handle.current, HammerForTesting]);
|
|
65
66
|
(0, _react.useEffect)(() => {
|
|
66
67
|
if (!hammer) return;
|
|
67
68
|
hammer.on('panstart', onPanStart);
|
|
@@ -70,11 +71,11 @@ const Handle = (props, legacyContext) => {
|
|
|
70
71
|
return () => {
|
|
71
72
|
hammer.stop();
|
|
72
73
|
hammer.destroy();
|
|
73
|
-
setHammer(null);
|
|
74
74
|
};
|
|
75
75
|
}, [hammer, onPanStart, onPanEnd, onPan]);
|
|
76
76
|
return /*#__PURE__*/_react.default.createElement("div", {
|
|
77
|
-
className: _handle.default.wrapper
|
|
77
|
+
className: _handle.default.wrapper,
|
|
78
|
+
"data-testid": "handle-wrapper"
|
|
78
79
|
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
79
80
|
style: {
|
|
80
81
|
backgroundColor,
|
|
@@ -89,7 +90,12 @@ const Handle = (props, legacyContext) => {
|
|
|
89
90
|
Handle.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
90
91
|
onPan: _propTypes.default.func,
|
|
91
92
|
onPanStart: _propTypes.default.func,
|
|
92
|
-
onPanEnd: _propTypes.default.func
|
|
93
|
+
onPanEnd: _propTypes.default.func,
|
|
94
|
+
HammerForTesting: _propTypes.default.shape({
|
|
95
|
+
on: _propTypes.default.func,
|
|
96
|
+
destroy: _propTypes.default.func,
|
|
97
|
+
stop: _propTypes.default.func
|
|
98
|
+
})
|
|
93
99
|
} : {};
|
|
94
100
|
Handle.contextTypes = {
|
|
95
101
|
skin: _provider.default.childContextTypes.skin
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"handle.js","names":["NoopHammer","constructor","on","stop","destroy","Hammer","window","require","Handle","props","legacyContext","skin","GetSkinFromContext","primaryColor","backgroundColor","onPanStart","onPanEnd","onPan","handle","useRef","hammer","
|
|
1
|
+
{"version":3,"file":"handle.js","names":["NoopHammer","constructor","on","stop","destroy","Hammer","window","require","Handle","props","legacyContext","skin","GetSkinFromContext","primaryColor","backgroundColor","onPanStart","onPanEnd","onPan","HammerForTesting","handle","useRef","hammer","useMemo","current","useEffect","style","wrapper","boxShadow","getShadowBoxColorFromPrimary","default","propTypes","PropTypes","func","shape","contextTypes","Provider","childContextTypes"],"sources":["../../../src/atom/range/handle.js"],"sourcesContent":["import {noop, getOr} from 'lodash/fp';\nimport React, {useEffect, useMemo, useRef} 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, HammerForTesting} = props;\n\n const handle = useRef();\n\n const hammer = useMemo(() => {\n return HammerForTesting || (handle.current && new Hammer(handle.current));\n // (we need to mount Hammer when handle.current is rendered and ready)\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [handle.current, HammerForTesting]);\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 };\n }, [hammer, onPanStart, onPanEnd, onPan]);\n\n return (\n <div className={style.wrapper} data-testid=\"handle-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 HammerForTesting: PropTypes.shape({\n on: PropTypes.func,\n destroy: PropTypes.func,\n stop: PropTypes.func\n })\n};\n\nHandle.contextTypes = {\n skin: Provider.childContextTypes.skin\n};\n\nexport default Handle;\n"],"mappings":";;;;;;;;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;;;AAEA,MAAMA,UAAN,CAAiB;EACfC,WAAW,GAAG,CAAE,CADD,CAGf;;;EACAC,EAAE,GAAG;IACH;EACD,CANc,CAQf;;;EACAC,IAAI,GAAG;IACL;EACD,CAXc,CAaf;;;EACAC,OAAO,GAAG;IACR;EACD;;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;EACvC,MAAMC,IAAI,GAAG,IAAAC,4BAAA,EAAmBF,aAAnB,CAAb;EACA,MAAMG,YAAY,GAAG,qBAAM,SAAN,EAAiB,gBAAjB,EAAmCF,IAAnC,CAArB;EACA,MAAMG,eAAe,GAAGD,YAAxB;EACA,MAAM;IAACE,UAAU,iBAAX;IAAoBC,QAAQ,iBAA5B;IAAqCC,KAAK,iBAA1C;IAAmDC;EAAnD,IAAuET,KAA7E;EAEA,MAAMU,MAAM,GAAG,IAAAC,aAAA,GAAf;EAEA,MAAMC,MAAM,GAAG,IAAAC,cAAA,EAAQ,MAAM;IAC3B,OAAOJ,gBAAgB,IAAKC,MAAM,CAACI,OAAP,IAAkB,IAAIlB,MAAJ,CAAWc,MAAM,CAACI,OAAlB,CAA9C,CAD2B,CAE3B;IACA;EACD,CAJc,EAIZ,CAACJ,MAAM,CAACI,OAAR,EAAiBL,gBAAjB,CAJY,CAAf;EAMA,IAAAM,gBAAA,EAAU,MAAM;IACd,IAAI,CAACH,MAAL,EAAa;IACbA,MAAM,CAACnB,EAAP,CAAU,UAAV,EAAsBa,UAAtB;IACAM,MAAM,CAACnB,EAAP,CAAU,QAAV,EAAoBc,QAApB;IAEAK,MAAM,CAACnB,EAAP,CAAU,kBAAV,EAA8Be,KAA9B;IAEA,OAAO,MAAM;MACXI,MAAM,CAAClB,IAAP;MACAkB,MAAM,CAACjB,OAAP;IACD,CAHD;EAID,CAXD,EAWG,CAACiB,MAAD,EAASN,UAAT,EAAqBC,QAArB,EAA+BC,KAA/B,CAXH;EAaA,oBACE;IAAK,SAAS,EAAEQ,eAAA,CAAMC,OAAtB;IAA+B,eAAY;EAA3C,gBACE;IACE,KAAK,EAAE;MACLZ,eADK;MAELa,SAAS,EAAG,gBAAe,IAAAC,0DAAA,EAA6Bf,YAA7B,CAA2C;IAFjE,CADT;IAKE,SAAS,EAAEY,eAAA,CAAMI,OALnB;IAME,GAAG,EAAEV,MANP;IAOE,aAAW;EAPb,EADF,CADF;AAaD,CAxCD;;AA0CAX,MAAM,CAACsB,SAAP,2CAAmB;EACjBb,KAAK,EAAEc,kBAAA,CAAUC,IADA;EAEjBjB,UAAU,EAAEgB,kBAAA,CAAUC,IAFL;EAGjBhB,QAAQ,EAAEe,kBAAA,CAAUC,IAHH;EAIjBd,gBAAgB,EAAEa,kBAAA,CAAUE,KAAV,CAAgB;IAChC/B,EAAE,EAAE6B,kBAAA,CAAUC,IADkB;IAEhC5B,OAAO,EAAE2B,kBAAA,CAAUC,IAFa;IAGhC7B,IAAI,EAAE4B,kBAAA,CAAUC;EAHgB,CAAhB;AAJD,CAAnB;AAWAxB,MAAM,CAAC0B,YAAP,GAAsB;EACpBvB,IAAI,EAAEwB,iBAAA,CAASC,iBAAT,CAA2BzB;AADb,CAAtB;eAIeH,M"}
|
|
@@ -4,6 +4,16 @@ declare class Range extends React.Component<any, any, any> {
|
|
|
4
4
|
onChange: PropTypes.Requireable<(...args: any[]) => any>;
|
|
5
5
|
onChangeEnd: PropTypes.Requireable<(...args: any[]) => any>;
|
|
6
6
|
multi: PropTypes.Requireable<boolean>;
|
|
7
|
+
HammerForTestingMin: PropTypes.Requireable<PropTypes.InferProps<{
|
|
8
|
+
on: PropTypes.Requireable<(...args: any[]) => any>;
|
|
9
|
+
destroy: PropTypes.Requireable<(...args: any[]) => any>;
|
|
10
|
+
stop: PropTypes.Requireable<(...args: any[]) => any>;
|
|
11
|
+
}>>;
|
|
12
|
+
HammerForTestingMax: PropTypes.Requireable<PropTypes.InferProps<{
|
|
13
|
+
on: PropTypes.Requireable<(...args: any[]) => any>;
|
|
14
|
+
destroy: PropTypes.Requireable<(...args: any[]) => any>;
|
|
15
|
+
stop: PropTypes.Requireable<(...args: any[]) => any>;
|
|
16
|
+
}>>;
|
|
7
17
|
value: PropTypes.Requireable<NonNullable<number | (number | null | undefined)[] | null | undefined>>;
|
|
8
18
|
};
|
|
9
19
|
static getDerivedStateFromProps(props: any, state: any): {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atom/range/index.js"],"names":[],"mappings":";
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atom/range/index.js"],"names":[],"mappings":";AA4EA;IACE;;;;;;;;;;;;;;;MAQE;IAEF;;;aAMC;IAED,sCAcC;IAXC;;;;MAGC;IAkEH,0BAmBC;IA3ED,8BAEC;IAED,8BAKC;IAED,8BAKC;IAED,iCAKC;IAED,iCAKC;IA7BC,WAAkB;IA+BpB,8DAcC;IAED,iDAMC;IAuBD,sBAyCC;CACF"}
|
package/lib/atom/range/index.js
CHANGED
|
@@ -49,9 +49,13 @@ const RenderHandles = props => {
|
|
|
49
49
|
onHandleMinChange,
|
|
50
50
|
onHandleMinChangeEnd,
|
|
51
51
|
onHandleMaxChange,
|
|
52
|
-
onHandleMaxChangeEnd
|
|
52
|
+
onHandleMaxChangeEnd,
|
|
53
|
+
HammerForTestingMin,
|
|
54
|
+
HammerForTestingMax
|
|
53
55
|
} = props;
|
|
54
|
-
return /*#__PURE__*/_react.default.createElement("div",
|
|
56
|
+
return /*#__PURE__*/_react.default.createElement("div", {
|
|
57
|
+
"data-testid": "handles"
|
|
58
|
+
}, multi ? /*#__PURE__*/_react.default.createElement("span", {
|
|
55
59
|
className: pending ? _style.default.handle : _style.default.animatedHandle,
|
|
56
60
|
style: {
|
|
57
61
|
left: `${left * 100}%`
|
|
@@ -59,7 +63,8 @@ const RenderHandles = props => {
|
|
|
59
63
|
}, /*#__PURE__*/_react.default.createElement(_handle.default, {
|
|
60
64
|
axis: "x",
|
|
61
65
|
onPan: onHandleMinChange,
|
|
62
|
-
onPanEnd: onHandleMinChangeEnd
|
|
66
|
+
onPanEnd: onHandleMinChangeEnd,
|
|
67
|
+
HammerForTesting: HammerForTestingMin
|
|
63
68
|
})) : null, /*#__PURE__*/_react.default.createElement("span", {
|
|
64
69
|
className: pending ? _style.default.handle : _style.default.animatedHandle,
|
|
65
70
|
style: {
|
|
@@ -68,7 +73,8 @@ const RenderHandles = props => {
|
|
|
68
73
|
}, /*#__PURE__*/_react.default.createElement(_handle.default, {
|
|
69
74
|
axis: "x",
|
|
70
75
|
onPan: onHandleMaxChange,
|
|
71
|
-
onPanEnd: onHandleMaxChangeEnd
|
|
76
|
+
onPanEnd: onHandleMaxChangeEnd,
|
|
77
|
+
HammerForTesting: HammerForTestingMax
|
|
72
78
|
})));
|
|
73
79
|
};
|
|
74
80
|
|
|
@@ -80,7 +86,9 @@ RenderHandles.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
|
80
86
|
onHandleMinChange: _propTypes.default.func,
|
|
81
87
|
onHandleMinChangeEnd: _propTypes.default.func,
|
|
82
88
|
onHandleMaxChange: _propTypes.default.func,
|
|
83
|
-
onHandleMaxChangeEnd: _propTypes.default.func
|
|
89
|
+
onHandleMaxChangeEnd: _propTypes.default.func,
|
|
90
|
+
HammerForTestingMin: _handle.default.propTypes.HammerForTesting,
|
|
91
|
+
HammerForTestingMax: _handle.default.propTypes.HammerForTesting
|
|
84
92
|
} : {};
|
|
85
93
|
|
|
86
94
|
class Range extends _react.default.Component {
|
|
@@ -194,12 +202,18 @@ class Range extends _react.default.Component {
|
|
|
194
202
|
width: `${railWidth * 100}%`,
|
|
195
203
|
left: `${railLeft * 100}%`
|
|
196
204
|
};
|
|
205
|
+
const {
|
|
206
|
+
HammerForTestingMin,
|
|
207
|
+
HammerForTestingMax
|
|
208
|
+
} = this.props;
|
|
197
209
|
return /*#__PURE__*/_react.default.createElement("div", {
|
|
210
|
+
"data-testid": "slider",
|
|
198
211
|
className: _style.default.containerWrapper,
|
|
199
212
|
onClick: this.handleClick
|
|
200
213
|
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
201
214
|
className: _style.default.container
|
|
202
215
|
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
216
|
+
"data-testid": "track",
|
|
203
217
|
className: _style.default.track,
|
|
204
218
|
"data-name": "sliderTrack",
|
|
205
219
|
ref: this.setRefTrack
|
|
@@ -207,6 +221,8 @@ class Range extends _react.default.Component {
|
|
|
207
221
|
className: pending ? _style.default.rail : _style.default.animatedRail,
|
|
208
222
|
style: railStyle
|
|
209
223
|
}), /*#__PURE__*/_react.default.createElement(RenderHandles, {
|
|
224
|
+
HammerForTestingMin: HammerForTestingMin,
|
|
225
|
+
HammerForTestingMax: HammerForTestingMax,
|
|
210
226
|
left: left,
|
|
211
227
|
right: right,
|
|
212
228
|
pending: pending,
|
|
@@ -224,6 +240,8 @@ Range.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
|
224
240
|
onChange: _propTypes.default.func,
|
|
225
241
|
onChangeEnd: _propTypes.default.func,
|
|
226
242
|
multi: _propTypes.default.bool,
|
|
243
|
+
HammerForTestingMin: RenderHandles.propTypes.HammerForTestingMin,
|
|
244
|
+
HammerForTestingMax: RenderHandles.propTypes.HammerForTestingMax,
|
|
227
245
|
// eslint-disable-next-line react/no-unused-prop-types
|
|
228
246
|
value: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.arrayOf(_propTypes.default.number)])
|
|
229
247
|
} : {};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":["valueOnTrack","track","x","left","right","getBoundingClientRect","extractStateFromProps","props","multi","value","RenderHandles","pending","onHandleMinChange","onHandleMinChangeEnd","onHandleMaxChange","onHandleMaxChangeEnd","style","handle","animatedHandle","propTypes","PropTypes","number","bool","func","Range","React","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"],"sources":["../../../src/atom/range/index.js"],"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"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"index.js","names":["valueOnTrack","track","x","left","right","getBoundingClientRect","extractStateFromProps","props","multi","value","RenderHandles","pending","onHandleMinChange","onHandleMinChangeEnd","onHandleMaxChange","onHandleMaxChangeEnd","HammerForTestingMin","HammerForTestingMax","style","handle","animatedHandle","propTypes","PropTypes","number","bool","func","Handle","HammerForTesting","Range","React","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"],"sources":["../../../src/atom/range/index.js"],"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 HammerForTestingMin,\n HammerForTestingMax\n } = props;\n\n return (\n <div data-testid=\"handles\">\n {multi ? (\n <span\n className={pending ? style.handle : style.animatedHandle}\n style={{left: `${left * 100}%`}}\n >\n <Handle\n axis=\"x\"\n onPan={onHandleMinChange}\n onPanEnd={onHandleMinChangeEnd}\n HammerForTesting={HammerForTestingMin}\n />\n </span>\n ) : null}\n <span\n className={pending ? style.handle : style.animatedHandle}\n style={{left: `${right * 100}%`}}\n >\n <Handle\n axis=\"x\"\n onPan={onHandleMaxChange}\n onPanEnd={onHandleMaxChangeEnd}\n HammerForTesting={HammerForTestingMax}\n />\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 HammerForTestingMin: Handle.propTypes.HammerForTesting,\n HammerForTestingMax: Handle.propTypes.HammerForTesting\n};\n\nclass Range extends React.Component {\n static propTypes = {\n onChange: PropTypes.func,\n onChangeEnd: PropTypes.func,\n multi: PropTypes.bool,\n HammerForTestingMin: RenderHandles.propTypes.HammerForTestingMin,\n HammerForTestingMax: RenderHandles.propTypes.HammerForTestingMax,\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 const {HammerForTestingMin, HammerForTestingMax} = this.props;\n\n return (\n <div data-testid=\"slider\" className={style.containerWrapper} onClick={this.handleClick}>\n <div className={style.container}>\n <div\n data-testid=\"track\"\n className={style.track}\n data-name=\"sliderTrack\"\n ref={this.setRefTrack}\n />\n <div className={pending ? style.rail : style.animatedRail} style={railStyle} />\n <RenderHandles\n HammerForTestingMin={HammerForTestingMin}\n HammerForTestingMax={HammerForTestingMax}\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"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atom/select/index.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAuDA,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atom/select/index.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAuDA,qEAyLC"}
|