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