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
15 KiB
2 lines
15 KiB
import{j as s}from"./markdown-vendor-BZI_VWzW.js";import{u as R,r as e}from"./data-vendor-BOGugMqL.js";import{D as G}from"./arco-vendor-gN7EHfgO.js";import{K,L as Y,N as O,O as z,b as F,d as Z,p as V,n as W}from"./index-BxSU1Bs1.js";import{c as B}from"./imageDragTransfer-apm0lmHd.js";import{CharacterLibrarySections as J}from"./index-C3p15IZ-.js";import"./react-vendor-CmPQC3tV.js";function X({searchQuery:n,setSearchQuery:t,selectedCategoryId:r,setSelectedCategoryId:i,categories:p,categoryButtonLabel:o,searchAriaKey:b,categoryAriaKey:f,categoryAllKey:d}){const{t:S}=R(),[m,a]=e.useState(!1),l=e.useRef(null);return s.jsxs("div",{className:"materialLibraryToolbar",children:[s.jsxs("label",{className:"materialLibraryToolbar__search",children:[s.jsx("img",{className:"materialLibraryToolbar__searchIcon",src:new URL("/assets/ic_search-DREI2NzL.png",import.meta.url).href}),s.jsx("input",{className:"materialLibraryToolbar__searchInput",type:"search",placeholder:S("pages.create.inspiration.searchPlaceholder"),value:n,onChange:c=>t(c.target.value),"aria-label":S(b)})]}),s.jsx("div",{ref:l,children:s.jsx(G,{trigger:"click",position:"br",popupVisible:m,onVisibleChange:a,triggerProps:{style:{zIndex:2e3}},getPopupContainer:()=>l.current??document.body,droplist:s.jsxs("div",{className:"materialLibraryToolbar__categoryDropdown",role:"menu","aria-label":S(f),children:[s.jsx("button",{type:"button",className:["materialLibraryToolbar__categoryMenuItem",r===null?"materialLibraryToolbar__categoryMenuItem_active":""].filter(Boolean).join(" "),role:"menuitem",onClick:()=>{i(null),a(!1)},children:S(d)}),p.map(c=>{const y=c,_=y.id;return s.jsx("button",{type:"button",className:["materialLibraryToolbar__categoryMenuItem",r===_?"materialLibraryToolbar__categoryMenuItem_active":""].filter(Boolean).join(" "),role:"menuitem",onClick:()=>{i(typeof _=="number"?_:null),a(!1)},children:String(y.name??_)},String(_))})]}),children:s.jsxs("button",{type:"button",className:"materialLibraryToolbar__category","aria-label":S(f),"aria-expanded":m,"aria-haspopup":"menu",children:[s.jsx("span",{children:o}),s.jsx("img",{className:"materialLibraryToolbar__categoryIcon",src:new URL("/assets/ic_arrow_right_gray-DM6GPP4g.png",import.meta.url).href})]})})})]})}const ee="backgroundLibrary";function q(n){const r=n?.data?.list;return Array.isArray(r)?r:[]}function te(){const{t:n}=R(),[t,r]=e.useState(""),[i,p]=e.useState(""),[o,b]=e.useState(null),[f,d]=e.useState([]),[S,m]=e.useState([]),[a,l]=e.useState(!0),[c,y]=e.useState(!1),[_,C]=e.useState(1),[w,j]=e.useState(!0),L=e.useRef(!1),I=e.useRef(new Set),T=120;e.useEffect(()=>{K().then(g=>{const u=q(g);d([...u].sort((h,N)=>Number(h.sort??0)-Number(N.sort??0)))}).catch(()=>{d([])})},[]),e.useEffect(()=>{const g=window.setTimeout(()=>{p(t.trim())},300);return()=>window.clearTimeout(g)},[t]);const x=e.useCallback((g,u)=>{if(u&&(L.current||I.current.has(g)))return;u?(L.current=!0,y(!0)):(I.current.clear(),l(!0));const h={page:g,pageSize:T};o!=null&&(h.categoryId=o),i&&(h.keyword=i),Y(h).then(N=>{const M=q(N);m(k=>{if(!u)return M;const $=new Set(k.map(A=>String(A.id??""))),E=M.filter(A=>!$.has(String(A.id??"")));return E.length===0?k:[...k,...E]}),C(g),j(M.length>=T),I.current.add(g)}).catch(()=>{u||m([]),j(!1)}).finally(()=>{u?(L.current=!1,y(!1)):l(!1)})},[i,o]);e.useEffect(()=>{C(1),j(!0),x(1,!1)},[x]);const P=e.useCallback(()=>{a||c||!w||x(_+1,!0)},[x,w,a,c,_]),U=e.useMemo(()=>{if(o==null)return n("pages.create.inspiration.materialLibrary.categoryAll");const u=f.find(h=>h.id===o)?.name;return typeof u=="string"&&u?u:n("pages.create.inspiration.materialLibrary.categoryLabel")},[f,o,n]);return{searchQuery:t,setSearchQuery:r,selectedCategoryId:o,setSelectedCategoryId:b,categories:f,loading:a,hasMore:w,loadingMore:c,loadMore:P,list:S,categoryButtonLabel:U}}function re(n){let t=n?.parentElement??null;for(;t!=null;){const i=window.getComputedStyle(t).overflowY;if((i==="auto"||i==="scroll")&&t.scrollHeight>t.clientHeight)return t;t=t.parentElement}return null}function ae({loading:n,list:t,hasMore:r=!1,loadingMore:i=!1,onLoadMore:p}){const o=O(a=>a.requestAppendImageUrl),{t:b}=R(),f=e.useRef(null),d=e.useMemo(()=>B(),[]),S=(a,l)=>{d.startImageDrag({evt:a,dragUrl:l,previewUrl:l})},m=a=>{o(String(a.url??""))};return e.useEffect(()=>{if(!r||n||i||!p)return;const a=f.current;if(a==null)return;const l=re(a),c=new IntersectionObserver(y=>{y.some(_=>_.isIntersecting)&&p()},{root:l,rootMargin:"240px 0px",threshold:0});return c.observe(a),()=>c.disconnect()},[r,n,i,p]),e.useEffect(()=>{d.warmupPreviewImages(t.map(a=>String(a.url??"")))},[d,t]),e.useEffect(()=>()=>{d.dispose()},[d]),s.jsxs("div",{className:ee,children:[n?s.jsx("p",{className:"backgroundLibrary__status",children:b("common.loading")}):t.length===0?s.jsx("p",{className:"backgroundLibrary__status",children:b("pages.create.inspiration.materialLibrary.empty")}):s.jsx("div",{className:"backgroundLibrary__grid",children:t.map(a=>{const l=a;return s.jsxs("div",{className:"backgroundLibrary__card","aria-label":b("pages.create.inspiration.materialLibrary.useMaterialAria"),draggable:!0,onDragStart:c=>{S(c,String(l.url??""))},children:[s.jsx("img",{className:"backgroundLibrary__cardImage",src:String(l.url??"")}),s.jsx("div",{className:"backgroundLibrary__cardCtaBar",onClick:()=>{m(l)},children:b("pages.create.inspiration.materialLibrary.useMaterial")})]},String(l.id))})}),r?s.jsx("div",{className:"backgroundLibrary__sentinel",ref:f,"aria-hidden":!0}):null,i?s.jsx("p",{className:"backgroundLibrary__status",children:b("pages.explore.feed.loadingMore")}):null]})}const v="templateLibrary";function H(n){const r=n?.data?.list;return Array.isArray(r)?r:[]}function D(n,t){const r=t.find(i=>typeof n[i]=="string"&&String(n[i]).trim().length>0);return r?String(n[r]):""}function se(){const{t:n}=R(),[t,r]=e.useState(""),[i,p]=e.useState(""),[o,b]=e.useState(null),[f,d]=e.useState([]),[S,m]=e.useState([]),[a,l]=e.useState(!0),[c,y]=e.useState(!1),[_,C]=e.useState(1),[w,j]=e.useState(!0),L=e.useRef(!1),I=e.useRef(new Set),T=120;e.useEffect(()=>{z().then(g=>{const u=H(g);d([...u].sort((h,N)=>Number(h.sort??0)-Number(N.sort??0)))}).catch(()=>{d([])})},[]),e.useEffect(()=>{const g=window.setTimeout(()=>{p(t.trim())},300);return()=>window.clearTimeout(g)},[t]);const x=e.useCallback((g,u)=>{if(u&&(L.current||I.current.has(g)))return;u?(L.current=!0,y(!0)):(I.current.clear(),l(!0));const h={page:g,pageSize:T};o!=null&&(h.categoryId=o),i&&(h.keyword=i),F(h).then(N=>{const M=H(N);m(k=>{if(!u)return M;const $=new Set(k.map(A=>String(A.id??""))),E=M.filter(A=>!$.has(String(A.id??"")));return E.length===0?k:[...k,...E]}),C(g),j(M.length>=T),I.current.add(g)}).catch(()=>{u||m([]),j(!1)}).finally(()=>{u?(L.current=!1,y(!1)):l(!1)})},[i,o]);e.useEffect(()=>{C(1),j(!0),x(1,!1)},[x]);const P=e.useCallback(()=>{a||c||!w||x(_+1,!0)},[x,w,a,c,_]),U=e.useMemo(()=>{if(o==null)return n("pages.create.inspiration.templateLibrary.categoryAll");const g=f.find(h=>h.id===o);return D(g??{},["name","title"])||n("pages.create.inspiration.templateLibrary.categoryLabel")},[f,o,n]);return{searchQuery:t,setSearchQuery:r,selectedCategoryId:o,setSelectedCategoryId:b,categories:f,loading:a,list:S,categoryButtonLabel:U,hasMore:w,loadingMore:c,loadMore:P}}function ne(n){let t=n?.parentElement??null;for(;t!=null;){const i=window.getComputedStyle(t).overflowY;if((i==="auto"||i==="scroll")&&t.scrollHeight>t.clientHeight)return t;t=t.parentElement}return null}function ie({loading:n,list:t,hasMore:r=!1,loadingMore:i=!1,onLoadMore:p}){const{t:o}=R(),b=Z(m=>m.requestTemplateSelect),f=e.useRef(null),d=e.useMemo(()=>B(),[]),S=(m,a)=>{d.startImageDrag({evt:m,dragUrl:a,previewUrl:a})};return e.useEffect(()=>{if(!r||n||i||!p)return;const m=f.current;if(m==null)return;const a=ne(m),l=new IntersectionObserver(c=>{c.some(y=>y.isIntersecting)&&p()},{root:a,rootMargin:"240px 0px",threshold:0});return l.observe(m),()=>l.disconnect()},[r,n,i,p]),e.useEffect(()=>{d.warmupPreviewImages(t.map(m=>D(m,["coverUrl","showUrl","url","thumbUrl"])))},[d,t]),e.useEffect(()=>()=>{d.dispose()},[d]),s.jsxs("div",{className:v,children:[n?s.jsx("p",{className:`${v}__status`,children:o("common.loading")}):t.length===0?s.jsx("p",{className:`${v}__status`,children:o("pages.create.inspiration.templateLibrary.empty")}):s.jsx("div",{className:`${v}__grid`,children:t.map(m=>{const a=m,l=D(a,["coverUrl","showUrl","url","thumbUrl"]),c=D(a,["subtitle","scene","tag"]);return s.jsxs("button",{type:"button",className:`${v}__card`,draggable:!0,onDragStart:y=>{S(y,l)},onClick:()=>{b(a.id)},"aria-label":o("pages.create.inspiration.templateLibrary.useTemplateAria"),children:[s.jsx("span",{className:`${v}__cardImageWrap`,children:s.jsx("img",{className:`${v}__cardImage`,src:l})}),c?s.jsx("span",{className:`${v}__topTag`,children:c}):null,s.jsx("span",{className:`${v}__cardCta`,"aria-hidden":!0,children:s.jsx("span",{className:`${v}__cardCtaBar`,children:o("pages.create.inspiration.templateLibrary.useTemplate")})})]},String(a.id))})}),r?s.jsx("div",{className:`${v}__sentinel`,ref:f,"aria-hidden":!0}):null,i?s.jsx("p",{className:`${v}__status`,children:o("pages.explore.feed.loadingMore")}):null]})}const le="materialLibrary";function Q(n){const r=n?.data?.list;return Array.isArray(r)?r:[]}function oe(){const{t:n}=R(),[t,r]=e.useState(""),[i,p]=e.useState(""),[o,b]=e.useState(null),[f,d]=e.useState([]),[S,m]=e.useState([]),[a,l]=e.useState(!0),[c,y]=e.useState(!1),[_,C]=e.useState(1),[w,j]=e.useState(!0),L=e.useRef(!1),I=e.useRef(new Set),T=120;e.useEffect(()=>{V().then(g=>{const u=Q(g);d([...u].sort((h,N)=>Number(h.sort??0)-Number(N.sort??0)))}).catch(()=>{d([])})},[]),e.useEffect(()=>{const g=window.setTimeout(()=>{p(t.trim())},300);return()=>window.clearTimeout(g)},[t]);const x=e.useCallback((g,u)=>{if(u&&(L.current||I.current.has(g)))return;u?(L.current=!0,y(!0)):(I.current.clear(),l(!0));const h={page:g,pageSize:T};o!=null&&(h.categoryId=o),i&&(h.keyword=i),W(h).then(N=>{const M=Q(N);m(k=>{if(!u)return M;const $=new Set(k.map(A=>String(A.id??""))),E=M.filter(A=>!$.has(String(A.id??"")));return E.length===0?k:[...k,...E]}),C(g),j(M.length>=T),I.current.add(g)}).catch(()=>{u||m([]),j(!1)}).finally(()=>{u?(L.current=!1,y(!1)):l(!1)})},[i,o]);e.useEffect(()=>{C(1),j(!0),x(1,!1)},[x]);const P=e.useCallback(()=>{a||c||!w||x(_+1,!0)},[x,w,a,c,_]),U=e.useMemo(()=>{if(o==null)return n("pages.create.inspiration.materialLibrary.categoryAll");const u=f.find(h=>h.id===o)?.name;return typeof u=="string"&&u?u:n("pages.create.inspiration.materialLibrary.categoryLabel")},[f,o,n]);return{searchQuery:t,setSearchQuery:r,selectedCategoryId:o,setSelectedCategoryId:b,categories:f,loading:a,list:S,categoryButtonLabel:U,hasMore:w,loadingMore:c,loadMore:P}}function ce(n){let t=n?.parentElement??null;for(;t!=null;){const i=window.getComputedStyle(t).overflowY;if((i==="auto"||i==="scroll")&&t.scrollHeight>t.clientHeight)return t;t=t.parentElement}return null}function ue({loading:n,list:t,hasMore:r=!1,loadingMore:i=!1,onLoadMore:p}){const o=O(a=>a.requestAppendImageUrl),{t:b}=R(),f=e.useRef(null),d=e.useMemo(()=>B(),[]),S=(a,l)=>{d.startImageDrag({evt:a,dragUrl:l,previewUrl:l})},m=a=>{o(String(a.url??""))};return e.useEffect(()=>{if(!r||n||i||!p)return;const a=f.current;if(a==null)return;const l=ce(a),c=new IntersectionObserver(y=>{y.some(_=>_.isIntersecting)&&p()},{root:l,rootMargin:"240px 0px",threshold:0});return c.observe(a),()=>c.disconnect()},[r,n,i,p]),e.useEffect(()=>{d.warmupPreviewImages(t.map(a=>String(a.url??"")))},[d,t]),e.useEffect(()=>()=>{d.dispose()},[d]),s.jsxs("div",{className:le,children:[n?s.jsx("p",{className:"materialLibrary__status",children:b("common.loading")}):t.length===0?s.jsx("p",{className:"materialLibrary__status",children:b("pages.create.inspiration.materialLibrary.empty")}):s.jsx("div",{className:"materialLibrary__grid",children:t.map(a=>{const l=a;return s.jsxs("div",{className:"materialLibrary__card","aria-label":b("pages.create.inspiration.materialLibrary.useMaterialAria"),draggable:!0,onDragStart:c=>{S(c,String(l.url??""))},children:[s.jsx("img",{className:"materialLibrary__cardImage",src:String(l.url??"")}),s.jsx("div",{className:"materialLibrary__cardCtaBar","aria-hidden":!0,onClick:()=>{m(l)},children:b("pages.create.inspiration.materialLibrary.useMaterial")})]},String(l.id))})}),r?s.jsx("div",{className:"materialLibrary__sentinel",ref:f,"aria-hidden":!0}):null,i?s.jsx("p",{className:"materialLibrary__status",children:b("pages.explore.feed.loadingMore")}):null]})}function de(n="character"){const[t,r]=e.useState(n),i=e.useCallback(p=>{r(p)},[]);return{filter:t,selectFilter:i}}const ge=["character","characterAssets","background","templates"];function Se({tabIdPrefix:n}){const{t}=R(),{filter:r,selectFilter:i}=de("character"),p=oe(),o=te(),b=se(),f=r==="background"?o:r==="templates"?b:p,{searchQuery:d,setSearchQuery:S,selectedCategoryId:m,setSelectedCategoryId:a,categories:l,loading:c,list:y,categoryButtonLabel:_,hasMore:C,loadingMore:w,loadMore:j}=f;return s.jsx("div",{className:"createPage__panelShell createPage__singleTabWrap",children:s.jsxs("div",{className:"inspirationPanel",children:[s.jsxs("div",{className:["createPage__subRow","inspirationPanel__toolbar",r==="characterAssets"||r==="background"||r==="templates"?"inspirationPanel__toolbar_between":""].filter(Boolean).join(" "),children:[s.jsx("div",{className:"inspirationPanel__filters",role:"group","aria-label":t("pages.create.inspiration.filtersAria"),children:ge.map(L=>s.jsx("button",{type:"button",className:["inspirationPanel__filterPill",r===L?"inspirationPanel__filterPill_active":""].filter(Boolean).join(" "),onClick:()=>i(L),children:t(`pages.create.inspiration.filters.${L}`)},L))}),r==="characterAssets"||r==="background"||r==="templates"?s.jsx(X,{searchQuery:d,setSearchQuery:S,selectedCategoryId:m,setSelectedCategoryId:a,categories:l,categoryButtonLabel:_,searchAriaKey:r==="templates"?"pages.create.inspiration.templateLibrary.searchAria":"pages.create.inspiration.materialLibrary.searchAria",categoryAriaKey:r==="templates"?"pages.create.inspiration.templateLibrary.categoryAria":"pages.create.inspiration.materialLibrary.categoryAria",categoryAllKey:r==="templates"?"pages.create.inspiration.templateLibrary.categoryAll":"pages.create.inspiration.materialLibrary.categoryAll"}):null]}),s.jsx("section",{className:["createPage__panel","createPage__panelScroll","inspirationPanel__content",r==="characterAssets"||r==="background"||r==="templates"?"inspirationPanel__content_material":""].filter(Boolean).join(" "),id:`${n}-panel-inspiration`,role:"tabpanel","aria-labelledby":`${n}-tab-inspiration`,children:r==="character"?s.jsx(J,{showDiyEntry:!1}):r==="characterAssets"?s.jsx(ue,{loading:c,list:y,hasMore:C,loadingMore:w,onLoadMore:j}):r==="background"?s.jsx(ae,{loading:c,list:y,hasMore:C,loadingMore:w,onLoadMore:j}):r==="templates"?s.jsx(ie,{loading:c,list:y,hasMore:C,loadingMore:w,onLoadMore:j}):s.jsx("p",{className:"createPage__panelPlaceholder",children:t("pages.create.panels.inspiration.placeholder")})})]})})}export{Se as default};
|
|
//# sourceMappingURL=index-DABcdsMj.js.map
|
|
|