style(Circle): fix Circle style issue.

Author: jaywcjlove

packages/color-circle/README.md

@@ -30,7 +30,7 @@
 </div>
 <hr>
 
-React Color Swatch
+React Color Circle
 ===
 
 [![Buy me a coffee](https://img.shields.io/badge/Buy%20me%20a%20coffee-048754?logo=buymeacoffee)](https://jaywcjlove.github.io/#/sponsor)
@@ -87,9 +87,21 @@ export default function Demo() {
         '#2196f3',
       ]}
       color={hex}
+      style={{
+        gap: 23
+      }}
+      rectProps={{
+        style: {
+          borderRadius: 2,
+          width: 18,
+          height: 18,
+        }
+      }}
       pointProps={{
         style: {
-          marginRight: 20,
+          width: 26,
+          height: 26,
+          borderRadius: 5
         },
       }}
       onChange={(color) => {

packages/color-circle/src/Point.tsx

@@ -17,15 +17,17 @@ export default function Point({ style, className, title, checked, color, onClick
     btn.current!.style['transform'] = 'scale(1)';
   }, []);
 
+  let width = rectProps?.style?.width || '100%';
+  let height = rectProps?.style?.height || '100%';
   const styleWrapper = {
     '--circle-point-background-color': '#fff',
-    height: checked ? '100%' : 0,
-    width: checked ? '100%' : 0,
-    borderRadius: '50%',
     backgroundColor: 'var(--circle-point-background-color)',
     boxSizing: 'border-box',
     transition: 'height 100ms ease 0s, width 100ms ease 0s',
     ...rectProps!.style,
+    borderRadius: rectProps?.style?.borderRadius || '50%',
+    height: checked ? height : 0,
+    width: checked ? width : 0,
   } as CSSProperties;
 
   return (

packages/color-circle/src/index.tsx

@@ -17,18 +17,27 @@ const Circle = React.forwardRef<HTMLDivElement, CircleProps>((props, ref) => {
     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 }) => (

website/src/pages/home/index.tsx

@@ -62,7 +62,7 @@ function Example() {
               '#795548',
               '#607d8b',
             ]}
-            style={{ width: 252 }}
+            style={{ width: 222 }}
             color={hsva}
             onChange={(color) => {
               dispatch!({ hsva: { ...hsva, ...color.hsva } });