@sps-woodland/file-upload 8.21.0 → 8.21.1
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.es.js → index.js} +1 -1
- package/lib/index.umd.cjs +173 -0
- package/lib/style.css +1 -1
- package/package.json +19 -19
- package/vite.config.mjs +2 -2
- package/lib/index.cjs.js +0 -173
|
@@ -133,7 +133,7 @@ var ge = (a, i, l) => {
|
|
|
133
133
|
for (var [F, C] of a.compoundVariants)
|
|
134
134
|
ge(F, t, a.defaultVariants) && (l += " " + C);
|
|
135
135
|
return l;
|
|
136
|
-
}, Fe = "pkg_sps-woodland_file-
|
|
136
|
+
}, Fe = "pkg_sps-woodland_file-upload__version_8_21_1__hash_rh07jws", V = "pkg_sps-woodland_file-upload__version_8_21_1__hash_rh07jwt", xe = "pkg_sps-woodland_file-upload__version_8_21_1__hash_rh07jwr", be = j({ defaultClassName: "pkg_sps-woodland_file-upload__version_8_21_1__hash_rh07jw0", variantClassNames: { active: { true: "pkg_sps-woodland_file-upload__version_8_21_1__hash_rh07jw1", false: "pkg_sps-woodland_file-upload__version_8_21_1__hash_rh07jw2" }, mini: { true: "pkg_sps-woodland_file-upload__version_8_21_1__hash_rh07jw3", false: "pkg_sps-woodland_file-upload__version_8_21_1__hash_rh07jw4" }, error: { true: "pkg_sps-woodland_file-upload__version_8_21_1__hash_rh07jw5", false: "pkg_sps-woodland_file-upload__version_8_21_1__hash_rh07jw6" }, shown: { true: "pkg_sps-woodland_file-upload__version_8_21_1__hash_rh07jw7", false: "pkg_sps-woodland_file-upload__version_8_21_1__hash_rh07jw8" }, disabled: { true: "pkg_sps-woodland_file-upload__version_8_21_1__hash_rh07jw9", false: "pkg_sps-woodland_file-upload__version_8_21_1__hash_rh07jwa" } }, defaultVariants: { active: !1, mini: !1, error: !1, shown: !0, disabled: !1 }, compoundVariants: [] }), Ee = "pkg_sps-woodland_file-upload__version_8_21_1__hash_rh07jww", ye = j({ defaultClassName: "pkg_sps-woodland_file-upload__version_8_21_1__hash_rh07jwb", variantClassNames: { constrainContentWidth: { true: "pkg_sps-woodland_file-upload__version_8_21_1__hash_rh07jwc", false: "pkg_sps-woodland_file-upload__version_8_21_1__hash_rh07jwd" }, disabled: { true: "pkg_sps-woodland_file-upload__version_8_21_1__hash_rh07jwe", false: "pkg_sps-woodland_file-upload__version_8_21_1__hash_rh07jwf" } }, defaultVariants: { constrainContentWidth: !1, disabled: !1 }, compoundVariants: [] }), Ue = "pkg_sps-woodland_file-upload__version_8_21_1__hash_rh07jwv", Se = "pkg_sps-woodland_file-upload__version_8_21_1__hash_rh07jwx", je = j({ defaultClassName: "pkg_sps-woodland_file-upload__version_8_21_1__hash_rh07jwh", variantClassNames: { mini: { true: "pkg_sps-woodland_file-upload__version_8_21_1__hash_rh07jwi", false: "pkg_sps-woodland_file-upload__version_8_21_1__hash_rh07jwj" }, error: { true: "pkg_sps-woodland_file-upload__version_8_21_1__hash_rh07jwk", false: "pkg_sps-woodland_file-upload__version_8_21_1__hash_rh07jwl" }, disabled: { true: "pkg_sps-woodland_file-upload__version_8_21_1__hash_rh07jwm", false: "pkg_sps-woodland_file-upload__version_8_21_1__hash_rh07jwn" } }, defaultVariants: { mini: !1, error: !1, disabled: !1 }, compoundVariants: [] }), Ce = "pkg_sps-woodland_file-upload__version_8_21_1__hash_rh07jwy", z = "pkg_sps-woodland_file-upload__version_8_21_1__hash_rh07jwg", ke = "pkg_sps-woodland_file-upload__version_8_21_1__hash_rh07jwu", De = j({ defaultClassName: "pkg_sps-woodland_file-upload__version_8_21_1__hash_rh07jwo", variantClassNames: { mini: { true: "pkg_sps-woodland_file-upload__version_8_21_1__hash_rh07jwp", false: "pkg_sps-woodland_file-upload__version_8_21_1__hash_rh07jwq" } }, defaultVariants: { mini: !1 }, compoundVariants: [] });
|
|
137
137
|
function W({
|
|
138
138
|
constrainContentWidth: a,
|
|
139
139
|
description: i,
|
|
@@ -0,0 +1,173 @@
|
|
|
1
|
+
(function(n,g){typeof exports=="object"&&typeof module<"u"?g(exports,require("react"),require("@sps-woodland/core"),require("@spscommerce/utils"),require("@sps-woodland/buttons"),require("@sps-woodland/illustrations")):typeof define=="function"&&define.amd?define(["exports","react","@sps-woodland/core","@spscommerce/utils","@sps-woodland/buttons","@sps-woodland/illustrations"],g):(n=typeof globalThis<"u"?globalThis:n||self,g(n.FileUpload={},n.React,n.core,n.utils,n.buttons,n.illustrations))})(this,function(n,g,F,p,A,M){"use strict";function Z(o){const i=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(o){for(const t in o)if(t!=="default"){const l=Object.getOwnPropertyDescriptor(o,t);Object.defineProperty(i,t,l.get?l:{enumerable:!0,get:()=>o[t]})}}return i.default=o,Object.freeze(i)}const e=Z(g),B={"7Z":["application/x-7z-compressed"],AAC:["audio/aac"],ABW:["application/x-abiword"],ARC:["application/octet-stream"],AVI:["video/x-msvideo"],AZW:["application/vnd.amazon.ebook"],BIN:["application/octet-stream"],BMP:["image/bmp"],BZ:["application/x-bzip"],BZ2:["application/x-bzip2"],CER:["application/pkix-cert","application/x-x509-ca-cert"],CSH:["application/x-csh"],CSS:["text/css"],CSV:["text/csv","application/vnd.ms-excel"],DOC:["application/msword"],DOCX:["application/vnd.openxmlformats-officedocument.wordprocessingml.document"],EML:["application/octet-stream","message/rfc822","multipart/mixed","message/rfc5322","message/rfc6532"],EOT:["application/vnd.ms-fontobject"],EPUB:["application/epub+zip"],ES:["application/ecmascript"],FLV:["video/x-flv"],GIF:["image/gif"],GZ:["application/x-gzip"],HTM:["text/html"],HTML:["text/html"],ICO:["image/x-icon"],ICS:["text/calendar"],JAR:["application/java-archive"],JPEG:["image/jpeg"],JPG:["image/jpeg"],JS:["application/javascript"],JSON:["application/json"],M3U:["audio/x-mpequrl"],MID:["audio/midi"],MIDI:["audio/midi"],MOV:["video/quicktime"],MP3:["audio/mpeg3"],MP4:["video/mp4"],MPEG:["video/mpeg"],MPKG:["application/vnd.apple.installer+xml"],ODP:["application/vnd.oasis.opendocument.presentation"],ODS:["application/vnd.oasis.opendocument.spreadsheet"],ODT:["application/vnd.oasis.opendocument.text"],OGA:["audio/ogg"],OGV:["video/ogg"],OGX:["application/ogg"],OTF:["font/otf"],PNG:["image/png"],PDF:["application/pdf"],PPT:["application/vnd.ms-powerpoint"],PPTX:["application/vnd.openxmlformats-officedocument.presentationml.presentation"],RAR:["application/x-rar-compressed"],RTF:["application/rtf"],SH:["application/x-sh"],SVG:["image/svg+xml"],SWF:["application/x-shockwave-flash"],TAR:["application/x-tar"],TIF:["image/tiff"],TIFF:["image/tiff"],TS:["application/typescript"],TTF:["font/ttf"],TXT:["text/plain"],VSD:["application/vnd.visio"],WAV:["audio/wav"],WEBA:["audio/webm"],WEBM:["video/webm"],WEBP:["image/webp"],WOFF:["font/woff"],WOFF2:["font/woff2"],XHTML:["application/xhtml+xml"],XLS:["application/vnd.ms-excel"],XLSX:["application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"],XML:["application/xml"],XUL:["application/vnd.mozilla.xul+xml"],ZIP:["application/zip"]};function H(o,i,t){return i in o?Object.defineProperty(o,i,{value:t,enumerable:!0,configurable:!0,writable:!0}):o[i]=t,o}function I(o,i){var t=Object.keys(o);if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(o);i&&(l=l.filter(function(s){return Object.getOwnPropertyDescriptor(o,s).enumerable})),t.push.apply(t,l)}return t}function R(o){for(var i=1;i<arguments.length;i++){var t=arguments[i]!=null?arguments[i]:{};i%2?I(Object(t),!0).forEach(function(l){H(o,l,t[l])}):Object.getOwnPropertyDescriptors?Object.defineProperties(o,Object.getOwnPropertyDescriptors(t)):I(Object(t)).forEach(function(l){Object.defineProperty(o,l,Object.getOwnPropertyDescriptor(t,l))})}return o}var J=(o,i,t)=>{for(var l of Object.keys(o)){var s;if(o[l]!==((s=i[l])!==null&&s!==void 0?s:t[l]))return!1}return!0},y=o=>i=>{var t=o.defaultClassName,l=R(R({},o.defaultVariants),i);for(var s in l){var w,x=(w=l[s])!==null&&w!==void 0?w:o.defaultVariants[s];if(x!=null){var c=x;typeof c=="boolean"&&(c=c===!0?"true":"false");var f=o.variantClassNames[s][c];f&&(t+=" "+f)}}for(var[E,T]of o.compoundVariants)J(E,l,o.defaultVariants)&&(t+=" "+T);return t},K="pkg_sps-woodland_file-upload__version_8_21_1__hash_rh07jws",L="pkg_sps-woodland_file-upload__version_8_21_1__hash_rh07jwt",Y="pkg_sps-woodland_file-upload__version_8_21_1__hash_rh07jwr",Q=y({defaultClassName:"pkg_sps-woodland_file-upload__version_8_21_1__hash_rh07jw0",variantClassNames:{active:{true:"pkg_sps-woodland_file-upload__version_8_21_1__hash_rh07jw1",false:"pkg_sps-woodland_file-upload__version_8_21_1__hash_rh07jw2"},mini:{true:"pkg_sps-woodland_file-upload__version_8_21_1__hash_rh07jw3",false:"pkg_sps-woodland_file-upload__version_8_21_1__hash_rh07jw4"},error:{true:"pkg_sps-woodland_file-upload__version_8_21_1__hash_rh07jw5",false:"pkg_sps-woodland_file-upload__version_8_21_1__hash_rh07jw6"},shown:{true:"pkg_sps-woodland_file-upload__version_8_21_1__hash_rh07jw7",false:"pkg_sps-woodland_file-upload__version_8_21_1__hash_rh07jw8"},disabled:{true:"pkg_sps-woodland_file-upload__version_8_21_1__hash_rh07jw9",false:"pkg_sps-woodland_file-upload__version_8_21_1__hash_rh07jwa"}},defaultVariants:{active:!1,mini:!1,error:!1,shown:!0,disabled:!1},compoundVariants:[]}),$="pkg_sps-woodland_file-upload__version_8_21_1__hash_rh07jww",ee=y({defaultClassName:"pkg_sps-woodland_file-upload__version_8_21_1__hash_rh07jwb",variantClassNames:{constrainContentWidth:{true:"pkg_sps-woodland_file-upload__version_8_21_1__hash_rh07jwc",false:"pkg_sps-woodland_file-upload__version_8_21_1__hash_rh07jwd"},disabled:{true:"pkg_sps-woodland_file-upload__version_8_21_1__hash_rh07jwe",false:"pkg_sps-woodland_file-upload__version_8_21_1__hash_rh07jwf"}},defaultVariants:{constrainContentWidth:!1,disabled:!1},compoundVariants:[]}),oe="pkg_sps-woodland_file-upload__version_8_21_1__hash_rh07jwv",ae="pkg_sps-woodland_file-upload__version_8_21_1__hash_rh07jwx",te=y({defaultClassName:"pkg_sps-woodland_file-upload__version_8_21_1__hash_rh07jwh",variantClassNames:{mini:{true:"pkg_sps-woodland_file-upload__version_8_21_1__hash_rh07jwi",false:"pkg_sps-woodland_file-upload__version_8_21_1__hash_rh07jwj"},error:{true:"pkg_sps-woodland_file-upload__version_8_21_1__hash_rh07jwk",false:"pkg_sps-woodland_file-upload__version_8_21_1__hash_rh07jwl"},disabled:{true:"pkg_sps-woodland_file-upload__version_8_21_1__hash_rh07jwm",false:"pkg_sps-woodland_file-upload__version_8_21_1__hash_rh07jwn"}},defaultVariants:{mini:!1,error:!1,disabled:!1},compoundVariants:[]}),le="pkg_sps-woodland_file-upload__version_8_21_1__hash_rh07jwy",V="pkg_sps-woodland_file-upload__version_8_21_1__hash_rh07jwg",ie="pkg_sps-woodland_file-upload__version_8_21_1__hash_rh07jwu",ne=y({defaultClassName:"pkg_sps-woodland_file-upload__version_8_21_1__hash_rh07jwo",variantClassNames:{mini:{true:"pkg_sps-woodland_file-upload__version_8_21_1__hash_rh07jwp",false:"pkg_sps-woodland_file-upload__version_8_21_1__hash_rh07jwq"}},defaultVariants:{mini:!1},compoundVariants:[]});function D({constrainContentWidth:o,description:i,multiple:t=!1,dismissable:l,processing:s,mini:w,downloadLabel:x,acceptExtensions:c,maxSize:f,customRequirement:E,onSelection:T,onDismiss:z,download:W,shown:S,className:re,disabled:_,children:De,...pe}){const U=e.useRef(new Set),[de,G]=e.useState(S),[Te,ce]=e.useState([]),[_e,fe]=e.useState(""),[X,ue]=e.useState(),[me,j]=e.useState(!1),[b,C]=e.useState(!1),[N,q]=e.useState([]),[he,ve]=e.useState(""),{t:v}=e.useContext(F.I18nContext),k=v(t?"design-system:fileUpload.instructions_plural":"design-system:fileUpload.instructions").split("|"),we=i||(t?"Files":"File"),u=e.useRef(null);e.useEffect(()=>{S&&G(S)},[S]),e.useEffect(()=>{f&&Fe(f)},[f]),e.useEffect(()=>{c&&xe(c)},[c]);function ge(){l&&(G(!1),z&&z())}function Fe(a){try{ue(p.parseFileSize(a))}catch{throw new Error(`Could not parse "${a}" as a file size.`)}}function xe(a){const m=(Array.isArray(a)?a:a.trim().split(/\s?,\s?/)).map(h=>h.replace(/^\./,"")),d=m.map(h=>`.${h}`.toLowerCase());ve(d.map((h,O)=>O>0&&O===d.length-1?`or ${h}`:h).join(d.length>2?", ":" ")),U.current.clear();for(const h of m){const O=Object.keys(B).includes(h.toUpperCase())?B[h.toUpperCase()]:[];for(const ke of O)U.current.add(ke)}fe(d.concat(Array.from(U.current)).join(","))}function P(a){q([]);let r=[];const m=Array.from(a);for(const d of m)d===null?r.push("Not a file"):(c&&!U.current.has(d.type)&&r.push(d.name),f&&X&&d.size>X&&r.indexOf(d.name)===-1&&r.push(d.name));r.length?(C(!0),u.current&&u.current.value&&(u.current.value="")):(ce(m),T(m)),q(r)}function be(a){a.preventDefault(),C(!1),u.current&&u.current.click()}function ye(){W&&W()}function Ee(a){a.stopPropagation(),P(a.target.files||[]),u.current&&u.current.value&&(u.current.value="")}function Se(a){a.preventDefault(),a.stopPropagation(),j(!0),C(!1)}function Ue(a){a.preventDefault(),j(!0),C(!1)}function je(a){a.preventDefault(),j(!1)}function Ce(a){a.preventDefault(),a.stopPropagation(),j(!1),a.dataTransfer.items?P(Array.from(a.dataTransfer.items).map(r=>r.getAsFile())):P(a.dataTransfer.files)}return e.createElement("div",{onDrop:_?()=>{}:Ce,onDragOver:_?()=>{}:Se,onDragLeave:_?()=>{}:je,onDragEnter:_?()=>{}:Ue,className:F.cl(Q({active:me,mini:w,error:b,shown:de,disabled:_}),re),...pe},e.createElement("div",{className:F.cl(ee({constrainContentWidth:o,disabled:_}))},s?e.createElement("div",null,e.createElement(F.Spinner,{size:"md","aria-hidden":"true"}),e.createElement("div",{className:V},v("design-system:fileUpload.processing"))):e.createElement("div",null,e.createElement("div",{className:te({mini:w,error:b,disabled:_}),"aria-hidden":"true"},e.createElement("img",{className:le,src:b?M.GENERAL_ERROR_LARGE:M.UPLOAD_LARGE,alt:"Upload Icon"})),e.createElement("div",{className:ne({mini:w})},b?e.createElement("div",null,v(N.length>1?"design-system:fileUpload.cancelled_plural":"design-system:fileUpload.cancelled")):e.createElement("div",null,v("design-system:fileUpload.title",{description:we}))),b?e.createElement("div",{className:Y},new Set(N.map((a,r)=>{const m=Math.floor(a.length/2);return e.createElement("div",{className:K,key:a},e.createElement("span",{className:L},a.substr(0,m)),e.createElement("div",{className:L},e.createElement("span",null,a.substr(m))),r<N.length-1?",":"")}))):e.createElement("span",null),e.createElement("div",{className:V},e.createElement("div",null,e.createElement("span",null,k[0]),_?e.createElement("u",null,k[1]):e.createElement("a",{href:"",onClick:be},k[1]),e.createElement("span",null,k[2]))),e.createElement("div",{className:ie},c?e.createElement("span",null,"("," ",v("design-system:fileUpload.acceptedTypes",{fileTypes:he})," ",")"):"",f?e.createElement("span",null,"( ",v("design-system:fileUpload.maximumSize",{size:f})," )"):"",E?e.createElement("span",null," ",E," "):""),x&&e.createElement("div",{className:oe},e.createElement(A.Button,{disabled:_,kind:"link",icon:"download-cloud",onClick:ye},x)))),l&&!s&&e.createElement("div",{className:$},e.createElement(A.Button,{disabled:_,kind:"icon",icon:"x",title:v("design-system:fileUpload.close"),onClick:ge})),e.createElement("form",{className:ae},e.createElement("input",{ref:u,type:"file",accept:_e||"*/*",multiple:t||void 0,onChange:Ee})))}F.Metadata.set(D,{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"},disabled:{type:"boolean"}}});const se={"File Upload":{components:[D],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:p.code`
|
|
2
|
+
import { FileUpload } from "@sps-woodland/file-upload";
|
|
3
|
+
|
|
4
|
+
function Component() {
|
|
5
|
+
function selectFile(file) {
|
|
6
|
+
console.log(file);
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
return (
|
|
10
|
+
<FileUpload onSelection={selectFile} />
|
|
11
|
+
)
|
|
12
|
+
}
|
|
13
|
+
`},multiple:{description:"Multiple file upload",react:p.code`
|
|
14
|
+
import { FileUpload } from "@sps-woodland/file-upload";
|
|
15
|
+
|
|
16
|
+
function Component() {
|
|
17
|
+
function selectFile(file) {
|
|
18
|
+
console.log(file);
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
return (
|
|
22
|
+
<FileUpload onSelection={selectFile} multiple />
|
|
23
|
+
)
|
|
24
|
+
}
|
|
25
|
+
`}}},restrictions:{label:"Restrictions",description:"You can place restrictions on what files will be accepted with an extension whitelist and/or a maximum size.",examples:{maxSize:{description:"Maximum size",react:p.code`
|
|
26
|
+
import { FileUpload } from "@sps-woodland/file-upload";
|
|
27
|
+
|
|
28
|
+
function Component() {
|
|
29
|
+
function selectFile(file) {
|
|
30
|
+
console.log(file);
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
return (
|
|
34
|
+
<FileUpload onSelection={selectFile} maxSize="100KB" />
|
|
35
|
+
)
|
|
36
|
+
}
|
|
37
|
+
`},fileWhitelist:{description:"File type whitelist",react:p.code`
|
|
38
|
+
import { FileUpload } from "@sps-woodland/file-upload";
|
|
39
|
+
|
|
40
|
+
function Component() {
|
|
41
|
+
function selectFile(file) {
|
|
42
|
+
console.log(file);
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
return (
|
|
46
|
+
<FileUpload
|
|
47
|
+
description="Spreadsheets"
|
|
48
|
+
onSelection={selectFile}
|
|
49
|
+
acceptExtensions="XLS, xlsx, .csv"
|
|
50
|
+
multiple
|
|
51
|
+
/>
|
|
52
|
+
)
|
|
53
|
+
}
|
|
54
|
+
`},bothRestrictions:{description:"Both restrictions",react:p.code`
|
|
55
|
+
import { FileUpload } from "@sps-woodland/file-upload";
|
|
56
|
+
|
|
57
|
+
function Component() {
|
|
58
|
+
function selectFile(file) {
|
|
59
|
+
console.log(file);
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
return (
|
|
63
|
+
<FileUpload
|
|
64
|
+
description="Spreadsheets"
|
|
65
|
+
onSelection={selectFile}
|
|
66
|
+
acceptExtensions="XLS, xlsx, .csv"
|
|
67
|
+
maxSize="100KB"
|
|
68
|
+
multiple
|
|
69
|
+
/>
|
|
70
|
+
)
|
|
71
|
+
}
|
|
72
|
+
`}}},dismissable:{label:"Dismissable",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.",examples:{basic:{react:p.code`
|
|
73
|
+
import { FileUpload } from "@sps-woodland/file-upload";
|
|
74
|
+
import { Button } from "@sps-woodland/buttons";
|
|
75
|
+
|
|
76
|
+
function Component() {
|
|
77
|
+
const [showFileUpload, setShowFileUpload] = React.useState(true);
|
|
78
|
+
function handleDismissal() {
|
|
79
|
+
setShowFileUpload(false);
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
function selectFile(file) {
|
|
83
|
+
console.log(file);
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
return (
|
|
87
|
+
<>
|
|
88
|
+
<FileUpload
|
|
89
|
+
onSelection={selectFile}
|
|
90
|
+
dismissable
|
|
91
|
+
onDismiss={handleDismissal}
|
|
92
|
+
shown={showFileUpload}
|
|
93
|
+
/>
|
|
94
|
+
{!showFileUpload && (
|
|
95
|
+
<Button onClick={() => setShowFileUpload(true)}>
|
|
96
|
+
Reset
|
|
97
|
+
</Button>
|
|
98
|
+
)}
|
|
99
|
+
</>
|
|
100
|
+
)
|
|
101
|
+
}
|
|
102
|
+
`}}},download:{label:"Download Button",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.",examples:{basic:{react:p.code`
|
|
103
|
+
import { FileUpload } from "@sps-woodland/file-upload";
|
|
104
|
+
|
|
105
|
+
function Component() {
|
|
106
|
+
function selectFile(file) {
|
|
107
|
+
console.log(file);
|
|
108
|
+
}
|
|
109
|
+
|
|
110
|
+
function handleDownload() {
|
|
111
|
+
console.log("Download triggered");
|
|
112
|
+
}
|
|
113
|
+
|
|
114
|
+
return (
|
|
115
|
+
<FileUpload
|
|
116
|
+
onSelection={selectFile}
|
|
117
|
+
description="Spreadsheet"
|
|
118
|
+
acceptExtensions="xlsx"
|
|
119
|
+
downloadLabel="Download Excel Template"
|
|
120
|
+
download={handleDownload}
|
|
121
|
+
/>
|
|
122
|
+
)
|
|
123
|
+
}
|
|
124
|
+
`}}},mini:{label:"Mini File Upload",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.",examples:{basic:{react:p.code`
|
|
125
|
+
import { FileUpload } from "@sps-woodland/file-upload";
|
|
126
|
+
|
|
127
|
+
function Component() {
|
|
128
|
+
function selectFile(file) {
|
|
129
|
+
console.log(file);
|
|
130
|
+
}
|
|
131
|
+
|
|
132
|
+
return (
|
|
133
|
+
<div className={grid.root}>
|
|
134
|
+
<div className={grid[4]}>
|
|
135
|
+
<FileUpload onSelection={selectFile} mini />
|
|
136
|
+
</div>
|
|
137
|
+
</div>
|
|
138
|
+
)
|
|
139
|
+
}
|
|
140
|
+
`}}},constrainContentWidth:{label:"Constrain Content Width",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.",examples:{basic:{react:p.code`
|
|
141
|
+
import { FileUpload } from "@sps-woodland/file-upload";
|
|
142
|
+
|
|
143
|
+
function Component() {
|
|
144
|
+
function selectFile(file) {
|
|
145
|
+
console.log(file);
|
|
146
|
+
}
|
|
147
|
+
|
|
148
|
+
return (
|
|
149
|
+
<div className={grid.root}>
|
|
150
|
+
<div className={grid[4]}>
|
|
151
|
+
<FileUpload onSelection={selectFile} constrainContentWidth />
|
|
152
|
+
</div>
|
|
153
|
+
</div>
|
|
154
|
+
)
|
|
155
|
+
}
|
|
156
|
+
`}}},disabled:{label:"Disabled State",description:"File Upload have a disabled style for each possible state.",examples:{basic:{description:"Disabled File Upload",react:p.code`
|
|
157
|
+
import { FileUpload } from "@sps-woodland/file-upload";
|
|
158
|
+
|
|
159
|
+
function Component() {
|
|
160
|
+
function selectFile(file) {
|
|
161
|
+
console.log(file);
|
|
162
|
+
}
|
|
163
|
+
|
|
164
|
+
return (
|
|
165
|
+
<FileUpload
|
|
166
|
+
disabled
|
|
167
|
+
downloadLabel="Download Excel Template" download={() => {}}
|
|
168
|
+
dismissable onDismiss={() => {}}
|
|
169
|
+
acceptExtensions="XLS, xlsx, .csv" maxSize="100KB"
|
|
170
|
+
onSelection={selectFile} />
|
|
171
|
+
)
|
|
172
|
+
}
|
|
173
|
+
`}}}}}};n.FileUpload=D,n.MANIFEST=se,Object.defineProperty(n,Symbol.toStringTag,{value:"Module"})});
|
package/lib/style.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.pkg_sps-woodland_file-
|
|
1
|
+
.pkg_sps-woodland_file-upload__version_8_21_1__hash_rh07jw0{border-width:.0625rem;border-style:dashed;border-radius:.25rem;display:block;padding:1rem;position:relative}.pkg_sps-woodland_file-upload__version_8_21_1__hash_rh07jw1{background-color:#f4ecf2;border-color:#91467f;border-style:solid}.pkg_sps-woodland_file-upload__version_8_21_1__hash_rh07jw3{padding:1rem}.pkg_sps-woodland_file-upload__version_8_21_1__hash_rh07jw5{border-color:#de012e}.pkg_sps-woodland_file-upload__version_8_21_1__hash_rh07jw8{display:none}.pkg_sps-woodland_file-upload__version_8_21_1__hash_rh07jw9{border-color:#d2d4d4}.pkg_sps-woodland_file-upload__version_8_21_1__hash_rh07jwb{color:#4b5356;margin:0 auto;text-align:center}.pkg_sps-woodland_file-upload__version_8_21_1__hash_rh07jwc{width:50%}.pkg_sps-woodland_file-upload__version_8_21_1__hash_rh07jwe{color:#717779}.pkg_sps-woodland_file-upload__version_8_21_1__hash_rh07jwg{font-size:.75rem;line-height:1.25rem}.pkg_sps-woodland_file-upload__version_8_21_1__hash_rh07jwh{color:#717779;display:block;margin-bottom:1rem}.pkg_sps-woodland_file-upload__version_8_21_1__hash_rh07jwi{font-size:1.5rem;line-height:1.5rem}.pkg_sps-woodland_file-upload__version_8_21_1__hash_rh07jwj{font-size:3rem;line-height:3rem}.pkg_sps-woodland_file-upload__version_8_21_1__hash_rh07jwk{color:#de012e}.pkg_sps-woodland_file-upload__version_8_21_1__hash_rh07jwm{opacity:.5}.pkg_sps-woodland_file-upload__version_8_21_1__hash_rh07jwo{font-weight:600;margin-bottom:.25rem}.pkg_sps-woodland_file-upload__version_8_21_1__hash_rh07jwp{font-size:1rem;line-height:1.25rem}.pkg_sps-woodland_file-upload__version_8_21_1__hash_rh07jwq{font-size:1.125rem;line-height:1.25rem}.pkg_sps-woodland_file-upload__version_8_21_1__hash_rh07jwr{font-size:.875rem;font-weight:600;line-height:1.25rem}.pkg_sps-woodland_file-upload__version_8_21_1__hash_rh07jws{display:flex;justify-content:center;white-space:nowrap}.pkg_sps-woodland_file-upload__version_8_21_1__hash_rh07jwt{max-width:50%;overflow:hidden}.pkg_sps-woodland_file-upload__version_8_21_1__hash_rh07jwt:first-child{text-overflow:ellipsis}.pkg_sps-woodland_file-upload__version_8_21_1__hash_rh07jwt:last-child{float:right}.pkg_sps-woodland_file-upload__version_8_21_1__hash_rh07jwu{font-size:.75rem;line-height:1.125rem;margin-top:.25rem}.pkg_sps-woodland_file-upload__version_8_21_1__hash_rh07jwu>span+span{margin-left:.125rem}.pkg_sps-woodland_file-upload__version_8_21_1__hash_rh07jwv{margin-top:1rem}.pkg_sps-woodland_file-upload__version_8_21_1__hash_rh07jww{position:absolute;right:.5rem;top:.5rem}.pkg_sps-woodland_file-upload__version_8_21_1__hash_rh07jwx{display:none}.pkg_sps-woodland_file-upload__version_8_21_1__hash_rh07jwy{height:3rem}
|
package/package.json
CHANGED
|
@@ -1,20 +1,20 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@sps-woodland/file-upload",
|
|
3
3
|
"description": "SPS Woodland Design System file upload component",
|
|
4
|
-
"version": "8.21.
|
|
4
|
+
"version": "8.21.1",
|
|
5
5
|
"author": "SPS Commerce",
|
|
6
6
|
"license": "UNLICENSED",
|
|
7
7
|
"repository": "https://github.com/SPSCommerce/woodland/tree/main/packages/@sps-woodland/file-upload",
|
|
8
8
|
"homepage": "https://github.com/SPSCommerce/woodland/tree/master/packages/@sps-woodland/file-upload#readme",
|
|
9
9
|
"type": "module",
|
|
10
|
-
"module": "./lib/index.
|
|
11
|
-
"main": "./lib/index.cjs
|
|
10
|
+
"module": "./lib/index.js",
|
|
11
|
+
"main": "./lib/index.umd.cjs",
|
|
12
12
|
"types": "./lib/index.d.ts",
|
|
13
13
|
"exports": {
|
|
14
14
|
".": {
|
|
15
|
-
"
|
|
16
|
-
"
|
|
17
|
-
"default": "./lib/index.
|
|
15
|
+
"require": "./lib/index.umd.cjs",
|
|
16
|
+
"import": "./lib/index.js",
|
|
17
|
+
"default": "./lib/index.js",
|
|
18
18
|
"types": "./lib/index.d.ts"
|
|
19
19
|
},
|
|
20
20
|
"./lib/style.css": {
|
|
@@ -30,12 +30,12 @@
|
|
|
30
30
|
"@spscommerce/utils": "^7.0.0",
|
|
31
31
|
"react": "^16.14.0",
|
|
32
32
|
"react-dom": "^16.14.0",
|
|
33
|
-
"@sps-woodland/buttons": "8.21.
|
|
34
|
-
"@sps-woodland/core": "8.21.
|
|
35
|
-
"@sps-woodland/tokens": "8.21.
|
|
36
|
-
"@sps-woodland/illustrations": "8.21.
|
|
37
|
-
"@spscommerce/ds-react": "8.21.
|
|
38
|
-
"@spscommerce/ds-shared": "8.21.
|
|
33
|
+
"@sps-woodland/buttons": "8.21.1",
|
|
34
|
+
"@sps-woodland/core": "8.21.1",
|
|
35
|
+
"@sps-woodland/tokens": "8.21.1",
|
|
36
|
+
"@sps-woodland/illustrations": "8.21.1",
|
|
37
|
+
"@spscommerce/ds-react": "8.21.1",
|
|
38
|
+
"@spscommerce/ds-shared": "8.21.1"
|
|
39
39
|
},
|
|
40
40
|
"devDependencies": {
|
|
41
41
|
"@spscommerce/ds-illustrations": "^6.12.1",
|
|
@@ -44,13 +44,13 @@
|
|
|
44
44
|
"@vanilla-extract/recipes": "^0.2.5",
|
|
45
45
|
"react": "^16.14.0",
|
|
46
46
|
"react-dom": "^16.14.0",
|
|
47
|
-
"@sps-woodland/buttons": "8.21.
|
|
48
|
-
"@sps-woodland/core": "8.21.
|
|
49
|
-
"@sps-woodland/tokens": "8.21.
|
|
50
|
-
"@spscommerce/ds-colors": "8.21.
|
|
51
|
-
"@sps-woodland/illustrations": "8.21.
|
|
52
|
-
"@spscommerce/ds-react": "8.21.
|
|
53
|
-
"@spscommerce/ds-shared": "8.21.
|
|
47
|
+
"@sps-woodland/buttons": "8.21.1",
|
|
48
|
+
"@sps-woodland/core": "8.21.1",
|
|
49
|
+
"@sps-woodland/tokens": "8.21.1",
|
|
50
|
+
"@spscommerce/ds-colors": "8.21.1",
|
|
51
|
+
"@sps-woodland/illustrations": "8.21.1",
|
|
52
|
+
"@spscommerce/ds-react": "8.21.1",
|
|
53
|
+
"@spscommerce/ds-shared": "8.21.1"
|
|
54
54
|
},
|
|
55
55
|
"scripts": {
|
|
56
56
|
"build": "pnpm run build:js && pnpm run build:types",
|
package/vite.config.mjs
CHANGED
|
@@ -18,8 +18,8 @@ export default defineConfig({
|
|
|
18
18
|
build: {
|
|
19
19
|
lib: {
|
|
20
20
|
entry: path.resolve(__dirname, "src/index.ts"),
|
|
21
|
-
|
|
22
|
-
fileName:
|
|
21
|
+
name: "FileUpload",
|
|
22
|
+
fileName: "index",
|
|
23
23
|
},
|
|
24
24
|
outDir: path.resolve(__dirname, "./lib"),
|
|
25
25
|
emptyOutDir: false,
|
package/lib/index.cjs.js
DELETED
|
@@ -1,173 +0,0 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const fe=require("react"),F=require("@sps-woodland/core"),p=require("@spscommerce/utils"),I=require("@sps-woodland/buttons"),R=require("@sps-woodland/illustrations");function ue(o){const i=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(o){for(const a in o)if(a!=="default"){const l=Object.getOwnPropertyDescriptor(o,a);Object.defineProperty(i,a,l.get?l:{enumerable:!0,get:()=>o[a]})}}return i.default=o,Object.freeze(i)}const e=ue(fe),L={"7Z":["application/x-7z-compressed"],AAC:["audio/aac"],ABW:["application/x-abiword"],ARC:["application/octet-stream"],AVI:["video/x-msvideo"],AZW:["application/vnd.amazon.ebook"],BIN:["application/octet-stream"],BMP:["image/bmp"],BZ:["application/x-bzip"],BZ2:["application/x-bzip2"],CER:["application/pkix-cert","application/x-x509-ca-cert"],CSH:["application/x-csh"],CSS:["text/css"],CSV:["text/csv","application/vnd.ms-excel"],DOC:["application/msword"],DOCX:["application/vnd.openxmlformats-officedocument.wordprocessingml.document"],EML:["application/octet-stream","message/rfc822","multipart/mixed","message/rfc5322","message/rfc6532"],EOT:["application/vnd.ms-fontobject"],EPUB:["application/epub+zip"],ES:["application/ecmascript"],FLV:["video/x-flv"],GIF:["image/gif"],GZ:["application/x-gzip"],HTM:["text/html"],HTML:["text/html"],ICO:["image/x-icon"],ICS:["text/calendar"],JAR:["application/java-archive"],JPEG:["image/jpeg"],JPG:["image/jpeg"],JS:["application/javascript"],JSON:["application/json"],M3U:["audio/x-mpequrl"],MID:["audio/midi"],MIDI:["audio/midi"],MOV:["video/quicktime"],MP3:["audio/mpeg3"],MP4:["video/mp4"],MPEG:["video/mpeg"],MPKG:["application/vnd.apple.installer+xml"],ODP:["application/vnd.oasis.opendocument.presentation"],ODS:["application/vnd.oasis.opendocument.spreadsheet"],ODT:["application/vnd.oasis.opendocument.text"],OGA:["audio/ogg"],OGV:["video/ogg"],OGX:["application/ogg"],OTF:["font/otf"],PNG:["image/png"],PDF:["application/pdf"],PPT:["application/vnd.ms-powerpoint"],PPTX:["application/vnd.openxmlformats-officedocument.presentationml.presentation"],RAR:["application/x-rar-compressed"],RTF:["application/rtf"],SH:["application/x-sh"],SVG:["image/svg+xml"],SWF:["application/x-shockwave-flash"],TAR:["application/x-tar"],TIF:["image/tiff"],TIFF:["image/tiff"],TS:["application/typescript"],TTF:["font/ttf"],TXT:["text/plain"],VSD:["application/vnd.visio"],WAV:["audio/wav"],WEBA:["audio/webm"],WEBM:["video/webm"],WEBP:["image/webp"],WOFF:["font/woff"],WOFF2:["font/woff2"],XHTML:["application/xhtml+xml"],XLS:["application/vnd.ms-excel"],XLSX:["application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"],XML:["application/xml"],XUL:["application/vnd.mozilla.xul+xml"],ZIP:["application/zip"]};function me(o,i,a){return i in o?Object.defineProperty(o,i,{value:a,enumerable:!0,configurable:!0,writable:!0}):o[i]=a,o}function V(o,i){var a=Object.keys(o);if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(o);i&&(l=l.filter(function(n){return Object.getOwnPropertyDescriptor(o,n).enumerable})),a.push.apply(a,l)}return a}function z(o){for(var i=1;i<arguments.length;i++){var a=arguments[i]!=null?arguments[i]:{};i%2?V(Object(a),!0).forEach(function(l){me(o,l,a[l])}):Object.getOwnPropertyDescriptors?Object.defineProperties(o,Object.getOwnPropertyDescriptors(a)):V(Object(a)).forEach(function(l){Object.defineProperty(o,l,Object.getOwnPropertyDescriptor(a,l))})}return o}var he=(o,i,a)=>{for(var l of Object.keys(o)){var n;if(o[l]!==((n=i[l])!==null&&n!==void 0?n:a[l]))return!1}return!0},C=o=>i=>{var a=o.defaultClassName,l=z(z({},o.defaultVariants),i);for(var n in l){var v,w=(v=l[n])!==null&&v!==void 0?v:o.defaultVariants[n];if(w!=null){var d=w;typeof d=="boolean"&&(d=d===!0?"true":"false");var _=o.variantClassNames[n][d];_&&(a+=" "+_)}}for(var[b,k]of o.compoundVariants)he(b,l,o.defaultVariants)&&(a+=" "+k);return a},ve="pkg_sps-woodland_file-upload__version_8_21_0__hash_rh07jws",W="pkg_sps-woodland_file-upload__version_8_21_0__hash_rh07jwt",we="pkg_sps-woodland_file-upload__version_8_21_0__hash_rh07jwr",ge=C({defaultClassName:"pkg_sps-woodland_file-upload__version_8_21_0__hash_rh07jw0",variantClassNames:{active:{true:"pkg_sps-woodland_file-upload__version_8_21_0__hash_rh07jw1",false:"pkg_sps-woodland_file-upload__version_8_21_0__hash_rh07jw2"},mini:{true:"pkg_sps-woodland_file-upload__version_8_21_0__hash_rh07jw3",false:"pkg_sps-woodland_file-upload__version_8_21_0__hash_rh07jw4"},error:{true:"pkg_sps-woodland_file-upload__version_8_21_0__hash_rh07jw5",false:"pkg_sps-woodland_file-upload__version_8_21_0__hash_rh07jw6"},shown:{true:"pkg_sps-woodland_file-upload__version_8_21_0__hash_rh07jw7",false:"pkg_sps-woodland_file-upload__version_8_21_0__hash_rh07jw8"},disabled:{true:"pkg_sps-woodland_file-upload__version_8_21_0__hash_rh07jw9",false:"pkg_sps-woodland_file-upload__version_8_21_0__hash_rh07jwa"}},defaultVariants:{active:!1,mini:!1,error:!1,shown:!0,disabled:!1},compoundVariants:[]}),Fe="pkg_sps-woodland_file-upload__version_8_21_0__hash_rh07jww",be=C({defaultClassName:"pkg_sps-woodland_file-upload__version_8_21_0__hash_rh07jwb",variantClassNames:{constrainContentWidth:{true:"pkg_sps-woodland_file-upload__version_8_21_0__hash_rh07jwc",false:"pkg_sps-woodland_file-upload__version_8_21_0__hash_rh07jwd"},disabled:{true:"pkg_sps-woodland_file-upload__version_8_21_0__hash_rh07jwe",false:"pkg_sps-woodland_file-upload__version_8_21_0__hash_rh07jwf"}},defaultVariants:{constrainContentWidth:!1,disabled:!1},compoundVariants:[]}),xe="pkg_sps-woodland_file-upload__version_8_21_0__hash_rh07jwv",ye="pkg_sps-woodland_file-upload__version_8_21_0__hash_rh07jwx",Ee=C({defaultClassName:"pkg_sps-woodland_file-upload__version_8_21_0__hash_rh07jwh",variantClassNames:{mini:{true:"pkg_sps-woodland_file-upload__version_8_21_0__hash_rh07jwi",false:"pkg_sps-woodland_file-upload__version_8_21_0__hash_rh07jwj"},error:{true:"pkg_sps-woodland_file-upload__version_8_21_0__hash_rh07jwk",false:"pkg_sps-woodland_file-upload__version_8_21_0__hash_rh07jwl"},disabled:{true:"pkg_sps-woodland_file-upload__version_8_21_0__hash_rh07jwm",false:"pkg_sps-woodland_file-upload__version_8_21_0__hash_rh07jwn"}},defaultVariants:{mini:!1,error:!1,disabled:!1},compoundVariants:[]}),Se="pkg_sps-woodland_file-upload__version_8_21_0__hash_rh07jwy",G="pkg_sps-woodland_file-upload__version_8_21_0__hash_rh07jwg",Ue="pkg_sps-woodland_file-upload__version_8_21_0__hash_rh07jwu",je=C({defaultClassName:"pkg_sps-woodland_file-upload__version_8_21_0__hash_rh07jwo",variantClassNames:{mini:{true:"pkg_sps-woodland_file-upload__version_8_21_0__hash_rh07jwp",false:"pkg_sps-woodland_file-upload__version_8_21_0__hash_rh07jwq"}},defaultVariants:{mini:!1},compoundVariants:[]});function T({constrainContentWidth:o,description:i,multiple:a=!1,dismissable:l,processing:n,mini:v,downloadLabel:w,acceptExtensions:d,maxSize:_,customRequirement:b,onSelection:k,onDismiss:N,download:P,shown:x,className:X,disabled:c,children:Oe,...q}){const y=e.useRef(new Set),[Z,A]=e.useState(x),[De,H]=e.useState([]),[J,K]=e.useState(""),[M,Y]=e.useState(),[Q,E]=e.useState(!1),[g,S]=e.useState(!1),[O,B]=e.useState([]),[$,ee]=e.useState(""),{t:h}=e.useContext(F.I18nContext),U=h(a?"design-system:fileUpload.instructions_plural":"design-system:fileUpload.instructions").split("|"),oe=i||(a?"Files":"File"),f=e.useRef(null);e.useEffect(()=>{x&&A(x)},[x]),e.useEffect(()=>{_&&ae(_)},[_]),e.useEffect(()=>{d&&le(d)},[d]);function te(){l&&(A(!1),N&&N())}function ae(t){try{Y(p.parseFileSize(t))}catch{throw new Error(`Could not parse "${t}" as a file size.`)}}function le(t){const u=(Array.isArray(t)?t:t.trim().split(/\s?,\s?/)).map(m=>m.replace(/^\./,"")),r=u.map(m=>`.${m}`.toLowerCase());ee(r.map((m,j)=>j>0&&j===r.length-1?`or ${m}`:m).join(r.length>2?", ":" ")),y.current.clear();for(const m of u){const j=Object.keys(L).includes(m.toUpperCase())?L[m.toUpperCase()]:[];for(const _e of j)y.current.add(_e)}K(r.concat(Array.from(y.current)).join(","))}function D(t){B([]);let s=[];const u=Array.from(t);for(const r of u)r===null?s.push("Not a file"):(d&&!y.current.has(r.type)&&s.push(r.name),_&&M&&r.size>M&&s.indexOf(r.name)===-1&&s.push(r.name));s.length?(S(!0),f.current&&f.current.value&&(f.current.value="")):(H(u),k(u)),B(s)}function ie(t){t.preventDefault(),S(!1),f.current&&f.current.click()}function ne(){P&&P()}function se(t){t.stopPropagation(),D(t.target.files||[]),f.current&&f.current.value&&(f.current.value="")}function re(t){t.preventDefault(),t.stopPropagation(),E(!0),S(!1)}function pe(t){t.preventDefault(),E(!0),S(!1)}function de(t){t.preventDefault(),E(!1)}function ce(t){t.preventDefault(),t.stopPropagation(),E(!1),t.dataTransfer.items?D(Array.from(t.dataTransfer.items).map(s=>s.getAsFile())):D(t.dataTransfer.files)}return e.createElement("div",{onDrop:c?()=>{}:ce,onDragOver:c?()=>{}:re,onDragLeave:c?()=>{}:de,onDragEnter:c?()=>{}:pe,className:F.cl(ge({active:Q,mini:v,error:g,shown:Z,disabled:c}),X),...q},e.createElement("div",{className:F.cl(be({constrainContentWidth:o,disabled:c}))},n?e.createElement("div",null,e.createElement(F.Spinner,{size:"md","aria-hidden":"true"}),e.createElement("div",{className:G},h("design-system:fileUpload.processing"))):e.createElement("div",null,e.createElement("div",{className:Ee({mini:v,error:g,disabled:c}),"aria-hidden":"true"},e.createElement("img",{className:Se,src:g?R.GENERAL_ERROR_LARGE:R.UPLOAD_LARGE,alt:"Upload Icon"})),e.createElement("div",{className:je({mini:v})},g?e.createElement("div",null,h(O.length>1?"design-system:fileUpload.cancelled_plural":"design-system:fileUpload.cancelled")):e.createElement("div",null,h("design-system:fileUpload.title",{description:oe}))),g?e.createElement("div",{className:we},new Set(O.map((t,s)=>{const u=Math.floor(t.length/2);return e.createElement("div",{className:ve,key:t},e.createElement("span",{className:W},t.substr(0,u)),e.createElement("div",{className:W},e.createElement("span",null,t.substr(u))),s<O.length-1?",":"")}))):e.createElement("span",null),e.createElement("div",{className:G},e.createElement("div",null,e.createElement("span",null,U[0]),c?e.createElement("u",null,U[1]):e.createElement("a",{href:"",onClick:ie},U[1]),e.createElement("span",null,U[2]))),e.createElement("div",{className:Ue},d?e.createElement("span",null,"("," ",h("design-system:fileUpload.acceptedTypes",{fileTypes:$})," ",")"):"",_?e.createElement("span",null,"( ",h("design-system:fileUpload.maximumSize",{size:_})," )"):"",b?e.createElement("span",null," ",b," "):""),w&&e.createElement("div",{className:xe},e.createElement(I.Button,{disabled:c,kind:"link",icon:"download-cloud",onClick:ne},w)))),l&&!n&&e.createElement("div",{className:Fe},e.createElement(I.Button,{disabled:c,kind:"icon",icon:"x",title:h("design-system:fileUpload.close"),onClick:te})),e.createElement("form",{className:ye},e.createElement("input",{ref:f,type:"file",accept:J||"*/*",multiple:a||void 0,onChange:se})))}F.Metadata.set(T,{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"},disabled:{type:"boolean"}}});const Ce={components:[T],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:p.code`
|
|
2
|
-
import { FileUpload } from "@sps-woodland/file-upload";
|
|
3
|
-
|
|
4
|
-
function Component() {
|
|
5
|
-
function selectFile(file) {
|
|
6
|
-
console.log(file);
|
|
7
|
-
}
|
|
8
|
-
|
|
9
|
-
return (
|
|
10
|
-
<FileUpload onSelection={selectFile} />
|
|
11
|
-
)
|
|
12
|
-
}
|
|
13
|
-
`},multiple:{description:"Multiple file upload",react:p.code`
|
|
14
|
-
import { FileUpload } from "@sps-woodland/file-upload";
|
|
15
|
-
|
|
16
|
-
function Component() {
|
|
17
|
-
function selectFile(file) {
|
|
18
|
-
console.log(file);
|
|
19
|
-
}
|
|
20
|
-
|
|
21
|
-
return (
|
|
22
|
-
<FileUpload onSelection={selectFile} multiple />
|
|
23
|
-
)
|
|
24
|
-
}
|
|
25
|
-
`}}},restrictions:{label:"Restrictions",description:"You can place restrictions on what files will be accepted with an extension whitelist and/or a maximum size.",examples:{maxSize:{description:"Maximum size",react:p.code`
|
|
26
|
-
import { FileUpload } from "@sps-woodland/file-upload";
|
|
27
|
-
|
|
28
|
-
function Component() {
|
|
29
|
-
function selectFile(file) {
|
|
30
|
-
console.log(file);
|
|
31
|
-
}
|
|
32
|
-
|
|
33
|
-
return (
|
|
34
|
-
<FileUpload onSelection={selectFile} maxSize="100KB" />
|
|
35
|
-
)
|
|
36
|
-
}
|
|
37
|
-
`},fileWhitelist:{description:"File type whitelist",react:p.code`
|
|
38
|
-
import { FileUpload } from "@sps-woodland/file-upload";
|
|
39
|
-
|
|
40
|
-
function Component() {
|
|
41
|
-
function selectFile(file) {
|
|
42
|
-
console.log(file);
|
|
43
|
-
}
|
|
44
|
-
|
|
45
|
-
return (
|
|
46
|
-
<FileUpload
|
|
47
|
-
description="Spreadsheets"
|
|
48
|
-
onSelection={selectFile}
|
|
49
|
-
acceptExtensions="XLS, xlsx, .csv"
|
|
50
|
-
multiple
|
|
51
|
-
/>
|
|
52
|
-
)
|
|
53
|
-
}
|
|
54
|
-
`},bothRestrictions:{description:"Both restrictions",react:p.code`
|
|
55
|
-
import { FileUpload } from "@sps-woodland/file-upload";
|
|
56
|
-
|
|
57
|
-
function Component() {
|
|
58
|
-
function selectFile(file) {
|
|
59
|
-
console.log(file);
|
|
60
|
-
}
|
|
61
|
-
|
|
62
|
-
return (
|
|
63
|
-
<FileUpload
|
|
64
|
-
description="Spreadsheets"
|
|
65
|
-
onSelection={selectFile}
|
|
66
|
-
acceptExtensions="XLS, xlsx, .csv"
|
|
67
|
-
maxSize="100KB"
|
|
68
|
-
multiple
|
|
69
|
-
/>
|
|
70
|
-
)
|
|
71
|
-
}
|
|
72
|
-
`}}},dismissable:{label:"Dismissable",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.",examples:{basic:{react:p.code`
|
|
73
|
-
import { FileUpload } from "@sps-woodland/file-upload";
|
|
74
|
-
import { Button } from "@sps-woodland/buttons";
|
|
75
|
-
|
|
76
|
-
function Component() {
|
|
77
|
-
const [showFileUpload, setShowFileUpload] = React.useState(true);
|
|
78
|
-
function handleDismissal() {
|
|
79
|
-
setShowFileUpload(false);
|
|
80
|
-
}
|
|
81
|
-
|
|
82
|
-
function selectFile(file) {
|
|
83
|
-
console.log(file);
|
|
84
|
-
}
|
|
85
|
-
|
|
86
|
-
return (
|
|
87
|
-
<>
|
|
88
|
-
<FileUpload
|
|
89
|
-
onSelection={selectFile}
|
|
90
|
-
dismissable
|
|
91
|
-
onDismiss={handleDismissal}
|
|
92
|
-
shown={showFileUpload}
|
|
93
|
-
/>
|
|
94
|
-
{!showFileUpload && (
|
|
95
|
-
<Button onClick={() => setShowFileUpload(true)}>
|
|
96
|
-
Reset
|
|
97
|
-
</Button>
|
|
98
|
-
)}
|
|
99
|
-
</>
|
|
100
|
-
)
|
|
101
|
-
}
|
|
102
|
-
`}}},download:{label:"Download Button",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.",examples:{basic:{react:p.code`
|
|
103
|
-
import { FileUpload } from "@sps-woodland/file-upload";
|
|
104
|
-
|
|
105
|
-
function Component() {
|
|
106
|
-
function selectFile(file) {
|
|
107
|
-
console.log(file);
|
|
108
|
-
}
|
|
109
|
-
|
|
110
|
-
function handleDownload() {
|
|
111
|
-
console.log("Download triggered");
|
|
112
|
-
}
|
|
113
|
-
|
|
114
|
-
return (
|
|
115
|
-
<FileUpload
|
|
116
|
-
onSelection={selectFile}
|
|
117
|
-
description="Spreadsheet"
|
|
118
|
-
acceptExtensions="xlsx"
|
|
119
|
-
downloadLabel="Download Excel Template"
|
|
120
|
-
download={handleDownload}
|
|
121
|
-
/>
|
|
122
|
-
)
|
|
123
|
-
}
|
|
124
|
-
`}}},mini:{label:"Mini File Upload",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.",examples:{basic:{react:p.code`
|
|
125
|
-
import { FileUpload } from "@sps-woodland/file-upload";
|
|
126
|
-
|
|
127
|
-
function Component() {
|
|
128
|
-
function selectFile(file) {
|
|
129
|
-
console.log(file);
|
|
130
|
-
}
|
|
131
|
-
|
|
132
|
-
return (
|
|
133
|
-
<div className={grid.root}>
|
|
134
|
-
<div className={grid[4]}>
|
|
135
|
-
<FileUpload onSelection={selectFile} mini />
|
|
136
|
-
</div>
|
|
137
|
-
</div>
|
|
138
|
-
)
|
|
139
|
-
}
|
|
140
|
-
`}}},constrainContentWidth:{label:"Constrain Content Width",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.",examples:{basic:{react:p.code`
|
|
141
|
-
import { FileUpload } from "@sps-woodland/file-upload";
|
|
142
|
-
|
|
143
|
-
function Component() {
|
|
144
|
-
function selectFile(file) {
|
|
145
|
-
console.log(file);
|
|
146
|
-
}
|
|
147
|
-
|
|
148
|
-
return (
|
|
149
|
-
<div className={grid.root}>
|
|
150
|
-
<div className={grid[4]}>
|
|
151
|
-
<FileUpload onSelection={selectFile} constrainContentWidth />
|
|
152
|
-
</div>
|
|
153
|
-
</div>
|
|
154
|
-
)
|
|
155
|
-
}
|
|
156
|
-
`}}},disabled:{label:"Disabled State",description:"File Upload have a disabled style for each possible state.",examples:{basic:{description:"Disabled File Upload",react:p.code`
|
|
157
|
-
import { FileUpload } from "@sps-woodland/file-upload";
|
|
158
|
-
|
|
159
|
-
function Component() {
|
|
160
|
-
function selectFile(file) {
|
|
161
|
-
console.log(file);
|
|
162
|
-
}
|
|
163
|
-
|
|
164
|
-
return (
|
|
165
|
-
<FileUpload
|
|
166
|
-
disabled
|
|
167
|
-
downloadLabel="Download Excel Template" download={() => {}}
|
|
168
|
-
dismissable onDismiss={() => {}}
|
|
169
|
-
acceptExtensions="XLS, xlsx, .csv" maxSize="100KB"
|
|
170
|
-
onSelection={selectFile} />
|
|
171
|
-
)
|
|
172
|
-
}
|
|
173
|
-
`}}}}},ke={"File Upload":Ce};exports.FileUpload=T;exports.MANIFEST=ke;
|