@blocklet/list 0.10.19 → 0.10.20

package/lib/assets/locale.js

@@ -37,6 +37,9 @@ const en = {
     noBlockletPart2: '"were found',
     noCategoryResults1: 'No "',
     noCategoryResults2: '" Blocklets'
+  },
+  autocomplete: {
+    expandResult: 'Show all search results for "{name}" '
   }
 };
 const zh = {
@@ -69,6 +72,9 @@ const zh = {
     noBlockletPart2: '"相关的 Blocklets',
     noCategoryResults1: '无 "',
     noCategoryResults2: '" 类别的 Blocklets'
+  },
+  autocomplete: {
+    expandResult: '显示所有 “{name}” 的搜索结果 '
   }
 };
 var _default = {

package/lib/components/autocomplete/index.js

@@ -15,8 +15,6 @@ var _autocompleteJs = require("@algolia/autocomplete-js");
 
 var _reactHotkeysHook = require("react-hotkeys-hook");
 
-var _react2 = require("@emotion/react");
-
 var _styles = require("@mui/material/styles");
 
 var _urlJoin = _interopRequireDefault(require("url-join"));
@@ -54,17 +52,25 @@ function Autocomplete(_ref) {
     t
   } = (0, _filter.useFilterContext)();
   const muiTheme = (0, _styles.useTheme)();
-  const getResults = (0, _react.useCallback)(async params => {
+  const getBlocklets = (0, _react.useCallback)(async params => {
     const {
       data
     } = await storeApi.get(_constant.default.blockletsPath, {
       params
     });
-    return data.dataList || [];
+    const blocklets = data.dataList || []; // 头部插入的一条 item  用于展示 `点击展开更多结果`,如果没有blocklet 返回，不展示
+
+    if (blocklets.length > 0) {
+      blocklets.unshift({
+        type: 'more-result'
+      });
+    }
+
+    return blocklets;
   }, [storeApi]);
   const onSubmit = (0, _react.useCallback)(e => {
-    handleKeyword(e.state.query); // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+    handleKeyword(e.state.query);
+  }, [handleKeyword]);
 
   const setFocus = () => {
     if (containerRef.current) {
@@ -80,10 +86,22 @@ function Autocomplete(_ref) {
   };
 
   const onReset = (0, _react.useCallback)(autocompleteState => {
-    handleKeyword();
+    autocompleteState.setIsOpen(false);
     setFocus();
-    autocompleteState.setIsOpen(false); // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
+  const onStateChange = (0, _react.useCallback)(_ref2 => {
+    let {
+      prevState,
+      state
+    } = _ref2;
+
+    // eslint-disable-next-line no-console
+    if (prevState.query !== state.query) {
+      if (!state.query) {
+        handleKeyword();
+      }
+    }
+  }, [handleKeyword]);
   (0, _reactHotkeysHook.useHotkeys)('/, ctrl + k, command + k', e => {
     e.stopPropagation();
     e.preventDefault();
@@ -108,10 +126,10 @@ function Autocomplete(_ref) {
         render: () => {}
       },
 
-      render(_ref2, root) {
+      render(_ref3, root) {
         let {
           children
-        } = _ref2;
+        } = _ref3;
 
         if (!panelRootRef.current || rootRef.current !== root) {
           var _panelRootRef$current;
@@ -136,21 +154,26 @@ function Autocomplete(_ref) {
       initialState: {
         query: filters.keyword
       },
+
+      onStateChange(autocompleteState) {
+        onStateChange(autocompleteState);
+      },
+
       onSubmit,
 
       onReset(autocompleteState) {
         onReset(autocompleteState);
       },
 
-      getSources(_ref3) {
+      getSources(_ref4) {
         let {
           query
-        } = _ref3;
+        } = _ref4;
 
         const params = _objectSpread(_objectSpread({}, filters), {}, {
           sortBy: _constant.default[filters.sortBy],
           page: 1,
-          pageSize: 10,
+          pageSize: 5,
           keyword: query
         });
 
@@ -158,22 +181,33 @@ function Autocomplete(_ref) {
           sourceId: 'blocklets',
 
           getItems() {
-            return getResults(params);
+            return getBlocklets(params);
           },
 
           // 选中后填充 搜索框中值
-          getItemInputValue(_ref4) {
+          getItemInputValue(_ref5) {
             let {
               item
-            } = _ref4;
+            } = _ref5;
+
+            if (item.type === 'more-result') {
+              return query;
+            }
+
             return item.title;
           },
 
-          onSelect(_ref5) {
+          // 选中或者点击自动完成列表中的 item 时触发
+          onSelect(_ref6) {
             let {
               item
-            } = _ref5;
-            onSelect({
+            } = _ref6;
+
+            if (item.type === 'more-result') {
+              return null;
+            }
+
+            return onSelect({
               blocklet: item,
               detailUrl: (0, _urlJoin.default)(endpoint, "/blocklets/".concat(item.did)),
               storeUrl: endpoint
@@ -181,22 +215,27 @@ function Autocomplete(_ref) {
           },
 
           templates: {
-            // eslint-disable-next-line react/no-unstable-nested-components
-            item(_ref6) {
+            item(_ref7) {
               let {
                 item
-              } = _ref6;
+              } = _ref7;
               const logoUrl = item.logo ? (0, _urlJoin.default)(endpoint, 'assets', item.did, item.logo) : null;
+
+              if (item.type === 'more-result') {
+                return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+                  children: t('autocomplete.expandResult', {
+                    name: query
+                  })
+                });
+              }
+
               return /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.ThemeProvider, {
                 theme: muiTheme,
-                children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_react2.ThemeProvider, {
-                  theme: muiTheme,
-                  children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_item.default, {
-                    item: item,
-                    did: item.did,
-                    description: item.description,
-                    cover: logoUrl
-                  })
+                children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_item.default, {
+                  item: item,
+                  did: item.did,
+                  description: item.description,
+                  cover: logoUrl
                 })
               });
             },
@@ -213,7 +252,7 @@ function Autocomplete(_ref) {
     return () => {
       search.destroy();
     };
-  }, [endpoint, filters, getResults, muiTheme, onSubmit, onSelect, t, onReset]);
+  }, [endpoint, filters, muiTheme, onSubmit, onSelect, t, onReset, onStateChange, handleKeyword, getBlocklets]);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
     className: "bl-search-container",
     ref: containerRef

package/lib/components/autocomplete/item.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = Blocklet;
 
-var _styled = _interopRequireDefault(require("@emotion/styled"));
+var _Theme = require("@arcblock/ux/lib/Theme");
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
@@ -35,7 +35,7 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 
-const Div = _styled.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  &.arcblock-blocklet {\n    padding: ", " ", " 0\n      ", ";\n  }\n  .arcblock-blocklet__content {\n    cursor: pointer;\n    display: flex;\n  }\n  .arcblock-blocklet__cover {\n    width: 64px;\n    height: 64px;\n    margin-right: ", ";\n    overflow: hidden;\n    border-radius: 12px;\n    transform: translateZ(0);\n  }\n\n  .arcblock-blocklet__info {\n    flex: 1;\n    overflow: hidden;\n    border-bottom: 1px solid ", ";\n    padding-bottom: ", ";\n  }\n  .arcblock-blocklet__text {\n    height: 57px;\n    overflow: hidden;\n  }\n  /* \u8BBE\u7F6E\u591A\u884C\u6587\u672C\u6EA2\u51FA\u663E\u793A\u7701\u7565\u53F7 \u517C\u5BB9fireFox\u3001safari */\n  .arcblock-blocklet__title {\n    margin: 0;\n    font-size: 16px;\n    font-weight: 500;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n  .arcblock-blocklet__describe {\n    margin-top: ", ";\n    color: ", ";\n    font-size: 14px;\n    font-weight: 500;\n    line-height: 17px;\n    max-height: 34px;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    display: -webkit-box;\n    -webkit-line-clamp: 2;\n    -webkit-box-orient: vertical;\n    word-break: break-word;\n  }\n  .ms-highlight {\n    background-color: yellow;\n  }\n"])), props => props.theme.spacing(2), props => props.theme.spacing(2), props => props.theme.spacing(2), props => props.theme.spacing(2), props => props.theme.palette.divider, props => props.theme.spacing(2), props => props.theme.spacing(0.5), props => props.theme.palette.grey[600]);
+const Div = (0, _Theme.styled)('div')(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  &.arcblock-blocklet {\n    padding: ", " ", " 0\n      ", ";\n  }\n  .arcblock-blocklet__content {\n    cursor: pointer;\n    display: flex;\n  }\n  .arcblock-blocklet__cover {\n    width: 64px;\n    height: 64px;\n    margin-right: ", ";\n    overflow: hidden;\n    border-radius: 12px;\n    transform: translateZ(0);\n  }\n\n  .arcblock-blocklet__info {\n    flex: 1;\n    overflow: hidden;\n    border-bottom: 1px solid ", ";\n    padding-bottom: ", ";\n  }\n  .arcblock-blocklet__text {\n    height: 57px;\n    overflow: hidden;\n  }\n  /* \u8BBE\u7F6E\u591A\u884C\u6587\u672C\u6EA2\u51FA\u663E\u793A\u7701\u7565\u53F7 \u517C\u5BB9fireFox\u3001safari */\n  .arcblock-blocklet__title {\n    margin: 0;\n    font-size: 16px;\n    font-weight: 500;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n  .arcblock-blocklet__describe {\n    margin-top: ", ";\n    color: ", ";\n    font-size: 14px;\n    font-weight: 500;\n    line-height: 17px;\n    max-height: 34px;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    display: -webkit-box;\n    -webkit-line-clamp: 2;\n    -webkit-box-orient: vertical;\n    word-break: break-word;\n  }\n  .ms-highlight {\n    background-color: yellow;\n  }\n"])), props => props.theme.spacing(2), props => props.theme.spacing(2), props => props.theme.spacing(2), props => props.theme.spacing(2), props => props.theme.palette.divider, props => props.theme.spacing(2), props => props.theme.spacing(0.5), props => props.theme.palette.grey[600]);
 
 function Blocklet(_ref) {
   let {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/list",
-  "version": "0.10.19",
+  "version": "0.10.20",
   "description": "Common ux components of blocklet",
   "publishConfig": {
     "access": "public"
@@ -71,5 +71,5 @@
     "eslint": "^8.22.0",
     "prettier": "^2.7.1"
   },
-  "gitHead": "813a039894ea2d1b8e1f4897c9f252b85df99091"
+  "gitHead": "325fb367d112f88af0d4c78b9e26e089f9d363f1"
 }

package/src/assets/locale.js

@@ -31,6 +31,9 @@ const en = {
     noCategoryResults1: 'No "',
     noCategoryResults2: '" Blocklets',
   },
+  autocomplete: {
+    expandResult: 'Show all search results for "{name}" ',
+  },
 };
 
 const zh = {
@@ -64,6 +67,9 @@ const zh = {
     noCategoryResults1: '无 "',
     noCategoryResults2: '" 类别的 Blocklets',
   },
+  autocomplete: {
+    expandResult: '显示所有 “{name}” 的搜索结果 ',
+  },
 };
 
 export default {

package/src/components/autocomplete/index.js

@@ -4,7 +4,6 @@ import { createRoot } from 'react-dom/client';
 import { autocomplete } from '@algolia/autocomplete-js';
 import { useHotkeys } from 'react-hotkeys-hook';
 
-import { ThemeProvider as EmotionThemeProvider } from '@emotion/react';
 import { ThemeProvider as MuiThemeProvider, useTheme } from '@mui/material/styles';
 import joinUrl from 'url-join';
 
@@ -20,18 +19,25 @@ export default function Autocomplete({ onSelect }) {
   const { storeApi, filters, endpoint, handleKeyword, t } = useFilterContext();
   const muiTheme = useTheme();
 
-  const getResults = useCallback(
+  const getBlocklets = useCallback(
     async (params) => {
       const { data } = await storeApi.get(constant.blockletsPath, { params });
-      return data.dataList || [];
+      const blocklets = data.dataList || [];
+      // 头部插入的一条 item  用于展示 `点击展开更多结果`,如果没有blocklet 返回，不展示
+      if (blocklets.length > 0) {
+        blocklets.unshift({ type: 'more-result' });
+      }
+      return blocklets;
     },
     [storeApi]
   );
 
-  const onSubmit = useCallback((e) => {
-    handleKeyword(e.state.query);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+  const onSubmit = useCallback(
+    (e) => {
+      handleKeyword(e.state.query);
+    },
+    [handleKeyword]
+  );
 
   const setFocus = () => {
     if (containerRef.current) {
@@ -46,12 +52,22 @@ export default function Autocomplete({ onSelect }) {
   };
 
   const onReset = useCallback((autocompleteState) => {
-    handleKeyword();
-    setFocus();
     autocompleteState.setIsOpen(false);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
+    setFocus();
   }, []);
 
+  const onStateChange = useCallback(
+    ({ prevState, state }) => {
+      // eslint-disable-next-line no-console
+      if (prevState.query !== state.query) {
+        if (!state.query) {
+          handleKeyword();
+        }
+      }
+    },
+    [handleKeyword]
+  );
+
   useHotkeys(
     '/, ctrl + k, command + k',
     (e) => {
@@ -97,6 +113,9 @@ export default function Autocomplete({ onSelect }) {
       initialState: {
         query: filters.keyword,
       },
+      onStateChange(autocompleteState) {
+        onStateChange(autocompleteState);
+      },
       onSubmit,
       onReset(autocompleteState) {
         onReset(autocompleteState);
@@ -106,31 +125,42 @@ export default function Autocomplete({ onSelect }) {
           ...filters,
           sortBy: constant[filters.sortBy],
           page: 1,
-          pageSize: 10,
+          pageSize: 5,
           keyword: query,
         };
         return debounced([
           {
             sourceId: 'blocklets',
             getItems() {
-              return getResults(params);
+              return getBlocklets(params);
             },
             // 选中后填充 搜索框中值
             getItemInputValue({ item }) {
+              if (item.type === 'more-result') {
+                return query;
+              }
               return item.title;
             },
+            // 选中或者点击自动完成列表中的 item 时触发
             onSelect({ item }) {
-              onSelect({ blocklet: item, detailUrl: joinUrl(endpoint, `/blocklets/${item.did}`), storeUrl: endpoint });
+              if (item.type === 'more-result') {
+                return null;
+              }
+              return onSelect({
+                blocklet: item,
+                detailUrl: joinUrl(endpoint, `/blocklets/${item.did}`),
+                storeUrl: endpoint,
+              });
             },
             templates: {
-              // eslint-disable-next-line react/no-unstable-nested-components
               item({ item }) {
                 const logoUrl = item.logo ? joinUrl(endpoint, 'assets', item.did, item.logo) : null;
+                if (item.type === 'more-result') {
+                  return <div>{t('autocomplete.expandResult', { name: query })}</div>;
+                }
                 return (
                   <MuiThemeProvider theme={muiTheme}>
-                    <EmotionThemeProvider theme={muiTheme}>
-                      <Blocklet item={item} did={item.did} description={item.description} cover={logoUrl} />
-                    </EmotionThemeProvider>
+                    <Blocklet item={item} did={item.did} description={item.description} cover={logoUrl} />
                   </MuiThemeProvider>
                 );
               },
@@ -146,7 +176,7 @@ export default function Autocomplete({ onSelect }) {
     return () => {
       search.destroy();
     };
-  }, [endpoint, filters, getResults, muiTheme, onSubmit, onSelect, t, onReset]);
+  }, [endpoint, filters, muiTheme, onSubmit, onSelect, t, onReset, onStateChange, handleKeyword, getBlocklets]);
 
   return <div className="bl-search-container" ref={containerRef} />;
 }

package/src/components/autocomplete/item.js

@@ -1,10 +1,10 @@
-import styled from '@emotion/styled';
+import { styled } from '@arcblock/ux/lib/Theme';
 import PropTypes from 'prop-types';
 import Typography from '@mui/material/Typography';
 import Img from '@arcblock/ux/lib/Img';
 import Avatar from '@arcblock/did-connect/lib/Avatar';
 
-const Div = styled.div`
+const Div = styled('div')`
   &.arcblock-blocklet {
     padding: ${(props) => props.theme.spacing(2)} ${(props) => props.theme.spacing(2)} 0
       ${(props) => props.theme.spacing(2)};

package/src/libs/utils.js

@@ -117,7 +117,6 @@ function debouncePromise(fn, time) {
     if (timerId) {
       clearTimeout(timerId);
     }
-
     return new Promise((resolve) => {
       timerId = setTimeout(() => resolve(fn(...args)), time);
     });