ant-design-x-vue-next/lib/attachments/FileList/FileList.js

Ant Design X for Vue — community continuation aligned with @ant-design/x

"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),a=require("../../chunks/module-chunk.js"),u=require("ant-design-vue"),d=require("../../_util/hooks/use-state.js"),A=require("../context.js"),W=require("../SilentUploader.js"),B=require("./FileListCard.js");function X(o){return typeof o=="function"||Object.prototype.toString.call(o)==="[object Object]"&&!e.isVNode(o)}const N=1,z=e.defineComponent({name:"AXAttachmentsFileList",__name:"FileList",props:{prefixCls:null,items:null,onRemove:{type:Function},overflow:null,upload:null,imageProps:null,uploadNode:null,listClassName:null,listStyle:null,itemClassName:null,itemStyle:null,uploadClassName:null,uploadStyle:null},setup(o){const i=o,{prefixCls:p,items:m,onRemove:w,overflow:s,upload:C,uploadNode:S,listClassName:_,listStyle:L,itemClassName:b,uploadClassName:R,uploadStyle:V,itemStyle:E,imageProps:k}=i,n=e.computed(()=>`${p}-list`),f=e.useTemplateRef("file-list-container"),[H,h]=d.default(!1),T=A.useAttachmentContextInject(),$=e.computed(()=>!T.value.disabled&&(typeof i.upload.maxCount>"u"||i.upload.maxCount>i.items.length));e.watchEffect(()=>{h(!0),e.onWatcherCleanup(()=>{h(!1)})});const[O,g]=d.default(!1),[P,v]=d.default(!1),y=()=>{const t=f.value;t&&(s==="scrollX"?(g(Math.abs(t.scrollLeft)>=N),v(t.scrollWidth-t.clientWidth-Math.abs(t.scrollLeft)>=N)):s==="scrollY"&&(g(t.scrollTop!==0),v(t.scrollHeight-t.clientHeight!==t.scrollTop)))};e.watch([()=>s,()=>m.length],()=>{e.nextTick(()=>{y()})},{immediate:!0});const x=t=>{const l=f.value;l&&l.scrollTo({left:l.scrollLeft+t*l.clientWidth,behavior:"smooth"})},q=()=>{x(-1)},F=()=>{x(1)},M=(t,l)=>{const c=t.classList.contains("ant-attachment-list-card-type-preview")?[{width:"0px"},{width:"64px"}]:[{width:"0px"},{width:"236px"}],r=t.animate(c,{duration:300,easing:"ease",fill:"forwards"});r.onfinish=()=>l()},j=(t,l)=>{const c=t.classList.contains("ant-attachment-list-card-type-preview")?[{opacity:1,width:"64px",marginRight:"0px"},{opacity:0,width:"0px",marginRight:"-10px"}]:[{opacity:1,width:"236px",marginRight:"0px"},{opacity:0,width:"0px",marginRight:"-10px",paddingRight:"0px",paddingLeft:"0px"}],r=t.animate(c,{duration:300,easing:"ease",fill:"forwards"});r.onfinish=()=>l()};return()=>{let t;return e.createVNode("div",{class:a.classnames(n.value,{[`${n.value}-overflow-${s}`]:s,[`${n.value}-overflow-ping-start`]:O.value,[`${n.value}-overflow-ping-end`]:P.value},_),ref:"file-list-container",onScroll:y,style:L},[e.createVNode(e.TransitionGroup,{onEnter:M,onLeave:j,css:!1},X(t=m.map(l=>e.createVNode(B.default,{key:l.uid,prefixCls:p,item:l,onRemove:w,className:a.classnames(b),imageProps:k,type:l.cardType,style:{...E}},null)))?t:{default:()=>[t]}),e.createVNode(W.default,{upload:C,visible:$.value,children:S||e.createVNode(u.Button,{class:a.classnames(R,`${n.value}-upload-btn`),style:V,type:"dashed"},{default:()=>[e.createVNode(a.PlusOutlined,{class:`${n.value}-upload-btn-icon`},null)]})},null),s==="scrollX"&&e.createVNode(e.Fragment,null,[e.createVNode(u.Button,{size:"small",shape:"circle",class:`${n.value}-prev-btn`,icon:e.createVNode(a.LeftOutlined,null,null),onClick:q},null),e.createVNode(u.Button,{size:"small",shape:"circle",class:`${n.value}-next-btn`,icon:e.createVNode(a.RightOutlined,null,null),onClick:F},null)])])}}});exports.default=z;