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

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

@@ -23,6 +23,8 @@ function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return
 
 function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
+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); }
+
 const createStyleSheet = theme => _reactNative.StyleSheet.create({
   boxShadow: {
     shadowColor: '#000',
@@ -105,12 +107,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 && (0, _getCleanUri.default)(media.src[0].url);
@@ -119,9 +115,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.default.createElement(_index3.default, {
@@ -141,7 +150,7 @@ const Choice = ({
     source: source,
     style: styleSheet.image
   })) : null, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
-    style: [styleSheet.textContainer, squeezed && styleSheet.squeezedTextContainer, isSelected && selectedStyle]
+    style: textWrapperStyle
   }, /*#__PURE__*/_react.default.createElement(_index.default, {
     fontSize: squeezed ? theme.fontSize.medium : theme.fontSize.regular,
     style: htmlStyle

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/atom/choice/index.native.tsx"],"names":["createStyleSheet","theme","StyleSheet","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":["createStyleSheet","theme","StyleSheet","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/lib/atom/provider/index.js

@@ -1,7 +1,11 @@
 "use strict";
 
 exports.__esModule = true;
-exports.default = void 0;
+exports.default = exports.GetSkinFromContext = void 0;
+
+var _getOr2 = _interopRequireDefault(require("lodash/fp/getOr"));
+
+var _get2 = _interopRequireDefault(require("lodash/fp/get"));
 
 var _defaultsDeep2 = _interopRequireDefault(require("lodash/fp/defaultsDeep"));
 
@@ -134,6 +138,15 @@ Provider.propTypes = process.env.NODE_ENV !== "production" ? {
     common: _propTypes.default.func
   })
 } : {};
+
+const GetSkinFromContext = legacyContext => {
+  const context = (0, _webContext.useWebContext)();
+  const legacySkin = (0, _get2.default)('skin', legacyContext);
+  const skin = (0, _getOr2.default)(legacySkin, 'skin', context);
+  return skin;
+};
+
+exports.GetSkinFromContext = GetSkinFromContext;
 var _default = Provider;
 exports.default = _default;
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/atom/provider/index.js"],"names":["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","PropTypes","shape","createHref","func","push","skinShape","objectOf","ColorPropType","images","SrcPropType","logo","login","icons","HexPropType","mod","courses","arrayOf","texts","translateShape","Provider","React","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":["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","PropTypes","shape","createHref","func","push","skinShape","objectOf","ColorPropType","images","SrcPropType","logo","login","icons","HexPropType","mod","courses","arrayOf","texts","translateShape","Provider","React","Component","getDerivedStateFromProps","props","history","translate","constructor","context","Vimeo","state","getChildContext","render","children","Children","only","isRequired","object","propTypes","node","GetSkinFromContext","legacyContext","legacySkin"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport {defaultsDeep, get, getOr} from 'lodash/fp';\nimport {SrcPropType, ColorPropType, HexPropType} from '../../util/proptypes';\nimport WebContext, {useWebContext} from './web-context';\n\nconst DEFAULT_SKIN = {\n  common: {\n    good: '#24b694',\n    bad: '#ed1c24',\n    primary: '#00B0FF',\n    life: '#ed1c24',\n    brand: '#00B0FF',\n    primaryAdd1: '#B3E5FC',\n    primaryAdd2: '#0091EA',\n    primaryAdd3: '#0277BD',\n    primaryAdd4: '#015798',\n    xtraLightGrey: '#FAFAFA',\n    light: '#ECEFF1',\n    medium: '#90A4AE',\n    dark: '#546E7A',\n    grey: '#607D8B',\n    orangeAdd: '#FF7043',\n    orange: '#FFA000',\n    positive: '#3EC483',\n    lightGreen: '#66BB6A',\n    negative: '#F73F52',\n    battle: '#FFE100',\n    white: '#FFFFFF',\n    black: '#14171A'\n  }\n};\n\nconst mergeSkin = (skin = {}) => defaultsDeep(DEFAULT_SKIN, skin);\n\nconst historyShape = PropTypes.shape({\n  createHref: PropTypes.func,\n  push: PropTypes.func\n});\n\nconst skinShape = PropTypes.shape({\n  common: PropTypes.objectOf(ColorPropType),\n  images: PropTypes.shape({\n    'logo-mobile': SrcPropType,\n    logo: SrcPropType,\n    'logo-email': SrcPropType,\n    login: SrcPropType\n  }),\n  icons: PropTypes.objectOf(HexPropType),\n  mod: PropTypes.objectOf(ColorPropType),\n  courses: PropTypes.arrayOf(ColorPropType),\n  texts: PropTypes.objectOf(ColorPropType)\n});\n\nconst translateShape = PropTypes.func;\n\nclass Provider extends React.Component {\n  static propTypes = {\n    history: historyShape,\n    skin: skinShape,\n    translate: translateShape,\n    children: PropTypes.node.isRequired,\n    Vimeo: PropTypes.shape({\n      common: PropTypes.func\n    })\n  };\n\n  static childContextTypes = {\n    history: historyShape,\n    skin: skinShape,\n    translate: translateShape.isRequired,\n    Vimeo: PropTypes.object\n  };\n\n  static getDerivedStateFromProps(props) {\n    const {history, skin, translate} = props;\n\n    return {\n      history,\n      skin: mergeSkin(skin),\n      translate\n    };\n  }\n\n  constructor(props, context) {\n    super(props, context);\n    const {history, skin, translate, Vimeo} = props;\n    // eslint-disable-next-line react/no-unused-state\n    this.state = {history, skin: mergeSkin(skin), translate, Vimeo};\n  }\n\n  getChildContext() {\n    return this.state;\n  }\n\n  render() {\n    const {children} = this.props;\n    return React.Children.only(children);\n  }\n}\n\nconst GetSkinFromContext = legacyContext => {\n  const context = useWebContext();\n  const legacySkin = get('skin', legacyContext);\n  const skin = getOr(legacySkin, 'skin', context);\n\n  return skin;\n};\n\nexport {WebContext, useWebContext, GetSkinFromContext};\nexport default Provider;\n"],"file":"index.js"}

package/lib/atom/range/handle.js

@@ -7,89 +7,93 @@ var _getOr2 = _interopRequireDefault(require("lodash/fp/getOr"));
 
 var _noop2 = _interopRequireDefault(require("lodash/fp/noop"));
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _provider = _interopRequireDefault(require("../provider"));
+var _provider = _interopRequireWildcard(require("../provider"));
 
 var _getShadowBoxColorFromPrimary = require("../../util/get-shadow-box-color-from-primary");
 
 var _handle = _interopRequireDefault(require("./handle.css"));
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
 
-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; }
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-const Hammer = // eslint-disable-next-line no-undef
-typeof window !== 'undefined' ? require('hammerjs') :
-/* istanbul ignore next */
-undefined;
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-class Handle extends _react.default.Component {
-  constructor(props, context) {
-    super(props, context);
-    this.setHandle = this.setHandle.bind(this);
-  }
+class NoopHammer {
+  constructor() {} // eslint-disable-next-line class-methods-use-this
 
-  componentDidMount() {
-    /* istanbul ignore else */
-    if (Hammer) {
-      const {
-        onPanStart = _noop2.default,
-        onPanEnd = _noop2.default,
-        onPan = _noop2.default
-      } = this.props;
-      this.hammer = new Hammer(this.handle);
-      this.hammer.on('panstart', onPanStart);
-      this.hammer.on('panend', onPanEnd);
-      this.hammer.on('panleft panright', onPan);
-    }
-  }
 
-  componentWillUnmount() {
-    if (this.hammer) {
-      this.hammer.stop();
-      this.hammer.destroy();
-    }
+  on() {
+    return;
+  } // eslint-disable-next-line class-methods-use-this
 
-    this.hammer = null;
-  }
 
-  setHandle(el) {
-    this.handle = el;
-  }
+  stop() {
+    return;
+  } // eslint-disable-next-line class-methods-use-this
+
 
-  render() {
-    const {
-      skin
-    } = this.context;
-    const primaryColor = (0, _getOr2.default)('#00B0FF', 'common.primary', skin);
-    const backgroundColor = primaryColor;
-    return /*#__PURE__*/_react.default.createElement("div", {
-      className: _handle.default.wrapper
-    }, /*#__PURE__*/_react.default.createElement("div", {
-      style: {
-        backgroundColor,
-        boxShadow: `0px 0px 20px ${(0, _getShadowBoxColorFromPrimary.getShadowBoxColorFromPrimary)(primaryColor)}`
-      },
-      className: _handle.default.default,
-      ref: this.setHandle,
-      "data-name": 'handle'
-    }));
+  destroy() {
+    return;
   }
 
 }
 
-_defineProperty(Handle, "contextTypes", {
-  skin: _provider.default.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 = (0, _provider.GetSkinFromContext)(legacyContext);
+  const primaryColor = (0, _getOr2.default)('#00B0FF', 'common.primary', skin);
+  const backgroundColor = primaryColor;
+  const {
+    onPanStart = _noop2.default,
+    onPanEnd = _noop2.default,
+    onPan = _noop2.default
+  } = props;
+  const handle = (0, _react.useRef)();
+  const [hammer, setHammer] = (0, _react.useState)();
+  (0, _react.useEffect)(() => {
+    setHammer(new Hammer(handle.current));
+  }, [handle]);
+  (0, _react.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.default.createElement("div", {
+    className: _handle.default.wrapper
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      backgroundColor,
+      boxShadow: `0px 0px 20px ${(0, _getShadowBoxColorFromPrimary.getShadowBoxColorFromPrimary)(primaryColor)}`
+    },
+    className: _handle.default.default,
+    ref: handle,
+    "data-name": 'handle'
+  }));
+};
 
 Handle.propTypes = process.env.NODE_ENV !== "production" ? {
   onPan: _propTypes.default.func,
   onPanStart: _propTypes.default.func,
   onPanEnd: _propTypes.default.func
 } : {};
+Handle.contextTypes = {
+  skin: _provider.default.childContextTypes.skin
+};
 var _default = Handle;
 exports.default = _default;
 //# sourceMappingURL=handle.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/atom/range/handle.js"],"names":["Hammer","window","require","undefined","Handle","React","Component","constructor","props","context","setHandle","bind","componentDidMount","onPanStart","onPanEnd","onPan","hammer","handle","on","componentWillUnmount","stop","destroy","el","render","skin","primaryColor","backgroundColor","style","wrapper","boxShadow","default","Provider","childContextTypes","propTypes","PropTypes","func"],"mappings":";;;;;;;;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;AAEA,MAAMA,MAAM,GACV;AACA,OAAOC,MAAP,KAAkB,WAAlB,GAAgCC,OAAO,CAAC,UAAD,CAAvC;AAAsD;AAA2BC,SAFnF;;AAIA,MAAMC,MAAN,SAAqBC,eAAMC,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,QAAIZ,MAAJ,EAAY;AACV,YAAM;AAACa,QAAAA,UAAU,iBAAX;AAAoBC,QAAAA,QAAQ,iBAA5B;AAAqCC,QAAAA,KAAK;AAA1C,UAAqD,KAAKP,KAAhE;AAEA,WAAKQ,MAAL,GAAc,IAAIhB,MAAJ,CAAW,KAAKiB,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,qBAAM,SAAN,EAAiB,gBAAjB,EAAmCD,IAAnC,CAArB;AACA,UAAME,eAAe,GAAGD,YAAxB;AAEA,wBACE;AAAK,MAAA,SAAS,EAAEE,gBAAMC;AAAtB,oBACE;AACE,MAAA,KAAK,EAAE;AACLF,QAAAA,eADK;AAELG,QAAAA,SAAS,EAAG,gBAAe,gEAA6BJ,YAA7B,CAA2C;AAFjE,OADT;AAKE,MAAA,SAAS,EAAEE,gBAAMG,OALnB;AAME,MAAA,GAAG,EAAE,KAAKpB,SANZ;AAOE,mBAAW;AAPb,MADF,CADF;AAaD;;AA5DkC;;gBAA/BN,M,kBAOkB;AACpBoB,EAAAA,IAAI,EAAEO,kBAASC,iBAAT,CAA2BR;AADb,C;;AAPlBpB,M,CACG6B,S,2CAAY;AACjBlB,EAAAA,KAAK,EAAEmB,mBAAUC,IADA;AAEjBtB,EAAAA,UAAU,EAAEqB,mBAAUC,IAFL;AAGjBrB,EAAAA,QAAQ,EAAEoB,mBAAUC;AAHH,C;eA8DN/B,M","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":["NoopHammer","constructor","on","stop","destroy","Hammer","window","require","Handle","props","legacyContext","skin","primaryColor","backgroundColor","onPanStart","onPanEnd","onPan","handle","hammer","setHammer","current","style","wrapper","boxShadow","default","propTypes","PropTypes","func","contextTypes","Provider","childContextTypes"],"mappings":";;;;;;;;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;;;AAEA,MAAMA,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,GAAG,kCAAmBD,aAAnB,CAAb;AACA,QAAME,YAAY,GAAG,qBAAM,SAAN,EAAiB,gBAAjB,EAAmCD,IAAnC,CAArB;AACA,QAAME,eAAe,GAAGD,YAAxB;AACA,QAAM;AAACE,IAAAA,UAAU,iBAAX;AAAoBC,IAAAA,QAAQ,iBAA5B;AAAqCC,IAAAA,KAAK;AAA1C,MAAqDP,KAA3D;AAEA,QAAMQ,MAAM,GAAG,oBAAf;AACA,QAAM,CAACC,MAAD,EAASC,SAAT,IAAsB,sBAA5B;AAEA,wBAAU,MAAM;AACdA,IAAAA,SAAS,CAAC,IAAId,MAAJ,CAAWY,MAAM,CAACG,OAAlB,CAAD,CAAT;AACD,GAFD,EAEG,CAACH,MAAD,CAFH;AAIA,wBAAU,MAAM;AACd,QAAI,CAACC,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,GAZD,EAYG,CAACD,MAAD,EAASJ,UAAT,EAAqBC,QAArB,EAA+BC,KAA/B,CAZH;AAcA,sBACE;AAAK,IAAA,SAAS,EAAEK,gBAAMC;AAAtB,kBACE;AACE,IAAA,KAAK,EAAE;AACLT,MAAAA,eADK;AAELU,MAAAA,SAAS,EAAG,gBAAe,gEAA6BX,YAA7B,CAA2C;AAFjE,KADT;AAKE,IAAA,SAAS,EAAES,gBAAMG,OALnB;AAME,IAAA,GAAG,EAAEP,MANP;AAOE,iBAAW;AAPb,IADF,CADF;AAaD,CAxCD;;AA0CAT,MAAM,CAACiB,SAAP,2CAAmB;AACjBT,EAAAA,KAAK,EAAEU,mBAAUC,IADA;AAEjBb,EAAAA,UAAU,EAAEY,mBAAUC,IAFL;AAGjBZ,EAAAA,QAAQ,EAAEW,mBAAUC;AAHH,CAAnB;AAMAnB,MAAM,CAACoB,YAAP,GAAsB;AACpBjB,EAAAA,IAAI,EAAEkB,kBAASC,iBAAT,CAA2BnB;AADb,CAAtB;eAIeH,M","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/lib/atom/range/index.js

@@ -9,14 +9,10 @@ var _set2 = _interopRequireDefault(require("lodash/fp/set"));
 
 var _noop2 = _interopRequireDefault(require("lodash/fp/noop"));
 
-var _getOr2 = _interopRequireDefault(require("lodash/fp/getOr"));
-
 var _react = _interopRequireDefault(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _provider = _interopRequireDefault(require("../provider"));
-
 var _handle = _interopRequireDefault(require("./handle"));
 
 var _style = _interopRequireDefault(require("./style.css"));
@@ -25,8 +21,6 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 
 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; }
-
 const valueOnTrack = (track, x) => {
   const {
     left,
@@ -46,6 +40,49 @@ const extractStateFromProps = props => {
   };
 };
 
+const RenderHandles = props => {
+  const {
+    left,
+    right,
+    multi = false,
+    pending,
+    onHandleMinChange,
+    onHandleMinChangeEnd,
+    onHandleMaxChange,
+    onHandleMaxChangeEnd
+  } = props;
+  return /*#__PURE__*/_react.default.createElement("div", null, multi ? /*#__PURE__*/_react.default.createElement("span", {
+    className: pending ? _style.default.handle : _style.default.animatedHandle,
+    style: {
+      left: `${left * 100}%`
+    }
+  }, /*#__PURE__*/_react.default.createElement(_handle.default, {
+    axis: "x",
+    onPan: onHandleMinChange,
+    onPanEnd: onHandleMinChangeEnd
+  })) : null, /*#__PURE__*/_react.default.createElement("span", {
+    className: pending ? _style.default.handle : _style.default.animatedHandle,
+    style: {
+      left: `${right * 100}%`
+    }
+  }, /*#__PURE__*/_react.default.createElement(_handle.default, {
+    axis: "x",
+    onPan: onHandleMaxChange,
+    onPanEnd: onHandleMaxChangeEnd
+  })));
+};
+
+RenderHandles.propTypes = process.env.NODE_ENV !== "production" ? {
+  left: _propTypes.default.number,
+  right: _propTypes.default.number,
+  multi: _propTypes.default.bool,
+  pending: _propTypes.default.bool,
+  onHandleMinChange: _propTypes.default.func,
+  onHandleMinChangeEnd: _propTypes.default.func,
+  onHandleMaxChange: _propTypes.default.func,
+  onHandleMaxChangeEnd: _propTypes.default.func
+} : {};
+
 class Range extends _react.default.Component {
   static getDerivedStateFromProps(props, state) {
     const {
@@ -144,46 +181,16 @@ class Range extends _react.default.Component {
     return this.handleChange(newValue, closestHandle, false);
   }
 
-  renderHandles() {
-    const {
-      value: [left, right],
-      multi,
-      pending
-    } = this.state;
-    return /*#__PURE__*/_react.default.createElement("div", null, multi ? /*#__PURE__*/_react.default.createElement("span", {
-      className: pending ? _style.default.handle : _style.default.animatedHandle,
-      style: {
-        left: `${left * 100}%`
-      }
-    }, /*#__PURE__*/_react.default.createElement(_handle.default, {
-      axis: "x",
-      onPan: this.handleMinChange,
-      onPanEnd: this.handleMinChangeEnd
-    })) : null, /*#__PURE__*/_react.default.createElement("span", {
-      className: pending ? _style.default.handle : _style.default.animatedHandle,
-      style: {
-        left: `${right * 100}%`
-      }
-    }, /*#__PURE__*/_react.default.createElement(_handle.default, {
-      axis: "x",
-      onPan: this.handleMaxChange,
-      onPanEnd: this.handleMaxChangeEnd
-    })));
-  }
-
   render() {
     const {
-      skin
-    } = this.context;
-    const defaultColor = (0, _getOr2.default)('#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}%`
     };
@@ -199,15 +206,20 @@ class Range extends _react.default.Component {
     }), /*#__PURE__*/_react.default.createElement("div", {
       className: pending ? _style.default.rail : _style.default.animatedRail,
       style: railStyle
-    }), this.renderHandles()));
+    }), /*#__PURE__*/_react.default.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.default.childContextTypes.skin
-});
-
 Range.propTypes = process.env.NODE_ENV !== "production" ? {
   onChange: _propTypes.default.func,
   onChangeEnd: _propTypes.default.func,

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/atom/range/index.js"],"names":["valueOnTrack","track","x","left","right","getBoundingClientRect","extractStateFromProps","props","multi","value","Range","React","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","style","animatedHandle","render","skin","defaultColor","railWidth","railLeft","railStyle","backgroundColor","width","containerWrapper","container","rail","animatedRail","Provider","childContextTypes","propTypes","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":["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"],"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/lib/atom/select/index.js

@@ -70,9 +70,7 @@ const Select = (props, legacyContext) => {
     error = false,
     title: propTitle
   } = props;
-  const context = (0, _provider.useWebContext)();
-  const skin = (0, _getOr.default)(legacyContext.skin, 'skin', context);
-  console.log(skin);
+  const skin = (0, _provider.GetSkinFromContext)(legacyContext);
   const title = (0, _react.useMemo)(() => propTitle ? `${propTitle}${required ? '*' : ''}` : null, [propTitle, required]);
   const optionList = options && options.map((option, index) => {
     return /*#__PURE__*/_react.default.createElement("option", {