react-signature-pad-wrapper/dist/index.es.js

A React component wrapper for signature_pad

import*as t from"react";import*as e from"prop-types";import a from"signature_pad";import{debounce as i}from"throttle-debounce";class r extends t.PureComponent{constructor(e){super(e),Object.defineProperty(this,"canvasRef",{enumerable:!0,configurable:!0,writable:!0,value:t.createRef()}),Object.defineProperty(this,"signaturePad",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),Object.defineProperty(this,"callResizeHandler",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),this.state={canvasWidth:0,canvasHeight:0},this.callResizeHandler=i(this.props.debounceInterval,this.handleResize.bind(this))}componentDidMount(){const t=this.canvasRef.current;t&&(this.props.width&&this.props.height||(t.style.width="100%",window.addEventListener("resize",this.callResizeHandler)),this.signaturePad=new a(t,this.props.options),this.scaleCanvas(t))}componentWillUnmount(){this.props.width&&this.props.height||window.removeEventListener("resize",this.callResizeHandler),this.signaturePad.off()}get instance(){return this.signaturePad}get canvas(){return this.canvasRef}set dotSize(t){this.signaturePad.dotSize=t}get dotSize(){return this.signaturePad.dotSize}set minWidth(t){this.signaturePad.minWidth=t}get minWidth(){return this.signaturePad.minWidth}set maxWidth(t){this.signaturePad.maxWidth=t}get maxWidth(){return this.signaturePad.maxWidth}set throttle(t){this.signaturePad.throttle=t}get throttle(){return this.signaturePad.throttle}set backgroundColor(t){this.signaturePad.backgroundColor=t}get backgroundColor(){return this.signaturePad.backgroundColor}set penColor(t){this.signaturePad.penColor=t}get penColor(){return this.signaturePad.penColor}set velocityFilterWeight(t){this.signaturePad.velocityFilterWeight=t}get velocityFilterWeight(){return this.signaturePad.velocityFilterWeight}isEmpty(){return this.signaturePad.isEmpty()}clear(){this.signaturePad.clear()}fromDataURL(t,e={}){this.signaturePad.fromDataURL(t,e)}toDataURL(t,e){return this.signaturePad.toDataURL(t,e)}toSVG(t){return this.signaturePad.toSVG(t)}fromData(t){this.signaturePad.fromData(t)}toData(){return this.signaturePad.toData()}off(){this.signaturePad.off()}on(){this.signaturePad.on()}handleResize(){const t=this.canvasRef.current;t&&this.scaleCanvas(t)}scaleCanvas(t){const e=Math.max(window.devicePixelRatio||1,1),a=(this.props.width||t.offsetWidth)*e,i=(this.props.height||t.offsetHeight)*e,{canvasWidth:r,canvasHeight:s}=this.state;if(a===r&&i===s)return;let n;this.props.redrawOnResize&&this.signaturePad&&!this.signaturePad.isEmpty()&&(n=this.signaturePad.toDataURL()),t.width=a,t.height=i,this.setState({canvasWidth:a,canvasHeight:i});const o=t.getContext("2d");o&&o.scale(e,e),n?this.signaturePad.fromDataURL(n):this.signaturePad&&this.signaturePad.clear()}render(){const{canvasProps:e}=this.props;return t.createElement("canvas",Object.assign({"data-testid":"canvas-element",ref:this.canvasRef},e))}}Object.defineProperty(r,"displayName",{enumerable:!0,configurable:!0,writable:!0,value:"react-signature-pad-wrapper"}),Object.defineProperty(r,"propTypes",{enumerable:!0,configurable:!0,writable:!0,value:{width:e.number,height:e.number,options:e.object,canvasProps:e.object,redrawOnResize:e.bool.isRequired,debounceInterval:e.number.isRequired}}),Object.defineProperty(r,"defaultProps",{enumerable:!0,configurable:!0,writable:!0,value:{redrawOnResize:!1,debounceInterval:150}});export{r as default};