@blocklet/list 0.8.31 → 0.8.34

package/lib/base.js

@@ -13,6 +13,10 @@ var _material = require("@mui/material");
 
 var _Face = _interopRequireDefault(require("@mui/icons-material/Face"));
 
+var _reactErrorBoundary = require("react-error-boundary");
+
+var _ErrorBoundary = require("@arcblock/ux/lib/ErrorBoundary");
+
 var _filter = require("./contexts/filter");
 
 var _customSelect = _interopRequireDefault(require("./components/custom-select"));
@@ -104,8 +108,11 @@ function ListBase() {
             handlePrice(null);
           }
         })]
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_list.default, {
-        blocklets: blockletList
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactErrorBoundary.ErrorBoundary, {
+        FallbackComponent: _ErrorBoundary.ErrorFallback,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_list.default, {
+          blocklets: blockletList
+        })
       })]
     })]
   });

package/lib/components/aside.js

@@ -33,7 +33,7 @@ function Aside() {
         value: filters.price,
         onChange: handlePrice
       })
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    }), categoryOptions.length > 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       style: {
         marginTop: '16px'
       },

package/lib/components/filter/icon.js

@@ -68,7 +68,7 @@ function FilterIcon() {
         onChange: v => {
           handelChange('price', v);
         }
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      }), categoryOptions.length > 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
         style: {
           marginTop: '16px'
         },

package/lib/components/list/index.js

@@ -3,11 +3,151 @@
 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 _Box = _interopRequireDefault(require("@mui/material/Box"));
+
+var _Grid = _interopRequireDefault(require("@mui/material/Grid"));
+
+var _CircularProgress = _interopRequireDefault(require("@mui/material/CircularProgress"));
+
+var _ErrorBoundary = require("@arcblock/ux/lib/ErrorBoundary");
+
+var _empty = require("./empty");
+
+var _filter = require("../../contexts/filter");
+
+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,
+    endpoint
+  } = (0, _filter.useFilterContext)();
+  const showFilterTip = !!selectedCategory || !!filters.price;
+
+  if (errors.fetchBlockletsError) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ErrorBoundary.ErrorFallback, {
+      error: new Error("Failed to fetch blocklets from ".concat(endpoint, ": ").concat(errors.fetchBlockletsError.message))
+    });
+  }
+
+  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

@@ -17,6 +17,8 @@ var _orderBy = _interopRequireDefault(require("lodash/orderBy"));
 
 var _axios = _interopRequireDefault(require("axios"));
 
+var _isArray = _interopRequireDefault(require("lodash/isArray"));
+
 var _utils = require("../libs/utils");
 
 var _locale = _interopRequireDefault(require("../assets/locale"));
@@ -44,11 +46,11 @@ function FilterProvider(_ref) {
   let {
     filters,
     children,
-    baseUrl,
     endpoint,
     locale,
     blockletRender,
-    onFilterChange
+    onFilterChange,
+    extraFilter
   } = _ref;
 
   const storeApi = _axios.default.create({
@@ -62,9 +64,14 @@ function FilterProvider(_ref) {
     run: fetchBlocklets
   } = (0, _ahooks.useRequest)(async () => {
     const {
-      data: list
+      data
     } = await storeApi.get('/api/blocklets.json');
-    return list;
+
+    if (!(0, _isArray.default)(data)) {
+      throw new Error('/api/blocklets.json response is not array');
+    }
+
+    return data;
   }, {
     initialData: [],
     manual: true
@@ -76,9 +83,14 @@ function FilterProvider(_ref) {
     run: fetchCategories
   } = (0, _ahooks.useRequest)(async () => {
     const {
-      data: list
+      data
     } = await storeApi.get('/api/blocklets/categories');
-    return list;
+
+    if (!(0, _isArray.default)(data)) {
+      throw new Error('/api/blocklets/categories response is not array');
+    }
+
+    return data;
   }, {
     initialData: [],
     manual: true
@@ -135,7 +147,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]);
@@ -171,7 +185,6 @@ function FilterProvider(_ref) {
     filters: finalFilters,
     selectedCategory,
     categoryList,
-    baseUrl,
     blockletRender,
     locale,
     categoryOptions,
@@ -231,9 +244,10 @@ function FilterProvider(_ref) {
     },
 
     get developerName() {
-      var _allBlocklets$find, _allBlocklets$find$ow;
+      var _blocklets$find, _blocklets$find$owner;
 
-      return ((_allBlocklets$find = allBlocklets.find(blocklet => blocklet.owner.did === finalFilters.developer)) === null || _allBlocklets$find === void 0 ? void 0 : (_allBlocklets$find$ow = _allBlocklets$find.owner) === null || _allBlocklets$find$ow === void 0 ? void 0 : _allBlocklets$find$ow.name) || '';
+      const blocklets = allBlocklets || [];
+      return ((_blocklets$find = blocklets.find(blocklet => blocklet.owner.did === finalFilters.developer)) === null || _blocklets$find === void 0 ? void 0 : (_blocklets$find$owner = _blocklets$find.owner) === null || _blocklets$find$owner === void 0 ? void 0 : _blocklets$find$owner.name) || '';
     }
 
   };

package/lib/libs/prop-types.js

@@ -18,17 +18,17 @@ 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,
-  baseUrl: _propTypes.default.string,
   locale: _propTypes.default.oneOf(['zh', 'en'])
 };
 exports.propTypes = propTypes;
 const defaultProps = {
-  baseUrl: null,
   locale: 'zh',
   filters: {},
-  onFilterChange: () => {}
+  onFilterChange: () => {},
+  extraFilter: list => list
 };
 exports.defaultProps = defaultProps;

package/lib/libs/utils.js

@@ -68,7 +68,9 @@ const getCategoryOptions = function getCategoryOptions() {
 
 exports.getCategoryOptions = getCategoryOptions;
 
-const getCategories = (list, developerDid) => {
+const getCategories = function getCategories() {
+  let list = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+  let developerDid = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
   const filterList = list.filter(item => developerDid ? item.owner.did === developerDid : true);
   const Categories = filterList.map(item => item.category);
   const res = new Map();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/list",
-  "version": "0.8.31",
+  "version": "0.8.34",
   "description": "Common ux components of blocklet",
   "publishConfig": {
     "access": "public"
@@ -38,7 +38,7 @@
     "react": ">=18.1.0"
   },
   "dependencies": {
-    "@arcblock/ux": "^2.1.16",
+    "@arcblock/ux": "^2.1.19",
     "@emotion/react": "^11.9.0",
     "@emotion/styled": "^11.8.1",
     "@mui/icons-material": "^5.6.2",
@@ -47,6 +47,7 @@
     "flat": "^5.0.2",
     "lodash": "^4.17.21",
     "prop-types": "^15.7.2",
+    "react-error-boundary": "^3.1.4",
     "styled-components": "5.3.5",
     "url-join": "^4.0.1"
   },
@@ -62,5 +63,5 @@
     "eslint": "^8.16.0",
     "prettier": "^2.6.2"
   },
-  "gitHead": "cc9c1156de04b1e1277a34fdc55a35bc36748383"
+  "gitHead": "fed8918e15b5bd8cb3f4bac84b32434b58dda21b"
 }

package/src/base.js

@@ -2,6 +2,8 @@ import styled from 'styled-components';
 import SortIcon from '@mui/icons-material/Sort';
 import { Box, Hidden } from '@mui/material';
 import FaceIcon from '@mui/icons-material/Face';
+import { ErrorBoundary } from 'react-error-boundary';
+import { ErrorFallback } from '@arcblock/ux/lib/ErrorBoundary';
 
 import { useFilterContext } from './contexts/filter';
 import CustomSelect from './components/custom-select';
@@ -76,7 +78,9 @@ function ListBase() {
             }}
           />
         </Box>
-        <BlockletList blocklets={blockletList} />
+        <ErrorBoundary FallbackComponent={ErrorFallback}>
+          <BlockletList blocklets={blockletList} />
+        </ErrorBoundary>
       </StyledMin>
     </Box>
   );

package/src/components/aside.js

@@ -12,14 +12,16 @@ function Aside() {
       <div>
         <FilterGroup title={t('common.price')} options={priceOptions} value={filters.price} onChange={handlePrice} />
       </div>
-      <div style={{ marginTop: '16px' }}>
-        <FilterGroup
-          title={t('common.category')}
-          options={categoryOptions}
-          value={selectedCategory}
-          onChange={handleCategory}
-        />
-      </div>
+      {categoryOptions.length > 0 && (
+        <div style={{ marginTop: '16px' }}>
+          <FilterGroup
+            title={t('common.category')}
+            options={categoryOptions}
+            value={selectedCategory}
+            onChange={handleCategory}
+          />
+        </div>
+      )}
     </StyledAside>
   );
 }

package/src/components/filter/icon.js

@@ -36,16 +36,18 @@ function FilterIcon() {
             handelChange('price', v);
           }}
         />
-        <div style={{ marginTop: '16px' }}>
-          <FilterGroup
-            title={t('common.category')}
-            options={categoryOptions}
-            value={selectedCategory}
-            onChange={(v) => {
-              handelChange('category', v);
-            }}
-          />
-        </div>
+        {categoryOptions.length > 0 && (
+          <div style={{ marginTop: '16px' }}>
+            <FilterGroup
+              title={t('common.category')}
+              options={categoryOptions}
+              value={selectedCategory}
+              onChange={(v) => {
+                handelChange('category', v);
+              }}
+            />
+          </div>
+        )}
       </Dialog>
     </StyledDiv>
   );

package/src/components/list/index.js

@@ -1,3 +1,125 @@
-import BlockletList from './list';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+import Empty from '@arcblock/ux/lib/Empty';
+import Box from '@mui/material/Box';
+import Grid from '@mui/material/Grid';
+import CircularProgress from '@mui/material/CircularProgress';
+import { ErrorFallback } from '@arcblock/ux/lib/ErrorBoundary';
 
-export default BlockletList;
+import { NoResults, EmptyTitle, NoResultsTips } from './empty';
+import { useFilterContext } from '../../contexts/filter';
+
+export default function BlockletList({ blocklets, ...rest }) {
+  const { blockletRender, errors, loadings, selectedCategory, blockletList, getCategoryLocale, filters, t, endpoint } =
+    useFilterContext();
+
+  const showFilterTip = !!selectedCategory || !!filters.price;
+
+  if (errors.fetchBlockletsError) {
+    return (
+      <ErrorFallback
+        error={new Error(`Failed to fetch blocklets from ${endpoint}: ${errors.fetchBlockletsError.message}`)}
+      />
+    );
+  }
+  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

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import { useRequest } from 'ahooks';
 import orderBy from 'lodash/orderBy';
 import axios from 'axios';
-// import joinUrl from 'url-join';
+import isArray from 'lodash/isArray';
 
 import { getCategories, filterBlockletByPrice, replaceTranslate, getPrices, getCategoryOptions } from '../libs/utils';
 import translations from '../assets/locale';
@@ -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, endpoint, locale, blockletRender, onFilterChange, extraFilter }) {
   const storeApi = axios.create({
     baseURL: endpoint,
   });
@@ -23,8 +23,11 @@ function FilterProvider({ filters, children, baseUrl, endpoint, locale, blocklet
     run: fetchBlocklets,
   } = useRequest(
     async () => {
-      const { data: list } = await storeApi.get('/api/blocklets.json');
-      return list;
+      const { data } = await storeApi.get('/api/blocklets.json');
+      if (!isArray(data)) {
+        throw new Error('/api/blocklets.json response is not array');
+      }
+      return data;
     },
     { initialData: [], manual: true }
   );
@@ -36,8 +39,11 @@ function FilterProvider({ filters, children, baseUrl, endpoint, locale, blocklet
     run: fetchCategories,
   } = useRequest(
     async () => {
-      const { data: list } = await storeApi.get('/api/blocklets/categories');
-      return list;
+      const { data } = await storeApi.get('/api/blocklets/categories');
+      if (!isArray(data)) {
+        throw new Error('/api/blocklets/categories response is not array');
+      }
+      return data;
     },
     { initialData: [], manual: true }
   );
@@ -59,7 +65,6 @@ function FilterProvider({ filters, children, baseUrl, endpoint, locale, blocklet
       popularity: sortByPopularity,
       publishAt: sortByPublish,
     };
-
     let blocklets = allBlocklets || [];
     // 按照付费/免费筛选
     blocklets = filterBlockletByPrice(blocklets, finalFilters.price);
@@ -78,6 +83,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]);
@@ -96,10 +103,8 @@ function FilterProvider({ filters, children, baseUrl, endpoint, locale, blocklet
 
     return replaceTranslate(translations[locale][key], data);
   };
-
   const categoryOptions = useMemo(() => getCategoryOptions(categoryList, locale), [categoryList, locale]);
   const priceOptions = getPrices(translate);
-
   const filterStore = {
     errors: { fetchBlockletsError, fetchCategoriesError },
     loadings: { fetchBlockletsLoading, fetchCategoriesLoading },
@@ -109,7 +114,6 @@ function FilterProvider({ filters, children, baseUrl, endpoint, locale, blocklet
     filters: finalFilters,
     selectedCategory,
     categoryList,
-    baseUrl,
     blockletRender,
     locale,
     categoryOptions,
@@ -155,7 +159,8 @@ function FilterProvider({ filters, children, baseUrl, endpoint, locale, blocklet
       return result;
     },
     get developerName() {
-      return allBlocklets.find((blocklet) => blocklet.owner.did === finalFilters.developer)?.owner?.name || '';
+      const blocklets = allBlocklets || [];
+      return blocklets.find((blocklet) => blocklet.owner.did === finalFilters.developer)?.owner?.name || '';
     },
   };
 

package/src/libs/prop-types.js

@@ -9,18 +9,18 @@ const propTypes = {
     category: PropTypes.string,
     developer: PropTypes.string,
   }),
+  extraFilter: PropTypes.func,
   endpoint: PropTypes.string.isRequired,
   blockletRender: PropTypes.func.isRequired,
   onFilterChange: PropTypes.func,
-  baseUrl: PropTypes.string,
   locale: PropTypes.oneOf(['zh', 'en']),
 };
 
 const defaultProps = {
-  baseUrl: null,
   locale: 'zh',
   filters: {},
   onFilterChange: () => {},
+  extraFilter: (list) => list,
 };
 
 export { propTypes, defaultProps };

package/src/libs/utils.js

@@ -44,7 +44,7 @@ const getCategoryOptions = (list = [], locale = 'en') => {
  * @param {*} developerDid
  * @returns
  */
-const getCategories = (list, developerDid) => {
+const getCategories = (list = [], developerDid = null) => {
   const filterList = list.filter((item) => (developerDid ? item.owner.did === developerDid : true));
   const Categories = filterList.map((item) => item.category);
   const res = new Map();

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)};
-  }
-`;