retro-react
Version:
A React component library for building retro-style websites
2 lines (1 loc) • 4.29 kB
JavaScript
"use strict";var e=require("../../_virtual/_tslib.js"),t=require("react"),i=require("../../node_modules/@theme-ui/core/jsx-runtime/dist/theme-ui-core-jsx-runtime.esm.js"),s=require("../../utils/classNames.js"),r=require("../../constants/commonClassNames.js"),o=require("./DocumentUpload.styled.js");const n=e=>{let{type:t}=e;return i.jsxs("svg",Object.assign({xmlns:"http://www.w3.org/2000/svg",width:"32",height:"32",viewBox:"0 0 32 32",fill:"none","aria-hidden":"true"},{children:[i.jsx("rect",{x:"4",y:"2",width:"18",height:"28",fill:t.includes("image")?"#FF6B6B":t.includes("pdf")?"#FF5555":t.includes("text")||t.includes("document")?"#4ECDC4":t.includes("video")?"#45B7D1":t.includes("audio")?"#96CEB4":"#95A5A6",stroke:"#000",strokeWidth:"2"},void 0),i.jsx("path",{d:"M22 2L22 10L14 10L22 2Z",fill:"#FFF",stroke:"#000",strokeWidth:"2"},void 0),i.jsx("rect",{x:"6",y:"14",width:"14",height:"2",fill:"#000"},void 0),i.jsx("rect",{x:"6",y:"18",width:"10",height:"2",fill:"#000"},void 0),i.jsx("rect",{x:"6",y:"22",width:"12",height:"2",fill:"#000"},void 0)]}),void 0)},l=()=>{const[e,s]=t.useState("");return t.useEffect((()=>{const e=setInterval((()=>{s((e=>e.length>=3?"":e+"."))}),500);return()=>clearInterval(e)}),[]),i.jsx("span",{children:e},void 0)},a=()=>{const[e,s]=t.useState(0);t.useEffect((()=>{const e=setInterval((()=>{s((e=>e>=100?0:e+15*Math.random()))}),200);return()=>clearInterval(e)}),[]);const r=Math.floor(e/100*20),n=20-r;return i.jsxs(o.ProgressWrapper,{children:[i.jsxs(o.ProgressText,{children:["UPLOADING ",i.jsx(l,{},void 0)]},void 0),i.jsxs(o.ProgressBar,{children:["[","█".repeat(r),"░".repeat(n),"] ",Math.floor(e),"%"]},void 0)]},void 0)},d=t.forwardRef(((l,d)=>{var{sx:c,className:u,color:v="primary",onChange:p,isUploading:h=!1}=l,x=e.__rest(l,["sx","className","color","onChange","isUploading"]);const[j,g]=t.useState(null),[f,m]=t.useState(!1),[D,F]=t.useState(!1),w=t.useRef(null),y=d||w;return i.jsxs(o.DropzoneWrapper,Object.assign({as:"label",htmlFor:x.id||"retro-doc-upload",sx:c,$color:v,$hasFile:!!j,$isDragOver:f,$isPressed:D,$isUploading:h,className:s.classNames(r.default,u),onDragOver:e=>{e.preventDefault(),e.stopPropagation(),m(!0)},onDragLeave:e=>{e.preventDefault(),e.stopPropagation(),m(!1)},onDrop:e=>{e.preventDefault(),e.stopPropagation(),m(!1);const t=e.dataTransfer.files[0];if(t&&y&&"current"in y&&y.current){const e=new DataTransfer;e.items.add(t),y.current.files=e.files,g(t),p&&p(t)}},onMouseDown:()=>F(!0),onMouseUp:()=>F(!1),onMouseLeave:()=>F(!1)},{children:[i.jsx(o.HiddenInput,Object.assign({id:x.id||"retro-doc-upload",type:"file",ref:y,onChange:e=>{var t;const i=(null===(t=e.target.files)||void 0===t?void 0:t[0])||null;g(i),p&&p(i)}},x),void 0),h?i.jsx(a,{},void 0):j?i.jsxs(o.FileSelectedWrapper,{children:[i.jsx(n,{type:j.type},void 0),i.jsxs(o.FileInfo,{children:[i.jsxs(o.FileHeader,{children:[i.jsxs(o.FileType,Object.assign({$color:v},{children:["[",(e=>{var t;return(null===(t=e.split(".").pop())||void 0===t?void 0:t.toUpperCase())||"FILE"})(j.name),"]"]}),void 0),i.jsx(o.FileStatus,{children:"● READY"},void 0)]},void 0),i.jsx(o.FileName,Object.assign({title:j.name},{children:j.name}),void 0),i.jsx(o.FileSize,{children:function(e){let t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:2;if(0===e)return"0 BYTES";const i=t<0?0:t,s=Math.floor(Math.log(e)/Math.log(1024));return`${parseFloat((e/Math.pow(1024,s)).toFixed(i))} ${["BYTES","KB","MB","GB"][s]}`}(j.size)},void 0),i.jsx(o.FileDate,{children:new Date(j.lastModified).toLocaleDateString("en-US",{year:"2-digit",month:"2-digit",day:"2-digit"})},void 0)]},void 0),i.jsx(o.RemoveButton,Object.assign({type:"button",onClick:e=>{e.stopPropagation(),e.preventDefault(),y&&"current"in y&&y.current&&(y.current.value=""),g(null),p&&p(null)},title:"Remove file [DEL]","aria-label":"Remove file",$color:v},{children:i.jsx(o.ButtonLabel,{children:"DEL"},void 0)}),void 0)]},void 0):i.jsxs(o.UploadPrompt,{children:[i.jsx(o.UploadIconWrapper,{$color:v},void 0),i.jsx(o.UploadText,{children:f?"DROP FILE HERE":"CLICK TO BROWSE"},void 0),i.jsx(o.SubText,{children:"OR DRAG AND DROP"},void 0),i.jsx(o.BlinkingCursor,{children:"_"},void 0)]},void 0),i.jsx(o.ScanLine,{},void 0)]}),void 0)}));d.displayName="DocumentUpload",exports.DocumentUpload=d;