@blocklet/list 0.10.26 → 0.10.28

package/lib/base.js

@@ -53,7 +53,8 @@ function ListBase() {
     handleSearchSelect,
     t,
     getCategoryLocale,
-    priceOptions
+    priceOptions,
+    wrapChildren
   } = (0, _filter.useFilterContext)();
   const sortOptions = (0, _utils.getSortOptions)(t);
   const sortLocale = ((_sortOptions$find = sortOptions.find(f => f.value === filters.sortBy)) === null || _sortOptions$find === void 0 ? void 0 : _sortOptions$find.name) || t('sort.sort');
@@ -73,7 +74,8 @@ function ListBase() {
           display: "flex",
           alignItems: "center",
           children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_autocomplete.default, {
-            onSelect: handleSearchSelect
+            onSelect: handleSearchSelect,
+            wrapChildren: wrapChildren
           }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
             mt: 0,
             ml: "16px",

package/lib/components/autocomplete/index.js

@@ -15,8 +15,6 @@ var _autocompleteJs = require("@algolia/autocomplete-js");
 
 var _reactHotkeysHook = require("react-hotkeys-hook");
 
-var _styles = require("@mui/material/styles");
-
 var _urlJoin = _interopRequireDefault(require("url-join"));
 
 var _constant = _interopRequireDefault(require("../../libs/constant"));
@@ -25,10 +23,10 @@ var _utils = require("../../libs/utils");
 
 var _filter = require("../../contexts/filter");
 
-var _item = _interopRequireDefault(require("./item"));
-
 var _jsxRuntime = require("react/jsx-runtime");
 
+const _excluded = ["query", "state"];
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
@@ -37,22 +35,28 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
 function Autocomplete(_ref) {
   let {
-    onSelect
+    onSelect,
+    wrapChildren
   } = _ref;
   const containerRef = (0, _react.useRef)(null);
   const panelRootRef = (0, _react.useRef)(null);
   const rootRef = (0, _react.useRef)(null);
   const {
     storeApi,
+    blockletRender,
     filters,
     endpoint,
     handleKeyword,
     t
   } = (0, _filter.useFilterContext)();
-  const muiTheme = (0, _styles.useTheme)();
-  const getBlocklets = (0, _react.useCallback)(async params => {
+
+  const getBlocklets = async params => {
     const {
       data
     } = await storeApi.get(_constant.default.blockletsPath, {
@@ -68,10 +72,12 @@ function Autocomplete(_ref) {
     }
 
     return blocklets;
-  }, [storeApi]);
-  const onSubmit = (0, _react.useCallback)(e => {
-    handleKeyword(e.state.query);
-  }, [handleKeyword]);
+  };
+
+  const onSubmit = autocompleteState => {
+    handleKeyword(autocompleteState.state.query);
+    autocompleteState.setIsOpen(false);
+  };
 
   const setFocus = () => {
     if (containerRef.current) {
@@ -86,24 +92,26 @@ function Autocomplete(_ref) {
     }
   };
 
-  const onReset = (0, _react.useCallback)(autocompleteState => {
+  const onReset = autocompleteState => {
     autocompleteState.setIsOpen(false);
     setFocus();
-  }, []);
-  const onStateChange = (0, _react.useCallback)(_ref2 => {
+  };
+
+  const onStateChange = _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 => {
+  };
+
+  (0, _reactHotkeysHook.useHotkeys)('ctrl + k, command + k', e => {
     e.stopPropagation();
     e.preventDefault();
     setFocus();
@@ -140,10 +148,11 @@ function Autocomplete(_ref) {
           panelRootRef.current = (0, _client.createRoot)(root);
         }
 
-        panelRootRef.current.render(children);
+        panelRootRef.current.render(wrapChildren(children));
       },
 
-      autoFocus: false,
+      autoFocus: true,
+      openOnFocus: false,
       classNames: {
         panel: 'bl-autocomplete-panel',
         label: 'bl-autocomplete-label',
@@ -168,8 +177,10 @@ function Autocomplete(_ref) {
 
       getSources(_ref4) {
         let {
-          query
-        } = _ref4;
+          query,
+          state
+        } = _ref4,
+            setters = _objectWithoutProperties(_ref4, _excluded);
 
         const params = _objectSpread(_objectSpread({}, filters), {}, {
           sortBy: _constant.default[filters.sortBy],
@@ -201,13 +212,19 @@ function Autocomplete(_ref) {
           // 选中或者点击自动完成列表中的 item 时触发
           onSelect(_ref6) {
             let {
+              event,
               item
             } = _ref6;
 
             if (item.type === 'more-result') {
+              setters.setIsOpen(false);
               return handleKeyword(query);
             }
 
+            if (event.type === 'keydown') {
+              return handleKeyword(item.title);
+            }
+
             return onSelect({
               blocklet: item,
               detailUrl: (0, _urlJoin.default)(endpoint, "/blocklets/".concat(item.did)),
@@ -220,7 +237,6 @@ function Autocomplete(_ref) {
               let {
                 item
               } = _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", {
@@ -231,14 +247,9 @@ function Autocomplete(_ref) {
                 });
               }
 
-              return /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.ThemeProvider, {
-                theme: muiTheme,
-                children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_item.default, {
-                  item: item,
-                  did: item.did,
-                  description: item.description,
-                  cover: logoUrl
-                })
+              return blockletRender({
+                blocklet: item,
+                autocompleteSetters: setters
               });
             },
 
@@ -253,8 +264,8 @@ function Autocomplete(_ref) {
     });
     return () => {
       search.destroy();
-    };
-  }, [endpoint, filters, muiTheme, onSubmit, onSelect, t, onReset, onStateChange, handleKeyword, getBlocklets]);
+    }; // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [filters, blockletRender]);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
     className: "bl-search-container",
     ref: containerRef
@@ -262,5 +273,9 @@ function Autocomplete(_ref) {
 }
 
 Autocomplete.propTypes = {
-  onSelect: _propTypes.default.func.isRequired
+  onSelect: _propTypes.default.func.isRequired,
+  wrapChildren: _propTypes.default.func
+};
+Autocomplete.defaultProps = {
+  wrapChildren: children => children
 };

package/lib/contexts/filter.js

@@ -51,7 +51,8 @@ function FilterProvider(_ref) {
     blockletRender,
     onFilterChange,
     onSearchSelect,
-    extraFilter
+    extraFilter,
+    wrapChildren
   } = _ref;
   const storeApi = (0, _react.useMemo)(() => {
     return _axios.default.create({
@@ -147,6 +148,7 @@ function FilterProvider(_ref) {
     },
     endpoint,
     blockletList,
+    wrapChildren,
     t: translate,
     filters: finalFilters,
     selectedCategory,

package/lib/index.js

@@ -37,7 +37,7 @@ function BlockletList(props) {
   const muiTheme = (0, _styles.useTheme)();
   const primaryColor = (0, _utils.toColorRgb)(muiTheme.palette.primary.main);
   const globalStyles = {
-    autocomplete: theme => (0, _react.css)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      :root {\n        --aa-detached-media-query: (max-width: ", "px) !important;\n        --aa-detached-modal-media-query: (min-width: ", "px) !important;\n        --aa-detached-modal-max-width: ", "px !important;\n        --aa-selected-color-rgb: ", ", ", ", ", " !important;\n        --aa-primary-color-rgb: ", ", ", ", ", " !important;\n        --aa-input-background-color-rgb: 250, 250, 250 !important;\n      }\n      .bl-autocomplete-panel {\n        z-index: ", " !important;\n      }\n      .bl-autocomplete-label {\n        .aa-SubmitIcon {\n          color: ", " !important;\n        }\n      }\n      .bl-autocomplete-form {\n        border: 1px solid #fff !important;\n        &:focus-within {\n          box-shadow: none !important;\n          border: 1px solid rgba(0, 0, 0, 0.12) !important;\n        }\n      }\n      .aa-DetachedSearchButton {\n        border: none !important;\n        &:focus-within {\n          box-shadow: none !important;\n        }\n        .aa-SubmitIcon {\n          color: ", " !important;\n        }\n      }\n    "])), theme.breakpoints.values.md, theme.breakpoints.values.md, theme.breakpoints.values.md, primaryColor.r, primaryColor.g, primaryColor.b, primaryColor.r, primaryColor.g, primaryColor.b, theme.zIndex.modal + 1, theme.palette.grey[500], theme.palette.grey[500])
+    autocomplete: theme => (0, _react.css)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      :root {\n        --aa-detached-media-query: (max-width: ", "px) !important;\n        --aa-detached-modal-media-query: (min-width: ", "px) !important;\n        --aa-detached-modal-max-width: ", "px !important;\n        --aa-selected-color-rgb: ", ", ", ", ", " !important;\n        --aa-primary-color-rgb: ", ", ", ", ", " !important;\n        --aa-input-background-color-rgb: 250, 250, 250 !important;\n      }\n      .bl-autocomplete-panel {\n        z-index: ", ";\n      }\n      .bl-autocomplete-label {\n        .aa-SubmitIcon {\n          color: ", " !important;\n        }\n      }\n      .bl-autocomplete-form {\n        border: 1px solid #fff !important;\n        &:focus-within {\n          box-shadow: none !important;\n          border: 1px solid rgba(0, 0, 0, 0.12) !important;\n        }\n      }\n      .aa-DetachedSearchButton {\n        border: none !important;\n        &:focus-within {\n          box-shadow: none !important;\n        }\n        .aa-SubmitIcon {\n          color: ", " !important;\n        }\n      }\n      .aa-Panel .arcblock-blocklet button {\n        border: 1px solid rgba(", ", ", ", ", ", 0.5);\n      }\n    "])), theme.breakpoints.values.md, theme.breakpoints.values.md, theme.breakpoints.values.md, primaryColor.r, primaryColor.g, primaryColor.b, primaryColor.r, primaryColor.g, primaryColor.b, theme.zIndex.modal, theme.palette.grey[500], theme.palette.grey[500], primaryColor.r, primaryColor.g, primaryColor.b)
   };
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_filter.FilterProvider, _objectSpread(_objectSpread({}, props), {}, {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_react.Global, {

package/lib/libs/prop-types.js

@@ -18,6 +18,7 @@ const propTypes = {
     category: _propTypes.default.string,
     developer: _propTypes.default.string
   }),
+  wrapChildren: _propTypes.default.func,
   extraFilter: _propTypes.default.func,
   endpoint: _propTypes.default.string.isRequired,
   blockletRender: _propTypes.default.func.isRequired,
@@ -36,6 +37,7 @@ const defaultProps = {
     } = _ref;
     window.location.href = detailUrl;
   },
+  wrapChildren: children => children,
   extraFilter: list => list
 };
 exports.defaultProps = defaultProps;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/list",
-  "version": "0.10.26",
+  "version": "0.10.28",
   "description": "Common ux components of blocklet",
   "publishConfig": {
     "access": "public"
@@ -71,5 +71,5 @@
     "eslint": "^8.22.0",
     "prettier": "^2.7.1"
   },
-  "gitHead": "9b6f123beb1a64eb6f5eb0b04d09a5958ab0fb75"
+  "gitHead": "0176029eaadc440b69e9255d83873bbcbae1edcd"
 }

package/src/base.js

@@ -26,12 +26,12 @@ function ListBase() {
     t,
     getCategoryLocale,
     priceOptions,
+    wrapChildren,
   } = useFilterContext();
   const sortOptions = getSortOptions(t);
   const sortLocale = sortOptions.find((f) => f.value === filters.sortBy)?.name || t('sort.sort');
   const categoryLocale = getCategoryLocale(filters.category);
   const priceLocale = priceOptions.find((price) => price.value === filters.price)?.name;
-
   return (
     <Box display="flex" alignItems="flex-start" height="100%">
       <Hidden mdDown>
@@ -40,7 +40,7 @@ function ListBase() {
       <StyledMin>
         <FilterContainer>
           <Box className="filter-bar" display="flex" alignItems="center">
-            <Autocomplete onSelect={handleSearchSelect} />
+            <Autocomplete onSelect={handleSearchSelect} wrapChildren={wrapChildren} />
             <Box mt={0} ml="16px" className="filter-container">
               <Hidden mdUp>
                 {/* 小屏幕下类别 */}

package/src/components/autocomplete/index.js

@@ -1,43 +1,34 @@
-import { createElement, Fragment, useEffect, useRef, useCallback } from 'react';
+import { createElement, Fragment, useEffect, useRef } from 'react';
 import PropTypes from 'prop-types';
 import { createRoot } from 'react-dom/client';
 import { autocomplete } from '@algolia/autocomplete-js';
 import { useHotkeys } from 'react-hotkeys-hook';
 
-import { ThemeProvider as MuiThemeProvider, useTheme } from '@mui/material/styles';
 import joinUrl from 'url-join';
 
 import constant from '../../libs/constant';
 import { debounced } from '../../libs/utils';
 import { useFilterContext } from '../../contexts/filter';
-import Blocklet from './item';
 
-export default function Autocomplete({ onSelect }) {
+export default function Autocomplete({ onSelect, wrapChildren }) {
   const containerRef = useRef(null);
   const panelRootRef = useRef(null);
   const rootRef = useRef(null);
-  const { storeApi, filters, endpoint, handleKeyword, t } = useFilterContext();
-  const muiTheme = useTheme();
-
-  const getBlocklets = useCallback(
-    async (params) => {
-      const { data } = await storeApi.get(constant.blockletsPath, { params });
-      const blocklets = data.dataList || [];
-      // 头部插入的一条 item  用于展示 `点击展开 xx条 结果`,如果没有blocklet 返回，不展示
-      if (blocklets.length > 0) {
-        blocklets.unshift({ type: 'more-result', total: data.total || 0 });
-      }
-      return blocklets;
-    },
-    [storeApi]
-  );
+  const { storeApi, blockletRender, filters, endpoint, handleKeyword, t } = useFilterContext();
+  const getBlocklets = async (params) => {
+    const { data } = await storeApi.get(constant.blockletsPath, { params });
+    const blocklets = data.dataList || [];
+    // 头部插入的一条 item  用于展示 `点击展开 xx条 结果`,如果没有blocklet 返回，不展示
+    if (blocklets.length > 0) {
+      blocklets.unshift({ type: 'more-result', total: data.total || 0 });
+    }
+    return blocklets;
+  };
 
-  const onSubmit = useCallback(
-    (e) => {
-      handleKeyword(e.state.query);
-    },
-    [handleKeyword]
-  );
+  const onSubmit = (autocompleteState) => {
+    handleKeyword(autocompleteState.state.query);
+    autocompleteState.setIsOpen(false);
+  };
 
   const setFocus = () => {
     if (containerRef.current) {
@@ -51,25 +42,22 @@ export default function Autocomplete({ onSelect }) {
     }
   };
 
-  const onReset = useCallback((autocompleteState) => {
+  const onReset = (autocompleteState) => {
     autocompleteState.setIsOpen(false);
     setFocus();
-  }, []);
+  };
 
-  const onStateChange = useCallback(
-    ({ prevState, state }) => {
-      // eslint-disable-next-line no-console
-      if (prevState.query !== state.query) {
-        if (!state.query) {
-          handleKeyword();
-        }
+  const onStateChange = ({ prevState, state }) => {
+    // 当搜索框中的值清空时, 更新页面中的搜索结果
+    if (prevState.query !== state.query) {
+      if (!state.query) {
+        handleKeyword();
       }
-    },
-    [handleKeyword]
-  );
+    }
+  };
 
   useHotkeys(
-    '/, ctrl + k, command + k',
+    'ctrl + k, command + k',
     (e) => {
       e.stopPropagation();
       e.preventDefault();
@@ -87,7 +75,6 @@ export default function Autocomplete({ onSelect }) {
     if (!containerRef.current) {
       return undefined;
     }
-
     const search = autocomplete({
       container: containerRef.current,
       renderer: { createElement, Fragment, render: () => {} },
@@ -98,10 +85,10 @@ export default function Autocomplete({ onSelect }) {
           panelRootRef.current?.unmount();
           panelRootRef.current = createRoot(root);
         }
-
-        panelRootRef.current.render(children);
+        panelRootRef.current.render(wrapChildren(children));
       },
-      autoFocus: false,
+      autoFocus: true,
+      openOnFocus: false,
       classNames: {
         panel: 'bl-autocomplete-panel',
         label: 'bl-autocomplete-label',
@@ -120,7 +107,7 @@ export default function Autocomplete({ onSelect }) {
       onReset(autocompleteState) {
         onReset(autocompleteState);
       },
-      getSources({ query }) {
+      getSources({ query, state, ...setters }) {
         const params = {
           ...filters,
           sortBy: constant[filters.sortBy],
@@ -142,10 +129,14 @@ export default function Autocomplete({ onSelect }) {
               return item.title;
             },
             // 选中或者点击自动完成列表中的 item 时触发
-            onSelect({ item }) {
+            onSelect({ event, item }) {
               if (item.type === 'more-result') {
+                setters.setIsOpen(false);
                 return handleKeyword(query);
               }
+              if (event.type === 'keydown') {
+                return handleKeyword(item.title);
+              }
               return onSelect({
                 blocklet: item,
                 detailUrl: joinUrl(endpoint, `/blocklets/${item.did}`),
@@ -154,17 +145,12 @@ export default function Autocomplete({ onSelect }) {
             },
             templates: {
               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, number: item.total.toLocaleString() })}</div>
                   );
                 }
-                return (
-                  <MuiThemeProvider theme={muiTheme}>
-                    <Blocklet item={item} did={item.did} description={item.description} cover={logoUrl} />
-                  </MuiThemeProvider>
-                );
+                return blockletRender({ blocklet: item, autocompleteSetters: setters });
               },
               noResults() {
                 return t('blocklet.noResults');
@@ -178,11 +164,16 @@ export default function Autocomplete({ onSelect }) {
     return () => {
       search.destroy();
     };
-  }, [endpoint, filters, muiTheme, onSubmit, onSelect, t, onReset, onStateChange, handleKeyword, getBlocklets]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [filters, blockletRender]);
 
   return <div className="bl-search-container" ref={containerRef} />;
 }
 
 Autocomplete.propTypes = {
   onSelect: PropTypes.func.isRequired,
+  wrapChildren: PropTypes.func,
+};
+Autocomplete.defaultProps = {
+  wrapChildren: (children) => children,
 };

package/src/contexts/filter.js

@@ -20,6 +20,7 @@ function FilterProvider({
   onFilterChange,
   onSearchSelect,
   extraFilter,
+  wrapChildren,
 }) {
   const storeApi = useMemo(() => {
     return axios.create({
@@ -107,6 +108,7 @@ function FilterProvider({
     loadings: { fetchBlockletsLoading, fetchCategoriesLoading, loadingMore },
     endpoint,
     blockletList,
+    wrapChildren,
     t: translate,
     filters: finalFilters,
     selectedCategory,

package/src/index.js

@@ -22,7 +22,7 @@ export default function BlockletList(props) {
         --aa-input-background-color-rgb: 250, 250, 250 !important;
       }
       .bl-autocomplete-panel {
-        z-index: ${theme.zIndex.modal + 1} !important;
+        z-index: ${theme.zIndex.modal};
       }
       .bl-autocomplete-label {
         .aa-SubmitIcon {
@@ -45,6 +45,9 @@ export default function BlockletList(props) {
           color: ${theme.palette.grey[500]} !important;
         }
       }
+      .aa-Panel .arcblock-blocklet button {
+        border: 1px solid rgba(${primaryColor.r}, ${primaryColor.g}, ${primaryColor.b}, 0.5);
+      }
     `,
   };
   return (

package/src/libs/prop-types.js

@@ -9,6 +9,7 @@ const propTypes = {
     category: PropTypes.string,
     developer: PropTypes.string,
   }),
+  wrapChildren: PropTypes.func,
   extraFilter: PropTypes.func,
   endpoint: PropTypes.string.isRequired,
   blockletRender: PropTypes.func.isRequired,
@@ -24,6 +25,7 @@ const defaultProps = {
   onSearchSelect: ({ detailUrl }) => {
     window.location.href = detailUrl;
   },
+  wrapChildren: (children) => children,
   extraFilter: (list) => list,
 };
 

package/lib/components/autocomplete/item.js

@@ -1,133 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = Blocklet;
-
-var _Theme = require("@arcblock/ux/lib/Theme");
-
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
-var _Typography = _interopRequireDefault(require("@mui/material/Typography"));
-
-var _Img = _interopRequireDefault(require("@arcblock/ux/lib/Img"));
-
-var _Avatar = _interopRequireDefault(require("@arcblock/did-connect/lib/Avatar"));
-
-var _jsxRuntime = require("react/jsx-runtime");
-
-const _excluded = ["cover", "item", "className"];
-
-var _templateObject;
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
-function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
-
-function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-
-function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
-
-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    color: ", ";\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], props => props.theme.palette.primary.main);
-
-function Blocklet(_ref) {
-  let {
-    cover,
-    item,
-    className
-  } = _ref,
-      rest = _objectWithoutProperties(_ref, _excluded);
-
-  const {
-    did,
-    description,
-    title,
-    name
-  } = item;
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Div, _objectSpread(_objectSpread({
-    className: "".concat(className, " arcblock-blocklet")
-  }, rest), {}, {
-    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-      className: "arcblock-blocklet__content",
-      children: [cover ? /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-        className: "arcblock-blocklet__cover",
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Img.default, {
-          src: cover
-        })
-      }) : did && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-        className: "arcblock-blocklet__cover",
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Avatar.default, {
-          did: did,
-          size: 64
-        })
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-        className: "arcblock-blocklet__info",
-        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-          className: "arcblock-blocklet__text",
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
-            component: "h3",
-            variant: "h3",
-            className: "arcblock-blocklet__title",
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ShowAttributes, {
-              item: item,
-              attribute: "title",
-              value: title || name
-            })
-          }), description && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
-            component: "div",
-            variant: "body2",
-            className: "arcblock-blocklet__describe",
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ShowAttributes, {
-              item: item,
-              attribute: "description",
-              value: description
-            })
-          })]
-        })
-      })]
-    })
-  }));
-}
-
-Blocklet.propTypes = {
-  cover: _propTypes.default.string,
-  className: _propTypes.default.string,
-  item: _propTypes.default.object.isRequired
-};
-Blocklet.defaultProps = {
-  cover: null,
-  className: null
-};
-
-function ShowAttributes(_ref2) {
-  let {
-    item,
-    attribute,
-    value
-  } = _ref2;
-
-  if (item._formatted) {
-    // eslint-disable-next-line react/no-danger
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-      "data-cy": "bl-autocomplete-item",
-      dangerouslySetInnerHTML: {
-        __html: item._formatted[attribute]
-      }
-    });
-  }
-
-  return value;
-}
-
-ShowAttributes.propTypes = {
-  item: _propTypes.default.object.isRequired,
-  attribute: _propTypes.default.string.isRequired,
-  value: _propTypes.default.string.isRequired
-};

package/src/components/autocomplete/item.js

@@ -1,120 +0,0 @@
-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')`
-  &.arcblock-blocklet {
-    padding: ${(props) => props.theme.spacing(2)} ${(props) => props.theme.spacing(2)} 0
-      ${(props) => props.theme.spacing(2)};
-  }
-  .arcblock-blocklet__content {
-    cursor: pointer;
-    display: flex;
-  }
-  .arcblock-blocklet__cover {
-    width: 64px;
-    height: 64px;
-    margin-right: ${(props) => props.theme.spacing(2)};
-    overflow: hidden;
-    border-radius: 12px;
-    transform: translateZ(0);
-  }
-
-  .arcblock-blocklet__info {
-    flex: 1;
-    overflow: hidden;
-    border-bottom: 1px solid ${(props) => props.theme.palette.divider};
-    padding-bottom: ${(props) => props.theme.spacing(2)};
-  }
-  .arcblock-blocklet__text {
-    height: 57px;
-    overflow: hidden;
-  }
-  /* 设置多行文本溢出显示省略号 兼容fireFox、safari */
-  .arcblock-blocklet__title {
-    margin: 0;
-    font-size: 16px;
-    font-weight: 500;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-  .arcblock-blocklet__describe {
-    margin-top: ${(props) => props.theme.spacing(0.5)};
-    color: ${(props) => props.theme.palette.grey[600]};
-    font-size: 14px;
-    font-weight: 500;
-    line-height: 17px;
-    max-height: 34px;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    display: -webkit-box;
-    -webkit-line-clamp: 2;
-    -webkit-box-orient: vertical;
-    word-break: break-word;
-  }
-  .ms-highlight {
-    color: ${(props) => props.theme.palette.primary.main};
-  }
-`;
-
-export default function Blocklet({ cover, item, className, ...rest }) {
-  const { did, description, title, name } = item;
-
-  return (
-    <Div className={`${className} arcblock-blocklet`} {...rest}>
-      <div className="arcblock-blocklet__content">
-        {cover ? (
-          <div className="arcblock-blocklet__cover">
-            <Img src={cover} />
-          </div>
-        ) : (
-          did && (
-            <div className="arcblock-blocklet__cover">
-              <Avatar did={did} size={64} />
-            </div>
-          )
-        )}
-        <div className="arcblock-blocklet__info">
-          <div className="arcblock-blocklet__text">
-            <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">
-                <ShowAttributes item={item} attribute="description" value={description} />
-              </Typography>
-            )}
-          </div>
-        </div>
-      </div>
-    </Div>
-  );
-}
-
-Blocklet.propTypes = {
-  cover: PropTypes.string,
-  className: PropTypes.string,
-  item: PropTypes.object.isRequired,
-};
-
-Blocklet.defaultProps = {
-  cover: null,
-  className: null,
-};
-
-function ShowAttributes({ item, attribute, value }) {
-  if (item._formatted) {
-    // eslint-disable-next-line react/no-danger
-    return <span data-cy="bl-autocomplete-item" dangerouslySetInnerHTML={{ __html: item._formatted[attribute] }} />;
-  }
-
-  return value;
-}
-ShowAttributes.propTypes = {
-  item: PropTypes.object.isRequired,
-  attribute: PropTypes.string.isRequired,
-  value: PropTypes.string.isRequired,
-};