ued-comp
Version:
<!-- * @Author: Mia * @Date: 2022-06-09 19:11:50 * @Description: -->
291 lines (254 loc) • 13.4 kB
JavaScript
;
function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _antd = require("antd");
var _copyToClipboard = _interopRequireDefault(require("copy-to-clipboard"));
var _html2canvas = _interopRequireDefault(require("html2canvas"));
var _qrcode = _interopRequireDefault(require("qrcode.react"));
var _react = _interopRequireWildcard(require("react"));
var _reactDom = _interopRequireDefault(require("react-dom"));
require("./index.less");
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
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; }
var Icon = function Icon(props) {
return /*#__PURE__*/_react.default.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 = (0, _react.useState)(false),
_useState2 = _slicedToArray(_useState, 2),
picVisible = _useState2[0],
setPicVisible = _useState2[1];
var _useState3 = (0, _react.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'); //获取元素
(0, _html2canvas.default)(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 ((0, _copyToClipboard.default)(val)) {
setCopySuccess(true);
if (!copySuccess) {
setTimeout(function () {
setCopySuccess(false);
}, 5000);
}
} else {
_antd.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.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("a", {
className: "copy-link-btn ".concat(type),
onClick: function onClick() {
return handleCopy(url);
},
"dsc-name": "dd_share_".concat(senserName, "_copy")
}, /*#__PURE__*/_react.default.createElement("div", {
className: "left ".concat(copySuccess ? 'active' : '')
}, copySuccess ? 'Link Copyed' : url), /*#__PURE__*/_react.default.createElement("div", {
className: "right ".concat(copySuccess ? 'active' : '', " ").concat(type)
}, copySuccess ? /*#__PURE__*/_react.default.createElement(Icon, {
type: "check",
className: 'copy-success-icon'
}) : "Copy ".concat(type === 'pc' ? 'URL' : 'Link'))), /*#__PURE__*/_react.default.createElement("div", {
className: "share-btn-wrap ".concat(type)
}, /*#__PURE__*/_react.default.createElement(_antd.Row, {
justify: "space-between",
gutter: 12
}, /*#__PURE__*/_react.default.createElement(_antd.Col, {
span: 12
}, /*#__PURE__*/_react.default.createElement("button", {
onClick: handleCreateQRCode,
className: "share-btn",
"dsc-name": "dd_share_".concat(senserName, "_qrcode")
}, /*#__PURE__*/_react.default.createElement(Icon, {
type: "qrcode",
className: "share-btn-icon"
}), "QR code")), /*#__PURE__*/_react.default.createElement(_antd.Col, {
span: 12
}, /*#__PURE__*/_react.default.createElement("button", {
onClick: function onClick() {
return handleShare('facebook');
},
className: "share-btn",
"dsc-name": "dd_share_".concat(senserName, "_fb")
}, /*#__PURE__*/_react.default.createElement(Icon, {
type: "facebook",
className: "share-btn-icon"
}), "Facebook"))), /*#__PURE__*/_react.default.createElement(_antd.Row, {
justify: "space-between",
gutter: 12
}, /*#__PURE__*/_react.default.createElement(_antd.Col, {
span: 12
}, /*#__PURE__*/_react.default.createElement("button", {
onClick: function onClick() {
return handleShare('pinterest');
},
className: "share-btn",
"dsc-name": "dd_share_".concat(senserName, "_pin")
}, /*#__PURE__*/_react.default.createElement(Icon, {
type: "Pinterest",
className: "share-btn-icon"
}), "Pinterest")), /*#__PURE__*/_react.default.createElement(_antd.Col, {
span: 12
}, /*#__PURE__*/_react.default.createElement("button", {
onClick: function onClick() {
return handleShare('twitter');
},
className: "share-btn",
"dsc-name": "dd_share_".concat(senserName, "_tw")
}, /*#__PURE__*/_react.default.createElement(Icon, {
type: "twitter",
className: "share-btn-icon"
}), "Twitter")))), picVisible && /*#__PURE__*/_reactDom.default.createPortal( /*#__PURE__*/_react.default.createElement("div", {
className: "share-img-wrap",
style: {
display: "".concat(picVisible ? 'block' : 'none')
}
}, /*#__PURE__*/_react.default.createElement("div", {
className: "content-wrap"
}, /*#__PURE__*/_react.default.createElement("div", {
id: "download-img"
}), /*#__PURE__*/_react.default.createElement("div", {
className: 'share-wrap'
}, /*#__PURE__*/_react.default.createElement("div", {
id: "share"
}, /*#__PURE__*/_react.default.createElement("div", {
className: "share-content"
}, /*#__PURE__*/_react.default.createElement("div", {
className: "share-img"
}, /*#__PURE__*/_react.default.createElement("img", {
src: src
})), /*#__PURE__*/_react.default.createElement("div", {
className: "prod-name",
id: "prod-name"
}, (desc === null || desc === void 0 ? void 0 : desc.length) > 35 ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, desc === null || desc === void 0 ? void 0 : desc.substring(0, 35), "...") : desc), /*#__PURE__*/_react.default.createElement("div", {
className: "price-wrap"
}, /*#__PURE__*/_react.default.createElement("div", {
className: "use-price"
}, "US$ ", price), ' '), /*#__PURE__*/_react.default.createElement("div", {
className: "qr-code"
}, /*#__PURE__*/_react.default.createElement(_qrcode.default, {
value: url,
size: 74
}), /*#__PURE__*/_react.default.createElement("div", {
id: "press-tips"
}, "Scan the QR code to view"))))), /*#__PURE__*/_react.default.createElement("a", {
onClick: handleDownload,
className: "download-btn ".concat(type)
}, /*#__PURE__*/_react.default.createElement(Icon, {
type: "download",
className: "download-btn-icon"
}), "Download"), /*#__PURE__*/_react.default.createElement("div", {
onClick: function onClick() {
return handleClose();
},
className: "close-btn ".concat(type)
}, /*#__PURE__*/_react.default.createElement(Icon, {
type: "close-circle",
className: "close-btn-icon"
})))), document.body));
};
var _default = ShareComp;
exports.default = _default;