@blocklet/list 0.9.5 → 0.9.8

package/lib/base.js

@@ -29,11 +29,11 @@ var _list = _interopRequireDefault(require("./components/list"));
 
 var _aside = _interopRequireDefault(require("./components/aside"));
 
-var _search = _interopRequireDefault(require("./components/search"));
+var _autocomplete = _interopRequireDefault(require("./components/autocomplete"));
 
 var _jsxRuntime = require("react/jsx-runtime");
 
-var _templateObject, _templateObject2, _templateObject3;
+var _templateObject, _templateObject2;
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -71,10 +71,7 @@ function ListBase() {
           className: "filter-bar",
           display: "flex",
           alignItems: "center",
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(StyledSearch, {
-            className: "search-container",
-            placeholder: t('common.searchStore')
-          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_autocomplete.default, {}), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
             mt: 0,
             ml: "16px",
             className: "filter-container",
@@ -131,11 +128,11 @@ function ListBase() {
   });
 }
 
-const StyledMin = _styled.default.main(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  flex: 1;\n  width: 100%;\n  height: 100%;\n  .filter-bar {\n    justify-content: space-between;\n    margin-bottom: ", ";\n  }\n  .sort-button {\n    white-space: nowrap;\n  }\n  .search-container {\n    flex: 2;\n    margin-left: 0px;\n  }\n\n  .filter-container {\n    flex: 1;\n    display: flex;\n    justify-content: flex-end;\n  }\n  @media (max-width: ", "px) {\n    .search-container {\n      width: 100%;\n      margin-bottom: ", ";\n    }\n    .filter-container {\n      margin-left: 0;\n      display: flex;\n      justify-content: flex-start;\n    }\n    .filter-bar {\n      display: flex;\n      flex-direction: column;\n      align-items: flex-start;\n    }\n  }\n  @media (max-width: ", "px) {\n    .sort-button {\n      font-size: 12px;\n    }\n  }\n"])), props => props.theme.spacing(2), props => props.theme.breakpoints.values.md, props => props.theme.spacing(2), props => props.theme.breakpoints.values.md);
+const StyledMin = _styled.default.main(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  flex: 1;\n  width: 100%;\n  height: 100%;\n  .filter-bar {\n    justify-content: space-between;\n    margin-bottom: ", ";\n  }\n  .sort-button {\n    white-space: nowrap;\n  }\n  .search-container {\n    flex: 2;\n    margin-left: 0px;\n  }\n\n  .filter-container {\n    flex: 1;\n    display: flex;\n    justify-content: flex-end;\n  }\n  @media (max-width: ", "px) {\n    .search-container {\n      width: 100%;\n      margin-bottom: ", ";\n    }\n    .filter-container {\n      margin-left: 0;\n      display: flex;\n      justify-content: flex-start;\n    }\n    .filter-bar {\n      display: flex;\n      flex-direction: column;\n      align-items: flex-start;\n    }\n  }\n  @media (max-width: ", "px) {\n    .sort-button {\n      font-size: 12px;\n    }\n  }\n"])), props => {
+  return props.theme.spacing(2);
+}, props => props.theme.breakpoints.values.md, props => props.theme.spacing(2), props => props.theme.breakpoints.values.md);
 
-const StyledSearch = (0, _styled.default)(_search.default)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  background-color: ", ";\n"])), props => props.theme.palette.grey[50]);
-
-const FilterContainer = _styled.default.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  position: sticky;\n  top: 0;\n  z-index: 999;\n  background-color: white;\n"])));
+const FilterContainer = _styled.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  position: sticky;\n  top: 0;\n  z-index: 9;\n  background-color: white;\n"])));
 
 var _default = ListBase;
 exports.default = _default;

package/lib/components/aside.js

@@ -51,7 +51,7 @@ function Aside() {
   });
 }
 
-const StyledAside = _styled.default.aside(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  width: 220px;\n  margin-right: ", ";\n  height: 100%;\n  position: sticky;\n  top: 0;\n  overflow-y: auto;\n  z-index: 999;\n"])), props => props.theme.spacing(2));
+const StyledAside = _styled.default.aside(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  width: 220px;\n  margin-right: ", ";\n  height: 100%;\n  position: sticky;\n  top: 0;\n  overflow-y: auto;\n  z-index: auto;\n"])), props => props.theme.spacing(2));
 
 Aside.propTypes = {};
 Aside.defaultProps = {};

package/lib/components/autocomplete/index.js

@@ -0,0 +1,199 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = Autocomplete;
+
+var _react = require("react");
+
+var _client = require("react-dom/client");
+
+var _autocompleteJs = require("@algolia/autocomplete-js");
+
+var _react2 = require("@emotion/react");
+
+var _styles = require("@mui/material/styles");
+
+var _urlJoin = _interopRequireDefault(require("url-join"));
+
+var _constant = _interopRequireDefault(require("../../libs/constant"));
+
+var _filter = require("../../contexts/filter");
+
+var _item = _interopRequireDefault(require("./item"));
+
+require("@algolia/autocomplete-theme-classic");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+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; }
+
+const cachePool = new Map();
+
+function Autocomplete() {
+  const containerRef = (0, _react.useRef)(null);
+  const panelRootRef = (0, _react.useRef)(null);
+  const rootRef = (0, _react.useRef)(null);
+  const {
+    storeApi,
+    filters,
+    endpoint,
+    handleKeyword,
+    t
+  } = (0, _filter.useFilterContext)();
+  const muiTheme = (0, _styles.useTheme)();
+  const getResults = (0, _react.useCallback)(async params => {
+    const key = JSON.stringify(params);
+    const target = cachePool.get(key);
+    if (target) return target.data;
+    const {
+      data
+    } = await storeApi.get(_constant.default.blockletsPath, {
+      params
+    });
+
+    if (cachePool.size > _constant.default.cacheSize) {
+      cachePool.clear();
+    }
+
+    cachePool.set(key, {
+      data: data.dataList
+    });
+    return data.dataList || [];
+  }, [storeApi]);
+
+  const onClickItem = detailUrl => {
+    window.location.href = detailUrl;
+  };
+
+  const onSubmit = (0, _react.useCallback)(e => {
+    handleKeyword(e.state.query);
+  }, [handleKeyword]);
+  const onReset = (0, _react.useCallback)(() => {
+    handleKeyword();
+  }, [handleKeyword]);
+  (0, _react.useEffect)(() => {
+    if (!containerRef.current) {
+      return undefined;
+    }
+
+    const search = (0, _autocompleteJs.autocomplete)({
+      container: containerRef.current,
+      renderer: {
+        createElement: _react.createElement,
+        Fragment: _react.Fragment,
+        render: () => {}
+      },
+
+      render(_ref, root) {
+        let {
+          children
+        } = _ref;
+
+        if (!panelRootRef.current || rootRef.current !== root) {
+          var _panelRootRef$current;
+
+          rootRef.current = root;
+          (_panelRootRef$current = panelRootRef.current) === null || _panelRootRef$current === void 0 ? void 0 : _panelRootRef$current.unmount();
+          panelRootRef.current = (0, _client.createRoot)(root);
+        }
+
+        panelRootRef.current.render(children);
+      },
+
+      classNames: {
+        panel: 'blocklet-list-panel',
+        label: 'blocklet-list-label',
+        form: 'blocklet-list-form'
+      },
+      placeholder: t('common.searchStore'),
+      initialState: {
+        query: filters.keyword
+      },
+      onSubmit,
+      onReset,
+
+      getSources(_ref2) {
+        let {
+          query
+        } = _ref2;
+
+        const params = _objectSpread(_objectSpread({}, filters), {}, {
+          sortBy: _constant.default[filters.sortBy],
+          page: 1,
+          pageSize: 10,
+          keyword: query
+        });
+
+        return [{
+          sourceId: 'blocklets',
+
+          getItems() {
+            return getResults(params);
+          },
+
+          // 选中后填充 搜索框中值
+          getItemInputValue(_ref3) {
+            let {
+              item
+            } = _ref3;
+            return item.title;
+          },
+
+          getItemUrl(_ref4) {
+            let {
+              item
+            } = _ref4;
+            const detailUrl = (0, _urlJoin.default)(endpoint, 'blocklets', item.did);
+            return detailUrl;
+          },
+
+          templates: {
+            // eslint-disable-next-line react/no-unstable-nested-components
+            item(_ref5) {
+              let {
+                item
+              } = _ref5;
+              const logoUrl = item.logo ? (0, _urlJoin.default)(endpoint, 'assets', item.did, item.logo) : null;
+              const detailUrl = (0, _urlJoin.default)(endpoint, 'blocklets', item.did);
+              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,
+                    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,
+                    onMainClick: () => onClickItem(detailUrl)
+                  })
+                })
+              });
+            },
+
+            noResults() {
+              return 'No results.';
+            }
+
+          }
+        }];
+      }
+
+    });
+    return () => {
+      search.destroy();
+    };
+  }, [endpoint, filters, getResults, muiTheme, onReset, onSubmit, t]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    className: "search-container",
+    ref: containerRef
+  });
+}

package/lib/components/autocomplete/item.js

@@ -0,0 +1,156 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = Blocklet;
+
+var _styled = _interopRequireDefault(require("@emotion/styled"));
+
+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", "onMainClick", "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 = _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]);
+
+function Blocklet(_ref) {
+  let {
+    cover,
+    onMainClick,
+    item,
+    className
+  } = _ref,
+      rest = _objectWithoutProperties(_ref, _excluded);
+
+  const wrapHandler = function wrapHandler(handler) {
+    let stopFn = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : () => false;
+    return function (e) {
+      if (stopFn()) {
+        e.preventDefault();
+        e.stopPropagation();
+      } else if (handler instanceof Function) {
+        e.preventDefault();
+        e.stopPropagation();
+
+        for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
+          args[_key - 1] = arguments[_key];
+        }
+
+        handler(...args);
+      }
+    };
+  };
+
+  const _onMainClick = wrapHandler(onMainClick);
+
+  const {
+    did,
+    description,
+    title,
+    name
+  } = item;
+  const blockletTitle = title || name;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Div, _objectSpread(_objectSpread({
+    className: "".concat(className, " arcblock-blocklet")
+  }, rest), {}, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: "arcblock-blocklet__content",
+      onClick: _onMainClick,
+      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",
+            title: title,
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ShowAttributes, {
+              item: item,
+              attribute: "title",
+              value: blockletTitle
+            })
+          }), description && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+            component: "div",
+            variant: "body2",
+            className: "arcblock-blocklet__describe",
+            title: description,
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ShowAttributes, {
+              item: item,
+              attribute: "description",
+              value: description
+            })
+          })]
+        })
+      })]
+    })
+  }));
+}
+
+Blocklet.propTypes = {
+  cover: _propTypes.default.string,
+  onMainClick: _propTypes.default.func,
+  className: _propTypes.default.string,
+  item: _propTypes.default.object.isRequired
+};
+Blocklet.defaultProps = {
+  cover: null,
+  onMainClick: null,
+  className: null
+};
+
+function ShowAttributes(_ref2) {
+  let {
+    item,
+    attribute,
+    value
+  } = _ref2;
+  // eslint-disable-next-line react/no-danger
+  if (item._formatted) return /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+    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/lib/components/list/index.js

@@ -65,8 +65,7 @@ function BlockletList(_ref) {
     loadMore,
     endpoint
   } = (0, _filter.useFilterContext)();
-  const showFilterTip = !!selectedCategory || !!filters.price; // eslint-disable-next-line no-unused-vars
-
+  const showFilterTip = !!selectedCategory || !!filters.price;
   const [sentryRef] = (0, _reactInfiniteScrollHook.default)({
     loading: loadings.fetchBlockletsLoading || loadings.loadingMore,
     hasNextPage,

package/lib/contexts/filter.js

@@ -86,7 +86,7 @@ function FilterProvider(_ref) {
 
     const {
       data = {}
-    } = await storeApi.get('/api/v2/blocklets.json', {
+    } = await storeApi.get(_constant.default.blockletsPath, {
       params
     });
     return data;
@@ -97,7 +97,6 @@ function FilterProvider(_ref) {
     },
     loadMore: true,
     isNoMore: d => d ? d.list.length >= d.total : false,
-    // eslint-disable-next-line no-console
     formatResult: response => {
       return {
         list: response === null || response === void 0 ? void 0 : response.dataList,
@@ -113,7 +112,7 @@ function FilterProvider(_ref) {
   } = (0, _ahooks.useRequest)(async () => {
     const {
       data
-    } = await storeApi.get('/api/blocklets/categories');
+    } = await storeApi.get(_constant.default.categoriesPath);
     return data;
   }, {
     initialData: []
@@ -137,7 +136,7 @@ function FilterProvider(_ref) {
     let blocklets = blockletsState.list || []; // 用户传入的过滤函数
 
     blocklets = extraFilter(blocklets);
-    return blocklets; // eslint-disable-next-line react-hooks/exhaustive-deps
+    return blocklets;
   }, [blockletsState, extraFilter]);
   const categoryOptions = (0, _react.useMemo)(() => (0, _utils.getCategoryOptions)(categoryList, locale), [categoryList, locale]);
   const priceOptions = (0, _utils.getPrices)(translate);
@@ -161,6 +160,7 @@ function FilterProvider(_ref) {
     locale,
     categoryOptions,
     priceOptions,
+    storeApi,
     hasNextPage: blockletsState.list.length < blockletsState.total,
     handleSort: sort => {
       const changeData = _objectSpread(_objectSpread({}, finalFilters), {}, {

package/lib/index.js

@@ -5,14 +5,24 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = BlockletList;
 
+var _react = require("@emotion/react");
+
+var _styles = require("@mui/material/styles");
+
 var _base = _interopRequireDefault(require("./base"));
 
 var _filter = require("./contexts/filter");
 
 var _propTypes = require("./libs/prop-types");
 
+var _utils = require("./libs/utils");
+
+require("@algolia/autocomplete-theme-classic");
+
 var _jsxRuntime = require("react/jsx-runtime");
 
+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; }
@@ -21,9 +31,18 @@ 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 _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+
 function BlockletList(props) {
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_filter.FilterProvider, _objectSpread(_objectSpread({}, props), {}, {
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_base.default, {})
+  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      .blocklet-list-panel {\n        z-index: ", " !important;\n      }\n      .blocklet-list-label {\n        .aa-SubmitIcon {\n          color: ", " !important;\n        }\n      }\n      .blocklet-list-form {\n        border: none !important;\n        &:focus-within {\n          box-shadow: none !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])
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_filter.FilterProvider, _objectSpread(_objectSpread({}, props), {}, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_react.Global, {
+      styles: globalStyles.autocomplete
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_base.default, {})]
   }));
 }
 

package/lib/libs/constant.js

@@ -11,7 +11,10 @@ const constant = {
   publishAt: 'lastPublishedAt',
   mobilePageSize: 10,
   pageSize: 18,
-  defaultCurrentPage: 1
+  defaultCurrentPage: 1,
+  blockletsPath: '/api/v2/blocklets.json',
+  categoriesPath: '/api/blocklets/categories',
+  cacheSize: 100
 };
 var _default = constant;
 exports.default = _default;

package/lib/libs/utils.js

@@ -3,12 +3,14 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.urlStringify = exports.replaceTranslate = exports.removeUndefined = exports.isMobileScreen = exports.getStoreDetail = exports.getSortOptions = exports.getPrices = exports.getCurrentPage = exports.getCategoryOptions = exports.formatLogoPath = exports.formatError = exports.filterBlockletByPrice = void 0;
+exports.urlStringify = exports.toColorRgb = exports.replaceTranslate = exports.removeUndefined = exports.isMobileScreen = exports.getStoreDetail = exports.getSortOptions = exports.getPrices = exports.getCurrentPage = exports.getCategoryOptions = exports.formatLogoPath = exports.formatError = exports.filterBlockletByPrice = exports.debounced = void 0;
 
 var _urlJoin = _interopRequireDefault(require("url-join"));
 
 var _cloneDeep = _interopRequireDefault(require("lodash/cloneDeep"));
 
+var _color = _interopRequireDefault(require("color"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 const isFreeBlocklet = blocklet => {
@@ -152,4 +154,31 @@ const getCurrentPage = (length, pageSize) => {
   return 1;
 };
 
-exports.getCurrentPage = getCurrentPage;
+exports.getCurrentPage = getCurrentPage;
+
+const toColorRgb = colorStr => {
+  const color = (0, _color.default)(colorStr);
+  return color.rgb().object();
+};
+
+exports.toColorRgb = toColorRgb;
+
+function debouncePromise(fn, time) {
+  let timerId;
+  return function debounced() {
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    if (timerId) {
+      clearTimeout(timerId);
+    }
+
+    return new Promise(resolve => {
+      timerId = setTimeout(() => resolve(fn(...args)), time);
+    });
+  };
+}
+
+const debounced = debouncePromise(items => Promise.resolve(items), 300);
+exports.debounced = debounced;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/list",
-  "version": "0.9.5",
+  "version": "0.9.8",
   "description": "Common ux components of blocklet",
   "publishConfig": {
     "access": "public"
@@ -33,16 +33,23 @@
     "url": "https://github.com/blocklet/blocklet-store/issues"
   },
   "peerDependencies": {
+    "@arcblock/did-connect": ">=2.2.0",
     "@mui/material": ">=5.6.4",
-    "react": ">=18.1.0"
+    "@mui/styles": ">=5.6.2",
+    "react": ">=18.1.0",
+    "react-dom": ">=18.2.0"
   },
   "dependencies": {
+    "@algolia/autocomplete-js": "^1.7.1",
+    "@algolia/autocomplete-theme-classic": "^1.7.1",
     "@arcblock/ux": "^2.4.0",
     "@emotion/react": "^11.10.0",
     "@emotion/styled": "^11.10.0",
     "@mui/icons-material": "^5.8.4",
     "ahooks": "^2.10.14",
+    "algoliasearch": "^4.14.2",
     "axios": "^0.27.2",
+    "color": "^4.2.3",
     "flat": "^5.0.2",
     "lodash": "^4.17.21",
     "prop-types": "^15.8.1",
@@ -61,5 +68,5 @@
     "eslint": "^8.21.0",
     "prettier": "^2.7.1"
   },
-  "gitHead": "ce075e451b095ae48cad377a2b0164527097634b"
+  "gitHead": "ba3bddff0fbbcf7f9a79c9a346dcf1810c0435fc"
 }

package/src/base.js

@@ -4,14 +4,13 @@ import { Box, Hidden } from '@mui/material';
 import FaceIcon from '@mui/icons-material/Face';
 import { ErrorBoundary } from 'react-error-boundary';
 import { ErrorFallback } from '@arcblock/ux/lib/ErrorBoundary';
-
 import { useFilterContext } from './contexts/filter';
 import CustomSelect from './components/custom-select';
 import { CustomChip, FilterIcon } from './components/filter';
 import { getSortOptions } from './libs/utils';
 import BlockletList from './components/list';
 import Aside from './components/aside';
-import Search from './components/search';
+import Autocomplete from './components/autocomplete';
 
 function ListBase() {
   const {
@@ -39,7 +38,7 @@ function ListBase() {
       <StyledMin>
         <FilterContainer>
           <Box className="filter-bar" display="flex" alignItems="center">
-            <StyledSearch className="search-container" placeholder={t('common.searchStore')} />
+            <Autocomplete />
             <Box mt={0} ml="16px" className="filter-container">
               <Hidden mdUp>
                 {/* 小屏幕下类别 */}
@@ -97,7 +96,9 @@ const StyledMin = styled.main`
   height: 100%;
   .filter-bar {
     justify-content: space-between;
-    margin-bottom: ${(props) => props.theme.spacing(2)};
+    margin-bottom: ${(props) => {
+      return props.theme.spacing(2);
+    }};
   }
   .sort-button {
     white-space: nowrap;
@@ -135,14 +136,10 @@ const StyledMin = styled.main`
   }
 `;
 
-const StyledSearch = styled(Search)`
-  background-color: ${(props) => props.theme.palette.grey[50]};
-`;
-
 const FilterContainer = styled.div`
   position: sticky;
   top: 0;
-  z-index: 999;
+  z-index: 9;
   background-color: white;
 `;
 

package/src/components/aside.js

@@ -33,7 +33,7 @@ const StyledAside = styled.aside`
   position: sticky;
   top: 0;
   overflow-y: auto;
-  z-index: 999;
+  z-index: auto;
 `;
 
 Aside.propTypes = {};

package/src/components/autocomplete/index.js

@@ -0,0 +1,144 @@
+import { createElement, Fragment, useEffect, useRef, useCallback } from 'react';
+import { createRoot } from 'react-dom/client';
+import { autocomplete } from '@algolia/autocomplete-js';
+
+import { ThemeProvider as EmotionThemeProvider } from '@emotion/react';
+import { ThemeProvider as MuiThemeProvider, useTheme } from '@mui/material/styles';
+import joinUrl from 'url-join';
+
+import constant from '../../libs/constant';
+import { useFilterContext } from '../../contexts/filter';
+import Blocklet from './item';
+
+import '@algolia/autocomplete-theme-classic';
+
+const cachePool = new Map();
+
+export default function Autocomplete() {
+  const containerRef = useRef(null);
+  const panelRootRef = useRef(null);
+  const rootRef = useRef(null);
+  const { storeApi, filters, endpoint, handleKeyword, t } = useFilterContext();
+  const muiTheme = useTheme();
+
+  const getResults = useCallback(
+    async (params) => {
+      const key = JSON.stringify(params);
+      const target = cachePool.get(key);
+
+      if (target) return target.data;
+
+      const { data } = await storeApi.get(constant.blockletsPath, { params });
+
+      if (cachePool.size > constant.cacheSize) {
+        cachePool.clear();
+      }
+
+      cachePool.set(key, {
+        data: data.dataList,
+      });
+      return data.dataList || [];
+    },
+    [storeApi]
+  );
+
+  const onClickItem = (detailUrl) => {
+    window.location.href = detailUrl;
+  };
+  const onSubmit = useCallback(
+    (e) => {
+      handleKeyword(e.state.query);
+    },
+    [handleKeyword]
+  );
+  const onReset = useCallback(() => {
+    handleKeyword();
+  }, [handleKeyword]);
+
+  useEffect(() => {
+    if (!containerRef.current) {
+      return undefined;
+    }
+
+    const search = autocomplete({
+      container: containerRef.current,
+      renderer: { createElement, Fragment, render: () => {} },
+      render({ children }, root) {
+        if (!panelRootRef.current || rootRef.current !== root) {
+          rootRef.current = root;
+
+          panelRootRef.current?.unmount();
+          panelRootRef.current = createRoot(root);
+        }
+
+        panelRootRef.current.render(children);
+      },
+      classNames: {
+        panel: 'blocklet-list-panel',
+        label: 'blocklet-list-label',
+        form: 'blocklet-list-form',
+      },
+      placeholder: t('common.searchStore'),
+      initialState: {
+        query: filters.keyword,
+      },
+      onSubmit,
+      onReset,
+      getSources({ query }) {
+        const params = {
+          ...filters,
+          sortBy: constant[filters.sortBy],
+          page: 1,
+          pageSize: 10,
+          keyword: query,
+        };
+        return [
+          {
+            sourceId: 'blocklets',
+            getItems() {
+              return getResults(params);
+            },
+            // 选中后填充 搜索框中值
+            getItemInputValue({ item }) {
+              return item.title;
+            },
+            getItemUrl({ item }) {
+              const detailUrl = joinUrl(endpoint, 'blocklets', item.did);
+              return detailUrl;
+            },
+            templates: {
+              // eslint-disable-next-line react/no-unstable-nested-components
+              item({ item }) {
+                const logoUrl = item.logo ? joinUrl(endpoint, 'assets', item.did, item.logo) : null;
+                const detailUrl = joinUrl(endpoint, 'blocklets', item.did);
+                return (
+                  <MuiThemeProvider theme={muiTheme}>
+                    <EmotionThemeProvider theme={muiTheme}>
+                      <Blocklet
+                        item={item}
+                        title={item?.title || item?.name}
+                        did={item.did}
+                        description={item.description}
+                        cover={logoUrl}
+                        onMainClick={() => onClickItem(detailUrl)}
+                      />
+                    </EmotionThemeProvider>
+                  </MuiThemeProvider>
+                );
+              },
+              noResults() {
+                return 'No results.';
+              },
+            },
+          },
+        ];
+      },
+    });
+
+    return () => {
+      search.destroy();
+    };
+  }, [endpoint, filters, getResults, muiTheme, onReset, onSubmit, t]);
+
+  return <div className="search-container" ref={containerRef} />;
+}

package/src/components/autocomplete/item.js

@@ -0,0 +1,133 @@
+import styled from '@emotion/styled';
+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 {
+    background-color: yellow;
+  }
+`;
+
+export default function Blocklet({ cover, onMainClick, item, className, ...rest }) {
+  const wrapHandler =
+    (handler, stopFn = () => false) =>
+    (e, ...args) => {
+      if (stopFn()) {
+        e.preventDefault();
+        e.stopPropagation();
+      } else if (handler instanceof Function) {
+        e.preventDefault();
+        e.stopPropagation();
+        handler(...args);
+      }
+    };
+  const _onMainClick = wrapHandler(onMainClick);
+  const { did, description, title, name } = item;
+  const blockletTitle = title || name;
+
+  return (
+    <Div className={`${className} arcblock-blocklet`} {...rest}>
+      <div className="arcblock-blocklet__content" onClick={_onMainClick}>
+        {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" title={title}>
+              <ShowAttributes item={item} attribute="title" value={blockletTitle} />
+            </Typography>
+            {description && (
+              <Typography component="div" variant="body2" className="arcblock-blocklet__describe" title={description}>
+                <ShowAttributes item={item} attribute="description" value={description} />
+              </Typography>
+            )}
+          </div>
+        </div>
+      </div>
+    </Div>
+  );
+}
+
+Blocklet.propTypes = {
+  cover: PropTypes.string,
+  onMainClick: PropTypes.func,
+  className: PropTypes.string,
+  item: PropTypes.object.isRequired,
+};
+
+Blocklet.defaultProps = {
+  cover: null,
+  onMainClick: null,
+  className: null,
+};
+
+function ShowAttributes({ item, attribute, value }) {
+  // eslint-disable-next-line react/no-danger
+  if (item._formatted) return <span dangerouslySetInnerHTML={{ __html: item._formatted[attribute] }} />;
+  return value;
+}
+ShowAttributes.propTypes = {
+  item: PropTypes.object.isRequired,
+  attribute: PropTypes.string.isRequired,
+  value: PropTypes.string.isRequired,
+};

package/src/components/list/index.js

@@ -27,7 +27,6 @@ export default function BlockletList({ blocklets, ...rest }) {
 
   const showFilterTip = !!selectedCategory || !!filters.price;
 
-  // eslint-disable-next-line no-unused-vars
   const [sentryRef] = useInfiniteScroll({
     loading: loadings.fetchBlockletsLoading || loadings.loadingMore,
     hasNextPage,

package/src/contexts/filter.js

@@ -42,14 +42,13 @@ function FilterProvider({ filters, children, endpoint, locale, blockletRender, o
         page: getCurrentPage(d?.list?.length || 0, paginateState.pageSize),
         pageSize: paginateState.pageSize,
       };
-      const { data = {} } = await storeApi.get('/api/v2/blocklets.json', { params });
+      const { data = {} } = await storeApi.get(constant.blockletsPath, { params });
       return data;
     },
     {
       initialData: { list: [], total: 0 },
       loadMore: true,
       isNoMore: (d) => (d ? d.list.length >= d.total : false),
-      // eslint-disable-next-line no-console
       formatResult: (response) => {
         return { list: response?.dataList, total: response.total };
       },
@@ -63,7 +62,7 @@ function FilterProvider({ filters, children, endpoint, locale, blockletRender, o
     loading: fetchCategoriesLoading,
   } = useRequest(
     async () => {
-      const { data } = await storeApi.get('/api/blocklets/categories');
+      const { data } = await storeApi.get(constant.categoriesPath);
       return data;
     },
     { initialData: [] }
@@ -88,7 +87,6 @@ function FilterProvider({ filters, children, endpoint, locale, blockletRender, o
     // 用户传入的过滤函数
     blocklets = extraFilter(blocklets);
     return blocklets;
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [blockletsState, extraFilter]);
 
   const categoryOptions = useMemo(() => getCategoryOptions(categoryList, locale), [categoryList, locale]);
@@ -106,6 +104,7 @@ function FilterProvider({ filters, children, endpoint, locale, blockletRender, o
     locale,
     categoryOptions,
     priceOptions,
+    storeApi,
     hasNextPage: blockletsState.list.length < blockletsState.total,
     handleSort: (sort) => {
       const changeData = {

package/src/index.js

@@ -1,10 +1,54 @@
+import { Global, css } from '@emotion/react';
+import { useTheme } from '@mui/material/styles';
 import SelectBase from './base';
 import { FilterProvider } from './contexts/filter';
 import { propTypes, defaultProps } from './libs/prop-types';
+import { toColorRgb } from './libs/utils';
+
+import '@algolia/autocomplete-theme-classic';
 
 export default function BlockletList(props) {
+  const muiTheme = useTheme();
+  const primaryColor = toColorRgb(muiTheme.palette.primary.main);
+
+  const globalStyles = {
+    autocomplete: (theme) => css`
+      :root {
+        --aa-detached-media-query: (max-width: ${theme.breakpoints.values.md}px) !important;
+        --aa-detached-modal-media-query: (min-width: ${theme.breakpoints.values.md}px) !important;
+        --aa-detached-modal-max-width: ${theme.breakpoints.values.md}px !important;
+        --aa-selected-color-rgb: ${primaryColor.r}, ${primaryColor.g}, ${primaryColor.b} !important;
+        --aa-primary-color-rgb: ${primaryColor.r}, ${primaryColor.g}, ${primaryColor.b} !important;
+        --aa-input-background-color-rgb: 250, 250, 250 !important;
+      }
+      .blocklet-list-panel {
+        z-index: ${theme.zIndex.modal + 1} !important;
+      }
+      .blocklet-list-label {
+        .aa-SubmitIcon {
+          color: ${theme.palette.grey[500]} !important;
+        }
+      }
+      .blocklet-list-form {
+        border: none !important;
+        &:focus-within {
+          box-shadow: none !important;
+        }
+      }
+      .aa-DetachedSearchButton {
+        border: none !important;
+        &:focus-within {
+          box-shadow: none !important;
+        }
+        .aa-SubmitIcon {
+          color: ${theme.palette.grey[500]} !important;
+        }
+      }
+    `,
+  };
   return (
     <FilterProvider {...props}>
+      <Global styles={globalStyles.autocomplete} />
       <SelectBase />
     </FilterProvider>
   );

package/src/libs/constant.js

@@ -6,6 +6,9 @@ const constant = {
   mobilePageSize: 10,
   pageSize: 18,
   defaultCurrentPage: 1,
+  blockletsPath: '/api/v2/blocklets.json',
+  categoriesPath: '/api/blocklets/categories',
+  cacheSize: 100,
 };
 
 export default constant;

package/src/libs/utils.js

@@ -1,5 +1,6 @@
 import joinURL from 'url-join';
 import cloneDeep from 'lodash/cloneDeep';
+import Color from 'color';
 
 const isFreeBlocklet = (blocklet) => {
   if (!blocklet.payment) {
@@ -104,6 +105,26 @@ const getCurrentPage = (length, pageSize) => {
   return 1;
 };
 
+const toColorRgb = (colorStr) => {
+  const color = Color(colorStr);
+  return color.rgb().object();
+};
+
+function debouncePromise(fn, time) {
+  let timerId;
+
+  return function debounced(...args) {
+    if (timerId) {
+      clearTimeout(timerId);
+    }
+
+    return new Promise((resolve) => {
+      timerId = setTimeout(() => resolve(fn(...args)), time);
+    });
+  };
+}
+const debounced = debouncePromise((items) => Promise.resolve(items), 300);
+
 export {
   getSortOptions,
   getPrices,
@@ -117,4 +138,6 @@ export {
   getCategoryOptions,
   isMobileScreen,
   getCurrentPage,
+  toColorRgb,
+  debounced,
 };

package/lib/components/search.js

@@ -1,108 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _react = require("react");
-
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
-var _Search = _interopRequireDefault(require("@mui/icons-material/Search"));
-
-var _Close = _interopRequireDefault(require("@mui/icons-material/Close"));
-
-var _material = require("@mui/material");
-
-var _ahooks = require("ahooks");
-
-var _styled = _interopRequireDefault(require("@emotion/styled"));
-
-var _filter = require("../contexts/filter");
-
-var _jsxRuntime = require("react/jsx-runtime");
-
-var _templateObject, _templateObject2, _templateObject3;
-
-const _excluded = ["placeholder"];
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
-
-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 Search(_ref) {
-  let {
-    placeholder
-  } = _ref,
-      rest = _objectWithoutProperties(_ref, _excluded);
-
-  const {
-    filters,
-    handleKeyword
-  } = (0, _filter.useFilterContext)();
-  const [searchStr, setSearchStr] = (0, _react.useState)(filters.keyword || '');
-  const debouncedSearch = (0, _ahooks.useDebounceFn)(handleKeyword, {
-    wait: 300
-  });
-
-  const handleChange = event => {
-    const {
-      value
-    } = event.target;
-    setSearchStr(value);
-    debouncedSearch.run(value);
-  };
-
-  const handleClose = () => {
-    setSearchStr('');
-    handleKeyword();
-  };
-
-  (0, _react.useEffect)(() => {
-    setSearchStr(filters.keyword || '');
-  }, [filters.keyword]);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledSearch, _objectSpread({
-    inputProps: {
-      'data-cy': 'search-blocklet'
-    },
-    startAdornment: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.InputAdornment, {
-      position: "start",
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledSearchIcon, {})
-    }),
-    onChange: handleChange,
-    placeholder: placeholder,
-    value: searchStr,
-    title: placeholder,
-    "data-cy": "search",
-    endAdornment: searchStr && /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.InputAdornment, {
-      position: "end",
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledCloseIcon, {
-        "data-cy": "search-delete",
-        onClick: handleClose
-      })
-    })
-  }, rest));
-}
-
-Search.propTypes = {
-  placeholder: _propTypes.default.string
-};
-Search.defaultProps = {
-  placeholder: 'Type to search...'
-};
-const StyledSearch = (0, _styled.default)(_material.OutlinedInput)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  background-color: #fff;\n  font-size: 14px;\n  border-radius: 6px;\n  .MuiInputBase-input {\n    padding: 8px 0 8px 10px;\n  }\n  .MuiOutlinedInput-notchedOutline {\n    border: none;\n  }\n  .Mui-focused {\n    background-color: #f6f6f6;\n    .MuiInputBase-input::placeholder {\n      color: transparent;\n    }\n  }\n"])));
-const StyledSearchIcon = (0, _styled.default)(_Search.default)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  color: ", ";\n  font-size: 28px;\n  @media (max-width: ", "px) {\n    font-size: 24px;\n  }\n"])), props => props.theme.palette.grey[500], props => props.theme.breakpoints.values.md);
-const StyledCloseIcon = (0, _styled.default)(_Close.default)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  color: ", ";\n  font-size: 16px;\n  cursor: pointer;\n"])), props => props.theme.palette.grey[500]);
-var _default = Search;
-exports.default = _default;

package/src/components/search.js

@@ -1,93 +0,0 @@
-import { useEffect, useState } from 'react';
-import PropTypes from 'prop-types';
-import SearchIcon from '@mui/icons-material/Search';
-import CloseIcon from '@mui/icons-material/Close';
-import { OutlinedInput, InputAdornment } from '@mui/material';
-import { useDebounceFn } from 'ahooks';
-import styled from '@emotion/styled';
-
-import { useFilterContext } from '../contexts/filter';
-
-function Search({ placeholder, ...rest }) {
-  const { filters, handleKeyword } = useFilterContext();
-  const [searchStr, setSearchStr] = useState(filters.keyword || '');
-
-  const debouncedSearch = useDebounceFn(handleKeyword, { wait: 300 });
-  const handleChange = (event) => {
-    const { value } = event.target;
-    setSearchStr(value);
-    debouncedSearch.run(value);
-  };
-  const handleClose = () => {
-    setSearchStr('');
-    handleKeyword();
-  };
-  useEffect(() => {
-    setSearchStr(filters.keyword || '');
-  }, [filters.keyword]);
-
-  return (
-    <StyledSearch
-      inputProps={{
-        'data-cy': 'search-blocklet',
-      }}
-      startAdornment={
-        <InputAdornment position="start">
-          <StyledSearchIcon />
-        </InputAdornment>
-      }
-      onChange={handleChange}
-      placeholder={placeholder}
-      value={searchStr}
-      title={placeholder}
-      data-cy="search"
-      endAdornment={
-        searchStr && (
-          <InputAdornment position="end">
-            <StyledCloseIcon data-cy="search-delete" onClick={handleClose} />
-          </InputAdornment>
-        )
-      }
-      {...rest}
-    />
-  );
-}
-Search.propTypes = {
-  placeholder: PropTypes.string,
-};
-Search.defaultProps = {
-  placeholder: 'Type to search...',
-};
-const StyledSearch = styled(OutlinedInput)`
-  background-color: #fff;
-  font-size: 14px;
-  border-radius: 6px;
-  .MuiInputBase-input {
-    padding: 8px 0 8px 10px;
-  }
-  .MuiOutlinedInput-notchedOutline {
-    border: none;
-  }
-  .Mui-focused {
-    background-color: #f6f6f6;
-    .MuiInputBase-input::placeholder {
-      color: transparent;
-    }
-  }
-`;
-
-const StyledSearchIcon = styled(SearchIcon)`
-  color: ${(props) => props.theme.palette.grey[500]};
-  font-size: 28px;
-  @media (max-width: ${(props) => props.theme.breakpoints.values.md}px) {
-    font-size: 24px;
-  }
-`;
-
-const StyledCloseIcon = styled(CloseIcon)`
-  color: ${(props) => props.theme.palette.grey[500]};
-  font-size: 16px;
-  cursor: pointer;
-`;
-
-export default Search;