fix: [signature] 修复无法从 @kdcloudjs/kdesign 中直接获取到 Signature 的 props 定义…

…的问题 fix #964

components/index.tsx

@@ -148,3 +148,5 @@ export { default as QRCode } from './qr-code'
 export { default as Divider } from './divider'
 
 export { default as Signature } from './signature'
+
+export type { ISignatureProps } from './signature'

components/signature/demo/backgroundColor.md

@@ -3,22 +3,23 @@ title: jpeg格式背景色
 order: 5
 ---
 
-png和svg格式是透明的，jpeg格式可以设置背景色，默认为白色。
+png 和 svg 格式是透明的，jpeg 格式可以设置背景色，默认为白色。
 
 ```jsx
 import React from 'react'
 import ReactDOM from 'react-dom'
-import { Signature, Radio } from '@kdcloudjs/kdesign'
+import { Signature } from '@kdcloudjs/kdesign'
+import type { ISignatureProps } from '@kdcloudjs/kdesign'
 
 const Demo: React.FC = () => {
-  const [penColor,setPenColor] = React.useState<string>('black')
+  const [penColor] = React.useState<string>('black')
 
-  const handleClear = () => {
+  const handleClear: ISignatureProps['onClear'] = () => {
     console.log('clear')
   }
   return (
     <div style={{ width: '230px', height: '72px' }}>
-      <Signature onClear={handleClear} dataUrlType='jpeg' backgroundColor="#5582f3" penColor={penColor}></Signature>
+      <Signature onClear={handleClear} dataUrlType="jpeg" backgroundColor="#5582f3" penColor={penColor}></Signature>
     </div>
   )
 }

components/signature/demo/basic.md

@@ -7,12 +7,13 @@ order: 0
 import React from 'react'
 import ReactDOM from 'react-dom'
 import { Signature } from '@kdcloudjs/kdesign'
+import type { ISignatureProps } from '@kdcloudjs/kdesign'
 
 const Demo: React.FC = () => {
-  const getPng = (data: string) => {
+  const getPng: ISignatureProps['getSignatureData'] = (data: string) => {
     console.log('getPng===>', data)
   }
-  const handleClear = () => {
+  const handleClear: ISignatureProps['onClear'] = () => {
     console.log('执行清空')
   }
 

components/signature/demo/callback.md

@@ -3,20 +3,20 @@ title: 开始与结束书写的监听回调
 order: 6
 ---
 
-
 ```jsx
 import React from 'react'
 import ReactDOM from 'react-dom'
 import { Signature } from '@kdcloudjs/kdesign'
+import type { ISignatureProps } from '@kdcloudjs/kdesign'
 
 const Demo: React.FC = () => {
-  const handleClear = () => {
+  const handleClear: ISignatureProps['onClear'] = () => {
     console.log('执行清空')
   }
-  const handleOnStart = () => {
+  const handleOnStart: ISignatureProps['onStart'] = () => {
     console.log('开始书写')
   }
-  const handleOnEnd = () => {
+  const handleOnEnd: ISignatureProps['onEnd'] = () => {
     console.log('结束书写')
   }
   return (

components/signature/demo/dataType.md

@@ -3,30 +3,25 @@ title: 导出类型
 order: 2
 ---
 
-手写签名默认生成png类型的base64，可配置`dataUrlType`生成jpeg、svg类型的base64。
+手写签名默认生成 png 类型的 base64，可配置`dataUrlType`生成 jpeg、svg 类型的 base64。
 
 ```jsx
 import React from 'react'
 import ReactDOM from 'react-dom'
 import { Signature, Radio } from '@kdcloudjs/kdesign'
+import type { ISignatureProps } from '@kdcloudjs/kdesign'
 
 const Demo: React.FC = () => {
-  const [dataUrlType,setDataUrlType] = React.useState<string>('png')
-  const getSignatureData = (dataUrl:string) => {
-    console.log('dataUrl===>',dataUrlType, dataUrl)
+  const [dataUrlType, setDataUrlType] = React.useState<string>('png')
+  const getSignatureData: ISignatureProps['getSignatureData'] = (dataUrl: string) => {
+    console.log('dataUrl===>', dataUrlType, dataUrl)
   }
-  const handleClear = () => {
+  const handleClear: ISignatureProps['onClear'] = () => {
     console.log('执行清空')
   }
-  const undo = () => {
-    console.log('undo')
-  }
-  const redo = () => {
-    console.log('redo')
-  }
   return (
     <div style={{ width: '230px', height: '72px' }}>
-    <Radio.Group
+      <Radio.Group
         onChange={(e) => {
           setDataUrlType(e.target.value)
         }}

components/signature/demo/disabled.md

@@ -7,10 +7,11 @@ order: 7
 import React from 'react'
 import ReactDOM from 'react-dom'
 import { Signature, Switch } from '@kdcloudjs/kdesign'
+import type { ISignatureProps } from '@kdcloudjs/kdesign'
 
 const Demo: React.FC = () => {
-  const [disabled,setDisabled] = React.useState<boolean>(true)
-  const onChange = (checked:boolean) => {
+  const [disabled, setDisabled] = React.useState<boolean>(true)
+  const onChange: ISignatureProps['onChange'] = (checked:boolean) => {
     setDisabled(!checked)
   }
   return (

components/signature/demo/fullscreen.md

@@ -3,26 +3,21 @@ title: 书写板放大
 order: 3
 ---
 
-点击modal弹窗的右上角放大icon，可一键放大
+点击 modal 弹窗的右上角放大 icon，可一键放大
 
 ```jsx
 import React from 'react'
 import ReactDOM from 'react-dom'
 import { Signature } from '@kdcloudjs/kdesign'
+import type { ISignatureProps } from '@kdcloudjs/kdesign'
 
 const Demo: React.FC = () => {
-  const getPng = (data:string) => {
-    console.log('getPng===>', data)
-  }
-  const handleClear = () => {
+  const handleClear: ISignatureProps['onClear'] = () => {
     console.log('执行清空')
   }
   return (
     <div style={{ width: '230px', height: '72px' }}>
-      <Signature
-        canFullScreen
-        onClear={handleClear}
-        ></Signature>
+      <Signature canFullScreen onClear={handleClear}></Signature>
     </div>
   )
 }

components/signature/demo/operation.md

@@ -9,18 +9,19 @@ order: 1
 import React from 'react'
 import ReactDOM from 'react-dom'
 import { Signature } from '@kdcloudjs/kdesign'
+import type { ISignatureProps } from '@kdcloudjs/kdesign'
 
 const Demo: React.FC = () => {
-  const getSignatureData = (dataUrl: string) => {
+  const getSignatureData: ISignatureProps['getSignatureData'] = (dataUrl: string) => {
     console.log('dataUrl===>', dataUrl)
   }
-  const handleClear = () => {
+  const handleClear: ISignatureProps['onClear'] = () => {
     console.log('执行清空')
   }
-  const undo = () => {
+  const undo: ISignatureProps['undo'] = () => {
     console.log('undo')
   }
-  const redo = () => {
+  const redo: ISignatureProps['redo'] = () => {
     console.log('redo')
   }
   return (

components/signature/demo/penColor.md

@@ -9,11 +9,12 @@ order: 4
 import React from 'react'
 import ReactDOM from 'react-dom'
 import { Signature, Radio } from '@kdcloudjs/kdesign'
+import type { ISignatureProps } from '@kdcloudjs/kdesign'
 
 const Demo: React.FC = () => {
-  const [penColor,setPenColor] = React.useState<string>('black')
+  const [penColor ,setPenColor] = React.useState<string>('black')
 
-  const handleClear = () => {
+  const handleClear: ISignatureProps['onClear'] = () => {
     console.log('执行清空')
   }
   return (

components/signature/drawingBoard.tsx

@@ -1,11 +1,11 @@
-import React, { useState, useEffect, useRef, forwardRef, useImperativeHandle, RefObject } from 'react'
+import React, { useState, useEffect, useRef, forwardRef, useImperativeHandle, RefObject, useContext } from 'react'
 import Icon from '../icon'
 import SignaturePad from './utils/signature_pad'
+import ConfigContext from '../config-provider/ConfigContext'
 import classNames from 'classnames'
 
 export interface DrawingBoardProps {
   prefixCls: string
-  signatureLangMsg: any
   isEmpty: boolean
   setDataUrl: (dataUrl: string) => void
   setIsEmpty: (value: boolean) => void
@@ -15,11 +15,13 @@ export interface DrawingBoardProps {
   onClear?: () => void
 }
 
-interface SignatureHistoryItem {
+export interface SignatureHistoryItem {
   data: string
 }
 const DrawingBoard = forwardRef<unknown, DrawingBoardProps>((props, ref) => {
-  const { prefixCls, isEmpty, setIsEmpty, onClear, signaturePad, undo, redo, signatureLangMsg } = props
+  const { locale } = useContext(ConfigContext)
+  const signatureLangMsg = locale.getCompLangMsg({ componentName: 'Signature' })
+  const { prefixCls, isEmpty, setIsEmpty, onClear, signaturePad, undo, redo } = props
   const [currentHistoryIndex, setCurrentHistoryIndex] = useState<number>(-1)
   const [signatureHistory, setSignatureHistory] = useState<SignatureHistoryItem[]>([])
   const canvasRef = useRef() as RefObject<HTMLCanvasElement>

components/signature/signature.tsx

@@ -5,7 +5,7 @@ import Modal from '../modal'
 import Icon from '../icon'
 import Image from '../image'
 import Button from '../button'
-import DrawingBoard from './drawingBoard'
+import DrawingBoard, { SignatureHistoryItem } from './drawingBoard'
 import ConfigContext from '../config-provider/ConfigContext'
 import { getCompProps } from '../_utils'
 import { useResizeObserver } from '../_utils/hooks'
@@ -44,6 +44,15 @@ export interface ISignatureProps {
   onClose?: () => void
 }
 
+interface IModalBodyRef {
+  getCanvasRef: () => HTMLCanvasElement
+  getCanvasWrapperRef: () => HTMLDivElement
+  saveSignatureToHistory: () => void
+  signatureHistory: SignatureHistoryItem[]
+  setSignatureHistory: (item: SignatureHistoryItem[]) => void
+  setCurrentHistoryIndex: (index: number) => void
+}
+
 const Signature = (props: ISignatureProps): FunctionComponentElement<ISignatureProps> => {
   const { getPrefixCls, prefixCls, compDefaultProps: userDefaultProps, locale } = useContext(ConfigContext)
   const signatureProps = getCompProps('Signature', userDefaultProps, props)
@@ -82,7 +91,7 @@ const Signature = (props: ISignatureProps): FunctionComponentElement<ISignatureP
   const [isFullScreen, setIsFullScreen] = useState<boolean>(false)
   const isFirstSignatureRef = useRef(true)
   const modalRef = useRef()
-  const modalBodyRef = useRef() as any
+  const modalBodyRef = useRef<IModalBodyRef>()
   const triggerRef = useRef() as RefObject<HTMLDivElement>
   const signaturePadRef = useRef<SignaturePad | null>()
 
@@ -92,17 +101,17 @@ const Signature = (props: ISignatureProps): FunctionComponentElement<ISignatureP
   }
 
   const setJpegBgColor = () => {
-    const canvas = modalBodyRef.current.getCanvasRef()
-    const ctx = canvas.getContext('2d')
-    ctx.globalCompositeOperation = 'destination-over'
-    ctx.fillStyle = backgroundColor
-    ctx.fillRect(0, 0, canvas.width, canvas.height)
+    const canvas = modalBodyRef?.current?.getCanvasRef()
+    const ctx = canvas?.getContext('2d')
+    ctx!.globalCompositeOperation = 'destination-over'
+    ctx!.fillStyle = backgroundColor
+    ctx!.fillRect(0, 0, canvas!.width, canvas!.height)
   }
 
   const handleModalOk = () => {
     const type = typeMapping[dataUrlType as DataUrlType] || ''
     if (type === 'image/jpeg') setJpegBgColor()
-    const result = signaturePadRef.current?.toDataURL(type)
+    const result = signaturePadRef?.current?.toDataURL(type)
     result && setDataUrl(result)
     getSignatureData && getSignatureData(result)
     signaturePadRef.current?.clear()
@@ -123,13 +132,13 @@ const Signature = (props: ISignatureProps): FunctionComponentElement<ISignatureP
 
   const handleResize = (rect: { width: number; height: number }) => {
     const { width, height } = rect
-    const canvas = modalBodyRef.current.getCanvasRef()
-    const originalWidth = canvas.width
-    const originalHeight = canvas.height
+    const canvas = modalBodyRef?.current?.getCanvasRef()
+    const originalWidth = canvas!.width
+    const originalHeight = canvas!.height
     const newWidth = width - 40
     const newHeight = height - 142
-    canvas.width = newWidth
-    canvas.height = newHeight
+    canvas!.width = newWidth
+    canvas!.height = newHeight
     if (isFirstSignatureRef.current) return
 
     const tempData = signaturePadRef.current?.toData()
@@ -169,7 +178,7 @@ const Signature = (props: ISignatureProps): FunctionComponentElement<ISignatureP
       })
       signaturePadRef.current!.addEventListener('endStroke', () => {
         isFirstSignatureRef.current = false
-        modalBodyRef.current.saveSignatureToHistory()
+        modalBodyRef?.current?.saveSignatureToHistory()
         onEnd && onEnd()
       })
     }
@@ -182,12 +191,12 @@ const Signature = (props: ISignatureProps): FunctionComponentElement<ISignatureP
   useEffect(() => {
     if (modalVisible) {
       signaturePadRef.current?.on()
-      modalBodyRef.current.saveSignatureToHistory()
+      modalBodyRef?.current?.saveSignatureToHistory()
     } else {
       signaturePadRef.current?.off()
       signaturePadRef.current?.clear()
-      modalBodyRef.current.setSignatureHistory([])
-      modalBodyRef.current.setCurrentHistoryIndex(-1)
+      modalBodyRef?.current?.setSignatureHistory([])
+      modalBodyRef?.current?.setCurrentHistoryIndex(-1)
       isFirstSignatureRef.current = true
     }
   }, [modalVisible])