@blocklet/list 0.8.30 → 0.8.33

package/lib/components/list/index.js

@@ -3,11 +3,156 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.default = BlockletList;
 
-var _list = _interopRequireDefault(require("./list"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _Empty = _interopRequireDefault(require("@arcblock/ux/lib/Empty"));
+
+var _Alert = _interopRequireDefault(require("@arcblock/ux/lib/Alert"));
+
+var _Box = _interopRequireDefault(require("@mui/material/Box"));
+
+var _Grid = _interopRequireDefault(require("@mui/material/Grid"));
+
+var _CircularProgress = _interopRequireDefault(require("@mui/material/CircularProgress"));
+
+var _empty = require("./empty");
+
+var _filter = require("../../contexts/filter");
+
+var _utils = require("../../libs/utils");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+const _excluded = ["blocklets"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-var _default = _list.default;
-exports.default = _default;
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
+function BlockletList(_ref) {
+  let {
+    blocklets
+  } = _ref,
+      rest = _objectWithoutProperties(_ref, _excluded);
+
+  const {
+    blockletRender,
+    errors,
+    loadings,
+    selectedCategory,
+    blockletList,
+    getCategoryLocale,
+    filters,
+    t
+  } = (0, _filter.useFilterContext)();
+  const showFilterTip = !!selectedCategory || !!filters.price;
+
+  if (errors.fetchBlockletsError) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Alert.default, {
+      type: "error",
+      variant: "icon",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        children: (0, _utils.formatError)(errors.fetchBlockletsError)
+      })
+    });
+  }
+
+  if (loadings.fetchBlockletsLoading) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_CircularProgress.default, {})
+    });
+  }
+
+  if (filters.keyword && showFilterTip && blockletList.length === 0) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(CustomEmpty, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_empty.EmptyTitle, {
+        primaryStart: t('blocklet.noBlockletPart1'),
+        primaryEnd: t('blocklet.noBlockletPart2'),
+        filter: filters.keyword
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_empty.NoResultsTips, {
+        keywordTip: true,
+        filterTip: true
+      })]
+    });
+  }
+
+  if (filters.keyword && blockletList.length === 0) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(CustomEmpty, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_empty.EmptyTitle, {
+        primaryStart: t('blocklet.noBlockletPart1'),
+        primaryEnd: t('blocklet.noBlockletPart2'),
+        filter: filters.keyword
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_empty.NoResultsTips, {
+        keywordTip: true
+      })]
+    });
+  }
+
+  if (showFilterTip && blockletList.length === 0) {
+    const categoryLocale = getCategoryLocale(selectedCategory);
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(CustomEmpty, {
+      children: [categoryLocale ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_empty.EmptyTitle, {
+        primaryStart: t('blocklet.noCategoryResults1'),
+        primaryEnd: t('blocklet.noCategoryResults2'),
+        filter: categoryLocale
+      }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_empty.NoResults, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_empty.NoResultsTips, {
+        filterTip: true
+      })]
+    });
+  }
+
+  if (blockletList.length === 0) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(CustomEmpty, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_empty.NoResults, {})
+    });
+  }
+
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledGrid, _objectSpread(_objectSpread({
+    container: true
+  }, rest), {}, {
+    children: blocklets.map(blocklet => /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledGridItem, {
+      item: true,
+      lg: 4,
+      md: 6,
+      sm: 6,
+      xs: 12,
+      "data-blocklet-did": blocklet.did,
+      children: blockletRender({
+        blocklet,
+        blocklets: blockletList
+      })
+    }, blocklet.did))
+  }));
+}
+
+BlockletList.propTypes = {
+  blocklets: _propTypes.default.array.isRequired
+};
+BlockletList.defaultProps = {};
+const StyledGrid = (0, _styledComponents.default)(_Grid.default).withConfig({
+  displayName: "list__StyledGrid",
+  componentId: "sc-1guvpon-0"
+})(["&.MuiGrid-root{width:auto;margin:0 -16px;}"]);
+const StyledGridItem = (0, _styledComponents.default)(_Grid.default).withConfig({
+  displayName: "list__StyledGridItem",
+  componentId: "sc-1guvpon-1"
+})(["@media (max-width:", "px){&.MuiGrid-item{padding-bottom:0px;}}@media (min-width:", "px){&.MuiGrid-item{margin-bottom:", ";}}"], props => props.theme.breakpoints.values.sm, props => props.theme.breakpoints.values.sm, props => props.theme.spacing(2));
+const CustomEmpty = (0, _styledComponents.default)(_Empty.default).withConfig({
+  displayName: "list__CustomEmpty",
+  componentId: "sc-1guvpon-2"
+})(["text-align:center;.primary{color:", ";}.tips{margin-top:", ";}"], props => props.theme.palette.primary.main, props => props.theme.spacing(1));

package/lib/contexts/filter.js

@@ -48,7 +48,8 @@ function FilterProvider(_ref) {
     endpoint,
     locale,
     blockletRender,
-    onFilterChange
+    onFilterChange,
+    extraFilter
   } = _ref;
 
   const storeApi = _axios.default.create({
@@ -135,7 +136,9 @@ function FilterProvider(_ref) {
       var _ref2, _item$description, _item$version;
 
       return ((_ref2 = (item === null || item === void 0 ? void 0 : item.title) || (item === null || item === void 0 ? void 0 : item.name)) === null || _ref2 === void 0 ? void 0 : _ref2.toLocaleLowerCase().includes(lowerSearch)) || ((_item$description = item.description) === null || _item$description === void 0 ? void 0 : _item$description.toLocaleLowerCase().includes(lowerSearch)) || (item === null || item === void 0 ? void 0 : (_item$version = item.version) === null || _item$version === void 0 ? void 0 : _item$version.toLocaleLowerCase().includes(lowerSearch));
-    }); // 排序
+    }); // 用户传入的过滤函数
+
+    blocklets = extraFilter(blocklets); // 排序
 
     return (0, _orderBy.default)(blocklets, [sortMap[finalFilters.sortBy]], [finalFilters.sortDirection]);
   }, [allBlocklets, finalFilters]);

package/lib/libs/prop-types.js

@@ -18,6 +18,7 @@ const propTypes = {
     category: _propTypes.default.string,
     developer: _propTypes.default.string
   }),
+  extraFilter: _propTypes.default.func,
   endpoint: _propTypes.default.string.isRequired,
   blockletRender: _propTypes.default.func.isRequired,
   onFilterChange: _propTypes.default.func,
@@ -29,6 +30,7 @@ const defaultProps = {
   baseUrl: null,
   locale: 'zh',
   filters: {},
-  onFilterChange: () => {}
+  onFilterChange: () => {},
+  extraFilter: list => list
 };
 exports.defaultProps = defaultProps;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/list",
-  "version": "0.8.30",
+  "version": "0.8.33",
   "description": "Common ux components of blocklet",
   "publishConfig": {
     "access": "public"
@@ -38,7 +38,7 @@
     "react": ">=18.1.0"
   },
   "dependencies": {
-    "@arcblock/ux": "^2.1.15",
+    "@arcblock/ux": "^2.1.17",
     "@emotion/react": "^11.9.0",
     "@emotion/styled": "^11.8.1",
     "@mui/icons-material": "^5.6.2",
@@ -62,5 +62,5 @@
     "eslint": "^8.16.0",
     "prettier": "^2.6.2"
   },
-  "gitHead": "b19c3408da3da4b86ad617086e0ae2deb831508c"
+  "gitHead": "5e7c02cb3dfd0edff3f8290509f754b10bbc61bc"
 }

package/src/components/list/index.js

@@ -1,3 +1,126 @@
-import BlockletList from './list';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+import Empty from '@arcblock/ux/lib/Empty';
+import Alert from '@arcblock/ux/lib/Alert';
+import Box from '@mui/material/Box';
+import Grid from '@mui/material/Grid';
+import CircularProgress from '@mui/material/CircularProgress';
 
-export default BlockletList;
+import { NoResults, EmptyTitle, NoResultsTips } from './empty';
+import { useFilterContext } from '../../contexts/filter';
+import { formatError } from '../../libs/utils';
+
+export default function BlockletList({ blocklets, ...rest }) {
+  const { blockletRender, errors, loadings, selectedCategory, blockletList, getCategoryLocale, filters, t } =
+    useFilterContext();
+
+  const showFilterTip = !!selectedCategory || !!filters.price;
+
+  if (errors.fetchBlockletsError) {
+    return (
+      <Alert type="error" variant="icon">
+        <div>{formatError(errors.fetchBlockletsError)}</div>
+      </Alert>
+    );
+  }
+  if (loadings.fetchBlockletsLoading) {
+    return (
+      <Box display="flex" alignItems="center" justifyContent="center">
+        <CircularProgress />
+      </Box>
+    );
+  }
+  if (filters.keyword && showFilterTip && blockletList.length === 0) {
+    return (
+      <CustomEmpty>
+        <EmptyTitle
+          primaryStart={t('blocklet.noBlockletPart1')}
+          primaryEnd={t('blocklet.noBlockletPart2')}
+          filter={filters.keyword}
+        />
+        <NoResultsTips keywordTip filterTip />
+      </CustomEmpty>
+    );
+  }
+  if (filters.keyword && blockletList.length === 0) {
+    return (
+      <CustomEmpty>
+        <EmptyTitle
+          primaryStart={t('blocklet.noBlockletPart1')}
+          primaryEnd={t('blocklet.noBlockletPart2')}
+          filter={filters.keyword}
+        />
+        <NoResultsTips keywordTip />
+      </CustomEmpty>
+    );
+  }
+  if (showFilterTip && blockletList.length === 0) {
+    const categoryLocale = getCategoryLocale(selectedCategory);
+    return (
+      <CustomEmpty>
+        {categoryLocale ? (
+          <EmptyTitle
+            primaryStart={t('blocklet.noCategoryResults1')}
+            primaryEnd={t('blocklet.noCategoryResults2')}
+            filter={categoryLocale}
+          />
+        ) : (
+          <NoResults />
+        )}
+        <NoResultsTips filterTip />
+      </CustomEmpty>
+    );
+  }
+  if (blockletList.length === 0) {
+    return (
+      <CustomEmpty>
+        <NoResults />
+      </CustomEmpty>
+    );
+  }
+
+  return (
+    <StyledGrid container {...rest}>
+      {blocklets.map((blocklet) => (
+        <StyledGridItem item lg={4} md={6} sm={6} xs={12} key={blocklet.did} data-blocklet-did={blocklet.did}>
+          {blockletRender({ blocklet, blocklets: blockletList })}
+        </StyledGridItem>
+      ))}
+    </StyledGrid>
+  );
+}
+
+BlockletList.propTypes = {
+  blocklets: PropTypes.array.isRequired,
+};
+
+BlockletList.defaultProps = {};
+
+const StyledGrid = styled(Grid)`
+  &.MuiGrid-root {
+    width: auto;
+    margin: 0 -16px;
+  }
+`;
+
+const StyledGridItem = styled(Grid)`
+  @media (max-width: ${(props) => props.theme.breakpoints.values.sm}px) {
+    &.MuiGrid-item {
+      padding-bottom: 0px;
+    }
+  }
+  @media (min-width: ${(props) => props.theme.breakpoints.values.sm}px) {
+    &.MuiGrid-item {
+      margin-bottom: ${(props) => props.theme.spacing(2)};
+    }
+  }
+`;
+const CustomEmpty = styled(Empty)`
+  text-align: center;
+  .primary {
+    color: ${(props) => props.theme.palette.primary.main};
+  }
+  .tips {
+    margin-top: ${(props) => props.theme.spacing(1)};
+  }
+`;

package/src/contexts/filter.js

@@ -12,7 +12,7 @@ import { propTypes, defaultProps } from '../libs/prop-types';
 const Filter = createContext({});
 const { Provider, Consumer } = Filter;
 
-function FilterProvider({ filters, children, baseUrl, endpoint, locale, blockletRender, onFilterChange }) {
+function FilterProvider({ filters, children, baseUrl, endpoint, locale, blockletRender, onFilterChange, extraFilter }) {
   const storeApi = axios.create({
     baseURL: endpoint,
   });
@@ -78,6 +78,8 @@ function FilterProvider({ filters, children, baseUrl, endpoint, locale, blocklet
         item?.version?.toLocaleLowerCase().includes(lowerSearch)
       );
     });
+    // 用户传入的过滤函数
+    blocklets = extraFilter(blocklets);
     // 排序
     return orderBy(blocklets, [sortMap[finalFilters.sortBy]], [finalFilters.sortDirection]);
   }, [allBlocklets, finalFilters]);

package/src/libs/prop-types.js

@@ -9,6 +9,7 @@ const propTypes = {
     category: PropTypes.string,
     developer: PropTypes.string,
   }),
+  extraFilter: PropTypes.func,
   endpoint: PropTypes.string.isRequired,
   blockletRender: PropTypes.func.isRequired,
   onFilterChange: PropTypes.func,
@@ -21,6 +22,7 @@ const defaultProps = {
   locale: 'zh',
   filters: {},
   onFilterChange: () => {},
+  extraFilter: (list) => list,
 };
 
 export { propTypes, defaultProps };

package/lib/components/list/list.js

@@ -1,158 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = BlockletList;
-
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-
-var _Empty = _interopRequireDefault(require("@arcblock/ux/lib/Empty"));
-
-var _Alert = _interopRequireDefault(require("@arcblock/ux/lib/Alert"));
-
-var _Box = _interopRequireDefault(require("@mui/material/Box"));
-
-var _Grid = _interopRequireDefault(require("@mui/material/Grid"));
-
-var _CircularProgress = _interopRequireDefault(require("@mui/material/CircularProgress"));
-
-var _empty = require("./empty");
-
-var _filter = require("../../contexts/filter");
-
-var _utils = require("../../libs/utils");
-
-var _jsxRuntime = require("react/jsx-runtime");
-
-const _excluded = ["blocklets"];
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
-function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
-
-function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-
-function BlockletList(_ref) {
-  let {
-    blocklets
-  } = _ref,
-      rest = _objectWithoutProperties(_ref, _excluded);
-
-  const {
-    blockletRender,
-    errors,
-    loadings,
-    selectedCategory,
-    blockletList,
-    getCategoryLocale,
-    filters,
-    t
-  } = (0, _filter.useFilterContext)();
-  const showFilterTip = !!selectedCategory || !!filters.price;
-
-  if (errors.fetchBlockletsError) {
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Alert.default, {
-      type: "error",
-      variant: "icon",
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-        children: (0, _utils.formatError)(errors.fetchBlockletsError)
-      })
-    });
-  }
-
-  if (loadings.fetchBlockletsLoading) {
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
-      display: "flex",
-      alignItems: "center",
-      justifyContent: "center",
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_CircularProgress.default, {})
-    });
-  }
-
-  if (filters.keyword && showFilterTip && blockletList.length === 0) {
-    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(CustomEmpty, {
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_empty.EmptyTitle, {
-        primaryStart: t('blocklet.noBlockletPart1'),
-        primaryEnd: t('blocklet.noBlockletPart2'),
-        filter: filters.keyword
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_empty.NoResultsTips, {
-        keywordTip: true,
-        filterTip: true
-      })]
-    });
-  }
-
-  if (filters.keyword && blockletList.length === 0) {
-    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(CustomEmpty, {
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_empty.EmptyTitle, {
-        primaryStart: t('blocklet.noBlockletPart1'),
-        primaryEnd: t('blocklet.noBlockletPart2'),
-        filter: filters.keyword
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_empty.NoResultsTips, {
-        keywordTip: true
-      })]
-    });
-  }
-
-  if (showFilterTip && blockletList.length === 0) {
-    const categoryLocale = getCategoryLocale(selectedCategory);
-    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(CustomEmpty, {
-      children: [categoryLocale ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_empty.EmptyTitle, {
-        primaryStart: t('blocklet.noCategoryResults1'),
-        primaryEnd: t('blocklet.noCategoryResults2'),
-        filter: categoryLocale
-      }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_empty.NoResults, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_empty.NoResultsTips, {
-        filterTip: true
-      })]
-    });
-  }
-
-  if (blockletList.length === 0) {
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(CustomEmpty, {
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_empty.NoResults, {})
-    });
-  }
-
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledGrid, _objectSpread(_objectSpread({
-    container: true
-  }, rest), {}, {
-    children: blocklets.map(blocklet => /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledGridItem, {
-      item: true,
-      lg: 4,
-      md: 6,
-      sm: 6,
-      xs: 12,
-      "data-blocklet-did": blocklet.did,
-      children: blockletRender({
-        blocklet,
-        blocklets: blockletList
-      })
-    }, blocklet.did))
-  }));
-}
-
-BlockletList.propTypes = {
-  blocklets: _propTypes.default.array.isRequired
-};
-BlockletList.defaultProps = {};
-const StyledGrid = (0, _styledComponents.default)(_Grid.default).withConfig({
-  displayName: "list__StyledGrid",
-  componentId: "sc-jzgpev-0"
-})(["&.MuiGrid-root{width:auto;margin:0 -16px;}"]);
-const StyledGridItem = (0, _styledComponents.default)(_Grid.default).withConfig({
-  displayName: "list__StyledGridItem",
-  componentId: "sc-jzgpev-1"
-})(["@media (max-width:", "px){&.MuiGrid-item{padding-bottom:0px;}}@media (min-width:", "px){&.MuiGrid-item{margin-bottom:", ";}}"], props => props.theme.breakpoints.values.sm, props => props.theme.breakpoints.values.sm, props => props.theme.spacing(2));
-const CustomEmpty = (0, _styledComponents.default)(_Empty.default).withConfig({
-  displayName: "list__CustomEmpty",
-  componentId: "sc-jzgpev-2"
-})(["text-align:center;.primary{color:", ";}.tips{margin-top:", ";}"], props => props.theme.palette.primary.main, props => props.theme.spacing(1));

package/src/components/list/list.js

@@ -1,126 +0,0 @@
-import PropTypes from 'prop-types';
-import styled from 'styled-components';
-import Empty from '@arcblock/ux/lib/Empty';
-import Alert from '@arcblock/ux/lib/Alert';
-import Box from '@mui/material/Box';
-import Grid from '@mui/material/Grid';
-import CircularProgress from '@mui/material/CircularProgress';
-
-import { NoResults, EmptyTitle, NoResultsTips } from './empty';
-import { useFilterContext } from '../../contexts/filter';
-import { formatError } from '../../libs/utils';
-
-export default function BlockletList({ blocklets, ...rest }) {
-  const { blockletRender, errors, loadings, selectedCategory, blockletList, getCategoryLocale, filters, t } =
-    useFilterContext();
-
-  const showFilterTip = !!selectedCategory || !!filters.price;
-
-  if (errors.fetchBlockletsError) {
-    return (
-      <Alert type="error" variant="icon">
-        <div>{formatError(errors.fetchBlockletsError)}</div>
-      </Alert>
-    );
-  }
-  if (loadings.fetchBlockletsLoading) {
-    return (
-      <Box display="flex" alignItems="center" justifyContent="center">
-        <CircularProgress />
-      </Box>
-    );
-  }
-  if (filters.keyword && showFilterTip && blockletList.length === 0) {
-    return (
-      <CustomEmpty>
-        <EmptyTitle
-          primaryStart={t('blocklet.noBlockletPart1')}
-          primaryEnd={t('blocklet.noBlockletPart2')}
-          filter={filters.keyword}
-        />
-        <NoResultsTips keywordTip filterTip />
-      </CustomEmpty>
-    );
-  }
-  if (filters.keyword && blockletList.length === 0) {
-    return (
-      <CustomEmpty>
-        <EmptyTitle
-          primaryStart={t('blocklet.noBlockletPart1')}
-          primaryEnd={t('blocklet.noBlockletPart2')}
-          filter={filters.keyword}
-        />
-        <NoResultsTips keywordTip />
-      </CustomEmpty>
-    );
-  }
-  if (showFilterTip && blockletList.length === 0) {
-    const categoryLocale = getCategoryLocale(selectedCategory);
-    return (
-      <CustomEmpty>
-        {categoryLocale ? (
-          <EmptyTitle
-            primaryStart={t('blocklet.noCategoryResults1')}
-            primaryEnd={t('blocklet.noCategoryResults2')}
-            filter={categoryLocale}
-          />
-        ) : (
-          <NoResults />
-        )}
-        <NoResultsTips filterTip />
-      </CustomEmpty>
-    );
-  }
-  if (blockletList.length === 0) {
-    return (
-      <CustomEmpty>
-        <NoResults />
-      </CustomEmpty>
-    );
-  }
-
-  return (
-    <StyledGrid container {...rest}>
-      {blocklets.map((blocklet) => (
-        <StyledGridItem item lg={4} md={6} sm={6} xs={12} key={blocklet.did} data-blocklet-did={blocklet.did}>
-          {blockletRender({ blocklet, blocklets: blockletList })}
-        </StyledGridItem>
-      ))}
-    </StyledGrid>
-  );
-}
-
-BlockletList.propTypes = {
-  blocklets: PropTypes.array.isRequired,
-};
-
-BlockletList.defaultProps = {};
-
-const StyledGrid = styled(Grid)`
-  &.MuiGrid-root {
-    width: auto;
-    margin: 0 -16px;
-  }
-`;
-
-const StyledGridItem = styled(Grid)`
-  @media (max-width: ${(props) => props.theme.breakpoints.values.sm}px) {
-    &.MuiGrid-item {
-      padding-bottom: 0px;
-    }
-  }
-  @media (min-width: ${(props) => props.theme.breakpoints.values.sm}px) {
-    &.MuiGrid-item {
-      margin-bottom: ${(props) => props.theme.spacing(2)};
-    }
-  }
-`;
-const CustomEmpty = styled(Empty)`
-  text-align: center;
-  .primary {
-    color: ${(props) => props.theme.palette.primary.main};
-  }
-  .tips {
-    margin-top: ${(props) => props.theme.spacing(1)};
-  }
-`;