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

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

"use strict";

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));

var _react = _interopRequireWildcard(require("react"));

var _qrcode = _interopRequireDefault(require("qrcode.react"));

var _isImg = require("@/_utils/isImg");

var _generateCanvasQr = require("@/_utils/generateCanvasQr");

var _ahooks = require("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 = (0, _react.useState)({
    width: 0,
    height: 0
  }),
      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
      posterWH = _useState2[0],
      setWH = _useState2[1];

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

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

      var qrCodeCanvas = document.getElementById(qrCodeId);
      (0, _generateCanvasQr.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 = (0, _ahooks.usePersistFn)(handleClick);
  (0, _react.useEffect)(function () {
    !isClickGenerateCanvasQr && persistFnClick();
  }, [isClickGenerateCanvasQr]);
  (0, _react.useImperativeHandle)(ref, function () {
    return {
      clickGenerateCanvasQr: persistFnClick
    };
  }, []);
  return /*#__PURE__*/_react.default.createElement("div", null, (0, _isImg.isURL)(qrSrc) && (0, _isImg.isURL)(posterSrc) ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("canvas", {
    id: posterCanvasId,
    width: posterWH.width,
    height: posterWH.height,
    style: posterCanvasStyle
  }), /*#__PURE__*/_react.default.createElement(_qrcode.default, Object.assign({
    value: qrSrc,
    id: qrCodeId,
    style: {
      display: 'none'
    }
  }, qrProps))) : null);
};

var _default = /*#__PURE__*/(0, _react.forwardRef)(Poster);

exports.default = _default;