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

Craft AI-driven interfaces effortlessly

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