import * as React from 'react' ; import * as ReactDOM from 'react-dom' ; import { BaseDialog , IDialogConfiguration } from '@microsoft/sp-dialog' ; import { Callout } from 'office-ui-fabric-react/lib/Callout' ; import { IconButton } from 'office-ui-fabric-react/lib/Button' ; import { Icon } from 'office-ui-fabric-react/lib/Icon' ; import styles from './QRDialog.module.scss' ; import { IQRDialogContentProps , IQRDialogContentState } from './QRDialog.types' ; import { QRCanvas } from 'qrcanvas-react' ; import * as strings from 'QrCodeCommandSetStrings' ; /**
 * Renders an SVG QR code for the URL specified
 */ class QRDialogContent extends React . Component < IQRDialogContentProps , IQRDialogContentState > { /**
     * The QR canvas element which will produce the SVG
     */ private _canvas : QRCanvas = undefined ; /**
     * The hidden download link
     */ private _qrDownload : HTMLAnchorElement = undefined ; private _timer : number = undefined ; public componentDidMount ( ) { this . _timer = setTimeout ( ( ) => { if ( this . _canvas && this . _qrDownload ) { const dataUri = this . _getImageUri ( ) ; if ( dataUri ) { this . _copyImage ( dataUri ) ; clearTimeout ( this . _timer ) ; } } } , 100 ) ; } /**
     * Renders the content of the dialog
     */ public render ( ) { const { absolutePath } = this . props ; return ( < div className = { styles . qrDialog } > < Callout isBeakVisible = { false } role = { 'presentation' } gapSpace = { 0 } target = { this . props . domElement } hidden = { false } setInitialFocus = { true } onDismiss = { this . _onDismiss . bind ( this ) } > < div className = { styles . qrDialogContentContainer } > < div > < div className = { styles . qrButtonsRight } > < IconButton ariaLabel = { strings . CloseLabel } title = { strings . CloseLabel } iconProps = { { iconName : 'Cancel' } } className = { styles . qrButton } onClick = { this . _onDismiss . bind ( this ) } / > < /div> < /div> < div className = { styles . iconContainer } > < Icon iconName = "CheckMark" className = { styles . icon } / > < /div> < div className = { styles . fileName } > { strings . FileNameLabel . replace ( '{0}' , this . props . fileName ) } < /div> < div className = { styles . shareContainer } > < QRCanvas ref = { ( elm ) => { this . _canvas = elm ; } } options = { { correctLevel : "H" , cellSize : 8 , data : absolutePath , } } /> < /div> < a style = { { display : 'none' } } ref = { ( elm ) => { this . _qrDownload = elm ; } } href = "" download = "qrcode.png" > { strings . DownloadLabel } < /a> < div className = { styles . dismissMainTargets } > < div className = { styles . dismissTargets } > < ul className = { styles . dismissTargetsItems } > < li className = { styles . dismissTargetsItem } > < button className = { styles . dismissTargetsTarget } onClick = { ( event ) => this . btnCopyClicked ( event ) } > < div className = { styles . dismissTargetsItemImage } > < Icon iconName = "Copy" className = { styles . dismissTargetsIcon } / > < /div> < div className = { styles . dismissTargetsItemText } > { strings . CopyBtnLabel } < /div> < /button> < /li> < li className = { styles . dismissTargetsItem } > < button className = { styles . dismissTargetsTarget } onClick = { ( event ) => this . btnDownloadClicked ( event ) } > < div className = { styles . dismissTargetsItemImage } > < Icon iconName = "Download" className = { styles . dismissTargetsIcon } / > < /div> < div className = { styles . dismissTargetsItemText } > { strings . DownloadLabel } < /div> < /button> < /li> < /ul> < /div> < /div> < /div> < /Callout> < /div>); } private _onDismiss = ( _ev ) => { this . props . onDismiss ( ) ; } ; private btnDownloadClicked = ( _event ) : void => { const dataUri = this . _getImageUri ( ) ; this . _qrDownload . href = dataUri ; this . _qrDownload . click ( ) ; } ; private btnCopyClicked = ( _event ) : void => { const dataUri = this . _getImageUri ( ) ; this . _copyImage ( dataUri ) ; } ; private _copyImage ( url ) { console . log ( "Copying!" ) ; var el = document . createElement ( 'div' ) ; el . contentEditable = 'true' ; document . body . appendChild ( el ) ; var img = document . createElement ( 'img' ) ; img . src = url ; el . appendChild ( img ) ; this . _selectText ( el ) ; document . execCommand ( 'copy' ) ; window . getSelection ( ) . removeAllRanges ( ) ; el . parentElement . removeChild ( el ) ; } private _selectText ( element ) { const selection = window . getSelection ( ) ; const range = document . createRange ( ) ; range . selectNodeContents ( element ) ; selection . removeAllRanges ( ) ; selection . addRange ( range ) ; } private _getImageUri ( ) { const canvas = this . _canvas [ "canvas" ] ; const dataUri = canvas . toDataURL ( "image/png" ) ; return dataUri ; } } /**
 * QR Dialog
 */ export class QRDialog extends BaseDialog { public fileName : string ; public absolutePath : string ; /**
     * Configures a non-blocking dialog
     */ public getConfig ( ) { return { isBlocking : false } ; } /**
     * Renders the QR dialog
     */ public render ( ) { this . domElement . className = "nooverlay" ; ReactDOM . render ( < QRDialogContent fileName = { this . fileName } absolutePath = { this . absolutePath } domElement = { document . activeElement . parentElement } onDismiss = { this . onDismiss . bind ( this ) } / > , this . domElement ) ; } /**
     * Closes the dialog when dismissed
     */ private onDismiss ( ) { this . close ( ) ; ReactDOM . unmountComponentAtNode ( this . domElement ) ; } }