fix: fix ref props issue.

jaywcjlove · jaywcjlove · commit ab739dd8b4c0 · 2023-11-27T17:04:50.000+08:00
diff --git a/core/README.md b/core/README.md
@@ -22,12 +22,7 @@ import Signature from '@uiw/react-signature';
 
 export default function App() {
   const $svg = useRef(null);
-  const handle = (evn) => {
-    const parentElement = $svg.current
-    while (parentElement.firstChild) {
-      parentElement.removeChild(parentElement.firstChild);
-    }
-  }
+  const handle = (evn) => $svg.current?.clear();
   return (
     <>
       <Signature ref={$svg} />
@@ -65,16 +60,11 @@ import Signature from '@uiw/react-signature';
 
 export default function App() {
   const $svg = useRef(null);
-  const handle = (evn) => {
-    const parentElement = $svg.current
-    while (parentElement.firstChild) {
-      parentElement.removeChild(parentElement.firstChild);
-    }
-  }
+  const handle = (evn) => $svg.current?.clear();
   return (
     <>
       <Signature ref={$svg} fill="red" style={{ "--w-signature-background": "#e4e6ef" }} />
-      <button onClick={() => handle()}>Clear</button>
+      <button onClick={handle}>Clear</button>
     </>
   );
 }
@@ -90,10 +80,7 @@ export default function App() {
   const $svg = useRef(null);
   const [points, setPoints] = useState([])
   const handle = (evn) => {
-    const parentElement = $svg.current
-    while (parentElement.firstChild) {
-      parentElement.removeChild(parentElement.firstChild);
-    }
+    $svg.current?.clear();
     setPoints([])
   }
   const handlePoints = (data) => {
@@ -146,13 +133,19 @@ export default function App() {
 ```ts
 import React from 'react';
 import { type StrokeOptions } from 'perfect-freehand';
+import { type Dispatch } from '@uiw/react-signature';
 export interface SignatureProps extends React.SVGProps<SVGSVGElement> {
   prefixCls?: string;
   options?: StrokeOptions;
   readonly?: boolean;
   defaultPoints?: Record<string, number[][]>;
   onPointer?: (points: number[][]) => void;
 }
+export type SignatureRef = {
+  svg: SVGSVGElement | null;
+  dispatch: Dispatch;
+  clear: () => void;
+};
 export default function Signature(props?: SignatureProps): React.JSX.Element;
 ```
 
diff --git a/core/src/Signature.tsx b/core/src/Signature.tsx
@@ -1,8 +1,9 @@
 import React, { useEffect, useRef, useId, forwardRef, useImperativeHandle } from 'react';
-import { getStroke, type StrokeOptions } from 'perfect-freehand';
+import { type StrokeOptions } from 'perfect-freehand';
 import { getBoundingClientRect, getClinetXY, defaultStyle, useEvent } from './utils';
 
 import { useDispatch } from './store';
+import { SignatureRef } from './';
 
 export interface SignatureProps extends React.SVGProps<SVGSVGElement> {
   prefixCls?: string;
@@ -11,7 +12,7 @@ export interface SignatureProps extends React.SVGProps<SVGSVGElement> {
   onPointer?: (points: number[][]) => void;
 }
 
-export const Signature = forwardRef<SVGSVGElement, SignatureProps>((props, ref) => {
+export const Signature = forwardRef<SignatureRef, SignatureProps>((props, ref) => {
   const {
     className,
     prefixCls = 'w-signature',
@@ -28,9 +29,12 @@ export const Signature = forwardRef<SVGSVGElement, SignatureProps>((props, ref)
   const pointsRef = useRef<number[][]>();
   const pointCount = useRef<number>(0);
   const pointId = useId();
-  const distpatch = useDispatch();
-
-  useImperativeHandle<SVGSVGElement | null, SVGSVGElement | null>(ref, () => $svg.current, [$svg.current]);
+  const dispatch = useDispatch();
+  useImperativeHandle<SignatureRef, SignatureRef>(
+    ref,
+    () => ({ svg: $svg.current, dispatch, clear: () => dispatch({}) }),
+    [$svg.current, dispatch],
+  );
 
   const handlePointerDown = useEvent((e: React.PointerEvent<SVGSVGElement>) => {
     if (readonly) return;
@@ -42,7 +46,7 @@ export const Signature = forwardRef<SVGSVGElement, SignatureProps>((props, ref)
     const pathElm = document.createElementNS('http://www.w3.org/2000/svg', 'path');
     $path.current = pathElm;
     $svg.current!.appendChild(pathElm);
-    distpatch({
+    dispatch({
       [pointId + pointCount.current]: pointsRef.current,
     });
   });
@@ -52,7 +56,7 @@ export const Signature = forwardRef<SVGSVGElement, SignatureProps>((props, ref)
       const { offsetY, offsetX } = getBoundingClientRect($svg.current);
       const { clientX, clientY } = getClinetXY(e);
       pointsRef.current = [...pointsRef.current!, [clientX - offsetX, clientY - offsetY]];
-      distpatch({
+      dispatch({
         [pointId + pointCount.current]: pointsRef.current,
       });
     }
diff --git a/core/src/index.tsx b/core/src/index.tsx
@@ -1,13 +1,20 @@
 import React, { useReducer, forwardRef, useEffect } from 'react';
 import { type StrokeOptions } from 'perfect-freehand';
-import { PointerContext, PointerDispatchContext, reducer } from './store';
+import { PointerContext, PointerDispatchContext, reducer, type Dispatch } from './store';
 import { OptionContext, OptionDispatchContext, reducerOption, defaultOptions } from './options';
 import { Signature as Container } from './Signature';
 import { Paths } from './Paths';
 
 export * from 'perfect-freehand';
 export * from './utils';
 export * from './options';
+export * from './store';
+
+export type SignatureRef = {
+  svg: SVGSVGElement | null;
+  dispatch: Dispatch;
+  clear: () => void;
+};
 
 export interface SignatureProps extends React.SVGProps<SVGSVGElement> {
   prefixCls?: string;
@@ -18,7 +25,7 @@ export interface SignatureProps extends React.SVGProps<SVGSVGElement> {
   onPointer?: (points: number[][]) => void;
 }
 
-const Signature = forwardRef<SVGSVGElement, SignatureProps>(
+const Signature = forwardRef<SignatureRef, SignatureProps>(
   ({ children, options, renderPath, defaultPoints, ...props }, ref) => {
     const [state, dispatch] = useReducer(reducer, Object.assign({}, defaultPoints));
     const [stateOption, dispatchOption] = useReducer(
diff --git a/core/src/store.tsx b/core/src/store.tsx
@@ -5,11 +5,11 @@ export const initialState: InitialState = {};
 export const PointerContext = createContext<InitialState>(initialState);
 export const PointerDispatchContext = createContext<Dispatch>(() => {});
 
-type Dispatch = React.Dispatch<InitialState>;
-
+export type Dispatch = React.Dispatch<InitialState>;
 type InitialState = Record<string, number[][]>;
 
 export function reducer(tasks: InitialState, action: InitialState) {
+  if (action && Object.keys(action).length === 0) return initialState;
   return { ...tasks, ...action };
 }
 
diff --git a/package.json b/package.json
@@ -2,11 +2,8 @@
   "private": true,
   "scripts": {
     "⬇️⬇️⬇️⬇️⬇️ package ⬇️⬇️⬇️⬇️⬇️": "▼▼▼▼▼ package ▼▼▼▼▼",
-    "build": "lerna exec --scope @uiw/* -- tsbb build src/*.tsx --use-babel --cjs cjs --bail && npm run css:build && npm run css:build:dist",
-    "watch": "lerna exec \"tsbb watch src/*.tsx --use-babel --cjs cjs\" --scope @uiw/* & npm run css:watch",
-    "css:build": "lerna exec --scope @uiw/* -- compile-less -d src -o esm",
-    "css:watch": "lerna exec --scope @uiw/* -- compile-less -d src -o esm --watch",
-    "css:build:dist": "lerna exec --scope @uiw/* -- compile-less -d src -o lib --combine=dist.css",
+    "build": "lerna exec --scope @uiw/* -- tsbb build src/*.tsx --use-babel --cjs cjs --bail",
+    "watch": "lerna exec \"tsbb watch src/*.tsx --use-babel --cjs cjs\" --scope @uiw/*",
     "bundle": "lerna exec --scope @uiw/* -- ncc build src/index.tsx --target web --filename dist",
     "bundle:min": "lerna exec --scope @uiw/* -- ncc build src/index.tsx --target web --filename dist --minify",
     "⬆️⬆️⬆️⬆️⬆️ package ⬆️⬆️⬆️⬆️⬆️": "▲▲▲▲▲ package ▲▲▲▲▲",
diff --git a/website/src/Example.tsx b/website/src/Example.tsx
@@ -1,5 +1,5 @@
 import { useRef, useState } from 'react';
-import Signature, { defaultOptions, StrokeOptions } from '@uiw/react-signature';
+import Signature, { defaultOptions, type StrokeOptions, type SignatureRef } from '@uiw/react-signature';
 import copyTextToClipboard from '@uiw/copy-to-clipboard';
 import styled from 'styled-components';
 
@@ -101,6 +101,7 @@ const points1 = [
   [422.6171875, 174.94921875],
   [423.01953125, 175.1484375],
 ];
+
 const points2 = [
   [277.48828125, 62.6015625],
   [277.4453125, 62.64453125],
@@ -119,22 +120,18 @@ const points2 = [
 const points = { points1, points2 };
 
 export const ExampleSignature = () => {
-  const $svg = useRef<SVGSVGElement>(null);
+  const $svg = useRef<SignatureRef>(null);
   const [options, setOptions] = useState<StrokeOptions>(defaultOptions);
-
   const handle = (evn: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
-    const parentElement = $svg.current as SVGSVGElement;
-    while (parentElement.firstChild) {
-      parentElement.removeChild(parentElement.firstChild);
-    }
+    $svg.current?.clear();
   };
 
   const resetOption = () => setOptions(defaultOptions);
   const handleCopy = () => copyTextToClipboard(JSON.stringify(options, null, 2));
   const handleSVGCopy = () => {
-    const svgelm = $svg.current?.cloneNode(true) as SVGSVGElement;
-    const clientWidth = $svg.current?.clientWidth;
-    const clientHeight = $svg.current?.clientHeight;
+    const svgelm = $svg.current?.svg?.cloneNode(true) as SVGSVGElement;
+    const clientWidth = $svg.current?.svg?.clientWidth;
+    const clientHeight = $svg.current?.svg?.clientHeight;
     svgelm.removeAttribute('style');
     svgelm.setAttribute('width', `${clientWidth}px`);
     svgelm.setAttribute('height', `${clientHeight}px`);
@@ -150,10 +147,12 @@ export const ExampleSignature = () => {
         options={options}
         defaultPoints={points}
       />
-      <button onClick={handle}>Clear</button>
-      <button onClick={resetOption}>Reset Options</button>
-      <button onClick={handleCopy}>Copy Options</button>
-      <button onClick={handleSVGCopy}>Copy to SVG</button>
+      <div style={{ display: 'flex', flexWrap: 'wrap', gap: '1rem', paddingTop: '0.46rem' }}>
+        <button onClick={handle}>Clear</button>
+        <button onClick={resetOption}>Reset Options</button>
+        <button onClick={handleCopy}>Copy Options</button>
+        <button onClick={handleSVGCopy}>Copy to SVG</button>
+      </div>
       <div style={{ display: 'flex', flexWrap: 'wrap', gap: '1rem', paddingTop: '1rem' }}>
         <label>
           <div>Size: {options.size}</div>
