@uploadista/react 0.0.15-beta.1 → 0.0.15-beta.3
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/dist/components/index.d.mts +2 -2
- package/dist/components/index.mjs +1 -1
- package/dist/hooks/index.d.mts +2 -2
- package/dist/hooks/index.mjs +1 -1
- package/dist/index.d.mts +76 -4
- package/dist/index.d.mts.map +1 -0
- package/dist/index.mjs +1 -1
- package/dist/{upload-zone-D3gie3s1.mjs → upload-zone-BQeUnuNK.mjs} +2 -2
- package/dist/{upload-zone-D3gie3s1.mjs.map → upload-zone-BQeUnuNK.mjs.map} +1 -1
- package/dist/{uploadista-provider-CrS6TmpJ.d.mts → uploadista-provider-BIWt4Zfs.d.mts} +3 -3
- package/dist/{uploadista-provider-CrS6TmpJ.d.mts.map → uploadista-provider-BIWt4Zfs.d.mts.map} +1 -1
- package/dist/use-upload-BNYuUjSi.mjs +2 -0
- package/dist/use-upload-BNYuUjSi.mjs.map +1 -0
- package/dist/{use-upload-metrics-dMP4qxq0.mjs → use-upload-metrics-9uwhKMWa.mjs} +2 -2
- package/dist/{use-upload-metrics-dMP4qxq0.mjs.map → use-upload-metrics-9uwhKMWa.mjs.map} +1 -1
- package/dist/{use-upload-metrics-IXxUORce.d.mts → use-upload-metrics-Cd0ML_kN.d.mts} +2 -2
- package/dist/{use-upload-metrics-IXxUORce.d.mts.map → use-upload-metrics-Cd0ML_kN.d.mts.map} +1 -1
- package/dist/{use-uploadista-client--ivZPO88.d.mts → use-uploadista-client-B_VQ3UgO.d.mts} +4 -4
- package/dist/use-uploadista-client-B_VQ3UgO.d.mts.map +1 -0
- package/package.json +5 -5
- package/src/components/uploadista-provider.tsx +5 -1
- package/src/contexts/flow-manager-context.tsx +230 -0
- package/src/hooks/use-flow-upload.ts +47 -112
- package/src/hooks/use-uploadista-client.ts +21 -1
- package/src/index.ts +6 -0
- package/dist/use-upload-CbeBq3kV.mjs +0 -2
- package/dist/use-upload-CbeBq3kV.mjs.map +0 -1
- package/dist/use-uploadista-client--ivZPO88.d.mts.map +0 -1
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
import { C as SimpleFlowUploadListItemProps, S as SimpleFlowUploadListItem, _ as SimpleFlowUploadZoneProps, a as UploadZone, b as FlowUploadListRenderProps, c as SimpleUploadListItem, d as UploadListProps, f as UploadListRenderProps, g as SimpleFlowUploadZone, h as FlowUploadZoneRenderProps, i as SimpleUploadZoneProps, l as SimpleUploadListItemProps, m as FlowUploadZoneProps, n as useUploadistaContext, o as UploadZoneProps, p as FlowUploadZone, r as SimpleUploadZone, s as UploadZoneRenderProps, t as UploadistaProvider, u as UploadList, v as FlowUploadList, w as SimpleFlowUploadListProps, x as SimpleFlowUploadList, y as FlowUploadListProps } from "../uploadista-provider-
|
|
2
|
-
import "../use-uploadista-client
|
|
1
|
+
import { C as SimpleFlowUploadListItemProps, S as SimpleFlowUploadListItem, _ as SimpleFlowUploadZoneProps, a as UploadZone, b as FlowUploadListRenderProps, c as SimpleUploadListItem, d as UploadListProps, f as UploadListRenderProps, g as SimpleFlowUploadZone, h as FlowUploadZoneRenderProps, i as SimpleUploadZoneProps, l as SimpleUploadListItemProps, m as FlowUploadZoneProps, n as useUploadistaContext, o as UploadZoneProps, p as FlowUploadZone, r as SimpleUploadZone, s as UploadZoneRenderProps, t as UploadistaProvider, u as UploadList, v as FlowUploadList, w as SimpleFlowUploadListProps, x as SimpleFlowUploadList, y as FlowUploadListProps } from "../uploadista-provider-BIWt4Zfs.mjs";
|
|
2
|
+
import "../use-uploadista-client-B_VQ3UgO.mjs";
|
|
3
3
|
export { FlowUploadList, type FlowUploadListProps, type FlowUploadListRenderProps, FlowUploadZone, type FlowUploadZoneProps, type FlowUploadZoneRenderProps, SimpleFlowUploadList, SimpleFlowUploadListItem, type SimpleFlowUploadListItemProps, type SimpleFlowUploadListProps, SimpleFlowUploadZone, type SimpleFlowUploadZoneProps, SimpleUploadListItem, type SimpleUploadListItemProps, SimpleUploadZone, type SimpleUploadZoneProps, UploadList, type UploadListProps, type UploadListRenderProps, UploadZone, type UploadZoneProps, type UploadZoneRenderProps, UploadistaProvider, useUploadistaContext };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{o as e,s as t}from"../use-upload-
|
|
1
|
+
import{o as e,s as t}from"../use-upload-BNYuUjSi.mjs";import{a as n,c as r,i,l as a,n as o,o as s,r as c,s as l,t as u}from"../upload-zone-BQeUnuNK.mjs";export{l as FlowUploadList,n as FlowUploadZone,r as SimpleFlowUploadList,a as SimpleFlowUploadListItem,s as SimpleFlowUploadZone,c as SimpleUploadListItem,u as SimpleUploadZone,i as UploadList,o as UploadZone,e as UploadistaProvider,t as useUploadistaContext};
|
package/dist/hooks/index.d.mts
CHANGED
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
import { _ as useFlowUpload, a as MultiUploadState, b as UseDragDropReturn, c as useMultiUpload, d as UseUploadOptions, f as UseUploadReturn, g as UseFlowUploadReturn, h as FlowUploadStatus, i as MultiUploadOptions, l as UploadState, m as FlowUploadState, n as UseUploadistaClientReturn, o as UploadItem, p as useUpload, r as useUploadistaClient, s as UseMultiUploadReturn, t as UseUploadistaClientOptions, u as UploadStatus, v as DragDropOptions, x as useDragDrop, y as DragDropState } from "../use-uploadista-client
|
|
2
|
-
import { a as useUploadMetrics, i as UseUploadMetricsReturn, n as UploadMetrics, o as UseMultiFlowUploadReturn, r as UseUploadMetricsOptions, s as useMultiFlowUpload, t as FileUploadMetrics } from "../use-upload-metrics-
|
|
1
|
+
import { _ as useFlowUpload, a as MultiUploadState, b as UseDragDropReturn, c as useMultiUpload, d as UseUploadOptions, f as UseUploadReturn, g as UseFlowUploadReturn, h as FlowUploadStatus, i as MultiUploadOptions, l as UploadState, m as FlowUploadState, n as UseUploadistaClientReturn, o as UploadItem, p as useUpload, r as useUploadistaClient, s as UseMultiUploadReturn, t as UseUploadistaClientOptions, u as UploadStatus, v as DragDropOptions, x as useDragDrop, y as DragDropState } from "../use-uploadista-client-B_VQ3UgO.mjs";
|
|
2
|
+
import { a as useUploadMetrics, i as UseUploadMetricsReturn, n as UploadMetrics, o as UseMultiFlowUploadReturn, r as UseUploadMetricsOptions, s as useMultiFlowUpload, t as FileUploadMetrics } from "../use-upload-metrics-Cd0ML_kN.mjs";
|
|
3
3
|
export { type DragDropOptions, type DragDropState, type FileUploadMetrics, type FlowUploadState, type FlowUploadStatus, type MultiUploadOptions, type MultiUploadState, type UploadItem, type UploadMetrics, type UploadState, type UploadStatus, type UseDragDropReturn, type UseFlowUploadReturn, type UseMultiFlowUploadReturn, type UseMultiUploadReturn, type UseUploadMetricsOptions, type UseUploadMetricsReturn, type UseUploadOptions, type UseUploadReturn, type UseUploadistaClientOptions, type UseUploadistaClientReturn, useDragDrop, useFlowUpload, useMultiFlowUpload, useMultiUpload, useUpload, useUploadMetrics, useUploadistaClient };
|
package/dist/hooks/index.mjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{a as e,c as t,i as n,n as r,r as i,t as a}from"../use-upload-
|
|
1
|
+
import{a as e,c as t,i as n,n as r,r as i,t as a}from"../use-upload-BNYuUjSi.mjs";import{t as o}from"../use-upload-metrics-9uwhKMWa.mjs";export{n as useDragDrop,i as useFlowUpload,e as useMultiFlowUpload,r as useMultiUpload,a as useUpload,o as useUploadMetrics,t as useUploadistaClient};
|
package/dist/index.d.mts
CHANGED
|
@@ -1,4 +1,76 @@
|
|
|
1
|
-
import { C as SimpleFlowUploadListItemProps, S as SimpleFlowUploadListItem, _ as SimpleFlowUploadZoneProps, a as UploadZone, b as FlowUploadListRenderProps, c as SimpleUploadListItem, d as UploadListProps, f as UploadListRenderProps, g as SimpleFlowUploadZone, h as FlowUploadZoneRenderProps, i as SimpleUploadZoneProps, l as SimpleUploadListItemProps, m as FlowUploadZoneProps, n as useUploadistaContext, o as UploadZoneProps, p as FlowUploadZone, r as SimpleUploadZone, s as UploadZoneRenderProps, t as UploadistaProvider, u as UploadList, v as FlowUploadList, w as SimpleFlowUploadListProps, x as SimpleFlowUploadList, y as FlowUploadListProps } from "./uploadista-provider-
|
|
2
|
-
import { _ as useFlowUpload, a as MultiUploadState, b as UseDragDropReturn, c as useMultiUpload, d as UseUploadOptions, f as UseUploadReturn, g as UseFlowUploadReturn, h as FlowUploadStatus, i as MultiUploadOptions, l as UploadState, m as FlowUploadState, n as UseUploadistaClientReturn, o as UploadItem, p as useUpload, r as useUploadistaClient, s as UseMultiUploadReturn, t as UseUploadistaClientOptions, u as UploadStatus, v as DragDropOptions, x as useDragDrop, y as DragDropState } from "./use-uploadista-client
|
|
3
|
-
import { a as useUploadMetrics, i as UseUploadMetricsReturn, n as UploadMetrics, o as UseMultiFlowUploadReturn, r as UseUploadMetricsOptions, s as useMultiFlowUpload, t as FileUploadMetrics } from "./use-upload-metrics-
|
|
4
|
-
|
|
1
|
+
import { C as SimpleFlowUploadListItemProps, S as SimpleFlowUploadListItem, _ as SimpleFlowUploadZoneProps, a as UploadZone, b as FlowUploadListRenderProps, c as SimpleUploadListItem, d as UploadListProps, f as UploadListRenderProps, g as SimpleFlowUploadZone, h as FlowUploadZoneRenderProps, i as SimpleUploadZoneProps, l as SimpleUploadListItemProps, m as FlowUploadZoneProps, n as useUploadistaContext, o as UploadZoneProps, p as FlowUploadZone, r as SimpleUploadZone, s as UploadZoneRenderProps, t as UploadistaProvider, u as UploadList, v as FlowUploadList, w as SimpleFlowUploadListProps, x as SimpleFlowUploadList, y as FlowUploadListProps } from "./uploadista-provider-BIWt4Zfs.mjs";
|
|
2
|
+
import { _ as useFlowUpload, a as MultiUploadState, b as UseDragDropReturn, c as useMultiUpload, d as UseUploadOptions, f as UseUploadReturn, g as UseFlowUploadReturn, h as FlowUploadStatus, i as MultiUploadOptions, l as UploadState, m as FlowUploadState, n as UseUploadistaClientReturn, o as UploadItem, p as useUpload, r as useUploadistaClient, s as UseMultiUploadReturn, t as UseUploadistaClientOptions, u as UploadStatus, v as DragDropOptions, x as useDragDrop, y as DragDropState } from "./use-uploadista-client-B_VQ3UgO.mjs";
|
|
3
|
+
import { a as useUploadMetrics, i as UseUploadMetricsReturn, n as UploadMetrics, o as UseMultiFlowUploadReturn, r as UseUploadMetricsOptions, s as useMultiFlowUpload, t as FileUploadMetrics } from "./use-upload-metrics-Cd0ML_kN.mjs";
|
|
4
|
+
import { ReactNode } from "react";
|
|
5
|
+
import { FlowManager, FlowManagerCallbacks } from "@uploadista/client-core";
|
|
6
|
+
import * as react_jsx_runtime9 from "react/jsx-runtime";
|
|
7
|
+
import { FlowUploadOptions } from "@uploadista/client-browser";
|
|
8
|
+
|
|
9
|
+
//#region src/contexts/flow-manager-context.d.ts
|
|
10
|
+
/**
|
|
11
|
+
* Context value providing access to flow managers
|
|
12
|
+
*/
|
|
13
|
+
interface FlowManagerContextValue {
|
|
14
|
+
/**
|
|
15
|
+
* Get or create a flow manager for the given flow ID.
|
|
16
|
+
* Increments ref count - must call releaseManager when done.
|
|
17
|
+
*
|
|
18
|
+
* @param flowId - Unique identifier for the flow
|
|
19
|
+
* @param callbacks - Callbacks for state changes and lifecycle events
|
|
20
|
+
* @param options - Flow configuration options
|
|
21
|
+
* @returns FlowManager instance
|
|
22
|
+
*/
|
|
23
|
+
getManager: <TOutput = unknown>(flowId: string, callbacks: FlowManagerCallbacks<TOutput>, options: FlowUploadOptions<TOutput>) => FlowManager<unknown, TOutput>;
|
|
24
|
+
/**
|
|
25
|
+
* Release a flow manager reference.
|
|
26
|
+
* Decrements ref count and cleans up when reaching zero.
|
|
27
|
+
*
|
|
28
|
+
* @param flowId - Unique identifier for the flow to release
|
|
29
|
+
*/
|
|
30
|
+
releaseManager: (flowId: string) => void;
|
|
31
|
+
}
|
|
32
|
+
/**
|
|
33
|
+
* Props for FlowManagerProvider
|
|
34
|
+
*/
|
|
35
|
+
interface FlowManagerProviderProps {
|
|
36
|
+
children: ReactNode;
|
|
37
|
+
}
|
|
38
|
+
/**
|
|
39
|
+
* Provider that manages FlowManager instances with ref counting and event routing.
|
|
40
|
+
* Ensures managers persist across component re-renders and are only cleaned up
|
|
41
|
+
* when all consuming components unmount.
|
|
42
|
+
*
|
|
43
|
+
* This provider should be nested inside UploadistaProvider to access the upload client
|
|
44
|
+
* and event subscription system.
|
|
45
|
+
*
|
|
46
|
+
* @example
|
|
47
|
+
* ```tsx
|
|
48
|
+
* <UploadistaProvider baseUrl="https://api.example.com" storageId="default">
|
|
49
|
+
* <FlowManagerProvider>
|
|
50
|
+
* <App />
|
|
51
|
+
* </FlowManagerProvider>
|
|
52
|
+
* </UploadistaProvider>
|
|
53
|
+
* ```
|
|
54
|
+
*/
|
|
55
|
+
declare function FlowManagerProvider({
|
|
56
|
+
children
|
|
57
|
+
}: FlowManagerProviderProps): react_jsx_runtime9.JSX.Element;
|
|
58
|
+
/**
|
|
59
|
+
* Hook to access the FlowManager context.
|
|
60
|
+
* Must be used within a FlowManagerProvider.
|
|
61
|
+
*
|
|
62
|
+
* @returns FlowManager context value with getManager and releaseManager functions
|
|
63
|
+
* @throws Error if used outside of FlowManagerProvider
|
|
64
|
+
*
|
|
65
|
+
* @example
|
|
66
|
+
* ```tsx
|
|
67
|
+
* function MyComponent() {
|
|
68
|
+
* const { getManager, releaseManager } = useFlowManagerContext();
|
|
69
|
+
* // Use to create managers...
|
|
70
|
+
* }
|
|
71
|
+
* ```
|
|
72
|
+
*/
|
|
73
|
+
declare function useFlowManagerContext(): FlowManagerContextValue;
|
|
74
|
+
//#endregion
|
|
75
|
+
export { type DragDropOptions, type DragDropState, type FileUploadMetrics, FlowManagerProvider, FlowUploadList, type FlowUploadListProps, type FlowUploadListRenderProps, type FlowUploadState, type FlowUploadStatus, FlowUploadZone, type FlowUploadZoneProps, type FlowUploadZoneRenderProps, type MultiUploadOptions, type MultiUploadState, SimpleFlowUploadList, SimpleFlowUploadListItem, type SimpleFlowUploadListItemProps, type SimpleFlowUploadListProps, SimpleFlowUploadZone, type SimpleFlowUploadZoneProps, SimpleUploadListItem, type SimpleUploadListItemProps, SimpleUploadZone, type SimpleUploadZoneProps, type UploadItem, UploadList, type UploadListProps, type UploadListRenderProps, type UploadMetrics, type UploadState, type UploadStatus, UploadZone, type UploadZoneProps, type UploadZoneRenderProps, UploadistaProvider, type UseDragDropReturn, type UseFlowUploadReturn, type UseMultiFlowUploadReturn, type UseMultiUploadReturn, type UseUploadMetricsOptions, type UseUploadMetricsReturn, type UseUploadOptions, type UseUploadReturn, type UseUploadistaClientOptions, type UseUploadistaClientReturn, useDragDrop, useFlowManagerContext, useFlowUpload, useMultiFlowUpload, useMultiUpload, useUpload, useUploadMetrics, useUploadistaClient, useUploadistaContext };
|
|
76
|
+
//# sourceMappingURL=index.d.mts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.mts","names":[],"sources":["../src/contexts/flow-manager-context.tsx"],"sourcesContent":[],"mappings":";;;;;;;;;;;;UAgDU,uBAAA;;;AA/B0D;;;;;;;EA6ClD,UAAA,EAAA,CAAA,UAAA,OAAA,CAAA,CAAA,MAAA,EAAA,MAAA,EAAA,SAAA,EAFH,oBAEG,CAFkB,OAElB,CAAA,EAAA,OAAA,EADL,iBACK,CADa,OACb,CAAA,EAAA,GAAX,WAAW,CAAA,OAAA,EAAU,OAAV,CAAA;EAkBR;AAqBV;;;;;EAqHgB,cAAA,EAAA,CAAA,MAAA,EAAqB,MAAA,EAAA,GAAI,IAAA;;;;;UA1I/B,wBAAA;YACE;;;;;;;;;;;;;;;;;;;iBAoBI,mBAAA;;GAAkC,2BAAwB,kBAAA,CAAA,GAAA,CAAA;;;;;;;;;;;;;;;;iBAqH1D,qBAAA,CAAA,GAAyB"}
|
package/dist/index.mjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{a as e,c as t,i as n,
|
|
1
|
+
import{a as e,c as t,i as n,l as r,n as i,o as a,r as o,s,t as c,u as l}from"./use-upload-BNYuUjSi.mjs";import{a as u,c as d,i as f,l as p,n as m,o as h,r as g,s as _,t as v}from"./upload-zone-BQeUnuNK.mjs";import{t as y}from"./use-upload-metrics-9uwhKMWa.mjs";export{r as FlowManagerProvider,_ as FlowUploadList,u as FlowUploadZone,d as SimpleFlowUploadList,p as SimpleFlowUploadListItem,h as SimpleFlowUploadZone,g as SimpleUploadListItem,v as SimpleUploadZone,f as UploadList,m as UploadZone,a as UploadistaProvider,n as useDragDrop,l as useFlowManagerContext,o as useFlowUpload,e as useMultiFlowUpload,i as useMultiUpload,c as useUpload,y as useUploadMetrics,t as useUploadistaClient,s as useUploadistaContext};
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{a as e,i as t,n,r,t as i}from"./use-upload-CbeBq3kV.mjs";import{useCallback as a}from"react";import{Fragment as o,jsx as s,jsxs as c}from"react/jsx-runtime";function l({flowConfig:t,options:n,children:r}){let i=e({...n,flowConfig:t});return s(o,{children:r({items:i.state.items,totalProgress:i.state.totalProgress,activeUploads:i.state.activeUploads,completedUploads:i.state.completedUploads,failedUploads:i.state.failedUploads,isUploading:i.isUploading,addFiles:i.addFiles,removeFile:i.removeFile,startUpload:i.startUpload,abortUpload:i.abortUpload,abortAll:i.abortAll,clear:i.clear,retryUpload:i.retryUpload})})}function u({item:e,onAbort:t,onRetry:n,onRemove:r}){return c(`div`,{style:{display:`flex`,alignItems:`center`,gap:`12px`,padding:`8px`,borderBottom:`1px solid #eee`},children:[s(`span`,{style:{color:(()=>{switch(e.status){case`success`:return`green`;case`error`:return`red`;case`uploading`:return`blue`;case`aborted`:return`gray`;default:return`black`}})(),fontSize:`18px`},children:(()=>{switch(e.status){case`success`:return`✓`;case`error`:return`✗`;case`uploading`:return`⟳`;case`aborted`:return`⊘`;default:return`○`}})()}),c(`div`,{style:{flex:1,minWidth:0},children:[s(`div`,{style:{fontSize:`14px`,fontWeight:500,overflow:`hidden`,textOverflow:`ellipsis`,whiteSpace:`nowrap`},children:e.file instanceof File?e.file.name:`Upload`}),e.status===`uploading`&&c(`div`,{style:{marginTop:`4px`},children:[s(`progress`,{value:e.progress,max:100,style:{width:`100%`,height:`4px`}}),c(`div`,{style:{fontSize:`12px`,color:`#666`,marginTop:`2px`},children:[e.progress,`% • `,Math.round(e.bytesUploaded/1024),` KB /`,` `,Math.round(e.totalBytes/1024),` KB`]})]}),e.status===`error`&&s(`div`,{style:{fontSize:`12px`,color:`red`,marginTop:`2px`},children:e.error?.message||`Upload failed`}),e.status===`success`&&s(`div`,{style:{fontSize:`12px`,color:`green`,marginTop:`2px`},children:`Upload complete`})]}),c(`div`,{style:{display:`flex`,gap:`8px`},children:[e.status===`uploading`&&s(`button`,{type:`button`,onClick:t,style:{padding:`4px 8px`,fontSize:`12px`,borderRadius:`4px`,border:`1px solid #ccc`,backgroundColor:`#fff`,cursor:`pointer`},children:`Cancel`}),e.status===`error`&&s(`button`,{type:`button`,onClick:n,style:{padding:`4px 8px`,fontSize:`12px`,borderRadius:`4px`,border:`1px solid #ccc`,backgroundColor:`#fff`,cursor:`pointer`},children:`Retry`}),(e.status===`pending`||e.status===`error`||e.status===`aborted`)&&s(`button`,{type:`button`,onClick:r,style:{padding:`4px 8px`,fontSize:`12px`,borderRadius:`4px`,border:`1px solid #ccc`,backgroundColor:`#fff`,cursor:`pointer`},children:`Remove`})]})]})}function d({flowConfig:e,options:t,className:n=``,showFileInput:r=!0,accept:i}){return s(l,{flowConfig:e,options:t,children:({items:e,addFiles:t,startUpload:a,abortUpload:o,retryUpload:l,removeFile:d,totalProgress:f})=>c(`div`,{className:n,children:[r&&s(`div`,{style:{marginBottom:`16px`},children:s(`input`,{type:`file`,multiple:!0,accept:i,onChange:e=>{e.target.files&&(t(e.target.files),a())},style:{padding:`8px`,border:`1px solid #ccc`,borderRadius:`4px`}})}),e.length>0&&c(`div`,{children:[c(`div`,{style:{marginBottom:`8px`,fontSize:`14px`,color:`#666`},children:[`Total Progress: `,f,`%`]}),s(`div`,{style:{border:`1px solid #eee`,borderRadius:`8px`,overflow:`hidden`},children:e.map(e=>s(u,{item:e,onAbort:()=>o(e.id),onRetry:()=>l(e.id),onRemove:()=>d(e.id)},e.id))})]})]})})}function f({flowConfig:e,options:n,accept:i,multiple:a=!1,children:c}){let l=r({...n,flowConfig:e}),u=t({onFilesReceived:e=>{let t=e[0];t&&l.upload(t)},accept:i?[i]:void 0,multiple:a}),d=e=>{let t=e.target.files?.[0];t&&l.upload(t)};return s(o,{children:c({flowUpload:l,dragDrop:u,isActive:u.state.isDragging||u.state.isOver,openFilePicker:u.openFilePicker,getRootProps:()=>u.dragHandlers,getInputProps:()=>({...u.inputProps,onChange:d})})})}function p({flowConfig:e,options:t,accept:n,className:r=``,dragText:i=`Drop files here`,idleText:a=`Drag & drop files or click to browse`}){return s(f,{flowConfig:e,options:t,accept:n,children:({dragDrop:e,flowUpload:t,getRootProps:n,getInputProps:o,openFilePicker:l})=>c(`div`,{...n(),className:r,style:{border:`2px dashed #ccc`,borderRadius:`8px`,padding:`32px`,textAlign:`center`,cursor:`pointer`,backgroundColor:e.state.isDragging?`#f0f0f0`:`transparent`,transition:`background-color 0.2s`},children:[s(`input`,{...o()}),e.state.isDragging&&s(`p`,{style:{margin:0},children:i}),!e.state.isDragging&&!t.isUploading&&t.state.status===`idle`&&c(`div`,{children:[s(`p`,{style:{margin:`0 0 16px 0`},children:a}),s(`button`,{type:`button`,onClick:e=>{e.stopPropagation(),l()},style:{padding:`8px 16px`,borderRadius:`4px`,border:`1px solid #ccc`,backgroundColor:`#fff`,cursor:`pointer`},children:`Choose Files`})]}),t.isUploading&&c(`div`,{children:[s(`progress`,{value:t.state.progress,max:100,style:{width:`100%`,height:`8px`}}),c(`p`,{style:{margin:`8px 0 0 0`},children:[t.state.progress,`%`]}),s(`button`,{type:`button`,onClick:e=>{e.stopPropagation()},style:{marginTop:`8px`,padding:`4px 12px`,borderRadius:`4px`,border:`1px solid #ccc`,backgroundColor:`#fff`,cursor:`pointer`},children:`Cancel`})]}),t.state.status===`success`&&s(`div`,{children:s(`p`,{style:{margin:0,color:`green`},children:`✓ Upload complete!`})}),t.state.status===`error`&&s(`div`,{children:c(`p`,{style:{margin:0,color:`red`},children:[`✗ Error: `,t.state.error?.message]})})]})})}function m({multiUpload:e,filter:t,sortBy:n,children:r}){let i=e.items;t&&(i=i.filter(t)),n&&(i=[...i].sort(n));let a={idle:i.filter(e=>e.state.status===`idle`),uploading:i.filter(e=>e.state.status===`uploading`),success:i.filter(e=>e.state.status===`success`),error:i.filter(e=>e.state.status===`error`),aborted:i.filter(e=>e.state.status===`aborted`)};return s(o,{children:r({items:i,itemsByStatus:a,multiUpload:e,actions:{removeItem:t=>{e.removeItem(t)},retryItem:t=>{e.retryFailed()},abortItem:t=>{e.removeItem(t.id)},startItem:t=>{e.startAll()}}})})}function h({item:e,actions:t,className:n=``,style:r={},showDetails:i=!0}){let a=e=>{switch(e){case`idle`:return`#6c757d`;case`uploading`:return`#007bff`;case`success`:return`#28a745`;case`error`:return`#dc3545`;case`aborted`:return`#6c757d`;default:return`#6c757d`}},l=e=>{switch(e){case`idle`:return`⏳`;case`uploading`:return`📤`;case`success`:return`✅`;case`error`:return`❌`;case`aborted`:return`⏹️`;default:return`❓`}},u=e=>{if(e===0)return`0 Bytes`;let t=1024,n=[`Bytes`,`KB`,`MB`,`GB`],r=Math.floor(Math.log(e)/Math.log(t));return`${parseFloat((e/t**r).toFixed(2))} ${n[r]}`};return c(`div`,{className:`upload-list-item upload-list-item--${e.state.status} ${n}`,style:{padding:`12px`,border:`1px solid #e0e0e0`,borderRadius:`6px`,marginBottom:`8px`,backgroundColor:`#fff`,transition:`all 0.2s ease`,...r},children:[c(`div`,{style:{display:`flex`,justifyContent:`space-between`,alignItems:`center`,marginBottom:`8px`},children:[c(`div`,{style:{display:`flex`,alignItems:`center`,gap:`8px`,flex:1},children:[s(`span`,{style:{fontSize:`16px`},children:l(e.state.status)}),s(`span`,{style:{fontWeight:`500`,flex:1},children:e.file instanceof File?e.file.name:`File`})]}),s(`span`,{style:{fontSize:`12px`,color:a(e.state.status),fontWeight:`500`,textTransform:`uppercase`},children:e.state.status})]}),e.state.status===`uploading`&&c(`div`,{style:{marginBottom:`8px`},children:[c(`div`,{style:{display:`flex`,justifyContent:`space-between`,alignItems:`center`,marginBottom:`4px`},children:[c(`span`,{style:{fontSize:`12px`,color:`#666`},children:[e.state.progress,`%`]}),i&&e.state.totalBytes&&c(`span`,{style:{fontSize:`12px`,color:`#666`},children:[u(e.state.bytesUploaded),` /`,` `,u(e.state.totalBytes)]})]}),s(`div`,{style:{width:`100%`,height:`6px`,backgroundColor:`#e0e0e0`,borderRadius:`3px`,overflow:`hidden`},children:s(`div`,{style:{width:`${e.state.progress}%`,height:`100%`,backgroundColor:`#007bff`,transition:`width 0.2s ease`}})})]}),i&&c(`div`,{style:{fontSize:`12px`,color:`#666`,marginBottom:`8px`},children:[e.state.totalBytes&&s(`span`,{children:u(e.state.totalBytes)}),e.state.status===`uploading`&&e.state.progress>0&&c(`span`,{children:[` • Progress: `,e.state.progress,`%`]}),e.state.status===`error`&&e.state.error&&s(`div`,{style:{color:`#dc3545`,marginTop:`4px`},children:e.state.error.message})]}),c(`div`,{style:{display:`flex`,gap:`8px`,flexWrap:`wrap`},children:[e.state.status===`idle`&&c(o,{children:[s(`button`,{type:`button`,onClick:()=>t.startItem(e),style:{padding:`4px 8px`,fontSize:`12px`,border:`1px solid #007bff`,backgroundColor:`#007bff`,color:`white`,borderRadius:`4px`,cursor:`pointer`},children:`Start`}),s(`button`,{type:`button`,onClick:()=>t.removeItem(e.id),style:{padding:`4px 8px`,fontSize:`12px`,border:`1px solid #6c757d`,backgroundColor:`transparent`,color:`#6c757d`,borderRadius:`4px`,cursor:`pointer`},children:`Remove`})]}),e.state.status===`uploading`&&s(`button`,{type:`button`,onClick:()=>t.abortItem(e),style:{padding:`4px 8px`,fontSize:`12px`,border:`1px solid #dc3545`,backgroundColor:`transparent`,color:`#dc3545`,borderRadius:`4px`,cursor:`pointer`},children:`Cancel`}),e.state.status===`error`&&c(o,{children:[s(`button`,{type:`button`,onClick:()=>t.retryItem(e),style:{padding:`4px 8px`,fontSize:`12px`,border:`1px solid #28a745`,backgroundColor:`#28a745`,color:`white`,borderRadius:`4px`,cursor:`pointer`},children:`Retry`}),s(`button`,{type:`button`,onClick:()=>t.removeItem(e.id),style:{padding:`4px 8px`,fontSize:`12px`,border:`1px solid #6c757d`,backgroundColor:`transparent`,color:`#6c757d`,borderRadius:`4px`,cursor:`pointer`},children:`Remove`})]}),e.state.status===`success`&&s(`button`,{type:`button`,onClick:()=>t.removeItem(e.id),style:{padding:`4px 8px`,fontSize:`12px`,border:`1px solid #6c757d`,backgroundColor:`transparent`,color:`#6c757d`,borderRadius:`4px`,cursor:`pointer`},children:`Remove`}),e.state.status===`aborted`&&c(o,{children:[s(`button`,{type:`button`,onClick:()=>t.retryItem(e),style:{padding:`4px 8px`,fontSize:`12px`,border:`1px solid #007bff`,backgroundColor:`#007bff`,color:`white`,borderRadius:`4px`,cursor:`pointer`},children:`Retry`}),s(`button`,{type:`button`,onClick:()=>t.removeItem(e.id),style:{padding:`4px 8px`,fontSize:`12px`,border:`1px solid #6c757d`,backgroundColor:`transparent`,color:`#6c757d`,borderRadius:`4px`,cursor:`pointer`},children:`Remove`})]})]})]})}function g({children:e,multiple:r=!0,multiUploadOptions:c={},uploadOptions:l={},onUploadStart:u,onValidationError:d,...f}){let p=i(l),m=n(c),h=a(e=>{let t=[];if(!r&&e.length>1&&t.push(`Single file mode is enabled. Please select only one file. You selected ${e.length} files.`),f.accept&&f.accept.length>0){let n=e.filter(e=>!f.accept?.some(t=>{if(t.startsWith(`.`))return e.name.toLowerCase().endsWith(t.toLowerCase());if(t.endsWith(`/*`)){let n=t.slice(0,-2);return e.type.startsWith(n)}else return e.type===t}));if(n.length>0){let e=n.map(e=>`"${e.name}" (${e.type})`).join(`, `),r=f.accept.join(`, `);t.push(`Invalid file type(s): ${e}. Accepted types: ${r}.`)}}return t.length>0?t:null},[r,f.accept]),g=e=>{u?.(e),r&&m?(m.addFiles(e),setTimeout(()=>m.startAll(),0)):!r&&p&&e.length>0&&e[0]&&p.upload(e[0])},_=a(e=>{console.error(`Upload zone validation errors:`,e),d?.(e)},[d]),v=t({...f,multiple:r,validator:h,onFilesReceived:g,onValidationError:_}),y=v.state.isDragging||v.state.isOver,b=r?m?.state.isUploading??!1:p?.isUploading??!1;return s(o,{children:e({dragDrop:v,upload:p,multiUpload:m,openFilePicker:v.openFilePicker,isActive:y,isProcessing:b})})}function _({className:e=``,style:t={},text:n={},errorStyle:r={},children:i,...a}){let o={idle:a.multiple?`Drag files here or click to select`:`Drag a file here or click to select`,dragging:a.multiple?`Drop files here...`:`Drop file here...`,uploading:`Uploading...`,...n};return i?s(g,{...a,children:i}):s(g,{...a,children:({dragDrop:n,upload:i,multiUpload:a,openFilePicker:l,isActive:u,isProcessing:d})=>c(`button`,{type:`button`,onKeyDown:e=>{(e.key===`Enter`||e.key===` `)&&l()},onKeyUp:e=>{(e.key===`Enter`||e.key===` `)&&l()},...n.dragHandlers,onClick:l,className:`upload-zone ${u?`upload-zone--active`:``} ${d?`upload-zone--processing`:``} ${e}`,style:{border:u?`2px dashed #007bff`:`2px dashed #ccc`,borderRadius:`8px`,padding:`2rem`,textAlign:`center`,cursor:`pointer`,backgroundColor:u?`#f8f9fa`:`transparent`,transition:`all 0.2s ease`,minHeight:`120px`,display:`flex`,flexDirection:`column`,alignItems:`center`,justifyContent:`center`,...t},children:[n.state.isDragging?s(`p`,{style:{margin:0,fontSize:`16px`,color:`#007bff`},children:o.dragging}):d?c(`div`,{style:{textAlign:`center`},children:[s(`p`,{style:{margin:`0 0 10px 0`,fontSize:`14px`},children:o.uploading}),i&&c(`div`,{children:[s(`progress`,{value:i.state.progress,max:100,style:{width:`200px`,height:`8px`}}),c(`p`,{style:{margin:`5px 0 0 0`,fontSize:`12px`,color:`#666`},children:[i.state.progress,`%`]})]}),a&&c(`div`,{children:[s(`progress`,{value:a.state.progress,max:100,style:{width:`200px`,height:`8px`}}),c(`p`,{style:{margin:`5px 0 0 0`,fontSize:`12px`,color:`#666`},children:[a.state.progress,`% (`,a.state.uploading,` `,`uploading, `,a.state.successful,` completed)`]})]})]}):s(`p`,{style:{margin:0,fontSize:`16px`,color:`#666`},children:o.idle}),n.state.errors.length>0&&c(`div`,{style:{marginTop:`10px`,padding:`8px 12px`,backgroundColor:`#f8d7da`,border:`1px solid #f5c6cb`,borderRadius:`4px`,maxWidth:`100%`,...r},children:[s(`p`,{style:{margin:`0 0 5px 0`,fontSize:`12px`,fontWeight:`bold`,color:`#721c24`},children:`Validation Errors:`}),n.state.errors.map((e,t)=>c(`p`,{style:{color:`#721c24`,fontSize:`11px`,margin:`2px 0`,lineHeight:`1.3`},children:[`• `,e]},t))]}),s(`input`,{...n.inputProps})]})})}export{f as a,d as c,m as i,u as l,g as n,p as o,h as r,l as s,_ as t};
|
|
2
|
-
//# sourceMappingURL=upload-zone-
|
|
1
|
+
import{a as e,i as t,n,r,t as i}from"./use-upload-BNYuUjSi.mjs";import{useCallback as a}from"react";import{Fragment as o,jsx as s,jsxs as c}from"react/jsx-runtime";function l({flowConfig:t,options:n,children:r}){let i=e({...n,flowConfig:t});return s(o,{children:r({items:i.state.items,totalProgress:i.state.totalProgress,activeUploads:i.state.activeUploads,completedUploads:i.state.completedUploads,failedUploads:i.state.failedUploads,isUploading:i.isUploading,addFiles:i.addFiles,removeFile:i.removeFile,startUpload:i.startUpload,abortUpload:i.abortUpload,abortAll:i.abortAll,clear:i.clear,retryUpload:i.retryUpload})})}function u({item:e,onAbort:t,onRetry:n,onRemove:r}){return c(`div`,{style:{display:`flex`,alignItems:`center`,gap:`12px`,padding:`8px`,borderBottom:`1px solid #eee`},children:[s(`span`,{style:{color:(()=>{switch(e.status){case`success`:return`green`;case`error`:return`red`;case`uploading`:return`blue`;case`aborted`:return`gray`;default:return`black`}})(),fontSize:`18px`},children:(()=>{switch(e.status){case`success`:return`✓`;case`error`:return`✗`;case`uploading`:return`⟳`;case`aborted`:return`⊘`;default:return`○`}})()}),c(`div`,{style:{flex:1,minWidth:0},children:[s(`div`,{style:{fontSize:`14px`,fontWeight:500,overflow:`hidden`,textOverflow:`ellipsis`,whiteSpace:`nowrap`},children:e.file instanceof File?e.file.name:`Upload`}),e.status===`uploading`&&c(`div`,{style:{marginTop:`4px`},children:[s(`progress`,{value:e.progress,max:100,style:{width:`100%`,height:`4px`}}),c(`div`,{style:{fontSize:`12px`,color:`#666`,marginTop:`2px`},children:[e.progress,`% • `,Math.round(e.bytesUploaded/1024),` KB /`,` `,Math.round(e.totalBytes/1024),` KB`]})]}),e.status===`error`&&s(`div`,{style:{fontSize:`12px`,color:`red`,marginTop:`2px`},children:e.error?.message||`Upload failed`}),e.status===`success`&&s(`div`,{style:{fontSize:`12px`,color:`green`,marginTop:`2px`},children:`Upload complete`})]}),c(`div`,{style:{display:`flex`,gap:`8px`},children:[e.status===`uploading`&&s(`button`,{type:`button`,onClick:t,style:{padding:`4px 8px`,fontSize:`12px`,borderRadius:`4px`,border:`1px solid #ccc`,backgroundColor:`#fff`,cursor:`pointer`},children:`Cancel`}),e.status===`error`&&s(`button`,{type:`button`,onClick:n,style:{padding:`4px 8px`,fontSize:`12px`,borderRadius:`4px`,border:`1px solid #ccc`,backgroundColor:`#fff`,cursor:`pointer`},children:`Retry`}),(e.status===`pending`||e.status===`error`||e.status===`aborted`)&&s(`button`,{type:`button`,onClick:r,style:{padding:`4px 8px`,fontSize:`12px`,borderRadius:`4px`,border:`1px solid #ccc`,backgroundColor:`#fff`,cursor:`pointer`},children:`Remove`})]})]})}function d({flowConfig:e,options:t,className:n=``,showFileInput:r=!0,accept:i}){return s(l,{flowConfig:e,options:t,children:({items:e,addFiles:t,startUpload:a,abortUpload:o,retryUpload:l,removeFile:d,totalProgress:f})=>c(`div`,{className:n,children:[r&&s(`div`,{style:{marginBottom:`16px`},children:s(`input`,{type:`file`,multiple:!0,accept:i,onChange:e=>{e.target.files&&(t(e.target.files),a())},style:{padding:`8px`,border:`1px solid #ccc`,borderRadius:`4px`}})}),e.length>0&&c(`div`,{children:[c(`div`,{style:{marginBottom:`8px`,fontSize:`14px`,color:`#666`},children:[`Total Progress: `,f,`%`]}),s(`div`,{style:{border:`1px solid #eee`,borderRadius:`8px`,overflow:`hidden`},children:e.map(e=>s(u,{item:e,onAbort:()=>o(e.id),onRetry:()=>l(e.id),onRemove:()=>d(e.id)},e.id))})]})]})})}function f({flowConfig:e,options:n,accept:i,multiple:a=!1,children:c}){let l=r({...n,flowConfig:e}),u=t({onFilesReceived:e=>{let t=e[0];t&&l.upload(t)},accept:i?[i]:void 0,multiple:a}),d=e=>{let t=e.target.files?.[0];t&&l.upload(t)};return s(o,{children:c({flowUpload:l,dragDrop:u,isActive:u.state.isDragging||u.state.isOver,openFilePicker:u.openFilePicker,getRootProps:()=>u.dragHandlers,getInputProps:()=>({...u.inputProps,onChange:d})})})}function p({flowConfig:e,options:t,accept:n,className:r=``,dragText:i=`Drop files here`,idleText:a=`Drag & drop files or click to browse`}){return s(f,{flowConfig:e,options:t,accept:n,children:({dragDrop:e,flowUpload:t,getRootProps:n,getInputProps:o,openFilePicker:l})=>c(`div`,{...n(),className:r,style:{border:`2px dashed #ccc`,borderRadius:`8px`,padding:`32px`,textAlign:`center`,cursor:`pointer`,backgroundColor:e.state.isDragging?`#f0f0f0`:`transparent`,transition:`background-color 0.2s`},children:[s(`input`,{...o()}),e.state.isDragging&&s(`p`,{style:{margin:0},children:i}),!e.state.isDragging&&!t.isUploading&&t.state.status===`idle`&&c(`div`,{children:[s(`p`,{style:{margin:`0 0 16px 0`},children:a}),s(`button`,{type:`button`,onClick:e=>{e.stopPropagation(),l()},style:{padding:`8px 16px`,borderRadius:`4px`,border:`1px solid #ccc`,backgroundColor:`#fff`,cursor:`pointer`},children:`Choose Files`})]}),t.isUploading&&c(`div`,{children:[s(`progress`,{value:t.state.progress,max:100,style:{width:`100%`,height:`8px`}}),c(`p`,{style:{margin:`8px 0 0 0`},children:[t.state.progress,`%`]}),s(`button`,{type:`button`,onClick:e=>{e.stopPropagation()},style:{marginTop:`8px`,padding:`4px 12px`,borderRadius:`4px`,border:`1px solid #ccc`,backgroundColor:`#fff`,cursor:`pointer`},children:`Cancel`})]}),t.state.status===`success`&&s(`div`,{children:s(`p`,{style:{margin:0,color:`green`},children:`✓ Upload complete!`})}),t.state.status===`error`&&s(`div`,{children:c(`p`,{style:{margin:0,color:`red`},children:[`✗ Error: `,t.state.error?.message]})})]})})}function m({multiUpload:e,filter:t,sortBy:n,children:r}){let i=e.items;t&&(i=i.filter(t)),n&&(i=[...i].sort(n));let a={idle:i.filter(e=>e.state.status===`idle`),uploading:i.filter(e=>e.state.status===`uploading`),success:i.filter(e=>e.state.status===`success`),error:i.filter(e=>e.state.status===`error`),aborted:i.filter(e=>e.state.status===`aborted`)};return s(o,{children:r({items:i,itemsByStatus:a,multiUpload:e,actions:{removeItem:t=>{e.removeItem(t)},retryItem:t=>{e.retryFailed()},abortItem:t=>{e.removeItem(t.id)},startItem:t=>{e.startAll()}}})})}function h({item:e,actions:t,className:n=``,style:r={},showDetails:i=!0}){let a=e=>{switch(e){case`idle`:return`#6c757d`;case`uploading`:return`#007bff`;case`success`:return`#28a745`;case`error`:return`#dc3545`;case`aborted`:return`#6c757d`;default:return`#6c757d`}},l=e=>{switch(e){case`idle`:return`⏳`;case`uploading`:return`📤`;case`success`:return`✅`;case`error`:return`❌`;case`aborted`:return`⏹️`;default:return`❓`}},u=e=>{if(e===0)return`0 Bytes`;let t=1024,n=[`Bytes`,`KB`,`MB`,`GB`],r=Math.floor(Math.log(e)/Math.log(t));return`${parseFloat((e/t**r).toFixed(2))} ${n[r]}`};return c(`div`,{className:`upload-list-item upload-list-item--${e.state.status} ${n}`,style:{padding:`12px`,border:`1px solid #e0e0e0`,borderRadius:`6px`,marginBottom:`8px`,backgroundColor:`#fff`,transition:`all 0.2s ease`,...r},children:[c(`div`,{style:{display:`flex`,justifyContent:`space-between`,alignItems:`center`,marginBottom:`8px`},children:[c(`div`,{style:{display:`flex`,alignItems:`center`,gap:`8px`,flex:1},children:[s(`span`,{style:{fontSize:`16px`},children:l(e.state.status)}),s(`span`,{style:{fontWeight:`500`,flex:1},children:e.file instanceof File?e.file.name:`File`})]}),s(`span`,{style:{fontSize:`12px`,color:a(e.state.status),fontWeight:`500`,textTransform:`uppercase`},children:e.state.status})]}),e.state.status===`uploading`&&c(`div`,{style:{marginBottom:`8px`},children:[c(`div`,{style:{display:`flex`,justifyContent:`space-between`,alignItems:`center`,marginBottom:`4px`},children:[c(`span`,{style:{fontSize:`12px`,color:`#666`},children:[e.state.progress,`%`]}),i&&e.state.totalBytes&&c(`span`,{style:{fontSize:`12px`,color:`#666`},children:[u(e.state.bytesUploaded),` /`,` `,u(e.state.totalBytes)]})]}),s(`div`,{style:{width:`100%`,height:`6px`,backgroundColor:`#e0e0e0`,borderRadius:`3px`,overflow:`hidden`},children:s(`div`,{style:{width:`${e.state.progress}%`,height:`100%`,backgroundColor:`#007bff`,transition:`width 0.2s ease`}})})]}),i&&c(`div`,{style:{fontSize:`12px`,color:`#666`,marginBottom:`8px`},children:[e.state.totalBytes&&s(`span`,{children:u(e.state.totalBytes)}),e.state.status===`uploading`&&e.state.progress>0&&c(`span`,{children:[` • Progress: `,e.state.progress,`%`]}),e.state.status===`error`&&e.state.error&&s(`div`,{style:{color:`#dc3545`,marginTop:`4px`},children:e.state.error.message})]}),c(`div`,{style:{display:`flex`,gap:`8px`,flexWrap:`wrap`},children:[e.state.status===`idle`&&c(o,{children:[s(`button`,{type:`button`,onClick:()=>t.startItem(e),style:{padding:`4px 8px`,fontSize:`12px`,border:`1px solid #007bff`,backgroundColor:`#007bff`,color:`white`,borderRadius:`4px`,cursor:`pointer`},children:`Start`}),s(`button`,{type:`button`,onClick:()=>t.removeItem(e.id),style:{padding:`4px 8px`,fontSize:`12px`,border:`1px solid #6c757d`,backgroundColor:`transparent`,color:`#6c757d`,borderRadius:`4px`,cursor:`pointer`},children:`Remove`})]}),e.state.status===`uploading`&&s(`button`,{type:`button`,onClick:()=>t.abortItem(e),style:{padding:`4px 8px`,fontSize:`12px`,border:`1px solid #dc3545`,backgroundColor:`transparent`,color:`#dc3545`,borderRadius:`4px`,cursor:`pointer`},children:`Cancel`}),e.state.status===`error`&&c(o,{children:[s(`button`,{type:`button`,onClick:()=>t.retryItem(e),style:{padding:`4px 8px`,fontSize:`12px`,border:`1px solid #28a745`,backgroundColor:`#28a745`,color:`white`,borderRadius:`4px`,cursor:`pointer`},children:`Retry`}),s(`button`,{type:`button`,onClick:()=>t.removeItem(e.id),style:{padding:`4px 8px`,fontSize:`12px`,border:`1px solid #6c757d`,backgroundColor:`transparent`,color:`#6c757d`,borderRadius:`4px`,cursor:`pointer`},children:`Remove`})]}),e.state.status===`success`&&s(`button`,{type:`button`,onClick:()=>t.removeItem(e.id),style:{padding:`4px 8px`,fontSize:`12px`,border:`1px solid #6c757d`,backgroundColor:`transparent`,color:`#6c757d`,borderRadius:`4px`,cursor:`pointer`},children:`Remove`}),e.state.status===`aborted`&&c(o,{children:[s(`button`,{type:`button`,onClick:()=>t.retryItem(e),style:{padding:`4px 8px`,fontSize:`12px`,border:`1px solid #007bff`,backgroundColor:`#007bff`,color:`white`,borderRadius:`4px`,cursor:`pointer`},children:`Retry`}),s(`button`,{type:`button`,onClick:()=>t.removeItem(e.id),style:{padding:`4px 8px`,fontSize:`12px`,border:`1px solid #6c757d`,backgroundColor:`transparent`,color:`#6c757d`,borderRadius:`4px`,cursor:`pointer`},children:`Remove`})]})]})]})}function g({children:e,multiple:r=!0,multiUploadOptions:c={},uploadOptions:l={},onUploadStart:u,onValidationError:d,...f}){let p=i(l),m=n(c),h=a(e=>{let t=[];if(!r&&e.length>1&&t.push(`Single file mode is enabled. Please select only one file. You selected ${e.length} files.`),f.accept&&f.accept.length>0){let n=e.filter(e=>!f.accept?.some(t=>{if(t.startsWith(`.`))return e.name.toLowerCase().endsWith(t.toLowerCase());if(t.endsWith(`/*`)){let n=t.slice(0,-2);return e.type.startsWith(n)}else return e.type===t}));if(n.length>0){let e=n.map(e=>`"${e.name}" (${e.type})`).join(`, `),r=f.accept.join(`, `);t.push(`Invalid file type(s): ${e}. Accepted types: ${r}.`)}}return t.length>0?t:null},[r,f.accept]),g=e=>{u?.(e),r&&m?(m.addFiles(e),setTimeout(()=>m.startAll(),0)):!r&&p&&e.length>0&&e[0]&&p.upload(e[0])},_=a(e=>{console.error(`Upload zone validation errors:`,e),d?.(e)},[d]),v=t({...f,multiple:r,validator:h,onFilesReceived:g,onValidationError:_}),y=v.state.isDragging||v.state.isOver,b=r?m?.state.isUploading??!1:p?.isUploading??!1;return s(o,{children:e({dragDrop:v,upload:p,multiUpload:m,openFilePicker:v.openFilePicker,isActive:y,isProcessing:b})})}function _({className:e=``,style:t={},text:n={},errorStyle:r={},children:i,...a}){let o={idle:a.multiple?`Drag files here or click to select`:`Drag a file here or click to select`,dragging:a.multiple?`Drop files here...`:`Drop file here...`,uploading:`Uploading...`,...n};return i?s(g,{...a,children:i}):s(g,{...a,children:({dragDrop:n,upload:i,multiUpload:a,openFilePicker:l,isActive:u,isProcessing:d})=>c(`button`,{type:`button`,onKeyDown:e=>{(e.key===`Enter`||e.key===` `)&&l()},onKeyUp:e=>{(e.key===`Enter`||e.key===` `)&&l()},...n.dragHandlers,onClick:l,className:`upload-zone ${u?`upload-zone--active`:``} ${d?`upload-zone--processing`:``} ${e}`,style:{border:u?`2px dashed #007bff`:`2px dashed #ccc`,borderRadius:`8px`,padding:`2rem`,textAlign:`center`,cursor:`pointer`,backgroundColor:u?`#f8f9fa`:`transparent`,transition:`all 0.2s ease`,minHeight:`120px`,display:`flex`,flexDirection:`column`,alignItems:`center`,justifyContent:`center`,...t},children:[n.state.isDragging?s(`p`,{style:{margin:0,fontSize:`16px`,color:`#007bff`},children:o.dragging}):d?c(`div`,{style:{textAlign:`center`},children:[s(`p`,{style:{margin:`0 0 10px 0`,fontSize:`14px`},children:o.uploading}),i&&c(`div`,{children:[s(`progress`,{value:i.state.progress,max:100,style:{width:`200px`,height:`8px`}}),c(`p`,{style:{margin:`5px 0 0 0`,fontSize:`12px`,color:`#666`},children:[i.state.progress,`%`]})]}),a&&c(`div`,{children:[s(`progress`,{value:a.state.progress,max:100,style:{width:`200px`,height:`8px`}}),c(`p`,{style:{margin:`5px 0 0 0`,fontSize:`12px`,color:`#666`},children:[a.state.progress,`% (`,a.state.uploading,` `,`uploading, `,a.state.successful,` completed)`]})]})]}):s(`p`,{style:{margin:0,fontSize:`16px`,color:`#666`},children:o.idle}),n.state.errors.length>0&&c(`div`,{style:{marginTop:`10px`,padding:`8px 12px`,backgroundColor:`#f8d7da`,border:`1px solid #f5c6cb`,borderRadius:`4px`,maxWidth:`100%`,...r},children:[s(`p`,{style:{margin:`0 0 5px 0`,fontSize:`12px`,fontWeight:`bold`,color:`#721c24`},children:`Validation Errors:`}),n.state.errors.map((e,t)=>c(`p`,{style:{color:`#721c24`,fontSize:`11px`,margin:`2px 0`,lineHeight:`1.3`},children:[`• `,e]},t))]}),s(`input`,{...n.inputProps})]})})}export{f as a,d as c,m as i,u as l,g as n,p as o,h as r,l as s,_ as t};
|
|
2
|
+
//# sourceMappingURL=upload-zone-BQeUnuNK.mjs.map
|