@coorpacademy/components 10.22.15-alpha.8 → 10.22.16-alpha.13

package/es/atom/choice/index.native.js

@@ -1,3 +1,5 @@
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
 import React, { useEffect, useState } from 'react';
 import { View, StyleSheet } from 'react-native';
 import Html from '../html/index.native';
@@ -88,12 +90,6 @@ const Choice = ({
     return null;
   }
 
-  const selectedStyle = brandTheme && {
-    backgroundColor: brandTheme.colors.primary,
-    borderColor: brandTheme.colors.primary,
-    borderTopRightRadius: theme.radius.regular,
-    borderBottomRightRadius: theme.radius.regular
-  };
   const selectedSuffix = prefixTestID && isSelected ? '-selected' : '';
   const mediaType = media && media.type && media.type === 'img' && media.type.toLowerCase();
   const url = media && media.type === 'img' && media.src && media.src.length > 0 && getCleanUri(media.src[0].url);
@@ -102,9 +98,22 @@ const Choice = ({
   };
   const mediaSuffix = prefixTestID && mediaType ? `-${mediaType}` : '';
   const htmlStyle = [styleSheet.text];
+  const textWrapperStyle = [styleSheet.textContainer, squeezed && styleSheet.squeezedTextContainer];
 
   if (isSelected) {
     htmlStyle.push(styleSheet.textSelected);
+
+    const selectionStyle = brandTheme && _extends({
+      backgroundColor: brandTheme.colors.primary,
+      borderColor: brandTheme.colors.primary
+    }, url ? {
+      borderTopRightRadius: theme.radius.regular,
+      borderBottomRightRadius: theme.radius.regular
+    } : {
+      borderRadius: theme.radius.regular
+    });
+
+    textWrapperStyle.push(selectionStyle);
   }
 
   return /*#__PURE__*/React.createElement(Touchable, {
@@ -124,7 +133,7 @@ const Choice = ({
     source: source,
     style: styleSheet.image
   })) : null, /*#__PURE__*/React.createElement(View, {
-    style: [styleSheet.textContainer, squeezed && styleSheet.squeezedTextContainer, isSelected && selectedStyle]
+    style: textWrapperStyle
   }, /*#__PURE__*/React.createElement(Html, {
     fontSize: squeezed ? theme.fontSize.medium : theme.fontSize.regular,
     style: htmlStyle

package/es/atom/choice/index.native.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/atom/choice/index.native.tsx"],"names":["React","useEffect","useState","View","StyleSheet","Html","ImageBackground","getCleanUri","Touchable","useTemplateContext","createStyleSheet","theme","create","boxShadow","shadowColor","shadowOffset","width","height","shadowOpacity","shadowRadius","elevation","backgroundColor","container","minHeight","colors","white","borderRadius","radius","regular","flexDirection","alignItems","textContainer","paddingHorizontal","paddingVertical","justifyContent","flex","squeezedTextContainer","padding","spacing","small","paddingLeft","undefined","paddingRight","text","fontWeight","bold","color","black","textSelected","unselectedImageContainer","borderRightColor","border","imageContainer","overflow","borderTopLeftRadius","borderBottomLeftRadius","image","Choice","children","isSelected","squeezed","isDisabled","onPress","media","testID","prefixTestID","style","questionType","templateContext","brandTheme","styleSheet","setStylesheet","_stylesheet","selectedStyle","primary","borderColor","borderTopRightRadius","borderBottomRightRadius","selectedSuffix","mediaType","type","toLowerCase","url","src","length","source","uri","mediaSuffix","htmlStyle","push","fontSize","medium"],"mappings":"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","sourcesContent":["import React, {useEffect, useState} from 'react';\nimport {View, StyleSheet, ViewStyle} from 'react-native';\nimport type {Media, QuestionType} from '../../types/progression-engine';\n\nimport Html from '../html/index.native';\nimport ImageBackground from '../image-background/index.native';\nimport getCleanUri from '../../util/get-clean-uri';\nimport Touchable from '../../hoc/touchable/index.native';\nimport {useTemplateContext} from '../../template/app-review/template-context';\nimport {Theme} from '../../variables/theme.native';\n\nexport type Props = {\n  isSelected?: boolean;\n  onPress: () => void;\n  children: string;\n  isDisabled?: boolean;\n  testID?: string;\n  media?: Media;\n  squeezed?: boolean;\n  style?: ViewStyle;\n  questionType: QuestionType;\n};\n\ntype StyleSheetType = {\n  boxShadow: any;\n  container: any;\n  text: any;\n  textSelected: any;\n  textContainer: any;\n  squeezedTextContainer: any;\n  unselectedImageContainer: any;\n  imageContainer: any;\n  image: any;\n};\n\nconst createStyleSheet = (theme: Theme): StyleSheetType =>\n  StyleSheet.create({\n    boxShadow: {\n      shadowColor: '#000',\n      shadowOffset: {width: 0, height: 4},\n      shadowOpacity: 0.12,\n      shadowRadius: 16,\n      elevation: 8,\n      backgroundColor: '#0000'\n    },\n    container: {\n      minHeight: 80,\n      backgroundColor: theme.colors.white,\n      borderRadius: theme.radius.regular,\n      flexDirection: 'row',\n      alignItems: 'stretch'\n    },\n    textContainer: {\n      paddingHorizontal: 24,\n      paddingVertical: 12,\n      justifyContent: 'center',\n      alignItems: 'center',\n      flex: 1\n    },\n    squeezedTextContainer: {\n      padding: theme.spacing.small,\n      paddingLeft: undefined,\n      paddingVertical: undefined,\n      paddingRight: undefined,\n      flex: 0\n    },\n    text: {\n      fontWeight: theme.fontWeight.bold,\n      color: theme.colors.black\n    },\n    textSelected: {\n      color: theme.colors.white\n    },\n    unselectedImageContainer: {\n      borderRightColor: theme.colors.border\n    },\n    imageContainer: {\n      height: '100%',\n      width: '25%',\n      overflow: 'hidden',\n      borderTopLeftRadius: theme.radius.regular,\n      borderBottomLeftRadius: theme.radius.regular\n    },\n    image: {\n      flex: 1\n    }\n  });\n\nconst Choice = ({\n  children,\n  isSelected = false,\n  squeezed = false,\n  isDisabled,\n  onPress,\n  media,\n  testID: prefixTestID,\n  style,\n  questionType\n}: Props) => {\n  const templateContext = useTemplateContext();\n  const {theme, brandTheme} = templateContext;\n\n  const [styleSheet, setStylesheet] = useState<StyleSheetType | null>(null);\n\n  useEffect(() => {\n    const _stylesheet = createStyleSheet(theme);\n    setStylesheet(_stylesheet);\n  }, [theme]);\n\n  if (!styleSheet) {\n    return null;\n  }\n\n  const selectedStyle = brandTheme && {\n    backgroundColor: brandTheme.colors.primary,\n    borderColor: brandTheme.colors.primary,\n    borderTopRightRadius: theme.radius.regular,\n    borderBottomRightRadius: theme.radius.regular\n  };\n\n  const selectedSuffix = prefixTestID && isSelected ? '-selected' : '';\n  const mediaType = media && media.type && media.type === 'img' && media.type.toLowerCase();\n  const url =\n    media &&\n    media.type === 'img' &&\n    media.src &&\n    media.src.length > 0 &&\n    getCleanUri(media.src[0].url);\n\n  const source = {uri: url ? getCleanUri(url) : undefined};\n  const mediaSuffix = prefixTestID && mediaType ? `-${mediaType}` : '';\n\n  const htmlStyle: ViewStyle[] = [styleSheet.text];\n\n  if (isSelected) {\n    htmlStyle.push(styleSheet.textSelected);\n  }\n\n  return (\n    <Touchable\n      onPress={!isDisabled ? onPress : undefined}\n      style={style}\n      analyticsID=\"question-choice\"\n      analyticsParams={{questionType}}\n    >\n      <View\n        style={[styleSheet.boxShadow, styleSheet.container]}\n        testID={prefixTestID && `${prefixTestID}${selectedSuffix}`}\n      >\n        {url ? (\n          <View style={styleSheet.imageContainer}>\n            <ImageBackground\n              testID={prefixTestID && `${prefixTestID}${mediaSuffix}`}\n              source={source}\n              style={styleSheet.image}\n            />\n          </View>\n        ) : null}\n        <View\n          style={[\n            styleSheet.textContainer,\n            squeezed && styleSheet.squeezedTextContainer,\n            isSelected && selectedStyle\n          ]}\n        >\n          <Html\n            fontSize={squeezed ? theme.fontSize.medium : theme.fontSize.regular}\n            style={htmlStyle}\n          >\n            {children}\n          </Html>\n        </View>\n      </View>\n    </Touchable>\n  );\n};\n\nexport default Choice;\n"],"file":"index.native.js"}
+{"version":3,"sources":["../../../src/atom/choice/index.native.tsx"],"names":["React","useEffect","useState","View","StyleSheet","Html","ImageBackground","getCleanUri","Touchable","useTemplateContext","createStyleSheet","theme","create","boxShadow","shadowColor","shadowOffset","width","height","shadowOpacity","shadowRadius","elevation","backgroundColor","container","minHeight","colors","white","borderRadius","radius","regular","flexDirection","alignItems","textContainer","paddingHorizontal","paddingVertical","justifyContent","flex","squeezedTextContainer","padding","spacing","small","paddingLeft","undefined","paddingRight","text","fontWeight","bold","color","black","textSelected","unselectedImageContainer","borderRightColor","border","imageContainer","overflow","borderTopLeftRadius","borderBottomLeftRadius","image","Choice","children","isSelected","squeezed","isDisabled","onPress","media","testID","prefixTestID","style","questionType","templateContext","brandTheme","styleSheet","setStylesheet","_stylesheet","selectedSuffix","mediaType","type","toLowerCase","url","src","length","source","uri","mediaSuffix","htmlStyle","textWrapperStyle","push","selectionStyle","primary","borderColor","borderTopRightRadius","borderBottomRightRadius","fontSize","medium"],"mappings":"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","sourcesContent":["import React, {useEffect, useState} from 'react';\nimport {View, StyleSheet, ViewStyle} from 'react-native';\nimport type {Media, QuestionType} from '../../types/progression-engine';\n\nimport Html from '../html/index.native';\nimport ImageBackground from '../image-background/index.native';\nimport getCleanUri from '../../util/get-clean-uri';\nimport Touchable from '../../hoc/touchable/index.native';\nimport {useTemplateContext} from '../../template/app-review/template-context';\nimport {Theme} from '../../variables/theme.native';\n\nexport type Props = {\n  isSelected?: boolean;\n  onPress: () => void;\n  children: string;\n  isDisabled?: boolean;\n  testID?: string;\n  media?: Media;\n  squeezed?: boolean;\n  style?: ViewStyle;\n  questionType: QuestionType;\n};\n\ntype StyleSheetType = {\n  boxShadow: any;\n  container: any;\n  text: any;\n  textSelected: any;\n  textContainer: any;\n  squeezedTextContainer: any;\n  unselectedImageContainer: any;\n  imageContainer: any;\n  image: any;\n};\n\nconst createStyleSheet = (theme: Theme): StyleSheetType =>\n  StyleSheet.create({\n    boxShadow: {\n      shadowColor: '#000',\n      shadowOffset: {width: 0, height: 4},\n      shadowOpacity: 0.12,\n      shadowRadius: 16,\n      elevation: 8,\n      backgroundColor: '#0000'\n    },\n    container: {\n      minHeight: 80,\n      backgroundColor: theme.colors.white,\n      borderRadius: theme.radius.regular,\n      flexDirection: 'row',\n      alignItems: 'stretch'\n    },\n    textContainer: {\n      paddingHorizontal: 24,\n      paddingVertical: 12,\n      justifyContent: 'center',\n      alignItems: 'center',\n      flex: 1\n    },\n    squeezedTextContainer: {\n      padding: theme.spacing.small,\n      paddingLeft: undefined,\n      paddingVertical: undefined,\n      paddingRight: undefined,\n      flex: 0\n    },\n    text: {\n      fontWeight: theme.fontWeight.bold,\n      color: theme.colors.black\n    },\n    textSelected: {\n      color: theme.colors.white\n    },\n    unselectedImageContainer: {\n      borderRightColor: theme.colors.border\n    },\n    imageContainer: {\n      height: '100%',\n      width: '25%',\n      overflow: 'hidden',\n      borderTopLeftRadius: theme.radius.regular,\n      borderBottomLeftRadius: theme.radius.regular\n    },\n    image: {\n      flex: 1\n    }\n  });\n\nconst Choice = ({\n  children,\n  isSelected = false,\n  squeezed = false,\n  isDisabled,\n  onPress,\n  media,\n  testID: prefixTestID,\n  style,\n  questionType\n}: Props) => {\n  const templateContext = useTemplateContext();\n  const {theme, brandTheme} = templateContext;\n\n  const [styleSheet, setStylesheet] = useState<StyleSheetType | null>(null);\n\n  useEffect(() => {\n    const _stylesheet = createStyleSheet(theme);\n    setStylesheet(_stylesheet);\n  }, [theme]);\n\n  if (!styleSheet) {\n    return null;\n  }\n\n  const selectedSuffix = prefixTestID && isSelected ? '-selected' : '';\n  const mediaType = media && media.type && media.type === 'img' && media.type.toLowerCase();\n  const url =\n    media &&\n    media.type === 'img' &&\n    media.src &&\n    media.src.length > 0 &&\n    getCleanUri(media.src[0].url);\n\n  const source = {uri: url ? getCleanUri(url) : undefined};\n  const mediaSuffix = prefixTestID && mediaType ? `-${mediaType}` : '';\n\n  const htmlStyle: ViewStyle[] = [styleSheet.text];\n  const textWrapperStyle: ViewStyle[] = [\n    styleSheet.textContainer,\n    squeezed && styleSheet.squeezedTextContainer\n  ];\n\n  if (isSelected) {\n    htmlStyle.push(styleSheet.textSelected);\n\n    const selectionStyle = brandTheme && {\n      backgroundColor: brandTheme.colors.primary,\n      borderColor: brandTheme.colors.primary,\n      ...(url\n        ? {\n            borderTopRightRadius: theme.radius.regular,\n            borderBottomRightRadius: theme.radius.regular\n          }\n        : {\n            borderRadius: theme.radius.regular\n          })\n    };\n\n    textWrapperStyle.push(selectionStyle);\n  }\n\n  return (\n    <Touchable\n      onPress={!isDisabled ? onPress : undefined}\n      style={style}\n      analyticsID=\"question-choice\"\n      analyticsParams={{questionType}}\n    >\n      <View\n        style={[styleSheet.boxShadow, styleSheet.container]}\n        testID={prefixTestID && `${prefixTestID}${selectedSuffix}`}\n      >\n        {url ? (\n          <View style={styleSheet.imageContainer}>\n            <ImageBackground\n              testID={prefixTestID && `${prefixTestID}${mediaSuffix}`}\n              source={source}\n              style={styleSheet.image}\n            />\n          </View>\n        ) : null}\n        <View style={textWrapperStyle}>\n          <Html\n            fontSize={squeezed ? theme.fontSize.medium : theme.fontSize.regular}\n            style={htmlStyle}\n          >\n            {children}\n          </Html>\n        </View>\n      </View>\n    </Touchable>\n  );\n};\n\nexport default Choice;\n"],"file":"index.native.js"}

package/es/atom/provider/index.js

@@ -1,3 +1,5 @@
+import _getOr from "lodash/fp/getOr";
+import _get from "lodash/fp/get";
 import _defaultsDeep from "lodash/fp/defaultsDeep";
 
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
@@ -114,6 +116,17 @@ Provider.propTypes = process.env.NODE_ENV !== "production" ? {
     common: PropTypes.func
   })
 } : {};
-export { WebContext, useWebContext };
+
+const GetSkinFromContext = legacyContext => {
+  const context = useWebContext();
+
+  const legacySkin = _get('skin', legacyContext);
+
+  const skin = _getOr(legacySkin, 'skin', context);
+
+  return skin;
+};
+
+export { WebContext, useWebContext, GetSkinFromContext };
 export default Provider;
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/atom/provider/index.js"],"names":["React","PropTypes","SrcPropType","ColorPropType","HexPropType","WebContext","useWebContext","DEFAULT_SKIN","common","good","bad","primary","life","brand","primaryAdd1","primaryAdd2","primaryAdd3","primaryAdd4","xtraLightGrey","light","medium","dark","grey","orangeAdd","orange","positive","lightGreen","negative","battle","white","black","mergeSkin","skin","historyShape","shape","createHref","func","push","skinShape","objectOf","images","logo","login","icons","mod","courses","arrayOf","texts","translateShape","Provider","Component","getDerivedStateFromProps","props","history","translate","constructor","context","Vimeo","state","getChildContext","render","children","Children","only","isRequired","object","propTypes","node"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport {defaultsDeep} from 'lodash/fp';\nimport {SrcPropType, ColorPropType, HexPropType} from '../../util/proptypes';\nimport WebContext, {useWebContext} from './web-context';\n\nconst DEFAULT_SKIN = {\n  common: {\n    good: '#24b694',\n    bad: '#ed1c24',\n    primary: '#00B0FF',\n    life: '#ed1c24',\n    brand: '#00B0FF',\n    primaryAdd1: '#B3E5FC',\n    primaryAdd2: '#0091EA',\n    primaryAdd3: '#0277BD',\n    primaryAdd4: '#015798',\n    xtraLightGrey: '#FAFAFA',\n    light: '#ECEFF1',\n    medium: '#90A4AE',\n    dark: '#546E7A',\n    grey: '#607D8B',\n    orangeAdd: '#FF7043',\n    orange: '#FFA000',\n    positive: '#3EC483',\n    lightGreen: '#66BB6A',\n    negative: '#F73F52',\n    battle: '#FFE100',\n    white: '#FFFFFF',\n    black: '#14171A'\n  }\n};\n\nconst mergeSkin = (skin = {}) => defaultsDeep(DEFAULT_SKIN, skin);\n\nconst historyShape = PropTypes.shape({\n  createHref: PropTypes.func,\n  push: PropTypes.func\n});\n\nconst skinShape = PropTypes.shape({\n  common: PropTypes.objectOf(ColorPropType),\n  images: PropTypes.shape({\n    'logo-mobile': SrcPropType,\n    logo: SrcPropType,\n    'logo-email': SrcPropType,\n    login: SrcPropType\n  }),\n  icons: PropTypes.objectOf(HexPropType),\n  mod: PropTypes.objectOf(ColorPropType),\n  courses: PropTypes.arrayOf(ColorPropType),\n  texts: PropTypes.objectOf(ColorPropType)\n});\n\nconst translateShape = PropTypes.func;\n\nclass Provider extends React.Component {\n  static propTypes = {\n    history: historyShape,\n    skin: skinShape,\n    translate: translateShape,\n    children: PropTypes.node.isRequired,\n    Vimeo: PropTypes.shape({\n      common: PropTypes.func\n    })\n  };\n\n  static childContextTypes = {\n    history: historyShape,\n    skin: skinShape,\n    translate: translateShape.isRequired,\n    Vimeo: PropTypes.object\n  };\n\n  static getDerivedStateFromProps(props) {\n    const {history, skin, translate} = props;\n\n    return {\n      history,\n      skin: mergeSkin(skin),\n      translate\n    };\n  }\n\n  constructor(props, context) {\n    super(props, context);\n    const {history, skin, translate, Vimeo} = props;\n    // eslint-disable-next-line react/no-unused-state\n    this.state = {history, skin: mergeSkin(skin), translate, Vimeo};\n  }\n\n  getChildContext() {\n    return this.state;\n  }\n\n  render() {\n    const {children} = this.props;\n    return React.Children.only(children);\n  }\n}\n\nexport {WebContext, useWebContext};\nexport default Provider;\n"],"file":"index.js"}
+{"version":3,"sources":["../../../src/atom/provider/index.js"],"names":["React","PropTypes","SrcPropType","ColorPropType","HexPropType","WebContext","useWebContext","DEFAULT_SKIN","common","good","bad","primary","life","brand","primaryAdd1","primaryAdd2","primaryAdd3","primaryAdd4","xtraLightGrey","light","medium","dark","grey","orangeAdd","orange","positive","lightGreen","negative","battle","white","black","mergeSkin","skin","historyShape","shape","createHref","func","push","skinShape","objectOf","images","logo","login","icons","mod","courses","arrayOf","texts","translateShape","Provider","Component","getDerivedStateFromProps","props","history","translate","constructor","context","Vimeo","state","getChildContext","render","children","Children","only","isRequired","object","propTypes","node","GetSkinFromContext","legacyContext","legacySkin"],"mappings":";;;;;;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,OAAOC,SAAP,MAAsB,YAAtB;AAEA,SAAQC,WAAR,EAAqBC,aAArB,EAAoCC,WAApC,QAAsD,sBAAtD;AACA,OAAOC,UAAP,IAAoBC,aAApB,QAAwC,eAAxC;AAEA,MAAMC,YAAY,GAAG;AACnBC,EAAAA,MAAM,EAAE;AACNC,IAAAA,IAAI,EAAE,SADA;AAENC,IAAAA,GAAG,EAAE,SAFC;AAGNC,IAAAA,OAAO,EAAE,SAHH;AAINC,IAAAA,IAAI,EAAE,SAJA;AAKNC,IAAAA,KAAK,EAAE,SALD;AAMNC,IAAAA,WAAW,EAAE,SANP;AAONC,IAAAA,WAAW,EAAE,SAPP;AAQNC,IAAAA,WAAW,EAAE,SARP;AASNC,IAAAA,WAAW,EAAE,SATP;AAUNC,IAAAA,aAAa,EAAE,SAVT;AAWNC,IAAAA,KAAK,EAAE,SAXD;AAYNC,IAAAA,MAAM,EAAE,SAZF;AAaNC,IAAAA,IAAI,EAAE,SAbA;AAcNC,IAAAA,IAAI,EAAE,SAdA;AAeNC,IAAAA,SAAS,EAAE,SAfL;AAgBNC,IAAAA,MAAM,EAAE,SAhBF;AAiBNC,IAAAA,QAAQ,EAAE,SAjBJ;AAkBNC,IAAAA,UAAU,EAAE,SAlBN;AAmBNC,IAAAA,QAAQ,EAAE,SAnBJ;AAoBNC,IAAAA,MAAM,EAAE,SApBF;AAqBNC,IAAAA,KAAK,EAAE,SArBD;AAsBNC,IAAAA,KAAK,EAAE;AAtBD;AADW,CAArB;;AA2BA,MAAMC,SAAS,GAAG,CAACC,IAAI,GAAG,EAAR,KAAe,cAAazB,YAAb,EAA2ByB,IAA3B,CAAjC;;AAEA,MAAMC,YAAY,GAAGhC,SAAS,CAACiC,KAAV,CAAgB;AACnCC,EAAAA,UAAU,EAAElC,SAAS,CAACmC,IADa;AAEnCC,EAAAA,IAAI,EAAEpC,SAAS,CAACmC;AAFmB,CAAhB,CAArB;AAKA,MAAME,SAAS,GAAGrC,SAAS,CAACiC,KAAV,CAAgB;AAChC1B,EAAAA,MAAM,EAAEP,SAAS,CAACsC,QAAV,CAAmBpC,aAAnB,CADwB;AAEhCqC,EAAAA,MAAM,EAAEvC,SAAS,CAACiC,KAAV,CAAgB;AACtB,mBAAehC,WADO;AAEtBuC,IAAAA,IAAI,EAAEvC,WAFgB;AAGtB,kBAAcA,WAHQ;AAItBwC,IAAAA,KAAK,EAAExC;AAJe,GAAhB,CAFwB;AAQhCyC,EAAAA,KAAK,EAAE1C,SAAS,CAACsC,QAAV,CAAmBnC,WAAnB,CARyB;AAShCwC,EAAAA,GAAG,EAAE3C,SAAS,CAACsC,QAAV,CAAmBpC,aAAnB,CAT2B;AAUhC0C,EAAAA,OAAO,EAAE5C,SAAS,CAAC6C,OAAV,CAAkB3C,aAAlB,CAVuB;AAWhC4C,EAAAA,KAAK,EAAE9C,SAAS,CAACsC,QAAV,CAAmBpC,aAAnB;AAXyB,CAAhB,CAAlB;AAcA,MAAM6C,cAAc,GAAG/C,SAAS,CAACmC,IAAjC;;AAEA,MAAMa,QAAN,SAAuBjD,KAAK,CAACkD,SAA7B,CAAuC;AAkBrC,SAAOC,wBAAP,CAAgCC,KAAhC,EAAuC;AACrC,UAAM;AAACC,MAAAA,OAAD;AAAUrB,MAAAA,IAAV;AAAgBsB,MAAAA;AAAhB,QAA6BF,KAAnC;AAEA,WAAO;AACLC,MAAAA,OADK;AAELrB,MAAAA,IAAI,EAAED,SAAS,CAACC,IAAD,CAFV;AAGLsB,MAAAA;AAHK,KAAP;AAKD;;AAEDC,EAAAA,WAAW,CAACH,KAAD,EAAQI,OAAR,EAAiB;AAC1B,UAAMJ,KAAN,EAAaI,OAAb;AACA,UAAM;AAACH,MAAAA,OAAD;AAAUrB,MAAAA,IAAV;AAAgBsB,MAAAA,SAAhB;AAA2BG,MAAAA;AAA3B,QAAoCL,KAA1C,CAF0B,CAG1B;;AACA,SAAKM,KAAL,GAAa;AAACL,MAAAA,OAAD;AAAUrB,MAAAA,IAAI,EAAED,SAAS,CAACC,IAAD,CAAzB;AAAiCsB,MAAAA,SAAjC;AAA4CG,MAAAA;AAA5C,KAAb;AACD;;AAEDE,EAAAA,eAAe,GAAG;AAChB,WAAO,KAAKD,KAAZ;AACD;;AAEDE,EAAAA,MAAM,GAAG;AACP,UAAM;AAACC,MAAAA;AAAD,QAAa,KAAKT,KAAxB;AACA,WAAOpD,KAAK,CAAC8D,QAAN,CAAeC,IAAf,CAAoBF,QAApB,CAAP;AACD;;AA1CoC;;gBAAjCZ,Q,uBAWuB;AACzBI,EAAAA,OAAO,EAAEpB,YADgB;AAEzBD,EAAAA,IAAI,EAAEM,SAFmB;AAGzBgB,EAAAA,SAAS,EAAEN,cAAc,CAACgB,UAHD;AAIzBP,EAAAA,KAAK,EAAExD,SAAS,CAACgE;AAJQ,C;;AAXvBhB,Q,CACGiB,S,2CAAY;AACjBb,EAAAA,OAAO,EAAEpB,YADQ;AAEjBD,EAAAA,IAAI,EAAEM,SAFW;AAGjBgB,EAAAA,SAAS,EAAEN,cAHM;AAIjBa,EAAAA,QAAQ,EAAE5D,SAAS,CAACkE,IAAV,CAAeH,UAJR;AAKjBP,EAAAA,KAAK,EAAExD,SAAS,CAACiC,KAAV,CAAgB;AACrB1B,IAAAA,MAAM,EAAEP,SAAS,CAACmC;AADG,GAAhB;AALU,C;;AA4CrB,MAAMgC,kBAAkB,GAAGC,aAAa,IAAI;AAC1C,QAAMb,OAAO,GAAGlD,aAAa,EAA7B;;AACA,QAAMgE,UAAU,GAAG,KAAI,MAAJ,EAAYD,aAAZ,CAAnB;;AACA,QAAMrC,IAAI,GAAG,OAAMsC,UAAN,EAAkB,MAAlB,EAA0Bd,OAA1B,CAAb;;AAEA,SAAOxB,IAAP;AACD,CAND;;AAQA,SAAQ3B,UAAR,EAAoBC,aAApB,EAAmC8D,kBAAnC;AACA,eAAenB,QAAf","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport {defaultsDeep, get, getOr} from 'lodash/fp';\nimport {SrcPropType, ColorPropType, HexPropType} from '../../util/proptypes';\nimport WebContext, {useWebContext} from './web-context';\n\nconst DEFAULT_SKIN = {\n  common: {\n    good: '#24b694',\n    bad: '#ed1c24',\n    primary: '#00B0FF',\n    life: '#ed1c24',\n    brand: '#00B0FF',\n    primaryAdd1: '#B3E5FC',\n    primaryAdd2: '#0091EA',\n    primaryAdd3: '#0277BD',\n    primaryAdd4: '#015798',\n    xtraLightGrey: '#FAFAFA',\n    light: '#ECEFF1',\n    medium: '#90A4AE',\n    dark: '#546E7A',\n    grey: '#607D8B',\n    orangeAdd: '#FF7043',\n    orange: '#FFA000',\n    positive: '#3EC483',\n    lightGreen: '#66BB6A',\n    negative: '#F73F52',\n    battle: '#FFE100',\n    white: '#FFFFFF',\n    black: '#14171A'\n  }\n};\n\nconst mergeSkin = (skin = {}) => defaultsDeep(DEFAULT_SKIN, skin);\n\nconst historyShape = PropTypes.shape({\n  createHref: PropTypes.func,\n  push: PropTypes.func\n});\n\nconst skinShape = PropTypes.shape({\n  common: PropTypes.objectOf(ColorPropType),\n  images: PropTypes.shape({\n    'logo-mobile': SrcPropType,\n    logo: SrcPropType,\n    'logo-email': SrcPropType,\n    login: SrcPropType\n  }),\n  icons: PropTypes.objectOf(HexPropType),\n  mod: PropTypes.objectOf(ColorPropType),\n  courses: PropTypes.arrayOf(ColorPropType),\n  texts: PropTypes.objectOf(ColorPropType)\n});\n\nconst translateShape = PropTypes.func;\n\nclass Provider extends React.Component {\n  static propTypes = {\n    history: historyShape,\n    skin: skinShape,\n    translate: translateShape,\n    children: PropTypes.node.isRequired,\n    Vimeo: PropTypes.shape({\n      common: PropTypes.func\n    })\n  };\n\n  static childContextTypes = {\n    history: historyShape,\n    skin: skinShape,\n    translate: translateShape.isRequired,\n    Vimeo: PropTypes.object\n  };\n\n  static getDerivedStateFromProps(props) {\n    const {history, skin, translate} = props;\n\n    return {\n      history,\n      skin: mergeSkin(skin),\n      translate\n    };\n  }\n\n  constructor(props, context) {\n    super(props, context);\n    const {history, skin, translate, Vimeo} = props;\n    // eslint-disable-next-line react/no-unused-state\n    this.state = {history, skin: mergeSkin(skin), translate, Vimeo};\n  }\n\n  getChildContext() {\n    return this.state;\n  }\n\n  render() {\n    const {children} = this.props;\n    return React.Children.only(children);\n  }\n}\n\nconst GetSkinFromContext = legacyContext => {\n  const context = useWebContext();\n  const legacySkin = get('skin', legacyContext);\n  const skin = getOr(legacySkin, 'skin', context);\n\n  return skin;\n};\n\nexport {WebContext, useWebContext, GetSkinFromContext};\nexport default Provider;\n"],"file":"index.js"}

package/es/atom/range/handle.js

@@ -1,83 +1,83 @@
 import _getOr from "lodash/fp/getOr";
 import _noop from "lodash/fp/noop";
-
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
-import React from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import PropTypes from 'prop-types';
-import Provider from '../provider';
+import Provider, { GetSkinFromContext } from '../provider';
 import { getShadowBoxColorFromPrimary } from '../../util/get-shadow-box-color-from-primary';
 import style from './handle.css';
-const Hammer = // eslint-disable-next-line no-undef
-typeof window !== 'undefined' ? require('hammerjs') :
-/* istanbul ignore next */
-undefined;
 
-class Handle extends React.Component {
-  constructor(props, context) {
-    super(props, context);
-    this.setHandle = this.setHandle.bind(this);
-  }
-
-  componentDidMount() {
-    /* istanbul ignore else */
-    if (Hammer) {
-      const {
-        onPanStart = _noop,
-        onPanEnd = _noop,
-        onPan = _noop
-      } = this.props;
-      this.hammer = new Hammer(this.handle);
-      this.hammer.on('panstart', onPanStart);
-      this.hammer.on('panend', onPanEnd);
-      this.hammer.on('panleft panright', onPan);
-    }
-  }
+class NoopHammer {
+  constructor() {} // eslint-disable-next-line class-methods-use-this
 
-  componentWillUnmount() {
-    if (this.hammer) {
-      this.hammer.stop();
-      this.hammer.destroy();
-    }
 
-    this.hammer = null;
-  }
+  on() {
+    return;
+  } // eslint-disable-next-line class-methods-use-this
 
-  setHandle(el) {
-    this.handle = el;
-  }
 
-  render() {
-    const {
-      skin
-    } = this.context;
+  stop() {
+    return;
+  } // eslint-disable-next-line class-methods-use-this
 
-    const primaryColor = _getOr('#00B0FF', 'common.primary', skin);
 
-    const backgroundColor = primaryColor;
-    return /*#__PURE__*/React.createElement("div", {
-      className: style.wrapper
-    }, /*#__PURE__*/React.createElement("div", {
-      style: {
-        backgroundColor,
-        boxShadow: `0px 0px 20px ${getShadowBoxColorFromPrimary(primaryColor)}`
-      },
-      className: style.default,
-      ref: this.setHandle,
-      "data-name": 'handle'
-    }));
+  destroy() {
+    return;
   }
 
 }
 
-_defineProperty(Handle, "contextTypes", {
-  skin: Provider.childContextTypes.skin
-});
+const Hammer = // eslint-disable-next-line no-undef
+typeof window !== 'undefined' ?
+/* istanbul ignore next */
+require('hammerjs') : NoopHammer;
+
+const Handle = (props, legacyContext) => {
+  const skin = GetSkinFromContext(legacyContext);
+
+  const primaryColor = _getOr('#00B0FF', 'common.primary', skin);
+
+  const backgroundColor = primaryColor;
+  const {
+    onPanStart = _noop,
+    onPanEnd = _noop,
+    onPan = _noop
+  } = props;
+  const handle = useRef();
+  const [hammer, setHammer] = useState();
+  useEffect(() => {
+    setHammer(new Hammer(handle.current));
+  }, [handle]);
+  useEffect(() => {
+    if (!hammer) return;
+    hammer.on('panstart', onPanStart);
+    hammer.on('panend', onPanEnd);
+    hammer.on('panleft panright', onPan);
+    return () => {
+      hammer.stop();
+      hammer.destroy();
+      setHammer(null);
+    };
+  }, [hammer, onPanStart, onPanEnd, onPan]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: style.wrapper
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      backgroundColor,
+      boxShadow: `0px 0px 20px ${getShadowBoxColorFromPrimary(primaryColor)}`
+    },
+    className: style.default,
+    ref: handle,
+    "data-name": 'handle'
+  }));
+};
 
 Handle.propTypes = process.env.NODE_ENV !== "production" ? {
   onPan: PropTypes.func,
   onPanStart: PropTypes.func,
   onPanEnd: PropTypes.func
 } : {};
+Handle.contextTypes = {
+  skin: Provider.childContextTypes.skin
+};
 export default Handle;
 //# sourceMappingURL=handle.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/atom/range/handle.js"],"names":["React","PropTypes","Provider","getShadowBoxColorFromPrimary","style","Hammer","window","require","undefined","Handle","Component","constructor","props","context","setHandle","bind","componentDidMount","onPanStart","onPanEnd","onPan","hammer","handle","on","componentWillUnmount","stop","destroy","el","render","skin","primaryColor","backgroundColor","wrapper","boxShadow","default","childContextTypes","propTypes","func"],"mappings":";;;;;AACA,OAAOA,KAAP,MAAkB,OAAlB;AACA,OAAOC,SAAP,MAAsB,YAAtB;AACA,OAAOC,QAAP,MAAqB,aAArB;AACA,SAAQC,4BAAR,QAA2C,8CAA3C;AACA,OAAOC,KAAP,MAAkB,cAAlB;AAEA,MAAMC,MAAM,GACV;AACA,OAAOC,MAAP,KAAkB,WAAlB,GAAgCC,OAAO,CAAC,UAAD,CAAvC;AAAsD;AAA2BC,SAFnF;;AAIA,MAAMC,MAAN,SAAqBT,KAAK,CAACU,SAA3B,CAAqC;AAWnCC,EAAAA,WAAW,CAACC,KAAD,EAAQC,OAAR,EAAiB;AAC1B,UAAMD,KAAN,EAAaC,OAAb;AAEA,SAAKC,SAAL,GAAiB,KAAKA,SAAL,CAAeC,IAAf,CAAoB,IAApB,CAAjB;AACD;;AAEDC,EAAAA,iBAAiB,GAAG;AAClB;AACA,QAAIX,MAAJ,EAAY;AACV,YAAM;AAACY,QAAAA,UAAU,QAAX;AAAoBC,QAAAA,QAAQ,QAA5B;AAAqCC,QAAAA,KAAK;AAA1C,UAAqD,KAAKP,KAAhE;AAEA,WAAKQ,MAAL,GAAc,IAAIf,MAAJ,CAAW,KAAKgB,MAAhB,CAAd;AACA,WAAKD,MAAL,CAAYE,EAAZ,CAAe,UAAf,EAA2BL,UAA3B;AACA,WAAKG,MAAL,CAAYE,EAAZ,CAAe,QAAf,EAAyBJ,QAAzB;AAEA,WAAKE,MAAL,CAAYE,EAAZ,CAAe,kBAAf,EAAmCH,KAAnC;AACD;AACF;;AAEDI,EAAAA,oBAAoB,GAAG;AACrB,QAAI,KAAKH,MAAT,EAAiB;AACf,WAAKA,MAAL,CAAYI,IAAZ;AACA,WAAKJ,MAAL,CAAYK,OAAZ;AACD;;AACD,SAAKL,MAAL,GAAc,IAAd;AACD;;AAEDN,EAAAA,SAAS,CAACY,EAAD,EAAK;AACZ,SAAKL,MAAL,GAAcK,EAAd;AACD;;AAEDC,EAAAA,MAAM,GAAG;AACP,UAAM;AAACC,MAAAA;AAAD,QAAS,KAAKf,OAApB;;AACA,UAAMgB,YAAY,GAAG,OAAM,SAAN,EAAiB,gBAAjB,EAAmCD,IAAnC,CAArB;;AACA,UAAME,eAAe,GAAGD,YAAxB;AAEA,wBACE;AAAK,MAAA,SAAS,EAAEzB,KAAK,CAAC2B;AAAtB,oBACE;AACE,MAAA,KAAK,EAAE;AACLD,QAAAA,eADK;AAELE,QAAAA,SAAS,EAAG,gBAAe7B,4BAA4B,CAAC0B,YAAD,CAAe;AAFjE,OADT;AAKE,MAAA,SAAS,EAAEzB,KAAK,CAAC6B,OALnB;AAME,MAAA,GAAG,EAAE,KAAKnB,SANZ;AAOE,mBAAW;AAPb,MADF,CADF;AAaD;;AA5DkC;;gBAA/BL,M,kBAOkB;AACpBmB,EAAAA,IAAI,EAAE1B,QAAQ,CAACgC,iBAAT,CAA2BN;AADb,C;;AAPlBnB,M,CACG0B,S,2CAAY;AACjBhB,EAAAA,KAAK,EAAElB,SAAS,CAACmC,IADA;AAEjBnB,EAAAA,UAAU,EAAEhB,SAAS,CAACmC,IAFL;AAGjBlB,EAAAA,QAAQ,EAAEjB,SAAS,CAACmC;AAHH,C;AA8DrB,eAAe3B,MAAf","sourcesContent":["import {noop, getOr} from 'lodash/fp';\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport Provider from '../provider';\nimport {getShadowBoxColorFromPrimary} from '../../util/get-shadow-box-color-from-primary';\nimport style from './handle.css';\n\nconst Hammer =\n  // eslint-disable-next-line no-undef\n  typeof window !== 'undefined' ? require('hammerjs') : /* istanbul ignore next */ undefined;\n\nclass Handle extends React.Component {\n  static propTypes = {\n    onPan: PropTypes.func,\n    onPanStart: PropTypes.func,\n    onPanEnd: PropTypes.func\n  };\n\n  static contextTypes = {\n    skin: Provider.childContextTypes.skin\n  };\n\n  constructor(props, context) {\n    super(props, context);\n\n    this.setHandle = this.setHandle.bind(this);\n  }\n\n  componentDidMount() {\n    /* istanbul ignore else */\n    if (Hammer) {\n      const {onPanStart = noop, onPanEnd = noop, onPan = noop} = this.props;\n\n      this.hammer = new Hammer(this.handle);\n      this.hammer.on('panstart', onPanStart);\n      this.hammer.on('panend', onPanEnd);\n\n      this.hammer.on('panleft panright', onPan);\n    }\n  }\n\n  componentWillUnmount() {\n    if (this.hammer) {\n      this.hammer.stop();\n      this.hammer.destroy();\n    }\n    this.hammer = null;\n  }\n\n  setHandle(el) {\n    this.handle = el;\n  }\n\n  render() {\n    const {skin} = this.context;\n    const primaryColor = getOr('#00B0FF', 'common.primary', skin);\n    const backgroundColor = primaryColor;\n\n    return (\n      <div className={style.wrapper}>\n        <div\n          style={{\n            backgroundColor,\n            boxShadow: `0px 0px 20px ${getShadowBoxColorFromPrimary(primaryColor)}`\n          }}\n          className={style.default}\n          ref={this.setHandle}\n          data-name={'handle'}\n        />\n      </div>\n    );\n  }\n}\n\nexport default Handle;\n"],"file":"handle.js"}
+{"version":3,"sources":["../../../src/atom/range/handle.js"],"names":["React","useEffect","useRef","useState","PropTypes","Provider","GetSkinFromContext","getShadowBoxColorFromPrimary","style","NoopHammer","constructor","on","stop","destroy","Hammer","window","require","Handle","props","legacyContext","skin","primaryColor","backgroundColor","onPanStart","onPanEnd","onPan","handle","hammer","setHammer","current","wrapper","boxShadow","default","propTypes","func","contextTypes","childContextTypes"],"mappings":";;AACA,OAAOA,KAAP,IAAeC,SAAf,EAA0BC,MAA1B,EAAkCC,QAAlC,QAAiD,OAAjD;AACA,OAAOC,SAAP,MAAsB,YAAtB;AACA,OAAOC,QAAP,IAAkBC,kBAAlB,QAA2C,aAA3C;AACA,SAAQC,4BAAR,QAA2C,8CAA3C;AACA,OAAOC,KAAP,MAAkB,cAAlB;;AAEA,MAAMC,UAAN,CAAiB;AACfC,EAAAA,WAAW,GAAG,CAAE,CADD,CAGf;;;AACAC,EAAAA,EAAE,GAAG;AACH;AACD,GANc,CAQf;;;AACAC,EAAAA,IAAI,GAAG;AACL;AACD,GAXc,CAaf;;;AACAC,EAAAA,OAAO,GAAG;AACR;AACD;;AAhBc;;AAmBjB,MAAMC,MAAM,GAAG;AACb,OAAOC,MAAP,KAAkB,WAAlB;AAAgC;AAA2BC,OAAO,CAAC,UAAD,CAAlE,GAAiFP,UADnF;;AAGA,MAAMQ,MAAM,GAAG,CAACC,KAAD,EAAQC,aAAR,KAA0B;AACvC,QAAMC,IAAI,GAAGd,kBAAkB,CAACa,aAAD,CAA/B;;AACA,QAAME,YAAY,GAAG,OAAM,SAAN,EAAiB,gBAAjB,EAAmCD,IAAnC,CAArB;;AACA,QAAME,eAAe,GAAGD,YAAxB;AACA,QAAM;AAACE,IAAAA,UAAU,QAAX;AAAoBC,IAAAA,QAAQ,QAA5B;AAAqCC,IAAAA,KAAK;AAA1C,MAAqDP,KAA3D;AAEA,QAAMQ,MAAM,GAAGxB,MAAM,EAArB;AACA,QAAM,CAACyB,MAAD,EAASC,SAAT,IAAsBzB,QAAQ,EAApC;AAEAF,EAAAA,SAAS,CAAC,MAAM;AACd2B,IAAAA,SAAS,CAAC,IAAId,MAAJ,CAAWY,MAAM,CAACG,OAAlB,CAAD,CAAT;AACD,GAFQ,EAEN,CAACH,MAAD,CAFM,CAAT;AAIAzB,EAAAA,SAAS,CAAC,MAAM;AACd,QAAI,CAAC0B,MAAL,EAAa;AACbA,IAAAA,MAAM,CAAChB,EAAP,CAAU,UAAV,EAAsBY,UAAtB;AACAI,IAAAA,MAAM,CAAChB,EAAP,CAAU,QAAV,EAAoBa,QAApB;AAEAG,IAAAA,MAAM,CAAChB,EAAP,CAAU,kBAAV,EAA8Bc,KAA9B;AAEA,WAAO,MAAM;AACXE,MAAAA,MAAM,CAACf,IAAP;AACAe,MAAAA,MAAM,CAACd,OAAP;AACAe,MAAAA,SAAS,CAAC,IAAD,CAAT;AACD,KAJD;AAKD,GAZQ,EAYN,CAACD,MAAD,EAASJ,UAAT,EAAqBC,QAArB,EAA+BC,KAA/B,CAZM,CAAT;AAcA,sBACE;AAAK,IAAA,SAAS,EAAEjB,KAAK,CAACsB;AAAtB,kBACE;AACE,IAAA,KAAK,EAAE;AACLR,MAAAA,eADK;AAELS,MAAAA,SAAS,EAAG,gBAAexB,4BAA4B,CAACc,YAAD,CAAe;AAFjE,KADT;AAKE,IAAA,SAAS,EAAEb,KAAK,CAACwB,OALnB;AAME,IAAA,GAAG,EAAEN,MANP;AAOE,iBAAW;AAPb,IADF,CADF;AAaD,CAxCD;;AA0CAT,MAAM,CAACgB,SAAP,2CAAmB;AACjBR,EAAAA,KAAK,EAAErB,SAAS,CAAC8B,IADA;AAEjBX,EAAAA,UAAU,EAAEnB,SAAS,CAAC8B,IAFL;AAGjBV,EAAAA,QAAQ,EAAEpB,SAAS,CAAC8B;AAHH,CAAnB;AAMAjB,MAAM,CAACkB,YAAP,GAAsB;AACpBf,EAAAA,IAAI,EAAEf,QAAQ,CAAC+B,iBAAT,CAA2BhB;AADb,CAAtB;AAIA,eAAeH,MAAf","sourcesContent":["import {noop, getOr} from 'lodash/fp';\nimport React, {useEffect, useRef, useState} from 'react';\nimport PropTypes from 'prop-types';\nimport Provider, {GetSkinFromContext} from '../provider';\nimport {getShadowBoxColorFromPrimary} from '../../util/get-shadow-box-color-from-primary';\nimport style from './handle.css';\n\nclass NoopHammer {\n  constructor() {}\n\n  // eslint-disable-next-line class-methods-use-this\n  on() {\n    return;\n  }\n\n  // eslint-disable-next-line class-methods-use-this\n  stop() {\n    return;\n  }\n\n  // eslint-disable-next-line class-methods-use-this\n  destroy() {\n    return;\n  }\n}\n\nconst Hammer = // eslint-disable-next-line no-undef\n  typeof window !== 'undefined' ? /* istanbul ignore next */ require('hammerjs') : NoopHammer;\n\nconst Handle = (props, legacyContext) => {\n  const skin = GetSkinFromContext(legacyContext);\n  const primaryColor = getOr('#00B0FF', 'common.primary', skin);\n  const backgroundColor = primaryColor;\n  const {onPanStart = noop, onPanEnd = noop, onPan = noop} = props;\n\n  const handle = useRef();\n  const [hammer, setHammer] = useState();\n\n  useEffect(() => {\n    setHammer(new Hammer(handle.current));\n  }, [handle]);\n\n  useEffect(() => {\n    if (!hammer) return;\n    hammer.on('panstart', onPanStart);\n    hammer.on('panend', onPanEnd);\n\n    hammer.on('panleft panright', onPan);\n\n    return () => {\n      hammer.stop();\n      hammer.destroy();\n      setHammer(null);\n    };\n  }, [hammer, onPanStart, onPanEnd, onPan]);\n\n  return (\n    <div className={style.wrapper}>\n      <div\n        style={{\n          backgroundColor,\n          boxShadow: `0px 0px 20px ${getShadowBoxColorFromPrimary(primaryColor)}`\n        }}\n        className={style.default}\n        ref={handle}\n        data-name={'handle'}\n      />\n    </div>\n  );\n};\n\nHandle.propTypes = {\n  onPan: PropTypes.func,\n  onPanStart: PropTypes.func,\n  onPanEnd: PropTypes.func\n};\n\nHandle.contextTypes = {\n  skin: Provider.childContextTypes.skin\n};\n\nexport default Handle;\n"],"file":"handle.js"}

package/es/atom/range/index.js

@@ -1,15 +1,11 @@
 import _clamp from "lodash/fp/clamp";
 import _set from "lodash/fp/set";
 import _noop from "lodash/fp/noop";
-import _getOr from "lodash/fp/getOr";
 
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
 import React from 'react';
 import PropTypes from 'prop-types';
-import Provider from '../provider';
 import Handle from './handle';
 import style from './style.css';
 
@@ -32,6 +28,49 @@ const extractStateFromProps = props => {
   };
 };
 
+const RenderHandles = props => {
+  const {
+    left,
+    right,
+    multi = false,
+    pending,
+    onHandleMinChange,
+    onHandleMinChangeEnd,
+    onHandleMaxChange,
+    onHandleMaxChangeEnd
+  } = props;
+  return /*#__PURE__*/React.createElement("div", null, multi ? /*#__PURE__*/React.createElement("span", {
+    className: pending ? style.handle : style.animatedHandle,
+    style: {
+      left: `${left * 100}%`
+    }
+  }, /*#__PURE__*/React.createElement(Handle, {
+    axis: "x",
+    onPan: onHandleMinChange,
+    onPanEnd: onHandleMinChangeEnd
+  })) : null, /*#__PURE__*/React.createElement("span", {
+    className: pending ? style.handle : style.animatedHandle,
+    style: {
+      left: `${right * 100}%`
+    }
+  }, /*#__PURE__*/React.createElement(Handle, {
+    axis: "x",
+    onPan: onHandleMaxChange,
+    onPanEnd: onHandleMaxChangeEnd
+  })));
+};
+
+RenderHandles.propTypes = process.env.NODE_ENV !== "production" ? {
+  left: PropTypes.number,
+  right: PropTypes.number,
+  multi: PropTypes.bool,
+  pending: PropTypes.bool,
+  onHandleMinChange: PropTypes.func,
+  onHandleMinChangeEnd: PropTypes.func,
+  onHandleMaxChange: PropTypes.func,
+  onHandleMaxChangeEnd: PropTypes.func
+} : {};
+
 class Range extends React.Component {
   static getDerivedStateFromProps(props, state) {
     const {
@@ -132,48 +171,16 @@ class Range extends React.Component {
     return this.handleChange(newValue, closestHandle, false);
   }
 
-  renderHandles() {
-    const {
-      value: [left, right],
-      multi,
-      pending
-    } = this.state;
-    return /*#__PURE__*/React.createElement("div", null, multi ? /*#__PURE__*/React.createElement("span", {
-      className: pending ? style.handle : style.animatedHandle,
-      style: {
-        left: `${left * 100}%`
-      }
-    }, /*#__PURE__*/React.createElement(Handle, {
-      axis: "x",
-      onPan: this.handleMinChange,
-      onPanEnd: this.handleMinChangeEnd
-    })) : null, /*#__PURE__*/React.createElement("span", {
-      className: pending ? style.handle : style.animatedHandle,
-      style: {
-        left: `${right * 100}%`
-      }
-    }, /*#__PURE__*/React.createElement(Handle, {
-      axis: "x",
-      onPan: this.handleMaxChange,
-      onPanEnd: this.handleMaxChangeEnd
-    })));
-  }
-
   render() {
     const {
-      skin
-    } = this.context;
-
-    const defaultColor = _getOr('#00B0FF', 'common.primary', skin);
-
-    const {
+      multi = false,
       value: [left, right],
       pending
     } = this.state;
     const railWidth = right - left;
     const railLeft = left;
     const railStyle = {
-      backgroundColor: defaultColor,
+      backgroundColor: '#9999A8',
       width: `${railWidth * 100}%`,
       left: `${railLeft * 100}%`
     };
@@ -189,15 +196,20 @@ class Range extends React.Component {
     }), /*#__PURE__*/React.createElement("div", {
       className: pending ? style.rail : style.animatedRail,
       style: railStyle
-    }), this.renderHandles()));
+    }), /*#__PURE__*/React.createElement(RenderHandles, {
+      left: left,
+      right: right,
+      pending: pending,
+      multi: multi,
+      onHandleMinChange: this.handleMinChange,
+      onHandleMinChangeEnd: this.handleMinChangeEnd,
+      onHandleMaxChange: this.handleMaxChange,
+      onHandleMaxChangeEnd: this.handleMaxChangeEnd
+    })));
   }
 
 }
 
-_defineProperty(Range, "contextTypes", {
-  skin: Provider.childContextTypes.skin
-});
-
 Range.propTypes = process.env.NODE_ENV !== "production" ? {
   onChange: PropTypes.func,
   onChangeEnd: PropTypes.func,

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/atom/range/index.js"],"names":["React","PropTypes","Provider","Handle","style","valueOnTrack","track","x","left","right","getBoundingClientRect","extractStateFromProps","props","multi","value","Range","Component","getDerivedStateFromProps","state","pending","constructor","context","handleClick","bind","setRefTrack","handleMinChange","handleMaxChange","handleMinChangeEnd","handleMaxChangeEnd","e","srcEvent","stopPropagation","preventDefault","newValue","center","handleChange","valueIndex","prevValue","minValue","maxValue","nextValue","triggerChange","setState","newValues","onChange","onChangeEnd","handle","clientX","isClickToTheLeft","closestHandle","Math","abs","renderHandles","animatedHandle","render","skin","defaultColor","railWidth","railLeft","railStyle","backgroundColor","width","containerWrapper","container","rail","animatedRail","childContextTypes","propTypes","func","bool","oneOfType","number","arrayOf"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport {getOr, noop, set, clamp} from 'lodash/fp';\nimport Provider from '../provider';\nimport Handle from './handle';\nimport style from './style.css';\n\nconst valueOnTrack = (track, x) => {\n  const {left, right} = track.getBoundingClientRect();\n  return clamp(0, 1, (x - left) / (right - left));\n};\n\nconst extractStateFromProps = props => {\n  const {multi = false, value = multi ? [0, 1] : 0} = props;\n  return {\n    multi,\n    value: multi ? value : [0, value]\n  };\n};\n\nclass Range extends React.Component {\n  static propTypes = {\n    onChange: PropTypes.func,\n    onChangeEnd: PropTypes.func,\n    multi: PropTypes.bool,\n    // eslint-disable-next-line react/no-unused-prop-types\n    value: PropTypes.oneOfType([PropTypes.number, PropTypes.arrayOf(PropTypes.number)])\n  };\n\n  static contextTypes = {\n    skin: Provider.childContextTypes.skin\n  };\n\n  static getDerivedStateFromProps(props, state) {\n    const {pending} = state;\n\n    if (pending) return null;\n\n    return extractStateFromProps(props);\n  }\n\n  constructor(props, context) {\n    super(props, context);\n\n    this.state = {\n      ...extractStateFromProps(props),\n      pending: false\n    };\n\n    this.handleClick = this.handleClick.bind(this);\n    this.setRefTrack = this.setRefTrack.bind(this);\n    this.handleMinChange = this.handleMinChange.bind(this);\n    this.handleMaxChange = this.handleMaxChange.bind(this);\n    this.handleMinChangeEnd = this.handleMinChangeEnd.bind(this);\n    this.handleMaxChangeEnd = this.handleMaxChangeEnd.bind(this);\n  }\n\n  setRefTrack(track) {\n    this.track = track;\n  }\n\n  handleMinChange(e) {\n    e.srcEvent.stopPropagation();\n    e.srcEvent.preventDefault();\n    const newValue = valueOnTrack(this.track, e.center.x);\n    return this.handleChange(newValue, 0, true);\n  }\n\n  handleMaxChange(e) {\n    e.srcEvent.stopPropagation();\n    e.srcEvent.preventDefault();\n    const newValue = valueOnTrack(this.track, e.center.x);\n    return this.handleChange(newValue, 1, true);\n  }\n\n  handleMinChangeEnd(e) {\n    e.srcEvent.stopPropagation();\n    e.srcEvent.preventDefault();\n    const newValue = valueOnTrack(this.track, e.center.x);\n    return this.handleChange(newValue, 0, false);\n  }\n\n  handleMaxChangeEnd(e) {\n    e.srcEvent.stopPropagation();\n    e.srcEvent.preventDefault();\n    const newValue = valueOnTrack(this.track, e.center.x);\n    return this.handleChange(newValue, 1, false);\n  }\n\n  handleChange(value, valueIndex, pending) {\n    const {value: prevValue} = this.state;\n\n    const newValue = set(valueIndex, value, prevValue);\n\n    const [minValue, maxValue] = newValue;\n\n    const nextValue = minValue > maxValue ? prevValue : newValue;\n\n    this.triggerChange(nextValue, pending);\n    return this.setState({\n      pending,\n      value: pending ? nextValue : extractStateFromProps(this.props).value\n    });\n  }\n\n  triggerChange(newValues, pending) {\n    const {onChange = noop, onChangeEnd = onChange, multi = false} = this.props;\n\n    const handle = pending ? onChange : onChangeEnd;\n\n    return handle(multi ? newValues : newValues[1]);\n  }\n\n  handleClick(e) {\n    e.stopPropagation();\n    e.preventDefault();\n    const {\n      value: [left, right],\n      multi\n    } = this.state;\n    const x = e.clientX;\n    const newValue = valueOnTrack(this.track, x);\n\n    if (!multi) return this.handleChange(newValue, 1, false);\n\n    if (left === right) {\n      const isClickToTheLeft = left - newValue > 0;\n      return this.handleChange(newValue, isClickToTheLeft ? 0 : 1, false);\n    }\n\n    const closestHandle = Math.abs(newValue - left) < Math.abs(newValue - right) ? 0 : 1;\n    return this.handleChange(newValue, closestHandle, false);\n  }\n\n  renderHandles() {\n    const {\n      value: [left, right],\n      multi,\n      pending\n    } = this.state;\n\n    return (\n      <div>\n        {multi ? (\n          <span\n            className={pending ? style.handle : style.animatedHandle}\n            style={{left: `${left * 100}%`}}\n          >\n            <Handle axis=\"x\" onPan={this.handleMinChange} onPanEnd={this.handleMinChangeEnd} />\n          </span>\n        ) : null}\n        <span\n          className={pending ? style.handle : style.animatedHandle}\n          style={{left: `${right * 100}%`}}\n        >\n          <Handle axis=\"x\" onPan={this.handleMaxChange} onPanEnd={this.handleMaxChangeEnd} />\n        </span>\n      </div>\n    );\n  }\n\n  render() {\n    const {skin} = this.context;\n    const defaultColor = getOr('#00B0FF', 'common.primary', skin);\n\n    const {\n      value: [left, right],\n      pending\n    } = this.state;\n    const railWidth = right - left;\n    const railLeft = left;\n    const railStyle = {\n      backgroundColor: defaultColor,\n      width: `${railWidth * 100}%`,\n      left: `${railLeft * 100}%`\n    };\n\n    return (\n      <div className={style.containerWrapper} onClick={this.handleClick}>\n        <div className={style.container}>\n          <div className={style.track} data-name=\"sliderTrack\" ref={this.setRefTrack} />\n          <div className={pending ? style.rail : style.animatedRail} style={railStyle} />\n          {this.renderHandles()}\n        </div>\n      </div>\n    );\n  }\n}\n\nexport default Range;\n"],"file":"index.js"}
+{"version":3,"sources":["../../../src/atom/range/index.js"],"names":["React","PropTypes","Handle","style","valueOnTrack","track","x","left","right","getBoundingClientRect","extractStateFromProps","props","multi","value","RenderHandles","pending","onHandleMinChange","onHandleMinChangeEnd","onHandleMaxChange","onHandleMaxChangeEnd","handle","animatedHandle","propTypes","number","bool","func","Range","Component","getDerivedStateFromProps","state","constructor","context","handleClick","bind","setRefTrack","handleMinChange","handleMaxChange","handleMinChangeEnd","handleMaxChangeEnd","e","srcEvent","stopPropagation","preventDefault","newValue","center","handleChange","valueIndex","prevValue","minValue","maxValue","nextValue","triggerChange","setState","newValues","onChange","onChangeEnd","clientX","isClickToTheLeft","closestHandle","Math","abs","render","railWidth","railLeft","railStyle","backgroundColor","width","containerWrapper","container","rail","animatedRail","oneOfType","arrayOf"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport {noop, set, clamp} from 'lodash/fp';\nimport Handle from './handle';\nimport style from './style.css';\n\nconst valueOnTrack = (track, x) => {\n  const {left, right} = track.getBoundingClientRect();\n  return clamp(0, 1, (x - left) / (right - left));\n};\n\nconst extractStateFromProps = props => {\n  const {multi = false, value = multi ? [0, 1] : 0} = props;\n  return {\n    multi,\n    value: multi ? value : [0, value]\n  };\n};\n\nconst RenderHandles = props => {\n  const {\n    left,\n    right,\n    multi = false,\n    pending,\n    onHandleMinChange,\n    onHandleMinChangeEnd,\n    onHandleMaxChange,\n    onHandleMaxChangeEnd\n  } = props;\n\n  return (\n    <div>\n      {multi ? (\n        <span\n          className={pending ? style.handle : style.animatedHandle}\n          style={{left: `${left * 100}%`}}\n        >\n          <Handle axis=\"x\" onPan={onHandleMinChange} onPanEnd={onHandleMinChangeEnd} />\n        </span>\n      ) : null}\n      <span\n        className={pending ? style.handle : style.animatedHandle}\n        style={{left: `${right * 100}%`}}\n      >\n        <Handle axis=\"x\" onPan={onHandleMaxChange} onPanEnd={onHandleMaxChangeEnd} />\n      </span>\n    </div>\n  );\n};\n\nRenderHandles.propTypes = {\n  left: PropTypes.number,\n  right: PropTypes.number,\n  multi: PropTypes.bool,\n  pending: PropTypes.bool,\n  onHandleMinChange: PropTypes.func,\n  onHandleMinChangeEnd: PropTypes.func,\n  onHandleMaxChange: PropTypes.func,\n  onHandleMaxChangeEnd: PropTypes.func\n};\n\nclass Range extends React.Component {\n  static propTypes = {\n    onChange: PropTypes.func,\n    onChangeEnd: PropTypes.func,\n    multi: PropTypes.bool,\n    // eslint-disable-next-line react/no-unused-prop-types\n    value: PropTypes.oneOfType([PropTypes.number, PropTypes.arrayOf(PropTypes.number)])\n  };\n\n  static getDerivedStateFromProps(props, state) {\n    const {pending} = state;\n\n    if (pending) return null;\n\n    return extractStateFromProps(props);\n  }\n\n  constructor(props, context) {\n    super(props, context);\n\n    this.state = {\n      ...extractStateFromProps(props),\n      pending: false\n    };\n\n    this.handleClick = this.handleClick.bind(this);\n    this.setRefTrack = this.setRefTrack.bind(this);\n    this.handleMinChange = this.handleMinChange.bind(this);\n    this.handleMaxChange = this.handleMaxChange.bind(this);\n    this.handleMinChangeEnd = this.handleMinChangeEnd.bind(this);\n    this.handleMaxChangeEnd = this.handleMaxChangeEnd.bind(this);\n  }\n\n  setRefTrack(track) {\n    this.track = track;\n  }\n\n  handleMinChange(e) {\n    e.srcEvent.stopPropagation();\n    e.srcEvent.preventDefault();\n    const newValue = valueOnTrack(this.track, e.center.x);\n    return this.handleChange(newValue, 0, true);\n  }\n\n  handleMaxChange(e) {\n    e.srcEvent.stopPropagation();\n    e.srcEvent.preventDefault();\n    const newValue = valueOnTrack(this.track, e.center.x);\n    return this.handleChange(newValue, 1, true);\n  }\n\n  handleMinChangeEnd(e) {\n    e.srcEvent.stopPropagation();\n    e.srcEvent.preventDefault();\n    const newValue = valueOnTrack(this.track, e.center.x);\n    return this.handleChange(newValue, 0, false);\n  }\n\n  handleMaxChangeEnd(e) {\n    e.srcEvent.stopPropagation();\n    e.srcEvent.preventDefault();\n    const newValue = valueOnTrack(this.track, e.center.x);\n    return this.handleChange(newValue, 1, false);\n  }\n\n  handleChange(value, valueIndex, pending) {\n    const {value: prevValue} = this.state;\n\n    const newValue = set(valueIndex, value, prevValue);\n\n    const [minValue, maxValue] = newValue;\n\n    const nextValue = minValue > maxValue ? prevValue : newValue;\n\n    this.triggerChange(nextValue, pending);\n    return this.setState({\n      pending,\n      value: pending ? nextValue : extractStateFromProps(this.props).value\n    });\n  }\n\n  triggerChange(newValues, pending) {\n    const {onChange = noop, onChangeEnd = onChange, multi = false} = this.props;\n\n    const handle = pending ? onChange : onChangeEnd;\n\n    return handle(multi ? newValues : newValues[1]);\n  }\n\n  handleClick(e) {\n    e.stopPropagation();\n    e.preventDefault();\n    const {\n      value: [left, right],\n      multi\n    } = this.state;\n    const x = e.clientX;\n    const newValue = valueOnTrack(this.track, x);\n\n    if (!multi) return this.handleChange(newValue, 1, false);\n\n    if (left === right) {\n      const isClickToTheLeft = left - newValue > 0;\n      return this.handleChange(newValue, isClickToTheLeft ? 0 : 1, false);\n    }\n\n    const closestHandle = Math.abs(newValue - left) < Math.abs(newValue - right) ? 0 : 1;\n    return this.handleChange(newValue, closestHandle, false);\n  }\n\n  render() {\n    const {\n      multi = false,\n      value: [left, right],\n      pending\n    } = this.state;\n    const railWidth = right - left;\n    const railLeft = left;\n    const railStyle = {\n      backgroundColor: '#9999A8',\n      width: `${railWidth * 100}%`,\n      left: `${railLeft * 100}%`\n    };\n\n    return (\n      <div className={style.containerWrapper} onClick={this.handleClick}>\n        <div className={style.container}>\n          <div className={style.track} data-name=\"sliderTrack\" ref={this.setRefTrack} />\n          <div className={pending ? style.rail : style.animatedRail} style={railStyle} />\n          <RenderHandles\n            left={left}\n            right={right}\n            pending={pending}\n            multi={multi}\n            onHandleMinChange={this.handleMinChange}\n            onHandleMinChangeEnd={this.handleMinChangeEnd}\n            onHandleMaxChange={this.handleMaxChange}\n            onHandleMaxChangeEnd={this.handleMaxChangeEnd}\n          />\n        </div>\n      </div>\n    );\n  }\n}\n\nexport default Range;\n"],"file":"index.js"}

package/es/atom/select/index.js

@@ -12,7 +12,7 @@ import keys from 'lodash/fp/keys';
 import map from 'lodash/fp/map';
 import size from 'lodash/fp/size';
 import { NovaCompositionNavigationArrowDown as ArrowDown } from '@coorpacademy/nova-icons';
-import Provider, { useWebContext } from '../provider';
+import Provider, { GetSkinFromContext } from '../provider';
 import getClassState from '../../util/get-class-state';
 import style from './style.css';
 const themeStyle = {
@@ -44,9 +44,7 @@ const Select = (props, legacyContext) => {
     error = false,
     title: propTitle
   } = props;
-  const context = useWebContext();
-  const skin = getOr(legacyContext.skin, 'skin', context);
-  console.log(skin);
+  const skin = GetSkinFromContext(legacyContext);
   const title = useMemo(() => propTitle ? `${propTitle}${required ? '*' : ''}` : null, [propTitle, required]);
   const optionList = options && options.map((option, index) => {
     return /*#__PURE__*/React.createElement("option", {