@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,inputRef:k,...C}){const z=l(g,d),N=n(null),[D,w]=i(!1),[I,T]=i(!1),[E,L]=i(null),[O,R]=t(C);function B(e){if(!N.current)return;const r=new DataTransfer;e&&r.items.add(e),L(e),N.current.files=r.files,N.current.dispatchEvent(new Event("change",{bubbles:!0}))}const F=!!(j&&E&&v(E,"image/*")),S=C.disabled||C.readOnly||u;return e(m,{color:"var(--f-clr-grey-300)",disabled:!!E||S,children:r("div",{...R,tabIndex:0,role:"button","aria-disabled":!!E||S,className:c(z.zone,D&&z.hovering,b&&z.error,I&&z.rejected,E&&z.filled,C.disabled&&z.disabled,C.className),onClick:e=>{C.onClick?.(e),E||S||!N.current||N.current.click()},onDragOver:e=>{C.onDragOver?.(e),e.preventDefault(),S||w(!0)},onDragLeave:e=>{C.onDragLeave?.(e),w(!1)},onDrop:e=>{if(C.onDrop?.(e),S)return;e.preventDefault(),w(!1);const r=e.dataTransfer.files[0];r&&!v(r,C.accept||"")?(T(!0),setTimeout((()=>T(!1)),250)):r&&B(r)},children:[u&&e("div",{className:c(z.container,z.centered),children:e(f,{})}),E&&!u&&e(o,{children:r("div",{className:z.container,children:[r("div",{className:z.preview,children:[e(p,{type:"file"}),F&&e("img",{src:URL.createObjectURL(E),className:z.image})]}),r("div",{className:z.footer,children:[r("div",{children:[e("div",{className:z.text,children:E.name}),e("div",{className:z.annotation,children:($=E.size,($/=1024)<1e3?`${$.toFixed(1)} KB`:`${($/1024).toFixed(1)} MB`)})]}),e(a,{compact:!0,variant:"minimal",disabled:S,onClick:()=>B(null),children:e(p,{type:"close"})})]})]})}),r("div",{style:E||u?{opacity:0,pointerEvents:"none"}:void 0,className:c(z.container,z.centered),children:[e("div",{className:z.icon,children:x||e(p,{type:"upload"})}),e("div",{className:z.text,children:h}),y&&e("div",{className:z.annotation,children:y})]}),e("input",{...O,ref:s(N,k),type:"file",disabled:C.disabled||u,"aria-invalid":!!b,className:z.input,onChange:e=>{C.onChange?.(e),L(e.target.files?.[0]||null)}})]})});var $}export{u as default};
//# sourceMappingURL=drop-zone.js.map