104 lines
4.0 KiB
104 lines
4.0 KiB
import React from 'react';
|
|
import { translate } from '../../../translate/translate';
|
|
import QRCode from 'qrcode.react';
|
|
|
|
export const QRModalRender = function() {
|
|
return (
|
|
<span>
|
|
<span
|
|
className="qrcode-modal"
|
|
title={ translate('INDEX.QRCODE') }
|
|
onClick={ this.openModal }>
|
|
<i className="icon fa-qrcode margin-right-5"></i> { translate('DASHBOARD.GENERATE_SM') } QR-code
|
|
</span>
|
|
<div
|
|
className={ 'modal modal-3d-sign ' + (this.state.modalIsOpen ? 'show in' : 'fade hide') }
|
|
id="QRModal">
|
|
<div className={ `modal-dialog modal-center modal-${this.props.modalSize || 'sm' }` }>
|
|
<div className="modal-content">
|
|
<div className="modal-header bg-orange-a400 wallet-send-header">
|
|
<button
|
|
type="button"
|
|
className="close white"
|
|
onClick={ this.closeModal }>
|
|
<span>×</span>
|
|
</button>
|
|
<h4 className="modal-title white text-left">{ this.props.title || translate('INDEX.SCAN_QR_CODE') }</h4>
|
|
</div>
|
|
<div className="modal-body">
|
|
<div className="animsition vertical-align fade-in">
|
|
<div
|
|
id={ 'qrModalCanvas' + this.props.content }
|
|
className="page-content vertical-align-middle text-center">
|
|
<QRCode
|
|
value={ this.props.content }
|
|
size={ Number(this.props.qrSize) || 198 } />
|
|
<p className="margin-top-10">
|
|
<a href=""
|
|
id={ 'saveModalImage' + this.props.content }
|
|
className="btn btn-success waves-effect waves-light save-image-btn margin-right-10"
|
|
onClick={ this.saveAsImage }>
|
|
<i className="icon fa-picture-o"></i>
|
|
{ translate('INDEX.SAVE_AS_IMAGE') }
|
|
</a>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className={ 'modal-backdrop ' + (this.state.modalIsOpen ? 'show in' : 'fade hide') }></div>
|
|
</span>
|
|
);
|
|
};
|
|
|
|
export const QRModalReaderRender = function() {
|
|
if (!this.state.errorShown) {
|
|
return (
|
|
<span>
|
|
<button type="button"
|
|
className="btn btn-default"
|
|
onClick={ this.openModal }>
|
|
<i className="icon fa-qrcode"></i>
|
|
{ translate('INDEX.SCAN_QR_CODE') }
|
|
</button>
|
|
<div
|
|
className={ 'modal modal-3d-sign ' + (this.state.modalIsOpen ? 'show in' : 'fade hide') }
|
|
id="QRReadModal">
|
|
<div
|
|
onClick={ this.closeModal }
|
|
className="modal-close-overlay"></div>
|
|
<div className="modal-dialog modal-center modal-md">
|
|
<div
|
|
onClick={ this.closeModal }
|
|
className="modal-close-overlay"></div>
|
|
<div className="modal-content">
|
|
<div className="modal-header bg-orange-a400 wallet-send-header">
|
|
<button
|
|
type="button"
|
|
className="close white"
|
|
onClick={ this.closeModal }>
|
|
<span>×</span>
|
|
</button>
|
|
<h4 className="modal-title white text-left">{ translate('INDEX.SCAN_QRCODE_WEBCAM') }</h4>
|
|
</div>
|
|
<div className="modal-body">
|
|
<div className="animsition vertical-align fade-in">
|
|
<div className="page-content vertical-align-middle webcam-frame">
|
|
<div id="webcam">
|
|
{ this.state.error }
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className={ 'modal-backdrop ' + (this.state.modalIsOpen ? 'show in' : 'fade hide') }></div>
|
|
</span>
|
|
);
|
|
} else {
|
|
return null;
|
|
}
|
|
};
|