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