z-react-ui/es/poster/index.js

z-react-ui，是一款基于 Dumi，由 React + TypeScript 开发的组件库 🎉。

import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import React, { useEffect, useState, forwardRef, useImperativeHandle } from 'react';
import QRCode from 'qrcode.react';
import { isURL } from '@/_utils/isImg';
import { generateCanvasQr } from '@/_utils/generateCanvasQr';
import { usePersistFn } from 'ahooks'; // #----------- 上: ts类型定义 ----------- 分割线 ----------- 下: JS代码 -----------

var Poster = function Poster(_ref, ref) {
  var posterSrc = _ref.posterSrc,
      posterWidth = _ref.posterWidth,
      posterHeight = _ref.posterHeight,
      _ref$posterCanvasId = _ref.posterCanvasId,
      posterCanvasId = _ref$posterCanvasId === void 0 ? 'posterCanvas' : _ref$posterCanvasId,
      _ref$posterCanvasStyl = _ref.posterCanvasStyle,
      posterCanvasStyle = _ref$posterCanvasStyl === void 0 ? {} : _ref$posterCanvasStyl,
      qrSrc = _ref.qrSrc,
      qrWidth = _ref.qrWidth,
      qrHeight = _ref.qrHeight,
      qrX = _ref.qrX,
      qrY = _ref.qrY,
      _ref$qrCodeId = _ref.qrCodeId,
      qrCodeId = _ref$qrCodeId === void 0 ? 'qrCode' : _ref$qrCodeId,
      _ref$qrProps = _ref.qrProps,
      qrProps = _ref$qrProps === void 0 ? {} : _ref$qrProps,
      _ref$isSeat = _ref.isSeat,
      isSeat = _ref$isSeat === void 0 ? true : _ref$isSeat,
      _ref$seatAroundDistan = _ref.seatAroundDistance,
      seatAroundDistance = _ref$seatAroundDistan === void 0 ? 8 : _ref$seatAroundDistan,
      _ref$seatRadius = _ref.seatRadius,
      seatRadius = _ref$seatRadius === void 0 ? 10 : _ref$seatRadius,
      _ref$seatFillColor = _ref.seatFillColor,
      seatFillColor = _ref$seatFillColor === void 0 ? '#FFF' : _ref$seatFillColor,
      _ref$isCors = _ref.isCors,
      isCors = _ref$isCors === void 0 ? true : _ref$isCors,
      _ref$isClickGenerateC = _ref.isClickGenerateCanvasQr,
      isClickGenerateCanvasQr = _ref$isClickGenerateC === void 0 ? true : _ref$isClickGenerateC;

  // https://inews.gtimg.com/newsapp_bt/0/12102588392/641
  // https://zhangshuaiqy.gitee.io/static-img/static/poster/641.jpeg
  var _useState = useState({
    width: 0,
    height: 0
  }),
      _useState2 = _slicedToArray(_useState, 2),
      posterWH = _useState2[0],
      setWH = _useState2[1];

  var handleClick = function handleClick() {
    return new Promise(function (resolve, reject) {
      if (!isURL(qrSrc) || !isURL(posterSrc)) return; // @ts-ignore

      var posterCanvas = document.getElementById(posterCanvasId); //海报canvans
      // @ts-ignore

      var qrCodeCanvas = document.getElementById(qrCodeId);
      generateCanvasQr({
        posterCanvas: posterCanvas,
        posterSrc: posterSrc,
        posterWidth: posterWidth,
        posterHeight: posterHeight,
        setWH: setWH,
        qrCodeCanvas: qrCodeCanvas,
        qrWidth: qrWidth,
        qrHeight: qrHeight,
        qrX: qrX,
        qrY: qrY,
        isSeat: isSeat,
        seatAroundDistance: seatAroundDistance,
        seatRadius: seatRadius,
        seatFillColor: seatFillColor,
        isCors: isCors
      }).then(function (blob) {
        resolve(blob);
      }).catch(function () {
        reject(null);
      });
    });
  };

  var persistFnClick = usePersistFn(handleClick);
  useEffect(function () {
    !isClickGenerateCanvasQr && persistFnClick();
  }, [isClickGenerateCanvasQr]);
  useImperativeHandle(ref, function () {
    return {
      clickGenerateCanvasQr: persistFnClick
    };
  }, []);
  return /*#__PURE__*/React.createElement("div", null, isURL(qrSrc) && isURL(posterSrc) ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("canvas", {
    id: posterCanvasId,
    width: posterWH.width,
    height: posterWH.height,
    style: posterCanvasStyle
  }), /*#__PURE__*/React.createElement(QRCode, Object.assign({
    value: qrSrc,
    id: qrCodeId,
    style: {
      display: 'none'
    }
  }, qrProps))) : null);
};

export default /*#__PURE__*/forwardRef(Poster);