taro-code/lib/components/BarcodeCanvas/index.js

Taro.js barcode & qrcode, Image & Canvas

import React, { forwardRef, useEffect, useImperativeHandle, useState } from 'react';
import { Canvas } from '@tarojs/components';
import { waitForElement } from '../../common/canvas/element';
import { drawCanvasBarcode } from '../../common/canvas/barcode';
const BarcodeCanvas = forwardRef((props, ref) => {
    const { className, text = '', width = 300, height = 60, style = {}, foregroundColor = '#000000', backgroundColor = '#FFFFFF', rootSelector, } = props;
    const id = 'taro-code-canvas-barcode';
    const widthString = width != null ? `${width}px` : '';
    const heightString = height != null ? `${height}px` : '';
    const finalStyle = Object.assign({ width: widthString, height: heightString }, style);
    const [canvasOutput, setCanvasOutput] = useState();
    const drawOnce = async () => {
        const canvas = await waitForElement(id, rootSelector);
        setCanvasOutput(canvas);
        if (canvas != null) {
            drawCanvasBarcode(text, {
                backgroundColor,
                canvas,
                foregroundColor,
                padding: 0,
                height,
                width,
            });
        }
    };
    useEffect(() => {
        void drawOnce();
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [props]);
    useImperativeHandle(ref, () => {
        return { canvas: canvasOutput };
    }, [canvasOutput]);
    return React.createElement(Canvas, { id: id, canvasId: id, type: '2d', className: className, style: finalStyle });
});
export default BarcodeCanvas;
//# sourceMappingURL=index.js.map