@blocklet/list 0.9.21 → 0.9.24

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',
@@ -160,7 +161,6 @@ function Autocomplete(_ref) {
                   theme: muiTheme,
                   children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_item.default, {
                     item: item,
-                    title: (item === null || item === void 0 ? void 0 : item.title) || (item === null || item === void 0 ? void 0 : item.name),
                     did: item.did,
                     description: item.description,
                     cover: logoUrl

package/lib/components/autocomplete/item.js

@@ -75,7 +75,6 @@ function Blocklet(_ref) {
             component: "h3",
             variant: "h3",
             className: "arcblock-blocklet__title",
-            title: title,
             children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ShowAttributes, {
               item: item,
               attribute: "title",
@@ -85,7 +84,6 @@ function Blocklet(_ref) {
             component: "div",
             variant: "body2",
             className: "arcblock-blocklet__describe",
-            title: description,
             children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ShowAttributes, {
               item: item,
               attribute: "description",

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.21",
+  "version": "0.9.24",
   "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": "2604ba25384eca7f58818e82d14d6e77a751711d"
+  "gitHead": "942087559070e1d4805c153ad72fc5fe6c78740f"
 }

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',
@@ -97,13 +98,7 @@ export default function Autocomplete({ onSelect }) {
                 return (
                   <MuiThemeProvider theme={muiTheme}>
                     <EmotionThemeProvider theme={muiTheme}>
-                      <Blocklet
-                        item={item}
-                        title={item?.title || item?.name}
-                        did={item.did}
-                        description={item.description}
-                        cover={logoUrl}
-                      />
+                      <Blocklet item={item} did={item.did} description={item.description} cover={logoUrl} />
                     </EmotionThemeProvider>
                   </MuiThemeProvider>
                 );

package/src/components/autocomplete/item.js

@@ -79,11 +79,11 @@ export default function Blocklet({ cover, item, className, ...rest }) {
         )}
         <div className="arcblock-blocklet__info">
           <div className="arcblock-blocklet__text">
-            <Typography component="h3" variant="h3" className="arcblock-blocklet__title" title={title}>
+            <Typography component="h3" variant="h3" className="arcblock-blocklet__title">
               <ShowAttributes item={item} attribute="title" value={title || name} />
             </Typography>
             {description && (
-              <Typography component="div" variant="body2" className="arcblock-blocklet__describe" title={description}>
+              <Typography component="div" variant="body2" className="arcblock-blocklet__describe">
                 <ShowAttributes item={item} attribute="description" value={description} />
               </Typography>
             )}

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