@multiplatform.one/frappe-ui 7.4.1 → 7.6.0

package/dist/esm/FileBrowser/index.mjs

@@ -0,0 +1,665 @@
+import { AsyncBoundary, Breadcrumbs, DropdownMenu, ImageGrid, List, TreeView, ViewSwitcher } from "@multiplatform.one/components";
+import { Button, Checkbox, FileUpload, Input } from "@multiplatform.one/forms";
+import { DataTable } from "@multiplatform.one/table";
+import { OVERLAY_BREAKPOINT, useResolvedKnobs } from "@multiplatform.one/theme";
+import { CaretLeftIcon, CheckIcon, DotsThreeVerticalIcon, DownloadSimpleIcon, EyeIcon, FileIcon, FileArchiveIcon, FileImageIcon, FileTextIcon, FileVideoIcon, FolderIcon, FolderOpenIcon, ListIcon, MagnifyingGlassIcon, PencilSimpleIcon, SquaresFourIcon, TrashIcon, UploadSimpleIcon, XIcon } from "@phosphor-icons/react";
+import { useCallback, useMemo, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { Text, XStack, YStack, useWindowDimensions } from "tamagui";
+import { ancestorFolderIds, breadcrumbItems, buildFolderTree, childrenOf, fileKind, isFolder, parentFolder } from "./folderTree.mjs";
+import { readPersistedView, writePersistedView } from "./viewPersistence.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+const RAIL_WIDTH = 240;
+function KindIcon({
+  kind,
+  size = 16
+}) {
+  const props = {
+    size,
+    color: "$color9"
+  };
+  if (kind === "folder") return /* @__PURE__ */jsx(FolderIcon, {
+    ...props
+  });
+  if (kind === "image") return /* @__PURE__ */jsx(FileImageIcon, {
+    ...props
+  });
+  if (kind === "video") return /* @__PURE__ */jsx(FileVideoIcon, {
+    ...props
+  });
+  if (kind === "text") return /* @__PURE__ */jsx(FileTextIcon, {
+    ...props
+  });
+  if (kind === "zip") return /* @__PURE__ */jsx(FileArchiveIcon, {
+    ...props
+  });
+  return /* @__PURE__ */jsx(FileIcon, {
+    ...props
+  });
+}
+function formatSize(bytes) {
+  if (bytes == null || Number.isNaN(bytes)) return "\u2014";
+  if (bytes === 0) return "0 B";
+  const units = ["B", "KB", "MB", "GB"];
+  const i = Math.min(units.length - 1, Math.floor(Math.log(bytes) / Math.log(1024)));
+  return `${(bytes / 1024 ** i).toFixed(i === 0 ? 0 : 1)} ${units[i]}`;
+}
+function resolveStatus(status, items, error) {
+  if (error) return "error";
+  if (status) return status;
+  return items.length === 0 ? "empty" : "ready";
+}
+function FileRowMenu({
+  file,
+  onOpen,
+  onDownload,
+  onRename,
+  onMove,
+  onDelete
+}) {
+  const {
+    t
+  } = useTranslation();
+  return /* @__PURE__ */jsx(DropdownMenu, {
+    placement: "bottom-start",
+    items: [{
+      key: "open",
+      label: t("Open"),
+      icon: /* @__PURE__ */jsx(EyeIcon, {
+        size: 16
+      }),
+      onSelect: () => onOpen?.(file)
+    }, {
+      key: "download",
+      label: t("Download"),
+      icon: /* @__PURE__ */jsx(DownloadSimpleIcon, {
+        size: 16
+      }),
+      onSelect: () => onDownload?.([file])
+    }, {
+      key: "rename",
+      label: t("Rename"),
+      icon: /* @__PURE__ */jsx(PencilSimpleIcon, {
+        size: 16
+      }),
+      onSelect: () => onRename?.(file)
+    }, {
+      key: "move",
+      label: t("Move to\u2026"),
+      icon: /* @__PURE__ */jsx(UploadSimpleIcon, {
+        size: 16
+      }),
+      onSelect: () => onMove?.([file])
+    }, {
+      separator: true
+    }, {
+      key: "delete",
+      label: t("Delete"),
+      icon: /* @__PURE__ */jsx(TrashIcon, {
+        size: 16
+      }),
+      destructive: true,
+      onSelect: () => onDelete?.([file])
+    }],
+    children: /* @__PURE__ */jsx(Button, {
+      chromeless: true,
+      size: "$2",
+      icon: DotsThreeVerticalIcon,
+      "aria-label": t("Actions"),
+      "data-filebrowser-kebab": true
+    })
+  });
+}
+function BulkBar({
+  count,
+  placement,
+  onDownload,
+  onMove,
+  onDelete,
+  onClear
+}) {
+  const {
+    t
+  } = useTranslation();
+  const {
+    knobProps
+  } = useResolvedKnobs();
+  if (count === 0) return null;
+  return /* @__PURE__ */jsxs(XStack, {
+    "data-filebrowser-bulk": true,
+    "data-filebrowser-bulk-placement": placement,
+    alignItems: "center",
+    ...knobProps.gap,
+    ...knobProps.panelPadding,
+    borderWidth: 1,
+    borderColor: "$color6",
+    backgroundColor: "$color2",
+    ...knobProps.containerRadius,
+    marginHorizontal: "$4",
+    marginTop: placement === "top" ? "$3" : 0,
+    marginBottom: placement === "bottom" ? "$3" : 0,
+    children: [/* @__PURE__ */jsx(Text, {
+      fontWeight: "600",
+      fontSize: "$3",
+      children: t("{{count}} selected", {
+        count
+      })
+    }), /* @__PURE__ */jsx(Button, {
+      size: "$4",
+      chromeless: true,
+      icon: DownloadSimpleIcon,
+      onPress: onDownload,
+      children: t("Download")
+    }), /* @__PURE__ */jsx(Button, {
+      size: "$4",
+      chromeless: true,
+      icon: UploadSimpleIcon,
+      onPress: onMove,
+      children: t("Move")
+    }), /* @__PURE__ */jsx(Button, {
+      size: "$4",
+      chromeless: true,
+      icon: TrashIcon,
+      onPress: onDelete,
+      children: t("Delete")
+    }), /* @__PURE__ */jsx(XStack, {
+      flex: 1
+    }), /* @__PURE__ */jsx(Button, {
+      size: "$4",
+      chromeless: true,
+      icon: XIcon,
+      onPress: onClear,
+      children: t("Clear")
+    })]
+  });
+}
+function FileBrowser({
+  files = [],
+  foldersStatus,
+  filesStatus,
+  foldersError,
+  filesError,
+  onFoldersRetry,
+  onFilesRetry,
+  view: viewProp,
+  defaultView = "list",
+  onViewChange,
+  surfaceId,
+  selectionMode = "multi",
+  selectedIds: selectedIdsProp,
+  onSelectedIdsChange,
+  currentValue,
+  onPick,
+  currentFolder: currentFolderProp,
+  onCurrentFolderChange,
+  tileSize = "md",
+  mediaAspect = "square",
+  selectAllScope = "page",
+  bulkBarPlacement = "top",
+  tableZebra = false,
+  layout: layoutProp,
+  onUpload,
+  search: searchProp,
+  onSearchChange,
+  onOpen,
+  onDownload,
+  onRename,
+  onMove,
+  onDelete,
+  accept
+}) {
+  const {
+    t
+  } = useTranslation();
+  const {
+    knobProps
+  } = useResolvedKnobs();
+  const {
+    width
+  } = useWindowDimensions();
+  const layout = layoutProp ?? (width < OVERLAY_BREAKPOINT ? "drill" : "split");
+  const persisted = readPersistedView(surfaceId);
+  const [uncontrolledView, setUncontrolledView] = useState(viewProp ?? persisted ?? defaultView);
+  const view = viewProp ?? uncontrolledView;
+  const setView = useCallback(next => {
+    if (viewProp === void 0) setUncontrolledView(next);
+    writePersistedView(surfaceId, next);
+    onViewChange?.(next);
+  }, [onViewChange, surfaceId, viewProp]);
+  const [uncontrolledFolder, setUncontrolledFolder] = useState(currentFolderProp ?? "Home");
+  const currentFolder = currentFolderProp ?? uncontrolledFolder;
+  const setFolder = useCallback(next => {
+    if (currentFolderProp === void 0) setUncontrolledFolder(next);
+    onCurrentFolderChange?.(next);
+  }, [currentFolderProp, onCurrentFolderChange]);
+  const [uncontrolledSelected, setUncontrolledSelected] = useState(selectedIdsProp ?? []);
+  const selectedIds = selectedIdsProp ?? uncontrolledSelected;
+  const setSelectedIds = useCallback(next => {
+    if (selectedIdsProp === void 0) setUncontrolledSelected(next);
+    onSelectedIdsChange?.(next);
+  }, [onSelectedIdsChange, selectedIdsProp]);
+  const [uncontrolledSearch, setUncontrolledSearch] = useState(searchProp ?? "");
+  const search = searchProp ?? uncontrolledSearch;
+  const setSearch = useCallback(next => {
+    if (searchProp === void 0) setUncontrolledSearch(next);
+    onSearchChange?.(next);
+  }, [onSearchChange, searchProp]);
+  const [uploadOpen, setUploadOpen] = useState(false);
+  const folderNodes = useMemo(() => {
+    const withFolderIcons = nodes => nodes.map(node => ({
+      ...node,
+      icon: /* @__PURE__ */jsx(FolderIcon, {
+        size: 16,
+        weight: "duotone"
+      }),
+      iconWhenExpanded: /* @__PURE__ */jsx(FolderOpenIcon, {
+        size: 16,
+        weight: "duotone"
+      }),
+      children: node.children ? withFolderIcons(node.children) : void 0
+    }));
+    return withFolderIcons(buildFolderTree(files));
+  }, [files]);
+  const paneFiles = useMemo(() => {
+    const kids = childrenOf(files, currentFolder);
+    if (!search.trim()) return kids;
+    const q = search.trim().toLowerCase();
+    return kids.filter(file => file.file_name.toLowerCase().includes(q));
+  }, [currentFolder, files, search]);
+  const folderStatus = resolveStatus(foldersStatus, folderNodes, foldersError);
+  const fileStatus = resolveStatus(filesStatus, paneFiles, filesError);
+  const single = selectionMode === "single";
+  const toggleSelected = useCallback(id => {
+    setSelectedIds(selectedIds.includes(id) ? selectedIds.filter(item => item !== id) : [...selectedIds, id]);
+  }, [selectedIds, setSelectedIds]);
+  const handleFileActivate = useCallback(file => {
+    if (isFolder(file)) {
+      setFolder(file.name);
+      return;
+    }
+    if (single) {
+      onPick?.(file);
+      return;
+    }
+    onOpen?.(file);
+  }, [onOpen, onPick, setFolder, single]);
+  const selectedFiles = paneFiles.filter(file => selectedIds.includes(file.name));
+  const crumbs = breadcrumbItems(currentFolder);
+  const parent = parentFolder(currentFolder);
+  const columns = useMemo(() => [{
+    accessorKey: "file_name",
+    header: t("Name"),
+    cell: ({
+      row
+    }) => {
+      const file = row.original;
+      const current = currentValue != null && (currentValue === file.file_url || currentValue === file.name || currentValue === file.file_name);
+      return /* @__PURE__ */jsxs(XStack, {
+        alignItems: "center",
+        gap: "$2",
+        minWidth: 0,
+        flex: 1,
+        children: [/* @__PURE__ */jsx(KindIcon, {
+          kind: fileKind(file)
+        }), /* @__PURE__ */jsx(Text, {
+          fontSize: "$3",
+          flex: 1,
+          minWidth: 0,
+          ...{
+            numberOfLines: 1,
+            title: file.file_name
+          },
+          children: file.file_name
+        }), single && current ? /* @__PURE__ */jsx(CheckIcon, {
+          size: 14,
+          "data-filebrowser-current-check": true,
+          "aria-hidden": true
+        }) : null]
+      });
+    }
+  }, {
+    accessorKey: "modified",
+    header: t("Modified")
+  }, {
+    accessorKey: "file_size",
+    header: t("Size"),
+    cell: ({
+      row
+    }) => /* @__PURE__ */jsx(Text, {
+      fontSize: "$3",
+      fontFamily: "$mono",
+      children: isFolder(row.original) ? "\u2014" : formatSize(row.original.file_size)
+    })
+  }, ...(single ? [] : [{
+    id: "actions",
+    header: "",
+    enableSorting: false,
+    cell: ({
+      row
+    }) => /* @__PURE__ */jsx(FileRowMenu, {
+      file: row.original,
+      onOpen,
+      onDownload,
+      onRename,
+      onMove,
+      onDelete
+    })
+  }])], [currentValue, onDelete, onDownload, onMove, onOpen, onRename, single, t]);
+  const tableRows = useMemo(() => paneFiles.map(file => ({
+    ...file,
+    id: file.name
+  })), [paneFiles]);
+  const toolbar = /* @__PURE__ */jsxs(XStack, {
+    "data-filebrowser-toolbar": true,
+    alignItems: "center",
+    ...knobProps.gap,
+    paddingHorizontal: "$4",
+    paddingVertical: "$3",
+    borderBottomWidth: 1,
+    borderColor: "$borderColor",
+    children: [layout === "drill" ? /* @__PURE__ */jsx(Button, {
+      chromeless: true,
+      size: "$4",
+      icon: CaretLeftIcon,
+      disabled: !parent,
+      "aria-label": t("Back"),
+      "data-filebrowser-back": true,
+      onPress: () => parent && setFolder(parent),
+      children: crumbs[crumbs.length - 1]?.label ?? t("Home")
+    }) : /* @__PURE__ */jsx(XStack, {
+      flex: 1,
+      minWidth: 0,
+      children: /* @__PURE__ */jsx(Breadcrumbs, {
+        items: crumbs,
+        maxVisible: 4,
+        onNavigate: href => setFolder(href)
+      })
+    }), layout === "split" ? /* @__PURE__ */jsx(Input, {
+      value: search,
+      onChangeText: setSearch,
+      placeholder: t("Search files"),
+      leftIcon: /* @__PURE__ */jsx(MagnifyingGlassIcon, {
+        size: 16
+      }),
+      labelHidden: true,
+      "aria-label": t("Search files")
+    }) : null, /* @__PURE__ */jsx(YStack, {
+      "data-filebrowser-view-switcher": true,
+      children: /* @__PURE__ */jsx(ViewSwitcher, {
+        currentView: view,
+        onViewChange: next => setView(next),
+        views: [{
+          type: "list",
+          label: t("List"),
+          icon: ListIcon,
+          iconOnly: true
+        }, {
+          type: "grid",
+          label: t("Grid"),
+          icon: SquaresFourIcon,
+          iconOnly: true
+        }]
+      })
+    }), onUpload ? /* @__PURE__ */jsx(Button, {
+      size: "$4",
+      icon: UploadSimpleIcon,
+      onPress: () => setUploadOpen(true),
+      children: t("Upload")
+    }) : null]
+  });
+  const bulk = !single ? /* @__PURE__ */jsx(BulkBar, {
+    count: selectedIds.length,
+    placement: bulkBarPlacement,
+    onDownload: () => onDownload?.(selectedFiles),
+    onMove: () => onMove?.(selectedFiles),
+    onDelete: () => onDelete?.(selectedFiles),
+    onClear: () => setSelectedIds([])
+  }) : null;
+  const renderGridItem = file => {
+    const kind = fileKind(file);
+    const current = currentValue != null && (currentValue === file.file_url || currentValue === file.name || currentValue === file.file_name);
+    const checked = selectedIds.includes(file.name);
+    return /* @__PURE__ */jsxs(YStack, {
+      "data-filebrowser-tile": file.name,
+      gap: "$2",
+      children: [/* @__PURE__ */jsxs(YStack, {
+        position: "relative",
+        children: [!single ? /* @__PURE__ */jsx(YStack, {
+          position: "absolute",
+          top: "$2",
+          left: "$2",
+          zIndex: 2,
+          onPress: event => {
+            event.stopPropagation();
+            toggleSelected(file.name);
+          },
+          children: /* @__PURE__ */jsx(Checkbox, {
+            checked,
+            onCheckedChange: () => toggleSelected(file.name),
+            "aria-label": t("Select {{name}}", {
+              name: file.file_name
+            }),
+            "data-filebrowser-checkbox": true
+          })
+        }) : null, /* @__PURE__ */jsx(YStack, {
+          aspectRatio: 1,
+          backgroundColor: "$color2",
+          borderWidth: 1,
+          borderColor: "$borderColor",
+          ...knobProps.containerRadius,
+          alignItems: "center",
+          justifyContent: "center",
+          children: kind === "image" && file.file_url ?
+          // eslint-disable-next-line jsx-a11y/alt-text
+          /* @__PURE__ */
+          jsx("img", {
+            src: file.file_url,
+            alt: "",
+            style: {
+              width: "100%",
+              height: "100%",
+              objectFit: "cover"
+            }
+          }) : /* @__PURE__ */jsx(KindIcon, {
+            kind,
+            size: 28
+          })
+        })]
+      }), /* @__PURE__ */jsxs(XStack, {
+        alignItems: "center",
+        gap: "$2",
+        children: [/* @__PURE__ */jsx(Text, {
+          fontSize: "$3",
+          flex: 1,
+          ...{
+            numberOfLines: 1,
+            title: file.file_name
+          },
+          children: file.file_name
+        }), single && current ? /* @__PURE__ */jsx(CheckIcon, {
+          size: 14,
+          "data-filebrowser-current-check": true,
+          "aria-hidden": true
+        }) : null]
+      }), /* @__PURE__ */jsx(Text, {
+        fontSize: "$2",
+        fontFamily: "$mono",
+        color: "$color10",
+        children: isFolder(file) ? "\u2014" : formatSize(file.file_size)
+      })]
+    });
+  };
+  const filesPaneReady = view === "grid" ? /* @__PURE__ */jsx(YStack, {
+    "data-filebrowser-files-view": "grid",
+    "data-filebrowser-tile-size": tileSize,
+    flexGrow: 1,
+    flexShrink: 1,
+    flexBasis: "auto",
+    children: /* @__PURE__ */jsx(ImageGrid, {
+      items: paneFiles,
+      tileSize,
+      mediaAspect,
+      renderItem: renderGridItem,
+      onItemClick: handleFileActivate,
+      emptyMessage: t("No files")
+    })
+  }) : layout === "drill" ? /* @__PURE__ */jsx(List, {
+    items: paneFiles,
+    "aria-label": t("Files"),
+    renderItem: file => /* @__PURE__ */jsxs(XStack, {
+      alignItems: "center",
+      gap: "$3",
+      flex: 1,
+      minWidth: 0,
+      width: "100%",
+      children: [/* @__PURE__ */jsx(KindIcon, {
+        kind: fileKind(file)
+      }), /* @__PURE__ */jsx(Text, {
+        fontSize: "$3",
+        flex: 1,
+        minWidth: 0,
+        ...{
+          numberOfLines: 1,
+          title: file.file_name
+        },
+        children: file.file_name
+      }), isFolder(file) ? null : /* @__PURE__ */jsx(Text, {
+        fontSize: "$2",
+        fontFamily: "$mono",
+        color: "$color10",
+        children: formatSize(file.file_size)
+      })]
+    }),
+    onItemClick: handleFileActivate,
+    emptyMessage: t("No files")
+  }) : /* @__PURE__ */jsx(YStack, {
+    "data-filebrowser-files-view": "list",
+    flex: 1,
+    children: /* @__PURE__ */jsx(DataTable, {
+      data: tableRows,
+      columns,
+      enableRowSelection: !single,
+      selectAllScope,
+      enableFiltering: false,
+      enableGlobalSearch: false,
+      enablePagination: false,
+      enableColumnVisibility: false,
+      enableSorting: true,
+      onRowPress: row => handleFileActivate(row),
+      rowLabel: row => row.file_name,
+      "aria-label": t("Files"),
+      bulkActions: single ? void 0 : [{
+        id: "download",
+        label: t("Download"),
+        onExecute: rows => onDownload?.(rows)
+      }, {
+        id: "move",
+        label: t("Move"),
+        onExecute: rows => onMove?.(rows)
+      }, {
+        id: "delete",
+        label: t("Delete"),
+        onExecute: rows => onDelete?.(rows)
+      }]
+    })
+  });
+  const filesBody = /* @__PURE__ */jsx(YStack, {
+    "data-filebrowser-files": true,
+    "data-filebrowser-files-state": fileStatus,
+    flex: 1,
+    minWidth: 0,
+    children: fileStatus === "loading" && view === "grid" ? /* @__PURE__ */jsx(ImageGrid, {
+      items: [],
+      isLoading: true,
+      tileSize,
+      mediaAspect,
+      renderItem: () => null
+    }) : /* @__PURE__ */jsx(AsyncBoundary, {
+      layout: view === "grid" ? "generic" : "table",
+      loading: fileStatus === "loading",
+      empty: fileStatus === "empty",
+      error: fileStatus === "error" ? filesError ?? true : null,
+      onRetry: onFilesRetry,
+      emptyTitle: t("No files"),
+      errorTitle: t("Couldn't load files"),
+      compact: true,
+      flexGrow: 1,
+      flexShrink: 1,
+      flexBasis: view === "grid" ? "auto" : 0,
+      children: filesPaneReady
+    })
+  });
+  const foldersBody = /* @__PURE__ */jsx(YStack, {
+    "data-filebrowser-folders": true,
+    "data-filebrowser-folders-state": folderStatus,
+    width: layout === "split" ? RAIL_WIDTH : "100%",
+    flexGrow: layout === "split" ? 0 : 1,
+    flexShrink: 0,
+    borderRightWidth: layout === "split" ? 1 : 0,
+    borderColor: "$borderColor",
+    minWidth: 0,
+    children: /* @__PURE__ */jsx(AsyncBoundary, {
+      layout: "list",
+      loading: folderStatus === "loading",
+      empty: folderStatus === "empty",
+      error: folderStatus === "error" ? foldersError ?? true : null,
+      onRetry: onFoldersRetry,
+      emptyTitle: t("No folders"),
+      errorTitle: t("Couldn't load folders"),
+      compact: true,
+      flex: 1,
+      overflow: "hidden",
+      children: /* @__PURE__ */jsx(TreeView, {
+        nodes: folderNodes,
+        selectedId: currentFolder,
+        defaultExpandedIds: ancestorFolderIds(currentFolder),
+        ariaLabel: t("Folders"),
+        display: "default",
+        showExpansionArrows: true,
+        onNodeSelect: node => setFolder(node.id),
+        emptyMessage: t("No folders")
+      })
+    })
+  });
+  return /* @__PURE__ */jsxs(YStack, {
+    "data-filebrowser": true,
+    "data-filebrowser-layout": layout,
+    "data-filebrowser-view": view,
+    "data-filebrowser-selection": selectionMode,
+    "data-filebrowser-tile-size": tileSize,
+    "data-filebrowser-zebra": tableZebra ? "on" : "off",
+    borderWidth: 1,
+    borderColor: "$color5",
+    backgroundColor: "$color2",
+    overflow: "visible",
+    ...knobProps.containerRadius,
+    minHeight: 280,
+    children: [toolbar, bulkBarPlacement === "top" ? bulk : null, layout === "split" ?
+    // flexBasis auto, not 0: the panes' content height (the grid wall in
+    // page flow) must reach the frame so it grows past the 280 floor.
+    /* @__PURE__ */
+    jsxs(XStack, {
+      flexGrow: 1,
+      flexShrink: 1,
+      flexBasis: "auto",
+      alignItems: "stretch",
+      minHeight: 200,
+      children: [foldersBody, filesBody]
+    }) : /* @__PURE__ */jsx(YStack, {
+      flexGrow: 1,
+      flexShrink: 1,
+      flexBasis: "auto",
+      minHeight: 200,
+      children: filesBody
+    }), bulkBarPlacement === "bottom" ? bulk : null, uploadOpen && onUpload ? /* @__PURE__ */jsx(YStack, {
+      "data-filebrowser-upload": true,
+      padding: "$4",
+      children: /* @__PURE__ */jsx(FileUpload, {
+        accept,
+        multiple: true
+      })
+    }) : null]
+  });
+}
+export { FileBrowser };
+//# sourceMappingURL=index.mjs.map