ued-comp/es/ShareComp/index.js

<!-- * @Author: Mia * @Date: 2022-06-09 19:11:50 * @Description: -->

function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }

function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }

function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }

function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }

function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }

function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }

import { Col, message, Row } from 'antd';
import copy from 'copy-to-clipboard';
import html2canvas from 'html2canvas';
import QRCode from 'qrcode.react';
import React, { useState } from 'react';
import ReactDOM from 'react-dom';
import './index.less';

var Icon = function Icon(props) {
  return /*#__PURE__*/React.createElement("i", {
    className: "cb-icon icon-".concat(props.type, " ").concat(props.className ? props.className : '')
  });
};

var ShareComp = function ShareComp(props) {
  var src = props.src,
      _props$url = props.url,
      url = _props$url === void 0 ? '' : _props$url,
      _props$desc = props.desc,
      desc = _props$desc === void 0 ? "" : _props$desc,
      beforeShowImg = props.beforeShowImg,
      price = props.price,
      _props$type = props.type,
      type = _props$type === void 0 ? '' : _props$type,
      afterClose = props.afterClose;

  var _useState = useState(false),
      _useState2 = _slicedToArray(_useState, 2),
      picVisible = _useState2[0],
      setPicVisible = _useState2[1];

  var _useState3 = useState(false),
      _useState4 = _slicedToArray(_useState3, 2),
      copySuccess = _useState4[0],
      setCopySuccess = _useState4[1];

  var share = {
    facebook: {
      link: "http://www.facebook.com/sharer.php?u=".concat(url),
      width: 525,
      height: 370
    },
    twitter: {
      link: "http://twitter.com/share?url=".concat(url, "&text=").concat(desc),
      width: 520,
      height: 440
    },
    pinterest: {
      // @ts-ignore
      link: "http://www.pinterest.com/pin/create/button/?url=".concat(url, "&media=").concat(encodeURIComponent(src), "&description=").concat(desc),
      width: 770,
      height: 320
    }
  };

  var handleCreateQRCode = function handleCreateQRCode() {
    beforeShowImg && beforeShowImg(); // 打开图片弹窗，生成下载图片覆盖

    setTimeout(function () {
      setPicVisible(true); // canvasImg((canvas: { toDataURL: () => string }) => {
      //   let tempEl = document.getElementById('download-img');
      //   if (!tempEl?.firstChild) {
      //     let img = document.createElement('img');
      //     img.setAttribute('src', canvas.toDataURL()); //toDataUrl：将canvas画布信息转化为base64格式图片
      //     tempEl?.appendChild(img);
      //   } else {
      //     // @ts-ignore
      //     tempEl.firstChild.setAttribute('src', canvas.toDataURL());
      //   }
      // });
    }, 0);
  };

  var canvasImg = function canvasImg(callback) {
    var canvasEle = document.getElementById('share'); //获取元素

    html2canvas(canvasEle, {
      // width: 400, //设置canvas的宽度
      // scale: 1, //缩放
      useCORS: true
    }).then(function (canvas) {
      //处理你生成的canvas
      // document.body.appendChild(canvas);
      // message.success('success')
      // let a = document.createElement('a');
      // a.setAttribute('href', canvas.toDataURL()); //toDataUrl：将canvas画布信息转化为base64格式图片
      // a.setAttribute('download', 'downImg'); //这个是必须的，否则会报错
      // a.setAttribute('target', '_self');
      // a.click();
      // let tempEl = document.getElementById('download-img')
      // let img = document.createElement('img');
      // img.setAttribute('src', canvas.toDataURL()); //toDataUrl：将canvas画布信息转化为base64格式图片
      // tempEl?.appendChild(img)
      callback && callback(canvas);
    });
  };

  var handleDownload = function handleDownload() {
    canvasImg(function (canvas) {
      var a = document.createElement('a');
      a.setAttribute('download', 'shoplentee product'); //这个是必须的，否则会报错

      a.setAttribute('href', canvas.toDataURL()); //toDataUrl：将canvas画布信息转化为base64格式图片

      a.setAttribute('target', '_self');
      a.click(); // canvas.toBlob((blob: any) => {
      //   a.setAttribute('href', canvas.toDataURL());
      //   a.click();
      // }, 'image/png');
    });
  };

  var handleCopy = function handleCopy(val) {
    if (copy(val)) {
      setCopySuccess(true);

      if (!copySuccess) {
        setTimeout(function () {
          setCopySuccess(false);
        }, 5000);
      }
    } else {
      message.error('copy failed');
    }
  };

  var handleOpenWindow = function handleOpenWindow(url, type, iWidth, iHeight) {
    var iTop = (window.screen.height - 30 - iHeight) / 2;
    var iLeft = (window.screen.width - 10 - iWidth) / 2;
    window.open(url, type, "height=".concat(iHeight, ",,innerHeight=").concat(iHeight, ",width=").concat(iWidth, ",innerWidth=").concat(iWidth, ",top=").concat(iTop, ",left=").concat(iLeft, ",toolbar=no,resizeable=no,location=no,status=no"));
  };

  var handleShare = function handleShare(type) {
    var item = share[type];
    handleOpenWindow(item.link, '_blank', item.width || 560, item.height || 420);
  };

  var handleClose = function handleClose() {
    setPicVisible(false);
    afterClose === null || afterClose === void 0 ? void 0 : afterClose();
  };

  var senserName = type === 'pc' ? 'b' : 'c';
  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("a", {
    className: "copy-link-btn ".concat(type),
    onClick: function onClick() {
      return handleCopy(url);
    },
    "dsc-name": "dd_share_".concat(senserName, "_copy")
  }, /*#__PURE__*/React.createElement("div", {
    className: "left ".concat(copySuccess ? 'active' : '')
  }, copySuccess ? 'Link Copyed' : url), /*#__PURE__*/React.createElement("div", {
    className: "right ".concat(copySuccess ? 'active' : '', " ").concat(type)
  }, copySuccess ? /*#__PURE__*/React.createElement(Icon, {
    type: "check",
    className: 'copy-success-icon'
  }) : "Copy ".concat(type === 'pc' ? 'URL' : 'Link'))), /*#__PURE__*/React.createElement("div", {
    className: "share-btn-wrap ".concat(type)
  }, /*#__PURE__*/React.createElement(Row, {
    justify: "space-between",
    gutter: 12
  }, /*#__PURE__*/React.createElement(Col, {
    span: 12
  }, /*#__PURE__*/React.createElement("button", {
    onClick: handleCreateQRCode,
    className: "share-btn",
    "dsc-name": "dd_share_".concat(senserName, "_qrcode")
  }, /*#__PURE__*/React.createElement(Icon, {
    type: "qrcode",
    className: "share-btn-icon"
  }), "QR code")), /*#__PURE__*/React.createElement(Col, {
    span: 12
  }, /*#__PURE__*/React.createElement("button", {
    onClick: function onClick() {
      return handleShare('facebook');
    },
    className: "share-btn",
    "dsc-name": "dd_share_".concat(senserName, "_fb")
  }, /*#__PURE__*/React.createElement(Icon, {
    type: "facebook",
    className: "share-btn-icon"
  }), "Facebook"))), /*#__PURE__*/React.createElement(Row, {
    justify: "space-between",
    gutter: 12
  }, /*#__PURE__*/React.createElement(Col, {
    span: 12
  }, /*#__PURE__*/React.createElement("button", {
    onClick: function onClick() {
      return handleShare('pinterest');
    },
    className: "share-btn",
    "dsc-name": "dd_share_".concat(senserName, "_pin")
  }, /*#__PURE__*/React.createElement(Icon, {
    type: "Pinterest",
    className: "share-btn-icon"
  }), "Pinterest")), /*#__PURE__*/React.createElement(Col, {
    span: 12
  }, /*#__PURE__*/React.createElement("button", {
    onClick: function onClick() {
      return handleShare('twitter');
    },
    className: "share-btn",
    "dsc-name": "dd_share_".concat(senserName, "_tw")
  }, /*#__PURE__*/React.createElement(Icon, {
    type: "twitter",
    className: "share-btn-icon"
  }), "Twitter")))), picVisible && /*#__PURE__*/ReactDOM.createPortal( /*#__PURE__*/React.createElement("div", {
    className: "share-img-wrap",
    style: {
      display: "".concat(picVisible ? 'block' : 'none')
    }
  }, /*#__PURE__*/React.createElement("div", {
    className: "content-wrap"
  }, /*#__PURE__*/React.createElement("div", {
    id: "download-img"
  }), /*#__PURE__*/React.createElement("div", {
    className: 'share-wrap'
  }, /*#__PURE__*/React.createElement("div", {
    id: "share"
  }, /*#__PURE__*/React.createElement("div", {
    className: "share-content"
  }, /*#__PURE__*/React.createElement("div", {
    className: "share-img"
  }, /*#__PURE__*/React.createElement("img", {
    src: src
  })), /*#__PURE__*/React.createElement("div", {
    className: "prod-name",
    id: "prod-name"
  }, (desc === null || desc === void 0 ? void 0 : desc.length) > 35 ? /*#__PURE__*/React.createElement(React.Fragment, null, desc === null || desc === void 0 ? void 0 : desc.substring(0, 35), "...") : desc), /*#__PURE__*/React.createElement("div", {
    className: "price-wrap"
  }, /*#__PURE__*/React.createElement("div", {
    className: "use-price"
  }, "US$ ", price), ' '), /*#__PURE__*/React.createElement("div", {
    className: "qr-code"
  }, /*#__PURE__*/React.createElement(QRCode, {
    value: url,
    size: 74
  }), /*#__PURE__*/React.createElement("div", {
    id: "press-tips"
  }, "Scan the QR code to view"))))), /*#__PURE__*/React.createElement("a", {
    onClick: handleDownload,
    className: "download-btn ".concat(type)
  }, /*#__PURE__*/React.createElement(Icon, {
    type: "download",
    className: "download-btn-icon"
  }), "Download"), /*#__PURE__*/React.createElement("div", {
    onClick: function onClick() {
      return handleClose();
    },
    className: "close-btn ".concat(type)
  }, /*#__PURE__*/React.createElement(Icon, {
    type: "close-circle",
    className: "close-btn-icon"
  })))), document.body));
};

export default ShareComp;