@panneau/fields 5.0.0-alpha.2 → 5.0.0-alpha.21
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +186 -20
- package/dist/address/AddressField.css +44 -0
- package/dist/address/AddressField.d.ts +37 -0
- package/dist/address/AddressField.d.ts.map +1 -0
- package/dist/address/AddressField.js +411 -0
- package/dist/address/AddressField.js.map +1 -0
- package/dist/address/AddressField.module.js +22 -0
- package/dist/address/AddressField.module.js.map +1 -0
- package/dist/address/address.d.ts +23 -0
- package/dist/address/address.d.ts.map +1 -0
- package/dist/address/address.js +58 -0
- package/dist/address/address.js.map +1 -0
- package/dist/address/index.d.ts +3 -0
- package/dist/address/index.d.ts.map +1 -0
- package/dist/address/index.js +3 -0
- package/dist/boolean/BooleanField.d.ts +1 -1
- package/dist/boolean/BooleanField.js +78 -17
- package/dist/boolean/BooleanField.js.map +1 -1
- package/dist/boolean/index.d.ts +1 -1
- package/dist/color/ColorField.css +9 -0
- package/dist/color/ColorField.d.ts +12 -5
- package/dist/color/ColorField.d.ts.map +1 -1
- package/dist/color/ColorField.js +341 -81
- package/dist/color/ColorField.js.map +1 -1
- package/dist/color/ColorField.module.js +4 -2
- package/dist/color/ColorField.module.js.map +1 -1
- package/dist/color/index.d.ts +2 -1
- package/dist/color/index.d.ts.map +1 -1
- package/dist/color/index.js +3 -1
- package/dist/color/palette.d.ts +23 -0
- package/dist/color/palette.d.ts.map +1 -0
- package/dist/color/palette.js +34 -0
- package/dist/color/palette.js.map +1 -0
- package/dist/compound/Compound.css +26 -0
- package/dist/compound/Compound.module.js +16 -0
- package/dist/compound/Compound.module.js.map +1 -0
- package/dist/compound/compound.d.ts +56 -0
- package/dist/compound/compound.d.ts.map +1 -0
- package/dist/compound/compound.js +186 -0
- package/dist/compound/compound.js.map +1 -0
- package/dist/country/CountryField.css +42 -0
- package/dist/country/CountryField.d.ts +32 -0
- package/dist/country/CountryField.d.ts.map +1 -0
- package/dist/country/CountryField.js +424 -0
- package/dist/country/CountryField.js.map +1 -0
- package/dist/country/CountryField.module.js +20 -0
- package/dist/country/CountryField.module.js.map +1 -0
- package/dist/country/codes.d.ts +6 -0
- package/dist/country/codes.d.ts.map +1 -0
- package/dist/country/codes.js +261 -0
- package/dist/country/codes.js.map +1 -0
- package/dist/country/countries.d.ts +32 -0
- package/dist/country/countries.d.ts.map +1 -0
- package/dist/country/countries.js +60 -0
- package/dist/country/countries.js.map +1 -0
- package/dist/country/index.d.ts +3 -0
- package/dist/country/index.d.ts.map +1 -0
- package/dist/country/index.js +4 -0
- package/dist/credits/CreditsField.d.ts +15 -0
- package/dist/credits/CreditsField.d.ts.map +1 -0
- package/dist/credits/CreditsField.js +58 -0
- package/dist/credits/CreditsField.js.map +1 -0
- package/dist/credits/credits.d.ts +18 -0
- package/dist/credits/credits.d.ts.map +1 -0
- package/dist/credits/credits.js +33 -0
- package/dist/credits/credits.js.map +1 -0
- package/dist/credits/index.d.ts +5 -0
- package/dist/credits/index.d.ts.map +1 -0
- package/dist/credits/index.js +3 -0
- package/dist/date/DateField.d.ts +1 -1
- package/dist/date/DateField.js.map +1 -1
- package/dist/date/index.d.ts +1 -1
- package/dist/daterange/DateRangeField.css +9 -0
- package/dist/daterange/DateRangeField.d.ts +31 -0
- package/dist/daterange/DateRangeField.d.ts.map +1 -0
- package/dist/daterange/DateRangeField.js +372 -0
- package/dist/daterange/DateRangeField.js.map +1 -0
- package/dist/daterange/DateRangeField.module.js +12 -0
- package/dist/daterange/DateRangeField.module.js.map +1 -0
- package/dist/daterange/index.d.ts +3 -0
- package/dist/daterange/index.d.ts.map +1 -0
- package/dist/daterange/index.js +3 -0
- package/dist/daterange/range.d.ts +61 -0
- package/dist/daterange/range.d.ts.map +1 -0
- package/dist/daterange/range.js +119 -0
- package/dist/daterange/range.js.map +1 -0
- package/dist/datetime/DateTimeField.d.ts +1 -1
- package/dist/datetime/DateTimeField.js +107 -20
- package/dist/datetime/DateTimeField.js.map +1 -1
- package/dist/datetime/index.d.ts +1 -1
- package/dist/duration/DurationField.css +11 -0
- package/dist/duration/DurationField.d.ts +67 -0
- package/dist/duration/DurationField.d.ts.map +1 -0
- package/dist/duration/DurationField.js +260 -0
- package/dist/duration/DurationField.js.map +1 -0
- package/dist/duration/DurationField.module.js +12 -0
- package/dist/duration/DurationField.module.js.map +1 -0
- package/dist/duration/index.d.ts +2 -0
- package/dist/duration/index.d.ts.map +1 -0
- package/dist/duration/index.js +1 -0
- package/dist/email/EmailField.d.ts +2 -2
- package/dist/email/EmailField.js.map +1 -1
- package/dist/email/index.d.ts +1 -1
- package/dist/embed/EmbedField.css +60 -0
- package/dist/embed/EmbedField.d.ts +29 -0
- package/dist/embed/EmbedField.d.ts.map +1 -0
- package/dist/embed/EmbedField.js +309 -0
- package/dist/embed/EmbedField.js.map +1 -0
- package/dist/embed/EmbedField.module.js +22 -0
- package/dist/embed/EmbedField.module.js.map +1 -0
- package/dist/embed/index.d.ts +3 -0
- package/dist/embed/index.d.ts.map +1 -0
- package/dist/embed/index.js +3 -0
- package/dist/file/FileField.css +54 -0
- package/dist/file/FileField.d.ts +50 -0
- package/dist/file/FileField.d.ts.map +1 -0
- package/dist/file/FileField.js +288 -0
- package/dist/file/FileField.js.map +1 -0
- package/dist/file/FileField.module.js +22 -0
- package/dist/file/FileField.module.js.map +1 -0
- package/dist/file/index.d.ts +3 -0
- package/dist/file/index.d.ts.map +1 -0
- package/dist/file/index.js +1 -0
- package/dist/group/GroupField.css +20 -3
- package/dist/group/GroupField.d.ts +10 -4
- package/dist/group/GroupField.d.ts.map +1 -1
- package/dist/group/GroupField.js +71 -66
- package/dist/group/GroupField.js.map +1 -1
- package/dist/group/GroupField.module.js +10 -2
- package/dist/group/GroupField.module.js.map +1 -1
- package/dist/group/index.d.ts +1 -1
- package/dist/index.d.ts +21 -7
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +14 -2
- package/dist/json/JsonField.css +7 -0
- package/dist/json/JsonField.d.ts +22 -0
- package/dist/json/JsonField.d.ts.map +1 -0
- package/dist/json/JsonField.js +207 -0
- package/dist/json/JsonField.js.map +1 -0
- package/dist/json/JsonField.module.js +8 -0
- package/dist/json/JsonField.module.js.map +1 -0
- package/dist/json/index.d.ts +2 -0
- package/dist/json/index.d.ts.map +1 -0
- package/dist/json/index.js +1 -0
- package/dist/link/LinkField.css +12 -0
- package/dist/link/LinkField.d.ts +38 -0
- package/dist/link/LinkField.d.ts.map +1 -0
- package/dist/link/LinkField.js +742 -0
- package/dist/link/LinkField.js.map +1 -0
- package/dist/link/LinkField.module.js +8 -0
- package/dist/link/LinkField.module.js.map +1 -0
- package/dist/link/index.d.ts +3 -0
- package/dist/link/index.d.ts.map +1 -0
- package/dist/link/index.js +3 -0
- package/dist/link/link.d.ts +30 -0
- package/dist/link/link.d.ts.map +1 -0
- package/dist/link/link.js +63 -0
- package/dist/link/link.js.map +1 -0
- package/dist/link/pages.d.ts +17 -0
- package/dist/link/pages.d.ts.map +1 -0
- package/dist/link/pages.js +104 -0
- package/dist/link/pages.js.map +1 -0
- package/dist/locales/index.js.map +1 -1
- package/dist/localized/LocalizedField.css +27 -6
- package/dist/localized/LocalizedField.d.ts +19 -8
- package/dist/localized/LocalizedField.d.ts.map +1 -1
- package/dist/localized/LocalizedField.js +238 -105
- package/dist/localized/LocalizedField.js.map +1 -1
- package/dist/localized/LocalizedField.module.js +10 -4
- package/dist/localized/LocalizedField.module.js.map +1 -1
- package/dist/localized/index.d.ts +1 -1
- package/dist/location/LocationField.css +54 -0
- package/dist/location/LocationField.d.ts +31 -0
- package/dist/location/LocationField.d.ts.map +1 -0
- package/dist/location/LocationField.js +487 -0
- package/dist/location/LocationField.js.map +1 -0
- package/dist/location/LocationField.module.js +22 -0
- package/dist/location/LocationField.module.js.map +1 -0
- package/dist/location/LocationMap.d.ts +25 -0
- package/dist/location/LocationMap.d.ts.map +1 -0
- package/dist/location/LocationMap.js +205 -0
- package/dist/location/LocationMap.js.map +1 -0
- package/dist/location/index.d.ts +5 -0
- package/dist/location/index.d.ts.map +1 -0
- package/dist/location/index.js +4 -0
- package/dist/location/leafletCss.d.ts +2 -0
- package/dist/location/leafletCss.d.ts.map +1 -0
- package/dist/location/leafletCss.js +6 -0
- package/dist/location/leafletCss.js.map +1 -0
- package/dist/location/nominatim.d.ts +23 -0
- package/dist/location/nominatim.d.ts.map +1 -0
- package/dist/location/nominatim.js +79 -0
- package/dist/location/nominatim.js.map +1 -0
- package/dist/location/search.d.ts +10 -0
- package/dist/location/search.d.ts.map +1 -0
- package/dist/location/search.js +83 -0
- package/dist/location/search.js.map +1 -0
- package/dist/location/types.d.ts +46 -0
- package/dist/location/types.d.ts.map +1 -0
- package/dist/missing/MissingField.d.ts +4 -3
- package/dist/missing/MissingField.d.ts.map +1 -1
- package/dist/missing/MissingField.js +3 -2
- package/dist/missing/MissingField.js.map +1 -1
- package/dist/money/MoneyField.d.ts +28 -0
- package/dist/money/MoneyField.d.ts.map +1 -0
- package/dist/money/MoneyField.js +269 -0
- package/dist/money/MoneyField.js.map +1 -0
- package/dist/money/index.d.ts +3 -0
- package/dist/money/index.d.ts.map +1 -0
- package/dist/money/index.js +3 -0
- package/dist/money/money.d.ts +27 -0
- package/dist/money/money.d.ts.map +1 -0
- package/dist/money/money.js +56 -0
- package/dist/money/money.js.map +1 -0
- package/dist/number/NumberField.d.ts +1 -1
- package/dist/number/NumberField.js.map +1 -1
- package/dist/number/index.d.ts +1 -1
- package/dist/range/RangeField.d.ts +22 -0
- package/dist/range/RangeField.d.ts.map +1 -0
- package/dist/range/RangeField.js +203 -0
- package/dist/range/RangeField.js.map +1 -0
- package/dist/range/index.d.ts +2 -0
- package/dist/range/index.d.ts.map +1 -0
- package/dist/range/index.js +1 -0
- package/dist/region/RegionField.d.ts +23 -0
- package/dist/region/RegionField.d.ts.map +1 -0
- package/dist/region/RegionField.js +174 -0
- package/dist/region/RegionField.js.map +1 -0
- package/dist/region/RegionFlag.css +9 -0
- package/dist/region/RegionFlag.d.ts +20 -0
- package/dist/region/RegionFlag.d.ts.map +1 -0
- package/dist/region/RegionFlag.js +61 -0
- package/dist/region/RegionFlag.js.map +1 -0
- package/dist/region/RegionFlag.module.js +8 -0
- package/dist/region/RegionFlag.module.js.map +1 -0
- package/dist/region/data.d.ts +5 -0
- package/dist/region/data.d.ts.map +1 -0
- package/dist/region/data.js +513 -0
- package/dist/region/data.js.map +1 -0
- package/dist/region/flags/CA.d.ts +4 -0
- package/dist/region/flags/CA.d.ts.map +1 -0
- package/dist/region/flags/CA.js +21 -0
- package/dist/region/flags/CA.js.map +1 -0
- package/dist/region/flags/US.d.ts +4 -0
- package/dist/region/flags/US.d.ts.map +1 -0
- package/dist/region/flags/US.js +65 -0
- package/dist/region/flags/US.js.map +1 -0
- package/dist/region/flags.d.ts +17 -0
- package/dist/region/flags.d.ts.map +1 -0
- package/dist/region/flags.js +84 -0
- package/dist/region/flags.js.map +1 -0
- package/dist/region/index.d.ts +5 -0
- package/dist/region/index.d.ts.map +1 -0
- package/dist/region/index.js +5 -0
- package/dist/region/regions.d.ts +15 -0
- package/dist/region/regions.d.ts.map +1 -0
- package/dist/region/regions.js +29 -0
- package/dist/region/regions.js.map +1 -0
- package/dist/relation/RelationField.d.ts +2 -2
- package/dist/relation/RelationField.d.ts.map +1 -1
- package/dist/relation/RelationField.js +511 -171
- package/dist/relation/RelationField.js.map +1 -1
- package/dist/relation/index.d.ts +2 -2
- package/dist/repeater/RepeaterField.d.ts +13 -2
- package/dist/repeater/RepeaterField.d.ts.map +1 -1
- package/dist/repeater/RepeaterField.js +138 -50
- package/dist/repeater/RepeaterField.js.map +1 -1
- package/dist/repeater/index.d.ts +1 -1
- package/dist/select/SelectField.d.ts +1 -1
- package/dist/select/SelectField.js.map +1 -1
- package/dist/select/index.d.ts +1 -1
- package/dist/sessions/SessionsField.d.ts +15 -0
- package/dist/sessions/SessionsField.d.ts.map +1 -0
- package/dist/sessions/SessionsField.js +49 -0
- package/dist/sessions/SessionsField.js.map +1 -0
- package/dist/sessions/index.d.ts +4 -0
- package/dist/sessions/index.d.ts.map +1 -0
- package/dist/sessions/index.js +1 -0
- package/dist/shared/CodeComboBox.d.ts +21 -0
- package/dist/shared/CodeComboBox.d.ts.map +1 -0
- package/dist/shared/CodeComboBox.js +238 -0
- package/dist/shared/CodeComboBox.js.map +1 -0
- package/dist/shared/DefinitionField.d.ts +9 -4
- package/dist/shared/DefinitionField.d.ts.map +1 -1
- package/dist/shared/DefinitionField.js +98 -78
- package/dist/shared/DefinitionField.js.map +1 -1
- package/dist/shared/builtIn.d.ts +7 -3
- package/dist/shared/builtIn.d.ts.map +1 -1
- package/dist/shared/builtIn.js +39 -7
- package/dist/shared/builtIn.js.map +1 -1
- package/dist/shared/check.d.ts +27 -0
- package/dist/shared/check.d.ts.map +1 -0
- package/dist/shared/check.js +18 -0
- package/dist/shared/check.js.map +1 -0
- package/dist/shared/context.d.ts +33 -5
- package/dist/shared/context.d.ts.map +1 -1
- package/dist/shared/context.js +36 -20
- package/dist/shared/context.js.map +1 -1
- package/dist/shared/cx.js.map +1 -1
- package/dist/shared/dates.js +2 -2
- package/dist/shared/dates.js.map +1 -1
- package/dist/shared/embed.d.ts +19 -0
- package/dist/shared/embed.d.ts.map +1 -0
- package/dist/shared/embed.js +14 -0
- package/dist/shared/embed.js.map +1 -0
- package/dist/shared/entry.d.ts +13 -4
- package/dist/shared/entry.d.ts.map +1 -1
- package/dist/shared/entry.js +24 -7
- package/dist/shared/entry.js.map +1 -1
- package/dist/shared/flow.d.ts +8 -0
- package/dist/shared/flow.d.ts.map +1 -0
- package/dist/shared/flow.js +38 -0
- package/dist/shared/flow.js.map +1 -0
- package/dist/shared/part.d.ts +26 -0
- package/dist/shared/part.d.ts.map +1 -0
- package/dist/shared/part.js +64 -0
- package/dist/shared/part.js.map +1 -0
- package/dist/shared/relation.js.map +1 -1
- package/dist/shared/reveal.d.ts +16 -0
- package/dist/shared/reveal.d.ts.map +1 -0
- package/dist/shared/reveal.js +46 -0
- package/dist/shared/reveal.js.map +1 -0
- package/dist/shared/types.d.ts +12 -0
- package/dist/shared/types.d.ts.map +1 -1
- package/dist/slug/SlugField.css +18 -0
- package/dist/slug/SlugField.d.ts +33 -5
- package/dist/slug/SlugField.d.ts.map +1 -1
- package/dist/slug/SlugField.js +346 -126
- package/dist/slug/SlugField.js.map +1 -1
- package/dist/slug/SlugField.module.js +14 -0
- package/dist/slug/SlugField.module.js.map +1 -0
- package/dist/slug/index.d.ts +1 -1
- package/dist/slug/index.d.ts.map +1 -1
- package/dist/slug/index.js +1 -1
- package/dist/tags/TagsField.d.ts +17 -0
- package/dist/tags/TagsField.d.ts.map +1 -0
- package/dist/tags/TagsField.js +120 -0
- package/dist/tags/TagsField.js.map +1 -0
- package/dist/tags/index.d.ts +2 -0
- package/dist/tags/index.d.ts.map +1 -0
- package/dist/tags/index.js +1 -0
- package/dist/tel/TelField.css +25 -0
- package/dist/tel/TelField.d.ts +34 -0
- package/dist/tel/TelField.d.ts.map +1 -0
- package/dist/tel/TelField.js +390 -0
- package/dist/tel/TelField.js.map +1 -0
- package/dist/tel/TelField.module.js +12 -0
- package/dist/tel/TelField.module.js.map +1 -0
- package/dist/tel/index.d.ts +3 -0
- package/dist/tel/index.d.ts.map +1 -0
- package/dist/tel/index.js +3 -0
- package/dist/tel/phone.d.ts +59 -0
- package/dist/tel/phone.d.ts.map +1 -0
- package/dist/tel/phone.js +107 -0
- package/dist/tel/phone.js.map +1 -0
- package/dist/text/TextField.d.ts +12 -4
- package/dist/text/TextField.d.ts.map +1 -1
- package/dist/text/TextField.js +104 -60
- package/dist/text/TextField.js.map +1 -1
- package/dist/text/index.d.ts +1 -1
- package/dist/textarea/TextAreaField.d.ts +1 -1
- package/dist/textarea/TextAreaField.js.map +1 -1
- package/dist/textarea/index.d.ts +1 -1
- package/dist/time/TimeField.d.ts +1 -1
- package/dist/time/TimeField.js +64 -10
- package/dist/time/TimeField.js.map +1 -1
- package/dist/time/index.d.ts +1 -1
- package/dist/upload/FilePicker.css +24 -0
- package/dist/upload/FilePicker.d.ts +14 -0
- package/dist/upload/FilePicker.d.ts.map +1 -0
- package/dist/upload/FilePicker.js +130 -0
- package/dist/upload/FilePicker.js.map +1 -0
- package/dist/upload/FilePicker.module.js +12 -0
- package/dist/upload/FilePicker.module.js.map +1 -0
- package/dist/upload/UploadList.css +93 -0
- package/dist/upload/UploadList.d.ts +18 -0
- package/dist/upload/UploadList.d.ts.map +1 -0
- package/dist/upload/UploadList.js +144 -0
- package/dist/upload/UploadList.js.map +1 -0
- package/dist/upload/UploadList.module.js +32 -0
- package/dist/upload/UploadList.module.js.map +1 -0
- package/dist/upload/files.d.ts +5 -0
- package/dist/upload/files.d.ts.map +1 -0
- package/dist/upload/files.js +26 -0
- package/dist/upload/files.js.map +1 -0
- package/dist/upload/types.d.ts +58 -0
- package/dist/upload/types.d.ts.map +1 -0
- package/dist/upload/useRejectionMessage.d.ts +4 -0
- package/dist/upload/useRejectionMessage.d.ts.map +1 -0
- package/dist/upload/useRejectionMessage.js +25 -0
- package/dist/upload/useRejectionMessage.js.map +1 -0
- package/dist/upload/useUploads.d.ts +30 -0
- package/dist/upload/useUploads.d.ts.map +1 -0
- package/dist/upload/useUploads.js +115 -0
- package/dist/upload/useUploads.js.map +1 -0
- package/dist/uppy/index.d.ts +3 -0
- package/dist/uppy/index.d.ts.map +1 -0
- package/dist/uppy/index.js +1 -0
- package/dist/uppy/uploader.d.ts +44 -0
- package/dist/uppy/uploader.d.ts.map +1 -0
- package/dist/uppy/uploader.js +139 -0
- package/dist/uppy/uploader.js.map +1 -0
- package/dist/url/UrlField.d.ts +2 -2
- package/dist/url/UrlField.d.ts.map +1 -1
- package/dist/url/UrlField.js +69 -14
- package/dist/url/UrlField.js.map +1 -1
- package/dist/url/index.d.ts +1 -1
- package/package.json +110 -7
|
@@ -0,0 +1,130 @@
|
|
|
1
|
+
import { cx } from "../shared/cx.js";
|
|
2
|
+
import { messages } from "../shared/messages.js";
|
|
3
|
+
import FilePicker_module_default from "./FilePicker.module.js";
|
|
4
|
+
import { c } from "react/compiler-runtime";
|
|
5
|
+
import { Button, usePanneauIntl } from "@panneau/ui";
|
|
6
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
7
|
+
import { Upload } from "lucide-react";
|
|
8
|
+
import { DropZone, FileTrigger } from "react-aria-components";
|
|
9
|
+
//#region src/upload/FilePicker.tsx
|
|
10
|
+
async function readDrop(items) {
|
|
11
|
+
return (await Promise.all(items.map((item) => item.kind === "file" ? item.getFile() : Promise.resolve(null)))).filter((file) => file !== null);
|
|
12
|
+
}
|
|
13
|
+
/** A button that opens the file dialog, in a zone where files can be dropped. */
|
|
14
|
+
function FilePicker(t0) {
|
|
15
|
+
const $ = c(34);
|
|
16
|
+
const { onSelect, accept, multiple: t1, isDisabled: t2, label, className } = t0;
|
|
17
|
+
const multiple = t1 === void 0 ? false : t1;
|
|
18
|
+
const isDisabled = t2 === void 0 ? false : t2;
|
|
19
|
+
const intl = usePanneauIntl();
|
|
20
|
+
let t3;
|
|
21
|
+
if ($[0] !== className) {
|
|
22
|
+
t3 = cx(FilePicker_module_default.zone, className);
|
|
23
|
+
$[0] = className;
|
|
24
|
+
$[1] = t3;
|
|
25
|
+
} else t3 = $[1];
|
|
26
|
+
let t4;
|
|
27
|
+
if ($[2] !== intl) {
|
|
28
|
+
t4 = intl.formatMessage(messages.dropZone);
|
|
29
|
+
$[2] = intl;
|
|
30
|
+
$[3] = t4;
|
|
31
|
+
} else t4 = $[3];
|
|
32
|
+
let t5;
|
|
33
|
+
if ($[4] !== multiple || $[5] !== onSelect) {
|
|
34
|
+
t5 = (event) => {
|
|
35
|
+
readDrop(event.items).then((files) => {
|
|
36
|
+
if (files.length > 0) onSelect(multiple ? files : files.slice(0, 1));
|
|
37
|
+
});
|
|
38
|
+
};
|
|
39
|
+
$[4] = multiple;
|
|
40
|
+
$[5] = onSelect;
|
|
41
|
+
$[6] = t5;
|
|
42
|
+
} else t5 = $[6];
|
|
43
|
+
let t6;
|
|
44
|
+
if ($[7] !== accept) {
|
|
45
|
+
t6 = accept !== null && accept !== void 0 && accept.length > 0 ? { acceptedFileTypes: accept } : {};
|
|
46
|
+
$[7] = accept;
|
|
47
|
+
$[8] = t6;
|
|
48
|
+
} else t6 = $[8];
|
|
49
|
+
let t7;
|
|
50
|
+
if ($[9] !== onSelect) {
|
|
51
|
+
t7 = (list) => {
|
|
52
|
+
const files_0 = list === null ? [] : [...list];
|
|
53
|
+
if (files_0.length > 0) onSelect(files_0);
|
|
54
|
+
};
|
|
55
|
+
$[9] = onSelect;
|
|
56
|
+
$[10] = t7;
|
|
57
|
+
} else t7 = $[10];
|
|
58
|
+
let t8;
|
|
59
|
+
if ($[11] !== intl || $[12] !== label || $[13] !== multiple) {
|
|
60
|
+
t8 = label ?? intl.formatMessage(multiple ? messages.chooseFiles : messages.chooseFile);
|
|
61
|
+
$[11] = intl;
|
|
62
|
+
$[12] = label;
|
|
63
|
+
$[13] = multiple;
|
|
64
|
+
$[14] = t8;
|
|
65
|
+
} else t8 = $[14];
|
|
66
|
+
let t9;
|
|
67
|
+
if ($[15] !== isDisabled || $[16] !== t8) {
|
|
68
|
+
t9 = /* @__PURE__ */ jsx(Button, {
|
|
69
|
+
size: "sm",
|
|
70
|
+
appearance: "outline",
|
|
71
|
+
icon: Upload,
|
|
72
|
+
isDisabled,
|
|
73
|
+
children: t8
|
|
74
|
+
});
|
|
75
|
+
$[15] = isDisabled;
|
|
76
|
+
$[16] = t8;
|
|
77
|
+
$[17] = t9;
|
|
78
|
+
} else t9 = $[17];
|
|
79
|
+
let t10;
|
|
80
|
+
if ($[18] !== multiple || $[19] !== t6 || $[20] !== t7 || $[21] !== t9) {
|
|
81
|
+
t10 = /* @__PURE__ */ jsx(FileTrigger, {
|
|
82
|
+
...t6,
|
|
83
|
+
allowsMultiple: multiple,
|
|
84
|
+
onSelect: t7,
|
|
85
|
+
children: t9
|
|
86
|
+
});
|
|
87
|
+
$[18] = multiple;
|
|
88
|
+
$[19] = t6;
|
|
89
|
+
$[20] = t7;
|
|
90
|
+
$[21] = t9;
|
|
91
|
+
$[22] = t10;
|
|
92
|
+
} else t10 = $[22];
|
|
93
|
+
let t11;
|
|
94
|
+
if ($[23] !== intl) {
|
|
95
|
+
t11 = intl.formatMessage(messages.dropHere);
|
|
96
|
+
$[23] = intl;
|
|
97
|
+
$[24] = t11;
|
|
98
|
+
} else t11 = $[24];
|
|
99
|
+
let t12;
|
|
100
|
+
if ($[25] !== t11) {
|
|
101
|
+
t12 = /* @__PURE__ */ jsx("span", {
|
|
102
|
+
className: FilePicker_module_default.hint,
|
|
103
|
+
children: t11
|
|
104
|
+
});
|
|
105
|
+
$[25] = t11;
|
|
106
|
+
$[26] = t12;
|
|
107
|
+
} else t12 = $[26];
|
|
108
|
+
let t13;
|
|
109
|
+
if ($[27] !== isDisabled || $[28] !== t10 || $[29] !== t12 || $[30] !== t3 || $[31] !== t4 || $[32] !== t5) {
|
|
110
|
+
t13 = /* @__PURE__ */ jsxs(DropZone, {
|
|
111
|
+
className: t3,
|
|
112
|
+
"aria-label": t4,
|
|
113
|
+
isDisabled,
|
|
114
|
+
onDrop: t5,
|
|
115
|
+
children: [t10, t12]
|
|
116
|
+
});
|
|
117
|
+
$[27] = isDisabled;
|
|
118
|
+
$[28] = t10;
|
|
119
|
+
$[29] = t12;
|
|
120
|
+
$[30] = t3;
|
|
121
|
+
$[31] = t4;
|
|
122
|
+
$[32] = t5;
|
|
123
|
+
$[33] = t13;
|
|
124
|
+
} else t13 = $[33];
|
|
125
|
+
return t13;
|
|
126
|
+
}
|
|
127
|
+
//#endregion
|
|
128
|
+
export { FilePicker };
|
|
129
|
+
|
|
130
|
+
//# sourceMappingURL=FilePicker.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"FilePicker.js","names":["Upload","DropItem","DropZone","FileTrigger","Button","usePanneauIntl","cx","messages","styles","FilePickerProps","onSelect","files","File","accept","multiple","isDisabled","label","className","readDrop","items","Promise","all","map","item","kind","getFile","resolve","filter","file","FilePicker","t0","$","_c","t1","t2","undefined","intl","t3","zone","t4","formatMessage","dropZone","t5","event","then","length","slice","t6","acceptedFileTypes","t7","list","files_0","t8","chooseFiles","chooseFile","t9","t10","t11","dropHere","t12","hint","t13","_c","styles"],"sources":["../../src/upload/FilePicker.tsx"],"sourcesContent":["import { Upload } from 'lucide-react';\nimport { type DropItem, DropZone, FileTrigger } from 'react-aria-components';\n\nimport { Button, usePanneauIntl } from '@panneau/ui';\n\nimport { cx } from '../shared/cx';\nimport { messages } from '../shared/messages';\nimport styles from './FilePicker.module.css';\n\nexport interface FilePickerProps {\n /** Called with the files chosen or dropped. */\n onSelect: (files: File[]) => void;\n /** Accepted MIME types, which the file dialog offers. */\n accept?: readonly string[] | null;\n multiple?: boolean;\n isDisabled?: boolean;\n /** Text of the button. Defaults to \"Choose a file\", or \"Choose files\" with `multiple`. */\n label?: string;\n className?: string;\n}\n\nasync function readDrop(items: DropItem[]): Promise<File[]> {\n const files = await Promise.all(\n items.map((item) => (item.kind === 'file' ? item.getFile() : Promise.resolve(null))),\n );\n return files.filter((file): file is File => file !== null);\n}\n\n/** A button that opens the file dialog, in a zone where files can be dropped. */\nexport function FilePicker({\n onSelect,\n accept,\n multiple = false,\n isDisabled = false,\n label,\n className,\n}: FilePickerProps) {\n const intl = usePanneauIntl();\n return (\n <DropZone\n className={cx(styles.zone, className)}\n aria-label={intl.formatMessage(messages.dropZone)}\n isDisabled={isDisabled}\n onDrop={(event) => {\n void readDrop(event.items).then((files) => {\n if (files.length > 0) {\n onSelect(multiple ? files : files.slice(0, 1));\n }\n });\n }}\n >\n <FileTrigger\n {...(accept !== null && accept !== undefined && accept.length > 0\n ? { acceptedFileTypes: accept }\n : {})}\n allowsMultiple={multiple}\n onSelect={(list) => {\n const files = list === null ? [] : [...list];\n if (files.length > 0) {\n onSelect(files);\n }\n }}\n >\n <Button size=\"sm\" appearance=\"outline\" icon={Upload} isDisabled={isDisabled}>\n {label ??\n intl.formatMessage(multiple ? messages.chooseFiles : messages.chooseFile)}\n </Button>\n </FileTrigger>\n <span className={styles.hint}>{intl.formatMessage(messages.dropHere)}</span>\n </DropZone>\n );\n}\n"],"mappings":"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"}
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import "./FilePicker.css";
|
|
2
|
+
//#region src/upload/FilePicker.module.css
|
|
3
|
+
var zone = "panneau-file-picker-zone";
|
|
4
|
+
var hint = "panneau-file-picker-hint";
|
|
5
|
+
var FilePicker_module_default = {
|
|
6
|
+
zone,
|
|
7
|
+
hint
|
|
8
|
+
};
|
|
9
|
+
//#endregion
|
|
10
|
+
export { FilePicker_module_default as default, hint, zone };
|
|
11
|
+
|
|
12
|
+
//# sourceMappingURL=FilePicker.module.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"FilePicker.module.js","names":[],"sources":["../../src/upload/FilePicker.module.css"],"sourcesContent":[".zone {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: var(--panneau-space-2);\n padding: var(--panneau-space-3);\n border: var(--panneau-border-width) dashed var(--panneau-color-border-control);\n border-radius: var(--panneau-radius-md);\n}\n\n.zone[data-drop-target] {\n background-color: var(--panneau-color-accent-subtle);\n border-color: var(--panneau-color-accent);\n}\n\n.zone[data-focus-visible] {\n outline: 2px solid var(--panneau-color-focus);\n outline-offset: 2px;\n}\n\n.hint {\n font-size: var(--panneau-font-size-sm);\n color: var(--panneau-color-text-muted);\n}\n"],"mappings":""}
|
|
@@ -0,0 +1,93 @@
|
|
|
1
|
+
.panneau-upload-list-list {
|
|
2
|
+
display: grid;
|
|
3
|
+
gap: var(--panneau-space-2);
|
|
4
|
+
margin: 0;
|
|
5
|
+
padding: 0;
|
|
6
|
+
list-style: none;
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
.panneau-upload-list-item {
|
|
10
|
+
display: grid;
|
|
11
|
+
grid-template-columns: minmax(0, 1fr) auto;
|
|
12
|
+
align-items: center;
|
|
13
|
+
gap: var(--panneau-space-1) var(--panneau-space-2);
|
|
14
|
+
padding: var(--panneau-space-2) var(--panneau-space-3);
|
|
15
|
+
background-color: var(--panneau-color-surface-sunken);
|
|
16
|
+
border: var(--panneau-border-width) solid var(--panneau-color-border);
|
|
17
|
+
border-radius: var(--panneau-radius-md);
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
.panneau-upload-list-failed {
|
|
21
|
+
border-color: var(--panneau-color-danger-border);
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
.panneau-upload-list-name {
|
|
25
|
+
overflow: hidden;
|
|
26
|
+
font-size: var(--panneau-font-size-sm);
|
|
27
|
+
font-weight: var(--panneau-font-weight-medium);
|
|
28
|
+
text-overflow: ellipsis;
|
|
29
|
+
white-space: nowrap;
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
.panneau-upload-list-buttons {
|
|
33
|
+
display: flex;
|
|
34
|
+
gap: var(--panneau-space-1);
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
.panneau-upload-list-progress {
|
|
38
|
+
grid-column: 1 / -1;
|
|
39
|
+
display: grid;
|
|
40
|
+
gap: var(--panneau-space-1);
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
.panneau-upload-list-status {
|
|
44
|
+
font-size: var(--panneau-font-size-sm);
|
|
45
|
+
color: var(--panneau-color-text-muted);
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
.panneau-upload-list-error {
|
|
49
|
+
grid-column: 1 / -1;
|
|
50
|
+
font-size: var(--panneau-font-size-sm);
|
|
51
|
+
color: var(--panneau-color-danger);
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
.panneau-upload-list-track {
|
|
55
|
+
height: 0.375rem;
|
|
56
|
+
overflow: hidden;
|
|
57
|
+
background: var(--panneau-color-surface);
|
|
58
|
+
border-radius: var(--panneau-radius-full);
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
.panneau-upload-list-fill {
|
|
62
|
+
display: block;
|
|
63
|
+
height: 100%;
|
|
64
|
+
background: var(--panneau-color-accent);
|
|
65
|
+
border-radius: inherit;
|
|
66
|
+
transition: width var(--panneau-duration) ease-out;
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
.panneau-upload-list-indeterminate .panneau-upload-list-fill {
|
|
70
|
+
width: 30%;
|
|
71
|
+
animation: panneau-upload-list-slide 1.2s ease-in-out infinite;
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
@keyframes panneau-upload-list-slide {
|
|
75
|
+
from {
|
|
76
|
+
transform: translateX(-100%);
|
|
77
|
+
}
|
|
78
|
+
to {
|
|
79
|
+
transform: translateX(340%);
|
|
80
|
+
}
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
@media (prefers-reduced-motion: reduce) {
|
|
84
|
+
.panneau-upload-list-fill {
|
|
85
|
+
transition: none;
|
|
86
|
+
}
|
|
87
|
+
|
|
88
|
+
.panneau-upload-list-indeterminate .panneau-upload-list-fill {
|
|
89
|
+
width: 100%;
|
|
90
|
+
animation: none;
|
|
91
|
+
opacity: 0.5;
|
|
92
|
+
}
|
|
93
|
+
}
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import type { UploadItem } from './types.js';
|
|
2
|
+
export interface UploadListProps {
|
|
3
|
+
/** The files being uploaded, from `useUploads()`. */
|
|
4
|
+
items: readonly UploadItem[];
|
|
5
|
+
onPause?: (id: string) => void;
|
|
6
|
+
onResume?: (id: string) => void;
|
|
7
|
+
onCancel?: (id: string) => void;
|
|
8
|
+
onRetry?: (id: string) => void;
|
|
9
|
+
/** Accessible name of the list. Defaults to "Uploads". */
|
|
10
|
+
'aria-label'?: string;
|
|
11
|
+
className?: string;
|
|
12
|
+
}
|
|
13
|
+
/**
|
|
14
|
+
* The files being uploaded: a progress bar for each, and buttons to pause and resume a file sent
|
|
15
|
+
* in parts, to cancel it, and to retry it when it failed. Renders nothing without files.
|
|
16
|
+
*/
|
|
17
|
+
export declare function UploadList({ items, onPause, onResume, onCancel, onRetry, 'aria-label': ariaLabel, className, }: UploadListProps): import("react").JSX.Element | null;
|
|
18
|
+
//# sourceMappingURL=UploadList.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"UploadList.d.ts","sourceRoot":"","sources":["../../src/upload/UploadList.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAE1C,MAAM,WAAW,eAAe;IAC5B,qDAAqD;IACrD,KAAK,EAAE,SAAS,UAAU,EAAE,CAAC;IAC7B,OAAO,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/B,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,OAAO,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/B,0DAA0D;IAC1D,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB;AAED;;;GAGG;AACH,wBAAgB,UAAU,CAAC,EACvB,KAAK,EACL,OAAO,EACP,QAAQ,EACR,QAAQ,EACR,OAAO,EACP,YAAY,EAAE,SAAS,EACvB,SAAS,GACZ,EAAE,eAAe,sCAsGjB"}
|
|
@@ -0,0 +1,144 @@
|
|
|
1
|
+
import { cx } from "../shared/cx.js";
|
|
2
|
+
import { messages } from "../shared/messages.js";
|
|
3
|
+
import UploadList_module_default from "./UploadList.module.js";
|
|
4
|
+
import { formatSize } from "./files.js";
|
|
5
|
+
import { c } from "react/compiler-runtime";
|
|
6
|
+
import { IconButton, usePanneauIntl } from "@panneau/ui";
|
|
7
|
+
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
8
|
+
import { Pause, Play, RotateCcw, X } from "lucide-react";
|
|
9
|
+
import { ProgressBar } from "react-aria-components";
|
|
10
|
+
//#region src/upload/UploadList.tsx
|
|
11
|
+
/**
|
|
12
|
+
* The files being uploaded: a progress bar for each, and buttons to pause and resume a file sent
|
|
13
|
+
* in parts, to cancel it, and to retry it when it failed. Renders nothing without files.
|
|
14
|
+
*/
|
|
15
|
+
function UploadList(t0) {
|
|
16
|
+
const $ = c(22);
|
|
17
|
+
const { items, onPause, onResume, onCancel, onRetry, "aria-label": ariaLabel, className } = t0;
|
|
18
|
+
const intl = usePanneauIntl();
|
|
19
|
+
if (items.length === 0) return null;
|
|
20
|
+
let t1;
|
|
21
|
+
if ($[0] !== className) {
|
|
22
|
+
t1 = cx(UploadList_module_default.list, className);
|
|
23
|
+
$[0] = className;
|
|
24
|
+
$[1] = t1;
|
|
25
|
+
} else t1 = $[1];
|
|
26
|
+
let t2;
|
|
27
|
+
if ($[2] !== ariaLabel || $[3] !== intl) {
|
|
28
|
+
t2 = ariaLabel ?? intl.formatMessage(messages.uploads);
|
|
29
|
+
$[2] = ariaLabel;
|
|
30
|
+
$[3] = intl;
|
|
31
|
+
$[4] = t2;
|
|
32
|
+
} else t2 = $[4];
|
|
33
|
+
let t3;
|
|
34
|
+
if ($[5] !== intl || $[6] !== items || $[7] !== onCancel || $[8] !== onPause || $[9] !== onResume || $[10] !== onRetry) {
|
|
35
|
+
let t4;
|
|
36
|
+
if ($[12] !== intl || $[13] !== onCancel || $[14] !== onPause || $[15] !== onResume || $[16] !== onRetry) {
|
|
37
|
+
t4 = (item) => {
|
|
38
|
+
const { name } = item;
|
|
39
|
+
const failed = item.status === "failed";
|
|
40
|
+
const indeterminate = item.progress === null || item.status === "completing";
|
|
41
|
+
const status = {
|
|
42
|
+
uploading: intl.formatMessage(messages.uploading),
|
|
43
|
+
paused: intl.formatMessage(messages.uploadPaused),
|
|
44
|
+
completing: intl.formatMessage(messages.uploadCompleting),
|
|
45
|
+
failed: intl.formatMessage(messages.uploadFailed, { error: item.error ?? "" })
|
|
46
|
+
}[item.status];
|
|
47
|
+
const percent = item.progress === null ? null : Math.round(item.progress * 100);
|
|
48
|
+
return /* @__PURE__ */ jsxs("li", {
|
|
49
|
+
className: cx(UploadList_module_default.item, failed && UploadList_module_default.failed),
|
|
50
|
+
children: [
|
|
51
|
+
/* @__PURE__ */ jsxs("span", {
|
|
52
|
+
className: UploadList_module_default.name,
|
|
53
|
+
children: [name, item.size !== null ? ` · ${formatSize(item.size, intl.locale)}` : null]
|
|
54
|
+
}),
|
|
55
|
+
/* @__PURE__ */ jsxs("span", {
|
|
56
|
+
className: UploadList_module_default.buttons,
|
|
57
|
+
children: [
|
|
58
|
+
item.canPause && item.status === "uploading" && onPause ? /* @__PURE__ */ jsx(IconButton, {
|
|
59
|
+
icon: Pause,
|
|
60
|
+
size: "sm",
|
|
61
|
+
label: intl.formatMessage(messages.pauseUpload, { name }),
|
|
62
|
+
onPress: () => onPause(item.id)
|
|
63
|
+
}) : null,
|
|
64
|
+
item.status === "paused" && onResume ? /* @__PURE__ */ jsx(IconButton, {
|
|
65
|
+
icon: Play,
|
|
66
|
+
size: "sm",
|
|
67
|
+
label: intl.formatMessage(messages.resumeUpload, { name }),
|
|
68
|
+
onPress: () => onResume(item.id)
|
|
69
|
+
}) : null,
|
|
70
|
+
failed && onRetry ? /* @__PURE__ */ jsx(IconButton, {
|
|
71
|
+
icon: RotateCcw,
|
|
72
|
+
size: "sm",
|
|
73
|
+
label: intl.formatMessage(messages.retryUpload, { name }),
|
|
74
|
+
onPress: () => onRetry(item.id)
|
|
75
|
+
}) : null,
|
|
76
|
+
item.status !== "completing" && onCancel ? /* @__PURE__ */ jsx(IconButton, {
|
|
77
|
+
icon: X,
|
|
78
|
+
size: "sm",
|
|
79
|
+
label: intl.formatMessage(messages.cancelUpload, { name }),
|
|
80
|
+
onPress: () => onCancel(item.id)
|
|
81
|
+
}) : null
|
|
82
|
+
]
|
|
83
|
+
}),
|
|
84
|
+
failed ? /* @__PURE__ */ jsx("span", {
|
|
85
|
+
className: UploadList_module_default.error,
|
|
86
|
+
role: "alert",
|
|
87
|
+
children: status
|
|
88
|
+
}) : /* @__PURE__ */ jsx(ProgressBar, {
|
|
89
|
+
"aria-label": name,
|
|
90
|
+
className: cx(UploadList_module_default.progress, indeterminate && UploadList_module_default.indeterminate),
|
|
91
|
+
value: percent ?? 0,
|
|
92
|
+
isIndeterminate: indeterminate,
|
|
93
|
+
valueLabel: item.progress !== null && !indeterminate ? `${status} · ${intl.formatNumber(item.progress, { style: "percent" })}` : status,
|
|
94
|
+
children: (t5) => {
|
|
95
|
+
const { valueText } = t5;
|
|
96
|
+
return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
|
|
97
|
+
className: UploadList_module_default.status,
|
|
98
|
+
children: valueText
|
|
99
|
+
}), /* @__PURE__ */ jsx("span", {
|
|
100
|
+
className: UploadList_module_default.track,
|
|
101
|
+
children: /* @__PURE__ */ jsx("span", {
|
|
102
|
+
className: UploadList_module_default.fill,
|
|
103
|
+
style: indeterminate ? void 0 : { width: `${String(percent ?? 0)}%` }
|
|
104
|
+
})
|
|
105
|
+
})] });
|
|
106
|
+
}
|
|
107
|
+
})
|
|
108
|
+
]
|
|
109
|
+
}, item.id);
|
|
110
|
+
};
|
|
111
|
+
$[12] = intl;
|
|
112
|
+
$[13] = onCancel;
|
|
113
|
+
$[14] = onPause;
|
|
114
|
+
$[15] = onResume;
|
|
115
|
+
$[16] = onRetry;
|
|
116
|
+
$[17] = t4;
|
|
117
|
+
} else t4 = $[17];
|
|
118
|
+
t3 = items.map(t4);
|
|
119
|
+
$[5] = intl;
|
|
120
|
+
$[6] = items;
|
|
121
|
+
$[7] = onCancel;
|
|
122
|
+
$[8] = onPause;
|
|
123
|
+
$[9] = onResume;
|
|
124
|
+
$[10] = onRetry;
|
|
125
|
+
$[11] = t3;
|
|
126
|
+
} else t3 = $[11];
|
|
127
|
+
let t4;
|
|
128
|
+
if ($[18] !== t1 || $[19] !== t2 || $[20] !== t3) {
|
|
129
|
+
t4 = /* @__PURE__ */ jsx("ul", {
|
|
130
|
+
className: t1,
|
|
131
|
+
"aria-label": t2,
|
|
132
|
+
children: t3
|
|
133
|
+
});
|
|
134
|
+
$[18] = t1;
|
|
135
|
+
$[19] = t2;
|
|
136
|
+
$[20] = t3;
|
|
137
|
+
$[21] = t4;
|
|
138
|
+
} else t4 = $[21];
|
|
139
|
+
return t4;
|
|
140
|
+
}
|
|
141
|
+
//#endregion
|
|
142
|
+
export { UploadList };
|
|
143
|
+
|
|
144
|
+
//# sourceMappingURL=UploadList.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"UploadList.js","names":["Pause","Play","RotateCcw","X","ProgressBar","IconButton","usePanneauIntl","cx","messages","styles","formatSize","UploadItem","UploadListProps","items","onPause","id","onResume","onCancel","onRetry","className","UploadList","t0","$","_c","ariaLabel","intl","length","t1","list","t2","formatMessage","uploads","t3","t4","item","name","failed","status","indeterminate","progress","uploading","paused","uploadPaused","completing","uploadCompleting","uploadFailed","error","percent","Math","round","size","locale","buttons","canPause","pauseUpload","resumeUpload","retryUpload","cancelUpload","formatNumber","style","t5","valueText","track","fill","undefined","width","String","map","_c","styles","_Fragment"],"sources":["../../src/upload/UploadList.tsx"],"sourcesContent":["import { Pause, Play, RotateCcw, X } from 'lucide-react';\nimport { ProgressBar } from 'react-aria-components';\n\nimport { IconButton, usePanneauIntl } from '@panneau/ui';\n\nimport { cx } from '../shared/cx';\nimport { messages } from '../shared/messages';\nimport styles from './UploadList.module.css';\nimport { formatSize } from './files';\nimport type { UploadItem } from './types';\n\nexport interface UploadListProps {\n /** The files being uploaded, from `useUploads()`. */\n items: readonly UploadItem[];\n onPause?: (id: string) => void;\n onResume?: (id: string) => void;\n onCancel?: (id: string) => void;\n onRetry?: (id: string) => void;\n /** Accessible name of the list. Defaults to \"Uploads\". */\n 'aria-label'?: string;\n className?: string;\n}\n\n/**\n * The files being uploaded: a progress bar for each, and buttons to pause and resume a file sent\n * in parts, to cancel it, and to retry it when it failed. Renders nothing without files.\n */\nexport function UploadList({\n items,\n onPause,\n onResume,\n onCancel,\n onRetry,\n 'aria-label': ariaLabel,\n className,\n}: UploadListProps) {\n const intl = usePanneauIntl();\n if (items.length === 0) {\n return null;\n }\n return (\n <ul\n className={cx(styles.list, className)}\n aria-label={ariaLabel ?? intl.formatMessage(messages.uploads)}\n >\n {items.map((item) => {\n const { name } = item;\n const failed = item.status === 'failed';\n const indeterminate = item.progress === null || item.status === 'completing';\n const status = {\n uploading: intl.formatMessage(messages.uploading),\n paused: intl.formatMessage(messages.uploadPaused),\n completing: intl.formatMessage(messages.uploadCompleting),\n failed: intl.formatMessage(messages.uploadFailed, { error: item.error ?? '' }),\n }[item.status];\n const percent = item.progress === null ? null : Math.round(item.progress * 100);\n return (\n <li key={item.id} className={cx(styles.item, failed && styles.failed)}>\n <span className={styles.name}>\n {name}\n {item.size !== null ? ` · ${formatSize(item.size, intl.locale)}` : null}\n </span>\n <span className={styles.buttons}>\n {item.canPause && item.status === 'uploading' && onPause ? (\n <IconButton\n icon={Pause}\n size=\"sm\"\n label={intl.formatMessage(messages.pauseUpload, { name })}\n onPress={() => onPause(item.id)}\n />\n ) : null}\n {item.status === 'paused' && onResume ? (\n <IconButton\n icon={Play}\n size=\"sm\"\n label={intl.formatMessage(messages.resumeUpload, { name })}\n onPress={() => onResume(item.id)}\n />\n ) : null}\n {failed && onRetry ? (\n <IconButton\n icon={RotateCcw}\n size=\"sm\"\n label={intl.formatMessage(messages.retryUpload, { name })}\n onPress={() => onRetry(item.id)}\n />\n ) : null}\n {item.status !== 'completing' && onCancel ? (\n <IconButton\n icon={X}\n size=\"sm\"\n label={intl.formatMessage(messages.cancelUpload, { name })}\n onPress={() => onCancel(item.id)}\n />\n ) : null}\n </span>\n {failed ? (\n <span className={styles.error} role=\"alert\">\n {status}\n </span>\n ) : (\n <ProgressBar\n aria-label={name}\n className={cx(\n styles.progress,\n indeterminate && styles.indeterminate,\n )}\n value={percent ?? 0}\n isIndeterminate={indeterminate}\n valueLabel={\n item.progress !== null && !indeterminate\n ? `${status} · ${intl.formatNumber(item.progress, { style: 'percent' })}`\n : status\n }\n >\n {({ valueText }) => (\n <>\n <span className={styles.status}>{valueText}</span>\n <span className={styles.track}>\n <span\n className={styles.fill}\n style={\n indeterminate\n ? undefined\n : { width: `${String(percent ?? 0)}%` }\n }\n />\n </span>\n </>\n )}\n </ProgressBar>\n )}\n </li>\n );\n })}\n </ul>\n );\n}\n"],"mappings":"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"}
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
import "./UploadList.css";
|
|
2
|
+
//#region src/upload/UploadList.module.css
|
|
3
|
+
var list = "panneau-upload-list-list";
|
|
4
|
+
var item = "panneau-upload-list-item";
|
|
5
|
+
var failed = "panneau-upload-list-failed";
|
|
6
|
+
var name = "panneau-upload-list-name";
|
|
7
|
+
var buttons = "panneau-upload-list-buttons";
|
|
8
|
+
var progress = "panneau-upload-list-progress";
|
|
9
|
+
var status = "panneau-upload-list-status";
|
|
10
|
+
var error = "panneau-upload-list-error";
|
|
11
|
+
var track = "panneau-upload-list-track";
|
|
12
|
+
var fill = "panneau-upload-list-fill";
|
|
13
|
+
var indeterminate = "panneau-upload-list-indeterminate";
|
|
14
|
+
var slide = "panneau-upload-list-slide";
|
|
15
|
+
var UploadList_module_default = {
|
|
16
|
+
list,
|
|
17
|
+
item,
|
|
18
|
+
failed,
|
|
19
|
+
name,
|
|
20
|
+
buttons,
|
|
21
|
+
progress,
|
|
22
|
+
status,
|
|
23
|
+
error,
|
|
24
|
+
track,
|
|
25
|
+
fill,
|
|
26
|
+
indeterminate,
|
|
27
|
+
slide
|
|
28
|
+
};
|
|
29
|
+
//#endregion
|
|
30
|
+
export { buttons, UploadList_module_default as default, error, failed, fill, indeterminate, item, list, name, progress, slide, status, track };
|
|
31
|
+
|
|
32
|
+
//# sourceMappingURL=UploadList.module.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"UploadList.module.js","names":[],"sources":["../../src/upload/UploadList.module.css"],"sourcesContent":[".list {\n display: grid;\n gap: var(--panneau-space-2);\n margin: 0;\n padding: 0;\n list-style: none;\n}\n\n.item {\n display: grid;\n grid-template-columns: minmax(0, 1fr) auto;\n align-items: center;\n gap: var(--panneau-space-1) var(--panneau-space-2);\n padding: var(--panneau-space-2) var(--panneau-space-3);\n background-color: var(--panneau-color-surface-sunken);\n border: var(--panneau-border-width) solid var(--panneau-color-border);\n border-radius: var(--panneau-radius-md);\n}\n\n.failed {\n border-color: var(--panneau-color-danger-border);\n}\n\n.name {\n overflow: hidden;\n font-size: var(--panneau-font-size-sm);\n font-weight: var(--panneau-font-weight-medium);\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.buttons {\n display: flex;\n gap: var(--panneau-space-1);\n}\n\n.progress {\n grid-column: 1 / -1;\n display: grid;\n gap: var(--panneau-space-1);\n}\n\n.status {\n font-size: var(--panneau-font-size-sm);\n color: var(--panneau-color-text-muted);\n}\n\n.error {\n grid-column: 1 / -1;\n font-size: var(--panneau-font-size-sm);\n color: var(--panneau-color-danger);\n}\n\n.track {\n height: 0.375rem;\n overflow: hidden;\n background: var(--panneau-color-surface);\n border-radius: var(--panneau-radius-full);\n}\n\n.fill {\n display: block;\n height: 100%;\n background: var(--panneau-color-accent);\n border-radius: inherit;\n transition: width var(--panneau-duration) ease-out;\n}\n\n.indeterminate .fill {\n width: 30%;\n animation: slide 1.2s ease-in-out infinite;\n}\n\n@keyframes slide {\n from {\n transform: translateX(-100%);\n }\n to {\n transform: translateX(340%);\n }\n}\n\n@media (prefers-reduced-motion: reduce) {\n .fill {\n transition: none;\n }\n\n .indeterminate .fill {\n width: 100%;\n animation: none;\n opacity: 0.5;\n }\n}\n"],"mappings":""}
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
/** Whether a MIME type matches one of the patterns of an `accept` rule (`image/*`, `application/pdf`). */
|
|
2
|
+
export declare function matchesMime(mime: string, patterns: readonly string[]): boolean;
|
|
3
|
+
/** A size in bytes, for people: `1.5 MB`. Uses the locale's number format. */
|
|
4
|
+
export declare function formatSize(bytes: number, locale?: string): string;
|
|
5
|
+
//# sourceMappingURL=files.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"files.d.ts","sourceRoot":"","sources":["../../src/upload/files.ts"],"names":[],"mappings":"AAAA,0GAA0G;AAC1G,wBAAgB,WAAW,CAAC,IAAI,EAAE,MAAM,EAAE,QAAQ,EAAE,SAAS,MAAM,EAAE,GAAG,OAAO,CAI9E;AAID,8EAA8E;AAC9E,wBAAgB,UAAU,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAWjE"}
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
//#region src/upload/files.ts
|
|
2
|
+
/** Whether a MIME type matches one of the patterns of an `accept` rule (`image/*`, `application/pdf`). */
|
|
3
|
+
function matchesMime(mime, patterns) {
|
|
4
|
+
return patterns.some((pattern) => pattern.endsWith("/*") ? mime.startsWith(pattern.slice(0, -1)) : mime === pattern);
|
|
5
|
+
}
|
|
6
|
+
var UNITS = [
|
|
7
|
+
"B",
|
|
8
|
+
"KB",
|
|
9
|
+
"MB",
|
|
10
|
+
"GB",
|
|
11
|
+
"TB"
|
|
12
|
+
];
|
|
13
|
+
/** A size in bytes, for people: `1.5 MB`. Uses the locale's number format. */
|
|
14
|
+
function formatSize(bytes, locale) {
|
|
15
|
+
let value = bytes;
|
|
16
|
+
let unit = 0;
|
|
17
|
+
while (value >= 1024 && unit < UNITS.length - 1) {
|
|
18
|
+
value /= 1024;
|
|
19
|
+
unit += 1;
|
|
20
|
+
}
|
|
21
|
+
return `${new Intl.NumberFormat(locale, { maximumFractionDigits: unit === 0 || value >= 10 ? 0 : 1 }).format(value)} ${UNITS[unit] ?? "B"}`;
|
|
22
|
+
}
|
|
23
|
+
//#endregion
|
|
24
|
+
export { formatSize, matchesMime };
|
|
25
|
+
|
|
26
|
+
//# sourceMappingURL=files.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"files.js","names":["matchesMime","mime","patterns","some","pattern","endsWith","startsWith","slice","UNITS","const","formatSize","bytes","locale","value","unit","length","number","Intl","NumberFormat","maximumFractionDigits","format"],"sources":["../../src/upload/files.ts"],"sourcesContent":["/** Whether a MIME type matches one of the patterns of an `accept` rule (`image/*`, `application/pdf`). */\nexport function matchesMime(mime: string, patterns: readonly string[]): boolean {\n return patterns.some((pattern) =>\n pattern.endsWith('/*') ? mime.startsWith(pattern.slice(0, -1)) : mime === pattern,\n );\n}\n\nconst UNITS = ['B', 'KB', 'MB', 'GB', 'TB'] as const;\n\n/** A size in bytes, for people: `1.5 MB`. Uses the locale's number format. */\nexport function formatSize(bytes: number, locale?: string): string {\n let value = bytes;\n let unit = 0;\n while (value >= 1024 && unit < UNITS.length - 1) {\n value /= 1024;\n unit += 1;\n }\n const number = new Intl.NumberFormat(locale, {\n maximumFractionDigits: unit === 0 || value >= 10 ? 0 : 1,\n }).format(value);\n return `${number} ${UNITS[unit] ?? 'B'}`;\n}\n"],"mappings":";;AACA,SAAgBA,YAAYC,MAAcC,UAAsC;CAC5E,OAAOA,SAASC,MAAMC,YAClBA,QAAQC,SAAS,IAAI,IAAIJ,KAAKK,WAAWF,QAAQG,MAAM,GAAG,EAAE,CAAC,IAAIN,SAASG,OAC9E;AACJ;AAEA,IAAMI,QAAQ;CAAC;CAAK;CAAM;CAAM;CAAM;AAAI;;AAG1C,SAAgBE,WAAWC,OAAeC,QAAyB;CAC/D,IAAIC,QAAQF;CACZ,IAAIG,OAAO;CACX,OAAOD,SAAS,QAAQC,OAAON,MAAMO,SAAS,GAAG;EAC7CF,SAAS;EACTC,QAAQ;CACZ;CAIA,OAAO,GAHQ,IAAIG,KAAKC,aAAaN,QAAQ,EACzCO,uBAAuBL,SAAS,KAAKD,SAAS,KAAK,IAAI,EAC3D,CAAC,CAAC,CAACO,OAAOP,KACAG,EAAM,GAAIR,MAAMM,SAAS;AACvC"}
|
|
@@ -0,0 +1,58 @@
|
|
|
1
|
+
/** Where a file is: sent to storage, paused, completed with the backend, or failed. */
|
|
2
|
+
export type UploadItemStatus = 'uploading' | 'paused' | 'completing' | 'failed';
|
|
3
|
+
/** A file being uploaded, as an upload list shows it. */
|
|
4
|
+
export interface UploadItem {
|
|
5
|
+
id: string;
|
|
6
|
+
name: string;
|
|
7
|
+
size: number | null;
|
|
8
|
+
mime: string | null;
|
|
9
|
+
/** From 0 to 1, or null until the upload reports one. */
|
|
10
|
+
progress: number | null;
|
|
11
|
+
status: UploadItemStatus;
|
|
12
|
+
/** Why it failed. */
|
|
13
|
+
error: string | null;
|
|
14
|
+
/** Whether it can pause: only a file sent in parts can. */
|
|
15
|
+
canPause: boolean;
|
|
16
|
+
}
|
|
17
|
+
/**
|
|
18
|
+
* A file uploaded directly to storage: the reference that values send (`{ upload }`), with what
|
|
19
|
+
* the browser knows of the file, so that fields can show it and check it before saving. Backends
|
|
20
|
+
* only trust `upload`.
|
|
21
|
+
*/
|
|
22
|
+
export interface UploadedFile {
|
|
23
|
+
upload: string;
|
|
24
|
+
name: string;
|
|
25
|
+
mime: string | null;
|
|
26
|
+
size: number | null;
|
|
27
|
+
}
|
|
28
|
+
/** Why a file was refused before it was sent. */
|
|
29
|
+
export type UploadRejection = 'accept' | 'maxSize';
|
|
30
|
+
/** Uploads files and keeps their state, for an upload list. */
|
|
31
|
+
export interface Uploader {
|
|
32
|
+
/** The files being uploaded, in the order they were added. Done files leave the list. */
|
|
33
|
+
getItems(): readonly UploadItem[];
|
|
34
|
+
/** Calls the listener when the items change. Returns a function that unsubscribes. */
|
|
35
|
+
subscribe(listener: () => void): () => void;
|
|
36
|
+
/** Sends files. */
|
|
37
|
+
add(files: Iterable<File>): void;
|
|
38
|
+
pause(id: string): void;
|
|
39
|
+
resume(id: string): void;
|
|
40
|
+
/** Stops a file and removes it from the list. */
|
|
41
|
+
cancel(id: string): void;
|
|
42
|
+
/** Sends a failed file again. */
|
|
43
|
+
retry(id: string): void;
|
|
44
|
+
/** Stops every upload. The uploader can't be used after. */
|
|
45
|
+
destroy(): void;
|
|
46
|
+
}
|
|
47
|
+
/**
|
|
48
|
+
* Where fields that take files upload them directly to storage (decision 0025):
|
|
49
|
+
* `createUppyUploadSource()` of `@panneau/fields/uppy`, with the signing routes of the backend.
|
|
50
|
+
* Without one, fields give the files themselves, which the adapter sends in `multipart/form-data`.
|
|
51
|
+
*/
|
|
52
|
+
export interface UploadSource {
|
|
53
|
+
/** An uploader for a field, which calls `onUploaded` with each file once it is uploaded. */
|
|
54
|
+
createUploader(options: {
|
|
55
|
+
onUploaded: (file: UploadedFile) => void;
|
|
56
|
+
}): Uploader;
|
|
57
|
+
}
|
|
58
|
+
//# sourceMappingURL=types.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/upload/types.ts"],"names":[],"mappings":"AAAA,uFAAuF;AACvF,MAAM,MAAM,gBAAgB,GAAG,WAAW,GAAG,QAAQ,GAAG,YAAY,GAAG,QAAQ,CAAC;AAEhF,yDAAyD;AACzD,MAAM,WAAW,UAAU;IACvB,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,GAAG,IAAI,CAAC;IACpB,IAAI,EAAE,MAAM,GAAG,IAAI,CAAC;IACpB,yDAAyD;IACzD,QAAQ,EAAE,MAAM,GAAG,IAAI,CAAC;IACxB,MAAM,EAAE,gBAAgB,CAAC;IACzB,qBAAqB;IACrB,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,2DAA2D;IAC3D,QAAQ,EAAE,OAAO,CAAC;CACrB;AAED;;;;GAIG;AACH,MAAM,WAAW,YAAY;IACzB,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,GAAG,IAAI,CAAC;IACpB,IAAI,EAAE,MAAM,GAAG,IAAI,CAAC;CACvB;AAED,iDAAiD;AACjD,MAAM,MAAM,eAAe,GAAG,QAAQ,GAAG,SAAS,CAAC;AAEnD,+DAA+D;AAC/D,MAAM,WAAW,QAAQ;IACrB,yFAAyF;IACzF,QAAQ,IAAI,SAAS,UAAU,EAAE,CAAC;IAClC,sFAAsF;IACtF,SAAS,CAAC,QAAQ,EAAE,MAAM,IAAI,GAAG,MAAM,IAAI,CAAC;IAC5C,mBAAmB;IACnB,GAAG,CAAC,KAAK,EAAE,QAAQ,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC;IACjC,KAAK,CAAC,EAAE,EAAE,MAAM,GAAG,IAAI,CAAC;IACxB,MAAM,CAAC,EAAE,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,iDAAiD;IACjD,MAAM,CAAC,EAAE,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,iCAAiC;IACjC,KAAK,CAAC,EAAE,EAAE,MAAM,GAAG,IAAI,CAAC;IACxB,4DAA4D;IAC5D,OAAO,IAAI,IAAI,CAAC;CACnB;AAED;;;;GAIG;AACH,MAAM,WAAW,YAAY;IACzB,4FAA4F;IAC5F,cAAc,CAAC,OAAO,EAAE;QAAE,UAAU,EAAE,CAAC,IAAI,EAAE,YAAY,KAAK,IAAI,CAAA;KAAE,GAAG,QAAQ,CAAC;CACnF"}
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
import type { UploadRejection } from './types.js';
|
|
2
|
+
/** The message of a file refused before it was sent, for a field's errors. */
|
|
3
|
+
export declare function useRejectionMessage(maxSize: number | null | undefined): (file: File, reason: UploadRejection) => string;
|
|
4
|
+
//# sourceMappingURL=useRejectionMessage.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useRejectionMessage.d.ts","sourceRoot":"","sources":["../../src/upload/useRejectionMessage.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAE/C,8EAA8E;AAC9E,wBAAgB,mBAAmB,CAC/B,OAAO,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,GACnC,CAAC,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,eAAe,KAAK,MAAM,CASjD"}
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
import { messages } from "../shared/messages.js";
|
|
2
|
+
import { formatSize } from "./files.js";
|
|
3
|
+
import { c } from "react/compiler-runtime";
|
|
4
|
+
import { usePanneauIntl } from "@panneau/ui";
|
|
5
|
+
//#region src/upload/useRejectionMessage.ts
|
|
6
|
+
/** The message of a file refused before it was sent, for a field's errors. */
|
|
7
|
+
function useRejectionMessage(maxSize) {
|
|
8
|
+
const $ = c(3);
|
|
9
|
+
const intl = usePanneauIntl();
|
|
10
|
+
let t0;
|
|
11
|
+
if ($[0] !== intl || $[1] !== maxSize) {
|
|
12
|
+
t0 = (file, reason) => reason === "accept" ? intl.formatMessage(messages.rejectedType, { name: file.name }) : intl.formatMessage(messages.rejectedSize, {
|
|
13
|
+
name: file.name,
|
|
14
|
+
size: formatSize(maxSize ?? 0, intl.locale)
|
|
15
|
+
});
|
|
16
|
+
$[0] = intl;
|
|
17
|
+
$[1] = maxSize;
|
|
18
|
+
$[2] = t0;
|
|
19
|
+
} else t0 = $[2];
|
|
20
|
+
return t0;
|
|
21
|
+
}
|
|
22
|
+
//#endregion
|
|
23
|
+
export { useRejectionMessage };
|
|
24
|
+
|
|
25
|
+
//# sourceMappingURL=useRejectionMessage.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useRejectionMessage.js","names":["usePanneauIntl","messages","formatSize","UploadRejection","useRejectionMessage","maxSize","$","_c","intl","t0","file","reason","formatMessage","rejectedType","name","rejectedSize","size","locale","_c"],"sources":["../../src/upload/useRejectionMessage.ts"],"sourcesContent":["import { usePanneauIntl } from '@panneau/ui';\n\nimport { messages } from '../shared/messages';\nimport { formatSize } from './files';\nimport type { UploadRejection } from './types';\n\n/** The message of a file refused before it was sent, for a field's errors. */\nexport function useRejectionMessage(\n maxSize: number | null | undefined,\n): (file: File, reason: UploadRejection) => string {\n const intl = usePanneauIntl();\n return (file, reason) =>\n reason === 'accept'\n ? intl.formatMessage(messages.rejectedType, { name: file.name })\n : intl.formatMessage(messages.rejectedSize, {\n name: file.name,\n size: formatSize(maxSize ?? 0, intl.locale),\n });\n}\n"],"mappings":";;;;;;AAOA,SAAOI,oBAAAC,SAAA;CAAA,MAAAC,IAAAC,EAAA,CAAA;CAGH,MAAAC,OAAaR,eAAe;CAAE,IAAAS;CAAA,IAAAH,EAAA,OAAAE,QAAAF,EAAA,OAAAD,SAAA;EACvBI,MAAAC,MAAAC,WACHA,WAAW,WACLH,KAAII,cAAeX,SAAQY,cAAe,EAAAC,MAAQJ,KAAII,KAAM,CAI3D,IAHDN,KAAII,cAAeX,SAAQc,cAAe;GAAAD,MAChCJ,KAAII;GAAKE,MACTd,WAAWG,WAAA,GAAcG,KAAIS,MAAO;EAC9C,CAAC;EAACX,EAAA,KAAAE;EAAAF,EAAA,KAAAD;EAAAC,EAAA,KAAAG;CAAA,OAAAA,KAAAH,EAAA;CAAA,OANLG;AAMK"}
|