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

Color wheel

import _extends from "@babel/runtime/helpers/extends";
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
var _excluded = ["prefixCls", "radius", "pointer", "className", "style", "width", "height", "oval", "direction", "angle", "color", "onChange"];
import React from 'react';
import { validHex, hexToHsva, hsvaToHex, color as handleColor } from '@uiw/color-convert';
import Interactive from '@uiw/react-drag-event-interactive';
import { Pointer } from "./Pointer.js";
import { getWheelHandlePosition, getWheelValueFromInput } from "./utils.js";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
var HUE_GRADIENT_CLOCKWISE = 'conic-gradient(red, yellow, lime, aqua, blue, magenta, red)';
var HUE_GRADIENT_ANTICLOCKWISE = 'conic-gradient(red, magenta, blue, aqua, lime, yellow, red)';
var Wheel = /*#__PURE__*/React.forwardRef((props, ref) => {
  var {
      prefixCls = 'w-color-wheel',
      radius = 0,
      pointer,
      className,
      style,
      width = 200,
      height = 200,
      oval,
      direction = 'anticlockwise',
      angle = 180,
      color,
      onChange
    } = props,
    other = _objectWithoutPropertiesLoose(props, _excluded);
  var hsva = typeof color === 'string' && validHex(color) ? hexToHsva(color) : color || {};
  var hex = color ? hsvaToHex(hsva) : '';
  var positions = getWheelHandlePosition({
    width
  }, hsva);
  var comProps = {
    top: '0',
    left: '0',
    color: hex
  };
  var handleChange = (interaction, event) => {
    var result = getWheelValueFromInput({
      width
    }, width - interaction.x, height - interaction.y);
    var handleHsva = {
      h: result.h,
      s: result.s,
      v: hsva.v,
      a: hsva.a
    };
    onChange && onChange(handleColor(handleHsva));
  };
  var pointerStyle = {
    zIndex: 1,
    position: 'absolute',
    transform: "translate(" + positions.x + "px, " + positions.y + "px) " + (oval === 'x' || oval === 'X' ? 'scaleY(2)' : oval === 'y' || oval === 'Y' ? 'scaleX(2)' : '')
  };
  var pointerElement = pointer && typeof pointer === 'function' ? pointer(_extends({
    prefixCls,
    style: pointerStyle
  }, comProps)) : /*#__PURE__*/_jsx(Pointer, _extends({
    prefixCls: prefixCls,
    style: pointerStyle
  }, comProps));
  return /*#__PURE__*/_jsxs(Interactive, _extends({
    className: [prefixCls, className || ''].filter(Boolean).join(' ')
  }, other, {
    style: _extends({
      position: 'relative',
      width,
      transform: oval === 'x' || oval === 'X' ? 'scaleY(0.5)' : oval === 'y' || oval === 'Y' ? 'scaleX(0.5)' : '',
      height
    }, style),
    ref: ref,
    onMove: handleChange,
    onDown: handleChange,
    children: [pointerElement, /*#__PURE__*/_jsx("div", {
      style: {
        position: 'absolute',
        borderRadius: '50%',
        background: direction === 'anticlockwise' ? HUE_GRADIENT_CLOCKWISE : HUE_GRADIENT_ANTICLOCKWISE,
        transform: "rotateZ(" + (angle + 90) + "deg)",
        inset: 0
      }
    }), /*#__PURE__*/_jsx("div", {
      style: {
        position: 'absolute',
        borderRadius: '50%',
        background: 'radial-gradient(circle closest-side, #fff, transparent)',
        inset: 0
      }
    }), /*#__PURE__*/_jsx("div", {
      style: {
        backgroundColor: '#000',
        borderRadius: '50%',
        position: 'absolute',
        inset: 0,
        opacity: typeof hsva.v === 'number' ? 1 - hsva.v / 100 : 0
      }
    })]
  }));
});
Wheel.displayName = 'Wheel';
export default Wheel;