You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
2 lines
4.8 KiB
2 lines
4.8 KiB
import{j as r}from"./markdown-vendor-BZI_VWzW.js";import{u as U,r as a}from"./data-vendor-BOGugMqL.js";import{g as Y}from"./react-vendor-CmPQC3tV.js";import{T as q,U as G,o as V,e as Z}from"./index-BxSU1Bs1.js";import"./arco-vendor-gN7EHfgO.js";const h=20,M=[{title:"image",assetType:"1"},{title:"video",assetType:"2"},{title:"template",assetType:"4"},{title:"character",assetType:"5"}];function A(o){const s=o;return s?.data?.list??s?.list??[]}function B(o){let s=o?.parentElement??null;for(;s!=null;){const g=window.getComputedStyle(s).overflowY;if((g==="auto"||g==="scroll")&&s.scrollHeight>s.clientHeight)return s;s=s.parentElement}return null}function J(o){const s=o?.id??o?.assetId;return s==null||s===""?null:String(s)}function te({tabIdPrefix:o}){const{t:s}=U(),[v,g]=Y(),[l,N]=a.useState("1"),[u,p]=a.useState([]),[b,j]=a.useState(1),[f,d]=a.useState(!0),[m,F]=a.useState(!1),[P,w]=a.useState(!1),[y,C]=a.useState(null),E=a.useRef(null),S=a.useRef(!1),i=a.useRef(0),I=a.useRef(async()=>{});a.useEffect(()=>{const e=v.get("type");e!=null&&M.some(t=>t.assetType===e)&&N(e)},[v]);const L=a.useCallback(e=>({assetType:l,page:e,pageSize:h}),[l]),_=a.useCallback(e=>l==="5"?q({page:e,pageSize:h}):G(L(e)),[L,l]);a.useEffect(()=>{let e=!1;i.current+=1;const t=i.current;return j(1),d(!0),p([]),F(!0),C(null),_(1).then(n=>{if(e||i.current!==t)return;const c=A(n);p(c),d(c.length>=h)}).catch(n=>{e||i.current!==t||(C(n instanceof Error?n:new Error(String(n))),p([]),d(!1))}).finally(()=>{!e&&i.current===t&&F(!1)}),()=>{e=!0}},[_,l]);const D=a.useCallback(async()=>{if(!f||S.current||m||P)return;S.current=!0,w(!0);const e=i.current,t=b+1;try{const n=await _(t);if(i.current!==e)return;const c=A(n);c.length===0?d(!1):(p(H=>[...H,...c]),j(t),d(c.length>=h))}catch{i.current===e&&d(!1)}finally{S.current=!1,w(!1)}},[_,f,m,P,b]);I.current=D,a.useEffect(()=>{const e=E.current;if(!e||!f||m)return;const t=B(e),n=new IntersectionObserver(c=>{c[0]?.isIntersecting&&I.current()},{root:t,rootMargin:"200px",threshold:0});return n.observe(e),()=>n.disconnect()},[f,m,u.length]);const z=a.useCallback(e=>{N(e),g(t=>{const n=new URLSearchParams(t);return n.set("type",String(e)),n},{replace:!0})},[g]),x=a.useCallback(async e=>{const t=e.assetId;t!=null&&await V({assetId:t})},[]),k=a.useCallback(async e=>{Z({id:e.id})},[]),R=a.useCallback(e=>{e.currentTarget.querySelector("video")?.play()},[]),T=a.useCallback(e=>{e.currentTarget.querySelector("video")?.pause()},[]),O=a.useMemo(()=>M.map(({title:e,assetType:t})=>({assetType:t,label:s(`pages.create.filters.${e}`)})),[s]),$=a.useMemo(()=>u.map(e=>{const t=J(e)??`row-${l}`;return l=="2"?r.jsx("li",{className:"myFavoritePanel__item",onClick:()=>void x(e),onMouseEnter:R,onMouseLeave:T,children:r.jsx("video",{className:"myFavoritePanel__media",src:e.asset.video,muted:!0,playsInline:!0,loop:!0,preload:"metadata",poster:e.asset.cover,"aria-hidden":!0})},t):l=="1"||l=="4"?r.jsx("li",{className:"myFavoritePanel__item",onClick:()=>void x(e),children:r.jsx("img",{className:"myFavoritePanel__media",src:e?.asset?.images?.[0],loading:"lazy"})},t):l=="5"?r.jsx("li",{className:"myFavoritePanel__item",onClick:()=>void k(e),children:r.jsx("img",{className:"myFavoritePanel__media",src:e.avatar,loading:"lazy"})},t):r.jsx("li",{className:"myFavoritePanel__item myFavoritePanel__item_empty",children:r.jsx("span",{className:"myFavoritePanel__emptyLabel",children:s("pages.create.panels.favorite.noPreview")})},t)}),[x,k,u,R,T,l,s]);return r.jsxs("div",{className:"createPage__panelShell myFavoritePanel",children:[r.jsx("div",{className:"createPage__subRow myFavoritePanel__subRow",children:r.jsx("div",{className:"createPage__filters",role:"group","aria-label":s("pages.create.filtersAria"),"data-active-tab":l,children:O.map(({assetType:e,label:t})=>r.jsx("button",{type:"button","data-type":e,"data-selected":l===e,"aria-pressed":l===e,className:classNames("createPage__filterPill",l===e&&"createPage__filterPill_active"),onClick:()=>z(e),children:t},e))})}),r.jsxs("section",{className:"createPage__panel createPage__panelScroll createPage__panel_below_filters",id:`${o}-panel-favorite`,role:"tabpanel","aria-labelledby":`${o}-tab-favorite`,children:[m&&u.length===0?r.jsx("p",{className:"createPage__panelStatus",children:s("common.loading")}):null,y?r.jsx("p",{className:"createPage__panelStatus createPage__panelStatus_error",children:y.message}):null,!m&&!y&&u.length===0?r.jsx("p",{className:"createPage__panelPlaceholder",children:s("pages.create.panels.favorite.placeholder")}):null,u.length>0?r.jsxs(r.Fragment,{children:[r.jsx("ul",{className:"myFavoritePanel__list",role:"list",children:$}),f?r.jsx("div",{ref:E,className:"myFavoritePanel__sentinel","aria-hidden":!0}):null,P?r.jsx("p",{className:"createPage__panelStatus myFavoritePanel__loadMore",children:s("common.loading")}):null]}):null]})]})}export{te as default};
|
|
//# sourceMappingURL=index-5rXb67Va.js.map
|
|
|