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.7 KiB
2 lines
4.7 KiB
import{j as t}from"./markdown-vendor-DnN-_XEd.js";import{u as H,r}from"./data-vendor-DOiUz3Tw.js";import{k as K,bc as Z}from"./index-D1KhT7yD.js";import{D as F}from"./arco-vendor-Cm-ntj-q.js";import"./react-vendor-B8OyfHW2.js";function D(u){const m=u;return m?.data?.list??m?.list??[]}const T=120;function $({onClose:u,onSelect:m,initialCategoryId:z=null}){const{t:n}=H(),N=r.useRef(null),S=r.useRef(null),[p,B]=r.useState(""),[f,O]=r.useState(""),[U,L]=r.useState([]),[h,I]=r.useState([]),[c,M]=r.useState(z),[w,_]=r.useState(!1),[C,v]=r.useState(1),[d,y]=r.useState(!0),[b,R]=r.useState(!1),k=r.useRef(!1),x=r.useRef(new Set);r.useEffect(()=>{const e=window.setTimeout(()=>{O(p.trim())},300);return()=>window.clearTimeout(e)},[p]),r.useEffect(()=>{let e=!1;return K().then(a=>{if(e)return;const i=D(a).sort((s,l)=>Number(s.sort??0)-Number(l.sort??0));I(i)}).catch(()=>{e||I([])}),()=>{e=!0}},[]);const g=r.useCallback((e,a)=>{if(a&&(k.current||x.current.has(e)))return;a?(k.current=!0,R(!0)):x.current.clear();let i=!1;const s={page:e,pageSize:T};return c!=null&&(s.categoryId=c),f&&(s.keyword=f),Z(s).then(l=>{if(i)return;const o=D(l);L(P=>{if(!a)return o;const q=new Set(P.map(j=>String(j.id??""))),A=o.filter(j=>!q.has(String(j.id??"")));return A.length===0?P:[...P,...A]}),v(e),y(o.length>=T),x.current.add(e)}).catch(()=>{!i&&!a&&L([]),y(!1)}).finally(()=>{i||a&&(k.current=!1,R(!1))}),()=>{i=!0}},[f,c]);r.useEffect(()=>(v(1),y(!0),g(1,!1)),[g]);const E=r.useCallback(()=>{b||!d||g(C+1,!0)},[g,d,b,C]);r.useEffect(()=>{if(!d)return;const e=S.current;if(!e)return;const a=e.parentElement;if(!a)return;const i=new IntersectionObserver(l=>{l.some(o=>o.isIntersecting)&&E()},{root:a,rootMargin:"240px 0px",threshold:0}),s=document.createElement("div");return s.style.height="1px",e.appendChild(s),i.observe(s),()=>{i.disconnect(),s.parentNode&&s.parentNode.removeChild(s)}},[d,E]);const G=r.useMemo(()=>{if(c==null)return n("pages.create.inspiration.materialLibrary.categoryAll");const e=h.find(a=>Number(a.id)===c);return String(e?.name??n("pages.create.inspiration.materialLibrary.categoryAll"))},[h,c,n]),V=e=>{m?.(e),u?.()};return t.jsx("div",{className:"materialPicker",children:t.jsxs("div",{className:"materialPicker__surface",children:[t.jsx("button",{type:"button",className:"materialPicker__close",onClick:()=>u?.(),"aria-label":n("dialog.common.closeAria"),children:t.jsx("img",{src:new URL("/assets/ic_close-C0Ltcj9g.png",import.meta.url).href,alt:""})}),t.jsxs("div",{className:"materialPicker__topBar",children:[t.jsx("h3",{className:"materialPicker__title",children:n("pages.create.inspiration.filters.characterAssets")}),t.jsxs("div",{className:"materialPicker__tools",children:[t.jsxs("label",{className:"materialPicker__search",children:[t.jsx("img",{className:"materialPicker__searchIcon",src:new URL("/assets/ic_search-DREI2NzL.png",import.meta.url).href,alt:""}),t.jsx("input",{className:"materialPicker__searchInput",type:"search",value:p,onChange:e=>{B(e.target.value)},placeholder:n("pages.characters.search_placeholder")})]}),t.jsx("div",{ref:N,children:t.jsx(F,{trigger:"click",position:"br",popupVisible:w,onVisibleChange:_,triggerProps:{style:{zIndex:3e3}},getPopupContainer:()=>N.current??document.body,droplist:t.jsxs("div",{className:"materialPicker__categoryDropdown",role:"menu","aria-label":n("pages.create.inspiration.materialLibrary.categoryLabel"),children:[t.jsx("button",{type:"button",className:c==null?"materialPicker__categoryItem materialPicker__categoryItem--active":"materialPicker__categoryItem",role:"menuitem",onClick:()=>{M(null),_(!1)},children:n("pages.create.inspiration.materialLibrary.categoryAll")}),h.map(e=>{const a=e.id,i=c===a;return t.jsx("button",{type:"button",className:i?"materialPicker__categoryItem materialPicker__categoryItem--active":"materialPicker__categoryItem",role:"menuitem",onClick:()=>{M(typeof a=="number"?a:null),_(!1)},children:String(e.name??e.id)},String(e.id))})]}),children:t.jsxs("button",{type:"button",className:"materialPicker__categoryButton","aria-expanded":w,"aria-haspopup":"menu",children:[t.jsx("span",{children:G}),t.jsx("img",{src:new URL("/assets/ic_arrow_right_gray-DM6GPP4g.png",import.meta.url).href,alt:""})]})})})]})]}),t.jsxs("div",{className:"materialPicker__grid",ref:S,children:[U.map((e,a)=>t.jsxs("button",{type:"button",className:"materialPicker__card",onClick:()=>{V(e)},children:[t.jsx("img",{className:"materialPicker__cardImage",src:String(e.url??e.icon??""),alt:String(e.name??"")}),t.jsx("span",{className:"materialPicker__useMask",children:n("pages.create.inspiration.materialLibrary.useMaterial")})]},String(e.id??a))),b?t.jsx("p",{className:"materialPicker__loadingMore",children:n("pages.explore.feed.loadingMore")}):null]})]})})}export{$ as default};
|
|
//# sourceMappingURL=index-HRnSMO45.js.map
|
|
|