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 54 55 56 57 58 59 60 61 62 | 1x 7x 7x 7x 7x 7x 7x 7x 7x 7x 7x 7x 7x 7x 24x 2x 1x | import React from 'react';
import { validHex, hsvaToHex, type HsvaColor, hexToHsva, type ColorResult, color as handleColor } from '@uiw/color-convert';
import Swatch, { type 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 = {},
style = {},
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(' ');
pointProps.style = pointProps.style || {};
pointProps.style.borderRadius = pointProps.style?.borderRadius || '50%';
pointProps.style.width = pointProps.style?.width || 26;
pointProps.style.height = pointProps.style?.height || 26;
pointProps.style.marginRight = pointProps.style?.marginRight || 0;
pointProps.style.marginBottom = pointProps.style?.marginBottom || 0;
style.gap = style.gap || 10;
return (
<Swatch
ref={ref}
colors={colors}
color={hex}
style={style}
{...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;
|