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 O}from"./arco-vendor-CAnKnMnO.js";import{bf as Y,bg as z,bh as G,bi as F,b as K,e as Z,k as V,bj as W}from"./index-CpDY2xe_.js";import{c as B}from"./imageDragTransfer-vBkaf40H.js";import{CharacterLibrarySections as J}from"./index-BIlzV-Wd.js";import"./react-vendor-wlKWdfEb.js";function X({searchQuery:n,setSearchQuery:t,selectedCategoryId:r,setSelectedCategoryId:i,categories:b,categoryButtonLabel:o,searchAriaKey:y,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,alt:""}),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(y)})]}),s.jsx("div",{ref:l,children:s.jsx(O,{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)}),b.map(c=>{const p=c,_=p.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(p.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,alt:""})]})})})]})}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,b]=e.useState(""),[o,y]=e.useState(null),[f,d]=e.useState([]),[S,m]=e.useState([]),[a,l]=e.useState(!0),[c,p]=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(()=>{Y().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(()=>{b(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,p(!0)):(I.current.clear(),l(!0));const h={page:g,pageSize:T};o!=null&&(h.categoryId=o),i&&(h.keyword=i),z(h).then(N=>{const M=q(N);m(k=>{if(!u)return M;const U=new Set(k.map(A=>String(A.id??""))),E=M.filter(A=>!U.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,p(!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,_]),$=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:y,categories:f,loading:a,hasMore:w,loadingMore:c,loadMore:P,list:S,categoryButtonLabel:$}}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:b}){const o=G(a=>a.requestAppendImageUrl),{t:y}=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||!b)return;const a=f.current;if(a==null)return;const l=re(a),c=new IntersectionObserver(p=>{p.some(_=>_.isIntersecting)&&b()},{root:l,rootMargin:"240px 0px",threshold:0});return c.observe(a),()=>c.disconnect()},[r,n,i,b]),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:y("common.loading")}):t.length===0?s.jsx("p",{className:"backgroundLibrary__status",children:y("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":y("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??""),alt:String(l.name??"")}),s.jsx("div",{className:"backgroundLibrary__cardCtaBar",onClick:()=>{m(l)},children:y("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:y("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,b]=e.useState(""),[o,y]=e.useState(null),[f,d]=e.useState([]),[S,m]=e.useState([]),[a,l]=e.useState(!0),[c,p]=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(()=>{F().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(()=>{b(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,p(!0)):(I.current.clear(),l(!0));const h={page:g,pageSize:T};o!=null&&(h.categoryId=o),i&&(h.keyword=i),K(h).then(N=>{const M=H(N);m(k=>{if(!u)return M;const U=new Set(k.map(A=>String(A.id??""))),E=M.filter(A=>!U.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,p(!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,_]),$=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:y,categories:f,loading:a,list:S,categoryButtonLabel:$,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:b}){const{t:o}=R(),y=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||!b)return;const m=f.current;if(m==null)return;const a=ne(m),l=new IntersectionObserver(c=>{c.some(p=>p.isIntersecting)&&b()},{root:a,rootMargin:"240px 0px",threshold:0});return l.observe(m),()=>l.disconnect()},[r,n,i,b]),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,["title","name"]),p=D(a,["subtitle","scene","tag"]);return s.jsxs("button",{type:"button",className:`${v}__card`,draggable:!0,onDragStart:_=>{S(_,l)},onClick:()=>{y(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,alt:c})}),p?s.jsx("span",{className:`${v}__topTag`,children:p}):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,b]=e.useState(""),[o,y]=e.useState(null),[f,d]=e.useState([]),[S,m]=e.useState([]),[a,l]=e.useState(!0),[c,p]=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(()=>{b(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,p(!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 U=new Set(k.map(A=>String(A.id??""))),E=M.filter(A=>!U.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,p(!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,_]),$=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:y,categories:f,loading:a,list:S,categoryButtonLabel:$,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:b}){const o=G(a=>a.requestAppendImageUrl),{t:y}=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||!b)return;const a=f.current;if(a==null)return;const l=ce(a),c=new IntersectionObserver(p=>{p.some(_=>_.isIntersecting)&&b()},{root:l,rootMargin:"240px 0px",threshold:0});return c.observe(a),()=>c.disconnect()},[r,n,i,b]),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:y("common.loading")}):t.length===0?s.jsx("p",{className:"materialLibrary__status",children:y("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":y("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??""),alt:String(l.name??"")}),s.jsx("div",{className:"materialLibrary__cardCtaBar","aria-hidden":!0,onClick:()=>{m(l)},children:y("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:y("pages.explore.feed.loadingMore")}):null]})}function de(n="character"){const[t,r]=e.useState(n),i=e.useCallback(b=>{r(b)},[]);return{filter:t,selectFilter:i}}const ge=["character","characterAssets","background","templates"];function Se({tabIdPrefix:n}){const{t}=R(),{filter:r,selectFilter:i}=de("character"),b=oe(),o=te(),y=se(),f=r==="background"?o:r==="templates"?y:b,{searchQuery:d,setSearchQuery:S,selectedCategoryId:m,setSelectedCategoryId:a,categories:l,loading:c,list:p,categoryButtonLabel:_,hasMore:C,loadingMore:w,loadMore:j}=f;return s.jsx("div",{className:"createPage__singleTabWrap",children:s.jsxs("div",{className:"inspirationPanel",children:[s.jsxs("div",{className:`inspirationPanel__toolbar${r==="characterAssets"||r==="background"||r==="templates"?" inspirationPanel__toolbar_between":""}`,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 inspirationPanel__content${r==="characterAssets"||r==="background"||r==="templates"?" inspirationPanel__content_material":""}`,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:p,hasMore:C,loadingMore:w,onLoadMore:j}):r==="background"?s.jsx(ae,{loading:c,list:p,hasMore:C,loadingMore:w,onLoadMore:j}):r==="templates"?s.jsx(ie,{loading:c,list:p,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-CATFjeTC.js.map
|
|
|