fix(Circle): fix pointProps props. #142

Author: jaywcjlove

packages/color-circle/README.md

@@ -36,6 +36,38 @@ export default function Demo() {
 }
 ```
 
+Modify point style
+
+```jsx mdx:preview
+import React, { useState } from 'react';
+import Circle from '@uiw/react-color-circle';
+
+export default function Demo() {
+  const [hex, setHex] = useState('#F44E3B');
+  return (
+    <Circle
+      colors={[
+        '#f44336',
+        '#e91e63',
+        '#9c27b0',
+        '#673ab7',
+        '#3f51b5',
+        '#2196f3',
+      ]}
+      color={hex}
+      pointProps={{
+        style: {
+          marginRight: 20,
+        },
+      }}
+      onChange={(color) => {
+        setHex(color.hex);
+      }}
+    />
+  );
+}
+```
+
 ## Props
 
 ```ts
@@ -45,6 +77,7 @@ import { SwatchProps } from '@uiw/react-color-swatch';
 export interface CircleProps extends Omit<SwatchProps, 'color' | 'onChange'> {
   color?: string | HsvaColor;
   onChange?: (color: ColorResult) => void;
+  pointProps?: React.HTMLAttributes<HTMLDivElement>;
 }
 declare const Circle: React.ForwardRefExoticComponent<CircleProps & React.RefAttributes<HTMLDivElement>>;
 export default Circle;

packages/color-circle/src/Point.tsx

@@ -37,7 +37,6 @@ export default function Point({ style, className, title, checked, color, onClick
       title={title}
       className={className}
       style={{
-        ...style,
         display: 'flex',
         alignItems: 'center',
         justifyContent: 'center',
@@ -51,6 +50,7 @@ export default function Point({ style, className, title, checked, color, onClick
         transform: 'scale(1)',
         boxShadow: `${color} 0px 0px ${checked ? 5 : 0}px`,
         transition: 'transform 100ms ease 0s, box-shadow 100ms ease 0s',
+        ...style,
       }}
     >
       <div {...rectProps} style={styleWrapper} />

packages/color-circle/src/index.tsx

@@ -10,7 +10,16 @@ export interface CircleProps extends Omit<SwatchProps, 'color' | 'onChange'> {
 }
 
 const Circle = React.forwardRef<HTMLDivElement, CircleProps>((props, ref) => {
-  const { prefixCls = 'w-color-circle', className, color, colors = [], rectProps = {}, pointProps, onChange, ...other } = props;
+  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(' ');
@@ -22,7 +31,15 @@ const Circle = React.forwardRef<HTMLDivElement, CircleProps>((props, ref) => {
       color={hex}
       {...other}
       className={cls}
-      rectRender={({ ...props }) => <Point {...props} {...pointProps} className={clsPoint} rectProps={rectProps} />}
+      rectRender={({ ...props }) => (
+        <Point
+          {...props}
+          {...pointProps}
+          style={{ ...props.style, ...pointProps.style }}
+          className={clsPoint}
+          rectProps={rectProps}
+        />
+      )}
       onChange={(hsvColor) => {
         onChange && onChange(handleColor(hsvColor));
       }}