@blocklet/list 0.9.28 → 0.9.31

package/lib/components/autocomplete/index.js

@@ -63,27 +63,38 @@ function Autocomplete(_ref) {
     return data.dataList || [];
   }, [storeApi]);
   const onSubmit = (0, _react.useCallback)(e => {
-    handleKeyword(e.state.query);
-  }, [handleKeyword]);
-  const onReset = (0, _react.useCallback)(() => {
-    handleKeyword();
-  }, [handleKeyword]);
-  (0, _reactHotkeysHook.useHotkeys)('/, ctrl + k, command + k', e => {
-    e.stopPropagation();
-    e.preventDefault();
+    handleKeyword(e.state.query); // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
 
+  const setFocus = () => {
     if (containerRef.current) {
-      const input = containerRef.current.querySelector('input.bl-autocomplete-input');
+      // see: https://discourse.algolia.com/t/autocomplete-focus-input-field/4019/5
+      setTimeout(() => {
+        const input = containerRef.current.querySelector('input.bl-autocomplete-input');
 
-      if (input) {
-        input.focus();
-      }
+        if (input) {
+          input.focus();
+        }
+      });
     }
+  };
 
+  const onReset = (0, _react.useCallback)(autocompleteState => {
+    handleKeyword();
+    setFocus();
+    autocompleteState.setIsOpen(false); // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  (0, _reactHotkeysHook.useHotkeys)('/, ctrl + k, command + k', e => {
+    e.stopPropagation();
+    e.preventDefault();
+    setFocus();
     return false;
   }, {
     enableOnTags: ['INPUT']
   });
+  (0, _react.useEffect)(() => {
+    setFocus();
+  }, [endpoint]);
   (0, _react.useEffect)(() => {
     if (!containerRef.current) {
       return undefined;
@@ -126,7 +137,10 @@ function Autocomplete(_ref) {
         query: filters.keyword
       },
       onSubmit,
-      onReset,
+
+      onReset(autocompleteState) {
+        onReset(autocompleteState);
+      },
 
       getSources(_ref3) {
         let {
@@ -199,7 +213,7 @@ function Autocomplete(_ref) {
     return () => {
       search.destroy();
     };
-  }, [endpoint, filters, getResults, muiTheme, onReset, onSubmit, onSelect, t]);
+  }, [endpoint, filters, getResults, muiTheme, onSubmit, onSelect, t, onReset]);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
     className: "bl-search-container",
     ref: containerRef

package/lib/contexts/filter.js

@@ -53,11 +53,11 @@ function FilterProvider(_ref) {
     onSearchSelect,
     extraFilter
   } = _ref;
-
-  const storeApi = _axios.default.create({
-    baseURL: endpoint
-  });
-
+  const storeApi = (0, _react.useMemo)(() => {
+    return _axios.default.create({
+      baseURL: endpoint
+    });
+  }, [endpoint]);
   const finalFilters = (0, _react.useMemo)(() => {
     return _objectSpread({
       sortBy: 'popularity',
@@ -122,16 +122,14 @@ function FilterProvider(_ref) {
 
     return (0, _orderBy.default)(list, [i => i.name], ['asc']);
   }, [allCategories]);
-
-  const translate = (key, data) => {
+  const translate = (0, _react.useCallback)((key, data) => {
     if (!_locale.default[locale] || !_locale.default[locale][key]) {
       console.warn("Warning: no ".concat(key, " translation of ").concat(locale));
       return key;
     }
 
     return (0, _utils.replaceTranslate)(_locale.default[locale][key], data);
-  };
-
+  }, [locale]);
   const blockletList = (0, _react.useMemo)(() => {
     let blocklets = blockletsState.list || []; // 用户传入的过滤函数
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/list",
-  "version": "0.9.28",
+  "version": "0.9.31",
   "description": "Common ux components of blocklet",
   "publishConfig": {
     "access": "public"
@@ -42,7 +42,7 @@
   "dependencies": {
     "@algolia/autocomplete-js": "^1.7.1",
     "@algolia/autocomplete-theme-classic": "^1.7.1",
-    "@arcblock/ux": "^2.4.13",
+    "@arcblock/ux": "^2.4.16",
     "@emotion/react": "^11.10.0",
     "@emotion/styled": "^11.10.0",
     "@mui/icons-material": "^5.8.4",
@@ -69,5 +69,5 @@
     "eslint": "^8.22.0",
     "prettier": "^2.7.1"
   },
-  "gitHead": "bddbed0128ffa0254182d41a14e640c764884fb0"
+  "gitHead": "6de6f60cc8d0e2a152add1b5d4578215b5de56b0"
 }

package/src/components/autocomplete/index.js

@@ -23,38 +23,50 @@ export default function Autocomplete({ onSelect }) {
   const getResults = useCallback(
     async (params) => {
       const { data } = await storeApi.get(constant.blockletsPath, { params });
-
       return data.dataList || [];
     },
     [storeApi]
   );
 
-  const onSubmit = useCallback(
-    (e) => {
-      handleKeyword(e.state.query);
-    },
-    [handleKeyword]
-  );
-  const onReset = useCallback(() => {
+  const onSubmit = useCallback((e) => {
+    handleKeyword(e.state.query);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  const setFocus = () => {
+    if (containerRef.current) {
+      // see: https://discourse.algolia.com/t/autocomplete-focus-input-field/4019/5
+      setTimeout(() => {
+        const input = containerRef.current.querySelector('input.bl-autocomplete-input');
+        if (input) {
+          input.focus();
+        }
+      });
+    }
+  };
+
+  const onReset = useCallback((autocompleteState) => {
     handleKeyword();
-  }, [handleKeyword]);
+    setFocus();
+    autocompleteState.setIsOpen(false);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
 
   useHotkeys(
     '/, ctrl + k, command + k',
     (e) => {
       e.stopPropagation();
       e.preventDefault();
-      if (containerRef.current) {
-        const input = containerRef.current.querySelector('input.bl-autocomplete-input');
-        if (input) {
-          input.focus();
-        }
-      }
+      setFocus();
       return false;
     },
     { enableOnTags: ['INPUT'] }
   );
 
+  useEffect(() => {
+    setFocus();
+  }, [endpoint]);
+
   useEffect(() => {
     if (!containerRef.current) {
       return undefined;
@@ -86,7 +98,9 @@ export default function Autocomplete({ onSelect }) {
         query: filters.keyword,
       },
       onSubmit,
-      onReset,
+      onReset(autocompleteState) {
+        onReset(autocompleteState);
+      },
       getSources({ query }) {
         const params = {
           ...filters,
@@ -132,7 +146,7 @@ export default function Autocomplete({ onSelect }) {
     return () => {
       search.destroy();
     };
-  }, [endpoint, filters, getResults, muiTheme, onReset, onSubmit, onSelect, t]);
+  }, [endpoint, filters, getResults, muiTheme, onSubmit, onSelect, t, onReset]);
 
   return <div className="bl-search-container" ref={containerRef} />;
 }

package/src/contexts/filter.js

@@ -1,4 +1,4 @@
-import { useContext, createContext, useMemo, useState, useEffect } from 'react';
+import { useContext, createContext, useMemo, useState, useEffect, useCallback } from 'react';
 import PropTypes from 'prop-types';
 import { useRequest, useReactive, useInfiniteScroll } from 'ahooks';
 import orderBy from 'lodash/orderBy';
@@ -21,9 +21,11 @@ function FilterProvider({
   onSearchSelect,
   extraFilter,
 }) {
-  const storeApi = axios.create({
-    baseURL: endpoint,
-  });
+  const storeApi = useMemo(() => {
+    return axios.create({
+      baseURL: endpoint,
+    });
+  }, [endpoint]);
 
   const finalFilters = useMemo(() => {
     return { sortBy: 'popularity', sortDirection: 'desc', ...filters };
@@ -83,14 +85,17 @@ function FilterProvider({
     return orderBy(list, [(i) => i.name], ['asc']);
   }, [allCategories]);
 
-  const translate = (key, data) => {
-    if (!translations[locale] || !translations[locale][key]) {
-      console.warn(`Warning: no ${key} translation of ${locale}`);
-      return key;
-    }
+  const translate = useCallback(
+    (key, data) => {
+      if (!translations[locale] || !translations[locale][key]) {
+        console.warn(`Warning: no ${key} translation of ${locale}`);
+        return key;
+      }
 
-    return replaceTranslate(translations[locale][key], data);
-  };
+      return replaceTranslate(translations[locale][key], data);
+    },
+    [locale]
+  );
   const blockletList = useMemo(() => {
     let blocklets = blockletsState.list || [];
     // 用户传入的过滤函数