react-drag-drop-files
Version:
Light React Drag & Drop files and images library styled by styled-components
2 lines (1 loc) • 8.11 kB
JavaScript
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var n,e=require("react/jsx-runtime"),t=require("styled-components"),r=(n=t)&&"object"==typeof n&&"default"in n?n.default:n,i=require("react"),o=function(){return o=Object.assign||function(n){for(var e,t=1,r=arguments.length;t<r;t++)for(var i in e=arguments[t])Object.prototype.hasOwnProperty.call(e,i)&&(n[i]=e[i]);return n},o.apply(this,arguments)};function a(n,e){return Object.defineProperty?Object.defineProperty(n,"raw",{value:e}):n.raw=e,n}var s,l,d,p,c,u=t.css(s||(s=a(["\n display: flex;\n align-items: center;\n min-width: 322px;\n max-width: 508px;\n height: 48px;\n border: dashed 2px ",";\n padding: 8px 16px 8px 8px;\n border-radius: 5px;\n cursor: pointer;\n flex-grow: 0;\n\n &.is-disabled {\n border: dashed 2px ",";\n cursor: no-drop;\n svg {\n fill: ",";\n color: ",";\n path {\n fill: ",";\n color: ",";\n }\n }\n }\n"],["\n display: flex;\n align-items: center;\n min-width: 322px;\n max-width: 508px;\n height: 48px;\n border: dashed 2px ",";\n padding: 8px 16px 8px 8px;\n border-radius: 5px;\n cursor: pointer;\n flex-grow: 0;\n\n &.is-disabled {\n border: dashed 2px ",";\n cursor: no-drop;\n svg {\n fill: ",";\n color: ",";\n path {\n fill: ",";\n color: ",";\n }\n }\n }\n"])),"#0658c2","#666","#666","#666","#666","#666"),f=r.label(l||(l=a(["\n position: relative;\n ",";\n &:focus-within {\n outline: 2px solid black;\n }\n & > input {\n display: block;\n opacity: 0;\n position: absolute;\n pointer-events: none;\n }\n"],["\n position: relative;\n ",";\n &:focus-within {\n outline: 2px solid black;\n }\n & > input {\n display: block;\n opacity: 0;\n position: absolute;\n pointer-events: none;\n }\n"])),(function(n){return n.override?"":u})),v=r.div(d||(d=a(["\n border: dashed 2px ",";\n border-radius: 5px;\n background-color: ",";\n opacity: 0.9;\n position: absolute;\n top: 0;\n right: 0;\n left: 0;\n bottom: 0;\n z-index: 999;\n & > span {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translateX(-50%) translateY(-50%);\n }\n"],["\n border: dashed 2px ",";\n border-radius: 5px;\n background-color: ",";\n opacity: 0.9;\n position: absolute;\n top: 0;\n right: 0;\n left: 0;\n bottom: 0;\n z-index: 999;\n & > span {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translateX(-50%) translateY(-50%);\n }\n"])),"#666","#999"),x=r.div(p||(p=a(["\n display: flex;\n justify-content: space-between;\n flex-grow: 1;\n & > span {\n font-size: 12px;\n color: ",";\n }\n .file-types {\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n max-width: 100px;\n }\n"],["\n display: flex;\n justify-content: space-between;\n flex-grow: 1;\n & > span {\n font-size: 12px;\n color: ",";\n }\n .file-types {\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n max-width: 100px;\n }\n"])),(function(n){return n.$error?"red":"#666"})),h=r.span(c||(c=a(["\n font-size: 14px;\n color: ",";\n span {\n text-decoration: underline;\n }\n"],["\n font-size: 14px;\n color: ",";\n span {\n text-decoration: underline;\n }\n"])),"#666"),b=function(n){return n/1024/1024},g=function(n){return void 0===n?"":n.map((function(n){return".".concat(n.toLowerCase())})).join(",")};function m(n){var t=n.types,r=n.minSize,i=n.maxSize;if(t){var a=t.toString(),s="";return i&&(s+="size >= ".concat(i,", ")),r&&(s+="size <= ".concat(r,", ")),e.jsx("span",o({title:"".concat(s,"types: ").concat(a),className:"file-types"},{children:a}),void 0)}return null}function y(){return e.jsxs("svg",o({width:"32",height:"32",viewBox:"0 0 32 32",fill:"none",xmlns:"http://www.w3.org/2000/svg"},{children:[e.jsx("path",{d:"M5.33317 6.66667H22.6665V16H25.3332V6.66667C25.3332 5.196 24.1372 4 22.6665 4H5.33317C3.8625 4 2.6665 5.196 2.6665 6.66667V22.6667C2.6665 24.1373 3.8625 25.3333 5.33317 25.3333H15.9998V22.6667H5.33317V6.66667Z",fill:"#0658C2"},void 0),e.jsx("path",{d:"M10.6665 14.6667L6.6665 20H21.3332L15.9998 12L11.9998 17.3333L10.6665 14.6667Z",fill:"#0658C2"},void 0),e.jsx("path",{d:"M25.3332 18.6667H22.6665V22.6667H18.6665V25.3333H22.6665V29.3333H25.3332V25.3333H29.3332V22.6667H25.3332V18.6667Z",fill:"#0658C2"},void 0)]}),void 0)}var j=0;var w=function(n,t,r,i,o,a){return r?e.jsx("span",{children:"File type/size error, Hovered on types!"},void 0):e.jsx(h,{children:i?e.jsx("span",{children:"Upload disabled"},void 0):n||t?e.jsx(e.Fragment,{children:a?e.jsx(e.Fragment,{children:e.jsx("span",{children:a},void 0)},void 0):e.jsxs(e.Fragment,{children:[e.jsx("span",{children:"Uploaded Successfully!"},void 0)," Upload another?"]},void 0)},void 0):e.jsx(e.Fragment,{children:o?e.jsxs(e.Fragment,{children:[e.jsx("span",{children:o.split(" ")[0]},void 0)," ",o.substr(o.indexOf(" ")+1)]},void 0):e.jsxs(e.Fragment,{children:[e.jsx("span",{children:"Upload"},void 0)," or drop a file right here"]},void 0)},void 0)},void 0)};exports.FileUploader=function(n){var t=n.name,r=n.hoverTitle,a=n.types,s=n.handleChange,l=n.classes,d=n.children,p=n.maxSize,c=n.minSize,u=n.fileOrFiles,h=n.onSizeError,C=n.onTypeError,z=n.onSelect,L=n.onDrop,k=n.disabled,S=n.label,E=n.uploadedLabel,F=n.multiple,H=n.required,D=n.onDraggingStateChange,V=n.dropMessageStyle,P=n.ariaLabel,O=n.ariaDescribedby,R=i.useRef(null),q=i.useRef(null),M=i.useState(!1),T=M[0],U=M[1],Z=i.useState(null),N=Z[0],X=Z[1],Y=i.useState(!1),$=Y[0],_=Y[1],B=function(n){return a&&!function(n,e){var t=n.name.split(".").pop();return e.map((function(n){return n.toLowerCase()})).includes(t.toLowerCase())}(n,a)?(_(!0),C&&C("File type is not supported"),!1):p&&b(n.size)>p?(_(!0),h&&h("File size is too big"),!1):!(c&&b(n.size)<c)||(_(!0),h&&h("File size is too small"),!1)},A=function(n){var e=!1;if(n){if(n instanceof File)e=!B(n);else for(var t=0;t<n.length;t++){var r=n[t];e=!B(r)||e}return!e&&(s&&s(n),X(n),U(!0),_(!1),!0)}return!1},G=function(n){var e=n.labelRef,t=n.inputRef,r=n.multiple,o=n.handleChanges,a=n.onDrop,s=i.useState(!1),l=s[0],d=s[1],p=i.useCallback((function(){t.current.click()}),[t]),c=i.useCallback((function(n){n.preventDefault(),n.stopPropagation(),j++,n.dataTransfer.items&&0!==n.dataTransfer.items.length&&d(!0)}),[]),u=i.useCallback((function(n){n.preventDefault(),n.stopPropagation(),--j>0||d(!1)}),[]),f=i.useCallback((function(n){n.preventDefault(),n.stopPropagation()}),[]),v=i.useCallback((function(n){n.preventDefault(),n.stopPropagation(),d(!1),j=0;var e=n.dataTransfer.files;if(e&&e.length>0){var t=r?e:e[0],i=o(t);a&&i&&a(t)}}),[o]);return i.useEffect((function(){var n=e.current;return n.addEventListener("click",p),n.addEventListener("dragenter",c),n.addEventListener("dragleave",u),n.addEventListener("dragover",f),n.addEventListener("drop",v),function(){n.removeEventListener("click",p),n.removeEventListener("dragenter",c),n.removeEventListener("dragleave",u),n.removeEventListener("dragover",f),n.removeEventListener("drop",v)}}),[p,c,u,f,v,e]),l}({labelRef:R,inputRef:q,multiple:F,handleChanges:A,onDrop:L});return i.useEffect((function(){null==D||D(G)}),[G]),i.useEffect((function(){u?(U(!0),X(u)):(q.current&&(q.current.value=""),U(!1),X(null))}),[u]),e.jsxs(f,o({override:d,className:"".concat(l||""," ").concat(k?"is-disabled":""),ref:R,htmlFor:t,onClick:function(n){n.preventDefault(),n.stopPropagation()},"aria-describedby":O,role:"button","aria-label":P},{children:[e.jsx("input",{onClick:function(n){n.stopPropagation(),q&&q.current&&(q.current.value="",q.current.click())},onChange:function(n){var e=n.target.files,t=F?e:e[0],r=A(t);z&&r&&z(t)},accept:g(a),ref:q,type:"file",id:t,name:t,disabled:k,multiple:F,required:H},void 0),G&&e.jsx(v,o({style:V},{children:e.jsx("span",{children:r||"Drop Here"},void 0)}),void 0),!d&&e.jsxs(e.Fragment,{children:[e.jsx(y,{},void 0),e.jsxs(x,o({$error:$},{children:[w(N,T,$,k,S,E),e.jsx(m,{types:a,minSize:c,maxSize:p},void 0)]}),void 0)]},void 0),d]}),void 0)};