@uploadista/react 0.0.20-beta.1 → 0.0.20-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 +3 -3
- package/dist/components/index.mjs +1 -1
- package/dist/flow-upload-list-SbpCaxRq.mjs +2 -0
- package/dist/flow-upload-list-SbpCaxRq.mjs.map +1 -0
- package/dist/hooks/index.d.mts +3 -3
- package/dist/hooks/index.mjs +1 -1
- package/dist/index.d.mts +6 -6
- package/dist/index.mjs +1 -1
- package/dist/{uploadista-provider-CM48PPSp.d.mts → uploadista-provider-C1l0iBc9.d.mts} +503 -309
- package/dist/uploadista-provider-C1l0iBc9.d.mts.map +1 -0
- package/dist/use-upload-BvvGROMR.mjs +2 -0
- package/dist/use-upload-BvvGROMR.mjs.map +1 -0
- package/dist/{use-uploadista-client-m9nF-irM.d.mts → use-uploadista-client-DHbLSpIb.d.mts} +120 -286
- package/dist/use-uploadista-client-DHbLSpIb.d.mts.map +1 -0
- package/dist/use-uploadista-events-BwUD-2Ck.mjs +2 -0
- package/dist/use-uploadista-events-BwUD-2Ck.mjs.map +1 -0
- package/dist/{use-upload-metrics-DhzS4lhG.d.mts → use-uploadista-events-CtDXJYrR.d.mts} +169 -371
- package/dist/use-uploadista-events-CtDXJYrR.d.mts.map +1 -0
- package/package.json +6 -6
- package/src/components/flow-primitives.tsx +839 -0
- package/src/components/index.tsx +31 -13
- package/src/hooks/index.ts +25 -37
- package/src/index.ts +90 -81
- package/dist/upload-zone-BjWHuP7p.mjs +0 -6
- package/dist/upload-zone-BjWHuP7p.mjs.map +0 -1
- package/dist/uploadista-provider-CM48PPSp.d.mts.map +0 -1
- package/dist/use-upload-BDHVhQsI.mjs +0 -2
- package/dist/use-upload-BDHVhQsI.mjs.map +0 -1
- package/dist/use-upload-metrics-Df90wIos.mjs +0 -2
- package/dist/use-upload-metrics-Df90wIos.mjs.map +0 -1
- package/dist/use-upload-metrics-DhzS4lhG.d.mts.map +0 -1
- package/dist/use-uploadista-client-m9nF-irM.d.mts.map +0 -1
- package/src/components/flow-input.tsx +0 -299
- package/src/components/flow-upload-zone.tsx +0 -441
- package/src/hooks/use-flow-execution.ts +0 -502
- package/src/hooks/use-flow-upload.ts +0 -299
|
@@ -1,55 +1,519 @@
|
|
|
1
|
-
import { S as
|
|
1
|
+
import { S as UseDragDropReturn, b as DragDropOptions, d as UseUploadOptions, f as UseUploadReturn, i as MultiUploadOptions, m as FlowInputMetadata, n as UseUploadistaClientReturn, o as UploadItem, s as UseMultiUploadReturn, t as UseUploadistaClientOptions, x as DragDropState } from "./use-uploadista-client-DHbLSpIb.mjs";
|
|
2
2
|
import React$1, { ReactNode } from "react";
|
|
3
|
+
import { FlowUploadState, FlowUploadStatus, InputExecutionState } from "@uploadista/client-core";
|
|
4
|
+
import { TypedOutput } from "@uploadista/core/flow";
|
|
3
5
|
import * as react_jsx_runtime0 from "react/jsx-runtime";
|
|
4
|
-
import { BrowserUploadInput, FlowUploadConfig, FlowUploadItem,
|
|
6
|
+
import { BrowserUploadInput, FlowUploadConfig, FlowUploadItem, MultiFlowUploadOptions, UploadistaEvent as UploadistaEvent$1 } from "@uploadista/client-browser";
|
|
5
7
|
|
|
6
|
-
//#region src/components/flow-
|
|
7
|
-
|
|
8
|
+
//#region src/components/flow-primitives.d.ts
|
|
9
|
+
|
|
10
|
+
/**
|
|
11
|
+
* Context value provided by the Flow component root.
|
|
12
|
+
* Contains all flow state and actions.
|
|
13
|
+
*/
|
|
14
|
+
interface FlowContextValue {
|
|
15
|
+
/** Current upload state */
|
|
16
|
+
state: FlowUploadState;
|
|
17
|
+
/** Discovered input nodes metadata (null until discovery completes) */
|
|
18
|
+
inputMetadata: FlowInputMetadata[] | null;
|
|
19
|
+
/** Current input values set via setInput() */
|
|
20
|
+
inputs: Record<string, unknown>;
|
|
21
|
+
/** Per-input execution state for multi-input flows */
|
|
22
|
+
inputStates: ReadonlyMap<string, InputExecutionState>;
|
|
23
|
+
/** Set an input value for a specific node */
|
|
24
|
+
setInput: (nodeId: string, value: unknown) => void;
|
|
25
|
+
/** Execute the flow with current inputs */
|
|
26
|
+
execute: () => Promise<void>;
|
|
27
|
+
/** Upload a single file through the flow */
|
|
28
|
+
upload: (file: File | Blob) => Promise<void>;
|
|
29
|
+
/** Abort the current upload */
|
|
30
|
+
abort: () => void;
|
|
31
|
+
/** Pause the current upload */
|
|
32
|
+
pause: () => void;
|
|
33
|
+
/** Reset the upload state and clear all inputs */
|
|
34
|
+
reset: () => void;
|
|
35
|
+
/** Whether an upload or flow execution is in progress */
|
|
36
|
+
isUploading: boolean;
|
|
37
|
+
/** Whether the file is currently being uploaded */
|
|
38
|
+
isUploadingFile: boolean;
|
|
39
|
+
/** Whether the flow is currently processing */
|
|
40
|
+
isProcessing: boolean;
|
|
41
|
+
/** Whether the hook is discovering flow inputs */
|
|
42
|
+
isDiscoveringInputs: boolean;
|
|
43
|
+
}
|
|
44
|
+
/**
|
|
45
|
+
* Hook to access flow context from within a Flow component.
|
|
46
|
+
* @throws Error if used outside of a Flow component
|
|
47
|
+
*/
|
|
48
|
+
declare function useFlowContext(): FlowContextValue;
|
|
49
|
+
/**
|
|
50
|
+
* Context value for a specific input node within a Flow.
|
|
51
|
+
*/
|
|
52
|
+
interface FlowInputContextValue {
|
|
53
|
+
/** Input node ID */
|
|
54
|
+
nodeId: string;
|
|
8
55
|
/** Input metadata from flow discovery */
|
|
9
|
-
|
|
10
|
-
/**
|
|
56
|
+
metadata: FlowInputMetadata;
|
|
57
|
+
/** Current value for this input */
|
|
58
|
+
value: unknown;
|
|
59
|
+
/** Set the value for this input */
|
|
60
|
+
setValue: (value: unknown) => void;
|
|
61
|
+
/** Per-input execution state (if available) */
|
|
62
|
+
state: InputExecutionState | undefined;
|
|
63
|
+
}
|
|
64
|
+
/**
|
|
65
|
+
* Hook to access flow input context from within a Flow.Input component.
|
|
66
|
+
* @throws Error if used outside of a Flow.Input component
|
|
67
|
+
*/
|
|
68
|
+
declare function useFlowInputContext(): FlowInputContextValue;
|
|
69
|
+
/**
|
|
70
|
+
* Props for the Flow root component.
|
|
71
|
+
*/
|
|
72
|
+
interface FlowProps {
|
|
73
|
+
/** Flow ID to execute */
|
|
74
|
+
flowId: string;
|
|
75
|
+
/** Storage ID for file uploads */
|
|
76
|
+
storageId: string;
|
|
77
|
+
/** Optional output node ID to wait for */
|
|
78
|
+
outputNodeId?: string;
|
|
79
|
+
/** Called when flow completes successfully */
|
|
80
|
+
onSuccess?: (outputs: TypedOutput[]) => void;
|
|
81
|
+
/** Called when flow fails */
|
|
82
|
+
onError?: (error: Error) => void;
|
|
83
|
+
/** Called on upload progress */
|
|
84
|
+
onProgress?: (uploadId: string, bytesUploaded: number, totalBytes: number | null) => void;
|
|
85
|
+
/** Called when flow completes with all outputs */
|
|
86
|
+
onFlowComplete?: (outputs: TypedOutput[]) => void;
|
|
87
|
+
/** Called when upload is aborted */
|
|
88
|
+
onAbort?: () => void;
|
|
89
|
+
/** Children to render */
|
|
90
|
+
children: ReactNode;
|
|
91
|
+
}
|
|
92
|
+
/**
|
|
93
|
+
* Root component for flow-based uploads.
|
|
94
|
+
* Provides context for all Flow sub-components.
|
|
95
|
+
*
|
|
96
|
+
* @example
|
|
97
|
+
* ```tsx
|
|
98
|
+
* <Flow flowId="image-optimizer" storageId="s3" onSuccess={handleSuccess}>
|
|
99
|
+
* <Flow.DropZone accept="image/*">
|
|
100
|
+
* {({ isDragging, getRootProps, getInputProps }) => (
|
|
101
|
+
* <div {...getRootProps()}>
|
|
102
|
+
* <input {...getInputProps()} />
|
|
103
|
+
* {isDragging ? "Drop here" : "Drag or click"}
|
|
104
|
+
* </div>
|
|
105
|
+
* )}
|
|
106
|
+
* </Flow.DropZone>
|
|
107
|
+
* </Flow>
|
|
108
|
+
* ```
|
|
109
|
+
*/
|
|
110
|
+
declare function FlowRoot({
|
|
111
|
+
flowId,
|
|
112
|
+
storageId,
|
|
113
|
+
outputNodeId,
|
|
114
|
+
onSuccess,
|
|
115
|
+
onError,
|
|
116
|
+
onProgress,
|
|
117
|
+
onFlowComplete,
|
|
118
|
+
onAbort,
|
|
119
|
+
children
|
|
120
|
+
}: FlowProps): react_jsx_runtime0.JSX.Element;
|
|
121
|
+
/**
|
|
122
|
+
* Render props for Flow.DropZone component.
|
|
123
|
+
*/
|
|
124
|
+
interface FlowDropZoneRenderProps {
|
|
125
|
+
/** Whether files are being dragged over */
|
|
126
|
+
isDragging: boolean;
|
|
127
|
+
/** Whether drag is over the zone */
|
|
128
|
+
isOver: boolean;
|
|
129
|
+
/** Upload progress (0-100) */
|
|
130
|
+
progress: number;
|
|
131
|
+
/** Current flow status */
|
|
132
|
+
status: FlowUploadStatus;
|
|
133
|
+
/** Props to spread on the drop zone container */
|
|
134
|
+
getRootProps: () => UseDragDropReturn["dragHandlers"];
|
|
135
|
+
/** Props to spread on the hidden file input */
|
|
136
|
+
getInputProps: () => UseDragDropReturn["inputProps"];
|
|
137
|
+
/** Open file picker programmatically */
|
|
138
|
+
openFilePicker: () => void;
|
|
139
|
+
/** Current drag-drop state */
|
|
140
|
+
dragDropState: DragDropState;
|
|
141
|
+
}
|
|
142
|
+
/**
|
|
143
|
+
* Props for Flow.DropZone component.
|
|
144
|
+
*/
|
|
145
|
+
interface FlowDropZoneProps {
|
|
146
|
+
/** Accepted file types (e.g., "image/*", ".pdf") */
|
|
11
147
|
accept?: string;
|
|
12
|
-
/**
|
|
13
|
-
|
|
14
|
-
/**
|
|
15
|
-
|
|
16
|
-
/** Callback when value changes */
|
|
17
|
-
onChange: (value: File | string) => void;
|
|
18
|
-
/** Whether the input is disabled */
|
|
19
|
-
disabled?: boolean;
|
|
20
|
-
/** Additional CSS classes */
|
|
21
|
-
className?: string;
|
|
148
|
+
/** Maximum file size in bytes */
|
|
149
|
+
maxFileSize?: number;
|
|
150
|
+
/** Render function receiving drop zone state */
|
|
151
|
+
children: (props: FlowDropZoneRenderProps) => ReactNode;
|
|
22
152
|
}
|
|
23
153
|
/**
|
|
24
|
-
*
|
|
154
|
+
* Drop zone for single-file uploads within a Flow.
|
|
155
|
+
* Automatically calls flow.upload() when a file is dropped.
|
|
25
156
|
*
|
|
26
|
-
*
|
|
27
|
-
*
|
|
28
|
-
*
|
|
29
|
-
*
|
|
30
|
-
*
|
|
31
|
-
*
|
|
157
|
+
* @example
|
|
158
|
+
* ```tsx
|
|
159
|
+
* <Flow.DropZone accept="image/*">
|
|
160
|
+
* {({ isDragging, progress, getRootProps, getInputProps }) => (
|
|
161
|
+
* <div {...getRootProps()}>
|
|
162
|
+
* <input {...getInputProps()} />
|
|
163
|
+
* {isDragging ? "Drop here" : `Progress: ${progress}%`}
|
|
164
|
+
* </div>
|
|
165
|
+
* )}
|
|
166
|
+
* </Flow.DropZone>
|
|
167
|
+
* ```
|
|
168
|
+
*/
|
|
169
|
+
declare function FlowDropZone({
|
|
170
|
+
accept,
|
|
171
|
+
maxFileSize,
|
|
172
|
+
children
|
|
173
|
+
}: FlowDropZoneProps): react_jsx_runtime0.JSX.Element;
|
|
174
|
+
/**
|
|
175
|
+
* Render props for Flow.Inputs component.
|
|
176
|
+
*/
|
|
177
|
+
interface FlowInputsRenderProps {
|
|
178
|
+
/** Discovered input metadata */
|
|
179
|
+
inputs: FlowInputMetadata[];
|
|
180
|
+
/** Whether inputs are still being discovered */
|
|
181
|
+
isLoading: boolean;
|
|
182
|
+
}
|
|
183
|
+
/**
|
|
184
|
+
* Props for Flow.Inputs component.
|
|
185
|
+
*/
|
|
186
|
+
interface FlowInputsProps {
|
|
187
|
+
/** Render function receiving discovered inputs */
|
|
188
|
+
children: (props: FlowInputsRenderProps) => ReactNode;
|
|
189
|
+
}
|
|
190
|
+
/**
|
|
191
|
+
* Auto-discovers flow input nodes and provides them via render props.
|
|
32
192
|
*
|
|
33
193
|
* @example
|
|
34
194
|
* ```tsx
|
|
35
|
-
* <
|
|
36
|
-
*
|
|
37
|
-
*
|
|
38
|
-
*
|
|
39
|
-
*
|
|
40
|
-
*
|
|
41
|
-
*
|
|
195
|
+
* <Flow.Inputs>
|
|
196
|
+
* {({ inputs, isLoading }) => (
|
|
197
|
+
* isLoading ? <Spinner /> : (
|
|
198
|
+
* inputs.map(input => (
|
|
199
|
+
* <Flow.Input key={input.nodeId} nodeId={input.nodeId}>
|
|
200
|
+
* ...
|
|
201
|
+
* </Flow.Input>
|
|
202
|
+
* ))
|
|
203
|
+
* )
|
|
204
|
+
* )}
|
|
205
|
+
* </Flow.Inputs>
|
|
206
|
+
* ```
|
|
207
|
+
*/
|
|
208
|
+
declare function FlowInputs({
|
|
209
|
+
children
|
|
210
|
+
}: FlowInputsProps): react_jsx_runtime0.JSX.Element;
|
|
211
|
+
/**
|
|
212
|
+
* Props for Flow.Input component.
|
|
213
|
+
*/
|
|
214
|
+
interface FlowInputProps {
|
|
215
|
+
/** Input node ID */
|
|
216
|
+
nodeId: string;
|
|
217
|
+
/** Children (can be render function or regular children) */
|
|
218
|
+
children: ReactNode | ((props: FlowInputContextValue) => ReactNode);
|
|
219
|
+
}
|
|
220
|
+
/**
|
|
221
|
+
* Scoped input context provider for a specific input node.
|
|
222
|
+
* Children can access input-specific state via useFlowInputContext().
|
|
223
|
+
*
|
|
224
|
+
* @example
|
|
225
|
+
* ```tsx
|
|
226
|
+
* <Flow.Input nodeId="video-input">
|
|
227
|
+
* {({ metadata, value, setValue }) => (
|
|
228
|
+
* <div>
|
|
229
|
+
* <label>{metadata.nodeName}</label>
|
|
230
|
+
* <Flow.Input.DropZone>...</Flow.Input.DropZone>
|
|
231
|
+
* </div>
|
|
232
|
+
* )}
|
|
233
|
+
* </Flow.Input>
|
|
42
234
|
* ```
|
|
43
235
|
*/
|
|
44
236
|
declare function FlowInput({
|
|
45
|
-
|
|
237
|
+
nodeId,
|
|
238
|
+
children
|
|
239
|
+
}: FlowInputProps): react_jsx_runtime0.JSX.Element | null;
|
|
240
|
+
/**
|
|
241
|
+
* Render props for Flow.Input.DropZone component.
|
|
242
|
+
*/
|
|
243
|
+
interface FlowInputDropZoneRenderProps {
|
|
244
|
+
/** Whether files are being dragged over */
|
|
245
|
+
isDragging: boolean;
|
|
246
|
+
/** Whether drag is over the zone */
|
|
247
|
+
isOver: boolean;
|
|
248
|
+
/** Current value for this input */
|
|
249
|
+
value: unknown;
|
|
250
|
+
/** Per-input progress (if available) */
|
|
251
|
+
progress: number;
|
|
252
|
+
/** Per-input status (if available) */
|
|
253
|
+
status: string;
|
|
254
|
+
/** Props to spread on the drop zone container */
|
|
255
|
+
getRootProps: () => UseDragDropReturn["dragHandlers"];
|
|
256
|
+
/** Props to spread on the hidden file input */
|
|
257
|
+
getInputProps: () => UseDragDropReturn["inputProps"];
|
|
258
|
+
/** Open file picker programmatically */
|
|
259
|
+
openFilePicker: () => void;
|
|
260
|
+
/** Current drag-drop state */
|
|
261
|
+
dragDropState: DragDropState;
|
|
262
|
+
}
|
|
263
|
+
/**
|
|
264
|
+
* Props for Flow.Input.DropZone component.
|
|
265
|
+
*/
|
|
266
|
+
interface FlowInputDropZoneProps {
|
|
267
|
+
/** Accepted file types (e.g., "image/*", ".pdf") */
|
|
268
|
+
accept?: string;
|
|
269
|
+
/** Maximum file size in bytes */
|
|
270
|
+
maxFileSize?: number;
|
|
271
|
+
/** Render function receiving drop zone state */
|
|
272
|
+
children: (props: FlowInputDropZoneRenderProps) => ReactNode;
|
|
273
|
+
}
|
|
274
|
+
/**
|
|
275
|
+
* Drop zone for a specific input within a Flow.Input.
|
|
276
|
+
* Sets the input value but does NOT trigger upload until Flow.Submit is clicked.
|
|
277
|
+
*/
|
|
278
|
+
declare function FlowInputDropZone({
|
|
46
279
|
accept,
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
280
|
+
maxFileSize,
|
|
281
|
+
children
|
|
282
|
+
}: FlowInputDropZoneProps): react_jsx_runtime0.JSX.Element;
|
|
283
|
+
/**
|
|
284
|
+
* Props for Flow.Input.UrlField component.
|
|
285
|
+
*/
|
|
286
|
+
interface FlowInputUrlFieldProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "value" | "onChange" | "type"> {
|
|
287
|
+
/** Placeholder text */
|
|
288
|
+
placeholder?: string;
|
|
289
|
+
}
|
|
290
|
+
/**
|
|
291
|
+
* URL input field for a specific input within a Flow.Input.
|
|
292
|
+
* Automatically binds to the input context value.
|
|
293
|
+
*/
|
|
294
|
+
declare function FlowInputUrlField({
|
|
295
|
+
placeholder,
|
|
296
|
+
...props
|
|
297
|
+
}: FlowInputUrlFieldProps): react_jsx_runtime0.JSX.Element;
|
|
298
|
+
/**
|
|
299
|
+
* Render props for Flow.Input.Preview component.
|
|
300
|
+
*/
|
|
301
|
+
interface FlowInputPreviewRenderProps {
|
|
302
|
+
/** Current value */
|
|
303
|
+
value: unknown;
|
|
304
|
+
/** Whether value is a File */
|
|
305
|
+
isFile: boolean;
|
|
306
|
+
/** Whether value is a URL string */
|
|
307
|
+
isUrl: boolean;
|
|
308
|
+
/** File name (if value is File) */
|
|
309
|
+
fileName: string | null;
|
|
310
|
+
/** File size in bytes (if value is File) */
|
|
311
|
+
fileSize: number | null;
|
|
312
|
+
/** Clear the input value */
|
|
313
|
+
clear: () => void;
|
|
314
|
+
}
|
|
315
|
+
/**
|
|
316
|
+
* Props for Flow.Input.Preview component.
|
|
317
|
+
*/
|
|
318
|
+
interface FlowInputPreviewProps {
|
|
319
|
+
/** Render function receiving preview state */
|
|
320
|
+
children: (props: FlowInputPreviewRenderProps) => ReactNode;
|
|
321
|
+
}
|
|
322
|
+
/**
|
|
323
|
+
* Preview component for showing the selected value within a Flow.Input.
|
|
324
|
+
*/
|
|
325
|
+
declare function FlowInputPreview({
|
|
326
|
+
children
|
|
327
|
+
}: FlowInputPreviewProps): react_jsx_runtime0.JSX.Element;
|
|
328
|
+
/**
|
|
329
|
+
* Render props for Flow.Progress component.
|
|
330
|
+
*/
|
|
331
|
+
interface FlowProgressRenderProps {
|
|
332
|
+
/** Progress percentage (0-100) */
|
|
333
|
+
progress: number;
|
|
334
|
+
/** Bytes uploaded so far */
|
|
335
|
+
bytesUploaded: number;
|
|
336
|
+
/** Total bytes to upload (null if unknown) */
|
|
337
|
+
totalBytes: number | null;
|
|
338
|
+
/** Current status */
|
|
339
|
+
status: FlowUploadStatus;
|
|
340
|
+
}
|
|
341
|
+
/**
|
|
342
|
+
* Props for Flow.Progress component.
|
|
343
|
+
*/
|
|
344
|
+
interface FlowProgressProps {
|
|
345
|
+
/** Render function receiving progress state */
|
|
346
|
+
children: (props: FlowProgressRenderProps) => ReactNode;
|
|
347
|
+
}
|
|
348
|
+
/**
|
|
349
|
+
* Progress display component within a Flow.
|
|
350
|
+
*/
|
|
351
|
+
declare function FlowProgress({
|
|
352
|
+
children
|
|
353
|
+
}: FlowProgressProps): react_jsx_runtime0.JSX.Element;
|
|
354
|
+
/**
|
|
355
|
+
* Render props for Flow.Status component.
|
|
356
|
+
*/
|
|
357
|
+
interface FlowStatusRenderProps {
|
|
358
|
+
/** Current status */
|
|
359
|
+
status: FlowUploadStatus;
|
|
360
|
+
/** Current node being processed (if any) */
|
|
361
|
+
currentNodeName: string | null;
|
|
362
|
+
/** Current node type (if any) */
|
|
363
|
+
currentNodeType: string | null;
|
|
364
|
+
/** Error (if status is error) */
|
|
365
|
+
error: Error | null;
|
|
366
|
+
/** Job ID (if started) */
|
|
367
|
+
jobId: string | null;
|
|
368
|
+
/** Whether flow has started */
|
|
369
|
+
flowStarted: boolean;
|
|
370
|
+
/** Flow outputs (if completed) */
|
|
371
|
+
flowOutputs: TypedOutput[] | null;
|
|
372
|
+
}
|
|
373
|
+
/**
|
|
374
|
+
* Props for Flow.Status component.
|
|
375
|
+
*/
|
|
376
|
+
interface FlowStatusProps {
|
|
377
|
+
/** Render function receiving status state */
|
|
378
|
+
children: (props: FlowStatusRenderProps) => ReactNode;
|
|
379
|
+
}
|
|
380
|
+
/**
|
|
381
|
+
* Status display component within a Flow.
|
|
382
|
+
*/
|
|
383
|
+
declare function FlowStatus({
|
|
384
|
+
children
|
|
385
|
+
}: FlowStatusProps): react_jsx_runtime0.JSX.Element;
|
|
386
|
+
/**
|
|
387
|
+
* Render props for Flow.Error component.
|
|
388
|
+
*/
|
|
389
|
+
interface FlowErrorRenderProps {
|
|
390
|
+
/** Error object (null if no error) */
|
|
391
|
+
error: Error | null;
|
|
392
|
+
/** Whether there is an error */
|
|
393
|
+
hasError: boolean;
|
|
394
|
+
/** Error message */
|
|
395
|
+
message: string | null;
|
|
396
|
+
/** Reset the flow */
|
|
397
|
+
reset: () => void;
|
|
398
|
+
}
|
|
399
|
+
/**
|
|
400
|
+
* Props for Flow.Error component.
|
|
401
|
+
*/
|
|
402
|
+
interface FlowErrorProps {
|
|
403
|
+
/** Render function receiving error state */
|
|
404
|
+
children: (props: FlowErrorRenderProps) => ReactNode;
|
|
405
|
+
}
|
|
406
|
+
/**
|
|
407
|
+
* Error display component within a Flow.
|
|
408
|
+
*/
|
|
409
|
+
declare function FlowError({
|
|
410
|
+
children
|
|
411
|
+
}: FlowErrorProps): react_jsx_runtime0.JSX.Element;
|
|
412
|
+
/**
|
|
413
|
+
* Props for Flow.Submit component.
|
|
414
|
+
*/
|
|
415
|
+
interface FlowSubmitProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "onClick"> {
|
|
416
|
+
/** Button content */
|
|
417
|
+
children: ReactNode;
|
|
418
|
+
}
|
|
419
|
+
/**
|
|
420
|
+
* Submit button that executes the flow with current inputs.
|
|
421
|
+
* Automatically disabled when uploading.
|
|
422
|
+
*/
|
|
423
|
+
declare function FlowSubmit({
|
|
424
|
+
children,
|
|
50
425
|
disabled,
|
|
51
|
-
|
|
52
|
-
}:
|
|
426
|
+
...props
|
|
427
|
+
}: FlowSubmitProps): react_jsx_runtime0.JSX.Element;
|
|
428
|
+
/**
|
|
429
|
+
* Props for Flow.Cancel component.
|
|
430
|
+
*/
|
|
431
|
+
interface FlowCancelProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "onClick"> {
|
|
432
|
+
/** Button content */
|
|
433
|
+
children: ReactNode;
|
|
434
|
+
}
|
|
435
|
+
/**
|
|
436
|
+
* Cancel button that aborts the current upload.
|
|
437
|
+
*/
|
|
438
|
+
declare function FlowCancel({
|
|
439
|
+
children,
|
|
440
|
+
...props
|
|
441
|
+
}: FlowCancelProps): react_jsx_runtime0.JSX.Element;
|
|
442
|
+
/**
|
|
443
|
+
* Props for Flow.Reset component.
|
|
444
|
+
*/
|
|
445
|
+
interface FlowResetProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "onClick"> {
|
|
446
|
+
/** Button content */
|
|
447
|
+
children: ReactNode;
|
|
448
|
+
}
|
|
449
|
+
/**
|
|
450
|
+
* Reset button that clears all inputs and resets to idle state.
|
|
451
|
+
*/
|
|
452
|
+
declare function FlowReset({
|
|
453
|
+
children,
|
|
454
|
+
...props
|
|
455
|
+
}: FlowResetProps): react_jsx_runtime0.JSX.Element;
|
|
456
|
+
/**
|
|
457
|
+
* Flow compound component for flow-based file uploads.
|
|
458
|
+
*
|
|
459
|
+
* Provides a composable, headless API for building flow upload interfaces.
|
|
460
|
+
* All sub-components use render props for complete UI control.
|
|
461
|
+
*
|
|
462
|
+
* @example Simple Drop Zone
|
|
463
|
+
* ```tsx
|
|
464
|
+
* <Flow flowId="image-optimizer" storageId="s3" onSuccess={handleSuccess}>
|
|
465
|
+
* <Flow.DropZone accept="image/*">
|
|
466
|
+
* {({ isDragging, progress, getRootProps, getInputProps }) => (
|
|
467
|
+
* <div {...getRootProps()}>
|
|
468
|
+
* <input {...getInputProps()} />
|
|
469
|
+
* {isDragging ? "Drop here" : "Drag or click"}
|
|
470
|
+
* {progress > 0 && <progress value={progress} max={100} />}
|
|
471
|
+
* </div>
|
|
472
|
+
* )}
|
|
473
|
+
* </Flow.DropZone>
|
|
474
|
+
* </Flow>
|
|
475
|
+
* ```
|
|
476
|
+
*
|
|
477
|
+
* @example Multi-Input Flow
|
|
478
|
+
* ```tsx
|
|
479
|
+
* <Flow flowId="video-processor" storageId="s3">
|
|
480
|
+
* <Flow.Inputs>
|
|
481
|
+
* {({ inputs }) => inputs.map(input => (
|
|
482
|
+
* <Flow.Input key={input.nodeId} nodeId={input.nodeId}>
|
|
483
|
+
* {({ metadata }) => (
|
|
484
|
+
* <div>
|
|
485
|
+
* <label>{metadata.nodeName}</label>
|
|
486
|
+
* <Flow.Input.DropZone accept="video/*">
|
|
487
|
+
* {({ getRootProps, getInputProps }) => (
|
|
488
|
+
* <div {...getRootProps()}>
|
|
489
|
+
* <input {...getInputProps()} />
|
|
490
|
+
* </div>
|
|
491
|
+
* )}
|
|
492
|
+
* </Flow.Input.DropZone>
|
|
493
|
+
* </div>
|
|
494
|
+
* )}
|
|
495
|
+
* </Flow.Input>
|
|
496
|
+
* ))}
|
|
497
|
+
* </Flow.Inputs>
|
|
498
|
+
* <Flow.Submit>Process</Flow.Submit>
|
|
499
|
+
* </Flow>
|
|
500
|
+
* ```
|
|
501
|
+
*/
|
|
502
|
+
declare const Flow: typeof FlowRoot & {
|
|
503
|
+
DropZone: typeof FlowDropZone;
|
|
504
|
+
Inputs: typeof FlowInputs;
|
|
505
|
+
Input: typeof FlowInput & {
|
|
506
|
+
DropZone: typeof FlowInputDropZone;
|
|
507
|
+
UrlField: typeof FlowInputUrlField;
|
|
508
|
+
Preview: typeof FlowInputPreview;
|
|
509
|
+
};
|
|
510
|
+
Progress: typeof FlowProgress;
|
|
511
|
+
Status: typeof FlowStatus;
|
|
512
|
+
Error: typeof FlowError;
|
|
513
|
+
Submit: typeof FlowSubmit;
|
|
514
|
+
Cancel: typeof FlowCancel;
|
|
515
|
+
Reset: typeof FlowReset;
|
|
516
|
+
};
|
|
53
517
|
//#endregion
|
|
54
518
|
//#region src/components/flow-upload-list.d.ts
|
|
55
519
|
/**
|
|
@@ -400,276 +864,6 @@ declare function SimpleFlowUploadList({
|
|
|
400
864
|
accept
|
|
401
865
|
}: SimpleFlowUploadListProps): react_jsx_runtime0.JSX.Element;
|
|
402
866
|
//#endregion
|
|
403
|
-
//#region src/components/flow-upload-zone.d.ts
|
|
404
|
-
/**
|
|
405
|
-
* Render props passed to the FlowUploadZone children function.
|
|
406
|
-
* Provides access to flow upload state, drag-drop handlers, and helper functions.
|
|
407
|
-
*
|
|
408
|
-
* @property dragDrop - Complete drag-and-drop state and handlers
|
|
409
|
-
* @property flowUpload - Flow upload hook with upload state and controls
|
|
410
|
-
* @property isActive - True when dragging over zone
|
|
411
|
-
* @property openFilePicker - Programmatically open file selection dialog
|
|
412
|
-
* @property getRootProps - Returns props to spread on the drop zone container
|
|
413
|
-
* @property getInputProps - Returns props to spread on the hidden file input
|
|
414
|
-
*/
|
|
415
|
-
interface FlowUploadZoneRenderProps {
|
|
416
|
-
/**
|
|
417
|
-
* Drag and drop state and handlers
|
|
418
|
-
*/
|
|
419
|
-
dragDrop: UseDragDropReturn;
|
|
420
|
-
/**
|
|
421
|
-
* Flow upload functionality
|
|
422
|
-
*/
|
|
423
|
-
flowUpload: UseFlowUploadReturn;
|
|
424
|
-
/**
|
|
425
|
-
* Whether the zone is currently active (dragging or uploading)
|
|
426
|
-
*/
|
|
427
|
-
isActive: boolean;
|
|
428
|
-
/**
|
|
429
|
-
* Open file picker
|
|
430
|
-
*/
|
|
431
|
-
openFilePicker: () => void;
|
|
432
|
-
/**
|
|
433
|
-
* Props to spread on the drop zone element
|
|
434
|
-
*/
|
|
435
|
-
getRootProps: () => {
|
|
436
|
-
onDragEnter: (e: React.DragEvent) => void;
|
|
437
|
-
onDragOver: (e: React.DragEvent) => void;
|
|
438
|
-
onDragLeave: (e: React.DragEvent) => void;
|
|
439
|
-
onDrop: (e: React.DragEvent) => void;
|
|
440
|
-
};
|
|
441
|
-
/**
|
|
442
|
-
* Props to spread on the file input element
|
|
443
|
-
*/
|
|
444
|
-
getInputProps: () => React.InputHTMLAttributes<HTMLInputElement>;
|
|
445
|
-
}
|
|
446
|
-
/**
|
|
447
|
-
* Props for the FlowUploadZone component.
|
|
448
|
-
*
|
|
449
|
-
* @property flowConfig - Flow execution configuration (flowId, storageId, etc.)
|
|
450
|
-
* @property options - Flow upload options (callbacks, metadata, etc.)
|
|
451
|
-
* @property accept - Accepted file types (e.g., "image/*", ".pdf")
|
|
452
|
-
* @property multiple - Allow multiple file selection (default: false)
|
|
453
|
-
* @property children - Render function receiving flow upload zone state
|
|
454
|
-
*/
|
|
455
|
-
interface FlowUploadZoneProps {
|
|
456
|
-
/**
|
|
457
|
-
* Flow configuration
|
|
458
|
-
*/
|
|
459
|
-
flowConfig: FlowUploadConfig;
|
|
460
|
-
/**
|
|
461
|
-
* Upload options
|
|
462
|
-
*/
|
|
463
|
-
options?: Omit<FlowUploadOptions, "flowConfig">;
|
|
464
|
-
/**
|
|
465
|
-
* Accepted file types (e.g., "image/*", ".pdf", etc.)
|
|
466
|
-
*/
|
|
467
|
-
accept?: string;
|
|
468
|
-
/**
|
|
469
|
-
* Whether to allow multiple files (uses multi-upload internally)
|
|
470
|
-
*/
|
|
471
|
-
multiple?: boolean;
|
|
472
|
-
/**
|
|
473
|
-
* Render function for the drop zone
|
|
474
|
-
*/
|
|
475
|
-
children: (props: FlowUploadZoneRenderProps) => ReactNode;
|
|
476
|
-
}
|
|
477
|
-
/**
|
|
478
|
-
* Headless flow upload zone component with drag-and-drop support.
|
|
479
|
-
* Combines drag-drop functionality with flow processing, using render props
|
|
480
|
-
* for complete UI control.
|
|
481
|
-
*
|
|
482
|
-
* Files uploaded through this zone are automatically processed through the
|
|
483
|
-
* specified flow, which can perform operations like image optimization,
|
|
484
|
-
* storage saving, webhooks, etc.
|
|
485
|
-
*
|
|
486
|
-
* Must be used within an UploadistaProvider.
|
|
487
|
-
*
|
|
488
|
-
* @param props - Flow upload zone configuration and render prop
|
|
489
|
-
* @returns Rendered flow upload zone using the provided render prop
|
|
490
|
-
*
|
|
491
|
-
* @example
|
|
492
|
-
* ```tsx
|
|
493
|
-
* // Image upload with flow processing
|
|
494
|
-
* <FlowUploadZone
|
|
495
|
-
* flowConfig={{
|
|
496
|
-
* flowId: "image-processing-flow",
|
|
497
|
-
* storageId: "s3-images",
|
|
498
|
-
* outputNodeId: "optimized-image",
|
|
499
|
-
* }}
|
|
500
|
-
* options={{
|
|
501
|
-
* onSuccess: (result) => console.log('Processed:', result),
|
|
502
|
-
* onFlowComplete: (outputs) => {
|
|
503
|
-
* console.log('All outputs:', outputs);
|
|
504
|
-
* },
|
|
505
|
-
* }}
|
|
506
|
-
* accept="image/*"
|
|
507
|
-
* >
|
|
508
|
-
* {({ dragDrop, flowUpload, getRootProps, getInputProps, openFilePicker }) => (
|
|
509
|
-
* <div {...getRootProps()} style={{
|
|
510
|
-
* border: dragDrop.state.isDragging ? '2px solid blue' : '2px dashed gray',
|
|
511
|
-
* padding: '2rem',
|
|
512
|
-
* textAlign: 'center'
|
|
513
|
-
* }}>
|
|
514
|
-
* <input {...getInputProps()} />
|
|
515
|
-
*
|
|
516
|
-
* {dragDrop.state.isDragging && (
|
|
517
|
-
* <p>Drop image here...</p>
|
|
518
|
-
* )}
|
|
519
|
-
*
|
|
520
|
-
* {!dragDrop.state.isDragging && !flowUpload.isUploading && (
|
|
521
|
-
* <div>
|
|
522
|
-
* <p>Drag an image or click to browse</p>
|
|
523
|
-
* <button onClick={openFilePicker}>Choose File</button>
|
|
524
|
-
* </div>
|
|
525
|
-
* )}
|
|
526
|
-
*
|
|
527
|
-
* {flowUpload.isUploadingFile && (
|
|
528
|
-
* <div>
|
|
529
|
-
* <p>Uploading...</p>
|
|
530
|
-
* <progress value={flowUpload.state.progress} max={100} />
|
|
531
|
-
* <span>{flowUpload.state.progress}%</span>
|
|
532
|
-
* </div>
|
|
533
|
-
* )}
|
|
534
|
-
*
|
|
535
|
-
* {flowUpload.isProcessing && (
|
|
536
|
-
* <div>
|
|
537
|
-
* <p>Processing image...</p>
|
|
538
|
-
* {flowUpload.state.currentNodeName && (
|
|
539
|
-
* <span>Step: {flowUpload.state.currentNodeName}</span>
|
|
540
|
-
* )}
|
|
541
|
-
* </div>
|
|
542
|
-
* )}
|
|
543
|
-
*
|
|
544
|
-
* {flowUpload.state.status === "success" && (
|
|
545
|
-
* <div>
|
|
546
|
-
* <p>✓ Upload complete!</p>
|
|
547
|
-
* {flowUpload.state.result && (
|
|
548
|
-
* <img src={flowUpload.state.result.url} alt="Uploaded" />
|
|
549
|
-
* )}
|
|
550
|
-
* </div>
|
|
551
|
-
* )}
|
|
552
|
-
*
|
|
553
|
-
* {flowUpload.state.status === "error" && (
|
|
554
|
-
* <div>
|
|
555
|
-
* <p>Error: {flowUpload.state.error?.message}</p>
|
|
556
|
-
* <button onClick={flowUpload.reset}>Try Again</button>
|
|
557
|
-
* </div>
|
|
558
|
-
* )}
|
|
559
|
-
*
|
|
560
|
-
* {flowUpload.isUploading && (
|
|
561
|
-
* <button onClick={flowUpload.abort}>Cancel</button>
|
|
562
|
-
* )}
|
|
563
|
-
* </div>
|
|
564
|
-
* )}
|
|
565
|
-
* </FlowUploadZone>
|
|
566
|
-
* ```
|
|
567
|
-
*
|
|
568
|
-
* @see {@link SimpleFlowUploadZone} for a pre-styled version
|
|
569
|
-
* @see {@link useFlowUpload} for the underlying hook
|
|
570
|
-
*/
|
|
571
|
-
declare function FlowUploadZone({
|
|
572
|
-
flowConfig,
|
|
573
|
-
options,
|
|
574
|
-
accept,
|
|
575
|
-
multiple,
|
|
576
|
-
children
|
|
577
|
-
}: FlowUploadZoneProps): react_jsx_runtime0.JSX.Element;
|
|
578
|
-
/**
|
|
579
|
-
* Props for the SimpleFlowUploadZone component.
|
|
580
|
-
*
|
|
581
|
-
* @property flowConfig - Flow execution configuration
|
|
582
|
-
* @property options - Flow upload options (callbacks, metadata)
|
|
583
|
-
* @property accept - Accepted file types
|
|
584
|
-
* @property className - CSS class name for custom styling
|
|
585
|
-
* @property dragText - Text displayed when dragging files over zone
|
|
586
|
-
* @property idleText - Text displayed when zone is idle
|
|
587
|
-
*/
|
|
588
|
-
interface SimpleFlowUploadZoneProps {
|
|
589
|
-
/**
|
|
590
|
-
* Flow configuration
|
|
591
|
-
*/
|
|
592
|
-
flowConfig: FlowUploadConfig;
|
|
593
|
-
/**
|
|
594
|
-
* Upload options
|
|
595
|
-
*/
|
|
596
|
-
options?: Omit<FlowUploadOptions, "flowConfig">;
|
|
597
|
-
/**
|
|
598
|
-
* Accepted file types
|
|
599
|
-
*/
|
|
600
|
-
accept?: string;
|
|
601
|
-
/**
|
|
602
|
-
* CSS class for the container
|
|
603
|
-
*/
|
|
604
|
-
className?: string;
|
|
605
|
-
/**
|
|
606
|
-
* Custom drag overlay text
|
|
607
|
-
*/
|
|
608
|
-
dragText?: string;
|
|
609
|
-
/**
|
|
610
|
-
* Custom idle text
|
|
611
|
-
*/
|
|
612
|
-
idleText?: string;
|
|
613
|
-
}
|
|
614
|
-
/**
|
|
615
|
-
* Simple pre-styled flow upload zone component with built-in UI.
|
|
616
|
-
* Provides a ready-to-use drag-and-drop interface for flow uploads.
|
|
617
|
-
*
|
|
618
|
-
* Features:
|
|
619
|
-
* - Built-in drag-and-drop visual feedback
|
|
620
|
-
* - Automatic progress display for upload and processing phases
|
|
621
|
-
* - Success and error state display
|
|
622
|
-
* - Cancel button during upload
|
|
623
|
-
* - Customizable text labels
|
|
624
|
-
*
|
|
625
|
-
* @param props - Flow upload zone configuration with styling options
|
|
626
|
-
* @returns Styled flow upload zone component
|
|
627
|
-
*
|
|
628
|
-
* @example
|
|
629
|
-
* ```tsx
|
|
630
|
-
* // Basic image upload with flow processing
|
|
631
|
-
* <SimpleFlowUploadZone
|
|
632
|
-
* flowConfig={{
|
|
633
|
-
* flowId: "image-optimization-flow",
|
|
634
|
-
* storageId: "s3-images",
|
|
635
|
-
* }}
|
|
636
|
-
* accept="image/*"
|
|
637
|
-
* options={{
|
|
638
|
-
* onSuccess: (result) => console.log("Image processed:", result),
|
|
639
|
-
* onError: (error) => console.error("Processing failed:", error),
|
|
640
|
-
* }}
|
|
641
|
-
* idleText="Drop an image to optimize and upload"
|
|
642
|
-
* dragText="Release to start processing"
|
|
643
|
-
* className="my-upload-zone"
|
|
644
|
-
* />
|
|
645
|
-
*
|
|
646
|
-
* // Document upload with custom flow
|
|
647
|
-
* <SimpleFlowUploadZone
|
|
648
|
-
* flowConfig={{
|
|
649
|
-
* flowId: "document-processing-flow",
|
|
650
|
-
* storageId: "docs",
|
|
651
|
-
* outputNodeId: "processed-doc",
|
|
652
|
-
* }}
|
|
653
|
-
* accept=".pdf,.doc,.docx"
|
|
654
|
-
* options={{
|
|
655
|
-
* onFlowComplete: (outputs) => {
|
|
656
|
-
* console.log('Processing outputs:', outputs);
|
|
657
|
-
* },
|
|
658
|
-
* }}
|
|
659
|
-
* />
|
|
660
|
-
* ```
|
|
661
|
-
*
|
|
662
|
-
* @see {@link FlowUploadZone} for the headless version with full control
|
|
663
|
-
*/
|
|
664
|
-
declare function SimpleFlowUploadZone({
|
|
665
|
-
flowConfig,
|
|
666
|
-
options,
|
|
667
|
-
accept,
|
|
668
|
-
className,
|
|
669
|
-
dragText,
|
|
670
|
-
idleText
|
|
671
|
-
}: SimpleFlowUploadZoneProps): react_jsx_runtime0.JSX.Element;
|
|
672
|
-
//#endregion
|
|
673
867
|
//#region src/components/upload-list.d.ts
|
|
674
868
|
/**
|
|
675
869
|
* Render props passed to the UploadList children function.
|
|
@@ -1198,7 +1392,7 @@ type UploadistaContextValue = UseUploadistaClientReturn & {
|
|
|
1198
1392
|
* Subscribe to events (used internally by hooks)
|
|
1199
1393
|
* @internal
|
|
1200
1394
|
*/
|
|
1201
|
-
subscribeToEvents: (handler: (event: UploadistaEvent) => void) => () => void;
|
|
1395
|
+
subscribeToEvents: (handler: (event: UploadistaEvent$1) => void) => () => void;
|
|
1202
1396
|
};
|
|
1203
1397
|
/**
|
|
1204
1398
|
* Context provider that provides uploadista client functionality to child components.
|
|
@@ -1279,5 +1473,5 @@ declare function UploadistaProvider({
|
|
|
1279
1473
|
*/
|
|
1280
1474
|
declare function useUploadistaContext(): UploadistaContextValue;
|
|
1281
1475
|
//#endregion
|
|
1282
|
-
export {
|
|
1283
|
-
//# sourceMappingURL=uploadista-provider-
|
|
1476
|
+
export { FlowInputPreviewProps as A, FlowStatusProps as B, FlowDropZoneProps as C, FlowInputContextValue as D, FlowErrorRenderProps as E, FlowInputsRenderProps as F, FlowSubmitProps as H, FlowProgressProps as I, FlowProgressRenderProps as L, FlowInputProps as M, FlowInputUrlFieldProps as N, FlowInputDropZoneProps as O, FlowInputsProps as P, FlowProps as R, FlowContextValue as S, FlowErrorProps as T, useFlowContext as U, FlowStatusRenderProps as V, useFlowInputContext as W, SimpleFlowUploadListItem as _, UploadZone as a, Flow as b, SimpleUploadListItem as c, UploadListProps as d, UploadListRenderProps as f, SimpleFlowUploadList as g, FlowUploadListRenderProps as h, SimpleUploadZoneProps as i, FlowInputPreviewRenderProps as j, FlowInputDropZoneRenderProps as k, SimpleUploadListItemProps as l, FlowUploadListProps as m, useUploadistaContext as n, UploadZoneProps as o, FlowUploadList as p, SimpleUploadZone as r, UploadZoneRenderProps as s, UploadistaProvider as t, UploadList as u, SimpleFlowUploadListItemProps as v, FlowDropZoneRenderProps as w, FlowCancelProps as x, SimpleFlowUploadListProps as y, FlowResetProps as z };
|
|
1477
|
+
//# sourceMappingURL=uploadista-provider-C1l0iBc9.d.mts.map
|