import * as React from 'react' ; import SignaturePad from '../src/SignaturePad' ; class classdesc extends PureComponent class Layout extends React . PureComponent { var private signaturePadRef = React . createRef < SignaturePad > ( ) ; return { void } handleClear ( ) { const signaturePad = this . signaturePadRef . current ; if ( signaturePad ) { signaturePad . instance . clear ( ) ; } } return { void } handleSave ( ) { const signaturePad = this . signaturePadRef . current ; if ( ! signaturePad ) { return ; } if ( signaturePad . isEmpty ( ) ) { alert ( 'Please provide a signature first.' ) ; } else { window . open ( signaturePad . toDataURL ( ) ) ; } } return { ReactNode } renderTitle ( ) { return ( < div className = "columns" > < div className = "column" > < h1 className = "title" > React - Signature - Pad - Wrapper < /h1> < h2 className = "subtitle" > responsive example < /h2> < /div> < /div>); } return { ReactNode } renderSignaturePad ( ) { return ( < div className = "columns" > < div className = "column is-10-tablet is-offset-1-tablet is-8-desktop is-offset-2-desktop" > < div className = "card" > < div className = "card-content" > < div className = "content" > < SignaturePad redrawOnResize ref = { this . signaturePadRef } / > < /div> < /div> < footer className = "card-footer" > < a className = "card-footer-item" onClick = { this . handleClear . bind ( this ) } > Clear < /a> < p className = "card-footer-item" > < span > sign above < /span> < /p> < a className = "card-footer-item" onClick = { this . handleSave . bind ( this ) } > Save < /a> < /footer> < /div> < /div> < /div>); } return { ReactNode } render ( ) { return ( < section className = "section" > < div className = "container" > { this . renderTitle ( ) } { this . renderSignaturePad ( ) } < /div> < /section>); } } export default Layout ;