@blocklet/list 0.12.48 → 0.12.49

package/lib/assets/locale.js

@@ -10,7 +10,8 @@ const en = {
   common: {
     searchStore: 'Search the store',
     price: 'Price',
-    category: 'Category'
+    category: 'Category',
+    resourceType: 'Resource Type'
   },
   sort: {
     sort: 'Sort',
@@ -45,7 +46,8 @@ const zh = {
   common: {
     searchStore: '搜索商店内应用',
     price: '价格',
-    category: '类别'
+    category: '类别',
+    resourceType: '资源类型'
   },
   sort: {
     sort: '排序',

package/lib/base.js

@@ -42,6 +42,9 @@ function ListBase() {
   const sortOptions = (0, _utils.getSortOptions)(t);
   const sortLocale = ((_sortOptions$find = sortOptions.find(f => f.value === filters.sortBy)) === null || _sortOptions$find === void 0 ? void 0 : _sortOptions$find.name) || t('sort.sort');
   const categoryLocale = getCategoryLocale(filters.category);
+  const {
+    resourceType
+  } = filters || {};
   const priceLocale = (_priceOptions$find = priceOptions.find(price => price.value === filters.price)) === null || _priceOptions$find === void 0 ? void 0 : _priceOptions$find.name;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
     display: "flex",
@@ -100,6 +103,8 @@ function ListBase() {
             onDelete: () => {
               handlePrice(null);
             }
+          }), resourceType && /*#__PURE__*/(0, _jsxRuntime.jsx)(_filter2.CustomChip, {
+            label: "".concat(t('common.resourceType'), ": ").concat(resourceType)
           })]
         })]
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactErrorBoundary.ErrorBoundary, {

package/lib/components/filter/custom-chip.js

@@ -44,7 +44,7 @@ FilterChip.propTypes = {
   icon: _propTypes.default.element
 };
 FilterChip.defaultProps = {
-  onDelete: () => {},
+  onDelete: null,
   icon: null,
   label: null
 };

package/lib/index.es.js

@@ -1,13 +1,13 @@
-import { jsx as t, jsxs as h, Fragment as Ce } from "react/jsx-runtime";
+import { jsx as t, jsxs as f, Fragment as Ce } from "react/jsx-runtime";
 import { useTheme as pe } from "@mui/material/styles";
-import { css as Pe, Global as Be } from "@emotion/react";
+import { css as Pe, Global as Te } from "@emotion/react";
 import { styled as C } from "@arcblock/ux/lib/Theme";
-import $e from "@mui/icons-material/Sort";
-import { Button as Te, CircularProgress as W, MenuList as Re, useMediaQuery as ze, SvgIcon as Ie, Popper as _e, Grow as De, Paper as Ne, ClickAwayListener as Ae, MenuItem as Le, Chip as Me, Grid as de, Box as _, OutlinedInput as Oe, InputAdornment as le, Hidden as ae } from "@mui/material";
+import Be from "@mui/icons-material/Sort";
+import { Button as $e, CircularProgress as W, MenuList as Re, useMediaQuery as ze, SvgIcon as Ie, Popper as _e, Grow as De, Paper as Ne, ClickAwayListener as Ae, MenuItem as Le, Chip as Me, Grid as ue, Box as D, OutlinedInput as Oe, InputAdornment as le, Hidden as ae } from "@mui/material";
 import Fe from "@mui/icons-material/Face";
 import { ErrorBoundary as Ee } from "react-error-boundary";
-import { ErrorFallback as ue } from "@arcblock/ux/lib/ErrorBoundary";
-import { createContext as qe, useMemo as A, useState as F, useCallback as H, useEffect as E, useContext as je, forwardRef as Ge, useRef as L, memo as Ue, createElement as Ke, Fragment as We } from "react";
+import { ErrorFallback as de } from "@arcblock/ux/lib/ErrorBoundary";
+import { createContext as qe, useMemo as L, useState as F, useCallback as H, useEffect as E, useContext as je, forwardRef as Ge, useRef as M, memo as Ue, createElement as Ke, Fragment as We } from "react";
 import n from "prop-types";
 import { useReactive as He, useInfiniteScroll as Ve, useRequest as Qe, useSize as Je, useCreation as Xe, useDebounceFn as Ye } from "ahooks";
 import Ze from "lodash/orderBy";
@@ -25,8 +25,8 @@ import st from "@arcblock/ux/lib/Empty";
 import ct from "react-infinite-scroll-hook";
 import pt from "@mui/material/Box";
 import me from "@mui/material/Typography";
-import dt from "@mui/icons-material/Search";
-import ut from "@mui/icons-material/Close";
+import ut from "@mui/icons-material/Search";
+import dt from "@mui/icons-material/Close";
 import { createRoot as mt } from "react-dom/client";
 import { autocomplete as ft } from "@algolia/autocomplete-js";
 import { useHotkeys as ht } from "react-hotkeys-hook";
@@ -62,16 +62,17 @@ const yt = (e) => [
 function Ct(e, o) {
   let r;
   return function(...i) {
-    return r && clearTimeout(r), new Promise((c) => {
-      r = setTimeout(() => c(e(...i)), o);
+    return r && clearTimeout(r), new Promise((s) => {
+      r = setTimeout(() => s(e(...i)), o);
     });
   };
 }
-const Pt = Ct((e) => Promise.resolve(e), 300), Bt = {
+const Pt = Ct((e) => Promise.resolve(e), 300), Tt = {
   common: {
     searchStore: "Search the store",
     price: "Price",
-    category: "Category"
+    category: "Category",
+    resourceType: "Resource Type"
   },
   sort: {
     sort: "Sort",
@@ -101,11 +102,12 @@ const Pt = Ct((e) => Promise.resolve(e), 300), Bt = {
   autocomplete: {
     expandResult: 'Show {number} search results for "{name}" '
   }
-}, $t = {
+}, Bt = {
   common: {
     searchStore: "搜索商店内应用",
     price: "价格",
-    category: "类别"
+    category: "类别",
+    resourceType: "资源类型"
   },
   sort: {
     sort: "排序",
@@ -136,8 +138,8 @@ const Pt = Ct((e) => Promise.resolve(e), 300), Bt = {
     expandResult: "显示 {number} 条 “{name}” 的搜索结果 "
   }
 }, K = {
-  en: ie(Bt),
-  zh: ie($t)
+  en: ie(Tt),
+  zh: ie(Bt)
 }, fe = {
   filters: n.shape({
     keyword: n.string,
@@ -145,7 +147,8 @@ const Pt = Ct((e) => Promise.resolve(e), 300), Bt = {
     sortDirection: n.string,
     price: n.string,
     category: n.string,
-    developer: n.string
+    developer: n.string,
+    resourceType: n.string
   }),
   wrapChildren: n.func,
   extraFilter: n.func,
@@ -166,7 +169,7 @@ const Pt = Ct((e) => Promise.resolve(e), 300), Bt = {
   wrapChildren: (e) => e,
   extraFilter: (e) => e,
   baseSearch: !1
-}, T = {
+}, R = {
   nameAsc: "title",
   nameDesc: "title",
   popularity: "stats.downloads",
@@ -177,47 +180,47 @@ const Pt = Ct((e) => Promise.resolve(e), 300), Bt = {
   blockletsPath: "/api/v2/blocklets.json",
   categoriesPath: "/api/blocklets/categories",
   cacheSize: 100
-}, ge = qe({}), { Provider: Tt, Consumer: Sr } = ge;
+}, ge = qe({}), { Provider: $t, Consumer: Sr } = ge;
 function V({
   filters: e,
   children: o,
   endpoint: r,
   locale: l,
   blockletRender: i,
-  onFilterChange: c,
+  onFilterChange: s,
   onSearchSelect: k,
-  extraFilter: g,
-  wrapChildren: d,
+  extraFilter: h,
+  wrapChildren: u,
   baseSearch: b,
   serverVersion: m,
   storeVersion: P
 }) {
-  const B = {};
-  m && (B["x-blocklet-server-version"] = m), P && (B["x-blocklet-store-version"] = P);
-  const x = A(() => et.create({
+  const T = {};
+  m && (T["x-blocklet-server-version"] = m), P && (T["x-blocklet-store-version"] = P);
+  const x = L(() => et.create({
     baseURL: r,
-    headers: B
-  }), [r]), y = A(() => ({ sortBy: "popularity", sortDirection: "desc", ...e }), [e]), $ = y.category, p = He({
-    currentPage: T.currentPage,
-    pageSize: wt() ? T.mobilePageSize : T.pageSize,
-    defaultCurrentPage: T.defaultCurrentPage
-  }), [s, w] = F(null), {
-    data: f = { list: [], total: 0 },
-    loading: N,
+    headers: T
+  }), [r]), g = L(() => ({ sortBy: "popularity", sortDirection: "desc", ...e }), [e]), B = g.category, p = He({
+    currentPage: R.currentPage,
+    pageSize: wt() ? R.mobilePageSize : R.pageSize,
+    defaultCurrentPage: R.defaultCurrentPage
+  }), [c, w] = F(null), {
+    data: y = { list: [], total: 0 },
+    loading: $,
     loadMore: v,
-    loadingMore: I
+    loadingMore: _
   } = Ve(
     async (a) => {
-      var R;
-      const u = {
-        ...y,
-        sortBy: T[y.sortBy],
-        page: vt(((R = a == null ? void 0 : a.list) == null ? void 0 : R.length) || 0, p.pageSize),
+      var z;
+      const d = {
+        ...g,
+        sortBy: R[g.sortBy],
+        page: vt(((z = a == null ? void 0 : a.list) == null ? void 0 : z.length) || 0, p.pageSize),
         pageSize: p.pageSize
       };
       w(null);
-      const { data: S = {} } = await x.get(T.blockletsPath, {
-        params: u
+      const { data: S = {} } = await x.get(R.blockletsPath, {
+        params: d
       });
       return { list: (S == null ? void 0 : S.dataList) || [], total: (S == null ? void 0 : S.total) || 0 };
     },
@@ -235,28 +238,28 @@ function V({
     run: ke
   } = Qe(
     async () => {
-      const { data: a } = await x.get(T.categoriesPath);
+      const { data: a } = await x.get(R.categoriesPath);
       return Array.isArray(a) ? a : [];
     },
     { manual: !0 }
-  ), U = A(() => Ze(G || [], [(u) => u.name], ["asc"]), [G]), re = H(
-    (a, u) => {
+  ), U = L(() => Ze(G || [], [(d) => d.name], ["asc"]), [G]), re = H(
+    (a, d) => {
       const S = K[l] ? K[l][a] : K.en[a];
-      return kt(S, u);
+      return kt(S, d);
     },
     [l]
-  ), oe = A(() => {
-    let a = f.list || [];
-    return a = g(a), a;
-  }, [f, g]), we = A(() => xt(U, l), [U, l]), ve = bt(re), Se = {
-    errors: { fetchBlockletsError: s, fetchCategoriesError: be },
-    loadings: { fetchBlockletsLoading: N, fetchCategoriesLoading: xe, loadingMore: I },
+  ), oe = L(() => {
+    let a = y.list || [];
+    return a = h(a), a;
+  }, [y, h]), we = L(() => xt(U, l), [U, l]), ve = bt(re), Se = {
+    errors: { fetchBlockletsError: c, fetchCategoriesError: be },
+    loadings: { fetchBlockletsLoading: $, fetchCategoriesLoading: xe, loadingMore: _ },
     endpoint: r,
     blockletList: oe,
-    wrapChildren: d,
+    wrapChildren: u,
     t: re,
-    filters: y,
-    selectedCategory: $,
+    filters: g,
+    selectedCategory: B,
     categoryList: U,
     blockletRender: i,
     locale: l,
@@ -264,39 +267,39 @@ function V({
     priceOptions: ve,
     storeApi: x,
     baseSearch: b,
-    hasNextPage: f.list.length < f.total,
+    hasNextPage: y.list.length < y.total,
     handleSort: (a) => {
-      const u = {
-        ...y,
+      const d = {
+        ...g,
         sortBy: a,
         sortDirection: a === "nameAsc" ? "asc" : "desc"
       };
-      c(u);
+      s(d);
     },
     handleKeyword: (a) => {
-      const u = { ...y, keyword: a || void 0 };
-      c(u);
+      const d = { ...g, keyword: a || void 0 };
+      s(d);
     },
     handlePrice: (a) => {
-      const u = {
-        ...y,
-        price: a === y.price ? void 0 : a
+      const d = {
+        ...g,
+        price: a === g.price ? void 0 : a
       };
-      c(u);
+      s(d);
     },
     handleCategory: (a) => {
-      let u = a;
-      (a === "all" || a === y.category) && (u = void 0);
-      const S = { ...y, category: u };
-      c(S);
+      let d = a;
+      (a === "all" || a === g.category) && (d = void 0);
+      const S = { ...g, category: d };
+      s(S);
     },
     handleDeveloper: (a) => {
-      const u = { ...y, owner: a || void 0 };
-      c(u);
+      const d = { ...g, owner: a || void 0 };
+      s(d);
     },
     handlePage: (a) => {
-      const u = { ...y, currentPage: a };
-      c(u);
+      const d = { ...g, currentPage: a };
+      s(d);
     },
     loadMore: () => {
       v();
@@ -304,38 +307,38 @@ function V({
     getCategoryLocale: (a) => {
       if (!a)
         return null;
-      let u = null;
-      const S = G.find((R) => R._id === a);
-      return S && (u = S.locales[l]), u;
+      let d = null;
+      const S = G.find((z) => z._id === a);
+      return S && (d = S.locales[l]), d;
     },
     get developerName() {
-      var u, S;
-      return ((S = (u = oe.find((R) => {
+      var d, S;
+      return ((S = (d = oe.find((z) => {
         var ne;
-        return ((ne = R == null ? void 0 : R.owner) == null ? void 0 : ne.did) === y.owner;
-      })) == null ? void 0 : u.owner) == null ? void 0 : S.name) || "";
+        return ((ne = z == null ? void 0 : z.owner) == null ? void 0 : ne.did) === g.owner;
+      })) == null ? void 0 : d.owner) == null ? void 0 : S.name) || "";
     },
     handleSearchSelect: k
   };
   return E(() => {
     ke();
-  }, [r]), /* @__PURE__ */ t(Tt, { value: Se, children: o });
+  }, [r]), /* @__PURE__ */ t($t, { value: Se, children: o });
 }
 V.propTypes = {
   ...fe,
   children: n.any.isRequired
 };
 V.defaultProps = he;
-function z() {
+function I() {
   const e = je(ge);
   return e || {};
 }
-const Rt = C(Te)`
+const Rt = C($e)`
   border-radius: 4px;
-`, Q = Ge(({ children: e, rounded: o, loading: r, disabled: l, ...i }, c) => /* @__PURE__ */ t(
+`, Q = Ge(({ children: e, rounded: o, loading: r, disabled: l, ...i }, s) => /* @__PURE__ */ t(
   Rt,
   {
-    ref: c,
+    ref: s,
     disableElevation: !0,
     disabled: l || r,
     ...i,
@@ -355,32 +358,32 @@ Q.defaultProps = {
   loading: !1,
   disabled: !1
 };
-function J({ title: e, value: o, icon: r, prepend: l, options: i, onChange: c, itemRender: k, ...g }) {
-  const d = L(null), b = pe(), [m, P] = F(!1), [B, x] = F(o !== null ? o : ""), y = ze(b.breakpoints.down("sm"));
+function J({ title: e, value: o, icon: r, prepend: l, options: i, onChange: s, itemRender: k, ...h }) {
+  const u = M(null), b = pe(), [m, P] = F(!1), [T, x] = F(o !== null ? o : ""), g = ze(b.breakpoints.down("sm"));
   E(() => {
     x(o !== null ? o : "");
   }, [o]);
-  const $ = H(() => {
+  const B = H(() => {
     P(!1);
   }, []), p = H(() => {
     P(!0);
   }, []);
-  function s(f) {
-    x(f.value), c(f.value), y && $();
+  function c(y) {
+    x(y.value), s(y.value), g && B();
   }
-  function w(f) {
-    return f === B;
+  function w(y) {
+    return y === T;
   }
-  return /* @__PURE__ */ h(Ce, { children: [
-    /* @__PURE__ */ h(
+  return /* @__PURE__ */ f(Ce, { children: [
+    /* @__PURE__ */ f(
       zt,
       {
-        ref: d,
+        ref: u,
         onClick: p,
         variant: "outlined",
         size: "small",
-        className: ["my-select__selector", nt(B) ? "" : "my-select__selector--active"].join(" "),
-        ...g,
+        className: ["my-select__selector", nt(T) ? "" : "my-select__selector--active"].join(" "),
+        ...h,
         children: [
           /* @__PURE__ */ t("div", { className: "my-select__icon", children: r }),
           e,
@@ -388,17 +391,17 @@ function J({ title: e, value: o, icon: r, prepend: l, options: i, onChange: c, i
         ]
       }
     ),
-    /* @__PURE__ */ t(_e, { open: m, anchorEl: d.current, transition: !0, style: { zIndex: "9999" }, children: ({ TransitionProps: f, placement: N }) => /* @__PURE__ */ t(
+    /* @__PURE__ */ t(_e, { open: m, anchorEl: u.current, transition: !0, style: { zIndex: "9999" }, children: ({ TransitionProps: y, placement: $ }) => /* @__PURE__ */ t(
       De,
       {
-        ...f,
-        style: { transformOrigin: N === "bottom" ? "center top" : "center bottom" },
-        children: /* @__PURE__ */ t(Ne, { children: /* @__PURE__ */ t(Ae, { onClickAway: $, children: /* @__PURE__ */ h(It, { autoFocusItem: m, onMouseEnter: p, onMouseLeave: $, children: [
+        ...y,
+        style: { transformOrigin: $ === "bottom" ? "center top" : "center bottom" },
+        children: /* @__PURE__ */ t(Ne, { children: /* @__PURE__ */ t(Ae, { onClickAway: B, children: /* @__PURE__ */ f(It, { autoFocusItem: m, onMouseEnter: p, onMouseLeave: B, children: [
           l,
           i.map((v) => k ? k(v) : /* @__PURE__ */ t(
             Le,
             {
-              onClick: () => s(v),
+              onClick: () => c(v),
               className: [
                 "my-select__option",
                 w(v.value) ? "my-select__option--active" : ""
@@ -478,8 +481,8 @@ const zt = C(Q)`
     }
   }
 `;
-function D({ options: e, onChange: o, title: r, value: l }) {
-  return /* @__PURE__ */ h(_t, { children: [
+function A({ options: e, onChange: o, title: r, value: l }) {
+  return /* @__PURE__ */ f(_t, { children: [
     /* @__PURE__ */ t("div", { className: "title", children: r }),
     /* @__PURE__ */ t("div", { className: "list", children: e.map((i) => /* @__PURE__ */ t(
       "div",
@@ -522,24 +525,24 @@ const _t = C("div")`
     font-weight: bold;
   }
 `;
-D.propTypes = {
+A.propTypes = {
   title: n.string.isRequired,
   options: n.array.isRequired,
   onChange: n.func.isRequired,
   value: n.oneOfType([n.string, n.number])
 };
-D.defaultProps = {
+A.defaultProps = {
   value: null
 };
 function X() {
-  const { selectedCategory: e, handleCategory: o, t: r, handlePrice: l, filters: i, categoryOptions: c, priceOptions: k } = z(), [g, d] = F(!1), b = (m, P) => {
-    m === "category" && o(P), m === "price" && l(P), d(!1);
+  const { selectedCategory: e, handleCategory: o, t: r, handlePrice: l, filters: i, categoryOptions: s, priceOptions: k } = I(), [h, u] = F(!1), b = (m, P) => {
+    m === "category" && o(P), m === "price" && l(P), u(!1);
   };
-  return /* @__PURE__ */ h(Dt, { children: [
-    /* @__PURE__ */ t(it, { variant: "outlined", className: "filter-button", onClick: () => d(!0), children: /* @__PURE__ */ t(lt, { className: "filter-icon", fontSize: "small" }) }),
-    /* @__PURE__ */ h(at, { fullWidth: !0, title: "", open: g, onClose: () => d(!1), children: [
+  return /* @__PURE__ */ f(Dt, { children: [
+    /* @__PURE__ */ t(it, { variant: "outlined", className: "filter-button", onClick: () => u(!0), children: /* @__PURE__ */ t(lt, { className: "filter-icon", fontSize: "small" }) }),
+    /* @__PURE__ */ f(at, { fullWidth: !0, title: "", open: h, onClose: () => u(!1), children: [
       /* @__PURE__ */ t(
-        D,
+        A,
         {
           title: r("common.price"),
           options: k,
@@ -549,11 +552,11 @@ function X() {
           }
         }
       ),
-      c.length > 0 && /* @__PURE__ */ t("div", { style: { marginTop: "16px" }, children: /* @__PURE__ */ t(
-        D,
+      s.length > 0 && /* @__PURE__ */ t("div", { style: { marginTop: "16px" }, children: /* @__PURE__ */ t(
+        A,
         {
           title: r("common.category"),
-          options: c,
+          options: s,
           value: e,
           onChange: (m) => {
             b("category", m);
@@ -586,27 +589,26 @@ const Nt = C("div")`
     padding: 4px 0;
   }
 `;
-function M({ label: e, icon: o, onDelete: r, ...l }) {
+function N({ label: e, icon: o, onDelete: r, ...l }) {
   return e ? /* @__PURE__ */ t(Nt, { ...l, children: /* @__PURE__ */ t(Me, { color: "primary", "data-cy": "filter-tag", icon: o, label: e, onDelete: r }) }) : null;
 }
-M.propTypes = {
+N.propTypes = {
   label: n.string,
   onDelete: n.func,
   icon: n.element
 };
-M.defaultProps = {
-  onDelete: () => {
-  },
+N.defaultProps = {
+  onDelete: null,
   icon: null,
   label: null
 };
 function se() {
-  const { t: e } = z();
+  const { t: e } = I();
   return /* @__PURE__ */ t(me, { style: { textAlign: "center" }, variant: "subtitle2", children: e("blocklet.noResults") });
 }
 function O({ filterTip: e, keywordTip: o }) {
-  const { t: r, locale: l } = z(), i = () => l === "zh" ? "、" : " , ";
-  return /* @__PURE__ */ h(pt, { className: "tips", children: [
+  const { t: r, locale: l } = I(), i = () => l === "zh" ? "、" : " , ";
+  return /* @__PURE__ */ f(pt, { className: "tips", children: [
     /* @__PURE__ */ t("span", { style: { marginRight: "16px" }, children: r("blocklet.emptyTip") }),
     e && /* @__PURE__ */ t("span", { children: r("blocklet.filterTip") }),
     e && o && i(),
@@ -622,14 +624,14 @@ O.defaultProps = {
   keywordTip: !1
 };
 function j({ primaryStart: e, primaryEnd: o, filter: r }) {
-  return /* @__PURE__ */ h(me, { variant: "subtitle2", children: [
+  return /* @__PURE__ */ f(me, { variant: "subtitle2", children: [
     /* @__PURE__ */ t("span", { children: e }),
-    /* @__PURE__ */ h("span", { className: "primary", children: [
+    /* @__PURE__ */ f("span", { className: "primary", children: [
       " ",
       r,
       " "
     ] }),
-    /* @__PURE__ */ h("span", { children: [
+    /* @__PURE__ */ f("span", { children: [
       o,
       " "
     ] })
@@ -645,81 +647,81 @@ function Y({ blocklets: e, ...o }) {
     blockletRender: r,
     errors: l,
     loadings: i,
-    selectedCategory: c,
+    selectedCategory: s,
     getCategoryLocale: k,
-    filters: g,
-    t: d,
+    filters: h,
+    t: u,
     hasNextPage: b,
     loadMore: m,
     endpoint: P
-  } = z(), B = L(null), x = Je(B.current), y = Xe(() => x ? x.width > 900 ? 12 : x.width > 600 ? 8 : 4 : 0, [x]), $ = !!c || !!g.price, [p] = ct({
+  } = I(), T = M(null), x = Je(T.current), g = Xe(() => x ? x.width > 900 ? 12 : x.width > 600 ? 8 : 4 : 0, [x]), B = !!s || !!h.price, [p] = ct({
     loading: i.fetchBlockletsLoading || i.loadingMore,
     hasNextPage: b,
     onLoadMore: m
   });
   if (l.fetchBlockletsError)
     return /* @__PURE__ */ t(
-      ue,
+      de,
       {
         error: new Error(`Failed to fetch blocklets from ${P}: ${l.fetchBlockletsError.message}`)
       }
     );
   if (i.fetchBlockletsLoading)
-    return /* @__PURE__ */ t(_, { height: 60, display: "flex", alignItems: "center", justifyContent: "center", children: /* @__PURE__ */ t(W, {}) });
-  if (g.keyword && $ && e.length === 0)
-    return /* @__PURE__ */ h(q, { children: [
+    return /* @__PURE__ */ t(D, { height: 60, display: "flex", alignItems: "center", justifyContent: "center", children: /* @__PURE__ */ t(W, {}) });
+  if (h.keyword && B && e.length === 0)
+    return /* @__PURE__ */ f(q, { children: [
       /* @__PURE__ */ t(
         j,
         {
-          primaryStart: d("blocklet.noBlockletPart1"),
-          primaryEnd: d("blocklet.noBlockletPart2"),
-          filter: g.keyword
+          primaryStart: u("blocklet.noBlockletPart1"),
+          primaryEnd: u("blocklet.noBlockletPart2"),
+          filter: h.keyword
         }
       ),
       /* @__PURE__ */ t(O, { keywordTip: !0, filterTip: !0 })
     ] });
-  if (g.keyword && e.length === 0)
-    return /* @__PURE__ */ h(q, { children: [
+  if (h.keyword && e.length === 0)
+    return /* @__PURE__ */ f(q, { children: [
       /* @__PURE__ */ t(
         j,
         {
-          primaryStart: d("blocklet.noBlockletPart1"),
-          primaryEnd: d("blocklet.noBlockletPart2"),
-          filter: g.keyword
+          primaryStart: u("blocklet.noBlockletPart1"),
+          primaryEnd: u("blocklet.noBlockletPart2"),
+          filter: h.keyword
         }
       ),
       /* @__PURE__ */ t(O, { keywordTip: !0 })
     ] });
-  if ($ && e.length === 0) {
-    const s = k(c);
-    return /* @__PURE__ */ h(q, { children: [
-      s ? /* @__PURE__ */ t(
+  if (B && e.length === 0) {
+    const c = k(s);
+    return /* @__PURE__ */ f(q, { children: [
+      c ? /* @__PURE__ */ t(
         j,
         {
-          primaryStart: d("blocklet.noCategoryResults1"),
-          primaryEnd: d("blocklet.noCategoryResults2"),
-          filter: s
+          primaryStart: u("blocklet.noCategoryResults1"),
+          primaryEnd: u("blocklet.noCategoryResults2"),
+          filter: c
         }
       ) : /* @__PURE__ */ t(se, {}),
       /* @__PURE__ */ t(O, { filterTip: !0 })
     ] });
   }
-  return e.length === 0 ? /* @__PURE__ */ t(q, { children: /* @__PURE__ */ t(se, {}) }) : /* @__PURE__ */ h(At, { container: !0, ...o, columns: y, ref: B, children: [
-    e.map((s) => /* @__PURE__ */ t(ce, { item: !0, xs: 4, "data-blocklet-did": s.did, children: r({ blocklet: s, blocklets: e }) }, s.did)),
-    b && /* @__PURE__ */ t(ce, { item: !0, xs: 12, ref: p, children: /* @__PURE__ */ t(_, { height: 60, display: "flex", justifyContent: "center", children: /* @__PURE__ */ t(W, {}) }) })
+  return e.length === 0 ? /* @__PURE__ */ t(q, { children: /* @__PURE__ */ t(se, {}) }) : /* @__PURE__ */ f(At, { container: !0, ...o, columns: g, ref: T, children: [
+    e.map((c) => /* @__PURE__ */ t(ce, { item: !0, xs: 4, "data-blocklet-did": c.did, children: r({ blocklet: c, blocklets: e }) }, c.did)),
+    b && /* @__PURE__ */ t(ce, { item: !0, xs: 12, ref: p, children: /* @__PURE__ */ t(D, { height: 60, display: "flex", justifyContent: "center", children: /* @__PURE__ */ t(W, {}) }) })
   ] });
 }
 Y.propTypes = {
   blocklets: n.array.isRequired
 };
 Y.defaultProps = {};
-const At = C(de)`
+const At = C(ue)`
   opacity: ${(e) => e.columns > 0 ? 1 : 0};
   &.MuiGrid-root {
     width: 100%;
     margin: 0 -16px;
   }
-`, ce = Ue(C(de)`
+`, ce = Ue(C(ue)`
   @media (max-width: ${(e) => e.theme.breakpoints.values.sm}px) {
     &.MuiGrid-item {
       padding-bottom: 0px;
@@ -740,14 +742,14 @@ const At = C(de)`
   }
 `;
 function Z() {
-  const { selectedCategory: e, handleCategory: o, t: r, handlePrice: l, filters: i, categoryOptions: c, priceOptions: k } = z();
-  return /* @__PURE__ */ h(Lt, { children: [
-    /* @__PURE__ */ t("div", { children: /* @__PURE__ */ t(D, { title: r("common.price"), options: k, value: i.price, onChange: l }) }),
-    c.length > 0 && /* @__PURE__ */ t("div", { style: { marginTop: "16px" }, children: /* @__PURE__ */ t(
-      D,
+  const { selectedCategory: e, handleCategory: o, t: r, handlePrice: l, filters: i, categoryOptions: s, priceOptions: k } = I();
+  return /* @__PURE__ */ f(Lt, { children: [
+    /* @__PURE__ */ t("div", { children: /* @__PURE__ */ t(A, { title: r("common.price"), options: k, value: i.price, onChange: l }) }),
+    s.length > 0 && /* @__PURE__ */ t("div", { style: { marginTop: "16px" }, children: /* @__PURE__ */ t(
+      A,
       {
         title: r("common.category"),
-        options: c,
+        options: s,
         value: e,
         onChange: o
       }
@@ -766,14 +768,14 @@ const Lt = C("aside")`
 Z.propTypes = {};
 Z.defaultProps = {};
 function ee({ placeholder: e, ...o }) {
-  const { filters: r, handleKeyword: l } = z(), [i, c] = F(r.keyword || ""), k = Ye(l, { wait: 300 }), g = (b) => {
+  const { filters: r, handleKeyword: l } = I(), [i, s] = F(r.keyword || ""), k = Ye(l, { wait: 300 }), h = (b) => {
     const { value: m } = b.target;
-    c(m), k.run(m);
-  }, d = () => {
-    c(""), l();
+    s(m), k.run(m);
+  }, u = () => {
+    s(""), l();
   };
   return E(() => {
-    c(r.keyword || "");
+    s(r.keyword || "");
   }, [r.keyword]), /* @__PURE__ */ t(
     Mt,
     {
@@ -781,12 +783,12 @@ function ee({ placeholder: e, ...o }) {
         "data-cy": "search-blocklet"
       },
       startAdornment: /* @__PURE__ */ t(le, { position: "start", children: /* @__PURE__ */ t(Ot, {}) }),
-      onChange: g,
+      onChange: h,
       placeholder: e,
       value: i,
       title: e,
       "data-cy": "search",
-      endAdornment: i && /* @__PURE__ */ t(le, { position: "end", children: /* @__PURE__ */ t(Ft, { "data-cy": "search-delete", onClick: d }) }),
+      endAdornment: i && /* @__PURE__ */ t(le, { position: "end", children: /* @__PURE__ */ t(Ft, { "data-cy": "search-delete", onClick: u }) }),
       ...o
     }
   );
@@ -813,32 +815,32 @@ const Mt = C(Oe)`
       color: transparent;
     }
   }
-`, Ot = C(dt)`
+`, Ot = C(ut)`
   color: ${(e) => e.theme.palette.grey[500]};
   font-size: 28px;
   @media (max-width: ${(e) => e.theme.breakpoints.values.md}px) {
     font-size: 24px;
   }
-`, Ft = C(ut)`
+`, Ft = C(dt)`
   color: ${(e) => e.theme.palette.grey[500]};
   font-size: 16px;
   cursor: pointer;
 `;
 function te({ onSelect: e, wrapChildren: o }) {
-  const r = L(null), l = L(null), i = L(null), { storeApi: c, blockletRender: k, filters: g, endpoint: d, handleKeyword: b, t: m } = z(), P = async (p) => {
-    const { data: s } = await c.get(T.blockletsPath, { params: p }), w = s.dataList || [];
-    return w.length > 0 && w.unshift({ type: "more-result", total: s.total || 0 }), w;
-  }, B = (p) => {
+  const r = M(null), l = M(null), i = M(null), { storeApi: s, blockletRender: k, filters: h, endpoint: u, handleKeyword: b, t: m } = I(), P = async (p) => {
+    const { data: c } = await s.get(R.blockletsPath, { params: p }), w = c.dataList || [];
+    return w.length > 0 && w.unshift({ type: "more-result", total: c.total || 0 }), w;
+  }, T = (p) => {
     b(p.state.query), p.setIsOpen(!1);
   }, x = () => {
     r.current && setTimeout(() => {
       const p = r.current.querySelector("input.bl-autocomplete-input");
       p && p.focus();
     });
-  }, y = (p) => {
+  }, g = (p) => {
     p.setIsOpen(!1), x();
-  }, $ = ({ prevState: p, state: s }) => {
-    p.query !== s.query && (s.query || b());
+  }, B = ({ prevState: p, state: c }) => {
+    p.query !== c.query && (c.query || b());
   };
   return ht(
     "ctrl + k, command + k",
@@ -846,16 +848,16 @@ function te({ onSelect: e, wrapChildren: o }) {
     { enableOnTags: ["INPUT"] }
   ), E(() => {
     x();
-  }, [d]), E(() => {
+  }, [u]), E(() => {
     if (!r.current)
       return;
     const p = ft({
       container: r.current,
       renderer: { createElement: Ke, Fragment: We, render: () => {
       } },
-      render({ children: s }, w) {
-        var f;
-        (!l.current || i.current !== w) && (i.current = w, (f = l.current) == null || f.unmount(), l.current = mt(w)), l.current.render(o(s));
+      render({ children: c }, w) {
+        var y;
+        (!l.current || i.current !== w) && (i.current = w, (y = l.current) == null || y.unmount(), l.current = mt(w)), l.current.render(o(c));
       },
       autoFocus: !0,
       openOnFocus: !1,
@@ -868,44 +870,44 @@ function te({ onSelect: e, wrapChildren: o }) {
       },
       placeholder: m("common.searchStore"),
       initialState: {
-        query: g.keyword
+        query: h.keyword
       },
-      onStateChange(s) {
-        $(s);
+      onStateChange(c) {
+        B(c);
       },
-      onSubmit: B,
-      onReset(s) {
-        y(s);
+      onSubmit: T,
+      onReset(c) {
+        g(c);
       },
-      getSources({ query: s, state: w, ...f }) {
-        const N = {
-          ...g,
-          sortBy: T[g.sortBy],
+      getSources({ query: c, state: w, ...y }) {
+        const $ = {
+          ...h,
+          sortBy: R[h.sortBy],
           page: 1,
           pageSize: 10,
-          keyword: s
+          keyword: c
         };
         return Pt([
           {
             sourceId: "blocklets",
             getItems() {
-              return P(N);
+              return P($);
             },
             // 选中后填充 搜索框中值
             getItemInputValue({ item: v }) {
-              return v.type === "more-result" ? s : v.title;
+              return v.type === "more-result" ? c : v.title;
             },
             // 选中或者点击自动完成列表中的 item 时触发
-            onSelect({ event: v, item: I }) {
-              return I.type === "more-result" ? (f.setIsOpen(!1), b(s)) : v.type === "keydown" ? b(I.title) : e({
-                blocklet: I,
-                detailUrl: gt(d, `/blocklets/${I.did}`),
-                storeUrl: d
+            onSelect({ event: v, item: _ }) {
+              return _.type === "more-result" ? (y.setIsOpen(!1), b(c)) : v.type === "keydown" ? b(_.title) : e({
+                blocklet: _,
+                detailUrl: gt(u, `/blocklets/${_.did}`),
+                storeUrl: u
               });
             },
             templates: {
               item({ item: v }) {
-                return v.type === "more-result" ? /* @__PURE__ */ t("div", { children: m("autocomplete.expandResult", { name: s, number: v.total.toLocaleString() }) }) : k({ blocklet: v, autocompleteSetters: f });
+                return v.type === "more-result" ? /* @__PURE__ */ t("div", { children: m("autocomplete.expandResult", { name: c, number: v.total.toLocaleString() }) }) : k({ blocklet: v, autocompleteSetters: y });
               },
               noResults() {
                 return m("blocklet.noResults");
@@ -918,7 +920,7 @@ function te({ onSelect: e, wrapChildren: o }) {
     return () => {
       p.destroy();
     };
-  }, [g, k]), /* @__PURE__ */ t("div", { className: "bl-search-container", ref: r });
+  }, [h, k]), /* @__PURE__ */ t("div", { className: "bl-search-container", ref: r });
 }
 te.propTypes = {
   onSelect: n.func.isRequired,
@@ -928,47 +930,47 @@ te.defaultProps = {
   wrapChildren: (e) => e
 };
 function Et() {
-  var s, w;
+  var w, y;
   const {
     handleDeveloper: e,
     blockletList: o,
     filters: r,
     developerName: l,
     handleSort: i,
-    handleCategory: c,
+    handleCategory: s,
     handlePrice: k,
-    handleSearchSelect: g,
-    t: d,
+    handleSearchSelect: h,
+    t: u,
     getCategoryLocale: b,
     priceOptions: m,
     wrapChildren: P,
-    baseSearch: B
-  } = z(), x = yt(d), y = ((s = x.find((f) => f.value === r.sortBy)) == null ? void 0 : s.name) || d("sort.sort"), $ = b(r.category), p = (w = m.find((f) => f.value === r.price)) == null ? void 0 : w.name;
-  return /* @__PURE__ */ h(_, { display: "flex", alignItems: "flex-start", height: "100%", children: [
+    baseSearch: T
+  } = I(), x = yt(u), g = ((w = x.find(($) => $.value === r.sortBy)) == null ? void 0 : w.name) || u("sort.sort"), B = b(r.category), { resourceType: p } = r || {}, c = (y = m.find(($) => $.value === r.price)) == null ? void 0 : y.name;
+  return /* @__PURE__ */ f(D, { display: "flex", alignItems: "flex-start", height: "100%", children: [
     /* @__PURE__ */ t(ae, { mdDown: !0, children: /* @__PURE__ */ t(Z, {}) }),
-    /* @__PURE__ */ h(qt, { children: [
-      /* @__PURE__ */ h(jt, { children: [
-        /* @__PURE__ */ h(_, { className: "filter-bar", display: "flex", alignItems: "center", children: [
-          B ? /* @__PURE__ */ t(ee, { className: "bl-search-container", placeholder: d("common.searchStore") }) : /* @__PURE__ */ t(te, { onSelect: g, wrapChildren: P }),
-          /* @__PURE__ */ h(_, { mt: 0, ml: "16px", className: "filter-container", children: [
+    /* @__PURE__ */ f(qt, { children: [
+      /* @__PURE__ */ f(jt, { children: [
+        /* @__PURE__ */ f(D, { className: "filter-bar", display: "flex", alignItems: "center", children: [
+          T ? /* @__PURE__ */ t(ee, { className: "bl-search-container", placeholder: u("common.searchStore") }) : /* @__PURE__ */ t(te, { onSelect: h, wrapChildren: P }),
+          /* @__PURE__ */ f(D, { mt: 0, ml: "16px", className: "filter-container", children: [
             /* @__PURE__ */ t(ae, { mdUp: !0, children: /* @__PURE__ */ t(X, {}) }),
             /* @__PURE__ */ t(
               J,
               {
                 value: r.sortBy,
                 options: x,
-                title: y,
-                icon: /* @__PURE__ */ t($e, {}),
-                onChange: (f) => {
-                  i(f);
+                title: g,
+                icon: /* @__PURE__ */ t(Be, {}),
+                onChange: ($) => {
+                  i($);
                 }
               }
             )
           ] })
         ] }),
-        /* @__PURE__ */ h(_, { display: "flex", flexWrap: "wrap", alignItems: "center", mb: "16px", children: [
+        /* @__PURE__ */ f(D, { display: "flex", flexWrap: "wrap", alignItems: "center", mb: "16px", children: [
           /* @__PURE__ */ t(
-            M,
+            N,
             {
               label: l,
               icon: /* @__PURE__ */ t(Fe, {}),
@@ -978,26 +980,27 @@ function Et() {
             }
           ),
           /* @__PURE__ */ t(
-            M,
+            N,
             {
-              label: $,
+              label: B,
               onDelete: () => {
-                c(null);
+                s(null);
               }
             }
           ),
           /* @__PURE__ */ t(
-            M,
+            N,
             {
-              label: p,
+              label: c,
               onDelete: () => {
                 k(null);
               }
             }
-          )
+          ),
+          p && /* @__PURE__ */ t(N, { label: `${u("common.resourceType")}: ${p}` })
         ] })
       ] }),
-      /* @__PURE__ */ t(Ee, { FallbackComponent: ue, children: /* @__PURE__ */ t("div", { style: { position: "relative", flex: 1, overflow: "auto" }, children: /* @__PURE__ */ t(Y, { blocklets: o }) }) })
+      /* @__PURE__ */ t(Ee, { FallbackComponent: de, children: /* @__PURE__ */ t("div", { style: { position: "relative", flex: 1, overflow: "auto" }, children: /* @__PURE__ */ t(Y, { blocklets: o }) }) })
     ] })
   ] });
 }
@@ -1091,8 +1094,8 @@ function ye(e) {
       }
     `
   };
-  return /* @__PURE__ */ h(V, { ...e, children: [
-    /* @__PURE__ */ t(Be, { styles: l.autocomplete }),
+  return /* @__PURE__ */ f(V, { ...e, children: [
+    /* @__PURE__ */ t(Te, { styles: l.autocomplete }),
     /* @__PURE__ */ t(Et, {})
   ] });
 }

package/lib/libs/prop-types.js

@@ -13,7 +13,8 @@ const propTypes = {
     sortDirection: _propTypes.default.string,
     price: _propTypes.default.string,
     category: _propTypes.default.string,
-    developer: _propTypes.default.string
+    developer: _propTypes.default.string,
+    resourceType: _propTypes.default.string
   }),
   wrapChildren: _propTypes.default.func,
   extraFilter: _propTypes.default.func,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/list",
-  "version": "0.12.48",
+  "version": "0.12.49",
   "description": "Common ux components of blocklet",
   "publishConfig": {
     "access": "public"
@@ -83,5 +83,5 @@
     "prettier": "^2.7.1",
     "vite": "^4.4.9"
   },
-  "gitHead": "414faf0703d3aaa36b118b4a31cef6697e5174fd"
+  "gitHead": "dbd8f7da7a2e562913826a76e795b9e3b5112833"
 }