@harryy/react-file-browser 1.1.1 → 1.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +18 -1
- package/dist/components/file-browser.d.ts.map +1 -1
- package/dist/components/responsive.d.ts +26 -0
- package/dist/components/responsive.d.ts.map +1 -0
- package/dist/index.js +1766 -1310
- package/dist/index.js.map +1 -1
- package/dist/transfers/file-browser-provider.d.ts.map +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -33,6 +33,23 @@ S3, Cloudflare R2, Supabase Storage, an in-memory store, or any backend you impl
|
|
|
33
33
|
shipped.
|
|
34
34
|
- **Read-only mode**, comfortable/compact density, ESM-only, fully typed.
|
|
35
35
|
|
|
36
|
+
### Responsive layouts
|
|
37
|
+
|
|
38
|
+
The browser responds to its **container width**, including when embedded in a narrow modal or split
|
|
39
|
+
pane. Below 40rem (640px with the default root font size), tap an item to open it. Long-press for
|
|
40
|
+
multi-selection, or choose **Browser options → Select items**, then use the visible checkboxes and
|
|
41
|
+
bottom action bar. Search stays visible; filter, sort, view, and folder creation live in Browser
|
|
42
|
+
options. Upload remains available above the footer.
|
|
43
|
+
|
|
44
|
+
Details use the sidebar at 64rem and above, and an on-demand sheet at smaller widths. On narrow
|
|
45
|
+
layouts, select an item and choose **Details**. `showDetailsPanel={false}` hides both presentations.
|
|
46
|
+
Custom item and details renderers should also use fluid widths.
|
|
47
|
+
|
|
48
|
+
Dialogs fit the available viewport height. Narrow menus and conflicts use bottom sheets. The
|
|
49
|
+
provider's transfer widget responds to the viewport, starts collapsed on phones, and expands into a
|
|
50
|
+
scrollable queue without changing transfer state. Desktop mouse and keyboard interactions remain
|
|
51
|
+
available, and touch controls retain their minimum target size in compact density.
|
|
52
|
+
|
|
36
53
|
## Install
|
|
37
54
|
|
|
38
55
|
```bash
|
|
@@ -210,7 +227,7 @@ or `bulkDownloadUrl`, those controls are hidden. Recursive folder drops are reje
|
|
|
210
227
|
| `onSearchQueryChange` | `(query) => void` | None | Receives user-driven search changes. |
|
|
211
228
|
| `density` | `"comfortable" \| "compact"` | `"comfortable"` | Row/tile density. |
|
|
212
229
|
| `readOnly` | `boolean` | `false` | Hides all mutating affordances. |
|
|
213
|
-
| `showDetailsPanel` | `boolean` | `true` | Toggles
|
|
230
|
+
| `showDetailsPanel` | `boolean` | `true` | Toggles details, shown as a sidebar or responsive sheet. |
|
|
214
231
|
| `uploadPolicy` | `FileBrowserUploadPolicy` | None | Reject files before they enqueue. |
|
|
215
232
|
| `uploadConflictResolutions` | `FileBrowserUploadConflictResolution[]` | all | Allowed conflict-dialog actions. |
|
|
216
233
|
| `allowClientZipFallback` | `boolean` | `true` | Allows browser-built ZIPs when no server ZIP exists. |
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"file-browser.d.ts","sourceRoot":"","sources":["../../src/components/file-browser.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"file-browser.d.ts","sourceRoot":"","sources":["../../src/components/file-browser.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
import type { MouseEvent, ReactNode, RefObject, TouchEvent } from 'react';
|
|
2
|
+
export declare function useNarrowViewport(): boolean;
|
|
3
|
+
export declare function useBrowserLayout(ref: RefObject<HTMLElement | null>): {
|
|
4
|
+
isNarrow: boolean;
|
|
5
|
+
hasSidebar: boolean;
|
|
6
|
+
};
|
|
7
|
+
export declare function useLongPress(onLongPress: () => void): {
|
|
8
|
+
onTouchStart(event: TouchEvent): void;
|
|
9
|
+
onTouchMove: () => void;
|
|
10
|
+
onTouchCancel(): void;
|
|
11
|
+
onTouchEnd(): void;
|
|
12
|
+
onClickCapture(event: MouseEvent): void;
|
|
13
|
+
onContextMenuCapture(event: MouseEvent): void;
|
|
14
|
+
};
|
|
15
|
+
export declare function ResponsiveDialog({ children, label, narrow, onClose }: {
|
|
16
|
+
children: ReactNode;
|
|
17
|
+
label: string;
|
|
18
|
+
narrow?: boolean;
|
|
19
|
+
onClose: () => void;
|
|
20
|
+
}): import("react").JSX.Element;
|
|
21
|
+
export declare function ActionSheet({ children, label, onClose }: {
|
|
22
|
+
children: ReactNode;
|
|
23
|
+
label: string;
|
|
24
|
+
onClose: () => void;
|
|
25
|
+
}): import("react").JSX.Element;
|
|
26
|
+
//# sourceMappingURL=responsive.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"responsive.d.ts","sourceRoot":"","sources":["../../src/components/responsive.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,UAAU,EAAE,SAAS,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AAEzE,wBAAgB,iBAAiB,YAWhC;AAED,wBAAgB,gBAAgB,CAAC,GAAG,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC;;;EA8BlE;AAED,wBAAgB,YAAY,CAAC,WAAW,EAAE,MAAM,IAAI;wBAc9B,UAAU;;;;0BAwBR,UAAU;gCAOJ,UAAU;EAOvC;AAKD,wBAAgB,gBAAgB,CAAC,EAChC,QAAQ,EACR,KAAK,EACL,MAAc,EACd,OAAO,EACP,EAAE;IACF,QAAQ,EAAE,SAAS,CAAA;IACnB,KAAK,EAAE,MAAM,CAAA;IACb,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,OAAO,EAAE,MAAM,IAAI,CAAA;CACnB,+BAoEA;AAED,wBAAgB,WAAW,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,OAAO,EAAE,EAAE;IAAE,QAAQ,EAAE,SAAS,CAAC;IAAC,KAAK,EAAE,MAAM,CAAC;IAAC,OAAO,EAAE,MAAM,IAAI,CAAA;CAAE,+BAmBpH"}
|