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"),n=require("../../chunks/module-chunk.js"),r=require("ant-design-vue"),c=require("../../_util/hooks/use-state.js"),L=require("../context.js"),O=require("../SilentUploader.js"),R=require("./FileListCard.js"),V=require("../../chunks/helper-chunk.js");function j(e){return typeof e=="function"||Object.prototype.toString.call(e)==="[object Object]"&&!l.isVNode(e)}const p=1,k=l.defineComponent({name:"AXAttachmentsFileList",__name:"FileList",props:{prefixCls:{type:String,required:!0},items:{type:Array,required:!0},onRemove:{type:Function,required:!0},overflow:{type:String,required:!1},upload:{type:Object,required:!0},imageProps:{type:Object,required:!1},listClassName:{type:String,required:!1},listStyle:{type:Object,required:!1},itemClassName:{type:String,required:!1},itemStyle:{type:Object,required:!1},uploadClassName:{type:String,required:!1},uploadStyle:{type:Object,required:!1}},setup(e,{expose:v}){v();const a=l.computed(()=>`${e.prefixCls}-list`),u=l.useTemplateRef("file-list-container"),[F,d]=c.default(!1),y=L.useAttachmentContextInject();l.watchEffect(()=>{d(!0),l.onWatcherCleanup(()=>{d(!1)})});const[x,f]=c.default(!1),[w,m]=c.default(!1),h=()=>{const t=u.value;t&&(e.overflow==="scrollX"?(f(Math.abs(t.scrollLeft)>=p),m(t.scrollWidth-t.clientWidth-Math.abs(t.scrollLeft)>=p)):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 i=u.value;i&&i.scrollTo({left:i.scrollLeft+t*i.clientWidth,behavior:"smooth"})},S=()=>{g(-1)},q=()=>{g(1)},C=(t,i)=>{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=()=>i()},N=(t,i)=>{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=()=>i()};return()=>{let t;return l.createVNode("div",{class:n.classnames(a.value,{[`${a.value}-overflow-${e.overflow}`]:e.overflow,[`${a.value}-overflow-ping-start`]:x.value,[`${a.value}-overflow-ping-end`]:w.value},e.listClassName),ref:"file-list-container",onScroll:h,style:e.listStyle},[l.createVNode(l.TransitionGroup,{onEnter:C,onLeave:N,css:!1},j(t=e.items.map(i=>l.createVNode(R.default,{key:i.uid,prefixCls:e.prefixCls,item:i,onRemove:e.onRemove,className:n.classnames(e.itemClassName),imageProps:e.imageProps,style:{...e.itemStyle}},null)))?t:{default:()=>[t]}),!y.value.disabled&&l.createVNode(O.default,{upload:e.upload,children:l.createVNode(r.Button,{class:n.classnames(e.uploadClassName,`${a.value}-upload-btn`),style:e.uploadStyle,type:"dashed"},{default:()=>[l.createVNode(n.PlusOutlined,{class:`${a.value}-upload-btn-icon`},null)]})},null),e.overflow==="scrollX"&&l.createVNode(l.Fragment,null,[l.createVNode(r.Button,{size:"small",shape:"circle",class:`${a.value}-prev-btn`,icon:l.createVNode(n.LeftOutlined,null,null),onClick:S},null),l.createVNode(r.Button,{size:"small",shape:"circle",class:`${a.value}-next-btn`,icon:l.createVNode(n.RightOutlined,null,null),onClick:q},null)])])}}}),E=V._export_sfc(k,[["__file","/Users/wangzhichao/办公/code/github/ant-design-x-vue-pure/ant-design-x-vue/src/attachments/FileList/FileList.vue"]]);exports.default=E;