@uiw/react-color-colorful/esm/index.js

Color Colorful

import _extends from "@babel/runtime/helpers/extends";
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
var _excluded = ["style", "color"],
  _excluded2 = ["prefixCls", "className", "onChange", "color", "style", "disableAlpha"];
import React from 'react';
import { validHex, color as handleColor, hexToHsva, hsvaToHex, hsvaToRgbaString } from '@uiw/color-convert';
import Alpha, { BACKGROUND_IMG } from '@uiw/react-color-alpha';
import Saturation from '@uiw/react-color-saturation';
import Hue from '@uiw/react-color-hue';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
var Pointer = _ref => {
  var {
      style,
      color
    } = _ref,
    props = _objectWithoutPropertiesLoose(_ref, _excluded);
  var stylePointer = _extends({
    '--colorful-pointer-background-color': '#fff',
    '--colorful-pointer-border': '2px solid #fff',
    height: 28,
    width: 28,
    position: 'absolute',
    transform: 'translate(-16px, -16px)',
    boxShadow: '0 2px 4px rgb(0 0 0 / 20%)',
    borderRadius: '50%',
    background: "url(" + BACKGROUND_IMG + ")",
    backgroundColor: 'var(--colorful-pointer-background-color)',
    border: 'var(--colorful-pointer-border)',
    zIndex: 1
  }, style);
  return /*#__PURE__*/_jsx("div", _extends({}, props, {
    style: stylePointer,
    children: /*#__PURE__*/_jsx("div", {
      style: {
        backgroundColor: color,
        borderRadius: '50%',
        height: '100%',
        width: '100%'
      }
    })
  }));
};
var Colorful = /*#__PURE__*/React.forwardRef((props, ref) => {
  var {
      prefixCls = 'w-color-colorful',
      className,
      onChange,
      color,
      style,
      disableAlpha
    } = props,
    other = _objectWithoutPropertiesLoose(props, _excluded2);
  var hsva = typeof color === 'string' && validHex(color) ? hexToHsva(color) : color || {};
  var handleChange = value => onChange && onChange(handleColor(value));
  return /*#__PURE__*/_jsxs("div", _extends({
    ref: ref,
    style: _extends({
      width: 200,
      position: 'relative'
    }, style)
  }, other, {
    className: prefixCls + " " + (className || ''),
    children: [/*#__PURE__*/_jsx(Saturation, {
      hsva: hsva,
      className: prefixCls,
      radius: "8px 8px 0 0",
      style: {
        width: 'auto',
        height: 150,
        minWidth: 120,
        borderBottom: '12px solid #000'
      },
      pointer: _ref2 => {
        var {
          left,
          top,
          color
        } = _ref2;
        return /*#__PURE__*/_jsx(Pointer, {
          style: {
            left,
            top
          },
          color: hsvaToHex(hsva)
        });
      },
      onChange: newColor => handleChange(_extends({}, hsva, newColor))
    }), /*#__PURE__*/_jsx(Hue, {
      hue: hsva.h,
      height: 24,
      radius: disableAlpha ? '0 0 8px 8px' : 0,
      className: prefixCls,
      onChange: newHue => handleChange(_extends({}, hsva, newHue)),
      pointer: _ref3 => {
        var {
          left
        } = _ref3;
        return /*#__PURE__*/_jsx(Pointer, {
          style: {
            left,
            transform: 'translate(-16px, -5px)'
          },
          color: "hsl(" + (hsva.h || 0) + "deg 100% 50%)"
        });
      }
    }), !disableAlpha && /*#__PURE__*/_jsx(Alpha, {
      hsva: hsva,
      height: 24,
      className: prefixCls,
      radius: "0 0 8px 8px",
      pointer: _ref4 => {
        var {
          left
        } = _ref4;
        return /*#__PURE__*/_jsx(Pointer, {
          style: {
            left,
            transform: 'translate(-16px, -5px)'
          },
          color: hsvaToRgbaString(hsva)
        });
      },
      onChange: newAlpha => handleChange(_extends({}, hsva, newAlpha))
    })]
  }));
});
Colorful.displayName = 'Colorful';
export default Colorful;