@ankhorage/zora 6.0.0 → 7.0.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/CHANGELOG.md +6 -0
- package/README.md +2 -1
- package/dist/components/image/Image.d.ts +1 -5
- package/dist/components/image/Image.d.ts.map +1 -1
- package/dist/components/image/Image.js +79 -8
- package/dist/components/image/Image.js.map +1 -1
- package/dist/components/image/types.d.ts +4 -2
- package/dist/components/image/types.d.ts.map +1 -1
- package/dist/components/image/types.js.map +1 -1
- package/dist/features/uploader/adapters/inbound/Uploader.d.ts +5 -0
- package/dist/features/uploader/adapters/inbound/Uploader.d.ts.map +1 -0
- package/dist/features/uploader/adapters/inbound/Uploader.js +274 -0
- package/dist/features/uploader/adapters/inbound/Uploader.js.map +1 -0
- package/dist/features/uploader/adapters/outbound/pickDocumentOrFileAsync.d.ts +5 -0
- package/dist/features/uploader/adapters/outbound/pickDocumentOrFileAsync.d.ts.map +1 -0
- package/dist/features/uploader/adapters/outbound/pickDocumentOrFileAsync.js +38 -0
- package/dist/features/uploader/adapters/outbound/pickDocumentOrFileAsync.js.map +1 -0
- package/dist/features/uploader/adapters/outbound/pickImageOrVideoAsync.d.ts +5 -0
- package/dist/features/uploader/adapters/outbound/pickImageOrVideoAsync.d.ts.map +1 -0
- package/dist/features/uploader/adapters/outbound/pickImageOrVideoAsync.js +24 -0
- package/dist/features/uploader/adapters/outbound/pickImageOrVideoAsync.js.map +1 -0
- package/dist/features/uploader/application/ports/outbound/UploadPickerPort.d.ts +9 -0
- package/dist/features/uploader/application/ports/outbound/UploadPickerPort.d.ts.map +1 -0
- package/dist/features/uploader/application/ports/outbound/UploadPickerPort.js +2 -0
- package/dist/features/uploader/application/ports/outbound/UploadPickerPort.js.map +1 -0
- package/dist/features/uploader/application/use-cases/pickUploadAssetAsync.d.ts +5 -0
- package/dist/features/uploader/application/use-cases/pickUploadAssetAsync.d.ts.map +1 -0
- package/dist/features/uploader/application/use-cases/pickUploadAssetAsync.js +6 -0
- package/dist/features/uploader/application/use-cases/pickUploadAssetAsync.js.map +1 -0
- package/dist/features/uploader/application/use-cases/validateUploadAsset.d.ts +4 -0
- package/dist/features/uploader/application/use-cases/validateUploadAsset.d.ts.map +1 -0
- package/dist/features/uploader/application/use-cases/validateUploadAsset.js +77 -0
- package/dist/features/uploader/application/use-cases/validateUploadAsset.js.map +1 -0
- package/dist/features/uploader/composition/createUploadPicker.d.ts +4 -0
- package/dist/features/uploader/composition/createUploadPicker.d.ts.map +1 -0
- package/dist/features/uploader/composition/createUploadPicker.js +12 -0
- package/dist/features/uploader/composition/createUploadPicker.js.map +1 -0
- package/dist/features/uploader/meta.d.ts +10 -0
- package/dist/features/uploader/meta.d.ts.map +1 -0
- package/dist/features/uploader/meta.js +10 -0
- package/dist/features/uploader/meta.js.map +1 -0
- package/dist/features/uploader/public.d.ts +4 -0
- package/dist/features/uploader/public.d.ts.map +1 -0
- package/dist/features/uploader/public.js +3 -0
- package/dist/features/uploader/public.js.map +1 -0
- package/dist/index.d.ts +2 -4
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +1 -2
- package/dist/index.js.map +1 -1
- package/dist/metadata/componentMeta.d.ts.map +1 -1
- package/dist/metadata/componentMeta.js +2 -4
- package/dist/metadata/componentMeta.js.map +1 -1
- package/dist/registry.d.ts.map +1 -1
- package/dist/registry.js +2 -4
- package/dist/registry.js.map +1 -1
- package/dist/types/upload.d.ts +53 -0
- package/dist/types/upload.d.ts.map +1 -0
- package/dist/types/upload.js +2 -0
- package/dist/types/upload.js.map +1 -0
- package/package.json +11 -2
- package/src/components/image/Image.tsx +136 -8
- package/src/components/image/types.ts +6 -2
- package/src/features/uploader/adapters/inbound/Uploader.tsx +403 -0
- package/src/features/uploader/adapters/outbound/pickDocumentOrFileAsync.ts +50 -0
- package/src/features/uploader/adapters/outbound/pickImageOrVideoAsync.ts +30 -0
- package/src/features/uploader/application/ports/outbound/UploadPickerPort.ts +10 -0
- package/src/features/uploader/application/use-cases/pickUploadAssetAsync.test.ts +48 -0
- package/src/features/uploader/application/use-cases/pickUploadAssetAsync.ts +14 -0
- package/src/features/uploader/application/use-cases/validateUploadAsset.test.ts +51 -0
- package/src/features/uploader/application/use-cases/validateUploadAsset.ts +111 -0
- package/src/features/uploader/composition/createUploadPicker.ts +14 -0
- package/src/features/uploader/meta.ts +11 -0
- package/src/features/uploader/public.test.ts +34 -0
- package/src/features/uploader/public.ts +10 -0
- package/src/index.ts +9 -12
- package/src/metadata/componentMeta.ts +2 -4
- package/src/registry.test.ts +1 -1
- package/src/registry.ts +2 -4
- package/src/showcaseCoverage.test.ts +1 -2
- package/src/types/upload.ts +62 -0
- package/dist/patterns/image-preview/ImagePreview.d.ts +0 -9
- package/dist/patterns/image-preview/ImagePreview.d.ts.map +0 -1
- package/dist/patterns/image-preview/ImagePreview.js +0 -46
- package/dist/patterns/image-preview/ImagePreview.js.map +0 -1
- package/dist/patterns/image-preview/index.d.ts +0 -3
- package/dist/patterns/image-preview/index.d.ts.map +0 -1
- package/dist/patterns/image-preview/index.js +0 -2
- package/dist/patterns/image-preview/index.js.map +0 -1
- package/dist/patterns/image-preview/meta.d.ts +0 -9
- package/dist/patterns/image-preview/meta.d.ts.map +0 -1
- package/dist/patterns/image-preview/meta.js +0 -9
- package/dist/patterns/image-preview/meta.js.map +0 -1
- package/dist/patterns/image-preview/types.d.ts +0 -36
- package/dist/patterns/image-preview/types.d.ts.map +0 -1
- package/dist/patterns/image-preview/types.js +0 -2
- package/dist/patterns/image-preview/types.js.map +0 -1
- package/dist/patterns/image-upload-field/ImageUploadField.d.ts +0 -9
- package/dist/patterns/image-upload-field/ImageUploadField.d.ts.map +0 -1
- package/dist/patterns/image-upload-field/ImageUploadField.js +0 -222
- package/dist/patterns/image-upload-field/ImageUploadField.js.map +0 -1
- package/dist/patterns/image-upload-field/index.d.ts +0 -3
- package/dist/patterns/image-upload-field/index.d.ts.map +0 -1
- package/dist/patterns/image-upload-field/index.js +0 -2
- package/dist/patterns/image-upload-field/index.js.map +0 -1
- package/dist/patterns/image-upload-field/meta.d.ts +0 -9
- package/dist/patterns/image-upload-field/meta.d.ts.map +0 -1
- package/dist/patterns/image-upload-field/meta.js +0 -9
- package/dist/patterns/image-upload-field/meta.js.map +0 -1
- package/dist/patterns/image-upload-field/types.d.ts +0 -35
- package/dist/patterns/image-upload-field/types.d.ts.map +0 -1
- package/dist/patterns/image-upload-field/types.js +0 -2
- package/dist/patterns/image-upload-field/types.js.map +0 -1
- package/dist/patterns/image-upload-field/uploadFlow.d.ts +0 -18
- package/dist/patterns/image-upload-field/uploadFlow.d.ts.map +0 -1
- package/dist/patterns/image-upload-field/uploadFlow.js +0 -106
- package/dist/patterns/image-upload-field/uploadFlow.js.map +0 -1
- package/src/patterns/image-preview/ImagePreview.tsx +0 -82
- package/src/patterns/image-preview/index.ts +0 -2
- package/src/patterns/image-preview/meta.ts +0 -10
- package/src/patterns/image-preview/types.ts +0 -41
- package/src/patterns/image-upload-field/ImageUploadField.tsx +0 -319
- package/src/patterns/image-upload-field/index.ts +0 -2
- package/src/patterns/image-upload-field/meta.ts +0 -10
- package/src/patterns/image-upload-field/types.ts +0 -41
- package/src/patterns/image-upload-field/uploadFlow.test.ts +0 -117
- package/src/patterns/image-upload-field/uploadFlow.ts +0 -145
|
@@ -1,222 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import { Button } from '../../components/button';
|
|
3
|
-
import { Modal } from '../../components/modal';
|
|
4
|
-
import { Progress } from '../../components/progress';
|
|
5
|
-
import { Text } from '../../components/text';
|
|
6
|
-
import { Box, Stack } from '../../foundation';
|
|
7
|
-
import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
|
|
8
|
-
import { FormField } from '../form-field';
|
|
9
|
-
import { ImagePreview } from '../image-preview';
|
|
10
|
-
import { createOptimisticAssetFromPicked, formatAcceptHint, formatMaxSizeHint, resolveRenderableUrl, validatePickedImage, } from './uploadFlow';
|
|
11
|
-
function clampProgress(value) {
|
|
12
|
-
if (value === null)
|
|
13
|
-
return null;
|
|
14
|
-
if (!Number.isFinite(value))
|
|
15
|
-
return null;
|
|
16
|
-
return Math.max(0, Math.min(1, value));
|
|
17
|
-
}
|
|
18
|
-
function formatUnknownError(error) {
|
|
19
|
-
if (error instanceof Error && error.message)
|
|
20
|
-
return error.message;
|
|
21
|
-
if (typeof error === 'string' && error.trim().length > 0)
|
|
22
|
-
return error;
|
|
23
|
-
return 'Something went wrong.';
|
|
24
|
-
}
|
|
25
|
-
function ImageUploadFieldInner({ themeId: _themeId, mode: _mode, testID, value, onChange, label, description, helperText, errorText, required, disabled = false, readOnly = false, accept, maxSizeBytes, validatePicked, onPick, onUpload, onRemove, aspectRatio = 1, previewTitle = 'Image preview', previewDescription, interactionPolicy, }) {
|
|
26
|
-
const passive = interactionPolicy === 'passive';
|
|
27
|
-
const [internalError, setInternalError] = React.useState(undefined);
|
|
28
|
-
const [uploading, setUploading] = React.useState(false);
|
|
29
|
-
const [removing, setRemoving] = React.useState(false);
|
|
30
|
-
const [progress, setProgress] = React.useState(null);
|
|
31
|
-
const [previewOpen, setPreviewOpen] = React.useState(false);
|
|
32
|
-
const isMountedRef = React.useRef(true);
|
|
33
|
-
React.useEffect(() => {
|
|
34
|
-
return () => {
|
|
35
|
-
isMountedRef.current = false;
|
|
36
|
-
};
|
|
37
|
-
}, []);
|
|
38
|
-
const renderableUrl = resolveRenderableUrl(value);
|
|
39
|
-
const isRenderable = renderableUrl !== null;
|
|
40
|
-
const actionsDisabled = disabled || readOnly;
|
|
41
|
-
const effectiveError = errorText ?? internalError;
|
|
42
|
-
const invalid = Boolean(effectiveError);
|
|
43
|
-
const acceptHint = formatAcceptHint(accept);
|
|
44
|
-
const maxSizeHint = formatMaxSizeHint(maxSizeBytes);
|
|
45
|
-
const setProgressSafe = React.useCallback((next) => {
|
|
46
|
-
if (!isMountedRef.current)
|
|
47
|
-
return;
|
|
48
|
-
setProgress(clampProgress(next));
|
|
49
|
-
}, []);
|
|
50
|
-
const clearTransientState = React.useCallback(() => {
|
|
51
|
-
if (!isMountedRef.current)
|
|
52
|
-
return;
|
|
53
|
-
setUploading(false);
|
|
54
|
-
setRemoving(false);
|
|
55
|
-
setProgress(null);
|
|
56
|
-
}, []);
|
|
57
|
-
const handleReplace = React.useCallback(async () => {
|
|
58
|
-
if (passive || actionsDisabled || uploading || removing)
|
|
59
|
-
return;
|
|
60
|
-
setInternalError(undefined);
|
|
61
|
-
let picked;
|
|
62
|
-
try {
|
|
63
|
-
picked = await onPick();
|
|
64
|
-
}
|
|
65
|
-
catch (error) {
|
|
66
|
-
if (!isMountedRef.current)
|
|
67
|
-
return;
|
|
68
|
-
setInternalError(formatUnknownError(error));
|
|
69
|
-
return;
|
|
70
|
-
}
|
|
71
|
-
if (!picked)
|
|
72
|
-
return;
|
|
73
|
-
const validationError = validatePickedImage({
|
|
74
|
-
picked,
|
|
75
|
-
accept,
|
|
76
|
-
maxSizeBytes,
|
|
77
|
-
validatePicked,
|
|
78
|
-
});
|
|
79
|
-
if (validationError) {
|
|
80
|
-
setInternalError(validationError);
|
|
81
|
-
return;
|
|
82
|
-
}
|
|
83
|
-
if (!onUpload) {
|
|
84
|
-
onChange(createOptimisticAssetFromPicked(picked));
|
|
85
|
-
return;
|
|
86
|
-
}
|
|
87
|
-
const optimisticAsset = createOptimisticAssetFromPicked(picked);
|
|
88
|
-
onChange(optimisticAsset);
|
|
89
|
-
setUploading(true);
|
|
90
|
-
setProgressSafe(0);
|
|
91
|
-
try {
|
|
92
|
-
const uploaded = await onUpload(picked, { setProgress: setProgressSafe });
|
|
93
|
-
if (!isMountedRef.current)
|
|
94
|
-
return;
|
|
95
|
-
onChange(uploaded);
|
|
96
|
-
setInternalError(undefined);
|
|
97
|
-
clearTransientState();
|
|
98
|
-
}
|
|
99
|
-
catch (error) {
|
|
100
|
-
if (!isMountedRef.current)
|
|
101
|
-
return;
|
|
102
|
-
setInternalError(formatUnknownError(error));
|
|
103
|
-
setUploading(false);
|
|
104
|
-
setProgress(null);
|
|
105
|
-
}
|
|
106
|
-
}, [
|
|
107
|
-
accept,
|
|
108
|
-
actionsDisabled,
|
|
109
|
-
clearTransientState,
|
|
110
|
-
maxSizeBytes,
|
|
111
|
-
onChange,
|
|
112
|
-
onPick,
|
|
113
|
-
onUpload,
|
|
114
|
-
passive,
|
|
115
|
-
removing,
|
|
116
|
-
setProgressSafe,
|
|
117
|
-
uploading,
|
|
118
|
-
validatePicked,
|
|
119
|
-
]);
|
|
120
|
-
const handleRemove = React.useCallback(async () => {
|
|
121
|
-
if (passive || actionsDisabled || uploading || removing)
|
|
122
|
-
return;
|
|
123
|
-
if (!value) {
|
|
124
|
-
onChange(null);
|
|
125
|
-
return;
|
|
126
|
-
}
|
|
127
|
-
setInternalError(undefined);
|
|
128
|
-
if (!onRemove) {
|
|
129
|
-
onChange(null);
|
|
130
|
-
return;
|
|
131
|
-
}
|
|
132
|
-
setRemoving(true);
|
|
133
|
-
try {
|
|
134
|
-
await onRemove(value);
|
|
135
|
-
if (!isMountedRef.current)
|
|
136
|
-
return;
|
|
137
|
-
onChange(null);
|
|
138
|
-
setRemoving(false);
|
|
139
|
-
}
|
|
140
|
-
catch (error) {
|
|
141
|
-
if (!isMountedRef.current)
|
|
142
|
-
return;
|
|
143
|
-
setInternalError(formatUnknownError(error));
|
|
144
|
-
setRemoving(false);
|
|
145
|
-
}
|
|
146
|
-
}, [actionsDisabled, onChange, onRemove, passive, removing, uploading, value]);
|
|
147
|
-
const handlePreview = React.useCallback(() => {
|
|
148
|
-
if (passive || !isRenderable)
|
|
149
|
-
return;
|
|
150
|
-
setPreviewOpen(true);
|
|
151
|
-
}, [isRenderable, passive]);
|
|
152
|
-
const closePreview = React.useCallback(() => {
|
|
153
|
-
if (passive)
|
|
154
|
-
return;
|
|
155
|
-
setPreviewOpen(false);
|
|
156
|
-
}, [passive]);
|
|
157
|
-
return (<>
|
|
158
|
-
<FormField description={description} disabled={disabled} errorText={effectiveError} helperText={helperText} interactionPolicy={interactionPolicy} invalid={invalid} label={label} readOnly={readOnly} required={required} testID={testID}>
|
|
159
|
-
<Stack gap="m">
|
|
160
|
-
<ImagePreview aspectRatio={aspectRatio} asset={value} emptyDescription={actionsDisabled ? 'No image available.' : undefined}/>
|
|
161
|
-
|
|
162
|
-
{acceptHint || maxSizeHint ? (<Stack gap="xs">
|
|
163
|
-
{acceptHint ? (<Text emphasis="muted" variant="caption">
|
|
164
|
-
{acceptHint}
|
|
165
|
-
</Text>) : null}
|
|
166
|
-
{maxSizeHint ? (<Text emphasis="muted" variant="caption">
|
|
167
|
-
{maxSizeHint}
|
|
168
|
-
</Text>) : null}
|
|
169
|
-
</Stack>) : null}
|
|
170
|
-
|
|
171
|
-
{uploading ? (<Stack gap="xs">
|
|
172
|
-
<Text emphasis="muted" variant="caption">
|
|
173
|
-
Uploading…
|
|
174
|
-
</Text>
|
|
175
|
-
{progress !== null ? <Progress max={1} value={progress}/> : null}
|
|
176
|
-
</Stack>) : null}
|
|
177
|
-
|
|
178
|
-
<Stack direction={{ base: 'column', md: 'row' }} gap="s">
|
|
179
|
-
<Button disabled={actionsDisabled || uploading || removing} interactionPolicy={interactionPolicy} onPress={() => {
|
|
180
|
-
void handleReplace();
|
|
181
|
-
}}>
|
|
182
|
-
{value ? 'Replace image' : 'Select image'}
|
|
183
|
-
</Button>
|
|
184
|
-
|
|
185
|
-
{value ? (<Button disabled={actionsDisabled || uploading || removing} variant="outline" loading={removing} color="danger" interactionPolicy={interactionPolicy} onPress={() => {
|
|
186
|
-
void handleRemove();
|
|
187
|
-
}}>
|
|
188
|
-
Remove
|
|
189
|
-
</Button>) : null}
|
|
190
|
-
|
|
191
|
-
{isRenderable ? (<Button disabled={false} interactionPolicy={interactionPolicy} variant="soft" color="neutral" onPress={handlePreview}>
|
|
192
|
-
Preview
|
|
193
|
-
</Button>) : null}
|
|
194
|
-
</Stack>
|
|
195
|
-
|
|
196
|
-
{!isRenderable && value?.kind === 'storage' && value.publicUrl === undefined ? (<Box>
|
|
197
|
-
<Text emphasis="muted" variant="caption">
|
|
198
|
-
This image is stored, but no preview URL is available yet.
|
|
199
|
-
</Text>
|
|
200
|
-
</Box>) : null}
|
|
201
|
-
</Stack>
|
|
202
|
-
</FormField>
|
|
203
|
-
|
|
204
|
-
{isRenderable ? (<Modal closeOnBackdrop description={previewDescription} interactionPolicy={interactionPolicy} onDismiss={closePreview} title={previewTitle} visible={previewOpen}>
|
|
205
|
-
<Stack gap="m">
|
|
206
|
-
<ImagePreview asset={value} aspectRatio={aspectRatio}/>
|
|
207
|
-
<Stack direction="row" justify="flex-end">
|
|
208
|
-
<Button interactionPolicy={interactionPolicy} variant="soft" color="neutral" onPress={closePreview}>
|
|
209
|
-
Close
|
|
210
|
-
</Button>
|
|
211
|
-
</Stack>
|
|
212
|
-
</Stack>
|
|
213
|
-
</Modal>) : null}
|
|
214
|
-
</>);
|
|
215
|
-
}
|
|
216
|
-
/***
|
|
217
|
-
* Form field pattern for picking, previewing, and uploading an image.
|
|
218
|
-
*
|
|
219
|
-
|
|
220
|
-
*/
|
|
221
|
-
export const ImageUploadField = withZoraThemeScope(ImageUploadFieldInner);
|
|
222
|
-
//# sourceMappingURL=ImageUploadField.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"ImageUploadField.js","sourceRoot":"","sources":["../../../src/patterns/image-upload-field/ImageUploadField.tsx"],"names":[],"mappings":"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","sourcesContent":["import React from 'react';\n\nimport { Button } from '../../components/button';\nimport { Modal } from '../../components/modal';\nimport { Progress } from '../../components/progress';\nimport { Text } from '../../components/text';\nimport { Box, Stack } from '../../foundation';\nimport { withZoraThemeScope } from '../../theme/withZoraThemeScope';\nimport { FormField } from '../form-field';\nimport { ImagePreview } from '../image-preview';\nimport type { ImageUploadFieldProps } from './types';\nimport {\n createOptimisticAssetFromPicked,\n formatAcceptHint,\n formatMaxSizeHint,\n resolveRenderableUrl,\n validatePickedImage,\n} from './uploadFlow';\n\nfunction clampProgress(value: number | null): number | null {\n if (value === null) return null;\n if (!Number.isFinite(value)) return null;\n return Math.max(0, Math.min(1, value));\n}\n\nfunction formatUnknownError(error: unknown): string {\n if (error instanceof Error && error.message) return error.message;\n if (typeof error === 'string' && error.trim().length > 0) return error;\n return 'Something went wrong.';\n}\n\nfunction ImageUploadFieldInner({\n themeId: _themeId,\n mode: _mode,\n testID,\n value,\n onChange,\n label,\n description,\n helperText,\n errorText,\n required,\n disabled = false,\n readOnly = false,\n accept,\n maxSizeBytes,\n validatePicked,\n onPick,\n onUpload,\n onRemove,\n aspectRatio = 1,\n previewTitle = 'Image preview',\n previewDescription,\n interactionPolicy,\n}: ImageUploadFieldProps) {\n const passive = interactionPolicy === 'passive';\n const [internalError, setInternalError] = React.useState<string | undefined>(undefined);\n const [uploading, setUploading] = React.useState(false);\n const [removing, setRemoving] = React.useState(false);\n const [progress, setProgress] = React.useState<number | null>(null);\n const [previewOpen, setPreviewOpen] = React.useState(false);\n const isMountedRef = React.useRef(true);\n\n React.useEffect(() => {\n return () => {\n isMountedRef.current = false;\n };\n }, []);\n\n const renderableUrl = resolveRenderableUrl(value);\n const isRenderable = renderableUrl !== null;\n const actionsDisabled = disabled || readOnly;\n\n const effectiveError = errorText ?? internalError;\n const invalid = Boolean(effectiveError);\n\n const acceptHint = formatAcceptHint(accept);\n const maxSizeHint = formatMaxSizeHint(maxSizeBytes);\n\n const setProgressSafe = React.useCallback((next: number | null) => {\n if (!isMountedRef.current) return;\n setProgress(clampProgress(next));\n }, []);\n\n const clearTransientState = React.useCallback(() => {\n if (!isMountedRef.current) return;\n setUploading(false);\n setRemoving(false);\n setProgress(null);\n }, []);\n\n const handleReplace = React.useCallback(async () => {\n if (passive || actionsDisabled || uploading || removing) return;\n\n setInternalError(undefined);\n let picked;\n try {\n picked = await onPick();\n } catch (error) {\n if (!isMountedRef.current) return;\n setInternalError(formatUnknownError(error));\n return;\n }\n if (!picked) return;\n\n const validationError = validatePickedImage({\n picked,\n accept,\n maxSizeBytes,\n validatePicked,\n });\n\n if (validationError) {\n setInternalError(validationError);\n return;\n }\n\n if (!onUpload) {\n onChange(createOptimisticAssetFromPicked(picked));\n return;\n }\n\n const optimisticAsset = createOptimisticAssetFromPicked(picked);\n onChange(optimisticAsset);\n setUploading(true);\n setProgressSafe(0);\n\n try {\n const uploaded = await onUpload(picked, { setProgress: setProgressSafe });\n if (!isMountedRef.current) return;\n onChange(uploaded);\n setInternalError(undefined);\n clearTransientState();\n } catch (error) {\n if (!isMountedRef.current) return;\n setInternalError(formatUnknownError(error));\n setUploading(false);\n setProgress(null);\n }\n }, [\n accept,\n actionsDisabled,\n clearTransientState,\n maxSizeBytes,\n onChange,\n onPick,\n onUpload,\n passive,\n removing,\n setProgressSafe,\n uploading,\n validatePicked,\n ]);\n\n const handleRemove = React.useCallback(async () => {\n if (passive || actionsDisabled || uploading || removing) return;\n if (!value) {\n onChange(null);\n return;\n }\n\n setInternalError(undefined);\n\n if (!onRemove) {\n onChange(null);\n return;\n }\n\n setRemoving(true);\n try {\n await onRemove(value);\n if (!isMountedRef.current) return;\n onChange(null);\n setRemoving(false);\n } catch (error) {\n if (!isMountedRef.current) return;\n setInternalError(formatUnknownError(error));\n setRemoving(false);\n }\n }, [actionsDisabled, onChange, onRemove, passive, removing, uploading, value]);\n\n const handlePreview = React.useCallback(() => {\n if (passive || !isRenderable) return;\n setPreviewOpen(true);\n }, [isRenderable, passive]);\n\n const closePreview = React.useCallback(() => {\n if (passive) return;\n setPreviewOpen(false);\n }, [passive]);\n\n return (\n <>\n <FormField\n description={description}\n disabled={disabled}\n errorText={effectiveError}\n helperText={helperText}\n interactionPolicy={interactionPolicy}\n invalid={invalid}\n label={label}\n readOnly={readOnly}\n required={required}\n testID={testID}\n >\n <Stack gap=\"m\">\n <ImagePreview\n aspectRatio={aspectRatio}\n asset={value}\n emptyDescription={actionsDisabled ? 'No image available.' : undefined}\n />\n\n {acceptHint || maxSizeHint ? (\n <Stack gap=\"xs\">\n {acceptHint ? (\n <Text emphasis=\"muted\" variant=\"caption\">\n {acceptHint}\n </Text>\n ) : null}\n {maxSizeHint ? (\n <Text emphasis=\"muted\" variant=\"caption\">\n {maxSizeHint}\n </Text>\n ) : null}\n </Stack>\n ) : null}\n\n {uploading ? (\n <Stack gap=\"xs\">\n <Text emphasis=\"muted\" variant=\"caption\">\n Uploading…\n </Text>\n {progress !== null ? <Progress max={1} value={progress} /> : null}\n </Stack>\n ) : null}\n\n <Stack direction={{ base: 'column', md: 'row' }} gap=\"s\">\n <Button\n disabled={actionsDisabled || uploading || removing}\n interactionPolicy={interactionPolicy}\n onPress={() => {\n void handleReplace();\n }}\n >\n {value ? 'Replace image' : 'Select image'}\n </Button>\n\n {value ? (\n <Button\n disabled={actionsDisabled || uploading || removing}\n variant=\"outline\"\n loading={removing}\n color=\"danger\"\n interactionPolicy={interactionPolicy}\n onPress={() => {\n void handleRemove();\n }}\n >\n Remove\n </Button>\n ) : null}\n\n {isRenderable ? (\n <Button\n disabled={false}\n interactionPolicy={interactionPolicy}\n variant=\"soft\"\n color=\"neutral\"\n onPress={handlePreview}\n >\n Preview\n </Button>\n ) : null}\n </Stack>\n\n {!isRenderable && value?.kind === 'storage' && value.publicUrl === undefined ? (\n <Box>\n <Text emphasis=\"muted\" variant=\"caption\">\n This image is stored, but no preview URL is available yet.\n </Text>\n </Box>\n ) : null}\n </Stack>\n </FormField>\n\n {isRenderable ? (\n <Modal\n closeOnBackdrop\n description={previewDescription}\n interactionPolicy={interactionPolicy}\n onDismiss={closePreview}\n title={previewTitle}\n visible={previewOpen}\n >\n <Stack gap=\"m\">\n <ImagePreview asset={value} aspectRatio={aspectRatio} />\n <Stack direction=\"row\" justify=\"flex-end\">\n <Button\n interactionPolicy={interactionPolicy}\n variant=\"soft\"\n color=\"neutral\"\n onPress={closePreview}\n >\n Close\n </Button>\n </Stack>\n </Stack>\n </Modal>\n ) : null}\n </>\n );\n}\n\n/***\n * Form field pattern for picking, previewing, and uploading an image.\n *\n \n */\nexport const ImageUploadField = withZoraThemeScope(ImageUploadFieldInner);\n"]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/patterns/image-upload-field/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,YAAY,EAAE,qBAAqB,EAAE,0BAA0B,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/patterns/image-upload-field/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC","sourcesContent":["export { ImageUploadField } from './ImageUploadField';\nexport type { ImageUploadFieldProps, ImageUploadProgressContext, ZoraPickedImage } from './types';\n"]}
|
|
@@ -1,9 +0,0 @@
|
|
|
1
|
-
export declare const imageUploadFieldMeta: {
|
|
2
|
-
readonly name: "ImageUploadField";
|
|
3
|
-
readonly category: "pattern";
|
|
4
|
-
readonly directManifestNode: false;
|
|
5
|
-
readonly allowedChildren: readonly [];
|
|
6
|
-
readonly note: "Media upload pattern; not represented as a manifest node in v1.";
|
|
7
|
-
readonly props: {};
|
|
8
|
-
};
|
|
9
|
-
//# sourceMappingURL=meta.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"meta.d.ts","sourceRoot":"","sources":["../../../src/patterns/image-upload-field/meta.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,oBAAoB;;;;;;;CAOK,CAAC"}
|
|
@@ -1,9 +0,0 @@
|
|
|
1
|
-
export const imageUploadFieldMeta = {
|
|
2
|
-
name: 'ImageUploadField',
|
|
3
|
-
category: 'pattern',
|
|
4
|
-
directManifestNode: false,
|
|
5
|
-
allowedChildren: [],
|
|
6
|
-
note: 'Media upload pattern; not represented as a manifest node in v1.',
|
|
7
|
-
props: {},
|
|
8
|
-
};
|
|
9
|
-
//# sourceMappingURL=meta.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"meta.js","sourceRoot":"","sources":["../../../src/patterns/image-upload-field/meta.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,MAAM,oBAAoB,GAAG;IAClC,IAAI,EAAE,kBAAkB;IACxB,QAAQ,EAAE,SAAS;IACnB,kBAAkB,EAAE,KAAK;IACzB,eAAe,EAAE,EAAE;IACnB,IAAI,EAAE,iEAAiE;IACvE,KAAK,EAAE,EAAE;CAC2B,CAAC","sourcesContent":["import type { ZoraComponentMeta } from '../../metadata';\n\nexport const imageUploadFieldMeta = {\n name: 'ImageUploadField',\n category: 'pattern',\n directManifestNode: false,\n allowedChildren: [],\n note: 'Media upload pattern; not represented as a manifest node in v1.',\n props: {},\n} as const satisfies ZoraComponentMeta;\n"]}
|
|
@@ -1,35 +0,0 @@
|
|
|
1
|
-
import type React from 'react';
|
|
2
|
-
import type { ZoraBaseProps } from '../../theme/ZoraBaseProps';
|
|
3
|
-
import type { ZoraImageAsset } from '../image-preview';
|
|
4
|
-
export interface ZoraPickedImage {
|
|
5
|
-
uri: string;
|
|
6
|
-
fileName?: string;
|
|
7
|
-
sizeBytes?: number;
|
|
8
|
-
contentType?: string;
|
|
9
|
-
width?: number;
|
|
10
|
-
height?: number;
|
|
11
|
-
}
|
|
12
|
-
export interface ImageUploadProgressContext {
|
|
13
|
-
setProgress: (progress: number | null) => void;
|
|
14
|
-
}
|
|
15
|
-
export interface ImageUploadFieldProps extends ZoraBaseProps {
|
|
16
|
-
value: ZoraImageAsset | null;
|
|
17
|
-
onChange: (next: ZoraImageAsset | null) => void;
|
|
18
|
-
label: React.ReactNode;
|
|
19
|
-
description?: React.ReactNode;
|
|
20
|
-
helperText?: React.ReactNode;
|
|
21
|
-
errorText?: React.ReactNode;
|
|
22
|
-
required?: boolean;
|
|
23
|
-
disabled?: boolean;
|
|
24
|
-
readOnly?: boolean;
|
|
25
|
-
accept?: string;
|
|
26
|
-
maxSizeBytes?: number;
|
|
27
|
-
validatePicked?: (picked: ZoraPickedImage) => string | undefined;
|
|
28
|
-
onPick: () => Promise<ZoraPickedImage | null>;
|
|
29
|
-
onUpload?: (picked: ZoraPickedImage, context: ImageUploadProgressContext) => Promise<ZoraImageAsset>;
|
|
30
|
-
onRemove?: (current: ZoraImageAsset) => void | Promise<void>;
|
|
31
|
-
aspectRatio?: number;
|
|
32
|
-
previewTitle?: React.ReactNode;
|
|
33
|
-
previewDescription?: React.ReactNode;
|
|
34
|
-
}
|
|
35
|
-
//# sourceMappingURL=types.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/patterns/image-upload-field/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAC/D,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAEvD,MAAM,WAAW,eAAe;IAC9B,GAAG,EAAE,MAAM,CAAC;IACZ,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,WAAW,0BAA0B;IACzC,WAAW,EAAE,CAAC,QAAQ,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;CAChD;AAED,MAAM,WAAW,qBAAsB,SAAQ,aAAa;IAC1D,KAAK,EAAE,cAAc,GAAG,IAAI,CAAC;IAC7B,QAAQ,EAAE,CAAC,IAAI,EAAE,cAAc,GAAG,IAAI,KAAK,IAAI,CAAC;IAChD,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC7B,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,eAAe,KAAK,MAAM,GAAG,SAAS,CAAC;IACjE,MAAM,EAAE,MAAM,OAAO,CAAC,eAAe,GAAG,IAAI,CAAC,CAAC;IAC9C,QAAQ,CAAC,EAAE,CACT,MAAM,EAAE,eAAe,EACvB,OAAO,EAAE,0BAA0B,KAChC,OAAO,CAAC,cAAc,CAAC,CAAC;IAC7B,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,cAAc,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IAC7D,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC/B,kBAAkB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACtC"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/patterns/image-upload-field/types.ts"],"names":[],"mappings":"","sourcesContent":["import type React from 'react';\n\nimport type { ZoraBaseProps } from '../../theme/ZoraBaseProps';\nimport type { ZoraImageAsset } from '../image-preview';\n\nexport interface ZoraPickedImage {\n uri: string;\n fileName?: string;\n sizeBytes?: number;\n contentType?: string;\n width?: number;\n height?: number;\n}\n\nexport interface ImageUploadProgressContext {\n setProgress: (progress: number | null) => void;\n}\n\nexport interface ImageUploadFieldProps extends ZoraBaseProps {\n value: ZoraImageAsset | null;\n onChange: (next: ZoraImageAsset | null) => void;\n label: React.ReactNode;\n description?: React.ReactNode;\n helperText?: React.ReactNode;\n errorText?: React.ReactNode;\n required?: boolean;\n disabled?: boolean;\n readOnly?: boolean;\n accept?: string;\n maxSizeBytes?: number;\n validatePicked?: (picked: ZoraPickedImage) => string | undefined;\n onPick: () => Promise<ZoraPickedImage | null>;\n onUpload?: (\n picked: ZoraPickedImage,\n context: ImageUploadProgressContext,\n ) => Promise<ZoraImageAsset>;\n onRemove?: (current: ZoraImageAsset) => void | Promise<void>;\n aspectRatio?: number;\n previewTitle?: React.ReactNode;\n previewDescription?: React.ReactNode;\n}\n"]}
|
|
@@ -1,18 +0,0 @@
|
|
|
1
|
-
import type { ZoraImageAsset } from '../image-preview';
|
|
2
|
-
import type { ZoraPickedImage } from './types';
|
|
3
|
-
export declare function isAccepted({ accept, contentType, fileName, }: {
|
|
4
|
-
accept: string | undefined;
|
|
5
|
-
contentType: string | undefined;
|
|
6
|
-
fileName: string | undefined;
|
|
7
|
-
}): boolean;
|
|
8
|
-
export declare function formatAcceptHint(accept: string | undefined): string | null;
|
|
9
|
-
export declare function formatMaxSizeHint(maxSizeBytes: number | undefined): string | null;
|
|
10
|
-
export declare function createOptimisticAssetFromPicked(picked: ZoraPickedImage): ZoraImageAsset;
|
|
11
|
-
export declare function resolveRenderableUrl(asset: ZoraImageAsset | null): string | null;
|
|
12
|
-
export declare function validatePickedImage({ picked, accept, maxSizeBytes, validatePicked, }: {
|
|
13
|
-
picked: ZoraPickedImage;
|
|
14
|
-
accept: string | undefined;
|
|
15
|
-
maxSizeBytes: number | undefined;
|
|
16
|
-
validatePicked: ((picked: ZoraPickedImage) => string | undefined) | undefined;
|
|
17
|
-
}): string | undefined;
|
|
18
|
-
//# sourceMappingURL=uploadFlow.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"uploadFlow.d.ts","sourceRoot":"","sources":["../../../src/patterns/image-upload-field/uploadFlow.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AACvD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAuC/C,wBAAgB,UAAU,CAAC,EACzB,MAAM,EACN,WAAW,EACX,QAAQ,GACT,EAAE;IACD,MAAM,EAAE,MAAM,GAAG,SAAS,CAAC;IAC3B,WAAW,EAAE,MAAM,GAAG,SAAS,CAAC;IAChC,QAAQ,EAAE,MAAM,GAAG,SAAS,CAAC;CAC9B,GAAG,OAAO,CAkBV;AAmBD,wBAAgB,gBAAgB,CAAC,MAAM,EAAE,MAAM,GAAG,SAAS,GAAG,MAAM,GAAG,IAAI,CAI1E;AAED,wBAAgB,iBAAiB,CAAC,YAAY,EAAE,MAAM,GAAG,SAAS,GAAG,MAAM,GAAG,IAAI,CAIjF;AAED,wBAAgB,+BAA+B,CAAC,MAAM,EAAE,eAAe,GAAG,cAAc,CAYvF;AAED,wBAAgB,oBAAoB,CAAC,KAAK,EAAE,cAAc,GAAG,IAAI,GAAG,MAAM,GAAG,IAAI,CAIhF;AAED,wBAAgB,mBAAmB,CAAC,EAClC,MAAM,EACN,MAAM,EACN,YAAY,EACZ,cAAc,GACf,EAAE;IACD,MAAM,EAAE,eAAe,CAAC;IACxB,MAAM,EAAE,MAAM,GAAG,SAAS,CAAC;IAC3B,YAAY,EAAE,MAAM,GAAG,SAAS,CAAC;IACjC,cAAc,EAAE,CAAC,CAAC,MAAM,EAAE,eAAe,KAAK,MAAM,GAAG,SAAS,CAAC,GAAG,SAAS,CAAC;CAC/E,GAAG,MAAM,GAAG,SAAS,CAiBrB"}
|
|
@@ -1,106 +0,0 @@
|
|
|
1
|
-
function parseAccept(accept) {
|
|
2
|
-
if (!accept)
|
|
3
|
-
return [];
|
|
4
|
-
return accept
|
|
5
|
-
.split(',')
|
|
6
|
-
.map((entry) => entry.trim())
|
|
7
|
-
.filter((entry) => entry.length > 0);
|
|
8
|
-
}
|
|
9
|
-
function matchesAcceptToken({ token, contentType, fileName, }) {
|
|
10
|
-
const normalizedToken = token.toLowerCase();
|
|
11
|
-
const normalizedContentType = contentType?.toLowerCase();
|
|
12
|
-
const normalizedFileName = fileName?.toLowerCase();
|
|
13
|
-
if (normalizedToken.startsWith('.')) {
|
|
14
|
-
if (!normalizedFileName)
|
|
15
|
-
return null;
|
|
16
|
-
return normalizedFileName.endsWith(normalizedToken);
|
|
17
|
-
}
|
|
18
|
-
if (normalizedToken.endsWith('/*')) {
|
|
19
|
-
if (!normalizedContentType)
|
|
20
|
-
return null;
|
|
21
|
-
const prefix = normalizedToken.slice(0, Math.max(0, normalizedToken.length - 1));
|
|
22
|
-
return normalizedContentType.startsWith(prefix);
|
|
23
|
-
}
|
|
24
|
-
if (!normalizedContentType)
|
|
25
|
-
return null;
|
|
26
|
-
return normalizedContentType === normalizedToken;
|
|
27
|
-
}
|
|
28
|
-
export function isAccepted({ accept, contentType, fileName, }) {
|
|
29
|
-
const tokens = parseAccept(accept);
|
|
30
|
-
if (tokens.length === 0)
|
|
31
|
-
return true;
|
|
32
|
-
let hadSignal = false;
|
|
33
|
-
for (const token of tokens) {
|
|
34
|
-
const matches = matchesAcceptToken({ token, contentType, fileName });
|
|
35
|
-
if (matches === null) {
|
|
36
|
-
continue;
|
|
37
|
-
}
|
|
38
|
-
hadSignal = true;
|
|
39
|
-
if (matches)
|
|
40
|
-
return true;
|
|
41
|
-
}
|
|
42
|
-
// If we cannot validate due to missing metadata, do not block.
|
|
43
|
-
return !hadSignal;
|
|
44
|
-
}
|
|
45
|
-
function formatBytes(value) {
|
|
46
|
-
if (!Number.isFinite(value) || value <= 0)
|
|
47
|
-
return '0 B';
|
|
48
|
-
const units = ['B', 'KB', 'MB', 'GB'];
|
|
49
|
-
let size = value;
|
|
50
|
-
let unitIndex = 0;
|
|
51
|
-
while (size >= 1024 && unitIndex < units.length - 1) {
|
|
52
|
-
size /= 1024;
|
|
53
|
-
unitIndex += 1;
|
|
54
|
-
}
|
|
55
|
-
const unit = units.at(unitIndex) ?? 'B';
|
|
56
|
-
const rounded = unitIndex === 0 ? Math.round(size) : Math.round(size * 10) / 10;
|
|
57
|
-
return `${rounded} ${unit}`;
|
|
58
|
-
}
|
|
59
|
-
export function formatAcceptHint(accept) {
|
|
60
|
-
const tokens = parseAccept(accept);
|
|
61
|
-
if (tokens.length === 0)
|
|
62
|
-
return null;
|
|
63
|
-
return `Accepted: ${tokens.join(', ')}`;
|
|
64
|
-
}
|
|
65
|
-
export function formatMaxSizeHint(maxSizeBytes) {
|
|
66
|
-
if (maxSizeBytes === undefined)
|
|
67
|
-
return null;
|
|
68
|
-
if (!Number.isFinite(maxSizeBytes) || maxSizeBytes <= 0)
|
|
69
|
-
return null;
|
|
70
|
-
return `Max size: ${formatBytes(maxSizeBytes)}`;
|
|
71
|
-
}
|
|
72
|
-
export function createOptimisticAssetFromPicked(picked) {
|
|
73
|
-
return {
|
|
74
|
-
kind: 'url',
|
|
75
|
-
url: picked.uri,
|
|
76
|
-
width: picked.width,
|
|
77
|
-
height: picked.height,
|
|
78
|
-
contentType: picked.contentType,
|
|
79
|
-
metadata: {
|
|
80
|
-
fileName: picked.fileName,
|
|
81
|
-
sizeBytes: picked.sizeBytes,
|
|
82
|
-
},
|
|
83
|
-
};
|
|
84
|
-
}
|
|
85
|
-
export function resolveRenderableUrl(asset) {
|
|
86
|
-
if (!asset)
|
|
87
|
-
return null;
|
|
88
|
-
if (asset.kind === 'url')
|
|
89
|
-
return asset.url;
|
|
90
|
-
return asset.publicUrl ?? null;
|
|
91
|
-
}
|
|
92
|
-
export function validatePickedImage({ picked, accept, maxSizeBytes, validatePicked, }) {
|
|
93
|
-
if (!isAccepted({ accept, contentType: picked.contentType, fileName: picked.fileName })) {
|
|
94
|
-
return accept ? `File type not accepted. Expected ${accept}.` : 'File type not accepted.';
|
|
95
|
-
}
|
|
96
|
-
if (maxSizeBytes !== undefined &&
|
|
97
|
-
Number.isFinite(maxSizeBytes) &&
|
|
98
|
-
maxSizeBytes > 0 &&
|
|
99
|
-
picked.sizeBytes !== undefined &&
|
|
100
|
-
Number.isFinite(picked.sizeBytes) &&
|
|
101
|
-
picked.sizeBytes > maxSizeBytes) {
|
|
102
|
-
return `File is too large (${formatBytes(picked.sizeBytes)}). Max ${formatBytes(maxSizeBytes)}.`;
|
|
103
|
-
}
|
|
104
|
-
return validatePicked?.(picked);
|
|
105
|
-
}
|
|
106
|
-
//# sourceMappingURL=uploadFlow.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"uploadFlow.js","sourceRoot":"","sources":["../../../src/patterns/image-upload-field/uploadFlow.ts"],"names":[],"mappings":"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","sourcesContent":["import type { ZoraImageAsset } from '../image-preview';\nimport type { ZoraPickedImage } from './types';\n\nfunction parseAccept(accept: string | undefined): readonly string[] {\n if (!accept) return [];\n\n return accept\n .split(',')\n .map((entry) => entry.trim())\n .filter((entry) => entry.length > 0);\n}\n\nfunction matchesAcceptToken({\n token,\n contentType,\n fileName,\n}: {\n token: string;\n contentType: string | undefined;\n fileName: string | undefined;\n}): boolean | null {\n const normalizedToken = token.toLowerCase();\n const normalizedContentType = contentType?.toLowerCase();\n const normalizedFileName = fileName?.toLowerCase();\n\n if (normalizedToken.startsWith('.')) {\n if (!normalizedFileName) return null;\n return normalizedFileName.endsWith(normalizedToken);\n }\n\n if (normalizedToken.endsWith('/*')) {\n if (!normalizedContentType) return null;\n const prefix = normalizedToken.slice(0, Math.max(0, normalizedToken.length - 1));\n return normalizedContentType.startsWith(prefix);\n }\n\n if (!normalizedContentType) return null;\n return normalizedContentType === normalizedToken;\n}\n\nexport function isAccepted({\n accept,\n contentType,\n fileName,\n}: {\n accept: string | undefined;\n contentType: string | undefined;\n fileName: string | undefined;\n}): boolean {\n const tokens = parseAccept(accept);\n if (tokens.length === 0) return true;\n\n let hadSignal = false;\n\n for (const token of tokens) {\n const matches = matchesAcceptToken({ token, contentType, fileName });\n if (matches === null) {\n continue;\n }\n\n hadSignal = true;\n if (matches) return true;\n }\n\n // If we cannot validate due to missing metadata, do not block.\n return !hadSignal;\n}\n\nfunction formatBytes(value: number): string {\n if (!Number.isFinite(value) || value <= 0) return '0 B';\n\n const units = ['B', 'KB', 'MB', 'GB'] as const;\n let size = value;\n let unitIndex = 0;\n\n while (size >= 1024 && unitIndex < units.length - 1) {\n size /= 1024;\n unitIndex += 1;\n }\n\n const unit = units.at(unitIndex) ?? 'B';\n const rounded = unitIndex === 0 ? Math.round(size) : Math.round(size * 10) / 10;\n return `${rounded} ${unit}`;\n}\n\nexport function formatAcceptHint(accept: string | undefined): string | null {\n const tokens = parseAccept(accept);\n if (tokens.length === 0) return null;\n return `Accepted: ${tokens.join(', ')}`;\n}\n\nexport function formatMaxSizeHint(maxSizeBytes: number | undefined): string | null {\n if (maxSizeBytes === undefined) return null;\n if (!Number.isFinite(maxSizeBytes) || maxSizeBytes <= 0) return null;\n return `Max size: ${formatBytes(maxSizeBytes)}`;\n}\n\nexport function createOptimisticAssetFromPicked(picked: ZoraPickedImage): ZoraImageAsset {\n return {\n kind: 'url',\n url: picked.uri,\n width: picked.width,\n height: picked.height,\n contentType: picked.contentType,\n metadata: {\n fileName: picked.fileName,\n sizeBytes: picked.sizeBytes,\n },\n };\n}\n\nexport function resolveRenderableUrl(asset: ZoraImageAsset | null): string | null {\n if (!asset) return null;\n if (asset.kind === 'url') return asset.url;\n return asset.publicUrl ?? null;\n}\n\nexport function validatePickedImage({\n picked,\n accept,\n maxSizeBytes,\n validatePicked,\n}: {\n picked: ZoraPickedImage;\n accept: string | undefined;\n maxSizeBytes: number | undefined;\n validatePicked: ((picked: ZoraPickedImage) => string | undefined) | undefined;\n}): string | undefined {\n if (!isAccepted({ accept, contentType: picked.contentType, fileName: picked.fileName })) {\n return accept ? `File type not accepted. Expected ${accept}.` : 'File type not accepted.';\n }\n\n if (\n maxSizeBytes !== undefined &&\n Number.isFinite(maxSizeBytes) &&\n maxSizeBytes > 0 &&\n picked.sizeBytes !== undefined &&\n Number.isFinite(picked.sizeBytes) &&\n picked.sizeBytes > maxSizeBytes\n ) {\n return `File is too large (${formatBytes(picked.sizeBytes)}). Max ${formatBytes(maxSizeBytes)}.`;\n }\n\n return validatePicked?.(picked);\n}\n"]}
|
|
@@ -1,82 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
|
|
3
|
-
import { Image } from '../../components/image';
|
|
4
|
-
import { Text } from '../../components/text';
|
|
5
|
-
import { Box, Stack } from '../../foundation';
|
|
6
|
-
import { useZoraTheme } from '../../theme/useZoraTheme';
|
|
7
|
-
import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
|
|
8
|
-
import type { ImagePreviewProps, ZoraImageAsset } from './types';
|
|
9
|
-
|
|
10
|
-
function resolveRenderableUrl(asset: ZoraImageAsset | null | undefined): string | null {
|
|
11
|
-
if (!asset) return null;
|
|
12
|
-
|
|
13
|
-
if (asset.kind === 'url') {
|
|
14
|
-
return asset.url;
|
|
15
|
-
}
|
|
16
|
-
|
|
17
|
-
return asset.publicUrl ?? null;
|
|
18
|
-
}
|
|
19
|
-
|
|
20
|
-
function resolveSafeAspectRatio(value: number | undefined): number {
|
|
21
|
-
if (!value || !Number.isFinite(value) || value <= 0) {
|
|
22
|
-
return 1;
|
|
23
|
-
}
|
|
24
|
-
|
|
25
|
-
return value;
|
|
26
|
-
}
|
|
27
|
-
|
|
28
|
-
function ImagePreviewInner({
|
|
29
|
-
themeId: _themeId,
|
|
30
|
-
mode: _mode,
|
|
31
|
-
testID,
|
|
32
|
-
asset,
|
|
33
|
-
aspectRatio,
|
|
34
|
-
fit = 'cover',
|
|
35
|
-
emptyTitle = 'No image',
|
|
36
|
-
emptyDescription = 'Select an image to preview it here.',
|
|
37
|
-
interactionPolicy: _interactionPolicy,
|
|
38
|
-
}: ImagePreviewProps) {
|
|
39
|
-
const { theme } = useZoraTheme();
|
|
40
|
-
const renderableUrl = resolveRenderableUrl(asset);
|
|
41
|
-
const resolvedAspectRatio = resolveSafeAspectRatio(aspectRatio);
|
|
42
|
-
|
|
43
|
-
return (
|
|
44
|
-
<Box
|
|
45
|
-
bg={theme.semantics.neutral.surface}
|
|
46
|
-
borderColor={theme.semantics.neutral.divider}
|
|
47
|
-
borderWidth={1}
|
|
48
|
-
radius="l"
|
|
49
|
-
testID={testID}
|
|
50
|
-
style={{ overflow: 'hidden' }}
|
|
51
|
-
>
|
|
52
|
-
{renderableUrl ? (
|
|
53
|
-
<Box style={{ aspectRatio: resolvedAspectRatio, width: '100%' }}>
|
|
54
|
-
<Image
|
|
55
|
-
alt={asset?.alt}
|
|
56
|
-
fit={fit}
|
|
57
|
-
source={renderableUrl}
|
|
58
|
-
style={{ height: '100%', width: '100%' }}
|
|
59
|
-
/>
|
|
60
|
-
</Box>
|
|
61
|
-
) : (
|
|
62
|
-
<Box p="l">
|
|
63
|
-
<Stack gap="xs">
|
|
64
|
-
<Text variant="label" weight="semiBold">
|
|
65
|
-
{emptyTitle}
|
|
66
|
-
</Text>
|
|
67
|
-
<Text emphasis="muted" variant="bodySmall">
|
|
68
|
-
{emptyDescription}
|
|
69
|
-
</Text>
|
|
70
|
-
</Stack>
|
|
71
|
-
</Box>
|
|
72
|
-
)}
|
|
73
|
-
</Box>
|
|
74
|
-
);
|
|
75
|
-
}
|
|
76
|
-
|
|
77
|
-
/***
|
|
78
|
-
* Preview pattern for showing an image with optional metadata and actions.
|
|
79
|
-
*
|
|
80
|
-
|
|
81
|
-
*/
|
|
82
|
-
export const ImagePreview = withZoraThemeScope(ImagePreviewInner);
|
|
@@ -1,10 +0,0 @@
|
|
|
1
|
-
import type { ZoraComponentMeta } from '../../metadata';
|
|
2
|
-
|
|
3
|
-
export const imagePreviewMeta = {
|
|
4
|
-
name: 'ImagePreview',
|
|
5
|
-
category: 'pattern',
|
|
6
|
-
directManifestNode: false,
|
|
7
|
-
allowedChildren: [],
|
|
8
|
-
note: 'Media pattern; not represented as a manifest node in v1.',
|
|
9
|
-
props: {},
|
|
10
|
-
} as const satisfies ZoraComponentMeta;
|
|
@@ -1,41 +0,0 @@
|
|
|
1
|
-
import type React from 'react';
|
|
2
|
-
|
|
3
|
-
import type { ImageFit } from '../../components/image';
|
|
4
|
-
import type { ZoraBaseProps } from '../../theme/ZoraBaseProps';
|
|
5
|
-
|
|
6
|
-
export interface ZoraImageMetadata {
|
|
7
|
-
fileName?: string;
|
|
8
|
-
sizeBytes?: number;
|
|
9
|
-
createdAt?: string;
|
|
10
|
-
}
|
|
11
|
-
|
|
12
|
-
export type ZoraImageAsset =
|
|
13
|
-
| {
|
|
14
|
-
kind: 'url';
|
|
15
|
-
url: string;
|
|
16
|
-
alt?: string;
|
|
17
|
-
width?: number;
|
|
18
|
-
height?: number;
|
|
19
|
-
contentType?: string;
|
|
20
|
-
metadata?: ZoraImageMetadata;
|
|
21
|
-
}
|
|
22
|
-
| {
|
|
23
|
-
kind: 'storage';
|
|
24
|
-
storageId?: string;
|
|
25
|
-
bucket: string;
|
|
26
|
-
path: string;
|
|
27
|
-
publicUrl?: string;
|
|
28
|
-
alt?: string;
|
|
29
|
-
width?: number;
|
|
30
|
-
height?: number;
|
|
31
|
-
contentType?: string;
|
|
32
|
-
metadata?: ZoraImageMetadata;
|
|
33
|
-
};
|
|
34
|
-
|
|
35
|
-
export interface ImagePreviewProps extends ZoraBaseProps {
|
|
36
|
-
asset?: ZoraImageAsset | null;
|
|
37
|
-
aspectRatio?: number;
|
|
38
|
-
fit?: ImageFit;
|
|
39
|
-
emptyTitle?: React.ReactNode;
|
|
40
|
-
emptyDescription?: React.ReactNode;
|
|
41
|
-
}
|