From ad0be3ee0c8265cbcdefc90256d07b1488325825 Mon Sep 17 00:00:00 2001
From: jaywcjlove <398188662@qq.com>
Date: Fri, 23 Feb 2024 19:18:03 +0800
Subject: [PATCH] feat(Circle): add `className` in point. #142

---
 packages/color-circle/src/Point.tsx | 4 +++-
 packages/color-circle/src/index.tsx | 5 +++--
 2 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/packages/color-circle/src/Point.tsx b/packages/color-circle/src/Point.tsx
index d25daddb9..b5149dfb4 100644
--- 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
index 901569015..38b77d7cc 100644
--- 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));
       }}