You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
88 lines
3.1 KiB
88 lines
3.1 KiB
import React from 'react';
|
|
import { translate } from '../../../translate/translate';
|
|
import QRCode from 'qrcode.react';
|
|
|
|
export const QRModalRender = function () {
|
|
return (
|
|
<span>
|
|
<span className="label label-default margin-left-10 action"
|
|
title={ translate('INDEX.QRCODE') }
|
|
onClick={ this.openModal }>
|
|
<i className="icon fa-qrcode"></i>
|
|
</span>
|
|
<div
|
|
className={ 'modal modal-3d-sign ' + (this.state.modalIsOpen ? 'show in' : 'fade hide') }
|
|
id="QRModal">
|
|
<div className="modal-dialog modal-center modal-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">{ translate('INDEX.SCAN_QR_CODE') }</h4>
|
|
</div>
|
|
<div className="modal-body">
|
|
<div className="animsition vertical-align fade-in">
|
|
<div className="page-content vertical-align-middle">
|
|
<QRCode
|
|
value={ this.props.content }
|
|
size={ 198 } />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className={ 'modal-backdrop ' + (this.state.modalIsOpen ? 'show in' : 'fade hide') }></div>
|
|
</span>
|
|
);
|
|
};
|
|
|
|
export const QRModalReaderRender = function () {
|
|
return (
|
|
<span>
|
|
<button type="button"
|
|
className="btn btn-default"
|
|
onClick={ this.openModal }>
|
|
<i className="icon fa-qrcode"></i>
|
|
{ translate('INDEX.SCAN_QRCODE_WEBCAM') }
|
|
</button>
|
|
<div
|
|
className={ 'modal modal-3d-sign ' + (this.state.modalIsOpen ? 'show in' : 'fade hide') }
|
|
id="QRReadModal">
|
|
<div className="modal-dialog modal-center modal-md">
|
|
<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"
|
|
style={{
|
|
width: '100%',
|
|
textAlign: 'center',
|
|
fontSize: '16px'
|
|
}}>
|
|
<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>
|
|
);
|
|
};
|