@blocklet/list 0.8.22 → 0.8.25

package/lib/components/aside.js

@@ -32,7 +32,7 @@ const Aside = () => {
     onChange: handlePrice
   })), /*#__PURE__*/_react.default.createElement("div", {
     style: {
-      marginTop: '32px'
+      marginTop: '16px'
     }
   }, /*#__PURE__*/_react.default.createElement(_filter2.FilterGroup, {
     title: t('common.category'),

package/lib/components/filter/group.js

@@ -38,7 +38,7 @@ function FilterGroup(_ref) {
 const StyledDiv = _styledComponents.default.div.withConfig({
   displayName: "group__StyledDiv",
   componentId: "sc-1lj02tr-0"
-})([".title{font-size:18px;font-weight:bold;margin-bottom:", ";}.list{}.item{font-size:16px;font-weight:bold;padding:", " ", ";color:#9397a1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-transform:capitalize;cursor:pointer;&:hover{background-color:", ";color:initial;}}.select{color:", ";}"], props => props.theme.spacing(2), props => props.theme.spacing(2), props => props.theme.spacing(1), props => props.theme.palette.grey[50], props => props.theme.palette.primary.main);
+})([".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);
 
 FilterGroup.propTypes = {
   title: _propTypes.default.string.isRequired,

package/lib/components/filter/icon.js

@@ -70,7 +70,7 @@ function FilterIcon() {
     }
   }), /*#__PURE__*/_react.default.createElement("div", {
     style: {
-      marginTop: '32px'
+      marginTop: '16px'
     }
   }, /*#__PURE__*/_react.default.createElement(_group.default, {
     title: t('common.category'),

package/lib/contexts/filter.js

@@ -85,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;
@@ -114,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 || []; // 分类按照名称排序
 
@@ -164,10 +170,7 @@ function FilterProvider(_ref) {
     endpoint,
     blockletList,
     t: translate,
-    filters: _objectSpread({
-      sortBy: 'popularity',
-      sortDirection: 'desc'
-    }, filters),
+    filters: finalFilters,
     selectedCategory,
     categoryList,
     baseUrl,
@@ -176,7 +179,7 @@ function FilterProvider(_ref) {
     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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/list",
-  "version": "0.8.22",
+  "version": "0.8.25",
   "description": "Common ux components of blocklet",
   "publishConfig": {
     "access": "public"
@@ -37,7 +37,7 @@
     "react": ">=18.1.0"
   },
   "dependencies": {
-    "@arcblock/ux": "^2.1.6",
+    "@arcblock/ux": "^2.1.7",
     "@emotion/react": "^11.9.0",
     "@emotion/styled": "^11.8.1",
     "@mui/icons-material": "^5.6.2",
@@ -58,5 +58,5 @@
     "babel-plugin-inline-react-svg": "^2.0.1",
     "babel-plugin-styled-components": "^1.10.7"
   },
-  "gitHead": "3033fed5ab41bb5b024c285ea56d7f5ba41d90c4"
+  "gitHead": "303ef1bcac78a377b26b5992cce688cad2318bf2"
 }

package/src/components/aside.js

@@ -13,7 +13,7 @@ const Aside = () => {
       <div>
         <FilterGroup title={t('common.price')} options={priceOptions} value={filters.price} onChange={handlePrice} />
       </div>
-      <div style={{ marginTop: '32px' }}>
+      <div style={{ marginTop: '16px' }}>
         <FilterGroup
           title={t('common.category')}
           options={categoryOptions}

package/src/components/filter/group.js

@@ -28,14 +28,13 @@ const StyledDiv = styled.div`
   .title {
     font-size: 18px;
     font-weight: bold;
-    margin-bottom: ${(props) => props.theme.spacing(2)};
+    margin-bottom: ${(props) => props.theme.spacing(1)};
   }
   .list {
   }
   .item {
     font-size: 16px;
-    font-weight: bold;
-    padding: ${(props) => props.theme.spacing(2)} ${(props) => props.theme.spacing(1)};
+    padding: ${(props) => props.theme.spacing(1)};
     color: #9397a1;
     overflow: hidden;
     text-overflow: ellipsis;
@@ -45,10 +44,12 @@ const StyledDiv = styled.div`
     &:hover {
       background-color: ${(props) => props.theme.palette.grey[50]};
       color: initial;
+      font-weight: bold;
     }
   }
   .select {
     color: ${(props) => props.theme.palette.primary.main};
+    font-weight: bold;
   }
 `;
 

package/src/components/filter/icon.js

@@ -36,7 +36,7 @@ function FilterIcon() {
             handelChange('price', v);
           }}
         />
-        <div style={{ marginTop: '32px' }}>
+        <div style={{ marginTop: '16px' }}>
           <FilterGroup
             title={t('common.category')}
             options={categoryOptions}

package/src/contexts/filter.js

@@ -16,7 +16,6 @@ function FilterProvider({ filters, children, baseUrl, endpoint, locale, blocklet
   const storeApi = axios.create({
     baseURL: endpoint,
   });
-
   const {
     data: allBlocklets,
     error: fetchBlockletsError,
@@ -43,11 +42,11 @@ function FilterProvider({ filters, children, baseUrl, endpoint, locale, blocklet
     { initialData: [], manual: true }
   );
 
-  const selectedCategory = filters.category;
-
-  const hasDeveloperFilter = !!filters.developer;
+  const finalFilters = { sortBy: 'popularity', sortDirection: 'desc', ...filters };
+  const selectedCategory = finalFilters.category;
+  const hasDeveloperFilter = !!finalFilters.developer;
   const categoryState = useMemo(() => {
-    return !hasDeveloperFilter ? { data: allCategories } : getCategories(allBlocklets, filters.developer);
+    return !hasDeveloperFilter ? { data: allCategories } : getCategories(allBlocklets, finalFilters.developer);
   }, [hasDeveloperFilter, allCategories]);
 
   const blockletList = useMemo(() => {
@@ -61,16 +60,18 @@ function FilterProvider({ filters, children, baseUrl, endpoint, locale, blocklet
       publishAt: sortByPublish,
     };
 
-    let result = allBlocklets || [];
+    let blocklets = allBlocklets || [];
     // 按照付费/免费筛选
-    result = filterBlockletByPrice(result, filters.price);
+    blocklets = filterBlockletByPrice(blocklets, finalFilters.price);
     // 按照分类筛选
-    result = result.filter((item) => (selectedCategory ? item?.category?.name === selectedCategory : true));
+    blocklets = blocklets.filter((item) => (selectedCategory ? item?.category?.name === selectedCategory : true));
     // 按照作者筛选
-    result = result.filter((item) => (filters?.developer ? item.owner.did === filters.developer : true));
-    const lowerSearch = filters?.keyword?.toLocaleLowerCase() || '';
+    blocklets = blocklets.filter((item) =>
+      finalFilters?.developer ? item.owner.did === finalFilters.developer : true
+    );
+    const lowerSearch = finalFilters?.keyword?.toLocaleLowerCase() || '';
     // 按照搜索筛选
-    result = result.filter((item) => {
+    blocklets = blocklets.filter((item) => {
       return (
         (item?.title || item?.name)?.toLocaleLowerCase().includes(lowerSearch) ||
         item.description?.toLocaleLowerCase().includes(lowerSearch) ||
@@ -78,8 +79,8 @@ function FilterProvider({ filters, children, baseUrl, endpoint, locale, blocklet
       );
     });
     // 排序
-    return orderBy(result, [sortMap[filters.sortBy]], [filters.sortDirection]);
-  }, [allBlocklets, filters]);
+    return orderBy(blocklets, [sortMap[finalFilters.sortBy]], [finalFilters.sortDirection]);
+  }, [allBlocklets, finalFilters]);
 
   const categoryList = useMemo(() => {
     const list = categoryState.data || [];
@@ -105,7 +106,7 @@ function FilterProvider({ filters, children, baseUrl, endpoint, locale, blocklet
     endpoint,
     blockletList,
     t: translate,
-    filters: { sortBy: 'popularity', sortDirection: 'desc', ...filters },
+    filters: finalFilters,
     selectedCategory,
     categoryList,
     baseUrl,
@@ -115,34 +116,33 @@ function FilterProvider({ filters, children, baseUrl, endpoint, locale, blocklet
     priceOptions,
     handleSort: (sort) => {
       const changeData = {
-        ...filters,
+        ...finalFilters,
         sortBy: sort,
         sortDirection: sort === 'nameAsc' ? 'asc' : 'desc',
       };
       onFilterChange(changeData);
     },
     handleKeyword: (keyWord) => {
-      const changeData = { ...filters, keyword: keyWord || undefined };
+      const changeData = { ...finalFilters, keyword: keyWord || undefined };
       onFilterChange(changeData);
     },
     handlePrice: (price) => {
       const changeData = {
-        ...filters,
-        price: price === filters.price ? undefined : price,
+        ...finalFilters,
+        price: price === finalFilters.price ? undefined : price,
       };
       onFilterChange(changeData);
     },
     handleCategory: (category) => {
-      if (category === 'all') {
-        const changeData = { ...filters, category: undefined };
-        onFilterChange(changeData);
-      } else {
-        const changeData = { ...filters, category: category === filters.category ? undefined : category };
-        onFilterChange(changeData);
+      let finalCategory = category;
+      if (category === 'all' || category === finalFilters.category) {
+        finalCategory = undefined;
       }
+      const changeData = { ...finalFilters, category: finalCategory };
+      onFilterChange(changeData);
     },
     handleDeveloper: (developer) => {
-      const changeData = { ...filters, developer: developer || undefined };
+      const changeData = { ...finalFilters, developer: developer || undefined };
       onFilterChange(changeData);
     },
     getCategoryLocale: (category) => {
@@ -155,7 +155,7 @@ function FilterProvider({ filters, children, baseUrl, endpoint, locale, blocklet
       return result;
     },
     get developerName() {
-      return allBlocklets.find((i) => i.owner.did === filters.developer)?.owner?.name || '';
+      return allBlocklets.find((blocklet) => blocklet.owner.did === finalFilters.developer)?.owner?.name || '';
     },
   };