ultra-design/es/color-picker/color-picker.js

import _defineProperty from '@babel/runtime/helpers/defineProperty';
import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
import _pt from 'prop-types';
import clsx from 'clsx';
import { useState, useMemo, useCallback, useEffect } from 'react';
import Button from '../button/button.js';
import Input from '../input/input.js';
import Popover from '../popover/popover.js';
import { useMergeProps } from '../utils/mergeProps.js';
import withStyle from '../utils/withStyle.js';
import { colorPickerStyles } from './color-picker-styles.js';
import { transformColor, toRgb } from './color-transform.js';
import MoveContainer from './move-container.js';
import { validHex } from './utils.js';
import { jsx, jsxs } from '@emotion/react/jsx-runtime';

var _excluded = ["children", "className", "layerClassName", "value", "colorFormat", "onChange", "showOpacity"];

function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }

function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
var defaultProps = {
  value: '#13c2c2',
  colorFormat: 'HEX'
};
var basicColors = ['#d0021b', '#f5a623', '#f8e71c', '#8b572a', '#7ed321', '#417505', '#bd10e0', '#9013fe', '#4a90e2', '#50e3c2', '#b8e986', '#000000', '#4a4a4a', '#9b9b9b', '#ffffff'];
var WIDTH = 200;
var HEIGHT = 150;

var ColorPicker = function ColorPicker(p) {
  var props = useMergeProps(defaultProps, p);

  var children = props.children,
      className = props.className,
      layerClassName = props.layerClassName,
      value = props.value,
      colorFormat = props.colorFormat,
      onChange = props.onChange,
      showOpacity = props.showOpacity,
      rest = _objectWithoutProperties(props, _excluded);

  var _useState = useState(transformColor('hex', value)),
      _useState2 = _slicedToArray(_useState, 2),
      selfColor = _useState2[0],
      setSelfColor = _useState2[1];

  var saturationPosition = useMemo(function () {
    return {
      x: selfColor.hsv.s / 100 * WIDTH,
      y: (100 - selfColor.hsv.v) / 100 * HEIGHT
    };
  }, [selfColor.hsv.s, selfColor.hsv.v]);
  var huePosition = useMemo(function () {
    return {
      x: selfColor.hsv.h / 360 * WIDTH
    };
  }, [selfColor.hsv.h]);
  var opacityPosition = useMemo(function () {
    var _selfColor$hsv$a;

    return {
      x: ((_selfColor$hsv$a = selfColor.hsv.a) !== null && _selfColor$hsv$a !== void 0 ? _selfColor$hsv$a : 1) * WIDTH
    };
  }, [selfColor.hsv.a]);
  var rgb = useMemo(function () {
    return "".concat(selfColor.rgb.r, ", ").concat(selfColor.rgb.g, ", ").concat(selfColor.rgb.b);
  }, [selfColor.rgb]);
  var rgba = useMemo(function () {
    var _selfColor$rgb$a$toFi, _selfColor$rgb$a;

    return "".concat(rgb, ", ").concat((_selfColor$rgb$a$toFi = (_selfColor$rgb$a = selfColor.rgb.a) === null || _selfColor$rgb$a === void 0 ? void 0 : _selfColor$rgb$a.toFixed(3)) !== null && _selfColor$rgb$a$toFi !== void 0 ? _selfColor$rgb$a$toFi : 1);
  }, [rgb, selfColor.rgb]);
  var getValueRGB = useMemo(function () {
    var _selfColor$rgb$a2;

    return {
      value: "".concat(selfColor.rgb.r, ", ").concat(selfColor.rgb.g, ", ").concat(selfColor.rgb.b).concat(showOpacity && selfColor.rgb.a !== undefined ? ", ".concat((_selfColor$rgb$a2 = selfColor.rgb.a) === null || _selfColor$rgb$a2 === void 0 ? void 0 : _selfColor$rgb$a2.toFixed(3)) : ''),
      inputted: false
    };
  }, [selfColor.rgb, showOpacity]);

  var _useState3 = useState(getValueRGB),
      _useState4 = _slicedToArray(_useState3, 2),
      valueRGB = _useState4[0],
      setValueRGB = _useState4[1];

  var getValueHEX = useCallback(function () {
    return {
      value: selfColor.hex,
      inputted: false
    };
  }, [selfColor]);

  var _useState5 = useState(getValueHEX),
      _useState6 = _slicedToArray(_useState5, 2),
      valueHEX = _useState6[0],
      setValueHEX = _useState6[1];

  useEffect(function () {
    if (!valueHEX.inputted) {
      setValueHEX(getValueHEX);
    }
  }, [valueHEX.inputted, getValueHEX]);
  useEffect(function () {
    if (!valueRGB.inputted) {
      setValueRGB(getValueRGB);
    }
  }, [valueRGB.inputted, getValueRGB]);

  var changeHEX = function changeHEX(value) {
    if (validHex(value)) {
      setSelfColor(transformColor('hex', value));
      setValueHEX(_objectSpread(_objectSpread({}, valueHEX), {}, {
        value: value
      }));
    }
  };

  var changeRGB = function changeRGB(v) {
    var value = v.match(/\d+(?:\.\d+)?/g);

    if (value && (value.length === 3 || showOpacity && value.length === 4)) {
      var _rgb = toRgb(value);

      setSelfColor(transformColor('rgb', _rgb));
    }

    setValueRGB(_objectSpread(_objectSpread({}, valueRGB), {}, {
      value: v
    }));
  };

  var onSaturationChange = function onSaturationChange(_ref) {
    var x = _ref.x,
        y = _ref.y;

    var newHsv = _objectSpread(_objectSpread({}, selfColor.hsv), {}, {
      s: x / WIDTH * 100,
      v: 100 - y / HEIGHT * 100
    });

    var newColor = transformColor('hsv', newHsv);
    setSelfColor(newColor);
  };

  var onHUEChange = function onHUEChange(_ref2) {
    var x = _ref2.x;

    var newHsv = _objectSpread(_objectSpread({}, selfColor.hsv), {}, {
      h: x / WIDTH * 360
    });

    var newColor = transformColor('hsv', newHsv);
    setSelfColor(newColor);
  };

  var onOpacityChange = function onOpacityChange(_ref3) {
    var x = _ref3.x;

    var newHsv = _objectSpread(_objectSpread({}, selfColor.hsv), {}, {
      a: x / WIDTH
    });

    var newColor = transformColor('hsv', newHsv);
    setSelfColor(newColor);
  };

  useEffect(function () {
    var color = colorFormat === 'RGB' ? "rgb".concat(showOpacity ? 'a' : '', "(").concat(valueRGB.value, ")") : selfColor.hex;
    onChange === null || onChange === void 0 ? void 0 : onChange(color);
  }, [selfColor, valueRGB.value, colorFormat, showOpacity]);
  useEffect(function () {
    if (value === undefined) return;
    setSelfColor(transformColor('hex', value));
  }, [value]);
  return jsx(Popover, {
    layerClassName: layerClassName,
    content: jsxs("div", _objectSpread(_objectSpread({
      className: clsx('ultra-color-picker', className)
    }, rest), {}, {
      css: colorPickerStyles(props),
      children: [jsx("div", {
        className: "ultra-color-picker__basic_color",
        children: basicColors.map(function (color) {
          return jsx("div", {
            className: "ultra-color-picker__basic_color-item",
            style: {
              backgroundColor: color
            },
            onClick: function onClick() {
              return setSelfColor(transformColor('hex', color));
            }
          }, color);
        })
      }), jsx(MoveContainer, {
        onChange: onSaturationChange,
        className: "ultra-color-picker_saturation",
        style: {
          backgroundColor: "hsl(".concat(transformColor('hsv', selfColor.hsv).hsv.h, ", 100%, 50%)")
        },
        children: jsx("div", {
          className: "ultra-color-picker_saturation_cursor",
          style: {
            left: saturationPosition.x,
            top: saturationPosition.y,
            backgroundColor: selfColor.hex
          }
        })
      }), jsx(MoveContainer, {
        onChange: onHUEChange,
        className: "ultra-color-picker_hue",
        children: jsx("div", {
          className: "ultra-color-picker_hue_cursor",
          style: {
            left: huePosition.x,
            backgroundColor: "hsl(".concat(transformColor('hsv', selfColor.hsv).hsv.h, ", 100%, 50%)")
          }
        })
      }), showOpacity && jsx(MoveContainer, {
        onChange: onOpacityChange,
        className: "ultra-color-picker_opacity",
        style: {
          background: "linear-gradient(to right, rgba(".concat(rgb, ", 0), rgba(").concat(rgb, ", 1)) top left / auto auto,\n              conic-gradient(#666 0.25turn, #999 0.25turn 0.5turn, #666 0.5turn 0.75turn, #999 0.75turn) top left / 12px 12px\n              repeat")
        },
        children: jsx("div", {
          className: "ultra-color-picker_opacity_cursor",
          style: {
            left: opacityPosition.x,
            background: "linear-gradient(to right, rgba(".concat(rgba, "), rgba(").concat(rgba, ")) top left / auto auto,\n                conic-gradient(#666 0.25turn, #999 0.25turn 0.5turn, #666 0.5turn 0.75turn, #999 0.75turn) ").concat(-opacityPosition - 2, "px 2px / 12px 12px\n                repeat")
          }
        })
      }), jsxs("div", {
        className: "ultra-color-picker_input",
        children: [jsx(Input, {
          label: "HEX",
          value: valueHEX.value,
          onChange: changeHEX,
          onFocus: function onFocus() {
            return setValueHEX(_objectSpread(_objectSpread({}, valueHEX), {}, {
              inputted: true
            }));
          },
          onBlur: function onBlur() {
            return setValueHEX(_objectSpread(_objectSpread({}, valueHEX), {}, {
              inputted: false
            }));
          }
        }), jsx(Input, {
          label: "RGB",
          value: valueRGB.value,
          onFocus: function onFocus() {
            return setValueRGB(_objectSpread(_objectSpread({}, valueRGB), {}, {
              inputted: true
            }));
          },
          onChange: changeRGB,
          onBlur: function onBlur() {
            return setValueRGB(_objectSpread(_objectSpread({}, valueRGB), {}, {
              inputted: false
            }));
          }
        })]
      })]
    })),
    children: children || jsx(Button, {
      style: {
        backgroundColor: selfColor.hex
      }
    })
  });
};

ColorPicker.propTypes = {
  value: _pt.string,
  onChange: _pt.func,
  colorFormat: _pt.oneOf(['HEX', 'RGB']),
  showOpacity: _pt.bool,
  children: _pt.node,
  className: _pt.string,
  layerClassName: _pt.string
};
ColorPicker.displayName = 'UltraColorPicker';
var ColorPicker$1 = withStyle(ColorPicker);

export { ColorPicker$1 as default };