@infinityfx/fluid/dist/components/input/drop-zone.js

React UI library, using zero-runtime CSS-in-JS.

"use client";
import{jsx as e,jsxs as r,Fragment as o}from"react/jsx-runtime";import{useRef as n,useState as i}from"react";import a from"./button.js";import t from"../../hooks/use-input-props.js";import{combineClasses as l,classes as c,combineRefs as s}from"../../core/utils.js";import{createStyles as d}from"../../core/style.js";import{Icon as p}from"../../core/icons.js";import"../feedback/progress-bar.js";import"../feedback/circular-progress.js";import f from"../feedback/spinner.js";import m from"../feedback/halo.js";import"../feedback/indicator.js";import"../feedback/skeleton.js";const g=d("drop-zone",{".zone":{overflow:"hidden",position:"relative",display:"grid",backgroundColor:"var(--f-clr-fg-100)",border:"dashed 1px var(--f-clr-fg-200)",borderRadius:"var(--f-radius-med)",transition:"background-color .25s, border-color .25s, color .25s",userSelect:"none",WebkitTapHighlightColor:"transparent"},'.zone[aria-disabled="false"]':{cursor:"pointer"},".zone.hovering":{backgroundColor:"var(--f-clr-primary-600)",borderColor:"var(--f-clr-primary-100)"},".zone.filled":{borderStyle:"solid"},".zone.error, .zone.rejected":{borderColor:"var(--f-clr-error-100)",color:"var(--f-clr-error-100)"},".zone.rejected":{backgroundColor:"var(--f-clr-error-400)"},".zone.disabled":{color:"var(--f-clr-grey-500)"},".container":{display:"flex",flexDirection:"column",gridArea:"1 / 1"},".preview":{position:"relative",display:"flex",alignItems:"center",justifyContent:"center",backgroundColor:"var(--f-clr-bg-100)",padding:"var(--f-spacing-med)",flexGrow:1},".footer":{display:"flex",alignItems:"center",justifyContent:"space-between",padding:"var(--f-spacing-sml)",gap:"var(--f-spacing-sml)"},".text":{display:"flex",alignItems:"baseline",gap:"var(--f-spacing-xsm)"},".annotation":{paddingTop:"var(--f-spacing-xxs)",color:"var(--f-clr-grey-600)",fontSize:"var(--f-font-size-xsm)"},".icon":{paddingBottom:"var(--f-spacing-sml)"},".image":{position:"absolute",inset:0,width:"100%",height:"100%",objectFit:"cover",zIndex:1},".container.centered":{alignItems:"center",justifyContent:"center",textAlign:"center",padding:"var(--f-spacing-lrg)"},".input":{position:"absolute",opacity:0,pointerEvents:"none"}});function v(e,r){const o=r?r.split(","):[];return!o.length||o.some((r=>e.type.includes(r.trim().replace(/\/\*$/,""))))}function u({cc:d={},loading:u=!1,error:b,text:h="Drop files or click to browse",annotation:y,icon:x,previewImages:j=!1,fallbackPreviewImage:k,inputRef:C,...z}){const N=l(g,d),w=n(null),[D,I]=i(!1),[T,E]=i(!1),[L,O]=i(null),[R,B]=t(z);function F(e){if(!w.current)return;const r=new DataTransfer;e&&r.items.add(e),O(e),w.current.files=r.files,w.current.dispatchEvent(new Event("change",{bubbles:!0}))}const S=!!(j&&L&&v(L,"image/*")),$=z.disabled||z.readOnly||u,A=L||j&&k;return e(m,{color:"var(--f-clr-grey-300)",disabled:!!L||$,children:r("div",{...B,tabIndex:0,role:"button","aria-disabled":!!L||$,className:c(N.zone,D&&N.hovering,b&&N.error,T&&N.rejected,A&&N.filled,z.disabled&&N.disabled,z.className),onClick:e=>{z.onClick?.(e),L||$||!w.current||w.current.click()},onDragOver:e=>{z.onDragOver?.(e),e.preventDefault(),$||I(!0)},onDragLeave:e=>{z.onDragLeave?.(e),I(!1)},onDrop:e=>{if(z.onDrop?.(e),$)return;e.preventDefault(),I(!1);const r=e.dataTransfer.files[0];r&&!v(r,z.accept||"")?(E(!0),setTimeout((()=>E(!1)),250)):r&&F(r)},children:[u&&e("div",{className:c(N.container,N.centered),children:e(f,{})}),A&&!u&&e(o,{children:r("div",{className:N.container,children:[r("div",{className:N.preview,children:[e(p,{type:"file"}),(S||k)&&e("img",{src:L?URL.createObjectURL(L):k,className:N.image})]}),L&&r("div",{className:N.footer,children:[r("div",{children:[e("div",{className:N.text,children:L.name}),e("div",{className:N.annotation,children:(U=L.size,(U/=1024)<1e3?`${U.toFixed(1)} KB`:`${(U/1024).toFixed(1)} MB`)})]}),e(a,{compact:!0,variant:"minimal",disabled:$,onClick:()=>F(null),children:e(p,{type:"close"})})]})]})}),r("div",{style:A||u?{opacity:0,pointerEvents:"none"}:void 0,className:c(N.container,N.centered),children:[e("div",{className:N.icon,children:x||e(p,{type:"upload"})}),e("div",{className:N.text,children:h}),y&&e("div",{className:N.annotation,children:y})]}),e("input",{...R,ref:s(w,C),type:"file",disabled:z.disabled||u,"aria-invalid":!!b,className:N.input,onChange:e=>{z.onChange?.(e),O(e.target.files?.[0]||null)}})]})});var U}export{u as default};
//# sourceMappingURL=drop-zone.js.map