@codesmith-99/react-file-preview
Version:
The url previewer is built using native html elements for previewing url of files of the following type
546 lines (477 loc) • 17.4 kB
JavaScript
var $8zHUo$reactjsxruntime = require("react/jsx-runtime");
var $8zHUo$react = require("react");
var $8zHUo$mime = require("mime");
var $8zHUo$styledcomponents = require("styled-components");
var $8zHUo$reactfileicon = require("react-file-icon");
var $8zHUo$commaseparatedvalues = require("comma-separated-values");
var $8zHUo$reactvirtuoso = require("react-virtuoso");
function $parcel$defineInteropFlag(a) {
Object.defineProperty(a, '__esModule', {value: true, configurable: true});
}
function $parcel$export(e, n, v, s) {
Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
}
function $parcel$interopDefault(a) {
return a && a.__esModule ? a.default : a;
}
$parcel$defineInteropFlag(module.exports);
$parcel$export(module.exports, "default", () => $882b6d93070905b3$export$2e2bcd8739ae039);
const $0a9bf9b8d4393e1e$var$Audio = (0, ($parcel$interopDefault($8zHUo$styledcomponents))).audio`
width: 100%;
`;
function $0a9bf9b8d4393e1e$export$2e2bcd8739ae039({ src: src, onError: onError, onLoad: onLoad, mimeType: mimeType, autoPlay: autoPlay }) {
return /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsxs)($0a9bf9b8d4393e1e$var$Audio, {
controls: true,
className: "audio",
onError: onError,
onCanPlay: onLoad,
autoPlay: autoPlay,
children: [
/*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsx)("source", {
src: src,
type: mimeType
}),
"Your browser does not support this audio tag"
]
});
}
const $5f97fbcf9447784b$var$TD = (0, ($parcel$interopDefault($8zHUo$styledcomponents))).td`
border: 1px solid black;
`;
const $5f97fbcf9447784b$var$CSVViewer = ({ src: src, onError: onError, onLoad: onLoad })=>{
const [data, setData] = (0, $8zHUo$react.useState)([]);
(0, $8zHUo$react.useEffect)(()=>{
const req = new XMLHttpRequest();
req.open('GET', src, true);
req.onload = function(e) {
if (req.status >= 300) onError(e);
else {
setData(new (0, ($parcel$interopDefault($8zHUo$commaseparatedvalues)))(req.response).parse());
onLoad(true);
}
};
req.send();
return ()=>{
req.abort();
};
}, [
src
]);
return /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsx)((0, $8zHUo$reactvirtuoso.TableVirtuoso), {
style: {
height: '100%',
whiteSpace: 'nowrap',
width: '100%'
},
data: data,
itemContent: (index, row)=>/*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsx)((0, $8zHUo$reactjsxruntime.Fragment), {
children: row.map((x, i)=>/*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsx)($5f97fbcf9447784b$var$TD, {
children: x
}, `${index}-${i}`))
})
});
};
var $5f97fbcf9447784b$export$2e2bcd8739ae039 = /*#__PURE__*/ (0, $8zHUo$react.memo)($5f97fbcf9447784b$var$CSVViewer);
function $8a5c52d788c46910$export$2e2bcd8739ae039({ onLoad: onLoad, mimeType: mimeType }) {
(0, $8zHUo$react.useEffect)(()=>{
onLoad(true);
}, [
onLoad
]);
return /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsx)("div", {
style: {
width: '50px',
height: '50px'
},
children: /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsx)((0, $8zHUo$reactfileicon.FileIcon), {
extension: (0, ($parcel$interopDefault($8zHUo$mime))).getExtension(mimeType) ?? '',
...(0, $8zHUo$reactfileicon.defaultStyles)[(0, ($parcel$interopDefault($8zHUo$mime))).getExtension(mimeType)]
})
});
}
function $d9de632aa8998add$export$2e2bcd8739ae039({ src: src, onLoad: onLoad }) {
return /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsx)("iframe", {
id: "msdoc-iframe",
title: "msdoc-iframe",
height: "100%",
width: "100%",
onLoad: ()=>onLoad(true),
src: `https://view.officeapps.live.com/op/embed.aspx?src=${encodeURIComponent(src)}`
});
}
const $c9c81cb15dfc00d6$var$Iframe = (0, ($parcel$interopDefault($8zHUo$styledcomponents))).iframe`
background-color: white;
width: 100%;
height: 100%;
`;
function $c9c81cb15dfc00d6$export$2e2bcd8739ae039({ src: src, onLoad: onLoad, onError: onError }) {
const [data, setData] = (0, $8zHUo$react.useState)('');
(0, $8zHUo$react.useEffect)(()=>{
const req = new XMLHttpRequest();
req.open('GET', src, true);
req.onload = function(e) {
if (req.status >= 300) onError(e);
else {
setData(req.response);
onLoad(true);
}
};
req.send();
return ()=>{
req.abort();
};
}, [
src
]);
return /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsx)($c9c81cb15dfc00d6$var$Iframe, {
src: `data:text/html; charset=utf-8,${encodeURIComponent(data)}`,
sandbox: ""
});
}
const $8fedf5be1c7777b3$var$Image = (0, ($parcel$interopDefault($8zHUo$styledcomponents))).img`
width: 100%;
height: 100%;
`;
function $8fedf5be1c7777b3$export$2e2bcd8739ae039({ src: src, onError: onError, onLoad: onLoad }) {
return /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsx)($8fedf5be1c7777b3$var$Image, {
src: src,
onError: onError,
onLoad: ()=>onLoad(true)
});
}
const $b57c49aac23108cb$var$Iframe = (0, ($parcel$interopDefault($8zHUo$styledcomponents))).iframe`
background-color: white;
width: 100%;
height: 100%;
`;
function $b57c49aac23108cb$export$2e2bcd8739ae039({ src: src, onLoad: onLoad, onError: onError }) {
const [data, setData] = (0, $8zHUo$react.useState)('');
(0, $8zHUo$react.useEffect)(()=>{
const req = new XMLHttpRequest();
req.open('GET', src, true);
req.responseType = 'arraybuffer';
req.onload = function(e) {
if (req.status >= 300) onError(e);
else {
setData(window.URL.createObjectURL(new Blob([
req.response
], {
type: 'application/pdf'
})));
onLoad(true);
}
};
req.send();
return ()=>{
req.abort();
};
}, [
src
]);
return /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsx)($b57c49aac23108cb$var$Iframe, {
src: data
});
}
const $05a49fbc01c5e304$var$Container = (0, ($parcel$interopDefault($8zHUo$styledcomponents))).div`
width: 100%;
height: 100%;
overflow: auto;
`;
function $05a49fbc01c5e304$export$2e2bcd8739ae039({ src: src, onLoad: onLoad, onError: onError }) {
const [data, setData] = (0, $8zHUo$react.useState)('');
(0, $8zHUo$react.useEffect)(()=>{
const req = new XMLHttpRequest();
req.open('GET', src, true);
req.onload = function(e) {
if (req.status >= 300) onError(e);
else {
setData(req.response);
onLoad(true);
}
};
req.send();
return ()=>{
req.abort();
};
}, [
src
]);
return /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsx)($05a49fbc01c5e304$var$Container, {
children: data
});
}
const $c381ca9770681886$var$Video = (0, ($parcel$interopDefault($8zHUo$styledcomponents))).video`
width: 100%;
height: 100%;
`;
function $c381ca9770681886$export$2e2bcd8739ae039({ src: src, onError: onError, onLoad: onLoad, mimeType: mimeType, autoPlay: autoPlay }) {
return /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsxs)($c381ca9770681886$var$Video, {
controls: true,
onError: onError,
onCanPlay: ()=>onLoad(true),
autoPlay: autoPlay,
children: [
/*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsx)("source", {
src: src,
type: mimeType
}),
"Your browser does not support this video tag"
]
});
}
function $144e1a27486c6fb0$export$2e2bcd8739ae039({ mimeType: mimeType, src: src, onError: onError, onLoad: onLoad, autoPlay: autoPlay }) {
switch(mimeType){
case 'text/csv':
return /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsx)((0, $5f97fbcf9447784b$export$2e2bcd8739ae039), {
onLoad: onLoad,
onError: (e)=>onError(e),
src: src
});
case 'text/plain':
return /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsx)((0, $05a49fbc01c5e304$export$2e2bcd8739ae039), {
onLoad: onLoad,
onError: (e)=>onError(e),
src: src
});
case 'application/pdf':
return /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsx)((0, $b57c49aac23108cb$export$2e2bcd8739ae039), {
onLoad: onLoad,
onError: (e)=>onError(e),
src: src
});
case 'text/html':
return /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsx)((0, $c9c81cb15dfc00d6$export$2e2bcd8739ae039), {
src: src,
onLoad: onLoad,
onError: (e)=>onError(e)
});
case mimeType.startsWith('image/') && mimeType:
return /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsx)((0, $8fedf5be1c7777b3$export$2e2bcd8739ae039), {
src: src,
onLoad: onLoad,
onError: (e)=>onError(e)
});
case mimeType.startsWith('audio/') && mimeType:
return /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsx)((0, $0a9bf9b8d4393e1e$export$2e2bcd8739ae039), {
src: src,
onLoad: ()=>onLoad(true),
onError: (e)=>onError(e),
mimeType: mimeType,
autoPlay: autoPlay
});
case mimeType.startsWith('video/') && mimeType:
return /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsx)((0, $c381ca9770681886$export$2e2bcd8739ae039), {
src: src,
onLoad: ()=>onLoad(true),
onError: (e)=>onError(e),
mimeType: mimeType,
autoPlay: autoPlay
});
case 'application/msword':
case 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet':
case 'application/vnd.openxmlformats-officedocument.wordprocessingml.document':
case 'application/vnd.ms-excel':
case 'application/vnd.ms-powerpoint':
case 'application/vnd.openxmlformats-officedocument.presentationml.presentation':
return /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsx)((0, $d9de632aa8998add$export$2e2bcd8739ae039), {
src: src,
onLoad: onLoad
});
default:
return /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsx)((0, $8a5c52d788c46910$export$2e2bcd8739ae039), {
onLoad: onLoad,
mimeType: mimeType
});
}
}
const $5135f1ae637a5b81$var$Container = (0, ($parcel$interopDefault($8zHUo$styledcomponents))).div`
ldio-digmt7cfm5i {
0% {
transform: rotate(0);
}
100% {
transform: rotate(360deg);
}
}
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
.ldio-digmt7cfm5i div {
box-sizing: border-box !important;
}
.ldio-digmt7cfm5i > div {
position: absolute;
width: 56px;
height: 56px;
top: 22px;
left: 22px;
border-radius: 50%;
border: 2px solid #000;
border-color: #93dbe9 transparent #93dbe9 transparent;
animation: ldio-digmt7cfm5i 1s linear infinite;
}
.ldio-digmt7cfm5i > div:nth-child(2),
.ldio-digmt7cfm5i > div:nth-child(4) {
width: 50px;
height: 50px;
top: 25px;
left: 25px;
animation: ldio-digmt7cfm5i 1s linear infinite reverse;
}
.ldio-digmt7cfm5i > div:nth-child(2) {
border-color: transparent #689cc5 transparent #689cc5;
}
.ldio-digmt7cfm5i > div:nth-child(3) {
border-color: transparent;
}
.ldio-digmt7cfm5i > div:nth-child(3) div {
position: absolute;
width: 100%;
height: 100%;
transform: rotate(45deg);
}
.ldio-digmt7cfm5i > div:nth-child(3) div:before,
.ldio-digmt7cfm5i > div:nth-child(3) div:after {
content: '';
display: block;
position: absolute;
width: 2px;
height: 2px;
top: -2px;
left: 25px;
background: #93dbe9;
border-radius: 50%;
box-shadow: 0 54px 0 0 #93dbe9;
}
.ldio-digmt7cfm5i > div:nth-child(3) div:after {
left: -2px;
top: 25px;
box-shadow: 54px 0 0 0 #93dbe9;
}
.ldio-digmt7cfm5i > div:nth-child(4) {
border-color: transparent;
}
.ldio-digmt7cfm5i > div:nth-child(4) div {
position: absolute;
width: 100%;
height: 100%;
transform: rotate(45deg);
}
.ldio-digmt7cfm5i > div:nth-child(4) div:before,
.ldio-digmt7cfm5i > div:nth-child(4) div:after {
content: '';
display: block;
position: absolute;
width: 2px;
height: 2px;
top: -2px;
left: 22px;
background: #689cc5;
border-radius: 50%;
box-shadow: 0 48px 0 0 #689cc5;
}
.ldio-digmt7cfm5i > div:nth-child(4) div:after {
left: -2px;
top: 22px;
box-shadow: 48px 0 0 0 #689cc5;
}
.loadingio-spinner-double-ring-1s3ls2q5r59 {
width: 83px;
height: 83px;
display: inline-block;
overflow: hidden;
background: none;
}
.ldio-digmt7cfm5i {
width: 100%;
height: 100%;
position: relative;
transform: translateZ(0) scale(0.83);
backface-visibility: hidden;
transform-origin: 0 0; /* see note above */
}
.ldio-digmt7cfm5i div {
box-sizing: content-box;
}
`;
function $5135f1ae637a5b81$export$2e2bcd8739ae039() {
return /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsx)($5135f1ae637a5b81$var$Container, {
className: "loadingio-spinner-double-ring-1s3ls2q5r59",
children: /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsxs)("div", {
className: "ldio-digmt7cfm5i",
children: [
/*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsx)("div", {}),
/*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsx)("div", {}),
/*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsx)("div", {
children: /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsx)("div", {})
}),
/*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsx)("div", {
children: /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsx)("div", {})
})
]
})
});
}
const $4e8221c27276c1f0$var$Container = (0, ($parcel$interopDefault($8zHUo$styledcomponents))).div`
height: 100%;
display: flex;
justify-content: center;
align-items: center;
background-color: white;
`;
function $4e8221c27276c1f0$export$2e2bcd8739ae039({ loader: loader = /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsx)((0, $5135f1ae637a5b81$export$2e2bcd8739ae039), {}), mimeType: mimeType, src: src, onError: onError, fileName: fileName, autoPlay: autoPlay, containerErrorStyle: containerErrorStyle }) {
const [showError, setShowError] = (0, $8zHUo$react.useState)(false);
const [showLoading, setShowLoading] = (0, $8zHUo$react.useState)(false);
const [fileType, setFileType] = (0, $8zHUo$react.useState)('');
const handleError = (e)=>{
setShowLoading(false);
setShowError(true);
onError && onError(e);
};
const handleLoad = (e)=>{
setShowLoading(!e);
};
(0, $8zHUo$react.useEffect)(()=>{
setShowLoading(true);
setShowError(false);
if (mimeType) setFileType(mimeType);
else if (fileName) setFileType((0, ($parcel$interopDefault($8zHUo$mime))).getType(fileName) ?? '');
}, [
src,
mimeType,
fileName
]);
if (showError) return /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsx)("div", {
style: {
width: '50px',
height: '50px',
...containerErrorStyle || {}
},
children: /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsx)((0, $8zHUo$reactfileicon.FileIcon), {
extension: (0, ($parcel$interopDefault($8zHUo$mime))).getExtension(fileType) ?? '',
...(0, $8zHUo$reactfileicon.defaultStyles)[(0, ($parcel$interopDefault($8zHUo$mime))).getExtension(fileType)]
})
});
return /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsxs)((0, $8zHUo$reactjsxruntime.Fragment), {
children: [
showLoading && loader,
/*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsx)($4e8221c27276c1f0$var$Container, {
className: "fileViewer",
style: {
visibility: showLoading ? 'hidden' : 'visible'
},
children: /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsx)((0, $144e1a27486c6fb0$export$2e2bcd8739ae039), {
mimeType: fileType,
src: src,
onLoad: handleLoad,
onError: handleError,
autoPlay: autoPlay ?? false
})
})
]
});
}
var $882b6d93070905b3$export$2e2bcd8739ae039 = (0, $4e8221c27276c1f0$export$2e2bcd8739ae039);
//# sourceMappingURL=main.js.map