index.tsx

import React from 'react';
import Alpha, { AlphaProps } from '@uiw/react-color-alpha';

export interface HueProps extends Omit<AlphaProps, 'hsva' | 'onChange'> {
  onChange?: (newHue: { h: number }) => void;
  hue?: number;
}

const Hue = React.forwardRef<HTMLDivElement, HueProps>((props, ref) => {
  const { prefixCls = 'w-color-hue', className, hue = 0, onChange, direction = 'horizontal', ...other } = props;
  return (
    <Alpha
      ref={ref}
      className={`${prefixCls} ${className || ''}`}
      {...other}
      direction={direction}
      background={`linear-gradient(to ${
        direction === 'horizontal' ? 'right' : 'bottom'
      }, 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%)`}
      hsva={{ h: hue, s: 100, v: 100, a: hue / 360 }}
      onChange={(_, interaction) => {
        onChange && onChange({ h: direction === 'horizontal' ? 360 * interaction.left : 360 * interaction.top });
      }}
    />
  );
});

Hue.displayName = 'Hue';

export default Hue;