@sps-woodland/file-upload 7.2.5 → 7.2.7
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/lib/index.cjs.js +2 -2
- package/lib/index.es.js +76 -75
- package/package.json +11 -11
package/lib/index.cjs.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const
|
|
1
|
+
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const ue=require("react"),w=require("@sps-woodland/core"),d=require("@spscommerce/utils"),G=require("@spscommerce/ds-react"),O=require("@spscommerce/ds-shared");function fe(e){if(e&&e.__esModule)return e;const l=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const a in e)if(a!=="default"){const o=Object.getOwnPropertyDescriptor(e,a);Object.defineProperty(l,a,o.get?o:{enumerable:!0,get:()=>e[a]})}}return l.default=e,Object.freeze(l)}const t=fe(ue);var V=(e=>(e["7Z"]="application/x-7z-compressed",e.AAC="audio/aac",e.ABW="application/x-abiword",e.ARC="application/octet-stream",e.AVI="video/x-msvideo",e.AZW="application/vnd.amazon.ebook",e.BIN="application/octet-stream",e.BMP="image/bmp",e.BZ="application/x-bzip",e.BZ2="application/x-bzip2",e.CSH="application/x-csh",e.CSS="text/css",e.CSV="text/csv,application/vnd.ms-excel",e.DOC="application/msword",e.DOCX="application/vnd.openxmlformats-officedocument.wordprocessingml.document",e.EOT="application/vnd.ms-fontobject",e.EPUB="application/epub+zip",e.ES="application/ecmascript",e.FLV="video/x-flv",e.GIF="image/gif",e.GZ="application/x-gzip",e.HTM="text/html",e.HTML="text/html",e.ICO="image/x-icon",e.ICS="text/calendar",e.JAR="application/java-archive",e.JPEG="image/jpeg",e.JPG="image/jpeg",e.JS="application/javascript",e.JSON="application/json",e.M3U="audio/x-mpequrl",e.MID="audio/midi",e.MIDI="audio/midi",e.MOV="video/quicktime",e.MP3="audio/mpeg3",e.MP4="video/mp4",e.MPEG="video/mpeg",e.MPKG="application/vnd.apple.installer+xml",e.ODP="application/vnd.oasis.opendocument.presentation",e.ODS="application/vnd.oasis.opendocument.spreadsheet",e.ODT="application/vnd.oasis.opendocument.text",e.OGA="audio/ogg",e.OGV="video/ogg",e.OGX="application/ogg",e.OTF="font/otf",e.PNG="image/png",e.PDF="application/pdf",e.PPT="application/vnd.ms-powerpoint",e.PPTX="application/vnd.openxmlformats-officedocument.presentationml.presentation",e.RAR="application/x-rar-compressed",e.RTF="application/rtf",e.SH="application/x-sh",e.SVG="image/svg+xml",e.SWF="application/x-shockwave-flash",e.TAR="application/x-tar",e.TIF="image/tiff",e.TIFF="image/tiff",e.TS="application/typescript",e.TTF="font/ttf",e.TXT="text/plain",e.VSD="application/vnd.visio",e.WAV="audio/wav",e.WEBA="audio/webm",e.WEBM="video/webm",e.WEBP="image/webp",e.WOFF="font/woff",e.WOFF2="font/woff2",e.XHTML="application/xhtml+xml",e.XLS="application/vnd.ms-excel",e.XLSX="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",e.XML="application/xml",e.XUL="application/vnd.mozilla.xul+xml",e.ZIP="application/zip",e))(V||{});function me(e,l,a){return l in e?Object.defineProperty(e,l,{value:a,enumerable:!0,configurable:!0,writable:!0}):e[l]=a,e}function _(e,l){var a=Object.keys(e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);l&&(o=o.filter(function(n){return Object.getOwnPropertyDescriptor(e,n).enumerable})),a.push.apply(a,o)}return a}function q(e){for(var l=1;l<arguments.length;l++){var a=arguments[l]!=null?arguments[l]:{};l%2?_(Object(a),!0).forEach(function(o){me(e,o,a[o])}):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(a)):_(Object(a)).forEach(function(o){Object.defineProperty(e,o,Object.getOwnPropertyDescriptor(a,o))})}return e}var he=(e,l,a)=>{for(var o of Object.keys(e)){var n;if(e[o]!==((n=l[o])!==null&&n!==void 0?n:a[o]))return!1}return!0},D=e=>l=>{var a=e.defaultClassName,o=q(q({},e.defaultVariants),l);for(var n in o){var h,g=(h=o[n])!==null&&h!==void 0?h:e.defaultVariants[n];if(g!=null){var c=g;typeof c=="boolean"&&(c=c===!0?"true":"false");var p=e.variantClassNames[n][c];p&&(a+=" "+p)}}for(var[S,N]of e.compoundVariants)he(S,o,e.defaultVariants)&&(a+=" "+N);return a},ve="rh07jwm",K="rh07jwn",we="rh07jwl",ge=D({defaultClassName:"rh07jw0",variantClassNames:{active:{true:"rh07jw1",false:"rh07jw2"},mini:{true:"rh07jw3",false:"rh07jw4"},error:{true:"rh07jw5",false:"rh07jw6"},shown:{true:"rh07jw7",false:"rh07jw8"}},defaultVariants:{active:!1,mini:!1,error:!1,shown:!0},compoundVariants:[]}),Fe="rh07jwq",Se=D({defaultClassName:"rh07jw9",variantClassNames:{constrainContentWidth:{true:"rh07jwa",false:"rh07jwb"}},defaultVariants:{constrainContentWidth:!1},compoundVariants:[]}),be="rh07jwp",xe="rh07jwr",Ue=D({defaultClassName:"rh07jwd",variantClassNames:{mini:{true:"rh07jwe",false:"rh07jwf"},error:{true:"rh07jwg",false:"rh07jwh"}},defaultVariants:{mini:!1,error:!1},compoundVariants:[]}),Z="rh07jwc",Ce="rh07jwo",je=D({defaultClassName:"rh07jwi",variantClassNames:{mini:{true:"rh07jwj",false:"rh07jwk"}},defaultVariants:{mini:!1},compoundVariants:[]});function W({constrainContentWidth:e,description:l,multiple:a=!1,dismissable:o,processing:n,mini:h,downloadLabel:g,acceptExtensions:c,maxSize:p,customRequirement:S,onSelection:N,onDismiss:z,download:L,shown:b,className:H,children:Ne,...J}){const x=t.useRef(new Set),[Y,R]=t.useState(b),[Pe,Q]=t.useState([]),[$,y]=t.useState(""),[k,E]=t.useState(),[T,U]=t.useState(!1),[F,C]=t.useState(!1),[P,X]=t.useState([]),[I,M]=t.useState(""),{t:m}=t.useContext(w.I18nContext),A=m(a?"design-system:fileUpload.instructions_plural":"design-system:fileUpload.instructions").split("|"),ee=l||(a?"Files":"File"),v=t.useRef(null);t.useEffect(()=>{b&&R(b)},[b]),t.useEffect(()=>{p&&ie(p)},[p]),t.useEffect(()=>{c&&ae(c)},[c]);function te(){o&&(R(!1),z&&z())}function ie(i){try{E(d.parseFileSize(i))}catch{throw new Error(`Could not parse "${i}" as a file size.`)}}function ae(i){const u=(Array.isArray(i)?i:i.trim().split(/\s?,\s?/)).map(f=>f.replace(/^\./,"")),r=u.map(f=>`.${f}`.toLowerCase());M(r.map((f,j)=>j>0&&j===r.length-1?`or ${f}`:f).join(r.length>2?", ":" ")),x.current.clear();for(const f of u){const j=Object.keys(V).includes(f.toUpperCase())?V[f.toUpperCase()].split(","):[];for(const pe of j)x.current.add(pe)}y(r.concat(Array.from(x.current)).join(","))}function B(i){X([]);let s=[];const u=Array.from(i);for(const r of u)r===null?s.push("Not a file"):(c&&!x.current.has(r.type)&&s.push(r.name),p&&k&&r.size>k&&s.indexOf(r.name)===-1&&s.push(r.name));s.length?(C(!0),v.current&&v.current.value&&(v.current.value="")):(Q(u),N(u)),X(s)}function oe(i){i.preventDefault(),C(!1),v.current&&v.current.click()}function le(){L&&L()}function ne(i){i.stopPropagation(),B(i.target.files||[])}function se(i){i.preventDefault(),i.stopPropagation(),U(!0),C(!1)}function re(i){i.preventDefault(),U(!0),C(!1)}function ce(i){i.preventDefault(),U(!1)}function de(i){i.preventDefault(),i.stopPropagation(),U(!1),i.dataTransfer.items?B(Array.from(i.dataTransfer.items).map(s=>s.getAsFile())):B(i.dataTransfer.files)}return t.createElement("div",{onDrop:de,onDragOver:se,onDragLeave:ce,onDragEnter:re,className:w.cl(ge({active:T,mini:h,error:F,shown:Y}),H),...J},t.createElement("div",{className:w.cl(Se({constrainContentWidth:e}))},n?t.createElement("div",null,t.createElement(w.Spinner,{size:"md","aria-hidden":"true"}),t.createElement("div",{className:Z},m("design-system:fileUpload.processing"))):t.createElement("div",null,t.createElement(w.Icon,{className:Ue({mini:h,error:F}),icon:F?"exclamation-circle":"upload-cloud","aria-hidden":"true"}),t.createElement("div",{className:je({mini:h})},F?t.createElement("div",null,m(P.length>1?"design-system:fileUpload.cancelled_plural":"design-system:fileUpload.cancelled")):t.createElement("div",null,m("design-system:fileUpload.title",{description:ee}))),F?t.createElement("div",{className:we},new Set(P.map((i,s)=>{const u=Math.floor(i.length/2);return t.createElement("div",{className:ve,key:i},t.createElement("span",{className:K},i.substr(0,u)),t.createElement("div",{className:K},t.createElement("span",null,i.substr(u))),s<P.length-1?",":"")}))):t.createElement("span",null),t.createElement("div",{className:Z},t.createElement("div",null,t.createElement("span",null,A[0]),t.createElement("a",{href:"",onClick:oe},A[1]),t.createElement("span",null,A[2]))),t.createElement("div",{className:Ce},c?t.createElement("span",null,"("," ",m("design-system:fileUpload.acceptedTypes",{fileTypes:I})," ",")"):"",p?t.createElement("span",null,"( ",m("design-system:fileUpload.maximumSize",{size:p})," )"):"",S?t.createElement("span",null," ",S," "):""),g&&t.createElement("div",{className:be},t.createElement(G.SpsButton,{kind:O.ButtonKind.LINK,icon:O.SpsIcon.DOWNLOAD_CLOUD,onClick:le},g)))),o&&!n&&t.createElement("div",{className:Fe},t.createElement(G.SpsButton,{kind:O.ButtonKind.ICON,icon:O.SpsIcon.X,title:m("design-system:fileUpload.close"),onClick:te})),t.createElement("form",{className:xe},t.createElement("input",{ref:v,type:"file",accept:$||"*/*",multiple:a||void 0,onChange:ne})))}w.Metadata.set(W,{name:"FileUpload",props:{constrainContentWidth:{type:"boolean"},description:{type:"string"},multiple:{type:"boolean"},dismissable:{type:"boolean"},mini:{type:"boolean"},downloadLabel:{type:"string"},acceptExtensions:{type:"string[] | string"},maxSize:{type:"string"},customRequirement:{type:"string"},onSelection:{type:"(files: File[]) => void",required:!0},dismissal:{type:"() => void"},download:{type:"() => void"}}});const Oe={components:[W],examples:{basic:{label:"Basic File Upload",description:"Simply allow the user to drag-and-drop or select a single file or multiple files at once.",examples:{basic:{description:"Single file upload",react:d.code`
|
|
2
2
|
import { FileUpload } from "@sps-woodland/file-upload";
|
|
3
3
|
|
|
4
4
|
function Component() {
|
|
@@ -152,4 +152,4 @@
|
|
|
152
152
|
</div>
|
|
153
153
|
)
|
|
154
154
|
}
|
|
155
|
-
`}}}}},
|
|
155
|
+
`}}}}},De={"File Upload":Oe};exports.FileUpload=W;exports.MANIFEST=De;
|
package/lib/index.es.js
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
import * as t from "react";
|
|
2
|
-
import { Metadata as
|
|
3
|
-
import { parseFileSize as
|
|
4
|
-
import { SpsButton as
|
|
5
|
-
import { ButtonKind as
|
|
6
|
-
var
|
|
7
|
-
function
|
|
2
|
+
import { Metadata as me, I18nContext as ue, cl as R, Spinner as he, Icon as ve } from "@sps-woodland/core";
|
|
3
|
+
import { parseFileSize as we, code as m } from "@spscommerce/utils";
|
|
4
|
+
import { SpsButton as X } from "@spscommerce/ds-react";
|
|
5
|
+
import { ButtonKind as k, SpsIcon as G } from "@spscommerce/ds-shared";
|
|
6
|
+
var A = /* @__PURE__ */ ((e) => (e["7Z"] = "application/x-7z-compressed", e.AAC = "audio/aac", e.ABW = "application/x-abiword", e.ARC = "application/octet-stream", e.AVI = "video/x-msvideo", e.AZW = "application/vnd.amazon.ebook", e.BIN = "application/octet-stream", e.BMP = "image/bmp", e.BZ = "application/x-bzip", e.BZ2 = "application/x-bzip2", e.CSH = "application/x-csh", e.CSS = "text/css", e.CSV = "text/csv,application/vnd.ms-excel", e.DOC = "application/msword", e.DOCX = "application/vnd.openxmlformats-officedocument.wordprocessingml.document", e.EOT = "application/vnd.ms-fontobject", e.EPUB = "application/epub+zip", e.ES = "application/ecmascript", e.FLV = "video/x-flv", e.GIF = "image/gif", e.GZ = "application/x-gzip", e.HTM = "text/html", e.HTML = "text/html", e.ICO = "image/x-icon", e.ICS = "text/calendar", e.JAR = "application/java-archive", e.JPEG = "image/jpeg", e.JPG = "image/jpeg", e.JS = "application/javascript", e.JSON = "application/json", e.M3U = "audio/x-mpequrl", e.MID = "audio/midi", e.MIDI = "audio/midi", e.MOV = "video/quicktime", e.MP3 = "audio/mpeg3", e.MP4 = "video/mp4", e.MPEG = "video/mpeg", e.MPKG = "application/vnd.apple.installer+xml", e.ODP = "application/vnd.oasis.opendocument.presentation", e.ODS = "application/vnd.oasis.opendocument.spreadsheet", e.ODT = "application/vnd.oasis.opendocument.text", e.OGA = "audio/ogg", e.OGV = "video/ogg", e.OGX = "application/ogg", e.OTF = "font/otf", e.PNG = "image/png", e.PDF = "application/pdf", e.PPT = "application/vnd.ms-powerpoint", e.PPTX = "application/vnd.openxmlformats-officedocument.presentationml.presentation", e.RAR = "application/x-rar-compressed", e.RTF = "application/rtf", e.SH = "application/x-sh", e.SVG = "image/svg+xml", e.SWF = "application/x-shockwave-flash", e.TAR = "application/x-tar", e.TIF = "image/tiff", e.TIFF = "image/tiff", e.TS = "application/typescript", e.TTF = "font/ttf", e.TXT = "text/plain", e.VSD = "application/vnd.visio", e.WAV = "audio/wav", e.WEBA = "audio/webm", e.WEBM = "video/webm", e.WEBP = "image/webp", e.WOFF = "font/woff", e.WOFF2 = "font/woff2", e.XHTML = "application/xhtml+xml", e.XLS = "application/vnd.ms-excel", e.XLSX = "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet", e.XML = "application/xml", e.XUL = "application/vnd.mozilla.xul+xml", e.ZIP = "application/zip", e))(A || {});
|
|
7
|
+
function ge(e, o, a) {
|
|
8
8
|
return o in e ? Object.defineProperty(e, o, {
|
|
9
9
|
value: a,
|
|
10
10
|
enumerable: !0,
|
|
@@ -12,7 +12,7 @@ function we(e, o, a) {
|
|
|
12
12
|
writable: !0
|
|
13
13
|
}) : e[o] = a, e;
|
|
14
14
|
}
|
|
15
|
-
function
|
|
15
|
+
function K(e, o) {
|
|
16
16
|
var a = Object.keys(e);
|
|
17
17
|
if (Object.getOwnPropertySymbols) {
|
|
18
18
|
var l = Object.getOwnPropertySymbols(e);
|
|
@@ -22,18 +22,18 @@ function G(e, o) {
|
|
|
22
22
|
}
|
|
23
23
|
return a;
|
|
24
24
|
}
|
|
25
|
-
function
|
|
25
|
+
function Z(e) {
|
|
26
26
|
for (var o = 1; o < arguments.length; o++) {
|
|
27
27
|
var a = arguments[o] != null ? arguments[o] : {};
|
|
28
|
-
o % 2 ?
|
|
29
|
-
|
|
30
|
-
}) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(a)) :
|
|
28
|
+
o % 2 ? K(Object(a), !0).forEach(function(l) {
|
|
29
|
+
ge(e, l, a[l]);
|
|
30
|
+
}) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(a)) : K(Object(a)).forEach(function(l) {
|
|
31
31
|
Object.defineProperty(e, l, Object.getOwnPropertyDescriptor(a, l));
|
|
32
32
|
});
|
|
33
33
|
}
|
|
34
34
|
return e;
|
|
35
35
|
}
|
|
36
|
-
var
|
|
36
|
+
var Fe = (e, o, a) => {
|
|
37
37
|
for (var l of Object.keys(e)) {
|
|
38
38
|
var n;
|
|
39
39
|
if (e[l] !== ((n = o[l]) !== null && n !== void 0 ? n : a[l]))
|
|
@@ -41,7 +41,7 @@ var ge = (e, o, a) => {
|
|
|
41
41
|
}
|
|
42
42
|
return !0;
|
|
43
43
|
}, j = (e) => (o) => {
|
|
44
|
-
var a = e.defaultClassName, l =
|
|
44
|
+
var a = e.defaultClassName, l = Z(Z({}, e.defaultVariants), o);
|
|
45
45
|
for (var n in l) {
|
|
46
46
|
var h, w = (h = l[n]) !== null && h !== void 0 ? h : e.defaultVariants[n];
|
|
47
47
|
if (w != null) {
|
|
@@ -52,9 +52,9 @@ var ge = (e, o, a) => {
|
|
|
52
52
|
}
|
|
53
53
|
}
|
|
54
54
|
for (var [F, O] of e.compoundVariants)
|
|
55
|
-
|
|
55
|
+
Fe(F, l, e.defaultVariants) && (a += " " + O);
|
|
56
56
|
return a;
|
|
57
|
-
},
|
|
57
|
+
}, xe = "rh07jwm", q = "rh07jwn", Se = "rh07jwl", be = j({ defaultClassName: "rh07jw0", variantClassNames: { active: { true: "rh07jw1", false: "rh07jw2" }, mini: { true: "rh07jw3", false: "rh07jw4" }, error: { true: "rh07jw5", false: "rh07jw6" }, shown: { true: "rh07jw7", false: "rh07jw8" } }, defaultVariants: { active: !1, mini: !1, error: !1, shown: !0 }, compoundVariants: [] }), Ue = "rh07jwq", Ce = j({ defaultClassName: "rh07jw9", variantClassNames: { constrainContentWidth: { true: "rh07jwa", false: "rh07jwb" } }, defaultVariants: { constrainContentWidth: !1 }, compoundVariants: [] }), je = "rh07jwp", Oe = "rh07jwr", De = j({ defaultClassName: "rh07jwd", variantClassNames: { mini: { true: "rh07jwe", false: "rh07jwf" }, error: { true: "rh07jwg", false: "rh07jwh" } }, defaultVariants: { mini: !1, error: !1 }, compoundVariants: [] }), H = "rh07jwc", Ne = "rh07jwo", Pe = j({ defaultClassName: "rh07jwi", variantClassNames: { mini: { true: "rh07jwj", false: "rh07jwk" } }, defaultVariants: { mini: !1 }, compoundVariants: [] });
|
|
58
58
|
function J({
|
|
59
59
|
constrainContentWidth: e,
|
|
60
60
|
description: o,
|
|
@@ -67,55 +67,56 @@ function J({
|
|
|
67
67
|
maxSize: p,
|
|
68
68
|
customRequirement: F,
|
|
69
69
|
onSelection: O,
|
|
70
|
-
onDismiss:
|
|
71
|
-
download:
|
|
70
|
+
onDismiss: B,
|
|
71
|
+
download: V,
|
|
72
72
|
shown: x,
|
|
73
73
|
className: _,
|
|
74
|
-
children:
|
|
74
|
+
children: Be,
|
|
75
75
|
...Y
|
|
76
76
|
}) {
|
|
77
|
-
|
|
78
|
-
const [Q, V] = t.useState(x), [Be, $] = t.useState([]), [y, E] = t.useState(""), [W, T] = t.useState(), [I, b] = t.useState(!1), [g, U] = t.useState(!1), [D, L] = t.useState([]), [M, ee] = t.useState(""), { t: m } = t.useContext(me), N = m(a ? "design-system:fileUpload.instructions_plural" : "design-system:fileUpload.instructions").split("|"), te = o || (a ? "Files" : "File"), v = t.useRef(null);
|
|
77
|
+
const S = t.useRef(/* @__PURE__ */ new Set()), [Q, W] = t.useState(x), [Ve, $] = t.useState([]), [y, E] = t.useState(""), [L, T] = t.useState(), [I, b] = t.useState(!1), [g, U] = t.useState(!1), [D, z] = t.useState([]), [M, ee] = t.useState(""), { t: u } = t.useContext(ue), N = u(a ? "design-system:fileUpload.instructions_plural" : "design-system:fileUpload.instructions").split("|"), te = o || (a ? "Files" : "File"), v = t.useRef(null);
|
|
79
78
|
t.useEffect(() => {
|
|
80
|
-
x &&
|
|
79
|
+
x && W(x);
|
|
81
80
|
}, [x]), t.useEffect(() => {
|
|
82
81
|
p && ae(p);
|
|
83
82
|
}, [p]), t.useEffect(() => {
|
|
84
83
|
c && le(c);
|
|
85
84
|
}, [c]);
|
|
86
85
|
function ie() {
|
|
87
|
-
l && (
|
|
86
|
+
l && (W(!1), B && B());
|
|
88
87
|
}
|
|
89
88
|
function ae(i) {
|
|
90
89
|
try {
|
|
91
|
-
T(
|
|
90
|
+
T(we(i));
|
|
92
91
|
} catch {
|
|
93
92
|
throw new Error(`Could not parse "${i}" as a file size.`);
|
|
94
93
|
}
|
|
95
94
|
}
|
|
96
95
|
function le(i) {
|
|
97
|
-
const d = (Array.isArray(i) ? i : i.trim().split(/\s?,\s?/)).map((
|
|
96
|
+
const d = (Array.isArray(i) ? i : i.trim().split(/\s?,\s?/)).map((f) => f.replace(/^\./, "")), r = d.map((f) => `.${f}`.toLowerCase());
|
|
98
97
|
ee(
|
|
99
|
-
r.map((
|
|
100
|
-
), S.clear();
|
|
101
|
-
for (const
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
98
|
+
r.map((f, C) => C > 0 && C === r.length - 1 ? `or ${f}` : f).join(r.length > 2 ? ", " : " ")
|
|
99
|
+
), S.current.clear();
|
|
100
|
+
for (const f of d) {
|
|
101
|
+
const C = Object.keys(A).includes(f.toUpperCase()) ? A[f.toUpperCase()].split(",") : [];
|
|
102
|
+
for (const fe of C)
|
|
103
|
+
S.current.add(fe);
|
|
104
|
+
}
|
|
105
|
+
E(r.concat(Array.from(S.current)).join(","));
|
|
105
106
|
}
|
|
106
107
|
function P(i) {
|
|
107
|
-
|
|
108
|
+
z([]);
|
|
108
109
|
let s = [];
|
|
109
110
|
const d = Array.from(i);
|
|
110
111
|
for (const r of d)
|
|
111
|
-
r === null ? s.push("Not a file") : (c && !S.has(r.type) && s.push(r.name), p &&
|
|
112
|
-
s.length ? (U(!0), v.current && v.current.value && (v.current.value = "")) : ($(d), O(d)),
|
|
112
|
+
r === null ? s.push("Not a file") : (c && !S.current.has(r.type) && s.push(r.name), p && L && r.size > L && s.indexOf(r.name) === -1 && s.push(r.name));
|
|
113
|
+
s.length ? (U(!0), v.current && v.current.value && (v.current.value = "")) : ($(d), O(d)), z(s);
|
|
113
114
|
}
|
|
114
115
|
function oe(i) {
|
|
115
116
|
i.preventDefault(), U(!1), v.current && v.current.click();
|
|
116
117
|
}
|
|
117
118
|
function ne() {
|
|
118
|
-
|
|
119
|
+
V && V();
|
|
119
120
|
}
|
|
120
121
|
function se(i) {
|
|
121
122
|
i.stopPropagation(), P(i.target.files || []);
|
|
@@ -141,61 +142,61 @@ function J({
|
|
|
141
142
|
onDragOver: re,
|
|
142
143
|
onDragLeave: pe,
|
|
143
144
|
onDragEnter: ce,
|
|
144
|
-
className:
|
|
145
|
+
className: R(be({ active: I, mini: h, error: g, shown: Q }), _),
|
|
145
146
|
...Y
|
|
146
147
|
}, /* @__PURE__ */ t.createElement("div", {
|
|
147
|
-
className:
|
|
148
|
-
}, n ? /* @__PURE__ */ t.createElement("div", null, /* @__PURE__ */ t.createElement(
|
|
148
|
+
className: R(Ce({ constrainContentWidth: e }))
|
|
149
|
+
}, n ? /* @__PURE__ */ t.createElement("div", null, /* @__PURE__ */ t.createElement(he, {
|
|
149
150
|
size: "md",
|
|
150
151
|
"aria-hidden": "true"
|
|
151
152
|
}), /* @__PURE__ */ t.createElement("div", {
|
|
152
|
-
className:
|
|
153
|
-
},
|
|
154
|
-
className:
|
|
153
|
+
className: H
|
|
154
|
+
}, u("design-system:fileUpload.processing"))) : /* @__PURE__ */ t.createElement("div", null, /* @__PURE__ */ t.createElement(ve, {
|
|
155
|
+
className: De({ mini: h, error: g }),
|
|
155
156
|
icon: g ? "exclamation-circle" : "upload-cloud",
|
|
156
157
|
"aria-hidden": "true"
|
|
157
158
|
}), /* @__PURE__ */ t.createElement("div", {
|
|
158
|
-
className:
|
|
159
|
-
}, g ? /* @__PURE__ */ t.createElement("div", null,
|
|
159
|
+
className: Pe({ mini: h })
|
|
160
|
+
}, g ? /* @__PURE__ */ t.createElement("div", null, u(
|
|
160
161
|
D.length > 1 ? "design-system:fileUpload.cancelled_plural" : "design-system:fileUpload.cancelled"
|
|
161
|
-
)) : /* @__PURE__ */ t.createElement("div", null,
|
|
162
|
-
className:
|
|
162
|
+
)) : /* @__PURE__ */ t.createElement("div", null, u("design-system:fileUpload.title", { description: te }))), g ? /* @__PURE__ */ t.createElement("div", {
|
|
163
|
+
className: Se
|
|
163
164
|
}, new Set(
|
|
164
165
|
D.map((i, s) => {
|
|
165
166
|
const d = Math.floor(i.length / 2);
|
|
166
167
|
return /* @__PURE__ */ t.createElement("div", {
|
|
167
|
-
className:
|
|
168
|
+
className: xe,
|
|
168
169
|
key: i
|
|
169
170
|
}, /* @__PURE__ */ t.createElement("span", {
|
|
170
|
-
className:
|
|
171
|
+
className: q
|
|
171
172
|
}, i.substr(0, d)), /* @__PURE__ */ t.createElement("div", {
|
|
172
|
-
className:
|
|
173
|
+
className: q
|
|
173
174
|
}, /* @__PURE__ */ t.createElement("span", null, i.substr(d))), s < D.length - 1 ? "," : "");
|
|
174
175
|
})
|
|
175
176
|
)) : /* @__PURE__ */ t.createElement("span", null), /* @__PURE__ */ t.createElement("div", {
|
|
176
|
-
className:
|
|
177
|
+
className: H
|
|
177
178
|
}, /* @__PURE__ */ t.createElement("div", null, /* @__PURE__ */ t.createElement("span", null, N[0]), /* @__PURE__ */ t.createElement("a", {
|
|
178
179
|
href: "",
|
|
179
180
|
onClick: oe
|
|
180
181
|
}, N[1]), /* @__PURE__ */ t.createElement("span", null, N[2]))), /* @__PURE__ */ t.createElement("div", {
|
|
181
|
-
className:
|
|
182
|
-
}, c ? /* @__PURE__ */ t.createElement("span", null, "(", " ",
|
|
182
|
+
className: Ne
|
|
183
|
+
}, c ? /* @__PURE__ */ t.createElement("span", null, "(", " ", u("design-system:fileUpload.acceptedTypes", {
|
|
183
184
|
fileTypes: M
|
|
184
|
-
}), " ", ")") : "", p ? /* @__PURE__ */ t.createElement("span", null, "( ",
|
|
185
|
-
className:
|
|
186
|
-
}, /* @__PURE__ */ t.createElement(
|
|
187
|
-
kind:
|
|
188
|
-
icon:
|
|
185
|
+
}), " ", ")") : "", p ? /* @__PURE__ */ t.createElement("span", null, "( ", u("design-system:fileUpload.maximumSize", { size: p }), " )") : "", F ? /* @__PURE__ */ t.createElement("span", null, " ", F, " ") : ""), w && /* @__PURE__ */ t.createElement("div", {
|
|
186
|
+
className: je
|
|
187
|
+
}, /* @__PURE__ */ t.createElement(X, {
|
|
188
|
+
kind: k.LINK,
|
|
189
|
+
icon: G.DOWNLOAD_CLOUD,
|
|
189
190
|
onClick: ne
|
|
190
191
|
}, w)))), l && !n && /* @__PURE__ */ t.createElement("div", {
|
|
191
|
-
className:
|
|
192
|
-
}, /* @__PURE__ */ t.createElement(
|
|
193
|
-
kind:
|
|
194
|
-
icon:
|
|
195
|
-
title:
|
|
192
|
+
className: Ue
|
|
193
|
+
}, /* @__PURE__ */ t.createElement(X, {
|
|
194
|
+
kind: k.ICON,
|
|
195
|
+
icon: G.X,
|
|
196
|
+
title: u("design-system:fileUpload.close"),
|
|
196
197
|
onClick: ie
|
|
197
198
|
})), /* @__PURE__ */ t.createElement("form", {
|
|
198
|
-
className:
|
|
199
|
+
className: Oe
|
|
199
200
|
}, /* @__PURE__ */ t.createElement("input", {
|
|
200
201
|
ref: v,
|
|
201
202
|
type: "file",
|
|
@@ -204,7 +205,7 @@ function J({
|
|
|
204
205
|
onChange: se
|
|
205
206
|
})));
|
|
206
207
|
}
|
|
207
|
-
|
|
208
|
+
me.set(J, {
|
|
208
209
|
name: "FileUpload",
|
|
209
210
|
props: {
|
|
210
211
|
constrainContentWidth: { type: "boolean" },
|
|
@@ -221,7 +222,7 @@ fe.set(J, {
|
|
|
221
222
|
download: { type: "() => void" }
|
|
222
223
|
}
|
|
223
224
|
});
|
|
224
|
-
const
|
|
225
|
+
const Ae = {
|
|
225
226
|
components: [J],
|
|
226
227
|
examples: {
|
|
227
228
|
basic: {
|
|
@@ -230,7 +231,7 @@ const Pe = {
|
|
|
230
231
|
examples: {
|
|
231
232
|
basic: {
|
|
232
233
|
description: "Single file upload",
|
|
233
|
-
react:
|
|
234
|
+
react: m`
|
|
234
235
|
import { FileUpload } from "@sps-woodland/file-upload";
|
|
235
236
|
|
|
236
237
|
function Component() {
|
|
@@ -246,7 +247,7 @@ const Pe = {
|
|
|
246
247
|
},
|
|
247
248
|
multiple: {
|
|
248
249
|
description: "Multiple file upload",
|
|
249
|
-
react:
|
|
250
|
+
react: m`
|
|
250
251
|
import { FileUpload } from "@sps-woodland/file-upload";
|
|
251
252
|
|
|
252
253
|
function Component() {
|
|
@@ -268,7 +269,7 @@ const Pe = {
|
|
|
268
269
|
examples: {
|
|
269
270
|
maxSize: {
|
|
270
271
|
description: "Maximum size",
|
|
271
|
-
react:
|
|
272
|
+
react: m`
|
|
272
273
|
import { FileUpload } from "@sps-woodland/file-upload";
|
|
273
274
|
|
|
274
275
|
function Component() {
|
|
@@ -284,7 +285,7 @@ const Pe = {
|
|
|
284
285
|
},
|
|
285
286
|
fileWhitelist: {
|
|
286
287
|
description: "File type whitelist",
|
|
287
|
-
react:
|
|
288
|
+
react: m`
|
|
288
289
|
import { FileUpload } from "@sps-woodland/file-upload";
|
|
289
290
|
|
|
290
291
|
function Component() {
|
|
@@ -305,7 +306,7 @@ const Pe = {
|
|
|
305
306
|
},
|
|
306
307
|
bothRestrictions: {
|
|
307
308
|
description: "Both restrictions",
|
|
308
|
-
react:
|
|
309
|
+
react: m`
|
|
309
310
|
import { FileUpload } from "@sps-woodland/file-upload";
|
|
310
311
|
|
|
311
312
|
function Component() {
|
|
@@ -332,7 +333,7 @@ const Pe = {
|
|
|
332
333
|
description: "With this option, the file upload component can be dismissed by the user. If the user does dismiss it, you can show it again programmatically if you need to.",
|
|
333
334
|
examples: {
|
|
334
335
|
basic: {
|
|
335
|
-
react:
|
|
336
|
+
react: m`
|
|
336
337
|
import { FileUpload } from "@sps-woodland/file-upload";
|
|
337
338
|
|
|
338
339
|
function Component() {
|
|
@@ -370,7 +371,7 @@ const Pe = {
|
|
|
370
371
|
description: "You can optionally provide a button to download a file. Typically this will be a template for whatever the user is expected to upload. They can then fill out the template, save it, and upload it.",
|
|
371
372
|
examples: {
|
|
372
373
|
basic: {
|
|
373
|
-
react:
|
|
374
|
+
react: m`
|
|
374
375
|
import { FileUpload } from "@sps-woodland/file-upload";
|
|
375
376
|
|
|
376
377
|
function Component() {
|
|
@@ -401,7 +402,7 @@ const Pe = {
|
|
|
401
402
|
description: "When the file upload component is to be placed in a small container, it should be marked as a mini file upload so that everything fits.",
|
|
402
403
|
examples: {
|
|
403
404
|
basic: {
|
|
404
|
-
react:
|
|
405
|
+
react: m`
|
|
405
406
|
import { FileUpload } from "@sps-woodland/file-upload";
|
|
406
407
|
|
|
407
408
|
function Component() {
|
|
@@ -426,7 +427,7 @@ const Pe = {
|
|
|
426
427
|
description: "If this prop is provided, the content will be restricted to 50% of the overall width of the component. Consult your product designer if you're not sure whether to use this variant.",
|
|
427
428
|
examples: {
|
|
428
429
|
basic: {
|
|
429
|
-
react:
|
|
430
|
+
react: m`
|
|
430
431
|
import { FileUpload } from "@sps-woodland/file-upload";
|
|
431
432
|
|
|
432
433
|
function Component() {
|
|
@@ -447,10 +448,10 @@ const Pe = {
|
|
|
447
448
|
}
|
|
448
449
|
}
|
|
449
450
|
}
|
|
450
|
-
},
|
|
451
|
-
"File Upload":
|
|
451
|
+
}, Xe = {
|
|
452
|
+
"File Upload": Ae
|
|
452
453
|
};
|
|
453
454
|
export {
|
|
454
455
|
J as FileUpload,
|
|
455
|
-
|
|
456
|
+
Xe as MANIFEST
|
|
456
457
|
};
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@sps-woodland/file-upload",
|
|
3
3
|
"description": "SPS Woodland Design System file upload component",
|
|
4
|
-
"version": "7.2.
|
|
4
|
+
"version": "7.2.7",
|
|
5
5
|
"author": "SPS Commerce",
|
|
6
6
|
"license": "UNLICENSED",
|
|
7
7
|
"repository": "https://github.com/SPSCommerce/woodland/tree/main/packages/@sps-woodland/file-upload",
|
|
@@ -25,23 +25,23 @@
|
|
|
25
25
|
"access": "public"
|
|
26
26
|
},
|
|
27
27
|
"peerDependencies": {
|
|
28
|
-
"@sps-woodland/core": "7.2.
|
|
29
|
-
"@sps-woodland/tokens": "7.2.
|
|
30
|
-
"@spscommerce/ds-colors": "7.2.
|
|
31
|
-
"@spscommerce/ds-react": "7.2.
|
|
32
|
-
"@spscommerce/ds-shared": "7.2.
|
|
28
|
+
"@sps-woodland/core": "7.2.7",
|
|
29
|
+
"@sps-woodland/tokens": "7.2.7",
|
|
30
|
+
"@spscommerce/ds-colors": "7.2.7",
|
|
31
|
+
"@spscommerce/ds-react": "7.2.7",
|
|
32
|
+
"@spscommerce/ds-shared": "7.2.7",
|
|
33
33
|
"@spscommerce/illustrations": "6.37.3",
|
|
34
34
|
"@spscommerce/utils": "^6.12.1",
|
|
35
35
|
"react": "^16.14.0",
|
|
36
36
|
"react-dom": "^16.14.0"
|
|
37
37
|
},
|
|
38
38
|
"devDependencies": {
|
|
39
|
-
"@sps-woodland/core": "7.2.
|
|
40
|
-
"@sps-woodland/tokens": "7.2.
|
|
41
|
-
"@spscommerce/ds-colors": "7.2.
|
|
39
|
+
"@sps-woodland/core": "7.2.7",
|
|
40
|
+
"@sps-woodland/tokens": "7.2.7",
|
|
41
|
+
"@spscommerce/ds-colors": "7.2.7",
|
|
42
42
|
"@spscommerce/ds-illustrations": "6.37.3",
|
|
43
|
-
"@spscommerce/ds-react": "7.2.
|
|
44
|
-
"@spscommerce/ds-shared": "7.2.
|
|
43
|
+
"@spscommerce/ds-react": "7.2.7",
|
|
44
|
+
"@spscommerce/ds-shared": "7.2.7",
|
|
45
45
|
"@spscommerce/utils": "^6.12.1",
|
|
46
46
|
"@vanilla-extract/css": "^1.9.3",
|
|
47
47
|
"@vanilla-extract/recipes": "^0.2.5",
|