@bothub-chat/ui/dist/components/dropzone-field/index.js

Bothub UI Components

import{__rest as e}from"tslib";import{jsxs as t,jsx as r}from"react/jsx-runtime";import a,{forwardRef as l,useId as i,useState as n,useCallback as s}from"react";import{Typography as o}from"../typography/index.js";import{DropzoneFieldStyled as p,DropzoneFieldLabels as d,DropzoneFieldRightLabelsContainer as c,DropzoneFieldRightLabel as m,DropzoneFieldInput as f,DropzoneFieldPlaceholder as h}from"./styled.js";const u=l((l,u)=>{var{leftLabel:g,rightLabels:v,placeholder:y,files:b,onChange:L,fullWidth:W=!1,disabled:D=!1,multiple:C=!0,accept:j}=l,w=e(l,["leftLabel","rightLabels","placeholder","files","onChange","fullWidth","disabled","multiple","accept"]);const x=i(),[A,M]=n(!1),O=s(e=>{null==L||L(e)},[L]),[T,F]=Array.isArray(b)?[b,O]:n([]),$=s(e=>{var t;const r=[...null!==(t=e.currentTarget.files)&&void 0!==t?t:[]];F(C?[...new Map([...r,...T].map(e=>[e.name,e])).values()]:[...r].slice(0,1))},[T,F,C]),k=s(e=>{var t;e.preventDefault();const r=[...null!==(t=e.dataTransfer.files)&&void 0!==t?t:[]].filter(e=>((e,t)=>!t||t.split(",").map(e=>e.trim()).some(t=>t.startsWith(".")?e.name.toLowerCase().endsWith(t.toLowerCase()):t.endsWith("/*")?e.type.startsWith(t.replace("/*","")):e.type===t))(e,j));F(C?[...new Map([...r,...T].map(e=>[e.name,e])).values()]:[...r].slice(0,1)),M(!1)},[T,F,C,j]),q=s(e=>{e.preventDefault(),M(!0)},[]),z=s(e=>{e.preventDefault(),M(!1)},[]);return t(p,Object.assign({onDrop:k,onDragOver:q,onDragLeave:z,$fullWidth:W,"data-dragged":A},w,{children:[t(d,{children:[g&&"string"==typeof g?r(o,{variant:"body-m-regular",children:g}):g,!!v&&r(c,{children:v.map((e,t)=>r(a.Fragment,{children:"string"==typeof e?r(m,{children:e}):e},t))})]}),r(f,{id:x,type:"file",multiple:C,accept:j,onChange:$,disabled:D,ref:u}),!!y&&r(h,{children:y})]}))});export{u as DropzoneField};