feat(Circle): add className in point. #142

uiwjs · Feb 23, 2024 · ad0be3e · ad0be3e
1 parent 90ca638
commit ad0be3e
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 3 deletions.
diff --git a/packages/color-circle/src/Point.tsx b/packages/color-circle/src/Point.tsx
@@ -4,9 +4,10 @@ import { useRef } from 'react';
 
 interface PointProps extends SwatchRectRenderProps {
   rectProps?: SwatchProps['rectProps'];
+  className?: string;
 }
 
-export default function Point({ style, title, checked, color, onClick, rectProps }: PointProps) {
+export default function Point({ style, className, title, checked, color, onClick, rectProps }: PointProps) {
   const btn = useRef<HTMLDivElement>(null);
   const handleMouseEnter = useCallback(() => {
     btn.current!.style['transform'] = 'scale(1.2)';
@@ -34,6 +35,7 @@ export default function Point({ style, title, checked, color, onClick, rectProps
       onMouseEnter={handleMouseEnter}
       onMouseLeave={handleMouseLeave}
       title={title}
+      className={className}
       style={{
         ...style,
         display: 'flex',

diff --git a/packages/color-circle/src/index.tsx b/packages/color-circle/src/index.tsx
@@ -12,14 +12,15 @@ const Circle = React.forwardRef<HTMLDivElement, CircleProps>((props, ref) => {
   const { prefixCls = 'w-color-circle', className, color, colors = [], rectProps = {}, 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(' ');
   return (
     <Swatch
       ref={ref}
       colors={colors}
       color={hex}
       {...other}
-      className={[prefixCls, className].filter(Boolean).join(' ')}
-      rectRender={({ ...props }) => <Point {...props} rectProps={rectProps} />}
+      className={cls}
+      rectRender={({ ...props }) => <Point {...props} className={`${prefixCls}-point`} rectProps={rectProps} />}
       onChange={(hsvColor) => {
         onChange && onChange(handleColor(hsvColor));
       }}