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 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 | 1x 7x 7x 7x 7x 7x 7x 24x 2x 1x | import React from 'react';
import { validHex, hsvaToHex, HsvaColor, hexToHsva, ColorResult, color as handleColor } from '@uiw/color-convert';
import Swatch, { SwatchProps } from '@uiw/react-color-swatch';
import Point from './Point';
export interface CircleProps extends Omit<SwatchProps, 'color' | 'onChange'> {
color?: string | HsvaColor;
onChange?: (color: ColorResult) => void;
pointProps?: React.HTMLAttributes<HTMLDivElement>;
}
const Circle = React.forwardRef<HTMLDivElement, CircleProps>((props, ref) => {
const {
prefixCls = 'w-color-circle',
className,
color,
colors = [],
rectProps = {},
pointProps = {},
onChange,
...other
} = props;
const hsva = (typeof color === 'string' && validHex(color) ? hexToHsva(color) : color || {}) as HsvaColor;
const hex = color ? hsvaToHex(hsva) : '';
const cls = [prefixCls, className].filter(Boolean).join(' ');
const clsPoint = [`${prefixCls}-point`, pointProps?.className].filter(Boolean).join(' ');
return (
<Swatch
ref={ref}
colors={colors}
color={hex}
{...other}
className={cls}
rectRender={({ ...props }) => (
<Point
{...props}
{...pointProps}
style={{ ...props.style, ...pointProps.style }}
className={clsPoint}
rectProps={rectProps}
/>
)}
onChange={(hsvColor) => {
onChange && onChange(handleColor(hsvColor));
}}
/>
);
});
Circle.displayName = 'Circle';
export default Circle;
|