全新popiart网站 react项目重构
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.5 KiB

import{j as s}from"./markdown-vendor-DnN-_XEd.js";import{u as $,r as t}from"./data-vendor-DOiUz3Tw.js";import{g as q}from"./react-vendor-B8OyfHW2.js";import{bf as G,bg as U,o as V,f as H}from"./index-D1KhT7yD.js";import"./arco-vendor-Cm-ntj-q.js";const _=20,w=[{title:"image",assetType:"1"},{title:"video",assetType:"2"},{title:"template",assetType:"4"},{title:"character",assetType:"5"}];function R(o){const l=o;return l?.data?.list??l?.list??[]}function Y(o){const l=o?.id??o?.assetId;return l==null||l===""?null:String(l)}function W({tabIdPrefix:o}){const{t:l}=$(),[y,x]=q(),[r,S]=t.useState("1"),[m,f]=t.useState([]),[b,N]=t.useState(1),[g,c]=t.useState(!0),[u,j]=t.useState(!1),[v,F]=t.useState(!1),[h,C]=t.useState(null),I=t.useRef(null),P=t.useRef(!1),i=t.useRef(0),L=t.useRef(async()=>{});t.useEffect(()=>{const e=y.get("type");e!=null&&w.some(a=>a.assetType===e)&&S(e)},[y]);const k=t.useCallback(e=>({assetType:r,page:e,pageSize:_}),[r]),p=t.useCallback(e=>r==="5"?G({page:e,pageSize:_}):U(k(e)),[k,r]);t.useEffect(()=>{let e=!1;i.current+=1;const a=i.current;return N(1),c(!0),f([]),j(!0),C(null),p(1).then(n=>{if(e||i.current!==a)return;const d=R(n);f(d),c(d.length>=_)}).catch(n=>{e||i.current!==a||(C(n instanceof Error?n:new Error(String(n))),f([]),c(!1))}).finally(()=>{!e&&i.current===a&&j(!1)}),()=>{e=!0}},[p,r]);const T=t.useCallback(async()=>{if(!g||P.current||u||v)return;P.current=!0,F(!0);const e=i.current,a=b+1;try{const n=await p(a);if(i.current!==e)return;const d=R(n);d.length===0?c(!1):(f(O=>[...O,...d]),N(a),c(d.length>=_))}catch{i.current===e&&c(!1)}finally{P.current=!1,F(!1)}},[p,g,u,v,b]);L.current=T,t.useEffect(()=>{const e=I.current;if(!e||!g||u)return;const a=new IntersectionObserver(n=>{n[0]?.isIntersecting&&L.current()},{root:null,rootMargin:"200px",threshold:0});return a.observe(e),()=>a.disconnect()},[g,u,m.length]);const M=t.useCallback(e=>{S(e),x(a=>{const n=new URLSearchParams(a);return n.set("type",String(e)),n},{replace:!0})},[x]),E=t.useCallback(async e=>{const a=e.assetId;a!=null&&await V({assetId:a})},[]),A=t.useCallback(async e=>{H({id:e.id})},[]),D=t.useCallback(e=>{e.currentTarget.querySelector("video")?.play()},[]),z=t.useCallback(e=>{e.currentTarget.querySelector("video")?.pause()},[]);return s.jsxs("div",{className:"myFavoritePanel",children:[s.jsx("div",{className:"createPage__subRow myFavoritePanel__subRow",children:s.jsx("div",{className:"createPage__filters",role:"group","aria-label":l("pages.create.filtersAria"),"data-active-tab":r,children:w.map(({title:e,assetType:a})=>s.jsx("button",{type:"button","data-type":a,"data-selected":r===a,"aria-pressed":r===a,className:classNames("createPage__filterPill",r===a&&"createPage__filterPill_active"),onClick:()=>M(a),children:l(`pages.create.filters.${e}`)},a))})}),s.jsxs("section",{className:"createPage__panel createPage__panel_below_filters",id:`${o}-panel-favorite`,role:"tabpanel","aria-labelledby":`${o}-tab-favorite`,children:[u&&m.length===0?s.jsx("p",{className:"createPage__panelStatus",children:l("common.loading")}):null,h?s.jsx("p",{className:"createPage__panelStatus createPage__panelStatus_error",children:h.message}):null,!u&&!h&&m.length===0?s.jsx("p",{className:"createPage__panelPlaceholder",children:l("pages.create.panels.favorite.placeholder")}):null,m.length>0?s.jsxs(s.Fragment,{children:[s.jsx("ul",{className:"myFavoritePanel__list",role:"list",children:m.map(e=>{const a=Y(e)??`row-${r}`;return r=="2"?s.jsx("li",{className:"myFavoritePanel__item",onClick:()=>void E(e),onMouseEnter:D,onMouseLeave:z,children:s.jsx("video",{className:"myFavoritePanel__media",src:e.asset.video,muted:!0,playsInline:!0,loop:!0,preload:"metadata",poster:e.asset.cover,"aria-hidden":!0})},a):r=="1"||r=="4"?s.jsx("li",{className:"myFavoritePanel__item",onClick:()=>void E(e),children:s.jsx("img",{className:"myFavoritePanel__media",src:e?.asset?.images?.[0],alt:"",loading:"lazy"})},a):r=="5"?s.jsx("li",{className:"myFavoritePanel__item",onClick:()=>void A(e),children:s.jsx("img",{className:"myFavoritePanel__media",src:e.avatar,alt:"",loading:"lazy"})},a):s.jsx("li",{className:"myFavoritePanel__item myFavoritePanel__item_empty",children:s.jsx("span",{className:"myFavoritePanel__emptyLabel",children:l("pages.create.panels.favorite.noPreview")})},a)})}),g?s.jsx("div",{ref:I,className:"myFavoritePanel__sentinel","aria-hidden":!0}):null,v?s.jsx("p",{className:"createPage__panelStatus myFavoritePanel__loadMore",children:l("common.loading")}):null]}):null]})]})}export{W as default};
//# sourceMappingURL=index-Bp4wBagX.js.map