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

Color hue

import _extends from "@babel/runtime/helpers/extends";
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
var _excluded = ["prefixCls", "className", "hue", "onChange", "direction", "reverse"];
import React, { useCallback, useMemo } from 'react';
import Alpha from '@uiw/react-color-alpha';
import { jsx as _jsx } from "react/jsx-runtime";
var NORMAL_COLORS = 'rgb(255, 0, 0) 0%, rgb(255, 255, 0) 17%, rgb(0, 255, 0) 33%, rgb(0, 255, 255) 50%, rgb(0, 0, 255) 67%, rgb(255, 0, 255) 83%, rgb(255, 0, 0) 100%';
var REVERSED_COLORS = 'rgb(255, 0, 0) 0%, rgb(255, 0, 255) 17%, rgb(0, 0, 255) 33%, rgb(0, 255, 255) 50%, rgb(0, 255, 0) 67%, rgb(255, 255, 0) 83%, rgb(255, 0, 0) 100%';
var Hue = /*#__PURE__*/React.forwardRef((props, ref) => {
  var _props$prefixCls = props.prefixCls,
    prefixCls = _props$prefixCls === void 0 ? 'w-color-hue' : _props$prefixCls,
    className = props.className,
    _props$hue = props.hue,
    hue = _props$hue === void 0 ? 0 : _props$hue,
    _onChange = props.onChange,
    _props$direction = props.direction,
    direction = _props$direction === void 0 ? 'horizontal' : _props$direction,
    _props$reverse = props.reverse,
    reverse = _props$reverse === void 0 ? false : _props$reverse,
    other = _objectWithoutPropertiesLoose(props, _excluded);
  var getGradientBackground = useCallback(() => {
    if (direction === 'horizontal') {
      var colors = reverse ? REVERSED_COLORS : NORMAL_COLORS;
      var gradientDirection = 'right';
      return "linear-gradient(to " + gradientDirection + ", " + colors + ")";
    } else {
      // 垂直模式下，由于交互逻辑使用了 1-value，所以渐变颜色也要反转
      var _colors = reverse ? NORMAL_COLORS : REVERSED_COLORS;
      var _gradientDirection = 'bottom';
      return "linear-gradient(to " + _gradientDirection + ", " + _colors + ")";
    }
  }, [direction, reverse]);
  var getHueFromInteraction = useCallback(interaction => {
    var value = direction === 'horizontal' ? interaction.left : interaction.top;
    var normalizedValue;
    if (direction === 'horizontal') {
      normalizedValue = reverse ? 1 - value : value;
    } else {
      // 垂直模式下，正常情况下顶部应该是0，底部是360，所以需要反转
      normalizedValue = reverse ? value : 1 - value;
    }
    return 360 * normalizedValue;
  }, [direction, reverse]);
  var gradientBackground = useMemo(() => getGradientBackground(), [getGradientBackground]);
  return /*#__PURE__*/_jsx(Alpha, _extends({
    ref: ref,
    className: prefixCls + " " + (className || '')
  }, other, {
    direction: direction,
    reverse: reverse,
    background: gradientBackground,
    hsva: {
      h: hue,
      s: 100,
      v: 100,
      a: hue / 360
    },
    onChange: (_, interaction) => {
      _onChange && _onChange({
        h: getHueFromInteraction(interaction)
      });
    }
  }));
});
Hue.displayName = 'Hue';
export default Hue;