@blocklet/list 0.12.58 → 0.12.60

package/lib/base.js

@@ -45,6 +45,7 @@ function ListBase() {
   const {
     resourceType
   } = filters || {};
+  const displayedResourceType = (0, _utils.getDisplayedResourceType)(resourceType);
   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",
@@ -103,8 +104,8 @@ function ListBase() {
             onDelete: () => {
               handlePrice(null);
             }
-          }), resourceType && /*#__PURE__*/(0, _jsxRuntime.jsx)(_filter2.CustomChip, {
-            label: "".concat(t('common.resourceType'), ": ").concat(resourceType)
+          }), displayedResourceType && /*#__PURE__*/(0, _jsxRuntime.jsx)(_filter2.CustomChip, {
+            label: "".concat(t('common.resourceType'), ": ").concat(displayedResourceType)
           })]
         })]
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactErrorBoundary.ErrorBoundary, {

package/lib/index.es.js

@@ -1,7 +1,7 @@
-import { jsx as t, jsxs as h, Fragment as Pe } from "react/jsx-runtime";
+import { jsx as t, jsxs as g, Fragment as Pe } from "react/jsx-runtime";
 import { useTheme as pe } from "@mui/material/styles";
 import { css as Te, Global as Be } from "@emotion/react";
-import { styled as C } from "@arcblock/ux/lib/Theme";
+import { styled as S } from "@arcblock/ux/lib/Theme";
 import $e from "@mui/icons-material/Sort";
 import { Button as Re, CircularProgress as W, MenuList as ze, useMediaQuery as Ie, SvgIcon as _e, Popper as De, Grow as Ne, Paper as Ae, ClickAwayListener as Le, MenuItem as Me, Chip as Oe, Grid as ue, Box as D, OutlinedInput as Fe, InputAdornment as le, Hidden as ae } from "@mui/material";
 import Ee from "@mui/icons-material/Face";
@@ -67,7 +67,7 @@ function Pt(e, n) {
     });
   };
 }
-const Tt = Pt((e) => Promise.resolve(e), 300), Bt = {
+const Tt = Pt((e) => Promise.resolve(e), 300), Bt = (e) => (e || "").split(".").slice(-1)[0], $t = {
   common: {
     searchStore: "Search the store",
     price: "Price",
@@ -102,7 +102,7 @@ const Tt = Pt((e) => Promise.resolve(e), 300), Bt = {
   autocomplete: {
     expandResult: 'Show {number} search results for "{name}" '
   }
-}, $t = {
+}, Rt = {
   common: {
     searchStore: "搜索商店内应用",
     price: "价格",
@@ -138,8 +138,8 @@ const Tt = Pt((e) => Promise.resolve(e), 300), Bt = {
     expandResult: "显示 {number} 条 “{name}” 的搜索结果 "
   }
 }, K = {
-  en: ie(Bt),
-  zh: ie($t)
+  en: ie($t),
+  zh: ie(Rt)
 }, fe = {
   filters: o.shape({
     keyword: o.string,
@@ -183,7 +183,7 @@ const Tt = Pt((e) => Promise.resolve(e), 300), Bt = {
   blockletsPath: "/api/v2/blocklets.json",
   categoriesPath: "/api/blocklets/categories",
   cacheSize: 100
-}, ge = je({}), { Provider: Rt, Consumer: Cr } = ge;
+}, ge = je({}), { Provider: zt, Consumer: Pr } = ge;
 function V({
   filters: e,
   children: n,
@@ -191,26 +191,26 @@ function V({
   locale: l,
   blockletRender: i,
   onFilterChange: c,
-  onSearchSelect: k,
-  extraFilter: g,
+  onSearchSelect: w,
+  extraFilter: y,
   wrapChildren: p,
-  baseSearch: y,
+  baseSearch: b,
   serverVersion: f,
-  storeVersion: P,
-  fetchCategoryDelay: B
+  storeVersion: C,
+  fetchCategoryDelay: T
 }) {
-  const b = {};
-  f && (b["x-blocklet-server-version"] = f), P && (b["x-blocklet-store-version"] = P);
-  const $ = L(() => tt.create({
+  const x = {};
+  f && (x["x-blocklet-server-version"] = f), C && (x["x-blocklet-store-version"] = C);
+  const B = L(() => tt.create({
     baseURL: r,
-    headers: b
+    headers: x
   }), [r]), d = L(() => ({ sortBy: "popularity", sortDirection: "desc", ...e }), [e]), u = d.category, s = Ve({
     currentPage: R.currentPage,
     pageSize: vt() ? R.mobilePageSize : R.pageSize,
     defaultCurrentPage: R.defaultCurrentPage
-  }), [S, x] = F(null), {
-    data: T = { list: [], total: 0 },
-    loading: w,
+  }), [P, k] = F(null), {
+    data: $ = { list: [], total: 0 },
+    loading: h,
     loadMore: _,
     loadingMore: be
   } = Qe(
@@ -222,8 +222,8 @@ function V({
         page: St(((z = a == null ? void 0 : a.list) == null ? void 0 : z.length) || 0, s.pageSize),
         pageSize: s.pageSize
       };
-      x(null);
-      const { data: v = {} } = await $.get(R.blockletsPath, {
+      k(null);
+      const { data: v = {} } = await B.get(R.blockletsPath, {
         params: m
       });
       return { list: (v == null ? void 0 : v.dataList) || [], total: (v == null ? void 0 : v.total) || 0 };
@@ -232,7 +232,7 @@ function V({
       isNoMore: (a) => a ? a.list.length >= a.total : !1,
       reloadDeps: [r, rt(e)],
       onError: (a) => {
-        x(a);
+        k(a);
       }
     }
   ), {
@@ -242,7 +242,7 @@ function V({
     run: we
   } = Je(
     async () => {
-      const { data: a } = await $.get(R.categoriesPath);
+      const { data: a } = await B.get(R.categoriesPath);
       return Array.isArray(a) ? a : [];
     },
     { manual: !0 }
@@ -253,11 +253,11 @@ function V({
     },
     [l]
   ), oe = L(() => {
-    let a = T.list || [];
-    return a = g(a), a;
-  }, [T, g]), ve = L(() => kt(U, l), [U, l]), Se = xt(re), Ce = {
-    errors: { fetchBlockletsError: S, fetchCategoriesError: xe },
-    loadings: { fetchBlockletsLoading: w, fetchCategoriesLoading: ke, loadingMore: be },
+    let a = $.list || [];
+    return a = y(a), a;
+  }, [$, y]), ve = L(() => kt(U, l), [U, l]), Se = xt(re), Ce = {
+    errors: { fetchBlockletsError: P, fetchCategoriesError: xe },
+    loadings: { fetchBlockletsLoading: h, fetchCategoriesLoading: ke, loadingMore: be },
     endpoint: r,
     blockletList: oe,
     wrapChildren: p,
@@ -269,9 +269,9 @@ function V({
     locale: l,
     categoryOptions: ve,
     priceOptions: Se,
-    storeApi: $,
-    baseSearch: y,
-    hasNextPage: T.list.length < T.total,
+    storeApi: B,
+    baseSearch: b,
+    hasNextPage: $.list.length < $.total,
     handleSort: (a) => {
       const m = {
         ...d,
@@ -322,13 +322,13 @@ function V({
         return ((ne = z == null ? void 0 : z.owner) == null ? void 0 : ne.did) === d.owner;
       })) == null ? void 0 : m.owner) == null ? void 0 : v.name) || "";
     },
-    handleSearchSelect: k
+    handleSearchSelect: w
   };
   return E(() => {
     setTimeout(() => {
       we();
-    }, B || 0);
-  }, [r]), /* @__PURE__ */ t(Rt, { value: Ce, children: n });
+    }, T || 0);
+  }, [r]), /* @__PURE__ */ t(zt, { value: Ce, children: n });
 }
 V.propTypes = {
   ...fe,
@@ -339,10 +339,10 @@ function I() {
   const e = Ge(ge);
   return e || {};
 }
-const zt = C(Re)`
+const It = S(Re)`
   border-radius: 4px;
 `, Q = Ue(({ children: e, rounded: n, loading: r, disabled: l, ...i }, c) => /* @__PURE__ */ t(
-  zt,
+  It,
   {
     ref: c,
     disableElevation: !0,
@@ -364,32 +364,32 @@ Q.defaultProps = {
   loading: !1,
   disabled: !1
 };
-function J({ title: e, value: n, icon: r, prepend: l, options: i, onChange: c, itemRender: k, ...g }) {
-  const p = M(null), y = pe(), [f, P] = F(!1), [B, b] = F(n !== null ? n : ""), $ = Ie(y.breakpoints.down("sm"));
+function J({ title: e, value: n, icon: r, prepend: l, options: i, onChange: c, itemRender: w, ...y }) {
+  const p = M(null), b = pe(), [f, C] = F(!1), [T, x] = F(n !== null ? n : ""), B = Ie(b.breakpoints.down("sm"));
   E(() => {
-    b(n !== null ? n : "");
+    x(n !== null ? n : "");
   }, [n]);
   const d = H(() => {
-    P(!1);
+    C(!1);
   }, []), u = H(() => {
-    P(!0);
+    C(!0);
   }, []);
-  function s(x) {
-    b(x.value), c(x.value), $ && d();
+  function s(k) {
+    x(k.value), c(k.value), B && d();
   }
-  function S(x) {
-    return x === B;
+  function P(k) {
+    return k === T;
   }
-  return /* @__PURE__ */ h(Pe, { children: [
-    /* @__PURE__ */ h(
-      It,
+  return /* @__PURE__ */ g(Pe, { children: [
+    /* @__PURE__ */ g(
+      _t,
       {
         ref: p,
         onClick: u,
         variant: "outlined",
         size: "small",
-        className: ["my-select__selector", lt(B) ? "" : "my-select__selector--active"].join(" "),
-        ...g,
+        className: ["my-select__selector", lt(T) ? "" : "my-select__selector--active"].join(" "),
+        ...y,
         children: [
           /* @__PURE__ */ t("div", { className: "my-select__icon", children: r }),
           e,
@@ -397,24 +397,24 @@ function J({ title: e, value: n, icon: r, prepend: l, options: i, onChange: c, i
         ]
       }
     ),
-    /* @__PURE__ */ t(De, { open: f, anchorEl: p.current, transition: !0, style: { zIndex: "9999" }, children: ({ TransitionProps: x, placement: T }) => /* @__PURE__ */ t(
+    /* @__PURE__ */ t(De, { open: f, anchorEl: p.current, transition: !0, style: { zIndex: "9999" }, children: ({ TransitionProps: k, placement: $ }) => /* @__PURE__ */ t(
       Ne,
       {
-        ...x,
-        style: { transformOrigin: T === "bottom" ? "center top" : "center bottom" },
-        children: /* @__PURE__ */ t(Ae, { children: /* @__PURE__ */ t(Le, { onClickAway: d, children: /* @__PURE__ */ h(_t, { autoFocusItem: f, onMouseEnter: u, onMouseLeave: d, children: [
+        ...k,
+        style: { transformOrigin: $ === "bottom" ? "center top" : "center bottom" },
+        children: /* @__PURE__ */ t(Ae, { children: /* @__PURE__ */ t(Le, { onClickAway: d, children: /* @__PURE__ */ g(Dt, { autoFocusItem: f, onMouseEnter: u, onMouseLeave: d, children: [
           l,
-          i.map((w) => k ? k(w) : /* @__PURE__ */ t(
+          i.map((h) => w ? w(h) : /* @__PURE__ */ t(
             Me,
             {
-              onClick: () => s(w),
+              onClick: () => s(h),
               className: [
                 "my-select__option",
-                S(w.value) ? "my-select__option--active" : ""
+                P(h.value) ? "my-select__option--active" : ""
               ].join(" "),
-              children: w.name
+              children: h.name
             },
-            w.value
+            h.value
           ))
         ] }) }) })
       }
@@ -438,7 +438,7 @@ J.defaultProps = {
   onChange: () => {
   }
 };
-const It = C(Q)`
+const _t = S(Q)`
   border: 1px solid #f0f0f0;
   padding: 6px 8px 6px 12px;
   font-weight: ${(e) => e.theme.typography.fontWeightBold};
@@ -470,7 +470,7 @@ const It = C(Q)`
       margin-right: 3px;
     }
   }
-`, _t = C(ze)`
+`, Dt = S(ze)`
   .my-select__option__icon {
     color: transparent;
     font-size: 16px;
@@ -488,7 +488,7 @@ const It = C(Q)`
   }
 `;
 function A({ options: e, onChange: n, title: r, value: l }) {
-  return /* @__PURE__ */ h(Dt, { children: [
+  return /* @__PURE__ */ g(Nt, { children: [
     /* @__PURE__ */ t("div", { className: "title", children: r }),
     /* @__PURE__ */ t("div", { className: "list", children: e.map((i) => /* @__PURE__ */ t(
       "div",
@@ -503,7 +503,7 @@ function A({ options: e, onChange: n, title: r, value: l }) {
     )) })
   ] });
 }
-const Dt = C("div")`
+const Nt = S("div")`
   .title {
     font-size: 18px;
     font-weight: bold;
@@ -541,20 +541,20 @@ A.defaultProps = {
   value: null
 };
 function X() {
-  const { selectedCategory: e, handleCategory: n, t: r, handlePrice: l, filters: i, categoryOptions: c, priceOptions: k } = I(), [g, p] = F(!1), y = (f, P) => {
-    f === "category" && n(P), f === "price" && l(P), p(!1);
+  const { selectedCategory: e, handleCategory: n, t: r, handlePrice: l, filters: i, categoryOptions: c, priceOptions: w } = I(), [y, p] = F(!1), b = (f, C) => {
+    f === "category" && n(C), f === "price" && l(C), p(!1);
   };
-  return /* @__PURE__ */ h(Nt, { children: [
+  return /* @__PURE__ */ g(At, { children: [
     /* @__PURE__ */ t(st, { variant: "outlined", className: "filter-button", onClick: () => p(!0), children: /* @__PURE__ */ t(at, { className: "filter-icon", fontSize: "small" }) }),
-    /* @__PURE__ */ h(it, { fullWidth: !0, title: "", open: g, onClose: () => p(!1), children: [
+    /* @__PURE__ */ g(it, { fullWidth: !0, title: "", open: y, onClose: () => p(!1), children: [
       /* @__PURE__ */ t(
         A,
         {
           title: r("common.price"),
-          options: k,
+          options: w,
           value: i.price,
           onChange: (f) => {
-            y("price", f);
+            b("price", f);
           }
         }
       ),
@@ -565,14 +565,14 @@ function X() {
           options: c,
           value: e,
           onChange: (f) => {
-            y("category", f);
+            b("category", f);
           }
         }
       ) })
     ] })
   ] });
 }
-const Nt = C("div")`
+const At = S("div")`
   .filter-button {
     margin-right: 16px;
     border-color: rgb(240, 240, 240);
@@ -586,7 +586,7 @@ const Nt = C("div")`
 `;
 X.propTypes = {};
 X.defaultProps = {};
-const At = C("div")`
+const Lt = S("div")`
   .MuiChip-root {
     border-radius: 4px;
     height: initial;
@@ -596,7 +596,7 @@ const At = C("div")`
   }
 `;
 function N({ label: e, icon: n, onDelete: r, ...l }) {
-  return e ? /* @__PURE__ */ t(At, { ...l, children: /* @__PURE__ */ t(Oe, { color: "primary", "data-cy": "filter-tag", icon: n, label: e, onDelete: r }) }) : null;
+  return e ? /* @__PURE__ */ t(Lt, { ...l, children: /* @__PURE__ */ t(Oe, { color: "primary", "data-cy": "filter-tag", icon: n, label: e, onDelete: r }) }) : null;
 }
 N.propTypes = {
   label: o.string,
@@ -614,7 +614,7 @@ function se() {
 }
 function O({ filterTip: e, keywordTip: n }) {
   const { t: r, locale: l } = I(), i = () => l === "zh" ? "、" : " , ";
-  return /* @__PURE__ */ h(ut, { className: "tips", children: [
+  return /* @__PURE__ */ g(ut, { className: "tips", children: [
     /* @__PURE__ */ t("span", { style: { marginRight: "16px" }, children: r("blocklet.emptyTip") }),
     e && /* @__PURE__ */ t("span", { children: r("blocklet.filterTip") }),
     e && n && i(),
@@ -630,14 +630,14 @@ O.defaultProps = {
   keywordTip: !1
 };
 function j({ primaryStart: e, primaryEnd: n, filter: r }) {
-  return /* @__PURE__ */ h(me, { variant: "subtitle2", children: [
+  return /* @__PURE__ */ g(me, { variant: "subtitle2", children: [
     /* @__PURE__ */ t("span", { children: e }),
-    /* @__PURE__ */ h("span", { className: "primary", children: [
+    /* @__PURE__ */ g("span", { className: "primary", children: [
       " ",
       r,
       " "
     ] }),
-    /* @__PURE__ */ h("span", { children: [
+    /* @__PURE__ */ g("span", { children: [
       n,
       " "
     ] })
@@ -654,53 +654,53 @@ function Y({ blocklets: e, ...n }) {
     errors: l,
     loadings: i,
     selectedCategory: c,
-    getCategoryLocale: k,
-    filters: g,
+    getCategoryLocale: w,
+    filters: y,
     t: p,
-    hasNextPage: y,
+    hasNextPage: b,
     loadMore: f,
-    endpoint: P
-  } = I(), B = M(null), b = Xe(B.current), $ = Ye(() => b ? b.width > 900 ? 12 : b.width > 600 ? 8 : 4 : 0, [b]), d = !!c || !!g.price, [u] = pt({
+    endpoint: C
+  } = I(), T = M(null), x = Xe(T.current), B = Ye(() => x ? x.width > 900 ? 12 : x.width > 600 ? 8 : 4 : 0, [x]), d = !!c || !!y.price, [u] = pt({
     loading: i.fetchBlockletsLoading || i.loadingMore,
-    hasNextPage: y,
+    hasNextPage: b,
     onLoadMore: f
   });
   if (l.fetchBlockletsError)
     return /* @__PURE__ */ t(
       de,
       {
-        error: new Error(`Failed to fetch blocklets from ${P}: ${l.fetchBlockletsError.message}`)
+        error: new Error(`Failed to fetch blocklets from ${C}: ${l.fetchBlockletsError.message}`)
       }
     );
   if (i.fetchBlockletsLoading)
     return /* @__PURE__ */ t(D, { height: 60, display: "flex", alignItems: "center", justifyContent: "center", children: /* @__PURE__ */ t(W, {}) });
-  if (g.keyword && d && e.length === 0)
-    return /* @__PURE__ */ h(q, { children: [
+  if (y.keyword && d && e.length === 0)
+    return /* @__PURE__ */ g(q, { children: [
       /* @__PURE__ */ t(
         j,
         {
           primaryStart: p("blocklet.noBlockletPart1"),
           primaryEnd: p("blocklet.noBlockletPart2"),
-          filter: g.keyword
+          filter: y.keyword
         }
       ),
       /* @__PURE__ */ t(O, { keywordTip: !0, filterTip: !0 })
     ] });
-  if (g.keyword && e.length === 0)
-    return /* @__PURE__ */ h(q, { children: [
+  if (y.keyword && e.length === 0)
+    return /* @__PURE__ */ g(q, { children: [
       /* @__PURE__ */ t(
         j,
         {
           primaryStart: p("blocklet.noBlockletPart1"),
           primaryEnd: p("blocklet.noBlockletPart2"),
-          filter: g.keyword
+          filter: y.keyword
         }
       ),
       /* @__PURE__ */ t(O, { keywordTip: !0 })
     ] });
   if (d && e.length === 0) {
-    const s = k(c);
-    return /* @__PURE__ */ h(q, { children: [
+    const s = w(c);
+    return /* @__PURE__ */ g(q, { children: [
       s ? /* @__PURE__ */ t(
         j,
         {
@@ -712,22 +712,22 @@ function Y({ blocklets: e, ...n }) {
       /* @__PURE__ */ t(O, { filterTip: !0 })
     ] });
   }
-  return e.length === 0 ? /* @__PURE__ */ t(q, { children: /* @__PURE__ */ t(se, {}) }) : /* @__PURE__ */ h(Lt, { container: !0, ...n, columns: $, ref: B, children: [
+  return e.length === 0 ? /* @__PURE__ */ t(q, { children: /* @__PURE__ */ t(se, {}) }) : /* @__PURE__ */ g(Mt, { container: !0, ...n, columns: B, ref: T, children: [
     e.map((s) => /* @__PURE__ */ t(ce, { item: !0, xs: 4, "data-blocklet-did": s.did, children: r({ blocklet: s, blocklets: e }) }, s.did)),
-    y && /* @__PURE__ */ t(ce, { item: !0, xs: 12, ref: u, children: /* @__PURE__ */ t(D, { height: 60, display: "flex", justifyContent: "center", children: /* @__PURE__ */ t(W, {}) }) })
+    b && /* @__PURE__ */ t(ce, { item: !0, xs: 12, ref: u, children: /* @__PURE__ */ t(D, { height: 60, display: "flex", justifyContent: "center", children: /* @__PURE__ */ t(W, {}) }) })
   ] });
 }
 Y.propTypes = {
   blocklets: o.array.isRequired
 };
 Y.defaultProps = {};
-const Lt = C(ue)`
+const Mt = S(ue)`
   opacity: ${(e) => e.columns > 0 ? 1 : 0};
   &.MuiGrid-root {
     width: 100%;
     margin: 0 -16px;
   }
-`, ce = Ke(C(ue)`
+`, ce = Ke(S(ue)`
   @media (max-width: ${(e) => e.theme.breakpoints.values.sm}px) {
     &.MuiGrid-item {
       padding-bottom: 0px;
@@ -738,7 +738,7 @@ const Lt = C(ue)`
       margin-bottom: ${(e) => e.theme.spacing(2)};
     }
   }
-`), q = C(ct)`
+`), q = S(ct)`
   text-align: center;
   .primary {
     color: ${(e) => e.theme.palette.primary.main};
@@ -748,9 +748,9 @@ const Lt = C(ue)`
   }
 `;
 function Z() {
-  const { selectedCategory: e, handleCategory: n, t: r, handlePrice: l, filters: i, categoryOptions: c, priceOptions: k } = I();
-  return /* @__PURE__ */ h(Mt, { children: [
-    /* @__PURE__ */ t("div", { children: /* @__PURE__ */ t(A, { title: r("common.price"), options: k, value: i.price, onChange: l }) }),
+  const { selectedCategory: e, handleCategory: n, t: r, handlePrice: l, filters: i, categoryOptions: c, priceOptions: w } = I();
+  return /* @__PURE__ */ g(Ot, { children: [
+    /* @__PURE__ */ t("div", { children: /* @__PURE__ */ t(A, { title: r("common.price"), options: w, value: i.price, onChange: l }) }),
     c.length > 0 && /* @__PURE__ */ t("div", { style: { marginTop: "16px" }, children: /* @__PURE__ */ t(
       A,
       {
@@ -762,7 +762,7 @@ function Z() {
     ) })
   ] });
 }
-const Mt = C("aside")`
+const Ot = S("aside")`
   width: 220px;
   margin-right: ${(e) => e.theme.spacing(2)};
   height: 100%;
@@ -774,27 +774,27 @@ const Mt = C("aside")`
 Z.propTypes = {};
 Z.defaultProps = {};
 function ee({ placeholder: e, ...n }) {
-  const { filters: r, handleKeyword: l } = I(), [i, c] = F(r.keyword || ""), k = Ze(l, { wait: 300 }), g = (y) => {
-    const { value: f } = y.target;
-    c(f), k.run(f);
+  const { filters: r, handleKeyword: l } = I(), [i, c] = F(r.keyword || ""), w = Ze(l, { wait: 300 }), y = (b) => {
+    const { value: f } = b.target;
+    c(f), w.run(f);
   }, p = () => {
     c(""), l();
   };
   return E(() => {
     c(r.keyword || "");
   }, [r.keyword]), /* @__PURE__ */ t(
-    Ot,
+    Ft,
     {
       inputProps: {
         "data-cy": "search-blocklet"
       },
-      startAdornment: /* @__PURE__ */ t(le, { position: "start", children: /* @__PURE__ */ t(Ft, {}) }),
-      onChange: g,
+      startAdornment: /* @__PURE__ */ t(le, { position: "start", children: /* @__PURE__ */ t(Et, {}) }),
+      onChange: y,
       placeholder: e,
       value: i,
       title: e,
       "data-cy": "search",
-      endAdornment: i && /* @__PURE__ */ t(le, { position: "end", children: /* @__PURE__ */ t(Et, { "data-cy": "search-delete", onClick: p }) }),
+      endAdornment: i && /* @__PURE__ */ t(le, { position: "end", children: /* @__PURE__ */ t(qt, { "data-cy": "search-delete", onClick: p }) }),
       ...n
     }
   );
@@ -805,7 +805,7 @@ ee.propTypes = {
 ee.defaultProps = {
   placeholder: "Type to search..."
 };
-const Ot = C(Fe)`
+const Ft = S(Fe)`
   background-color: ${(e) => e.theme.palette.grey[50]};
   font-size: 14px;
   border-radius: 6px;
@@ -821,39 +821,39 @@ const Ot = C(Fe)`
       color: transparent;
     }
   }
-`, Ft = C(dt)`
+`, Et = S(dt)`
   color: ${(e) => e.theme.palette.grey[500]};
   font-size: 28px;
   @media (max-width: ${(e) => e.theme.breakpoints.values.md}px) {
     font-size: 24px;
   }
-`, Et = C(mt)`
+`, qt = S(mt)`
   color: ${(e) => e.theme.palette.grey[500]};
   font-size: 16px;
   cursor: pointer;
 `;
 function te({ onSelect: e, wrapChildren: n }) {
-  const r = M(null), l = M(null), i = M(null), { storeApi: c, blockletRender: k, filters: g, endpoint: p, handleKeyword: y, t: f } = I(), P = async (u) => {
-    const { data: s } = await c.get(R.blockletsPath, { params: u }), S = s.dataList || [];
-    return S.length > 0 && S.unshift({ type: "more-result", total: s.total || 0 }), S;
-  }, B = (u) => {
-    y(u.state.query), u.setIsOpen(!1);
-  }, b = () => {
+  const r = M(null), l = M(null), i = M(null), { storeApi: c, blockletRender: w, filters: y, endpoint: p, handleKeyword: b, t: f } = I(), C = async (u) => {
+    const { data: s } = await c.get(R.blockletsPath, { params: u }), P = s.dataList || [];
+    return P.length > 0 && P.unshift({ type: "more-result", total: s.total || 0 }), P;
+  }, T = (u) => {
+    b(u.state.query), u.setIsOpen(!1);
+  }, x = () => {
     r.current && setTimeout(() => {
       const u = r.current.querySelector("input.bl-autocomplete-input");
       u && u.focus();
     });
-  }, $ = (u) => {
-    u.setIsOpen(!1), b();
+  }, B = (u) => {
+    u.setIsOpen(!1), x();
   }, d = ({ prevState: u, state: s }) => {
-    u.query !== s.query && (s.query || y());
+    u.query !== s.query && (s.query || b());
   };
   return gt(
     "ctrl + k, command + k",
-    (u) => (u.stopPropagation(), u.preventDefault(), b(), !1),
+    (u) => (u.stopPropagation(), u.preventDefault(), x(), !1),
     { enableOnTags: ["INPUT"] }
   ), E(() => {
-    b();
+    x();
   }, [p]), E(() => {
     if (!r.current)
       return;
@@ -861,9 +861,9 @@ function te({ onSelect: e, wrapChildren: n }) {
       container: r.current,
       renderer: { createElement: We, Fragment: He, render: () => {
       } },
-      render({ children: s }, S) {
-        var x;
-        (!l.current || i.current !== S) && (i.current = S, (x = l.current) == null || x.unmount(), l.current = ft(S)), l.current.render(n(s));
+      render({ children: s }, P) {
+        var k;
+        (!l.current || i.current !== P) && (i.current = P, (k = l.current) == null || k.unmount(), l.current = ft(P)), l.current.render(n(s));
       },
       autoFocus: !0,
       openOnFocus: !1,
@@ -876,19 +876,19 @@ function te({ onSelect: e, wrapChildren: n }) {
       },
       placeholder: f("common.searchStore"),
       initialState: {
-        query: g.keyword
+        query: y.keyword
       },
       onStateChange(s) {
         d(s);
       },
-      onSubmit: B,
+      onSubmit: T,
       onReset(s) {
-        $(s);
+        B(s);
       },
-      getSources({ query: s, state: S, ...x }) {
-        const T = {
-          ...g,
-          sortBy: R[g.sortBy],
+      getSources({ query: s, state: P, ...k }) {
+        const $ = {
+          ...y,
+          sortBy: R[y.sortBy],
           page: 1,
           pageSize: 10,
           keyword: s
@@ -897,23 +897,23 @@ function te({ onSelect: e, wrapChildren: n }) {
           {
             sourceId: "blocklets",
             getItems() {
-              return P(T);
+              return C($);
             },
             // 选中后填充 搜索框中值
-            getItemInputValue({ item: w }) {
-              return w.type === "more-result" ? s : w.title;
+            getItemInputValue({ item: h }) {
+              return h.type === "more-result" ? s : h.title;
             },
             // 选中或者点击自动完成列表中的 item 时触发
-            onSelect({ event: w, item: _ }) {
-              return _.type === "more-result" ? (x.setIsOpen(!1), y(s)) : w.type === "keydown" ? y(_.title) : e({
+            onSelect({ event: h, item: _ }) {
+              return _.type === "more-result" ? (k.setIsOpen(!1), b(s)) : h.type === "keydown" ? b(_.title) : e({
                 blocklet: _,
                 detailUrl: yt(p, `/blocklets/${_.did}`),
                 storeUrl: p
               });
             },
             templates: {
-              item({ item: w }) {
-                return w.type === "more-result" ? /* @__PURE__ */ t("div", { children: f("autocomplete.expandResult", { name: s, number: w.total.toLocaleString() }) }) : k({ blocklet: w, autocompleteSetters: x });
+              item({ item: h }) {
+                return h.type === "more-result" ? /* @__PURE__ */ t("div", { children: f("autocomplete.expandResult", { name: s, number: h.total.toLocaleString() }) }) : w({ blocklet: h, autocompleteSetters: k });
               },
               noResults() {
                 return f("blocklet.noResults");
@@ -926,7 +926,7 @@ function te({ onSelect: e, wrapChildren: n }) {
     return () => {
       u.destroy();
     };
-  }, [g, k]), /* @__PURE__ */ t("div", { className: "bl-search-container", ref: r });
+  }, [y, w]), /* @__PURE__ */ t("div", { className: "bl-search-container", ref: r });
 }
 te.propTypes = {
   onSelect: o.func.isRequired,
@@ -935,8 +935,8 @@ te.propTypes = {
 te.defaultProps = {
   wrapChildren: (e) => e
 };
-function qt() {
-  var S, x;
+function jt() {
+  var k, $;
   const {
     handleDeveloper: e,
     blockletList: n,
@@ -944,37 +944,37 @@ function qt() {
     developerName: l,
     handleSort: i,
     handleCategory: c,
-    handlePrice: k,
-    handleSearchSelect: g,
+    handlePrice: w,
+    handleSearchSelect: y,
     t: p,
-    getCategoryLocale: y,
+    getCategoryLocale: b,
     priceOptions: f,
-    wrapChildren: P,
-    baseSearch: B
-  } = I(), b = bt(p), $ = ((S = b.find((T) => T.value === r.sortBy)) == null ? void 0 : S.name) || p("sort.sort"), d = y(r.category), { resourceType: u } = r || {}, s = (x = f.find((T) => T.value === r.price)) == null ? void 0 : x.name;
-  return /* @__PURE__ */ h(D, { display: "flex", alignItems: "flex-start", height: "100%", children: [
+    wrapChildren: C,
+    baseSearch: T
+  } = I(), x = bt(p), B = ((k = x.find((h) => h.value === r.sortBy)) == null ? void 0 : k.name) || p("sort.sort"), d = b(r.category), { resourceType: u } = r || {}, s = Bt(u), P = ($ = f.find((h) => h.value === r.price)) == null ? void 0 : $.name;
+  return /* @__PURE__ */ g(D, { display: "flex", alignItems: "flex-start", height: "100%", children: [
     /* @__PURE__ */ t(ae, { mdDown: !0, children: /* @__PURE__ */ t(Z, {}) }),
-    /* @__PURE__ */ h(jt, { children: [
-      /* @__PURE__ */ h(Gt, { children: [
-        /* @__PURE__ */ h(D, { className: "filter-bar", display: "flex", alignItems: "center", children: [
-          B ? /* @__PURE__ */ t(ee, { className: "bl-search-container", placeholder: p("common.searchStore") }) : /* @__PURE__ */ t(te, { onSelect: g, wrapChildren: P }),
-          /* @__PURE__ */ h(D, { mt: 0, ml: "16px", className: "filter-container", children: [
+    /* @__PURE__ */ g(Gt, { children: [
+      /* @__PURE__ */ g(Ut, { children: [
+        /* @__PURE__ */ g(D, { className: "filter-bar", display: "flex", alignItems: "center", children: [
+          T ? /* @__PURE__ */ t(ee, { className: "bl-search-container", placeholder: p("common.searchStore") }) : /* @__PURE__ */ t(te, { onSelect: y, wrapChildren: C }),
+          /* @__PURE__ */ g(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: b,
-                title: $,
+                options: x,
+                title: B,
                 icon: /* @__PURE__ */ t($e, {}),
-                onChange: (T) => {
-                  i(T);
+                onChange: (h) => {
+                  i(h);
                 }
               }
             )
           ] })
         ] }),
-        /* @__PURE__ */ h(D, { display: "flex", flexWrap: "wrap", alignItems: "center", mb: "16px", children: [
+        /* @__PURE__ */ g(D, { display: "flex", flexWrap: "wrap", alignItems: "center", mb: "16px", children: [
           /* @__PURE__ */ t(
             N,
             {
@@ -997,20 +997,20 @@ function qt() {
           /* @__PURE__ */ t(
             N,
             {
-              label: s,
+              label: P,
               onDelete: () => {
-                k(null);
+                w(null);
               }
             }
           ),
-          u && /* @__PURE__ */ t(N, { label: `${p("common.resourceType")}: ${u}` })
+          s && /* @__PURE__ */ t(N, { label: `${p("common.resourceType")}: ${s}` })
         ] })
       ] }),
       /* @__PURE__ */ t(qe, { FallbackComponent: de, children: /* @__PURE__ */ t("div", { style: { position: "relative", flex: 1, overflow: "auto" }, children: /* @__PURE__ */ t(Y, { blocklets: n }) }) })
     ] })
   ] });
 }
-const jt = C("main")`
+const Gt = S("main")`
   display: flex;
   flex-direction: column;
   flex: 1;
@@ -1054,7 +1054,7 @@ const jt = C("main")`
       font-size: 12px;
     }
   }
-`, Gt = C("div")`
+`, Ut = S("div")`
   position: sticky;
   top: 0;
   z-index: 9;
@@ -1100,9 +1100,9 @@ function ye(e) {
       }
     `
   };
-  return /* @__PURE__ */ h(V, { ...e, children: [
+  return /* @__PURE__ */ g(V, { ...e, children: [
     /* @__PURE__ */ t(Be, { styles: l.autocomplete }),
-    /* @__PURE__ */ t(qt, {})
+    /* @__PURE__ */ t(jt, {})
   ] });
 }
 ye.propTypes = fe;

package/lib/libs/utils.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.urlStringify = exports.toColorRgb = exports.replaceTranslate = exports.removeUndefined = exports.isMobileScreen = exports.getSortOptions = exports.getPrices = exports.getCurrentPage = exports.getCategoryOptions = exports.formatError = exports.filterBlockletByPrice = exports.debounced = void 0;
+exports.urlStringify = exports.toColorRgb = exports.replaceTranslate = exports.removeUndefined = exports.isMobileScreen = exports.getSortOptions = exports.getPrices = exports.getDisplayedResourceType = exports.getCurrentPage = exports.getCategoryOptions = exports.formatError = exports.filterBlockletByPrice = exports.debounced = void 0;
 var _cloneDeep = _interopRequireDefault(require("lodash/cloneDeep"));
 var _color = _interopRequireDefault(require("color"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -127,4 +127,6 @@ function debouncePromise(fn, time) {
   };
 }
 const debounced = debouncePromise(items => Promise.resolve(items), 300);
-exports.debounced = debounced;
+exports.debounced = debounced;
+const getDisplayedResourceType = resourceType => (resourceType || '').split('.').slice(-1)[0];
+exports.getDisplayedResourceType = getDisplayedResourceType;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/list",
-  "version": "0.12.58",
+  "version": "0.12.60",
   "description": "Common ux components of blocklet",
   "publishConfig": {
     "access": "public"
@@ -52,7 +52,7 @@
   "dependencies": {
     "@algolia/autocomplete-js": "^1.7.1",
     "@algolia/autocomplete-theme-classic": "^1.7.1",
-    "@arcblock/ux": "^2.8.20",
+    "@arcblock/ux": "^2.8.23",
     "@emotion/react": "^11.10.0",
     "@emotion/styled": "^11.10.0",
     "@mui/icons-material": "^5.14.16",
@@ -83,5 +83,5 @@
     "prettier": "^2.7.1",
     "vite": "^4.4.9"
   },
-  "gitHead": "6f05f8922a8a864b663bf8d089ac280cc7fd5614"
+  "gitHead": "2c121d9ae8c79da4171866d563079744e1d2df41"
 }