@zendeskgarden/react-colorpickers 9.0.0-next.7 → 9.0.0-next.9

package/dist/esm/elements/ColorPicker/ColorWell.js

@@ -0,0 +1,110 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
+import React__default, { useContext, useRef, useState, useEffect, useMemo, useCallback } from 'react';
+import throttle from 'lodash.throttle';
+import { ThemeContext } from 'styled-components';
+import { hslToHsv } from '../../utils/conversion.js';
+import { getThumbPosition, getNextHsv } from '../../utils/saturation.js';
+import '../../styled/ColorPicker/StyledColorPicker.js';
+import '../../styled/ColorPicker/StyledHueRange.js';
+import '../../styled/ColorPicker/StyledAlphaRange.js';
+import '../../styled/ColorPicker/StyledPreview.js';
+import { StyledColorWell } from '../../styled/ColorPicker/StyledColorWell.js';
+import { StyledColorWellThumb } from '../../styled/ColorPicker/StyledColorWellThumb.js';
+import '../../styled/ColorPicker/StyledSliderGroup.js';
+import '../../styled/ColorPicker/StyledHexField.js';
+import '../../styled/ColorPicker/StyledLabel.js';
+import '../../styled/ColorPicker/StyledInput.js';
+import '../../styled/ColorPicker/StyledInputGroup.js';
+import '../../styled/ColorPicker/StyledRGBAField.js';
+import '../../styled/ColorPicker/StyledSliders.js';
+import '../../styled/ColorPickerDialog/StyledButton.js';
+import '../../styled/ColorPickerDialog/StyledButtonPreview.js';
+import '../../styled/ColorPickerDialog/StyledTooltipModal.js';
+import '../../styled/ColorPickerDialog/StyledTooltipBody.js';
+import '../../styled/ColorSwatch/StyledColorSwatch.js';
+import '../../styled/ColorSwatch/StyledColorSwatchInput.js';
+import '../../styled/ColorSwatch/StyledColorSwatchLabel.js';
+import '../../styled/ColorSwatch/StyledIcon.js';
+import '../../styled/ColorSwatch/StyledCell.js';
+
+const ColorWell = React__default.memo(_ref => {
+  let {
+    hue,
+    saturation,
+    lightness,
+    onChange
+  } = _ref;
+  const {
+    rtl
+  } = useContext(ThemeContext);
+  const containerRef = useRef(null);
+  const hsv = hslToHsv(hue, saturation, lightness);
+  const mouseActiveRef = useRef(false);
+  const [x, setX] = useState(0);
+  const [y, setY] = useState(0);
+  const {
+    topFromMouse,
+    leftFromMouse
+  } = getThumbPosition(x, y, rtl, containerRef);
+  const [topPosition, setTopPosition] = useState(0);
+  const [leftPosition, setLeftPosition] = useState(0);
+  useEffect(() => {
+    setTopPosition(100 - hsv.v);
+    setLeftPosition(rtl ? 100 - hsv.s : hsv.s);
+  }, [hsv.s, hsv.v, rtl]);
+  const throttledChange = useMemo(() => {
+    return throttle(e => {
+      if (containerRef.current) {
+        const nextHsv = getNextHsv(e, hue, containerRef.current, rtl);
+        onChange && onChange(nextHsv, e);
+      }
+    }, 50);
+  }, [hue, rtl, onChange]);
+  const handleMouseMove = useCallback(e => {
+    mouseActiveRef.current = true;
+    setX(e.pageX);
+    setY(e.pageY);
+    throttledChange(e);
+  }, [throttledChange]);
+  const handleMouseUp = useCallback(() => {
+    mouseActiveRef.current = true;
+    setTimeout(() => {
+      mouseActiveRef.current = false;
+    });
+    throttledChange.cancel();
+    window.removeEventListener('mousemove', handleMouseMove);
+    window.removeEventListener('mouseup', handleMouseUp);
+  }, [throttledChange, handleMouseMove]);
+  const handleMouseDown = useCallback(e => {
+    mouseActiveRef.current = true;
+    e.persist();
+    handleMouseMove(e);
+    throttledChange(e);
+    window.addEventListener('mousemove', handleMouseMove);
+    window.addEventListener('mouseup', handleMouseUp);
+  }, [throttledChange, handleMouseMove, handleMouseUp]);
+  useEffect(() => {
+    return () => {
+      throttledChange.cancel();
+    };
+  }, [throttledChange]);
+  return (
+    React__default.createElement(StyledColorWell, {
+      hue: hue,
+      ref: containerRef,
+      role: "presentation",
+      onMouseDown: handleMouseDown
+    }, React__default.createElement(StyledColorWellThumb, {
+      top: mouseActiveRef.current ? topFromMouse : topPosition,
+      left: mouseActiveRef.current ? leftFromMouse : leftPosition
+    }))
+  );
+});
+ColorWell.displayName = 'ColorWell';
+
+export { ColorWell };

package/dist/esm/elements/ColorPicker/index.js

@@ -0,0 +1,237 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
+import React__default, { forwardRef, useReducer, useRef, useMemo, useEffect, useCallback } from 'react';
+import PropTypes from 'prop-types';
+import { Field } from '@zendeskgarden/react-forms';
+import { ColorWell } from './ColorWell.js';
+import { StyledColorPicker } from '../../styled/ColorPicker/StyledColorPicker.js';
+import { StyledHueRange } from '../../styled/ColorPicker/StyledHueRange.js';
+import { StyledAlphaRange } from '../../styled/ColorPicker/StyledAlphaRange.js';
+import { StyledPreview } from '../../styled/ColorPicker/StyledPreview.js';
+import '../../styled/ColorPicker/StyledColorWell.js';
+import '../../styled/ColorPicker/StyledColorWellThumb.js';
+import { StyledSliderGroup } from '../../styled/ColorPicker/StyledSliderGroup.js';
+import { StyledHexField } from '../../styled/ColorPicker/StyledHexField.js';
+import { StyledLabel } from '../../styled/ColorPicker/StyledLabel.js';
+import { StyledInput } from '../../styled/ColorPicker/StyledInput.js';
+import { StyledInputGroup } from '../../styled/ColorPicker/StyledInputGroup.js';
+import { StyledRGBAField } from '../../styled/ColorPicker/StyledRGBAField.js';
+import { StyledSliders } from '../../styled/ColorPicker/StyledSliders.js';
+import '../../styled/ColorPickerDialog/StyledButton.js';
+import '../../styled/ColorPickerDialog/StyledButtonPreview.js';
+import '../../styled/ColorPickerDialog/StyledTooltipModal.js';
+import '../../styled/ColorPickerDialog/StyledTooltipBody.js';
+import '../../styled/ColorSwatch/StyledColorSwatch.js';
+import '../../styled/ColorSwatch/StyledColorSwatchInput.js';
+import '../../styled/ColorSwatch/StyledColorSwatchLabel.js';
+import '../../styled/ColorSwatch/StyledIcon.js';
+import '../../styled/ColorSwatch/StyledCell.js';
+import { reducer, getInitialState, convertStringToColor, areColorsEqual } from './reducer.js';
+
+const ColorPicker = forwardRef((_ref, ref) => {
+  let {
+    color,
+    defaultColor,
+    isOpaque,
+    labels = {},
+    autofocus,
+    onChange,
+    ...props
+  } = _ref;
+  const [state, dispatch] = useReducer(reducer, getInitialState(color || defaultColor));
+  const previousComputedColorRef = useRef(state.color);
+  const previousStateColorRef = useRef(state.color);
+  const computedColor = useMemo(() => {
+    let retVal = state.color;
+    if (color) {
+      if (typeof color === 'string') {
+        const convertedColor = convertStringToColor(color);
+        if (convertedColor) {
+          retVal = convertedColor;
+        }
+      } else {
+        retVal = color;
+      }
+    }
+    if (isOpaque) {
+      retVal.alpha = 100;
+    }
+    if (areColorsEqual(retVal, previousComputedColorRef.current)) {
+      return previousComputedColorRef.current;
+    }
+    return retVal;
+  }, [color, isOpaque, state.color]);
+  useEffect(() => {
+    if (!areColorsEqual(previousStateColorRef.current, state.color) && !areColorsEqual(color, state.color)) {
+      onChange && onChange(state.color);
+    }
+    previousStateColorRef.current = state.color;
+  }, [color, onChange, state.color]);
+  if (previousComputedColorRef.current !== computedColor) {
+    dispatch({
+      type: 'RESET_COLOR',
+      payload: computedColor
+    });
+    previousComputedColorRef.current = computedColor;
+  }
+  const handleColorWellChange = useCallback(hsv => {
+    dispatch({
+      type: 'SATURATION_CHANGE',
+      payload: hsv
+    });
+  }, []);
+  const handleHueChange = useCallback(e => {
+    dispatch({
+      type: 'HUE_CHANGE',
+      payload: e.target.value
+    });
+  }, []);
+  const handleAlphaSliderChange = useCallback(e => {
+    dispatch({
+      type: 'ALPHA_SLIDER_CHANGE',
+      payload: e.target.value
+    });
+  }, []);
+  const handleHexChange = useCallback(e => {
+    dispatch({
+      type: 'HEX_CHANGE',
+      payload: e.target.value
+    });
+  }, []);
+  const handleRedChange = useCallback(e => {
+    dispatch({
+      type: 'RED_CHANGE',
+      payload: e.target.value
+    });
+  }, []);
+  const handleGreenChange = useCallback(e => {
+    dispatch({
+      type: 'GREEN_CHANGE',
+      payload: e.target.value
+    });
+  }, []);
+  const handleBlueChange = useCallback(e => {
+    dispatch({
+      type: 'BLUE_CHANGE',
+      payload: e.target.value
+    });
+  }, []);
+  const handleAlphaChange = useCallback(e => {
+    dispatch({
+      type: 'ALPHA_CHANGE',
+      payload: e.target.value
+    });
+  }, []);
+  const handleBlur = useCallback(() => {
+    dispatch({
+      type: 'RESET_COLOR',
+      payload: computedColor
+    });
+  }, [computedColor]);
+  return React__default.createElement(StyledColorPicker, Object.assign({
+    ref: ref,
+    isOpaque: isOpaque
+  }, props), React__default.createElement(ColorWell, {
+    hue: computedColor.hue,
+    saturation: computedColor.saturation,
+    lightness: computedColor.lightness,
+    onChange: handleColorWellChange
+  }), React__default.createElement(StyledSliderGroup, null, React__default.createElement(StyledPreview, {
+    red: computedColor.red,
+    green: computedColor.green,
+    blue: computedColor.blue,
+    alpha: computedColor.alpha,
+    isOpaque: isOpaque
+  }), React__default.createElement(StyledSliders, {
+    isOpaque: isOpaque
+  }, React__default.createElement(Field, null, React__default.createElement(Field.Label, {
+    hidden: true
+  }, labels.hueSlider || 'Hue slider'), React__default.createElement(StyledHueRange, {
+    step: 1,
+    max: 360,
+    value: computedColor.hue,
+    isOpaque: isOpaque,
+    onChange: handleHueChange
+  })), !isOpaque && React__default.createElement(Field, null, React__default.createElement(Field.Label, {
+    hidden: true
+  }, labels.alphaSlider || 'Alpha slider'), React__default.createElement(StyledAlphaRange, {
+    max: 1,
+    step: 0.01,
+    value: computedColor.alpha / 100,
+    onChange: handleAlphaSliderChange,
+    red: computedColor.red,
+    green: computedColor.green,
+    blue: computedColor.blue
+  })))), React__default.createElement(StyledInputGroup, null, React__default.createElement(StyledHexField, null, React__default.createElement(StyledLabel, {
+    isRegular: true
+  }, labels.hex || 'Hex'), React__default.createElement(StyledInput, {
+    isCompact: true,
+    maxLength: 7,
+    value: state.hexInput
+    ,
+    autoFocus: autofocus,
+    spellCheck: false,
+    onBlur: handleBlur,
+    onChange: handleHexChange
+  })), React__default.createElement(StyledRGBAField, null, React__default.createElement(StyledLabel, {
+    isRegular: true
+  }, labels.red || 'R'), React__default.createElement(StyledInput, {
+    isCompact: true,
+    type: "number",
+    min: "0",
+    max: "255",
+    maxLength: 3,
+    value: state.redInput,
+    onBlur: handleBlur,
+    onChange: handleRedChange
+  })), React__default.createElement(StyledRGBAField, null, React__default.createElement(StyledLabel, {
+    isRegular: true
+  }, labels.green || 'G'), React__default.createElement(StyledInput, {
+    isCompact: true,
+    type: "number",
+    min: "0",
+    max: "255",
+    maxLength: 3,
+    value: state.greenInput,
+    onBlur: handleBlur,
+    onChange: handleGreenChange
+  })), React__default.createElement(StyledRGBAField, null, React__default.createElement(StyledLabel, {
+    isRegular: true
+  }, labels.blue || 'B'), React__default.createElement(StyledInput, {
+    isCompact: true,
+    type: "number",
+    min: "0",
+    max: "255",
+    maxLength: 3,
+    value: state.blueInput,
+    onBlur: handleBlur,
+    onChange: handleBlueChange
+  })), !isOpaque && React__default.createElement(StyledRGBAField, null, React__default.createElement(StyledLabel, {
+    isRegular: true
+  }, labels.alpha || 'A'), React__default.createElement(StyledInput, {
+    isCompact: true,
+    type: "number",
+    min: "0",
+    max: "100",
+    value: state.alphaInput,
+    onBlur: handleBlur,
+    onChange: handleAlphaChange
+  }))));
+});
+ColorPicker.defaultProps = {
+  defaultColor: '#fff'
+};
+ColorPicker.displayName = 'ColorPicker';
+ColorPicker.propTypes = {
+  color: PropTypes.oneOfType([PropTypes.object, PropTypes.string]),
+  isOpaque: PropTypes.bool,
+  onChange: PropTypes.func,
+  labels: PropTypes.object,
+  defaultColor: PropTypes.oneOfType([PropTypes.object, PropTypes.string])
+};
+
+export { ColorPicker };

package/dist/esm/elements/ColorPicker/reducer.js

@@ -0,0 +1,275 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
+import isEqual from 'lodash.isequal';
+import { parseToHsl, parseToRgb, rgb, hsl } from 'polished';
+import { hsvToHsl } from '../../utils/conversion.js';
+import { isValidHex } from '../../utils/validation.js';
+
+function convertStringToColor(colorString) {
+  if (colorString.includes('#') && !isValidHex(colorString)) {
+    return undefined;
+  }
+  const {
+    hue,
+    saturation,
+    lightness
+  } = parseToHsl(colorString);
+  const {
+    red,
+    green,
+    blue,
+    alpha
+  } = parseToRgb(colorString);
+  const computedAlpha = alpha === undefined ? 100 : alpha * 100;
+  const computedHex = rgb({
+    red,
+    green,
+    blue
+  });
+  return {
+    hue,
+    saturation: saturation * 100,
+    lightness: lightness * 100,
+    red,
+    green,
+    blue,
+    alpha: computedAlpha,
+    hex: computedHex
+  };
+}
+const areColorsEqual = (a, b) => {
+  if (a === undefined || b === undefined) {
+    return false;
+  }
+  const colorA = typeof a === 'string' ? convertStringToColor(a) : a;
+  const colorB = typeof b === 'string' ? convertStringToColor(b) : b;
+  if (colorA === undefined || colorB === undefined) {
+    return false;
+  }
+  return isEqual(colorA, colorB);
+};
+function getInitialState(color) {
+  const whiteColor = {
+    hue: 0,
+    saturation: 0,
+    lightness: 0,
+    red: 255,
+    green: 255,
+    blue: 255,
+    alpha: 100,
+    hex: '#ffffff'
+  };
+  if (color === undefined) {
+    return getInitialState(whiteColor);
+  }
+  if (typeof color === 'string') {
+    const computedColor = convertStringToColor(color);
+    return getInitialState(computedColor || whiteColor);
+  }
+  return {
+    color,
+    hexInput: color.hex,
+    redInput: color.red.toString(),
+    blueInput: color.blue.toString(),
+    greenInput: color.green.toString(),
+    alphaInput: color.alpha.toString()
+  };
+}
+const reducer = (state, action) => {
+  switch (action.type) {
+    case 'SATURATION_CHANGE':
+      {
+        const hsl$1 = hsvToHsl(action.payload.h, action.payload.s * 100, action.payload.v * 100);
+        const hex = hsl({
+          hue: action.payload.h,
+          saturation: hsl$1.s / 100,
+          lightness: hsl$1.l / 100
+        });
+        const rgb = parseToRgb(hex);
+        return {
+          ...state,
+          color: {
+            ...state.color,
+            saturation: hsl$1.s,
+            lightness: hsl$1.l,
+            hex,
+            red: rgb.red,
+            green: rgb.green,
+            blue: rgb.blue
+          }
+        };
+      }
+    case 'HUE_CHANGE':
+      {
+        const hue = Number(action.payload);
+        const hex = hsl({
+          hue,
+          saturation: state.color.saturation / 100,
+          lightness: state.color.lightness / 100
+        });
+        const rgb = parseToRgb(hex);
+        return {
+          ...state,
+          color: {
+            ...state.color,
+            hue,
+            hex,
+            red: rgb.red,
+            green: rgb.green,
+            blue: rgb.blue
+          }
+        };
+      }
+    case 'ALPHA_SLIDER_CHANGE':
+      {
+        return {
+          ...state,
+          color: {
+            ...state.color,
+            alpha: Math.round(Number(action.payload) * 100)
+          }
+        };
+      }
+    case 'HEX_CHANGE':
+      {
+        let color = state.color;
+        if (isValidHex(action.payload)) {
+          const rgb = parseToRgb(action.payload);
+          const hsl = parseToHsl(`rgb(${rgb.red}, ${rgb.green}, ${rgb.blue})`);
+          color = {
+            ...color,
+            hue: hsl.hue,
+            saturation: hsl.saturation * 100,
+            lightness: hsl.lightness * 100,
+            hex: action.payload,
+            red: rgb.red,
+            green: rgb.green,
+            blue: rgb.blue
+          };
+        }
+        return {
+          ...state,
+          hexInput: action.payload,
+          color
+        };
+      }
+    case 'RED_CHANGE':
+      {
+        let red = parseInt(action.payload, 10);
+        let color = state.color;
+        if (!isNaN(red)) {
+          if (red >= 255) {
+            red = 255;
+          }
+          if (red < 0) {
+            red = 0;
+          }
+          const hsl = parseToHsl(`rgb(${red}, ${color.green}, ${color.blue})`);
+          const hex = rgb(red, color.green, color.blue);
+          color = {
+            ...color,
+            hex,
+            red: action.payload === '' ? color.red : red,
+            hue: hsl.hue,
+            saturation: hsl.saturation * 100,
+            lightness: hsl.lightness * 100
+          };
+        }
+        return {
+          ...state,
+          redInput: action.payload,
+          color
+        };
+      }
+    case 'GREEN_CHANGE':
+      {
+        let green = parseInt(action.payload, 10);
+        let color = state.color;
+        if (!isNaN(green)) {
+          if (green >= 255) {
+            green = 255;
+          }
+          if (green < 0) {
+            green = 0;
+          }
+          const hsl = parseToHsl(`rgb(${color.red}, ${green}, ${color.blue})`);
+          const hex = rgb(color.red, green, color.blue);
+          color = {
+            ...color,
+            hex,
+            green: action.payload === '' ? color.green : green,
+            hue: hsl.hue,
+            saturation: hsl.saturation * 100,
+            lightness: hsl.lightness * 100
+          };
+        }
+        return {
+          ...state,
+          greenInput: action.payload,
+          color
+        };
+      }
+    case 'BLUE_CHANGE':
+      {
+        let blue = parseInt(action.payload, 10);
+        let color = state.color;
+        if (!isNaN(blue)) {
+          if (blue >= 255) {
+            blue = 255;
+          }
+          if (blue < 0) {
+            blue = 0;
+          }
+          const hsl = parseToHsl(`rgb(${color.red}, ${color.green}, ${blue})`);
+          const hex = rgb(color.red, color.green, blue);
+          color = {
+            ...color,
+            hex,
+            blue: action.payload === '' ? color.blue : blue,
+            hue: hsl.hue,
+            saturation: hsl.saturation * 100,
+            lightness: hsl.lightness * 100
+          };
+        }
+        return {
+          ...state,
+          blueInput: action.payload,
+          color
+        };
+      }
+    case 'ALPHA_CHANGE':
+      {
+        let alpha = parseInt(action.payload, 10);
+        let color = state.color;
+        if (!isNaN(alpha)) {
+          if (alpha > 100) {
+            alpha = 100;
+          }
+          if (alpha < 0) {
+            alpha = 0;
+          }
+          color = {
+            ...color,
+            alpha
+          };
+        }
+        return {
+          ...state,
+          alphaInput: action.payload,
+          color
+        };
+      }
+    case 'RESET_COLOR':
+      {
+        return getInitialState(action.payload);
+      }
+    default:
+      throw new Error('Unknown reducer case.');
+  }
+};
+
+export { areColorsEqual, convertStringToColor, getInitialState, reducer };