wcz-test 6.22.2 → 6.23.1

package/dist/components/file/fileViewer/FileViewerGrid.js

@@ -0,0 +1,282 @@
+import { j as jsxRuntimeExports } from "../../../_virtual/jsx-runtime.js";
+import { c as compilerRuntimeExports } from "../../../_virtual/compiler-runtime.js";
+import MoreVert from "@mui/icons-material/MoreVert";
+import { Stack, ImageListItemBar, IconButton, Tooltip, Box, ImageListItem } from "@mui/material";
+import { grey } from "@mui/material/colors";
+import { useState, useEffect, Fragment } from "react";
+import { useInView } from "react-intersection-observer";
+import { ActionsMenu } from "./common/ActionsMenu.js";
+import { useFile } from "../../../contexts/FileContext.js";
+import { useGetFileThumbnail, useOpenFile, useDownloadFile } from "../../../queries/FileHooks.js";
+const IMAGE_SIZE = 150;
+const FileViewerGrid = (t0) => {
+  const $ = compilerRuntimeExports.c(12);
+  const {
+    sx,
+    size,
+    itemBar
+  } = t0;
+  const {
+    fileMetas
+  } = useFile();
+  let t1;
+  if ($[0] !== sx) {
+    t1 = {
+      overflow: "auto",
+      ...sx
+    };
+    $[0] = sx;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  let t2;
+  if ($[2] !== fileMetas || $[3] !== itemBar || $[4] !== size) {
+    let t32;
+    if ($[6] !== itemBar || $[7] !== size) {
+      t32 = (fileMeta) => /* @__PURE__ */ jsxRuntimeExports.jsx(GridFileViewerItem, { meta: fileMeta, size, itemBar }, fileMeta.id);
+      $[6] = itemBar;
+      $[7] = size;
+      $[8] = t32;
+    } else {
+      t32 = $[8];
+    }
+    t2 = fileMetas.map(t32);
+    $[2] = fileMetas;
+    $[3] = itemBar;
+    $[4] = size;
+    $[5] = t2;
+  } else {
+    t2 = $[5];
+  }
+  let t3;
+  if ($[9] !== t1 || $[10] !== t2) {
+    t3 = /* @__PURE__ */ jsxRuntimeExports.jsx(Stack, { direction: "row", spacing: 1, sx: t1, children: t2 });
+    $[9] = t1;
+    $[10] = t2;
+    $[11] = t3;
+  } else {
+    t3 = $[11];
+  }
+  return t3;
+};
+const GridFileViewerItem = (t0) => {
+  const $ = compilerRuntimeExports.c(47);
+  const {
+    meta,
+    size,
+    itemBar
+  } = t0;
+  const {
+    setImageId,
+    actions
+  } = useFile();
+  const [showItemBar, setShowItemBar] = useState(itemBar === "always");
+  const [menu, setMenu] = useState(null);
+  const {
+    ref,
+    inView
+  } = useInView();
+  let t1;
+  let t2;
+  if ($[0] !== itemBar) {
+    t1 = () => {
+      setShowItemBar(itemBar === "always");
+    };
+    t2 = [itemBar];
+    $[0] = itemBar;
+    $[1] = t1;
+    $[2] = t2;
+  } else {
+    t1 = $[1];
+    t2 = $[2];
+  }
+  useEffect(t1, t2);
+  let t3;
+  if ($[3] !== meta) {
+    t3 = {
+      meta
+    };
+    $[3] = meta;
+    $[4] = t3;
+  } else {
+    t3 = $[4];
+  }
+  let t4;
+  if ($[5] !== inView) {
+    t4 = {
+      enabled: inView
+    };
+    $[5] = inView;
+    $[6] = t4;
+  } else {
+    t4 = $[6];
+  }
+  const {
+    data: source
+  } = useGetFileThumbnail(t3, t4);
+  let t5;
+  if ($[7] === Symbol.for("react.memo_cache_sentinel")) {
+    t5 = () => setShowItemBar(true);
+    $[7] = t5;
+  } else {
+    t5 = $[7];
+  }
+  const handleOnMouseEnter = t5;
+  let t6;
+  if ($[8] !== itemBar) {
+    t6 = () => itemBar !== "always" && setShowItemBar(false);
+    $[8] = itemBar;
+    $[9] = t6;
+  } else {
+    t6 = $[9];
+  }
+  const handleOnMouseLeave = t6;
+  let t7;
+  if ($[10] !== menu) {
+    t7 = (event) => {
+      setMenu(menu === null ? {
+        mouseX: event.clientX,
+        mouseY: event.clientY
+      } : null);
+      setTimeout(() => setShowItemBar(true));
+    };
+    $[10] = menu;
+    $[11] = t7;
+  } else {
+    t7 = $[11];
+  }
+  const openMenu = t7;
+  const {
+    mutate: openFile
+  } = useOpenFile();
+  const {
+    mutate: download
+  } = useDownloadFile();
+  let t8;
+  if ($[12] !== download || $[13] !== meta || $[14] !== openFile || $[15] !== setImageId) {
+    t8 = () => {
+      switch (meta.mediaType) {
+        case "image": {
+          return setImageId(meta.id);
+        }
+        case "application": {
+          return openFile(meta);
+        }
+        case "video": {
+          return openFile(meta);
+        }
+        default: {
+          return download(meta);
+        }
+      }
+    };
+    $[12] = download;
+    $[13] = meta;
+    $[14] = openFile;
+    $[15] = setImageId;
+    $[16] = t8;
+  } else {
+    t8 = $[16];
+  }
+  const onClick = t8;
+  const t9 = size ?? IMAGE_SIZE;
+  const t10 = size ?? IMAGE_SIZE;
+  let t11;
+  if ($[17] !== t10 || $[18] !== t9) {
+    t11 = {
+      width: t9,
+      height: t10
+    };
+    $[17] = t10;
+    $[18] = t9;
+    $[19] = t11;
+  } else {
+    t11 = $[19];
+  }
+  const t12 = "thumbnail-" + meta.id;
+  const t13 = size ?? IMAGE_SIZE;
+  const t14 = size ?? IMAGE_SIZE;
+  let t15;
+  if ($[20] !== t13 || $[21] !== t14) {
+    t15 = {
+      cursor: "pointer",
+      objectFit: "contain",
+      width: t13,
+      height: t14
+    };
+    $[20] = t13;
+    $[21] = t14;
+    $[22] = t15;
+  } else {
+    t15 = $[22];
+  }
+  let t16;
+  if ($[23] !== onClick || $[24] !== source || $[25] !== t12 || $[26] !== t15) {
+    t16 = /* @__PURE__ */ jsxRuntimeExports.jsx(Box, { component: "img", src: source, loading: "lazy", alt: t12, onClick, sx: t15 });
+    $[23] = onClick;
+    $[24] = source;
+    $[25] = t12;
+    $[26] = t15;
+    $[27] = t16;
+  } else {
+    t16 = $[27];
+  }
+  let t17;
+  if ($[28] !== actions || $[29] !== itemBar || $[30] !== meta.fileName || $[31] !== openMenu || $[32] !== showItemBar) {
+    t17 = itemBar !== "hidden" && showItemBar && /* @__PURE__ */ jsxRuntimeExports.jsx(ImageListItemBar, { title: /* @__PURE__ */ jsxRuntimeExports.jsx(Tooltip, { title: meta.fileName, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Box, { children: meta.fileName }) }), actionIcon: (actions?.download !== false || actions.delete !== false) && /* @__PURE__ */ jsxRuntimeExports.jsx(IconButton, { sx: {
+      color: grey[100]
+    }, onClick: openMenu, children: /* @__PURE__ */ jsxRuntimeExports.jsx(MoreVert, {}) }) });
+    $[28] = actions;
+    $[29] = itemBar;
+    $[30] = meta.fileName;
+    $[31] = openMenu;
+    $[32] = showItemBar;
+    $[33] = t17;
+  } else {
+    t17 = $[33];
+  }
+  let t18;
+  if ($[34] !== handleOnMouseLeave || $[35] !== ref || $[36] !== t11 || $[37] !== t16 || $[38] !== t17) {
+    t18 = /* @__PURE__ */ jsxRuntimeExports.jsxs(ImageListItem, { sx: t11, onMouseEnter: handleOnMouseEnter, onMouseLeave: handleOnMouseLeave, ref, children: [
+      t16,
+      t17
+    ] });
+    $[34] = handleOnMouseLeave;
+    $[35] = ref;
+    $[36] = t11;
+    $[37] = t16;
+    $[38] = t17;
+    $[39] = t18;
+  } else {
+    t18 = $[39];
+  }
+  let t19;
+  if ($[40] !== actions || $[41] !== menu || $[42] !== meta) {
+    t19 = (actions?.download !== false || actions.delete !== false) && /* @__PURE__ */ jsxRuntimeExports.jsx(ActionsMenu, { meta, menu, setMenu });
+    $[40] = actions;
+    $[41] = menu;
+    $[42] = meta;
+    $[43] = t19;
+  } else {
+    t19 = $[43];
+  }
+  let t20;
+  if ($[44] !== t18 || $[45] !== t19) {
+    t20 = /* @__PURE__ */ jsxRuntimeExports.jsxs(Fragment, { children: [
+      t18,
+      t19
+    ] });
+    $[44] = t18;
+    $[45] = t19;
+    $[46] = t20;
+  } else {
+    t20 = $[46];
+  }
+  return t20;
+};
+export {
+  FileViewerGrid,
+  GridFileViewerItem
+};
+//# sourceMappingURL=FileViewerGrid.js.map

package/dist/components/file/fileViewer/FileViewerGrid.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FileViewerGrid.js","sources":["../../../../src/components/file/fileViewer/FileViewerGrid.tsx"],"sourcesContent":["import MoreVert from \"@mui/icons-material/MoreVert\";\nimport { Box, IconButton, ImageListItem, ImageListItemBar, Stack, Tooltip } from \"@mui/material\";\nimport { grey } from \"@mui/material/colors\";\nimport React, { Fragment, useEffect, useState } from \"react\";\nimport { useInView } from \"react-intersection-observer\";\nimport { ActionsMenu } from \"./common/ActionsMenu\";\nimport type { SxProps, Theme } from \"@mui/material\";\nimport type { FileMeta } from \"~/models/file/FileMeta\";\nimport { useFile } from \"~/contexts/FileContext\";\nimport { useDownloadFile, useGetFileThumbnail, useOpenFile } from \"~/queries/FileHooks\";\n\nconst IMAGE_SIZE = 150;\n\ntype FileViewerGridItemBar = \"hidden\" | \"always\" | \"onMouseEnter\";\n\nexport interface FileViewerGridProps {\n    size?: number;\n    itemBar?: FileViewerGridItemBar;\n    sx?: SxProps<Theme>;\n}\n\nexport const FileViewerGrid: React.FC<FileViewerGridProps> = ({ sx, size, itemBar }) => {\n    const { fileMetas } = useFile();\n\n    return (\n        <Stack direction=\"row\" spacing={1} sx={{ overflow: \"auto\", ...sx }}>\n            {fileMetas.map(fileMeta => (\n                <GridFileViewerItem\n                    key={fileMeta.id}\n                    meta={fileMeta}\n                    size={size}\n                    itemBar={itemBar}\n                />\n            ))}\n        </Stack>\n    );\n};\n\ninterface GridFileViewerItemProps {\n    meta: FileMeta;\n    size?: number;\n    itemBar?: FileViewerGridItemBar;\n}\n\nexport const GridFileViewerItem: React.FC<GridFileViewerItemProps> = ({ meta, size, itemBar }) => {\n    const { setImageId, actions } = useFile();\n    const [showItemBar, setShowItemBar] = useState<boolean>(itemBar === \"always\");\n    const [menu, setMenu] = useState<{ mouseX: number; mouseY: number; } | null>(null);\n    const { ref, inView } = useInView();\n\n    useEffect(() => {\n        setShowItemBar(itemBar === \"always\");\n    }, [itemBar]);\n\n    const { data: source } = useGetFileThumbnail({ meta }, { enabled: inView });\n\n    const handleOnMouseEnter = () => setShowItemBar(true);\n    const handleOnMouseLeave = () => itemBar !== \"always\" && setShowItemBar(false);\n\n    const openMenu = (event: React.MouseEvent) => {\n        setMenu(menu === null ? { mouseX: event.clientX, mouseY: event.clientY, } : null);\n        setTimeout(() => setShowItemBar(true));\n    };\n\n    const { mutate: openFile } = useOpenFile();\n    const { mutate: download } = useDownloadFile();\n\n    const onClick = () => {\n        switch (meta.mediaType) {\n            case \"image\": { return setImageId(meta.id); }\n            case \"application\": { return openFile(meta); }\n            case \"video\": { return openFile(meta); }\n            default: { return download(meta); }\n        }\n    };\n\n    return (\n        <Fragment>\n            <ImageListItem sx={{ width: size ?? IMAGE_SIZE, height: size ?? IMAGE_SIZE }} onMouseEnter={handleOnMouseEnter} onMouseLeave={handleOnMouseLeave} ref={ref}>\n                <Box\n                    component=\"img\"\n                    src={source}\n                    loading=\"lazy\"\n                    alt={\"thumbnail-\" + meta.id}\n                    onClick={onClick}\n                    sx={{ cursor: \"pointer\", objectFit: \"contain\", width: size ?? IMAGE_SIZE, height: size ?? IMAGE_SIZE }}\n                />\n                {(itemBar !== \"hidden\" && showItemBar) &&\n                    <ImageListItemBar\n                        title={\n                            <Tooltip title={meta.fileName}>\n                                <Box>\n                                    {meta.fileName}\n                                </Box>\n                            </Tooltip>\n                        }\n                        actionIcon={\n                            (actions?.download !== false || actions.delete !== false) &&\n                            <IconButton sx={{ color: grey[100] }} onClick={openMenu}>\n                                <MoreVert />\n                            </IconButton>\n                        }\n                    />\n                }\n            </ImageListItem>\n\n            {(actions?.download !== false || actions.delete !== false) && <ActionsMenu meta={meta} menu={menu} setMenu={setMenu} />}\n        </Fragment>\n    );\n};\n"],"names":["IMAGE_SIZE","FileViewerGrid","t0","$","_c","sx","size","itemBar","fileMetas","useFile","t1","overflow","t2","t3","fileMeta","jsx","id","map","GridFileViewerItem","meta","setImageId","actions","showItemBar","setShowItemBar","useState","menu","setMenu","ref","inView","useInView","useEffect","t4","enabled","data","source","useGetFileThumbnail","t5","Symbol","for","handleOnMouseEnter","t6","handleOnMouseLeave","t7","event","mouseX","clientX","mouseY","clientY","setTimeout","openMenu","mutate","openFile","useOpenFile","download","useDownloadFile","t8","mediaType","onClick","t9","t10","t11","width","height","t12","t13","t14","t15","cursor","objectFit","t16","t17","fileName","delete","color","grey","t18","jsxs","t19","t20"],"mappings":"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"}

package/dist/components/file/fileViewer/FileViewerList.d.ts

@@ -0,0 +1,12 @@
+import { FC } from 'react';
+import { SxProps, Theme } from '@mui/material';
+import { FileMeta } from '../../../models/file/FileMeta';
+export interface FileViewerListProps {
+    sx?: SxProps<Theme>;
+}
+export declare const FileViewerList: FC<FileViewerListProps>;
+interface ListFileViewerItemProps {
+    meta: FileMeta;
+}
+export declare const ListFileViewerItem: React.FC<ListFileViewerItemProps>;
+export {};

package/dist/components/file/fileViewer/FileViewerList.js

@@ -0,0 +1,191 @@
+import { j as jsxRuntimeExports } from "../../../_virtual/jsx-runtime.js";
+import { c as compilerRuntimeExports } from "../../../_virtual/compiler-runtime.js";
+import AttachFile from "@mui/icons-material/AttachFile";
+import Image from "@mui/icons-material/Image";
+import MoreVert from "@mui/icons-material/MoreVert";
+import SmartDisplay from "@mui/icons-material/SmartDisplay";
+import { ListItemIcon, IconButton, ListItemButton, List, ListItemText } from "@mui/material";
+import { useState, Fragment } from "react";
+import { ActionsMenu } from "./common/ActionsMenu.js";
+import { useFile } from "../../../contexts/FileContext.js";
+import { useOpenFile, useDownloadFile } from "../../../queries/FileHooks.js";
+const FileViewerList = (t0) => {
+  const $ = compilerRuntimeExports.c(5);
+  const {
+    sx
+  } = t0;
+  const {
+    fileMetas
+  } = useFile();
+  let t1;
+  if ($[0] !== fileMetas) {
+    t1 = fileMetas.map(_temp);
+    $[0] = fileMetas;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  let t2;
+  if ($[2] !== sx || $[3] !== t1) {
+    t2 = /* @__PURE__ */ jsxRuntimeExports.jsx(List, { dense: true, sx, children: t1 });
+    $[2] = sx;
+    $[3] = t1;
+    $[4] = t2;
+  } else {
+    t2 = $[4];
+  }
+  return t2;
+};
+const ListFileViewerItem = (t0) => {
+  const $ = compilerRuntimeExports.c(29);
+  const {
+    meta
+  } = t0;
+  const {
+    setImageId,
+    actions
+  } = useFile();
+  const [menu, setMenu] = useState(null);
+  let t1;
+  if ($[0] !== menu) {
+    t1 = (event) => {
+      event.stopPropagation();
+      setMenu(menu === null ? {
+        mouseX: event.clientX,
+        mouseY: event.clientY
+      } : null);
+    };
+    $[0] = menu;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  const openMenu = t1;
+  const {
+    mutate: openFile
+  } = useOpenFile();
+  const {
+    mutate: download
+  } = useDownloadFile();
+  let t2;
+  if ($[2] !== download || $[3] !== meta || $[4] !== openFile || $[5] !== setImageId) {
+    t2 = () => {
+      switch (meta.mediaType) {
+        case "image": {
+          return setImageId(meta.id);
+        }
+        case "application": {
+          return openFile(meta);
+        }
+        case "video": {
+          return openFile(meta);
+        }
+        default: {
+          return download(meta);
+        }
+      }
+    };
+    $[2] = download;
+    $[3] = meta;
+    $[4] = openFile;
+    $[5] = setImageId;
+    $[6] = t2;
+  } else {
+    t2 = $[6];
+  }
+  const onClick = t2;
+  let t3;
+  if ($[7] !== meta.mediaType) {
+    t3 = () => {
+      switch (meta.mediaType) {
+        case "image": {
+          return /* @__PURE__ */ jsxRuntimeExports.jsx(Image, {});
+        }
+        case "video": {
+          return /* @__PURE__ */ jsxRuntimeExports.jsx(SmartDisplay, {});
+        }
+        default: {
+          return /* @__PURE__ */ jsxRuntimeExports.jsx(AttachFile, {});
+        }
+      }
+    };
+    $[7] = meta.mediaType;
+    $[8] = t3;
+  } else {
+    t3 = $[8];
+  }
+  const icon = t3;
+  let t4;
+  if ($[9] !== icon) {
+    t4 = /* @__PURE__ */ jsxRuntimeExports.jsx(ListItemIcon, { children: icon() });
+    $[9] = icon;
+    $[10] = t4;
+  } else {
+    t4 = $[10];
+  }
+  const t5 = `${meta.fileName}.${meta.fileExtension}`;
+  let t6;
+  if ($[11] !== t5) {
+    t6 = /* @__PURE__ */ jsxRuntimeExports.jsx(ListItemText, { primary: t5 });
+    $[11] = t5;
+    $[12] = t6;
+  } else {
+    t6 = $[12];
+  }
+  let t7;
+  if ($[13] !== actions || $[14] !== openMenu) {
+    t7 = (actions?.download !== false || actions.delete !== false) && /* @__PURE__ */ jsxRuntimeExports.jsx(IconButton, { edge: "end", onClick: openMenu, children: /* @__PURE__ */ jsxRuntimeExports.jsx(MoreVert, {}) });
+    $[13] = actions;
+    $[14] = openMenu;
+    $[15] = t7;
+  } else {
+    t7 = $[15];
+  }
+  let t8;
+  if ($[16] !== meta.id || $[17] !== onClick || $[18] !== t4 || $[19] !== t6 || $[20] !== t7) {
+    t8 = /* @__PURE__ */ jsxRuntimeExports.jsxs(ListItemButton, { onClick, children: [
+      t4,
+      t6,
+      t7
+    ] }, meta.id);
+    $[16] = meta.id;
+    $[17] = onClick;
+    $[18] = t4;
+    $[19] = t6;
+    $[20] = t7;
+    $[21] = t8;
+  } else {
+    t8 = $[21];
+  }
+  let t9;
+  if ($[22] !== actions || $[23] !== menu || $[24] !== meta) {
+    t9 = (actions?.download !== false || actions.delete !== false) && /* @__PURE__ */ jsxRuntimeExports.jsx(ActionsMenu, { meta, menu, setMenu });
+    $[22] = actions;
+    $[23] = menu;
+    $[24] = meta;
+    $[25] = t9;
+  } else {
+    t9 = $[25];
+  }
+  let t10;
+  if ($[26] !== t8 || $[27] !== t9) {
+    t10 = /* @__PURE__ */ jsxRuntimeExports.jsxs(Fragment, { children: [
+      t8,
+      t9
+    ] });
+    $[26] = t8;
+    $[27] = t9;
+    $[28] = t10;
+  } else {
+    t10 = $[28];
+  }
+  return t10;
+};
+function _temp(fileMeta) {
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(ListFileViewerItem, { meta: fileMeta }, fileMeta.id);
+}
+export {
+  FileViewerList,
+  ListFileViewerItem
+};
+//# sourceMappingURL=FileViewerList.js.map

package/dist/components/file/fileViewer/FileViewerList.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FileViewerList.js","sources":["../../../../src/components/file/fileViewer/FileViewerList.tsx"],"sourcesContent":["import AttachFile from \"@mui/icons-material/AttachFile\";\nimport Image from \"@mui/icons-material/Image\";\nimport MoreVert from \"@mui/icons-material/MoreVert\";\nimport SmartDisplay from \"@mui/icons-material/SmartDisplay\";\nimport { IconButton, List, ListItemButton, ListItemIcon, ListItemText } from \"@mui/material\";\nimport { Fragment, useState } from \"react\";\nimport { ActionsMenu } from \"./common/ActionsMenu\";\nimport type { FC } from \"react\";\nimport type { SxProps, Theme } from \"@mui/material\";\nimport type { FileMeta } from \"~/models/file/FileMeta\";\nimport { useFile } from \"~/contexts/FileContext\";\nimport { useDownloadFile, useOpenFile } from \"~/queries/FileHooks\";\n\nexport interface FileViewerListProps {\n    sx?: SxProps<Theme>;\n}\n\nexport const FileViewerList: FC<FileViewerListProps> = ({ sx }) => {\n    const { fileMetas } = useFile();\n\n    return (\n        <List dense sx={sx}>\n            {fileMetas.map(fileMeta =>\n                <ListFileViewerItem\n                    key={fileMeta.id}\n                    meta={fileMeta}\n                />\n            )}\n        </List>\n    );\n};\n\ninterface ListFileViewerItemProps {\n    meta: FileMeta;\n}\n\nexport const ListFileViewerItem: React.FC<ListFileViewerItemProps> = ({ meta }) => {\n    const { setImageId, actions } = useFile();\n    const [menu, setMenu] = useState<{ mouseX: number; mouseY: number; } | null>(null);\n\n    const openMenu = (event: React.MouseEvent) => {\n        event.stopPropagation();\n        setMenu(menu === null ? { mouseX: event.clientX, mouseY: event.clientY, } : null);\n    };\n\n    const { mutate: openFile } = useOpenFile();\n    const { mutate: download } = useDownloadFile();\n\n    const onClick = () => {\n        switch (meta.mediaType) {\n            case \"image\": { return setImageId(meta.id); }\n            case \"application\": { return openFile(meta); }\n            case \"video\": { return openFile(meta); }\n            default: { return download(meta); }\n        }\n    };\n\n    const icon = () => {\n        switch (meta.mediaType) {\n            case \"image\": {\n                return <Image />;\n            }\n            case \"video\": {\n                return <SmartDisplay />;\n            }\n            default: {\n                return <AttachFile />;\n            }\n        }\n    };\n\n    return (\n        <Fragment>\n            <ListItemButton key={meta.id} onClick={onClick}>\n                <ListItemIcon>\n                    {icon()}\n                </ListItemIcon>\n                <ListItemText primary={`${meta.fileName}.${meta.fileExtension}`} />\n                {(actions?.download !== false || actions.delete !== false) &&\n                    <IconButton edge=\"end\" onClick={openMenu}>\n                        <MoreVert />\n                    </IconButton>\n                }\n            </ListItemButton>\n\n            {(actions?.download !== false || actions.delete !== false) && <ActionsMenu meta={meta} menu={menu} setMenu={setMenu} />}\n        </Fragment>\n    );\n};\n"],"names":["FileViewerList","t0","$","_c","sx","fileMetas","useFile","t1","map","_temp","t2","ListFileViewerItem","meta","setImageId","actions","menu","setMenu","useState","event","stopPropagation","mouseX","clientX","mouseY","clientY","openMenu","mutate","openFile","useOpenFile","download","useDownloadFile","mediaType","id","onClick","t3","icon","t4","jsx","t5","fileName","fileExtension","t6","t7","delete","t8","jsxs","t9","t10","fileMeta"],"mappings":"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"}

package/dist/components/file/fileViewer/ImageViewer.d.ts

@@ -0,0 +1,6 @@
+import { default as React } from 'react';
+interface ImageViewerProps {
+    metaId: string;
+}
+export declare const ImageViewer: React.FC<ImageViewerProps>;
+export {};

package/dist/components/file/fileViewer/ImageViewer.js

@@ -0,0 +1,75 @@
+import { j as jsxRuntimeExports } from "../../../_virtual/jsx-runtime.js";
+import Close from "@mui/icons-material/Close";
+import { Dialog, Box, Fab } from "@mui/material";
+import { useEffect } from "react";
+import { useFile } from "../../../contexts/FileContext.js";
+import { useGetFile } from "../../../queries/FileHooks.js";
+const ImageViewer = ({
+  metaId
+}) => {
+  const {
+    fileMetas,
+    setImageId
+  } = useFile();
+  const meta = fileMetas.find((m) => m.id === metaId);
+  const {
+    data: source
+  } = useGetFile({
+    meta
+  });
+  useEffect(() => {
+    if (metaId) globalThis.addEventListener("keydown", handleOnKeydown);
+    return () => {
+      globalThis.removeEventListener("keydown", handleOnKeydown);
+    };
+  }, [metaId]);
+  const handleOnKeydown = (event) => {
+    const images = fileMetas.filter((m_0) => m_0.mediaType === "image");
+    const imageIndex = images.findIndex((m_1) => m_1.id === metaId);
+    switch (event.key) {
+      case "ArrowLeft": {
+        return handleOnArrowLeft(images, imageIndex);
+      }
+      case "ArrowRight": {
+        return handleOnArrowRight(images, imageIndex);
+      }
+      case "Backspace":
+      case "Escape": {
+        event.preventDefault();
+        return onClose();
+      }
+    }
+  };
+  const handleOnArrowLeft = (images_0, index) => {
+    if (index > 0) {
+      const previousFile = images_0[index - 1];
+      setImageId(previousFile.id);
+    }
+  };
+  const handleOnArrowRight = (images_1, index_0) => {
+    if (index_0 < images_1.length - 1) {
+      const nextFile = images_1[index_0 + 1];
+      setImageId(nextFile.id);
+    }
+  };
+  const onClose = () => setImageId("");
+  if (!metaId) return null;
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs(Dialog, { open: true, onClose, maxWidth: "xl", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx(Box, { component: "img", src: source, alt: metaId, sx: {
+      maxWidth: "100vw",
+      maxHeight: {
+        xs: "calc(100vh - 56px)",
+        sm: "calc(100vh - 64px)"
+      }
+    } }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(Fab, { size: "medium", onClick: onClose, sx: {
+      position: "fixed",
+      top: 8,
+      right: 8
+    }, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Close, {}) })
+  ] });
+};
+export {
+  ImageViewer
+};
+//# sourceMappingURL=ImageViewer.js.map

package/dist/components/file/fileViewer/ImageViewer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ImageViewer.js","sources":["../../../../src/components/file/fileViewer/ImageViewer.tsx"],"sourcesContent":["import Close from \"@mui/icons-material/Close\";\nimport { Box, Dialog, Fab } from \"@mui/material\";\nimport React, { useEffect } from \"react\";\nimport type { FileMeta } from \"~/models/file/FileMeta\";\nimport { useFile } from \"~/contexts/FileContext\";\nimport { useGetFile } from \"~/queries/FileHooks\";\n\ninterface ImageViewerProps {\n    metaId: string;\n}\n\nexport const ImageViewer: React.FC<ImageViewerProps> = ({ metaId }) => {\n    const { fileMetas, setImageId } = useFile();\n\n    const meta = fileMetas.find(m => m.id === metaId)!;\n\n    const { data: source } = useGetFile({ meta });\n\n    useEffect(() => {\n        if (metaId)\n            globalThis.addEventListener(\"keydown\", handleOnKeydown);\n\n        return () => { globalThis.removeEventListener(\"keydown\", handleOnKeydown); };\n    }, [metaId]);\n\n    const handleOnKeydown = (event: KeyboardEvent) => {\n        const images: Array<FileMeta> = fileMetas.filter(m => m.mediaType === \"image\");\n        const imageIndex: number = images.findIndex(m => m.id === metaId);\n\n        switch (event.key) {\n            case \"ArrowLeft\": {\n                return handleOnArrowLeft(images, imageIndex);\n            }\n            case \"ArrowRight\": {\n                return handleOnArrowRight(images, imageIndex);\n            }\n            case \"Backspace\":\n            case \"Escape\": {\n                event.preventDefault();\n                return onClose();\n            }\n        }\n    };\n\n    const handleOnArrowLeft = (images: Array<FileMeta>, index: number) => {\n        if (index > 0) {\n            const previousFile: FileMeta = images[index - 1];\n            setImageId(previousFile.id);\n        }\n    };\n\n    const handleOnArrowRight = (images: Array<FileMeta>, index: number) => {\n        if (index < images.length - 1) {\n            const nextFile: FileMeta = images[index + 1];\n            setImageId(nextFile.id);\n        }\n    };\n\n    const onClose = () => setImageId(\"\");\n\n    if (!metaId) return null;\n\n    return (\n        <Dialog open onClose={onClose} maxWidth=\"xl\">\n            <Box component=\"img\" src={source} alt={metaId} sx={{ maxWidth: \"100vw\", maxHeight: { xs: \"calc(100vh - 56px)\", sm: \"calc(100vh - 64px)\" } }} />\n\n            <Fab size=\"medium\" onClick={onClose} sx={{ position: \"fixed\", top: 8, right: 8 }}>\n                <Close />\n            </Fab>\n        </Dialog>\n    );\n};\n"],"names":["ImageViewer","metaId","fileMetas","setImageId","useFile","meta","find","m","id","data","source","useGetFile","useEffect","globalThis","addEventListener","handleOnKeydown","removeEventListener","event","images","filter","mediaType","imageIndex","findIndex","key","handleOnArrowLeft","handleOnArrowRight","preventDefault","onClose","index","previousFile","length","nextFile","jsx","maxWidth","maxHeight","xs","sm","position","top","right"],"mappings":";;;;;;AAWO,MAAMA,cAA0CA,CAAC;AAAA,EAAEC;AAAO,MAAM;AACnE,QAAM;AAAA,IAAEC;AAAAA,IAAWC;AAAAA,EAAAA,IAAeC,QAAAA;AAElC,QAAMC,OAAOH,UAAUI,KAAKC,CAAAA,MAAKA,EAAEC,OAAOP,MAAM;AAEhD,QAAM;AAAA,IAAEQ,MAAMC;AAAAA,EAAAA,IAAWC,WAAW;AAAA,IAAEN;AAAAA,EAAAA,CAAM;AAE5CO,YAAU,MAAM;AACZ,QAAIX,OACAY,YAAWC,iBAAiB,WAAWC,eAAe;AAE1D,WAAO,MAAM;AAAEF,iBAAWG,oBAAoB,WAAWD,eAAe;AAAA,IAAG;AAAA,EAC/E,GAAG,CAACd,MAAM,CAAC;AAEX,QAAMc,kBAAkBA,CAACE,UAAyB;AAC9C,UAAMC,SAA0BhB,UAAUiB,OAAOZ,CAAAA,QAAKA,IAAEa,cAAc,OAAO;AAC7E,UAAMC,aAAqBH,OAAOI,UAAUf,CAAAA,QAAKA,IAAEC,OAAOP,MAAM;AAEhE,YAAQgB,MAAMM,KAAAA;AAAAA,MACV,KAAK,aAAa;AACd,eAAOC,kBAAkBN,QAAQG,UAAU;AAAA,MAC/C;AAAA,MACA,KAAK,cAAc;AACf,eAAOI,mBAAmBP,QAAQG,UAAU;AAAA,MAChD;AAAA,MACA,KAAK;AAAA,MACL,KAAK,UAAU;AACXJ,cAAMS,eAAAA;AACN,eAAOC,QAAAA;AAAAA,MACX;AAAA,IAAA;AAAA,EAER;AAEA,QAAMH,oBAAoBA,CAACN,UAAyBU,UAAkB;AAClE,QAAIA,QAAQ,GAAG;AACX,YAAMC,eAAyBX,SAAOU,QAAQ,CAAC;AAC/CzB,iBAAW0B,aAAarB,EAAE;AAAA,IAC9B;AAAA,EACJ;AAEA,QAAMiB,qBAAqBA,CAACP,UAAyBU,YAAkB;AACnE,QAAIA,UAAQV,SAAOY,SAAS,GAAG;AAC3B,YAAMC,WAAqBb,SAAOU,UAAQ,CAAC;AAC3CzB,iBAAW4B,SAASvB,EAAE;AAAA,IAC1B;AAAA,EACJ;AAEA,QAAMmB,UAAUA,MAAMxB,WAAW,EAAE;AAEnC,MAAI,CAACF,OAAQ,QAAO;AAEpB,gDACK,QAAA,EAAO,MAAI,MAAC,SAAkB,UAAS,MACpC,UAAA;AAAA,IAAA+B,sCAAC,OAAI,WAAU,OAAM,KAAKtB,QAAQ,KAAKT,QAAQ,IAAI;AAAA,MAAEgC,UAAU;AAAA,MAASC,WAAW;AAAA,QAAEC,IAAI;AAAA,QAAsBC,IAAI;AAAA,MAAA;AAAA,IAAqB,GAAI;AAAA,0CAE3I,KAAA,EAAI,MAAK,UAAS,SAAST,SAAS,IAAI;AAAA,MAAEU,UAAU;AAAA,MAASC,KAAK;AAAA,MAAGC,OAAO;AAAA,IAAA,GACzE,UAAAP,kCAAAA,IAAC,OAAA,CAAA,CAAK,EAAA,CACV;AAAA,EAAA,GACJ;AAER;"}

package/dist/components/file/fileViewer/common/ActionsMenu.d.ts

@@ -0,0 +1,15 @@
+import { FC } from 'react';
+import { FileMeta } from '../../../../models/file/FileMeta';
+interface ActionsMenuProps {
+    meta: FileMeta;
+    menu: {
+        mouseX: number;
+        mouseY: number;
+    } | null;
+    setMenu: (menu: {
+        mouseX: number;
+        mouseY: number;
+    } | null) => void;
+}
+export declare const ActionsMenu: FC<ActionsMenuProps>;
+export {};