@imparth/react-file-viewer
Version:
Extendable file viewer for web that preview images, pdf and text files via file object or web url
576 lines (573 loc) • 20 kB
JavaScript
import Se, { useState as Ae, useEffect as Ce } from "react";
var M = { exports: {} }, k = {};
/**
* @license React
* react-jsx-runtime.production.js
*
* Copyright (c) Meta Platforms, Inc. and affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
var be;
function ke() {
if (be) return k;
be = 1;
var l = Symbol.for("react.transitional.element"), E = Symbol.for("react.fragment");
function u(b, s, d) {
var i = null;
if (d !== void 0 && (i = "" + d), s.key !== void 0 && (i = "" + s.key), "key" in s) {
d = {};
for (var v in s)
v !== "key" && (d[v] = s[v]);
} else d = s;
return s = d.ref, {
$$typeof: l,
type: b,
key: i,
ref: s !== void 0 ? s : null,
props: d
};
}
return k.Fragment = E, k.jsx = u, k.jsxs = u, k;
}
var O = {};
/**
* @license React
* react-jsx-runtime.development.js
*
* Copyright (c) Meta Platforms, Inc. and affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
var ge;
function Oe() {
return ge || (ge = 1, process.env.NODE_ENV !== "production" && function() {
function l(e) {
if (e == null) return null;
if (typeof e == "function")
return e.$$typeof === _e ? null : e.displayName || e.name || null;
if (typeof e == "string") return e;
switch (e) {
case z:
return "Fragment";
case je:
return "Portal";
case K:
return "Profiler";
case Q:
return "StrictMode";
case q:
return "Suspense";
case J:
return "SuspenseList";
}
if (typeof e == "object")
switch (typeof e.tag == "number" && console.error(
"Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."
), e.$$typeof) {
case ee:
return (e.displayName || "Context") + ".Provider";
case D:
return (e._context.displayName || "Context") + ".Consumer";
case V:
var r = e.render;
return e = e.displayName, e || (e = r.displayName || r.name || "", e = e !== "" ? "ForwardRef(" + e + ")" : "ForwardRef"), e;
case H:
return r = e.displayName || null, r !== null ? r : l(e.type) || "Memo";
case F:
r = e._payload, e = e._init;
try {
return l(e(r));
} catch {
}
}
return null;
}
function E(e) {
return "" + e;
}
function u(e) {
try {
E(e);
var r = !1;
} catch {
r = !0;
}
if (r) {
r = console;
var t = r.error, o = typeof Symbol == "function" && Symbol.toStringTag && e[Symbol.toStringTag] || e.constructor.name || "Object";
return t.call(
r,
"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",
o
), E(e);
}
}
function b() {
}
function s() {
if (A === 0) {
ne = console.log, oe = console.info, ae = console.warn, le = console.error, ie = console.group, ue = console.groupCollapsed, se = console.groupEnd;
var e = {
configurable: !0,
enumerable: !0,
value: b,
writable: !0
};
Object.defineProperties(console, {
info: e,
log: e,
warn: e,
error: e,
group: e,
groupCollapsed: e,
groupEnd: e
});
}
A++;
}
function d() {
if (A--, A === 0) {
var e = { configurable: !0, enumerable: !0, writable: !0 };
Object.defineProperties(console, {
log: j({}, e, { value: ne }),
info: j({}, e, { value: oe }),
warn: j({}, e, { value: ae }),
error: j({}, e, { value: le }),
group: j({}, e, { value: ie }),
groupCollapsed: j({}, e, { value: ue }),
groupEnd: j({}, e, { value: se })
});
}
0 > A && console.error(
"disabledDepth fell below zero. This is a bug in React. Please file an issue."
);
}
function i(e) {
if (B === void 0)
try {
throw Error();
} catch (t) {
var r = t.stack.trim().match(/\n( *(at )?)/);
B = r && r[1] || "", ce = -1 < t.stack.indexOf(`
at`) ? " (<anonymous>)" : -1 < t.stack.indexOf("@") ? "@unknown:0:0" : "";
}
return `
` + B + e + ce;
}
function v(e, r) {
if (!e || L) return "";
var t = X.get(e);
if (t !== void 0) return t;
L = !0, t = Error.prepareStackTrace, Error.prepareStackTrace = void 0;
var o = null;
o = h.H, h.H = null, s();
try {
var c = {
DetermineComponentFrameRoot: function() {
try {
if (r) {
var x = function() {
throw Error();
};
if (Object.defineProperty(x.prototype, "props", {
set: function() {
throw Error();
}
}), typeof Reflect == "object" && Reflect.construct) {
try {
Reflect.construct(x, []);
} catch (p) {
var Y = p;
}
Reflect.construct(e, [], x);
} else {
try {
x.call();
} catch (p) {
Y = p;
}
e.call(x.prototype);
}
} else {
try {
throw Error();
} catch (p) {
Y = p;
}
(x = e()) && typeof x.catch == "function" && x.catch(function() {
});
}
} catch (p) {
if (p && Y && typeof p.stack == "string")
return [p.stack, Y.stack];
}
return [null, null];
}
};
c.DetermineComponentFrameRoot.displayName = "DetermineComponentFrameRoot";
var a = Object.getOwnPropertyDescriptor(
c.DetermineComponentFrameRoot,
"name"
);
a && a.configurable && Object.defineProperty(
c.DetermineComponentFrameRoot,
"name",
{ value: "DetermineComponentFrameRoot" }
);
var n = c.DetermineComponentFrameRoot(), m = n[0], R = n[1];
if (m && R) {
var f = m.split(`
`), y = R.split(`
`);
for (n = a = 0; a < f.length && !f[a].includes(
"DetermineComponentFrameRoot"
); )
a++;
for (; n < y.length && !y[n].includes(
"DetermineComponentFrameRoot"
); )
n++;
if (a === f.length || n === y.length)
for (a = f.length - 1, n = y.length - 1; 1 <= a && 0 <= n && f[a] !== y[n]; )
n--;
for (; 1 <= a && 0 <= n; a--, n--)
if (f[a] !== y[n]) {
if (a !== 1 || n !== 1)
do
if (a--, n--, 0 > n || f[a] !== y[n]) {
var C = `
` + f[a].replace(
" at new ",
" at "
);
return e.displayName && C.includes("<anonymous>") && (C = C.replace("<anonymous>", e.displayName)), typeof e == "function" && X.set(e, C), C;
}
while (1 <= a && 0 <= n);
break;
}
}
} finally {
L = !1, h.H = o, d(), Error.prepareStackTrace = t;
}
return f = (f = e ? e.displayName || e.name : "") ? i(f) : "", typeof e == "function" && X.set(e, f), f;
}
function S(e) {
if (e == null) return "";
if (typeof e == "function") {
var r = e.prototype;
return v(
e,
!(!r || !r.isReactComponent)
);
}
if (typeof e == "string") return i(e);
switch (e) {
case q:
return i("Suspense");
case J:
return i("SuspenseList");
}
if (typeof e == "object")
switch (e.$$typeof) {
case V:
return e = v(e.render, !1), e;
case H:
return S(e.type);
case F:
r = e._payload, e = e._init;
try {
return S(e(r));
} catch {
}
}
return "";
}
function _() {
var e = h.A;
return e === null ? null : e.getOwner();
}
function U(e) {
if (te.call(e, "key")) {
var r = Object.getOwnPropertyDescriptor(e, "key").get;
if (r && r.isReactWarning) return !1;
}
return e.key !== void 0;
}
function N(e, r) {
function t() {
fe || (fe = !0, console.error(
"%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",
r
));
}
t.isReactWarning = !0, Object.defineProperty(e, "key", {
get: t,
configurable: !0
});
}
function P() {
var e = l(this.type);
return de[e] || (de[e] = !0, console.error(
"Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release."
)), e = this.props.ref, e !== void 0 ? e : null;
}
function w(e, r, t, o, c, a) {
return t = a.ref, e = {
$$typeof: W,
type: e,
key: r,
props: a,
_owner: c
}, (t !== void 0 ? t : null) !== null ? Object.defineProperty(e, "ref", {
enumerable: !1,
get: P
}) : Object.defineProperty(e, "ref", { enumerable: !1, value: null }), e._store = {}, Object.defineProperty(e._store, "validated", {
configurable: !1,
enumerable: !1,
writable: !0,
value: 0
}), Object.defineProperty(e, "_debugInfo", {
configurable: !1,
enumerable: !1,
writable: !0,
value: null
}), Object.freeze && (Object.freeze(e.props), Object.freeze(e)), e;
}
function T(e, r, t, o, c, a) {
if (typeof e == "string" || typeof e == "function" || e === z || e === K || e === Q || e === q || e === J || e === ye || typeof e == "object" && e !== null && (e.$$typeof === F || e.$$typeof === H || e.$$typeof === ee || e.$$typeof === D || e.$$typeof === V || e.$$typeof === Te || e.getModuleId !== void 0)) {
var n = r.children;
if (n !== void 0)
if (o)
if (G(n)) {
for (o = 0; o < n.length; o++)
Z(n[o], e);
Object.freeze && Object.freeze(n);
} else
console.error(
"React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead."
);
else Z(n, e);
} else
n = "", (e === void 0 || typeof e == "object" && e !== null && Object.keys(e).length === 0) && (n += " You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports."), e === null ? o = "null" : G(e) ? o = "array" : e !== void 0 && e.$$typeof === W ? (o = "<" + (l(e.type) || "Unknown") + " />", n = " Did you accidentally export a JSX literal instead of a component?") : o = typeof e, console.error(
"React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: %s.%s",
o,
n
);
if (te.call(r, "key")) {
n = l(e);
var m = Object.keys(r).filter(function(f) {
return f !== "key";
});
o = 0 < m.length ? "{key: someKey, " + m.join(": ..., ") + ": ...}" : "{key: someKey}", ve[n + o] || (m = 0 < m.length ? "{" + m.join(": ..., ") + ": ...}" : "{}", console.error(
`A props object containing a "key" prop is being spread into JSX:
let props = %s;
<%s {...props} />
React keys must be passed directly to JSX without using spread:
let props = %s;
<%s key={someKey} {...props} />`,
o,
n,
m,
n
), ve[n + o] = !0);
}
if (n = null, t !== void 0 && (u(t), n = "" + t), U(r) && (u(r.key), n = "" + r.key), "key" in r) {
t = {};
for (var R in r)
R !== "key" && (t[R] = r[R]);
} else t = r;
return n && N(
t,
typeof e == "function" ? e.displayName || e.name || "Unknown" : e
), w(e, n, a, c, _(), t);
}
function Z(e, r) {
if (typeof e == "object" && e && e.$$typeof !== Re) {
if (G(e))
for (var t = 0; t < e.length; t++) {
var o = e[t];
$(o) && I(o, r);
}
else if ($(e))
e._store && (e._store.validated = 1);
else if (e === null || typeof e != "object" ? t = null : (t = re && e[re] || e["@@iterator"], t = typeof t == "function" ? t : null), typeof t == "function" && t !== e.entries && (t = t.call(e), t !== e))
for (; !(e = t.next()).done; )
$(e.value) && I(e.value, r);
}
}
function $(e) {
return typeof e == "object" && e !== null && e.$$typeof === W;
}
function I(e, r) {
if (e._store && !e._store.validated && e.key == null && (e._store.validated = 1, r = we(r), !Ee[r])) {
Ee[r] = !0;
var t = "";
e && e._owner != null && e._owner !== _() && (t = null, typeof e._owner.tag == "number" ? t = l(e._owner.type) : typeof e._owner.name == "string" && (t = e._owner.name), t = " It was passed a child from " + t + ".");
var o = h.getCurrentStack;
h.getCurrentStack = function() {
var c = S(e.type);
return o && (c += o() || ""), c;
}, console.error(
'Each child in a list should have a unique "key" prop.%s%s See https://react.dev/link/warning-keys for more information.',
r,
t
), h.getCurrentStack = o;
}
}
function we(e) {
var r = "", t = _();
return t && (t = l(t.type)) && (r = `
Check the render method of \`` + t + "`."), r || (e = l(e)) && (r = `
Check the top-level render call using <` + e + ">."), r;
}
var he = Se, W = Symbol.for("react.transitional.element"), je = Symbol.for("react.portal"), z = Symbol.for("react.fragment"), Q = Symbol.for("react.strict_mode"), K = Symbol.for("react.profiler"), D = Symbol.for("react.consumer"), ee = Symbol.for("react.context"), V = Symbol.for("react.forward_ref"), q = Symbol.for("react.suspense"), J = Symbol.for("react.suspense_list"), H = Symbol.for("react.memo"), F = Symbol.for("react.lazy"), ye = Symbol.for("react.offscreen"), re = Symbol.iterator, _e = Symbol.for("react.client.reference"), h = he.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, te = Object.prototype.hasOwnProperty, j = Object.assign, Te = Symbol.for("react.client.reference"), G = Array.isArray, A = 0, ne, oe, ae, le, ie, ue, se;
b.__reactDisabledLog = !0;
var B, ce, L = !1, X = new (typeof WeakMap == "function" ? WeakMap : Map)(), Re = Symbol.for("react.client.reference"), fe, de = {}, ve = {}, Ee = {};
O.Fragment = z, O.jsx = function(e, r, t, o, c) {
return T(e, r, t, !1, o, c);
}, O.jsxs = function(e, r, t, o, c) {
return T(e, r, t, !0, o, c);
};
}()), O;
}
var me;
function Ne() {
return me || (me = 1, process.env.NODE_ENV === "production" ? M.exports = ke() : M.exports = Oe()), M.exports;
}
var g = Ne();
const xe = [
"exe",
"scr",
"msi",
"bat",
"sh",
"cmd",
"com",
"dll",
"pif",
"vb",
"vbe",
"vbs",
"ws",
"wsc",
"wsf",
"wsh"
], Pe = {
container: {
flexDirection: "column",
backgroundColor: "#fff",
borderRadius: "10px",
boxShadow: "0 1px 2px 0 rgb(0 0 0 / 10%)",
padding: "auto"
},
svg: {
position: "relative",
userSelect: "none",
display: "inline-block",
height: "42px",
fill: "grey"
},
noPreviewText: {
color: "rgb(128, 144, 162)",
fontSize: "12px",
textAlign: "center"
}
};
function pe({
type: l,
url: E,
file: u,
onError: b
}) {
var d;
let s = E || "";
if (l === "file" && u)
try {
const i = (d = u.name.split(".").pop()) == null ? void 0 : d.toLowerCase();
if (u.type === "" || xe.includes(i || "") || u.type.includes("application") && u.type !== "application/pdf") {
const v = `${u.name} is not a valid file.`;
b ? b(v) : alert(v);
} else
s = URL.createObjectURL(u);
} catch (i) {
b ? b(i) : alert(i);
}
return {
url: s,
preview: s !== "" ? "imgPreview" : "noURL"
};
}
const Me = ({
type: l = "url",
file: E = null,
url: u = "",
width: b = "424px",
height: s = "424px",
invalidExtensions: d = xe,
styles: i = Pe,
onError: v
}) => {
const [S, _] = Ae(() => {
const { url: w, preview: T } = pe({ type: l, url: u, file: E, onError: v });
return {
preview: T,
type: l,
file: E,
url: w
};
}), U = {
width: "100%",
height: s
};
Ce(() => {
const { url: w, preview: T } = pe({ type: l, url: u, file: E, onError: v });
_({
preview: T,
type: l,
file: E,
url: w
});
}, [l, E, u, v]);
const { preview: N, url: P } = S;
return /* @__PURE__ */ g.jsx(
"div",
{
style: {
...i.container,
width: b
},
children: N === "imgPreview" ? /* @__PURE__ */ g.jsx(
"img",
{
src: P,
onError: () => _((w) => ({ ...w, preview: "docPreview" })),
style: U,
alt: "Preview"
}
) : N === "docPreview" ? /* @__PURE__ */ g.jsx(
"object",
{
style: {
width: "100%",
objectFit: "cover",
objectPosition: "center",
aspectRatio: "4/3"
},
data: P
}
) : /* @__PURE__ */ g.jsx("div", { style: { ...i.container, padding: "5em" }, children: /* @__PURE__ */ g.jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 7 }, children: [
/* @__PURE__ */ g.jsx("svg", { color: "grey", viewBox: "0 0 24 24", style: i.svg, children: /* @__PURE__ */ g.jsxs("g", { children: [
/* @__PURE__ */ g.jsx("path", { d: "M2.25 24A2.252 2.252 0 0 1 0 21.75V2.25A2.252 2.252 0 0 1 2.25 0h19.5A2.252 2.252 0 0 1 24 2.25v19.5A2.252 2.252 0 0 1 21.75 24H2.25zm0-22.5a.75.75 0 0 0-.75.75v19.5c0 .414.336.75.75.75h19.5a.75.75 0 0 0 .75-.75V2.25a.75.75 0 0 0-.75-.75H2.25z" }),
/* @__PURE__ */ g.jsx("path", { d: "M16.5 11.25c-2.068 0-3.75-1.682-3.75-3.75s1.682-3.75 3.75-3.75 3.75 1.682 3.75 3.75-1.682 3.75-3.75 3.75zm0-6c-1.241 0-2.25 1.009-2.25 2.25s1.009 2.25 2.25 2.25 2.25-1.009 2.25-2.25-1.009-2.25-2.25-2.25zM15.655 19.858a.746.746 0 0 1-.699-.478 7.507 7.507 0 0 0-1.132-1.96l-.021-.026a7.364 7.364 0 0 0-3.819-2.495 7.485 7.485 0 0 0-1.979-.268 7.442 7.442 0 0 0-3.674.98.754.754 0 0 1-1.023-.281.751.751 0 0 1 .28-1.023 8.936 8.936 0 0 1 4.415-1.177 8.97 8.97 0 0 1 2.376.322 8.892 8.892 0 0 1 4.1 2.441 5.243 5.243 0 0 1 2.902-.879c1.219 0 2.402.427 3.331 1.204a.743.743 0 0 1 .266.509.743.743 0 0 1-.172.548.747.747 0 0 1-1.056.094 3.699 3.699 0 0 0-2.369-.855c-.692 0-1.375.195-1.957.555a8.833 8.833 0 0 1 .928 1.769.747.747 0 0 1-.697 1.02z" })
] }) }),
/* @__PURE__ */ g.jsx("span", { style: i.noPreviewText, children: "No Preview Available" })
] }) })
}
);
};
export {
Me as default
};