@coorpacademy/components 11.11.12 → 11.11.13-alpha.1

package/es/atom/range/handle.d.ts

@@ -5,6 +5,11 @@ declare namespace Handle {
         const onPan: PropTypes.Requireable<(...args: any[]) => any>;
         const onPanStart: PropTypes.Requireable<(...args: any[]) => any>;
         const onPanEnd: PropTypes.Requireable<(...args: any[]) => any>;
+        const HammerForTesting: PropTypes.Requireable<PropTypes.InferProps<{
+            on: PropTypes.Requireable<(...args: any[]) => any>;
+            destroy: PropTypes.Requireable<(...args: any[]) => any>;
+            stop: PropTypes.Requireable<(...args: any[]) => any>;
+        }>>;
     }
     namespace contextTypes {
         const skin: PropTypes.Requireable<PropTypes.InferProps<{

package/es/atom/range/handle.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"handle.d.ts","sourceRoot":"","sources":["../../../src/atom/range/handle.js"],"names":[],"mappings":";AA6BA,qEAwCC"}
+{"version":3,"file":"handle.d.ts","sourceRoot":"","sources":["../../../src/atom/range/handle.js"],"names":[],"mappings":";AA6BA,qEAsCC"}

package/es/atom/range/handle.js

@@ -1,6 +1,6 @@
 import _getOr from "lodash/fp/getOr";
 import _noop from "lodash/fp/noop";
-import React, { useEffect, useRef, useState } from 'react';
+import React, { useEffect, useMemo, useRef } from 'react';
 import PropTypes from 'prop-types';
 import Provider, { GetSkinFromContext } from '../provider';
 import { getShadowBoxColorFromPrimary } from '../../util/get-shadow-box-color-from-primary';
@@ -40,13 +40,11 @@ const Handle = (props, legacyContext) => {
   const {
     onPanStart = _noop,
     onPanEnd = _noop,
-    onPan = _noop
+    onPan = _noop,
+    HammerForTesting
   } = props;
   const handle = useRef();
-  const [hammer, setHammer] = useState();
-  useEffect(() => {
-    setHammer(new Hammer(handle.current));
-  }, [handle]);
+  const hammer = useMemo(() => HammerForTesting || new Hammer(handle.current), [handle, HammerForTesting]);
   useEffect(() => {
     if (!hammer) return;
     hammer.on('panstart', onPanStart);
@@ -55,11 +53,11 @@ const Handle = (props, legacyContext) => {
     return () => {
       hammer.stop();
       hammer.destroy();
-      setHammer(null);
     };
   }, [hammer, onPanStart, onPanEnd, onPan]);
   return /*#__PURE__*/React.createElement("div", {
-    className: style.wrapper
+    className: style.wrapper,
+    "data-testid": "handle-wrapper"
   }, /*#__PURE__*/React.createElement("div", {
     style: {
       backgroundColor,
@@ -74,7 +72,12 @@ const Handle = (props, legacyContext) => {
 Handle.propTypes = process.env.NODE_ENV !== "production" ? {
   onPan: PropTypes.func,
   onPanStart: PropTypes.func,
-  onPanEnd: PropTypes.func
+  onPanEnd: PropTypes.func,
+  HammerForTesting: PropTypes.shape({
+    on: PropTypes.func,
+    destroy: PropTypes.func,
+    stop: PropTypes.func
+  })
 } : {};
 Handle.contextTypes = {
   skin: Provider.childContextTypes.skin

package/es/atom/range/handle.js.map

@@ -1 +1 @@
-{"version":3,"file":"handle.js","names":["React","useEffect","useRef","useState","PropTypes","Provider","GetSkinFromContext","getShadowBoxColorFromPrimary","style","NoopHammer","constructor","on","stop","destroy","Hammer","window","require","Handle","props","legacyContext","skin","primaryColor","backgroundColor","onPanStart","onPanEnd","onPan","handle","hammer","setHammer","current","wrapper","boxShadow","default","propTypes","func","contextTypes","childContextTypes"],"sources":["../../../src/atom/range/handle.js"],"sourcesContent":["import {noop, getOr} from 'lodash/fp';\nimport React, {useEffect, useRef, useState} from 'react';\nimport PropTypes from 'prop-types';\nimport Provider, {GetSkinFromContext} from '../provider';\nimport {getShadowBoxColorFromPrimary} from '../../util/get-shadow-box-color-from-primary';\nimport style from './handle.css';\n\nclass NoopHammer {\n  constructor() {}\n\n  // eslint-disable-next-line class-methods-use-this\n  on() {\n    return;\n  }\n\n  // eslint-disable-next-line class-methods-use-this\n  stop() {\n    return;\n  }\n\n  // eslint-disable-next-line class-methods-use-this\n  destroy() {\n    return;\n  }\n}\n\nconst Hammer = // eslint-disable-next-line no-undef\n  typeof window !== 'undefined' ? /* istanbul ignore next */ require('hammerjs') : NoopHammer;\n\nconst Handle = (props, legacyContext) => {\n  const skin = GetSkinFromContext(legacyContext);\n  const primaryColor = getOr('#00B0FF', 'common.primary', skin);\n  const backgroundColor = primaryColor;\n  const {onPanStart = noop, onPanEnd = noop, onPan = noop} = props;\n\n  const handle = useRef();\n  const [hammer, setHammer] = useState();\n\n  useEffect(() => {\n    setHammer(new Hammer(handle.current));\n  }, [handle]);\n\n  useEffect(() => {\n    if (!hammer) return;\n    hammer.on('panstart', onPanStart);\n    hammer.on('panend', onPanEnd);\n\n    hammer.on('panleft panright', onPan);\n\n    return () => {\n      hammer.stop();\n      hammer.destroy();\n      setHammer(null);\n    };\n  }, [hammer, onPanStart, onPanEnd, onPan]);\n\n  return (\n    <div className={style.wrapper}>\n      <div\n        style={{\n          backgroundColor,\n          boxShadow: `0px 0px 20px ${getShadowBoxColorFromPrimary(primaryColor)}`\n        }}\n        className={style.default}\n        ref={handle}\n        data-name={'handle'}\n      />\n    </div>\n  );\n};\n\nHandle.propTypes = {\n  onPan: PropTypes.func,\n  onPanStart: PropTypes.func,\n  onPanEnd: PropTypes.func\n};\n\nHandle.contextTypes = {\n  skin: Provider.childContextTypes.skin\n};\n\nexport default Handle;\n"],"mappings":";;AACA,OAAOA,KAAP,IAAeC,SAAf,EAA0BC,MAA1B,EAAkCC,QAAlC,QAAiD,OAAjD;AACA,OAAOC,SAAP,MAAsB,YAAtB;AACA,OAAOC,QAAP,IAAkBC,kBAAlB,QAA2C,aAA3C;AACA,SAAQC,4BAAR,QAA2C,8CAA3C;AACA,OAAOC,KAAP,MAAkB,cAAlB;;AAEA,MAAMC,UAAN,CAAiB;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,GAAGd,kBAAkB,CAACa,aAAD,CAA/B;;EACA,MAAME,YAAY,GAAG,OAAM,SAAN,EAAiB,gBAAjB,EAAmCD,IAAnC,CAArB;;EACA,MAAME,eAAe,GAAGD,YAAxB;EACA,MAAM;IAACE,UAAU,QAAX;IAAoBC,QAAQ,QAA5B;IAAqCC,KAAK;EAA1C,IAAqDP,KAA3D;EAEA,MAAMQ,MAAM,GAAGxB,MAAM,EAArB;EACA,MAAM,CAACyB,MAAD,EAASC,SAAT,IAAsBzB,QAAQ,EAApC;EAEAF,SAAS,CAAC,MAAM;IACd2B,SAAS,CAAC,IAAId,MAAJ,CAAWY,MAAM,CAACG,OAAlB,CAAD,CAAT;EACD,CAFQ,EAEN,CAACH,MAAD,CAFM,CAAT;EAIAzB,SAAS,CAAC,MAAM;IACd,IAAI,CAAC0B,MAAL,EAAa;IACbA,MAAM,CAAChB,EAAP,CAAU,UAAV,EAAsBY,UAAtB;IACAI,MAAM,CAAChB,EAAP,CAAU,QAAV,EAAoBa,QAApB;IAEAG,MAAM,CAAChB,EAAP,CAAU,kBAAV,EAA8Bc,KAA9B;IAEA,OAAO,MAAM;MACXE,MAAM,CAACf,IAAP;MACAe,MAAM,CAACd,OAAP;MACAe,SAAS,CAAC,IAAD,CAAT;IACD,CAJD;EAKD,CAZQ,EAYN,CAACD,MAAD,EAASJ,UAAT,EAAqBC,QAArB,EAA+BC,KAA/B,CAZM,CAAT;EAcA,oBACE;IAAK,SAAS,EAAEjB,KAAK,CAACsB;EAAtB,gBACE;IACE,KAAK,EAAE;MACLR,eADK;MAELS,SAAS,EAAG,gBAAexB,4BAA4B,CAACc,YAAD,CAAe;IAFjE,CADT;IAKE,SAAS,EAAEb,KAAK,CAACwB,OALnB;IAME,GAAG,EAAEN,MANP;IAOE,aAAW;EAPb,EADF,CADF;AAaD,CAxCD;;AA0CAT,MAAM,CAACgB,SAAP,2CAAmB;EACjBR,KAAK,EAAErB,SAAS,CAAC8B,IADA;EAEjBX,UAAU,EAAEnB,SAAS,CAAC8B,IAFL;EAGjBV,QAAQ,EAAEpB,SAAS,CAAC8B;AAHH,CAAnB;AAMAjB,MAAM,CAACkB,YAAP,GAAsB;EACpBf,IAAI,EAAEf,QAAQ,CAAC+B,iBAAT,CAA2BhB;AADb,CAAtB;AAIA,eAAeH,MAAf"}
+{"version":3,"file":"handle.js","names":["React","useEffect","useMemo","useRef","PropTypes","Provider","GetSkinFromContext","getShadowBoxColorFromPrimary","style","NoopHammer","constructor","on","stop","destroy","Hammer","window","require","Handle","props","legacyContext","skin","primaryColor","backgroundColor","onPanStart","onPanEnd","onPan","HammerForTesting","handle","hammer","current","wrapper","boxShadow","default","propTypes","func","shape","contextTypes","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  const hammer = useMemo(\n    () => HammerForTesting || new Hammer(handle.current),\n    [handle, HammerForTesting]\n  );\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,OAAOA,KAAP,IAAeC,SAAf,EAA0BC,OAA1B,EAAmCC,MAAnC,QAAgD,OAAhD;AACA,OAAOC,SAAP,MAAsB,YAAtB;AACA,OAAOC,QAAP,IAAkBC,kBAAlB,QAA2C,aAA3C;AACA,SAAQC,4BAAR,QAA2C,8CAA3C;AACA,OAAOC,KAAP,MAAkB,cAAlB;;AAEA,MAAMC,UAAN,CAAiB;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,GAAGd,kBAAkB,CAACa,aAAD,CAA/B;;EACA,MAAME,YAAY,GAAG,OAAM,SAAN,EAAiB,gBAAjB,EAAmCD,IAAnC,CAArB;;EACA,MAAME,eAAe,GAAGD,YAAxB;EACA,MAAM;IAACE,UAAU,QAAX;IAAoBC,QAAQ,QAA5B;IAAqCC,KAAK,QAA1C;IAAmDC;EAAnD,IAAuER,KAA7E;EAEA,MAAMS,MAAM,GAAGxB,MAAM,EAArB;EACA,MAAMyB,MAAM,GAAG1B,OAAO,CACpB,MAAMwB,gBAAgB,IAAI,IAAIZ,MAAJ,CAAWa,MAAM,CAACE,OAAlB,CADN,EAEpB,CAACF,MAAD,EAASD,gBAAT,CAFoB,CAAtB;EAKAzB,SAAS,CAAC,MAAM;IACd,IAAI,CAAC2B,MAAL,EAAa;IACbA,MAAM,CAACjB,EAAP,CAAU,UAAV,EAAsBY,UAAtB;IACAK,MAAM,CAACjB,EAAP,CAAU,QAAV,EAAoBa,QAApB;IAEAI,MAAM,CAACjB,EAAP,CAAU,kBAAV,EAA8Bc,KAA9B;IAEA,OAAO,MAAM;MACXG,MAAM,CAAChB,IAAP;MACAgB,MAAM,CAACf,OAAP;IACD,CAHD;EAID,CAXQ,EAWN,CAACe,MAAD,EAASL,UAAT,EAAqBC,QAArB,EAA+BC,KAA/B,CAXM,CAAT;EAaA,oBACE;IAAK,SAAS,EAAEjB,KAAK,CAACsB,OAAtB;IAA+B,eAAY;EAA3C,gBACE;IACE,KAAK,EAAE;MACLR,eADK;MAELS,SAAS,EAAG,gBAAexB,4BAA4B,CAACc,YAAD,CAAe;IAFjE,CADT;IAKE,SAAS,EAAEb,KAAK,CAACwB,OALnB;IAME,GAAG,EAAEL,MANP;IAOE,aAAW;EAPb,EADF,CADF;AAaD,CAtCD;;AAwCAV,MAAM,CAACgB,SAAP,2CAAmB;EACjBR,KAAK,EAAErB,SAAS,CAAC8B,IADA;EAEjBX,UAAU,EAAEnB,SAAS,CAAC8B,IAFL;EAGjBV,QAAQ,EAAEpB,SAAS,CAAC8B,IAHH;EAIjBR,gBAAgB,EAAEtB,SAAS,CAAC+B,KAAV,CAAgB;IAChCxB,EAAE,EAAEP,SAAS,CAAC8B,IADkB;IAEhCrB,OAAO,EAAET,SAAS,CAAC8B,IAFa;IAGhCtB,IAAI,EAAER,SAAS,CAAC8B;EAHgB,CAAhB;AAJD,CAAnB;AAWAjB,MAAM,CAACmB,YAAP,GAAsB;EACpBhB,IAAI,EAAEf,QAAQ,CAACgC,iBAAT,CAA2BjB;AADb,CAAtB;AAIA,eAAeH,MAAf"}

package/es/atom/range/index.d.ts

@@ -4,6 +4,16 @@ declare class Range extends React.Component<any, any, any> {
         onChange: PropTypes.Requireable<(...args: any[]) => any>;
         onChangeEnd: PropTypes.Requireable<(...args: any[]) => any>;
         multi: PropTypes.Requireable<boolean>;
+        HammerForTestingMin: PropTypes.Requireable<PropTypes.InferProps<{
+            on: PropTypes.Requireable<(...args: any[]) => any>;
+            destroy: PropTypes.Requireable<(...args: any[]) => any>;
+            stop: PropTypes.Requireable<(...args: any[]) => any>;
+        }>>;
+        HammerForTestingMax: PropTypes.Requireable<PropTypes.InferProps<{
+            on: PropTypes.Requireable<(...args: any[]) => any>;
+            destroy: PropTypes.Requireable<(...args: any[]) => any>;
+            stop: PropTypes.Requireable<(...args: any[]) => any>;
+        }>>;
         value: PropTypes.Requireable<NonNullable<number | (number | null | undefined)[] | null | undefined>>;
     };
     static getDerivedStateFromProps(props: any, state: any): {

package/es/atom/range/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atom/range/index.js"],"names":[],"mappings":";AA8DA;IACE;;;;;MAME;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,sBAgCC;CACF"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atom/range/index.js"],"names":[],"mappings":";AA4EA;IACE;;;;;;;;;;;;;;;MAQE;IAEF;;;aAMC;IAED,sCAcC;IAXC;;;;MAGC;IAkEH,0BAmBC;IA3ED,8BAEC;IAED,8BAKC;IAED,8BAKC;IAED,iCAKC;IAED,iCAKC;IA7BC,WAAkB;IA+BpB,8DAcC;IAED,iDAMC;IAuBD,sBAyCC;CACF"}

package/es/atom/range/index.js

@@ -37,9 +37,13 @@ const RenderHandles = props => {
     onHandleMinChange,
     onHandleMinChangeEnd,
     onHandleMaxChange,
-    onHandleMaxChangeEnd
+    onHandleMaxChangeEnd,
+    HammerForTestingMin,
+    HammerForTestingMax
   } = props;
-  return /*#__PURE__*/React.createElement("div", null, multi ? /*#__PURE__*/React.createElement("span", {
+  return /*#__PURE__*/React.createElement("div", {
+    "data-testid": "handles"
+  }, multi ? /*#__PURE__*/React.createElement("span", {
     className: pending ? style.handle : style.animatedHandle,
     style: {
       left: `${left * 100}%`
@@ -47,7 +51,8 @@ const RenderHandles = props => {
   }, /*#__PURE__*/React.createElement(Handle, {
     axis: "x",
     onPan: onHandleMinChange,
-    onPanEnd: onHandleMinChangeEnd
+    onPanEnd: onHandleMinChangeEnd,
+    HammerForTesting: HammerForTestingMin
   })) : null, /*#__PURE__*/React.createElement("span", {
     className: pending ? style.handle : style.animatedHandle,
     style: {
@@ -56,7 +61,8 @@ const RenderHandles = props => {
   }, /*#__PURE__*/React.createElement(Handle, {
     axis: "x",
     onPan: onHandleMaxChange,
-    onPanEnd: onHandleMaxChangeEnd
+    onPanEnd: onHandleMaxChangeEnd,
+    HammerForTesting: HammerForTestingMax
   })));
 };
 
@@ -68,7 +74,9 @@ RenderHandles.propTypes = process.env.NODE_ENV !== "production" ? {
   onHandleMinChange: PropTypes.func,
   onHandleMinChangeEnd: PropTypes.func,
   onHandleMaxChange: PropTypes.func,
-  onHandleMaxChangeEnd: PropTypes.func
+  onHandleMaxChangeEnd: PropTypes.func,
+  HammerForTestingMin: Handle.propTypes.HammerForTesting,
+  HammerForTestingMax: Handle.propTypes.HammerForTesting
 } : {};
 
 class Range extends React.Component {
@@ -184,12 +192,18 @@ class Range extends React.Component {
       width: `${railWidth * 100}%`,
       left: `${railLeft * 100}%`
     };
+    const {
+      HammerForTestingMin,
+      HammerForTestingMax
+    } = this.props;
     return /*#__PURE__*/React.createElement("div", {
+      "data-testid": "slider",
       className: style.containerWrapper,
       onClick: this.handleClick
     }, /*#__PURE__*/React.createElement("div", {
       className: style.container
     }, /*#__PURE__*/React.createElement("div", {
+      "data-testid": "track",
       className: style.track,
       "data-name": "sliderTrack",
       ref: this.setRefTrack
@@ -197,6 +211,8 @@ class Range extends React.Component {
       className: pending ? style.rail : style.animatedRail,
       style: railStyle
     }), /*#__PURE__*/React.createElement(RenderHandles, {
+      HammerForTestingMin: HammerForTestingMin,
+      HammerForTestingMax: HammerForTestingMax,
       left: left,
       right: right,
       pending: pending,
@@ -214,6 +230,8 @@ Range.propTypes = process.env.NODE_ENV !== "production" ? {
   onChange: PropTypes.func,
   onChangeEnd: PropTypes.func,
   multi: PropTypes.bool,
+  HammerForTestingMin: RenderHandles.propTypes.HammerForTestingMin,
+  HammerForTestingMax: RenderHandles.propTypes.HammerForTestingMax,
   // eslint-disable-next-line react/no-unused-prop-types
   value: PropTypes.oneOfType([PropTypes.number, PropTypes.arrayOf(PropTypes.number)])
 } : {};

package/es/atom/range/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"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"],"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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"}
+{"version":3,"file":"index.js","names":["React","PropTypes","Handle","style","valueOnTrack","track","x","left","right","getBoundingClientRect","extractStateFromProps","props","multi","value","RenderHandles","pending","onHandleMinChange","onHandleMinChangeEnd","onHandleMaxChange","onHandleMaxChangeEnd","HammerForTestingMin","HammerForTestingMax","handle","animatedHandle","propTypes","number","bool","func","HammerForTesting","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"],"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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"}

package/es/molecule/questions/question-range/index.d.ts

@@ -32,6 +32,16 @@ declare namespace QuestionRange {
         onChange: PropTypes.Requireable<(...args: any[]) => any>;
         onChangeEnd: PropTypes.Requireable<(...args: any[]) => any>;
         multi: PropTypes.Requireable<boolean>;
+        HammerForTestingMin: PropTypes.Requireable<PropTypes.InferProps<{
+            on: PropTypes.Requireable<(...args: any[]) => any>;
+            destroy: PropTypes.Requireable<(...args: any[]) => any>;
+            stop: PropTypes.Requireable<(...args: any[]) => any>;
+        }>>;
+        HammerForTestingMax: PropTypes.Requireable<PropTypes.InferProps<{
+            on: PropTypes.Requireable<(...args: any[]) => any>;
+            destroy: PropTypes.Requireable<(...args: any[]) => any>;
+            stop: PropTypes.Requireable<(...args: any[]) => any>;
+        }>>;
         value: PropTypes.Requireable<NonNullable<number | (number | null | undefined)[] | null | undefined>>;
     };
 }

package/es/organism/mooc-header/style.css

@@ -701,11 +701,22 @@
 
   .items .item {
     line-height: 40px;
-    padding: 0;
+    padding:  0 0 0 8px ;
   }
 
   .item .bar {
-    display: none;
+    background-color: brand;
+  width: 3px;
+  height: 0;
+  left: 0;
+  position: absolute;
+  transition: all 0.2s ease-out;
+  display: none;
+  }
+  .item:hover .bar {
+    height: 40px;
+    width: 3px;
+    display: inherit;
   }
 
   .items .currentOption {
@@ -725,7 +736,7 @@
   }
 
   .items .option {
-    padding: 0;
+    padding:  0 0 0 8px ;
     line-height: 40px;
   }
 

package/lib/atom/range/handle.d.ts

@@ -5,6 +5,11 @@ declare namespace Handle {
         const onPan: PropTypes.Requireable<(...args: any[]) => any>;
         const onPanStart: PropTypes.Requireable<(...args: any[]) => any>;
         const onPanEnd: PropTypes.Requireable<(...args: any[]) => any>;
+        const HammerForTesting: PropTypes.Requireable<PropTypes.InferProps<{
+            on: PropTypes.Requireable<(...args: any[]) => any>;
+            destroy: PropTypes.Requireable<(...args: any[]) => any>;
+            stop: PropTypes.Requireable<(...args: any[]) => any>;
+        }>>;
     }
     namespace contextTypes {
         const skin: PropTypes.Requireable<PropTypes.InferProps<{

package/lib/atom/range/handle.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"handle.d.ts","sourceRoot":"","sources":["../../../src/atom/range/handle.js"],"names":[],"mappings":";AA6BA,qEAwCC"}
+{"version":3,"file":"handle.d.ts","sourceRoot":"","sources":["../../../src/atom/range/handle.js"],"names":[],"mappings":";AA6BA,qEAsCC"}

package/lib/atom/range/handle.js

@@ -55,13 +55,11 @@ const Handle = (props, legacyContext) => {
   const {
     onPanStart = _noop2.default,
     onPanEnd = _noop2.default,
-    onPan = _noop2.default
+    onPan = _noop2.default,
+    HammerForTesting
   } = props;
   const handle = (0, _react.useRef)();
-  const [hammer, setHammer] = (0, _react.useState)();
-  (0, _react.useEffect)(() => {
-    setHammer(new Hammer(handle.current));
-  }, [handle]);
+  const hammer = (0, _react.useMemo)(() => HammerForTesting || new Hammer(handle.current), [handle, HammerForTesting]);
   (0, _react.useEffect)(() => {
     if (!hammer) return;
     hammer.on('panstart', onPanStart);
@@ -70,11 +68,11 @@ const Handle = (props, legacyContext) => {
     return () => {
       hammer.stop();
       hammer.destroy();
-      setHammer(null);
     };
   }, [hammer, onPanStart, onPanEnd, onPan]);
   return /*#__PURE__*/_react.default.createElement("div", {
-    className: _handle.default.wrapper
+    className: _handle.default.wrapper,
+    "data-testid": "handle-wrapper"
   }, /*#__PURE__*/_react.default.createElement("div", {
     style: {
       backgroundColor,
@@ -89,7 +87,12 @@ const Handle = (props, legacyContext) => {
 Handle.propTypes = process.env.NODE_ENV !== "production" ? {
   onPan: _propTypes.default.func,
   onPanStart: _propTypes.default.func,
-  onPanEnd: _propTypes.default.func
+  onPanEnd: _propTypes.default.func,
+  HammerForTesting: _propTypes.default.shape({
+    on: _propTypes.default.func,
+    destroy: _propTypes.default.func,
+    stop: _propTypes.default.func
+  })
 } : {};
 Handle.contextTypes = {
   skin: _provider.default.childContextTypes.skin

package/lib/atom/range/handle.js.map

@@ -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","setHammer","useState","useEffect","current","style","wrapper","boxShadow","getShadowBoxColorFromPrimary","default","propTypes","PropTypes","func","contextTypes","Provider","childContextTypes"],"sources":["../../../src/atom/range/handle.js"],"sourcesContent":["import {noop, getOr} from 'lodash/fp';\nimport React, {useEffect, useRef, useState} from 'react';\nimport PropTypes from 'prop-types';\nimport Provider, {GetSkinFromContext} from '../provider';\nimport {getShadowBoxColorFromPrimary} from '../../util/get-shadow-box-color-from-primary';\nimport style from './handle.css';\n\nclass NoopHammer {\n  constructor() {}\n\n  // eslint-disable-next-line class-methods-use-this\n  on() {\n    return;\n  }\n\n  // eslint-disable-next-line class-methods-use-this\n  stop() {\n    return;\n  }\n\n  // eslint-disable-next-line class-methods-use-this\n  destroy() {\n    return;\n  }\n}\n\nconst Hammer = // eslint-disable-next-line no-undef\n  typeof window !== 'undefined' ? /* istanbul ignore next */ require('hammerjs') : NoopHammer;\n\nconst Handle = (props, legacyContext) => {\n  const skin = GetSkinFromContext(legacyContext);\n  const primaryColor = getOr('#00B0FF', 'common.primary', skin);\n  const backgroundColor = primaryColor;\n  const {onPanStart = noop, onPanEnd = noop, onPan = noop} = props;\n\n  const handle = useRef();\n  const [hammer, setHammer] = useState();\n\n  useEffect(() => {\n    setHammer(new Hammer(handle.current));\n  }, [handle]);\n\n  useEffect(() => {\n    if (!hammer) return;\n    hammer.on('panstart', onPanStart);\n    hammer.on('panend', onPanEnd);\n\n    hammer.on('panleft panright', onPan);\n\n    return () => {\n      hammer.stop();\n      hammer.destroy();\n      setHammer(null);\n    };\n  }, [hammer, onPanStart, onPanEnd, onPan]);\n\n  return (\n    <div className={style.wrapper}>\n      <div\n        style={{\n          backgroundColor,\n          boxShadow: `0px 0px 20px ${getShadowBoxColorFromPrimary(primaryColor)}`\n        }}\n        className={style.default}\n        ref={handle}\n        data-name={'handle'}\n      />\n    </div>\n  );\n};\n\nHandle.propTypes = {\n  onPan: PropTypes.func,\n  onPanStart: PropTypes.func,\n  onPanEnd: PropTypes.func\n};\n\nHandle.contextTypes = {\n  skin: Provider.childContextTypes.skin\n};\n\nexport default Handle;\n"],"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;EAA1C,IAAqDR,KAA3D;EAEA,MAAMS,MAAM,GAAG,IAAAC,aAAA,GAAf;EACA,MAAM,CAACC,MAAD,EAASC,SAAT,IAAsB,IAAAC,eAAA,GAA5B;EAEA,IAAAC,gBAAA,EAAU,MAAM;IACdF,SAAS,CAAC,IAAIhB,MAAJ,CAAWa,MAAM,CAACM,OAAlB,CAAD,CAAT;EACD,CAFD,EAEG,CAACN,MAAD,CAFH;EAIA,IAAAK,gBAAA,EAAU,MAAM;IACd,IAAI,CAACH,MAAL,EAAa;IACbA,MAAM,CAAClB,EAAP,CAAU,UAAV,EAAsBa,UAAtB;IACAK,MAAM,CAAClB,EAAP,CAAU,QAAV,EAAoBc,QAApB;IAEAI,MAAM,CAAClB,EAAP,CAAU,kBAAV,EAA8Be,KAA9B;IAEA,OAAO,MAAM;MACXG,MAAM,CAACjB,IAAP;MACAiB,MAAM,CAAChB,OAAP;MACAiB,SAAS,CAAC,IAAD,CAAT;IACD,CAJD;EAKD,CAZD,EAYG,CAACD,MAAD,EAASL,UAAT,EAAqBC,QAArB,EAA+BC,KAA/B,CAZH;EAcA,oBACE;IAAK,SAAS,EAAEQ,eAAA,CAAMC;EAAtB,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,EAAEX,MANP;IAOE,aAAW;EAPb,EADF,CADF;AAaD,CAxCD;;AA0CAV,MAAM,CAACsB,SAAP,2CAAmB;EACjBb,KAAK,EAAEc,kBAAA,CAAUC,IADA;EAEjBjB,UAAU,EAAEgB,kBAAA,CAAUC,IAFL;EAGjBhB,QAAQ,EAAEe,kBAAA,CAAUC;AAHH,CAAnB;AAMAxB,MAAM,CAACyB,YAAP,GAAsB;EACpBtB,IAAI,EAAEuB,iBAAA,CAASC,iBAAT,CAA2BxB;AADb,CAAtB;eAIeH,M"}
+{"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  const hammer = useMemo(\n    () => HammerForTesting || new Hammer(handle.current),\n    [handle, HammerForTesting]\n  );\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;EACA,MAAMC,MAAM,GAAG,IAAAC,cAAA,EACb,MAAMJ,gBAAgB,IAAI,IAAIb,MAAJ,CAAWc,MAAM,CAACI,OAAlB,CADb,EAEb,CAACJ,MAAD,EAASD,gBAAT,CAFa,CAAf;EAKA,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,CAtCD;;AAwCAX,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"}

package/lib/atom/range/index.d.ts

@@ -4,6 +4,16 @@ declare class Range extends React.Component<any, any, any> {
         onChange: PropTypes.Requireable<(...args: any[]) => any>;
         onChangeEnd: PropTypes.Requireable<(...args: any[]) => any>;
         multi: PropTypes.Requireable<boolean>;
+        HammerForTestingMin: PropTypes.Requireable<PropTypes.InferProps<{
+            on: PropTypes.Requireable<(...args: any[]) => any>;
+            destroy: PropTypes.Requireable<(...args: any[]) => any>;
+            stop: PropTypes.Requireable<(...args: any[]) => any>;
+        }>>;
+        HammerForTestingMax: PropTypes.Requireable<PropTypes.InferProps<{
+            on: PropTypes.Requireable<(...args: any[]) => any>;
+            destroy: PropTypes.Requireable<(...args: any[]) => any>;
+            stop: PropTypes.Requireable<(...args: any[]) => any>;
+        }>>;
         value: PropTypes.Requireable<NonNullable<number | (number | null | undefined)[] | null | undefined>>;
     };
     static getDerivedStateFromProps(props: any, state: any): {

package/lib/atom/range/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atom/range/index.js"],"names":[],"mappings":";AA8DA;IACE;;;;;MAME;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,sBAgCC;CACF"}
+{"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

@@ -49,9 +49,13 @@ const RenderHandles = props => {
     onHandleMinChange,
     onHandleMinChangeEnd,
     onHandleMaxChange,
-    onHandleMaxChangeEnd
+    onHandleMaxChangeEnd,
+    HammerForTestingMin,
+    HammerForTestingMax
   } = props;
-  return /*#__PURE__*/_react.default.createElement("div", null, multi ? /*#__PURE__*/_react.default.createElement("span", {
+  return /*#__PURE__*/_react.default.createElement("div", {
+    "data-testid": "handles"
+  }, multi ? /*#__PURE__*/_react.default.createElement("span", {
     className: pending ? _style.default.handle : _style.default.animatedHandle,
     style: {
       left: `${left * 100}%`
@@ -59,7 +63,8 @@ const RenderHandles = props => {
   }, /*#__PURE__*/_react.default.createElement(_handle.default, {
     axis: "x",
     onPan: onHandleMinChange,
-    onPanEnd: onHandleMinChangeEnd
+    onPanEnd: onHandleMinChangeEnd,
+    HammerForTesting: HammerForTestingMin
   })) : null, /*#__PURE__*/_react.default.createElement("span", {
     className: pending ? _style.default.handle : _style.default.animatedHandle,
     style: {
@@ -68,7 +73,8 @@ const RenderHandles = props => {
   }, /*#__PURE__*/_react.default.createElement(_handle.default, {
     axis: "x",
     onPan: onHandleMaxChange,
-    onPanEnd: onHandleMaxChangeEnd
+    onPanEnd: onHandleMaxChangeEnd,
+    HammerForTesting: HammerForTestingMax
   })));
 };
 
@@ -80,7 +86,9 @@ RenderHandles.propTypes = process.env.NODE_ENV !== "production" ? {
   onHandleMinChange: _propTypes.default.func,
   onHandleMinChangeEnd: _propTypes.default.func,
   onHandleMaxChange: _propTypes.default.func,
-  onHandleMaxChangeEnd: _propTypes.default.func
+  onHandleMaxChangeEnd: _propTypes.default.func,
+  HammerForTestingMin: _handle.default.propTypes.HammerForTesting,
+  HammerForTestingMax: _handle.default.propTypes.HammerForTesting
 } : {};
 
 class Range extends _react.default.Component {
@@ -194,12 +202,18 @@ class Range extends _react.default.Component {
       width: `${railWidth * 100}%`,
       left: `${railLeft * 100}%`
     };
+    const {
+      HammerForTestingMin,
+      HammerForTestingMax
+    } = this.props;
     return /*#__PURE__*/_react.default.createElement("div", {
+      "data-testid": "slider",
       className: _style.default.containerWrapper,
       onClick: this.handleClick
     }, /*#__PURE__*/_react.default.createElement("div", {
       className: _style.default.container
     }, /*#__PURE__*/_react.default.createElement("div", {
+      "data-testid": "track",
       className: _style.default.track,
       "data-name": "sliderTrack",
       ref: this.setRefTrack
@@ -207,6 +221,8 @@ class Range extends _react.default.Component {
       className: pending ? _style.default.rail : _style.default.animatedRail,
       style: railStyle
     }), /*#__PURE__*/_react.default.createElement(RenderHandles, {
+      HammerForTestingMin: HammerForTestingMin,
+      HammerForTestingMax: HammerForTestingMax,
       left: left,
       right: right,
       pending: pending,
@@ -224,6 +240,8 @@ Range.propTypes = process.env.NODE_ENV !== "production" ? {
   onChange: _propTypes.default.func,
   onChangeEnd: _propTypes.default.func,
   multi: _propTypes.default.bool,
+  HammerForTestingMin: RenderHandles.propTypes.HammerForTestingMin,
+  HammerForTestingMax: RenderHandles.propTypes.HammerForTestingMax,
   // eslint-disable-next-line react/no-unused-prop-types
   value: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.arrayOf(_propTypes.default.number)])
 } : {};

package/lib/atom/range/index.js.map

@@ -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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"}
+{"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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"}

package/lib/molecule/questions/question-range/index.d.ts

@@ -32,6 +32,16 @@ declare namespace QuestionRange {
         onChange: PropTypes.Requireable<(...args: any[]) => any>;
         onChangeEnd: PropTypes.Requireable<(...args: any[]) => any>;
         multi: PropTypes.Requireable<boolean>;
+        HammerForTestingMin: PropTypes.Requireable<PropTypes.InferProps<{
+            on: PropTypes.Requireable<(...args: any[]) => any>;
+            destroy: PropTypes.Requireable<(...args: any[]) => any>;
+            stop: PropTypes.Requireable<(...args: any[]) => any>;
+        }>>;
+        HammerForTestingMax: PropTypes.Requireable<PropTypes.InferProps<{
+            on: PropTypes.Requireable<(...args: any[]) => any>;
+            destroy: PropTypes.Requireable<(...args: any[]) => any>;
+            stop: PropTypes.Requireable<(...args: any[]) => any>;
+        }>>;
         value: PropTypes.Requireable<NonNullable<number | (number | null | undefined)[] | null | undefined>>;
     };
 }

package/lib/organism/mooc-header/style.css

@@ -701,11 +701,22 @@
 
   .items .item {
     line-height: 40px;
-    padding: 0;
+    padding:  0 0 0 8px ;
   }
 
   .item .bar {
-    display: none;
+    background-color: brand;
+  width: 3px;
+  height: 0;
+  left: 0;
+  position: absolute;
+  transition: all 0.2s ease-out;
+  display: none;
+  }
+  .item:hover .bar {
+    height: 40px;
+    width: 3px;
+    display: inherit;
   }
 
   .items .currentOption {
@@ -725,7 +736,7 @@
   }
 
   .items .option {
-    padding: 0;
+    padding:  0 0 0 8px ;
     line-height: 40px;
   }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coorpacademy/components",
-  "version": "11.11.12",
+  "version": "11.11.13-alpha.1+7deb6d130",
   "description": "",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -165,5 +165,5 @@
     "last 2 versions",
     "IE 11"
   ],
-  "gitHead": "2afbe5d4f14bab2fab7b02a6c81c7b81fe33ea45"
+  "gitHead": "7deb6d1303b6e8a100a8d1c9f12be610ad93d76b"
 }