Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 | 1x 4x 4x 3x 1x | 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;
|