feat: enhance renderPath props.

Author: jaywcjlove

core/README.md

@@ -103,7 +103,7 @@ export default function App() {
 ## Render Path
 
 ```jsx mdx:preview
-import React, { useRef, useEffect } from "react";
+import React, { useRef } from "react";
 import Signature from '@uiw/react-signature';
 
 const points = {
@@ -112,26 +112,32 @@ const points = {
 }
 
 export default function App() {
+  const $svg = useRef(null);
+  const handle = (evn) => $svg.current?.clear();
   return (
-    <Signature
-      defaultPoints={points}
-      renderPath={(path, keyName) => {
-        if (keyName === 'path-1') {
-          return <path d={path} fill="red" />
-        }
-        if (keyName === 'path-2') {
-          return <path d={path} fill="blue" />
-        }
-      }}
-    />
+    <>
+      <Signature
+        ref={$svg}
+        defaultPoints={points}
+        renderPath={(path, keyName, data, index) => {
+          if (keyName === 'path-1' || index === 0) {
+            return <path d={path} fill="red" />
+          }
+          if (keyName === 'path-2' || index === 1) {
+            return <path d={path} fill="blue" />
+          }
+        }}
+      />
+      <button onClick={handle}>Clear</button>
+    </>
   );
 }
 ```
 
 ## Stroke
 
 ```jsx mdx:preview
-import React, { useRef, useEffect } from "react";
+import React, { useRef } from "react";
 import Signature from '@uiw/react-signature';
 
 const points = {
@@ -140,37 +146,43 @@ const points = {
 }
 
 export default function App() {
+  const $svg = useRef(null);
+  const handle = (evn) => $svg.current?.clear();
   return (
-    <Signature
-      defaultPoints={points}
-      options={{
-        size: 6,
-      }}
-      renderPath={(path, keyName) => {
-          return (
-            <>
-              <path
-                d={path}
-                strokeWidth="3"
-                stroke="blue"
-                fill="transparent"
-                strokeLinejoin="round"
-                strokeLinecap="round"
-                pointerEvents="all"
-              />
-              <path
-                d={path}
-                strokeWidth="0"
-                stroke="transparent"
-                fill="#dadada"
-                strokeLinejoin="round"
-                strokeLinecap="round"
-                pointerEvents="all"
-              />
-            </>
-          )
-      }}
-    />
+    <>
+      <Signature
+        ref={$svg}
+        defaultPoints={points}
+        options={{
+          size: 6,
+        }}
+        renderPath={(path, keyName) => {
+            return (
+              <>
+                <path
+                  d={path}
+                  strokeWidth="3"
+                  stroke="blue"
+                  fill="transparent"
+                  strokeLinejoin="round"
+                  strokeLinecap="round"
+                  pointerEvents="all"
+                />
+                <path
+                  d={path}
+                  strokeWidth="0"
+                  stroke="transparent"
+                  fill="#dadada"
+                  strokeLinejoin="round"
+                  strokeLinecap="round"
+                  pointerEvents="all"
+                />
+              </>
+            )
+        }}
+      />
+      <button onClick={handle}>Clear</button>
+    </>
   );
 }
 ```

core/src/Paths.tsx

@@ -8,8 +8,8 @@ export const Paths = () => {
   const { options, ...data } = useStore();
   return (
     <Fragment>
-      {Object.keys(data).map((key) => (
-        <CreatePath key={key} keyName={key} data={data[key]} />
+      {Object.keys(data).map((key, index) => (
+        <CreatePath key={key} keyName={key} index={index} data={data[key]} />
       ))}
     </Fragment>
   );
@@ -18,17 +18,14 @@ export const Paths = () => {
 type CreatePathProps = {
   data: number[][];
   keyName: string;
+  index: number;
 };
 
-const CreatePath = ({ data = [], keyName }: CreatePathProps) => {
+const CreatePath = ({ data = [], index, keyName }: CreatePathProps) => {
   const { renderPath, ...options } = useOptionStore();
   const stroke = getStroke(data, options);
   const pathData = getSvgPathFromStroke(stroke);
-  const dom = renderPath ? renderPath(pathData, keyName, data) : null;
+  const dom = renderPath ? renderPath(pathData, keyName, data, index) : null;
   if (dom) return dom;
-  return (
-    <Fragment>
-      <path d={pathData} />
-    </Fragment>
-  );
+  return <path d={pathData} />;
 };

core/src/index.tsx

@@ -21,7 +21,7 @@ export interface SignatureProps extends React.SVGProps<SVGSVGElement> {
   options?: StrokeOptions;
   readonly?: boolean;
   defaultPoints?: Record<string, number[][]>;
-  renderPath?: (d: string, keyName: string, point: number[][]) => JSX.Element;
+  renderPath?: (d: string, keyName: string, point: number[][], index: number) => JSX.Element;
   onPointer?: (points: number[][]) => void;
 }