@chaoswise/ui 2.5.4 → 2.5.6

package/lib/ColorPicker/SketchPicker/components/sketch/SketchFields.js

@@ -0,0 +1,148 @@
+/* eslint-disable no-param-reassign */
+
+import React from 'react';
+import reactCSS from 'reactcss';
+import * as color from '../../helpers/color';
+import { EditableInput } from '../common';
+export var SketchFields = function SketchFields(_ref) {
+  var onChange = _ref.onChange,
+    rgb = _ref.rgb,
+    hsl = _ref.hsl,
+    hex = _ref.hex,
+    disableAlpha = _ref.disableAlpha;
+  var styles = reactCSS({
+    'default': {
+      fields: {
+        display: 'flex',
+        paddingTop: '4px'
+      },
+      single: {
+        flex: '1',
+        paddingLeft: '6px'
+      },
+      alpha: {
+        flex: '1',
+        paddingLeft: '6px'
+      },
+      "double": {
+        flex: '2'
+      },
+      input: {
+        width: '80%',
+        padding: '4px 10% 3px',
+        border: 'none',
+        boxShadow: 'inset 0 0 0 1px #ccc',
+        fontSize: '11px'
+      },
+      label: {
+        display: 'block',
+        textAlign: 'center',
+        fontSize: '11px',
+        color: '#222',
+        paddingTop: '3px',
+        paddingBottom: '4px',
+        textTransform: 'capitalize'
+      }
+    },
+    'disableAlpha': {
+      alpha: {
+        display: 'none'
+      }
+    }
+  }, {
+    disableAlpha: disableAlpha
+  });
+  var handleChange = function handleChange(data, e) {
+    if (data.hex) {
+      color.isValidHex(data.hex) && onChange({
+        hex: data.hex,
+        source: 'hex'
+      }, e);
+    } else if (data.r || data.g || data.b) {
+      onChange({
+        r: data.r || rgb.r,
+        g: data.g || rgb.g,
+        b: data.b || rgb.b,
+        a: rgb.a,
+        source: 'rgb'
+      }, e);
+    } else if (data.a) {
+      if (data.a < 0) {
+        data.a = 0;
+      } else if (data.a > 100) {
+        data.a = 100;
+      }
+      data.a /= 100;
+      onChange({
+        h: hsl.h,
+        s: hsl.s,
+        l: hsl.l,
+        a: data.a,
+        source: 'rgb'
+      }, e);
+    }
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    style: styles.fields,
+    className: "flexbox-fix"
+  }, /*#__PURE__*/React.createElement("div", {
+    style: styles["double"]
+  }, /*#__PURE__*/React.createElement(EditableInput, {
+    style: {
+      input: styles.input,
+      label: styles.label
+    },
+    label: "hex",
+    value: hex.replace('#', ''),
+    onChange: handleChange
+  })), /*#__PURE__*/React.createElement("div", {
+    style: styles.single
+  }, /*#__PURE__*/React.createElement(EditableInput, {
+    style: {
+      input: styles.input,
+      label: styles.label
+    },
+    label: "r",
+    value: rgb.r,
+    onChange: handleChange,
+    dragLabel: "true",
+    dragMax: "255"
+  })), /*#__PURE__*/React.createElement("div", {
+    style: styles.single
+  }, /*#__PURE__*/React.createElement(EditableInput, {
+    style: {
+      input: styles.input,
+      label: styles.label
+    },
+    label: "g",
+    value: rgb.g,
+    onChange: handleChange,
+    dragLabel: "true",
+    dragMax: "255"
+  })), /*#__PURE__*/React.createElement("div", {
+    style: styles.single
+  }, /*#__PURE__*/React.createElement(EditableInput, {
+    style: {
+      input: styles.input,
+      label: styles.label
+    },
+    label: "b",
+    value: rgb.b,
+    onChange: handleChange,
+    dragLabel: "true",
+    dragMax: "255"
+  })), /*#__PURE__*/React.createElement("div", {
+    style: styles.alpha
+  }, /*#__PURE__*/React.createElement(EditableInput, {
+    style: {
+      input: styles.input,
+      label: styles.label
+    },
+    label: "a",
+    value: Math.round(rgb.a * 100),
+    onChange: handleChange,
+    dragLabel: "true",
+    dragMax: "100"
+  })));
+};
+export default SketchFields;

package/lib/ColorPicker/SketchPicker/components/sketch/SketchPresetColors.js

@@ -0,0 +1,72 @@
+function _extends() { _extends = Object.assign ? Object.assign.bind() : 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 from 'react';
+import PropTypes from 'prop-types';
+import reactCSS from 'reactcss';
+import { Swatch } from '../common';
+export var SketchPresetColors = function SketchPresetColors(_ref) {
+  var colors = _ref.colors,
+    _ref$onClick = _ref.onClick,
+    onClick = _ref$onClick === void 0 ? function () {} : _ref$onClick,
+    onSwatchHover = _ref.onSwatchHover;
+  var styles = reactCSS({
+    'default': {
+      colors: {
+        margin: '0 -10px',
+        padding: '10px 0 0 10px',
+        borderTop: '1px solid #eee',
+        display: 'flex',
+        flexWrap: 'wrap',
+        position: 'relative'
+      },
+      swatchWrap: {
+        width: '16px',
+        height: '16px',
+        margin: '0 10px 10px 0'
+      },
+      swatch: {
+        borderRadius: '3px',
+        boxShadow: 'inset 0 0 0 1px rgba(0,0,0,.15)'
+      }
+    },
+    'no-presets': {
+      colors: {
+        display: 'none'
+      }
+    }
+  }, {
+    'no-presets': !colors || !colors.length
+  });
+  var handleClick = function handleClick(hex, e) {
+    onClick({
+      hex: hex,
+      source: 'hex'
+    }, e);
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    style: styles.colors,
+    className: "flexbox-fix"
+  }, colors.map(function (colorObjOrString) {
+    var c = typeof colorObjOrString === 'string' ? {
+      color: colorObjOrString
+    } : colorObjOrString;
+    var key = "".concat(c.color).concat(c.title || '');
+    return /*#__PURE__*/React.createElement("div", {
+      key: key,
+      style: styles.swatchWrap
+    }, /*#__PURE__*/React.createElement(Swatch, _extends({}, c, {
+      style: styles.swatch,
+      onClick: handleClick,
+      onHover: onSwatchHover,
+      focusStyle: {
+        boxShadow: "inset 0 0 0 1px rgba(0,0,0,.15), 0 0 4px ".concat(c.color)
+      }
+    })));
+  }));
+};
+SketchPresetColors.propTypes = {
+  colors: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.shape({
+    color: PropTypes.string,
+    title: PropTypes.string
+  })])).isRequired
+};
+export default SketchPresetColors;

package/lib/ColorPicker/SketchPicker/components/sketch/index.js

@@ -0,0 +1,160 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+import React from 'react';
+import PropTypes from 'prop-types';
+import reactCSS from 'reactcss';
+import merge from 'lodash/merge';
+import { ColorWrap, Saturation, Hue, Alpha, Checkboard } from '../common';
+import SketchFields from './SketchFields';
+import SketchPresetColors from './SketchPresetColors';
+export var Sketch = function Sketch(_ref) {
+  var width = _ref.width,
+    rgb = _ref.rgb,
+    hex = _ref.hex,
+    hsv = _ref.hsv,
+    hsl = _ref.hsl,
+    onChange = _ref.onChange,
+    onSwatchHover = _ref.onSwatchHover,
+    disableAlpha = _ref.disableAlpha,
+    presetColors = _ref.presetColors,
+    renderers = _ref.renderers,
+    _ref$styles = _ref.styles,
+    passedStyles = _ref$styles === void 0 ? {} : _ref$styles,
+    _ref$className = _ref.className,
+    className = _ref$className === void 0 ? '' : _ref$className;
+  var styles = reactCSS(merge({
+    'default': _objectSpread({
+      picker: {
+        width: width,
+        padding: '10px 10px 0',
+        boxSizing: 'initial',
+        background: '#fff',
+        borderRadius: '4px',
+        boxShadow: '0 0 0 1px rgba(0,0,0,.15), 0 8px 16px rgba(0,0,0,.15)'
+      },
+      saturation: {
+        width: '100%',
+        paddingBottom: '75%',
+        position: 'relative',
+        overflow: 'hidden'
+      },
+      Saturation: {
+        radius: '3px',
+        shadow: 'inset 0 0 0 1px rgba(0,0,0,.15), inset 0 0 4px rgba(0,0,0,.25)'
+      },
+      controls: {
+        display: 'flex'
+      },
+      sliders: {
+        padding: '4px 0',
+        flex: '1'
+      },
+      color: {
+        width: '24px',
+        height: '24px',
+        position: 'relative',
+        marginTop: '4px',
+        marginLeft: '4px',
+        borderRadius: '3px'
+      },
+      activeColor: {
+        absolute: '0px 0px 0px 0px',
+        borderRadius: '2px',
+        background: "rgba(".concat(rgb.r, ",").concat(rgb.g, ",").concat(rgb.b, ",").concat(rgb.a, ")"),
+        boxShadow: 'inset 0 0 0 1px rgba(0,0,0,.15), inset 0 0 4px rgba(0,0,0,.25)'
+      },
+      hue: {
+        position: 'relative',
+        height: '10px',
+        overflow: 'hidden'
+      },
+      Hue: {
+        radius: '2px',
+        shadow: 'inset 0 0 0 1px rgba(0,0,0,.15), inset 0 0 4px rgba(0,0,0,.25)'
+      },
+      alpha: {
+        position: 'relative',
+        height: '10px',
+        marginTop: '4px',
+        overflow: 'hidden'
+      },
+      Alpha: {
+        radius: '2px',
+        shadow: 'inset 0 0 0 1px rgba(0,0,0,.15), inset 0 0 4px rgba(0,0,0,.25)'
+      }
+    }, passedStyles),
+    'disableAlpha': {
+      color: {
+        height: '10px'
+      },
+      hue: {
+        height: '10px'
+      },
+      alpha: {
+        display: 'none'
+      }
+    }
+  }, passedStyles), {
+    disableAlpha: disableAlpha
+  });
+  return /*#__PURE__*/React.createElement("div", {
+    style: styles.picker,
+    className: "sketch-picker ".concat(className)
+  }, /*#__PURE__*/React.createElement("div", {
+    style: styles.saturation
+  }, /*#__PURE__*/React.createElement(Saturation, {
+    style: styles.Saturation,
+    hsl: hsl,
+    hsv: hsv,
+    onChange: onChange
+  })), /*#__PURE__*/React.createElement("div", {
+    style: styles.controls,
+    className: "flexbox-fix"
+  }, /*#__PURE__*/React.createElement("div", {
+    style: styles.sliders
+  }, /*#__PURE__*/React.createElement("div", {
+    style: styles.hue
+  }, /*#__PURE__*/React.createElement(Hue, {
+    style: styles.Hue,
+    hsl: hsl,
+    onChange: onChange
+  })), /*#__PURE__*/React.createElement("div", {
+    style: styles.alpha
+  }, /*#__PURE__*/React.createElement(Alpha, {
+    style: styles.Alpha,
+    rgb: rgb,
+    hsl: hsl,
+    renderers: renderers,
+    onChange: onChange
+  }))), /*#__PURE__*/React.createElement("div", {
+    style: styles.color
+  }, /*#__PURE__*/React.createElement(Checkboard, null), /*#__PURE__*/React.createElement("div", {
+    style: styles.activeColor
+  }))), /*#__PURE__*/React.createElement(SketchFields, {
+    rgb: rgb,
+    hsl: hsl,
+    hex: hex,
+    onChange: onChange,
+    disableAlpha: disableAlpha
+  }), /*#__PURE__*/React.createElement(SketchPresetColors, {
+    colors: presetColors,
+    onClick: onChange,
+    onSwatchHover: onSwatchHover
+  }));
+};
+Sketch.propTypes = {
+  disableAlpha: PropTypes.bool,
+  width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  styles: PropTypes.object
+};
+Sketch.defaultProps = {
+  disableAlpha: false,
+  width: 200,
+  styles: {},
+  presetColors: ['#D0021B', '#F5A623', '#F8E71C', '#8B572A', '#7ED321', '#417505', '#BD10E0', '#9013FE', '#4A90E2', '#50E3C2', '#B8E986', '#000000', '#4A4A4A', '#9B9B9B', '#FFFFFF']
+};
+export default ColorWrap(Sketch);

package/lib/ColorPicker/SketchPicker/helpers/alpha.js

@@ -0,0 +1,46 @@
+export var calculateChange = function calculateChange(e, hsl, direction, initialA, container) {
+  var containerWidth = container.clientWidth;
+  var containerHeight = container.clientHeight;
+  var x = typeof e.pageX === 'number' ? e.pageX : e.touches[0].pageX;
+  var y = typeof e.pageY === 'number' ? e.pageY : e.touches[0].pageY;
+  var left = x - (container.getBoundingClientRect().left + window.pageXOffset);
+  var top = y - (container.getBoundingClientRect().top + window.pageYOffset);
+  if (direction === 'vertical') {
+    var a;
+    if (top < 0) {
+      a = 0;
+    } else if (top > containerHeight) {
+      a = 1;
+    } else {
+      a = Math.round(top * 100 / containerHeight) / 100;
+    }
+    if (hsl.a !== a) {
+      return {
+        h: hsl.h,
+        s: hsl.s,
+        l: hsl.l,
+        a: a,
+        source: 'rgb'
+      };
+    }
+  } else {
+    var _a;
+    if (left < 0) {
+      _a = 0;
+    } else if (left > containerWidth) {
+      _a = 1;
+    } else {
+      _a = Math.round(left * 100 / containerWidth) / 100;
+    }
+    if (initialA !== _a) {
+      return {
+        h: hsl.h,
+        s: hsl.s,
+        l: hsl.l,
+        a: _a,
+        source: 'rgb'
+      };
+    }
+  }
+  return null;
+};

package/lib/ColorPicker/SketchPicker/helpers/checkboard.js

@@ -0,0 +1,29 @@
+var checkboardCache = {};
+export var render = function render(c1, c2, size, serverCanvas) {
+  if (typeof document === 'undefined' && !serverCanvas) {
+    return null;
+  }
+  var canvas = serverCanvas ? new serverCanvas() : document.createElement('canvas');
+  canvas.width = size * 2;
+  canvas.height = size * 2;
+  var ctx = canvas.getContext('2d');
+  if (!ctx) {
+    return null;
+  } // If no context can be found, return early.
+  ctx.fillStyle = c1;
+  ctx.fillRect(0, 0, canvas.width, canvas.height);
+  ctx.fillStyle = c2;
+  ctx.fillRect(0, 0, size, size);
+  ctx.translate(size, size);
+  ctx.fillRect(0, 0, size, size);
+  return canvas.toDataURL();
+};
+export var get = function get(c1, c2, size, serverCanvas) {
+  var key = "".concat(c1, "-").concat(c2, "-").concat(size).concat(serverCanvas ? '-server' : '');
+  if (checkboardCache[key]) {
+    return checkboardCache[key];
+  }
+  var checkboard = render(c1, c2, size, serverCanvas);
+  checkboardCache[key] = checkboard;
+  return checkboard;
+};

package/lib/ColorPicker/SketchPicker/helpers/color.js

@@ -0,0 +1,86 @@
+import each from 'lodash/each';
+import tinycolor from 'tinycolor2';
+export var simpleCheckForValidColor = function simpleCheckForValidColor(data) {
+  var keysToCheck = ['r', 'g', 'b', 'a', 'h', 's', 'l', 'v'];
+  var checked = 0;
+  var passed = 0;
+  each(keysToCheck, function (letter) {
+    if (data[letter]) {
+      checked += 1;
+      if (!isNaN(data[letter])) {
+        passed += 1;
+      }
+      if (letter === 's' || letter === 'l') {
+        var percentPatt = /^\d+%$/;
+        if (percentPatt.test(data[letter])) {
+          passed += 1;
+        }
+      }
+    }
+  });
+  return checked === passed ? data : false;
+};
+export var toState = function toState(data, oldHue) {
+  var color = data.hex ? tinycolor(data.hex) : tinycolor(data);
+  var hsl = color.toHsl();
+  var hsv = color.toHsv();
+  var rgb = color.toRgb();
+  var hex = color.toHex();
+  if (hsl.s === 0) {
+    hsl.h = oldHue || 0;
+    hsv.h = oldHue || 0;
+  }
+  var transparent = hex === '000000' && rgb.a === 0;
+  return {
+    hsl: hsl,
+    hex: transparent ? 'transparent' : "#".concat(hex),
+    rgb: rgb,
+    hsv: hsv,
+    oldHue: data.h || oldHue || hsl.h,
+    source: data.source
+  };
+};
+export var isValidHex = function isValidHex(hex) {
+  if (hex === 'transparent') {
+    return true;
+  }
+  // disable hex4 and hex8
+  var lh = String(hex).charAt(0) === '#' ? 1 : 0;
+  return hex.length !== 4 + lh && hex.length < 7 + lh && tinycolor(hex).isValid();
+};
+export var getContrastingColor = function getContrastingColor(data) {
+  if (!data) {
+    return '#fff';
+  }
+  var col = toState(data);
+  if (col.hex === 'transparent') {
+    return 'rgba(0,0,0,0.4)';
+  }
+  var yiq = (col.rgb.r * 299 + col.rgb.g * 587 + col.rgb.b * 114) / 1000;
+  return yiq >= 128 ? '#000' : '#fff';
+};
+export var red = {
+  hsl: {
+    a: 1,
+    h: 0,
+    l: 0.5,
+    s: 1
+  },
+  hex: '#ff0000',
+  rgb: {
+    r: 255,
+    g: 0,
+    b: 0,
+    a: 1
+  },
+  hsv: {
+    h: 0,
+    s: 1,
+    v: 1,
+    a: 1
+  }
+};
+export var isvalidColorString = function isvalidColorString(string, type) {
+  var stringWithoutDegree = string.replace('°', '');
+  return tinycolor("".concat(type, " (").concat(stringWithoutDegree, ")"))._ok;
+};

package/lib/ColorPicker/SketchPicker/helpers/hue.js

@@ -0,0 +1,48 @@
+export var calculateChange = function calculateChange(e, direction, hsl, container) {
+  var containerWidth = container.clientWidth;
+  var containerHeight = container.clientHeight;
+  var x = typeof e.pageX === 'number' ? e.pageX : e.touches[0].pageX;
+  var y = typeof e.pageY === 'number' ? e.pageY : e.touches[0].pageY;
+  var left = x - (container.getBoundingClientRect().left + window.pageXOffset);
+  var top = y - (container.getBoundingClientRect().top + window.pageYOffset);
+  if (direction === 'vertical') {
+    var h;
+    if (top < 0) {
+      h = 359;
+    } else if (top > containerHeight) {
+      h = 0;
+    } else {
+      var percent = -(top * 100 / containerHeight) + 100;
+      h = 360 * percent / 100;
+    }
+    if (hsl.h !== h) {
+      return {
+        h: h,
+        s: hsl.s,
+        l: hsl.l,
+        a: hsl.a,
+        source: 'hsl'
+      };
+    }
+  } else {
+    var _h;
+    if (left < 0) {
+      _h = 0;
+    } else if (left > containerWidth) {
+      _h = 359;
+    } else {
+      var _percent = left * 100 / containerWidth;
+      _h = 360 * _percent / 100;
+    }
+    if (hsl.h !== _h) {
+      return {
+        h: _h,
+        s: hsl.s,
+        l: hsl.l,
+        a: hsl.a,
+        source: 'hsl'
+      };
+    }
+  }
+  return null;
+};

package/lib/ColorPicker/SketchPicker/helpers/index.js

@@ -0,0 +1,2 @@
+export * from './checkboard';
+export * from './color';

package/lib/ColorPicker/SketchPicker/helpers/interaction.js

@@ -0,0 +1,55 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : 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 _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor); } }
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
+function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
+function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
+function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
+function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
+function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+/* eslint-disable no-invalid-this */
+import React from 'react';
+export var handleFocus = function handleFocus(Component) {
+  var Span = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'span';
+  return /*#__PURE__*/function (_React$Component) {
+    _inherits(Focus, _React$Component);
+    function Focus() {
+      var _this;
+      _classCallCheck(this, Focus);
+      for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+        args[_key] = arguments[_key];
+      }
+      _this = _callSuper(this, Focus, [].concat(args));
+      _defineProperty(_assertThisInitialized(_this), "state", {
+        focus: false
+      });
+      _defineProperty(_assertThisInitialized(_this), "handleFocus", function () {
+        return _this.setState({
+          focus: true
+        });
+      });
+      _defineProperty(_assertThisInitialized(_this), "handleBlur", function () {
+        return _this.setState({
+          focus: false
+        });
+      });
+      return _this;
+    }
+    _createClass(Focus, [{
+      key: "render",
+      value: function render() {
+        return /*#__PURE__*/React.createElement(Span, {
+          onFocus: this.handleFocus,
+          onBlur: this.handleBlur
+        }, /*#__PURE__*/React.createElement(Component, _extends({}, this.props, this.state)));
+      }
+    }]);
+    return Focus;
+  }(React.Component);
+};

package/lib/ColorPicker/SketchPicker/helpers/saturation.js

@@ -0,0 +1,28 @@
+export var calculateChange = function calculateChange(e, hsl, container) {
+  var _container$getBoundin = container.getBoundingClientRect(),
+    containerWidth = _container$getBoundin.width,
+    containerHeight = _container$getBoundin.height;
+  var x = typeof e.pageX === 'number' ? e.pageX : e.touches[0].pageX;
+  var y = typeof e.pageY === 'number' ? e.pageY : e.touches[0].pageY;
+  var left = x - (container.getBoundingClientRect().left + window.pageXOffset);
+  var top = y - (container.getBoundingClientRect().top + window.pageYOffset);
+  if (left < 0) {
+    left = 0;
+  } else if (left > containerWidth) {
+    left = containerWidth;
+  }
+  if (top < 0) {
+    top = 0;
+  } else if (top > containerHeight) {
+    top = containerHeight;
+  }
+  var saturation = left / containerWidth;
+  var bright = 1 - top / containerHeight;
+  return {
+    h: hsl.h,
+    s: saturation,
+    v: bright,
+    a: hsl.a,
+    source: 'hsv'
+  };
+};