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

Bothub UI Components

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