import * as React from 'react' ; import SigPad , { Options , PointGroup } from 'signature_pad' ; import { debounce } from 'throttle-debounce' ; type Props = { width ? : number ; height ? : number ; options ? : Options ; canvasProps ? : { [ key ] : string | { [ key ] : string ; } ; } ; } & DefaultProps ; type DefaultProps = { redrawOnResize : boolean ; debounceInterval : number ; } ; type State = { canvasWidth : number ; canvasHeight : number ; } ; class classdesc extends PureComponent class SignaturePad extends React . PureComponent < Props , State > { static displayName = 'react-signature-pad-wrapper' ; static defaultProps : DefaultProps = { redrawOnResize : false , debounceInterval : 150 , } ; private canvasRef = React . createRef < HTMLCanvasElement > ( ) ; private signaturePad ! : SigPad ; private callResizeHandler ! : debounce < ( ) => void > ; param { Props } props constructor ( props ) { super ( props ) ; this . state = { canvasWidth : 0 , canvasHeight : 0 } ; this . callResizeHandler = debounce < ( ) => void > ( this . props . debounceInterval , this . handleResize . bind ( this ) ) ; } return { void } componentDidMount ( ) { const canvas = this . canvasRef . current ; if ( canvas ) { if ( ! this . props . width || ! this . props . height ) { canvas . style . width = '100%' ; window . addEventListener ( 'resize' , this . callResizeHandler ) ; } this . signaturePad = new SigPad ( canvas , this . props . options ) ; this . scaleCanvas ( canvas ) ; } } return { void } componentWillUnmount ( ) { if ( ! this . props . width || ! this . props . height ) { window . removeEventListener ( 'resize' , this . callResizeHandler ) ; } this . signaturePad . off ( ) ; } return { SigPad } get instance ( ) : SigPad { return this . signaturePad ; } return { Object } get canvas ( ) : React . RefObject < HTMLCanvasElement > { return this . canvasRef ; } param { number } dotSize return { void } set dotSize ( dotSize ) { this . signaturePad . dotSize = dotSize ; } return { number } get dotSize ( ) : number { return this . signaturePad . dotSize ; } param { number } minWidth return { void } set minWidth ( minWidth ) { this . signaturePad . minWidth = minWidth ; } return { number } get minWidth ( ) : number { return this . signaturePad . minWidth ; } param { number } maxWidth return { void } set maxWidth ( maxWidth ) { this . signaturePad . maxWidth = maxWidth ; } return { number } get maxWidth ( ) : number { return this . signaturePad . maxWidth ; } param { number } throttle return { void } set throttle ( throttle ) { this . signaturePad . throttle = throttle ; } return { number } get throttle ( ) : number { return this . signaturePad . throttle ; } param { string } color return { void } set backgroundColor ( color ) { this . signaturePad . backgroundColor = color ; } return { string } get backgroundColor ( ) : string { return this . signaturePad . backgroundColor ; } param { string } color return { void } set penColor ( color ) { this . signaturePad . penColor = color ; } return { string } get penColor ( ) : string { return this . signaturePad . penColor ; } param { number } weight return { void } set velocityFilterWeight ( weight ) { this . signaturePad . velocityFilterWeight = weight ; } return { number } get velocityFilterWeight ( ) : number { return this . signaturePad . velocityFilterWeight ; } return { Boolean } isEmpty ( ) { return this . signaturePad . isEmpty ( ) ; } return { void } clear ( ) { this . signaturePad . clear ( ) ; } param { string } base64String return { void } fromDataURL ( base64String ) { this . signaturePad . fromDataURL ( base64String ) ; } param { ? string } mime param { ? number } encoderOptions return { string } toDataURL ( type ? , encoderOptions ? ) { return this . signaturePad . toDataURL ( type , encoderOptions ) ; } param { PointGroup [ ] } data return { void } fromData ( data ) { this . signaturePad . fromData ( data ) ; } return { PointGroup [ ] } toData ( ) { return this . signaturePad . toData ( ) ; } return { void } off ( ) { this . signaturePad . off ( ) ; } return { void } on ( ) { this . signaturePad . on ( ) ; } return { void } handleResize ( ) { const canvas = this . canvasRef . current ; if ( canvas ) { this . scaleCanvas ( canvas ) ; } } param { HTMLCanvasElement } canvas return { void } scaleCanvas ( canvas ) { const ratio = Math . max ( window . devicePixelRatio || 1 , 1 ) ; const width = ( this . props . width || canvas . offsetWidth ) * ratio ; const height = ( this . props . height || canvas . offsetHeight ) * ratio ; const { canvasWidth , canvasHeight } = this . state ; if ( width === canvasWidth && height === canvasHeight ) return ; let data ; if ( this . props . redrawOnResize && this . signaturePad ) { data = this . signaturePad . toDataURL ( ) ; } canvas . width = width ; canvas . height = height ; this . setState ( { canvasWidth : width , canvasHeight : height } ) ; const ctx = canvas . getContext ( '2d' ) ; if ( ctx ) { ctx . scale ( ratio , ratio ) ; } if ( data ) { this . signaturePad . fromDataURL ( data ) ; } else if ( this . signaturePad ) { this . signaturePad . clear ( ) ; } } return { ReactNode } render ( ) { const { canvasProps } = this . props ; return < canvas ref = { this . canvasRef } { ... canvasProps } />; } } export default SignaturePad ;