feat(Compact): add rectRender/rectProps props.

packages/color-compact/README.md

@@ -26,24 +26,59 @@ export default function Demo() {
   return (
     <Compact
       color={hex}
+      style={{
+        boxShadow: 'rgb(0 0 0 / 15%) 0px 0px 0px 1px, rgb(0 0 0 / 15%) 0px 8px 16px',
+      }}
+      onChange={(color) => {
+        setHex(color.hex);
+      }}
+    />
+  );
+}
+```
+
+Add clear button
+
+```jsx mdx:preview
+import React, { useState } from 'react';
+import Compact from '@uiw/react-color-compact';
+
+export default function Demo() {
+  const [hex, setHex] = useState("#fff");
+  return (
+    <Compact
+      color={hex}
+      style={{
+        boxShadow: 'rgb(0 0 0 / 15%) 0px 0px 0px 1px, rgb(0 0 0 / 15%) 0px 8px 16px',
+      }}
       onChange={(color) => {
         setHex(color.hex);
       }}
+      rectRender={(props) => {
+        console.log(props.key)
+        if (props.key == 35) {
+          return <button key={props.key} style={{ width: 15, height: 15, padding: 0, lineHeight: "10px" }} onClick={() => setHex(null)}>x</button>
+        }
+      }}
     />
   );
 }
 ```
 
+
 ## Props
 
 ```ts
 import React from 'react';
 import { ColorResult, HsvaColor } from '@uiw/color-convert';
+import { type SwatchProps, type SwatchRectRenderProps } from '@uiw/react-color-swatch';
 export interface CompactProps<T> extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange' | 'color'> {
   prefixCls?: string;
   color?: string | HsvaColor;
   colors?: string[];
   onChange?: (color: ColorResult, evn?: T) => void;
+  rectRender?: (props: SwatchRectRenderProps) => JSX.Element | undefined;
+  rectProps?: SwatchProps['rectProps'];
 }
 declare const Compact: React.ForwardRefExoticComponent<CompactProps<React.MouseEvent<HTMLDivElement, MouseEvent>> & React.RefAttributes<HTMLDivElement>>;
 export default Compact;

packages/color-compact/src/index.tsx

@@ -10,13 +10,15 @@ import {
 } from '@uiw/color-convert';
 import EditableInput from '@uiw/react-color-editable-input';
 import RGBA from '@uiw/react-color-editable-input-rgba';
-import Swatch from '@uiw/react-color-swatch';
+import Swatch, { type SwatchProps, type SwatchRectRenderProps } from '@uiw/react-color-swatch';
 
 export interface CompactProps<T> extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange' | 'color'> {
   prefixCls?: string;
   color?: string | HsvaColor;
   colors?: string[];
   onChange?: (color: ColorResult, evn?: T) => void;
+  rectRender?: (props: SwatchRectRenderProps) => JSX.Element | undefined;
+  rectProps?: SwatchProps['rectProps'];
 }
 
 const COLORS = [
@@ -73,7 +75,17 @@ function Point(props: { color?: string; checked?: boolean }) {
 }
 
 const Compact = React.forwardRef<HTMLDivElement, CompactProps<React.MouseEvent<HTMLDivElement, MouseEvent>>>((props, ref) => {
-  const { prefixCls = 'w-color-compact', className, style, onChange, color, colors = COLORS, ...other } = props;
+  const {
+    prefixCls = 'w-color-compact',
+    className,
+    style,
+    onChange,
+    color,
+    colors = COLORS,
+    rectProps,
+    rectRender,
+    ...other
+  } = props;
   const hsva = (typeof color === 'string' && validHex(color) ? hexToHsva(color) : color) as HsvaColor;
   const hex = color ? hsvaToHex(hsva).replace(/^#/, '') : '';
   const handleChangeCallback = useCallback((hsv: HsvaColor) => onChange && onChange(handleColor(hsv)), []);
@@ -104,12 +116,15 @@ const Compact = React.forwardRef<HTMLDivElement, CompactProps<React.MouseEvent<H
       <Swatch
         colors={colors}
         color={color ? hsvaToHex(hsva) : undefined}
+        rectRender={rectRender}
         rectProps={{
           children: <Point />,
+          ...rectProps,
           style: {
             display: 'flex',
             alignItems: 'center',
             justifyContent: 'center',
+            ...rectProps?.style,
           },
         }}
         onChange={(hsvColor) => handleChangeCallback(hsvColor)}