@blocklet/list 0.9.22 → 0.9.23

package/lib/components/autocomplete/index.js

@@ -95,6 +95,7 @@ function Autocomplete(_ref) {
         panelRootRef.current.render(children);
       },
 
+      autoFocus: true,
       classNames: {
         panel: 'bl-autocomplete-panel',
         label: 'bl-autocomplete-label',

package/lib/contexts/filter.js

@@ -70,13 +70,16 @@ function FilterProvider(_ref) {
     pageSize: (0, _utils.isMobileScreen)() ? _constant.default.mobilePageSize : _constant.default.pageSize,
     defaultCurrentPage: _constant.default.defaultCurrentPage
   });
+  const [fetchBlockletsError, setFetchBlockletsError] = (0, _react.useState)(null);
   const {
-    data: blockletsState,
-    error: fetchBlockletsError,
+    data: blockletsState = {
+      list: [],
+      total: 0
+    },
     loading: fetchBlockletsLoading,
     loadMore: _loadMore,
     loadingMore
-  } = (0, _ahooks.useRequest)(async d => {
+  } = (0, _ahooks.useInfiniteScroll)(async d => {
     var _d$list;
 
     const params = _objectSpread(_objectSpread({}, finalFilters), {}, {
@@ -90,33 +93,29 @@ function FilterProvider(_ref) {
     } = await storeApi.get(_constant.default.blockletsPath, {
       params
     });
-    return data;
+    return {
+      list: (data === null || data === void 0 ? void 0 : data.dataList) || [],
+      total: (data === null || data === void 0 ? void 0 : data.total) || 0
+    };
   }, {
-    initialData: {
-      list: [],
-      total: 0
-    },
-    loadMore: true,
     isNoMore: d => d ? d.list.length >= d.total : false,
-    formatResult: response => {
-      return {
-        list: response === null || response === void 0 ? void 0 : response.dataList,
-        total: response.total
-      };
-    },
-    refreshDeps: [endpoint, filters]
+    reloadDeps: [endpoint, filters],
+    onError: e => {
+      setFetchBlockletsError(e);
+    }
   });
   const {
-    data: allCategories,
+    data: allCategories = [],
     error: fetchCategoriesError,
-    loading: fetchCategoriesLoading
+    loading: fetchCategoriesLoading,
+    run: fetchCategories
   } = (0, _ahooks.useRequest)(async () => {
     const {
       data
     } = await storeApi.get(_constant.default.categoriesPath);
     return Array.isArray(data) ? data : [];
   }, {
-    initialData: []
+    manual: true
   });
   const categoryList = (0, _react.useMemo)(() => {
     const list = allCategories || []; // 分类按照名称排序
@@ -242,6 +241,9 @@ function FilterProvider(_ref) {
 
     handleSearchSelect: onSearchSelect
   };
+  (0, _react.useEffect)(() => {
+    fetchCategories(); // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [endpoint]);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(Provider, {
     value: filterStore,
     children: children

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/list",
-  "version": "0.9.22",
+  "version": "0.9.23",
   "description": "Common ux components of blocklet",
   "publishConfig": {
     "access": "public"
@@ -46,7 +46,7 @@
     "@emotion/react": "^11.10.0",
     "@emotion/styled": "^11.10.0",
     "@mui/icons-material": "^5.8.4",
-    "ahooks": "^2.10.14",
+    "ahooks": "^3.7.0",
     "algoliasearch": "^4.14.2",
     "axios": "^0.27.2",
     "color": "^4.2.3",
@@ -68,5 +68,5 @@
     "eslint": "^8.22.0",
     "prettier": "^2.7.1"
   },
-  "gitHead": "e44cb12eb38523186f7b86d0693c2fa712c8700e"
+  "gitHead": "ea58ea3f43c1d1f8d9d6208d9a27380aac3c8994"
 }

package/src/components/autocomplete/index.js

@@ -56,6 +56,7 @@ export default function Autocomplete({ onSelect }) {
 
         panelRootRef.current.render(children);
       },
+      autoFocus: true,
       classNames: {
         panel: 'bl-autocomplete-panel',
         label: 'bl-autocomplete-label',

package/src/contexts/filter.js

@@ -1,6 +1,6 @@
-import { useContext, createContext, useMemo } from 'react';
+import { useContext, createContext, useMemo, useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
-import { useRequest, useReactive } from 'ahooks';
+import { useRequest, useReactive, useInfiniteScroll } from 'ahooks';
 import orderBy from 'lodash/orderBy';
 import axios from 'axios';
 import { replaceTranslate, getPrices, getCategoryOptions, isMobileScreen, getCurrentPage } from '../libs/utils';
@@ -37,13 +37,14 @@ function FilterProvider({
     defaultCurrentPage: constant.defaultCurrentPage,
   });
 
+  const [fetchBlockletsError, setFetchBlockletsError] = useState(null);
+
   const {
-    data: blockletsState,
-    error: fetchBlockletsError,
+    data: blockletsState = { list: [], total: 0 },
     loading: fetchBlockletsLoading,
     loadMore,
     loadingMore,
-  } = useRequest(
+  } = useInfiniteScroll(
     async (d) => {
       const params = {
         ...finalFilters,
@@ -52,29 +53,28 @@ function FilterProvider({
         pageSize: paginateState.pageSize,
       };
       const { data = {} } = await storeApi.get(constant.blockletsPath, { params });
-      return data;
+      return { list: data?.dataList || [], total: data?.total || 0 };
     },
     {
-      initialData: { list: [], total: 0 },
-      loadMore: true,
       isNoMore: (d) => (d ? d.list.length >= d.total : false),
-      formatResult: (response) => {
-        return { list: response?.dataList, total: response.total };
+      reloadDeps: [endpoint, filters],
+      onError: (e) => {
+        setFetchBlockletsError(e);
       },
-      refreshDeps: [endpoint, filters],
     }
   );
 
   const {
-    data: allCategories,
+    data: allCategories = [],
     error: fetchCategoriesError,
     loading: fetchCategoriesLoading,
+    run: fetchCategories,
   } = useRequest(
     async () => {
       const { data } = await storeApi.get(constant.categoriesPath);
       return Array.isArray(data) ? data : [];
     },
-    { initialData: [] }
+    { manual: true }
   );
 
   const categoryList = useMemo(() => {
@@ -171,6 +171,11 @@ function FilterProvider({
     handleSearchSelect: onSearchSelect,
   };
 
+  useEffect(() => {
+    fetchCategories();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [endpoint]);
+
   return <Provider value={filterStore}>{children}</Provider>;
 }