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

A React component wrapper for signature_pad

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