oak-general-business/es/components/common/qrCode/web.js

import React from 'react';
import { Button, Space, Spin } from 'antd';
import { DownloadOutlined, ReloadOutlined } from '@ant-design/icons';
import { QRCodeCanvas } from 'qrcode.react';
import './web.less';
export default function Render(props) {
    const { data, methods } = props;
    const { t } = methods;
    const { filename = 'qrCode.png', expiresAt, tips, onDownload, onRefresh, size = 280, url, loading = false, disableDownload = false, disabled = false, isBase64, expired, expiresAtStr, color, bgColor, } = data;
    const prefixCls = 'oak';
    let V;
    if (expiresAtStr) {
        if (!expired) {
            V = (<span className={`${prefixCls}-qrCodeBox_caption`}>
                    {t('This QR code')}
                    {expiresAtStr}
                    {t('effective')}
                </span>);
        }
        else {
            V = (<span className={`${prefixCls}-qrCodeBox_caption`}>
                    {t('The QR code has expired')}
                </span>);
        }
    }
    return (<div id="oakQrCode" className={`${prefixCls}-qrCodeBox`}>
            <div className={`${prefixCls}-qrCodeBox_qrcode`} style={{
            // width: size,
            // height: size,
            marginBottom: 16,
            marginTop: 16,
        }}>
                <Spin spinning={loading}>
                    {isBase64 ? (<img src={url} alt="qrCode" width={size} height={size}/>) : url ? (<QRCodeCanvas value={url} size={size} fgColor={color} bgColor={bgColor}/>) : null}
                </Spin>
                {disabled ? <div className={`${prefixCls}-qrCodeBox_mask`}>
                    {t('disabled')}
                </div> : null}
            </div>

            {V}
            {tips}
            {<Space className={`${prefixCls}-qrCodeBox_actions`}>
                    {!!url && !disableDownload && !disabled && (<Button type="text" onClick={() => {
                    if (typeof onDownload === 'function') {
                        onDownload(url, filename);
                        return;
                    }
                    const canvas = document
                        .getElementById('oakQrCode')
                        ?.querySelector('canvas');
                    if (canvas) {
                        const url = canvas.toDataURL();
                        const a = document.createElement('a');
                        a.download = filename;
                        a.href = url;
                        document.body.appendChild(a);
                        a.click();
                        document.body.removeChild(a);
                    }
                }}>
                            <DownloadOutlined className={`${prefixCls}-qrCodeBox_actions_downloadIcon`}/>
                        </Button>)}
                    {onRefresh && (<Button type="text" onClick={() => {
                    onRefresh();
                }} size="small">
                            <ReloadOutlined className={`${prefixCls}-qrCodeBox_actions_refreshIcon`}/>
                        </Button>)}
                </Space>}
        </div>);
}