feat(Circle): add pointProps props. #142

uiwjs · Feb 23, 2024 · 81e7515 · 81e7515
1 parent b592c84
commit 81e7515
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 6 deletions.
diff --git a/packages/color-circle/src/index.tsx b/packages/color-circle/src/index.tsx
@@ -6,21 +6,23 @@ 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 = {}, 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(' ');
+  const clsPoint = [`${prefixCls}-point`, pointProps?.className].filter(Boolean).join(' ');
   return (
     <Swatch
       ref={ref}
       colors={colors}
       color={hex}
       {...other}
       className={cls}
-      rectRender={({ ...props }) => <Point {...props} className={`${prefixCls}-point`} rectProps={rectProps} />}
+      rectRender={({ ...props }) => <Point {...props} {...pointProps} className={clsPoint} rectProps={rectProps} />}
       onChange={(hsvColor) => {
         onChange && onChange(handleColor(hsvColor));
       }}

diff --git a/packages/color-swatch/README.md b/packages/color-swatch/README.md
@@ -70,8 +70,7 @@ export type SwatchPresetColor = {
   color: string;
   title?: string;
 } | string;
-export type SwatchRectRenderProps = {
-  key: string | number;
+export interface SwatchRectRenderProps extends React.HTMLAttributes<HTMLDivElement> {
   title: string;
   color: string;
   checked: boolean;

diff --git a/packages/color-swatch/src/index.tsx b/packages/color-swatch/src/index.tsx
@@ -2,13 +2,13 @@ import React, { Fragment } from 'react';
 import { HsvaColor, hexToHsva, color as handleColor, ColorResult } from '@uiw/color-convert';
 
 export type SwatchPresetColor = { color: string; title?: string } | string;
-export type SwatchRectRenderProps = {
+export interface SwatchRectRenderProps extends React.HTMLAttributes<HTMLDivElement> {
   title: string;
   color: string;
   checked: boolean;
   style: React.CSSProperties;
   onClick: (evn: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
-};
+}
 export interface SwatchProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange' | 'color'> {
   prefixCls?: string;
   color?: string;