@blocklet/list 0.8.21 → 0.8.24

package/lib/base.js

@@ -13,11 +13,13 @@ var _Sort = _interopRequireDefault(require("@mui/icons-material/Sort"));
 
 var _material = require("@mui/material");
 
+var _Face = _interopRequireDefault(require("@mui/icons-material/Face"));
+
 var _filter = require("./contexts/filter");
 
 var _customSelect = _interopRequireDefault(require("./components/custom-select"));
 
-var _filterAuthor = _interopRequireDefault(require("./components/filter-author"));
+var _filter2 = require("./components/filter");
 
 var _utils = require("./libs/utils");
 
@@ -27,12 +29,10 @@ var _aside = _interopRequireDefault(require("./components/aside"));
 
 var _search = _interopRequireDefault(require("./components/search"));
 
-var _filterMobile = _interopRequireDefault(require("./components/filter-mobile"));
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 const ListBase = () => {
-  var _getSortOptions$find;
+  var _sortOptions$find, _priceOptions$find;
 
   const {
     handleDeveloper,
@@ -40,8 +40,16 @@ const ListBase = () => {
     filters,
     developerName,
     handleSort,
-    t
+    handleCategory,
+    handlePrice,
+    t,
+    getCategoryLocale,
+    priceOptions
   } = (0, _filter.useFilterContext)();
+  const sortOptions = (0, _utils.getSortOptions)(t);
+  const sortLocale = ((_sortOptions$find = sortOptions.find(f => f.value === filters.sortBy)) === null || _sortOptions$find === void 0 ? void 0 : _sortOptions$find.name) || t('sort.sort');
+  const categoryLocale = getCategoryLocale(filters.category);
+  const priceLocale = (_priceOptions$find = priceOptions.find(price => price.value === filters.price)) === null || _priceOptions$find === void 0 ? void 0 : _priceOptions$find.name;
   return /*#__PURE__*/_react.default.createElement(_material.Box, {
     display: "flex",
     alignItems: "flex-start",
@@ -49,53 +57,48 @@ const ListBase = () => {
   }, /*#__PURE__*/_react.default.createElement(_material.Hidden, {
     mdDown: true
   }, /*#__PURE__*/_react.default.createElement(_aside.default, null)), /*#__PURE__*/_react.default.createElement(StyledMin, null, /*#__PURE__*/_react.default.createElement(_material.Box, {
-    className: "marketplace-header",
+    className: "filter-bar",
     display: "flex",
     alignItems: "center"
-  }, /*#__PURE__*/_react.default.createElement(_material.Hidden, {
-    mdDown: true
-  }, !!filters.developer && /*#__PURE__*/_react.default.createElement(_filterAuthor.default, {
-    user: developerName,
-    deleteUserTag: () => {
-      handleDeveloper(null);
-    }
-  })), /*#__PURE__*/_react.default.createElement(_material.Box, {
-    mt: 0,
-    className: "searchContainer"
-  }, /*#__PURE__*/_react.default.createElement(_material.Hidden, {
-    mdUp: true
   }, /*#__PURE__*/_react.default.createElement(StyledSearch, {
-    className: "search",
+    className: "search-container",
     placeholder: t('common.searchStore')
-  }))), /*#__PURE__*/_react.default.createElement(_material.Box, {
+  }), /*#__PURE__*/_react.default.createElement(_material.Box, {
     mt: 0,
-    ml: "10px",
-    className: "filterContainer"
+    ml: "16px",
+    className: "filter-container"
   }, /*#__PURE__*/_react.default.createElement(_material.Hidden, {
     mdUp: true
-  }, /*#__PURE__*/_react.default.createElement(_filterMobile.default, null)), /*#__PURE__*/_react.default.createElement(_customSelect.default, {
+  }, /*#__PURE__*/_react.default.createElement(_filter2.FilterIcon, null)), /*#__PURE__*/_react.default.createElement(_customSelect.default, {
     value: filters.sortBy,
-    options: (0, _utils.getSortOptions)(t),
-    title: ((_getSortOptions$find = (0, _utils.getSortOptions)(t).find(f => f.value === filters.sortBy)) === null || _getSortOptions$find === void 0 ? void 0 : _getSortOptions$find.name) || t('sort.sort'),
+    options: sortOptions,
+    title: sortLocale,
     icon: /*#__PURE__*/_react.default.createElement(_Sort.default, null),
     onChange: v => {
       handleSort(v);
     }
-  }))), /*#__PURE__*/_react.default.createElement(_material.Hidden, {
-    mdUp: true
-  }, /*#__PURE__*/_react.default.createElement(_material.Box, {
+  }))), /*#__PURE__*/_react.default.createElement(_material.Box, {
     display: "flex",
     flexWrap: "wrap",
-    alignItems: "center"
-  }, !!filters.developer && /*#__PURE__*/_react.default.createElement(_filterAuthor.default, {
-    user: developerName,
-    deleteUserTag: () => {
+    alignItems: "center",
+    mb: "16px"
+  }, /*#__PURE__*/_react.default.createElement(_filter2.CustomChip, {
+    label: developerName,
+    icon: /*#__PURE__*/_react.default.createElement(_Face.default, null),
+    onDelete: () => {
       handleDeveloper(null);
-    },
-    style: {
-      marginBottom: '16px'
     }
-  }))), /*#__PURE__*/_react.default.createElement(_list.default, {
+  }), /*#__PURE__*/_react.default.createElement(_filter2.CustomChip, {
+    label: categoryLocale,
+    onDelete: () => {
+      handleCategory(null);
+    }
+  }), /*#__PURE__*/_react.default.createElement(_filter2.CustomChip, {
+    label: priceLocale,
+    onDelete: () => {
+      handlePrice(null);
+    }
+  })), /*#__PURE__*/_react.default.createElement(_list.default, {
     blocklets: blockletList
   })));
 };
@@ -103,7 +106,7 @@ const ListBase = () => {
 const StyledMin = _styledComponents.default.main.withConfig({
   displayName: "base__StyledMin",
   componentId: "sc-wumzlv-0"
-})(["flex:1;width:100%;min-width:0;.marketplace-header{justify-content:space-between;margin-bottom:20px;}.sort-button{white-space:nowrap;}.search{margin-left:0px;}@media (max-width:", "px){.searchContainer{flex:1;}.search{width:100%;}.filterContainer{flex:1;display:flex;justify-content:flex-end;}}@media (max-width:750px){.searchContainer{width:100%;}.filterContainer{width:100%;margin-left:0;display:flex;justify-content:flex-start;}.search{margin-bottom:20px;width:100%;}.marketplace-header{display:flex;flex-direction:column;align-items:flex-start;}}@media (max-width:", "px){.sort-button{font-size:12px;}}"], props => props.theme.breakpoints.values.md, props => props.theme.breakpoints.values.md);
+})(["flex:1;width:100%;min-width:0;.filter-bar{justify-content:space-between;margin-bottom:", ";}.sort-button{white-space:nowrap;}.search-container{flex:2;margin-left:0px;}.filter-container{flex:1;display:flex;justify-content:flex-end;}@media (max-width:", "px){.search-container{width:100%;margin-bottom:", ";}.filter-container{margin-left:0;display:flex;justify-content:flex-start;}.filter-bar{display:flex;flex-direction:column;align-items:flex-start;}}@media (max-width:", "px){.sort-button{font-size:12px;}}"], props => props.theme.spacing(2), props => props.theme.breakpoints.values.md, props => props.theme.spacing(2), props => props.theme.breakpoints.values.md);
 
 const StyledSearch = (0, _styledComponents.default)(_search.default).withConfig({
   displayName: "base__StyledSearch",

package/lib/components/aside.js

@@ -0,0 +1,53 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _filter = require("../contexts/filter");
+
+var _filter2 = require("./filter");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const Aside = () => {
+  const {
+    selectedCategory,
+    handleCategory,
+    t,
+    handlePrice,
+    filters,
+    categoryOptions,
+    priceOptions
+  } = (0, _filter.useFilterContext)();
+  return /*#__PURE__*/_react.default.createElement(StyledAside, null, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_filter2.FilterGroup, {
+    title: t('common.price'),
+    options: priceOptions,
+    value: filters.price,
+    onChange: handlePrice
+  })), /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      marginTop: '16px'
+    }
+  }, /*#__PURE__*/_react.default.createElement(_filter2.FilterGroup, {
+    title: t('common.category'),
+    options: categoryOptions,
+    value: selectedCategory,
+    onChange: handleCategory
+  })));
+};
+
+const StyledAside = _styledComponents.default.aside.withConfig({
+  displayName: "aside__StyledAside",
+  componentId: "sc-1wkvsv6-0"
+})(["width:220px;margin-right:", ";height:100%;"], props => props.theme.spacing(2));
+
+Aside.propTypes = {};
+Aside.defaultProps = {};
+var _default = Aside;
+exports.default = _default;

package/lib/components/{filter-author.js → filter/custom-chip.js}

@@ -13,11 +13,7 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
 
 var _material = require("@mui/material");
 
-var _Face = _interopRequireDefault(require("@mui/icons-material/Face"));
-
-var _filter = require("../contexts/filter");
-
-const _excluded = ["user", "deleteUserTag"];
+const _excluded = ["label", "icon", "onDelete"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -26,38 +22,35 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
 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; }
 
 const StyleDiv = _styledComponents.default.div.withConfig({
-  displayName: "filter-author__StyleDiv",
-  componentId: "sc-hnnc9f-0"
-})([".MuiChip-root{border-radius:4px;height:initial;text-transform:capitalize;}"]);
+  displayName: "custom-chip__StyleDiv",
+  componentId: "sc-4q1qqt-0"
+})([".MuiChip-root{border-radius:4px;height:initial;text-transform:capitalize;margin-right:", ";padding:4px 0;}"], props => props.theme.spacing(2));
 
-const FilterAuthor = _ref => {
+const FilterChip = _ref => {
   let {
-    user,
-    deleteUserTag
+    label,
+    icon,
+    onDelete
   } = _ref,
       containerProps = _objectWithoutProperties(_ref, _excluded);
 
-  const {
-    t
-  } = (0, _filter.useFilterContext)();
-  if (!user) return null;
+  if (!label) return null;
   return /*#__PURE__*/_react.default.createElement(StyleDiv, containerProps, /*#__PURE__*/_react.default.createElement(_material.Chip, {
-    icon: /*#__PURE__*/_react.default.createElement(_Face.default, null),
-    label: t('blocklet.owner', {
-      name: user
-    }),
-    onDelete: () => {
-      deleteUserTag();
-    }
+    icon: icon,
+    label: label,
+    onDelete: onDelete
   }));
 };
 
-FilterAuthor.propTypes = {
-  user: _propTypes.default.string.isRequired,
-  deleteUserTag: _propTypes.default.func
+FilterChip.propTypes = {
+  label: _propTypes.default.string,
+  onDelete: _propTypes.default.func,
+  icon: _propTypes.default.element
 };
-FilterAuthor.defaultProps = {
-  deleteUserTag: () => {}
+FilterChip.defaultProps = {
+  onDelete: () => {},
+  icon: null,
+  label: null
 };
-var _default = FilterAuthor;
+var _default = FilterChip;
 exports.default = _default;

package/lib/components/{filter-mobile/content.js → filter/group.js}

@@ -13,7 +13,7 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-function Content(_ref) {
+function FilterGroup(_ref) {
   let {
     options,
     onChange,
@@ -25,8 +25,10 @@ function Content(_ref) {
   }, title), /*#__PURE__*/_react.default.createElement("div", {
     className: "list"
   }, options.map(item => {
-    return /*#__PURE__*/_react.default.createElement("span", {
+    return /*#__PURE__*/_react.default.createElement("div", {
+      title: item.name,
       key: item.value,
+      "data-cy": "filter",
       className: value === item.value ? 'select item' : 'item',
       onClick: () => onChange(item.value)
     }, item.name);
@@ -34,18 +36,18 @@ function Content(_ref) {
 }
 
 const StyledDiv = _styledComponents.default.div.withConfig({
-  displayName: "content__StyledDiv",
-  componentId: "sc-16pmlm6-0"
-})([".title{font-size:18px;font-weight:bold;}.list{display:flex;flex-direction:column;align-items:flex-start;margin-left:8px;}.item{margin:16px 0;cursor:pointer;}.select{color:", ";}"], props => props.theme.palette.primary.main);
+  displayName: "group__StyledDiv",
+  componentId: "sc-1lj02tr-0"
+})([".title{font-size:18px;font-weight:bold;margin-bottom:", ";}.list{}.item{font-size:16px;padding:", ";color:#9397a1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-transform:capitalize;cursor:pointer;&:hover{background-color:", ";color:initial;font-weight:bold;}}.select{color:", ";font-weight:bold;}"], props => props.theme.spacing(1), props => props.theme.spacing(1), props => props.theme.palette.grey[50], props => props.theme.palette.primary.main);
 
-Content.propTypes = {
+FilterGroup.propTypes = {
   title: _propTypes.default.string.isRequired,
   options: _propTypes.default.array.isRequired,
   onChange: _propTypes.default.func.isRequired,
   value: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number])
 };
-Content.defaultProps = {
+FilterGroup.defaultProps = {
   value: null
 };
-var _default = Content;
+var _default = FilterGroup;
 exports.default = _default;

package/lib/components/{filter-mobile/index.js → filter/icon.js}

@@ -17,9 +17,7 @@ var _Button = _interopRequireDefault(require("@mui/material/Button"));
 
 var _filter = require("../../contexts/filter");
 
-var _content = _interopRequireDefault(require("./content"));
-
-var _utils = require("../../libs/utils");
+var _group = _interopRequireDefault(require("./group"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -27,20 +25,30 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-// import PropTypes from 'prop-types';
-function MobileFilter() {
+function FilterIcon() {
   const {
     selectedCategory,
     handleCategory,
     t,
     handlePrice,
     filters,
-    categoryList,
-    locale
+    categoryOptions,
+    priceOptions
   } = (0, _filter.useFilterContext)();
   const [open, setOpen] = (0, _react.useState)(false);
-  const categoriesOption = (0, _utils.getCategoriesOption)(categoryList, locale);
-  const prices = (0, _utils.getPrices)(t);
+
+  const handelChange = (type, value) => {
+    if (type === 'category') {
+      handleCategory(value);
+    }
+
+    if (type === 'price') {
+      handlePrice(value);
+    }
+
+    setOpen(false);
+  };
+
   return /*#__PURE__*/_react.default.createElement(StyledDiv, null, /*#__PURE__*/_react.default.createElement(_Button.default, {
     variant: "outlined",
     className: "filter-button",
@@ -53,25 +61,33 @@ function MobileFilter() {
     title: "",
     open: open,
     onClose: () => setOpen(false)
-  }, /*#__PURE__*/_react.default.createElement(_content.default, {
+  }, /*#__PURE__*/_react.default.createElement(_group.default, {
     title: t('common.price'),
-    options: prices,
+    options: priceOptions,
     value: filters.price,
-    onChange: handlePrice
-  }), /*#__PURE__*/_react.default.createElement(_content.default, {
+    onChange: v => {
+      handelChange('price', v);
+    }
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      marginTop: '16px'
+    }
+  }, /*#__PURE__*/_react.default.createElement(_group.default, {
     title: t('common.category'),
-    options: categoriesOption,
+    options: categoryOptions,
     value: selectedCategory,
-    onChange: handleCategory
-  })));
+    onChange: v => {
+      handelChange('category', v);
+    }
+  }))));
 }
 
 const StyledDiv = _styledComponents.default.div.withConfig({
-  displayName: "filter-mobile__StyledDiv",
-  componentId: "sc-5csoa5-0"
+  displayName: "icon__StyledDiv",
+  componentId: "sc-17rafy1-0"
 })([".filter-button{margin-right:16px;border-color:rgb(240,240,240);padding:5px 8px;min-width:initial;}.filter-icon{cursor:pointer;color:", ";}"], props => props.theme.palette.grey[500]);
 
-MobileFilter.propTypes = {};
-MobileFilter.defaultProps = {};
-var _default = MobileFilter;
+FilterIcon.propTypes = {};
+FilterIcon.defaultProps = {};
+var _default = FilterIcon;
 exports.default = _default;

package/lib/components/filter/index.js

@@ -0,0 +1,31 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "CustomChip", {
+  enumerable: true,
+  get: function get() {
+    return _customChip.default;
+  }
+});
+Object.defineProperty(exports, "FilterGroup", {
+  enumerable: true,
+  get: function get() {
+    return _group.default;
+  }
+});
+Object.defineProperty(exports, "FilterIcon", {
+  enumerable: true,
+  get: function get() {
+    return _icon.default;
+  }
+});
+
+var _icon = _interopRequireDefault(require("./icon"));
+
+var _customChip = _interopRequireDefault(require("./custom-chip"));
+
+var _group = _interopRequireDefault(require("./group"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/lib/components/list/list.js

@@ -127,7 +127,7 @@ BlockletList.defaultProps = {};
 const StyledGrid = (0, _styledComponents.default)(_Grid.default).withConfig({
   displayName: "list__StyledGrid",
   componentId: "sc-jzgpev-0"
-})(["@media (max-width:", "px){&.MuiGrid-item{padding-bottom:0px;margin-left:", ";padding-right:", ";}}"], props => props.theme.breakpoints.values.sm, props => props.theme.spacing(-2), props => props.theme.spacing(0.5));
+})(["@media (max-width:", "px){&.MuiGrid-item{padding-bottom:0px;margin-left:", ";padding-right:", ";}}@media (min-width:", "px){&.MuiGrid-item{margin-bottom:", ";}}"], props => props.theme.breakpoints.values.sm, props => props.theme.spacing(-2), props => props.theme.spacing(0.5), 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-1"

package/lib/components/search.js

@@ -94,7 +94,7 @@ Search.defaultProps = {
 const StyledSearch = (0, _styledComponents.default)(_material.OutlinedInput).withConfig({
   displayName: "search__StyledSearch",
   componentId: "sc-1ehlqka-0"
-})(["background-color:#fff;border-radius:12px;font-size:16px;margin:0 10px;.MuiInputBase-input{padding:12px 0px 12px 0px;}.MuiOutlinedInput-notchedOutline{border:none;}.Mui-focused{background-color:#f6f6f6;.MuiInputBase-input::placeholder{color:transparent;}}@media (max-width:", "px){font-size:14px;border-radius:6px;.MuiInputBase-input{padding:8px 0 8px 10px;}}"], props => props.theme.breakpoints.values.md);
+})(["background-color:#fff;font-size:14px;border-radius:6px;.MuiInputBase-input{padding:8px 0 8px 10px;}.MuiOutlinedInput-notchedOutline{border:none;}.Mui-focused{background-color:#f6f6f6;.MuiInputBase-input::placeholder{color:transparent;}}"]);
 const StyledSearchIcon = (0, _styledComponents.default)(_Search.default).withConfig({
   displayName: "search__StyledSearchIcon",
   componentId: "sc-1ehlqka-1"

package/lib/contexts/filter.js

@@ -44,8 +44,6 @@ exports.FilterConsumer = Consumer;
 
 function FilterProvider(_ref) {
   let {
-    onSelectBlocklet,
-    selectedBlocklets,
     filters,
     children,
     baseUrl,
@@ -87,15 +85,21 @@ function FilterProvider(_ref) {
     initialData: [],
     manual: true
   });
-  const selectedCategory = filters.category;
-  const hasDeveloperFilter = !!filters.developer;
+
+  const finalFilters = _objectSpread({
+    sortBy: 'popularity',
+    sortDirection: 'desc'
+  }, filters);
+
+  const selectedCategory = finalFilters.category;
+  const hasDeveloperFilter = !!finalFilters.developer;
   const categoryState = (0, _react.useMemo)(() => {
     return !hasDeveloperFilter ? {
       data: allCategories
-    } : (0, _utils.getCategories)(allBlocklets, filters.developer);
+    } : (0, _utils.getCategories)(allBlocklets, finalFilters.developer);
   }, [hasDeveloperFilter, allCategories]);
   const blockletList = (0, _react.useMemo)(() => {
-    var _filters$keyword;
+    var _finalFilters$keyword;
 
     const sortByName = x => {
       var _x$title, _x$name;
@@ -116,27 +120,27 @@ function FilterProvider(_ref) {
       popularity: sortByPopularity,
       publishAt: sortByPublish
     };
-    let result = allBlocklets || []; // 按照付费/免费筛选
+    let blocklets = allBlocklets || []; // 按照付费/免费筛选
 
-    result = (0, _utils.filterBlockletByPrice)(result, filters.price); // 按照分类筛选
+    blocklets = (0, _utils.filterBlockletByPrice)(blocklets, finalFilters.price); // 按照分类筛选
 
-    result = result.filter(item => {
+    blocklets = blocklets.filter(item => {
       var _item$category;
 
       return selectedCategory ? (item === null || item === void 0 ? void 0 : (_item$category = item.category) === null || _item$category === void 0 ? void 0 : _item$category.name) === selectedCategory : true;
     }); // 按照作者筛选
 
-    result = result.filter(item => filters !== null && filters !== void 0 && filters.developer ? item.owner.did === filters.developer : true);
-    const lowerSearch = (filters === null || filters === void 0 ? void 0 : (_filters$keyword = filters.keyword) === null || _filters$keyword === void 0 ? void 0 : _filters$keyword.toLocaleLowerCase()) || ''; // 按照搜索筛选
+    blocklets = blocklets.filter(item => finalFilters !== null && finalFilters !== void 0 && finalFilters.developer ? item.owner.did === finalFilters.developer : true);
+    const lowerSearch = (finalFilters === null || finalFilters === void 0 ? void 0 : (_finalFilters$keyword = finalFilters.keyword) === null || _finalFilters$keyword === void 0 ? void 0 : _finalFilters$keyword.toLocaleLowerCase()) || ''; // 按照搜索筛选
 
-    result = result.filter(item => {
+    blocklets = blocklets.filter(item => {
       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));
     }); // 排序
 
-    return (0, _orderBy.default)(result, [sortMap[filters.sortBy]], [filters.sortDirection]);
-  }, [allBlocklets, filters]);
+    return (0, _orderBy.default)(blocklets, [sortMap[finalFilters.sortBy]], [finalFilters.sortDirection]);
+  }, [allBlocklets, finalFilters]);
   const categoryList = (0, _react.useMemo)(() => {
     const list = categoryState.data || []; // 分类按照名称排序
 
@@ -152,6 +156,8 @@ function FilterProvider(_ref) {
     return (0, _utils.replaceTranslate)(_locale.default[locale][key], data);
   };
 
+  const categoryOptions = (0, _react.useMemo)(() => (0, _utils.getCategoryOptions)(categoryList, locale), [categoryList, locale]);
+  const priceOptions = (0, _utils.getPrices)(translate);
   const filterStore = {
     errors: {
       fetchBlockletsError,
@@ -164,19 +170,16 @@ function FilterProvider(_ref) {
     endpoint,
     blockletList,
     t: translate,
-    filters: _objectSpread({
-      sortBy: 'popularity',
-      sortDirection: 'desc'
-    }, filters),
+    filters: finalFilters,
     selectedCategory,
     categoryList,
     baseUrl,
     blockletRender,
     locale,
-    selectedBlocklets,
-    onSelectBlocklet,
+    categoryOptions,
+    priceOptions,
     handleSort: sort => {
-      const changeData = _objectSpread(_objectSpread({}, filters), {}, {
+      const changeData = _objectSpread(_objectSpread({}, finalFilters), {}, {
         sortBy: sort,
         sortDirection: sort === 'nameAsc' ? 'asc' : 'desc'
       });
@@ -184,36 +187,34 @@ function FilterProvider(_ref) {
       onFilterChange(changeData);
     },
     handleKeyword: keyWord => {
-      const changeData = _objectSpread(_objectSpread({}, filters), {}, {
+      const changeData = _objectSpread(_objectSpread({}, finalFilters), {}, {
         keyword: keyWord || undefined
       });
 
       onFilterChange(changeData);
     },
     handlePrice: price => {
-      const changeData = _objectSpread(_objectSpread({}, filters), {}, {
-        price: price === filters.price ? undefined : price
+      const changeData = _objectSpread(_objectSpread({}, finalFilters), {}, {
+        price: price === finalFilters.price ? undefined : price
       });
 
       onFilterChange(changeData);
     },
     handleCategory: category => {
-      if (category === 'all') {
-        const changeData = _objectSpread(_objectSpread({}, filters), {}, {
-          category: undefined
-        });
-
-        onFilterChange(changeData);
-      } else {
-        const changeData = _objectSpread(_objectSpread({}, filters), {}, {
-          category: category === filters.category ? undefined : category
-        });
-
-        onFilterChange(changeData);
+      let finalCategory = category;
+
+      if (category === 'all' || category === finalFilters.category) {
+        finalCategory = undefined;
       }
+
+      const changeData = _objectSpread(_objectSpread({}, finalFilters), {}, {
+        category: finalCategory
+      });
+
+      onFilterChange(changeData);
     },
     handleDeveloper: developer => {
-      const changeData = _objectSpread(_objectSpread({}, filters), {}, {
+      const changeData = _objectSpread(_objectSpread({}, finalFilters), {}, {
         developer: developer || undefined
       });
 
@@ -234,7 +235,7 @@ function FilterProvider(_ref) {
     get developerName() {
       var _allBlocklets$find, _allBlocklets$find$ow;
 
-      return ((_allBlocklets$find = allBlocklets.find(i => i.owner.did === filters.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) || '';
+      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) || '';
     }
 
   };

package/lib/libs/utils.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.urlStringify = exports.replaceTranslate = exports.removeUndefined = exports.getStoreDetail = exports.getSortOptions = exports.getPrices = exports.getCategoriesOption = exports.getCategories = exports.formatLogoPath = exports.formatError = exports.filterBlockletByPrice = void 0;
+exports.urlStringify = exports.replaceTranslate = exports.removeUndefined = exports.getStoreDetail = exports.getSortOptions = exports.getPrices = exports.getCategoryOptions = exports.getCategories = exports.formatLogoPath = exports.formatError = exports.filterBlockletByPrice = void 0;
 
 var _urlJoin = _interopRequireDefault(require("url-join"));
 
@@ -50,7 +50,7 @@ const getPrices = t => {
 
 exports.getPrices = getPrices;
 
-const getCategoriesOption = function getCategoriesOption() {
+const getCategoryOptions = function getCategoryOptions() {
   let list = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
   let locale = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'en';
   return list.map(item => ({
@@ -66,7 +66,7 @@ const getCategoriesOption = function getCategoriesOption() {
  */
 
 
-exports.getCategoriesOption = getCategoriesOption;
+exports.getCategoryOptions = getCategoryOptions;
 
 const getCategories = (list, developerDid) => {
   const filterList = list.filter(item => developerDid ? item.owner.did === developerDid : true);