全新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
3.7 KiB

import{j as a}from"./markdown-vendor-DnN-_XEd.js";import{u as S,r as t}from"./data-vendor-DOiUz3Tw.js";import{k as v,bc as w}from"./index-Bino_5y9.js";import{D as C}from"./arco-vendor-Cm-ntj-q.js";import"./react-vendor-B8OyfHW2.js";function f(l){const n=l;return n?.data?.list??n?.list??[]}function T({onClose:l,onSelect:n,initialCategoryId:k=null}){const{t:i}=S(),d=t.useRef(null),[o,b]=t.useState(""),[m,x]=t.useState(""),[P,g]=t.useState([]),[u,_]=t.useState([]),[s,h]=t.useState(k),[y,p]=t.useState(!1);t.useEffect(()=>{const e=window.setTimeout(()=>{x(o.trim())},300);return()=>window.clearTimeout(e)},[o]),t.useEffect(()=>{let e=!1;return v().then(r=>{if(e)return;const c=f(r).sort((L,I)=>Number(L.sort??0)-Number(I.sort??0));_(c)}).catch(()=>{e||_([])}),()=>{e=!0}},[]),t.useEffect(()=>{let e=!1;const r={page:1,pageSize:120};return s!=null&&(r.categoryId=s),m&&(r.keyword=m),w(r).then(c=>{e||g(f(c))}).catch(()=>{e||g([])}),()=>{e=!0}},[m,s]);const j=t.useMemo(()=>{if(s==null)return i("pages.create.inspiration.materialLibrary.categoryAll");const e=u.find(r=>Number(r.id)===s);return String(e?.name??i("pages.create.inspiration.materialLibrary.categoryAll"))},[u,s,i]),N=e=>{n?.(e),l?.()};return a.jsx("div",{className:"materialPicker",children:a.jsxs("div",{className:"materialPicker__surface",children:[a.jsx("button",{type:"button",className:"materialPicker__close",onClick:()=>l?.(),"aria-label":i("dialog.common.closeAria"),children:a.jsx("img",{src:new URL("/assets/ic_close-C0Ltcj9g.png",import.meta.url).href,alt:""})}),a.jsxs("div",{className:"materialPicker__topBar",children:[a.jsx("h3",{className:"materialPicker__title",children:i("pages.create.inspiration.filters.characterAssets")}),a.jsxs("div",{className:"materialPicker__tools",children:[a.jsxs("label",{className:"materialPicker__search",children:[a.jsx("img",{className:"materialPicker__searchIcon",src:new URL("/assets/ic_search-DREI2NzL.png",import.meta.url).href,alt:""}),a.jsx("input",{className:"materialPicker__searchInput",type:"search",value:o,onChange:e=>{b(e.target.value)},placeholder:i("pages.characters.search_placeholder")})]}),a.jsx("div",{ref:d,children:a.jsx(C,{trigger:"click",position:"br",popupVisible:y,onVisibleChange:p,triggerProps:{style:{zIndex:3e3}},getPopupContainer:()=>d.current??document.body,droplist:a.jsxs("div",{className:"materialPicker__categoryDropdown",role:"menu","aria-label":i("pages.create.inspiration.materialLibrary.categoryLabel"),children:[a.jsx("button",{type:"button",className:s==null?"materialPicker__categoryItem materialPicker__categoryItem--active":"materialPicker__categoryItem",role:"menuitem",onClick:()=>{h(null),p(!1)},children:i("pages.create.inspiration.materialLibrary.categoryAll")}),u.map(e=>{const r=e.id,c=s===r;return a.jsx("button",{type:"button",className:c?"materialPicker__categoryItem materialPicker__categoryItem--active":"materialPicker__categoryItem",role:"menuitem",onClick:()=>{h(typeof r=="number"?r:null),p(!1)},children:String(e.name??e.id)},String(e.id))})]}),children:a.jsxs("button",{type:"button",className:"materialPicker__categoryButton","aria-expanded":y,"aria-haspopup":"menu",children:[a.jsx("span",{children:j}),a.jsx("img",{src:new URL("/assets/ic_arrow_right_gray-DM6GPP4g.png",import.meta.url).href,alt:""})]})})})]})]}),a.jsx("div",{className:"materialPicker__grid",children:P.map((e,r)=>a.jsxs("button",{type:"button",className:"materialPicker__card",onClick:()=>{N(e)},children:[a.jsx("img",{className:"materialPicker__cardImage",src:String(e.url??e.icon??""),alt:String(e.name??"")}),a.jsx("span",{className:"materialPicker__useMask",children:i("pages.create.inspiration.materialLibrary.useMaterial")})]},String(e.id??r)))})]})})}export{T as default};
//# sourceMappingURL=index-_cA8iWpB.js.map