@blocklet/list 0.8.15 → 0.8.18

package/lib/base.js

@@ -9,19 +9,19 @@ var _react = _interopRequireDefault(require("react"));
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
-var _Sort = _interopRequireDefault(require("mdi-material-ui/Sort"));
+var _Sort = _interopRequireDefault(require("@mui/icons-material/Sort"));
 
 var _FilterList = _interopRequireDefault(require("@mui/icons-material/FilterList"));
 
 var _material = require("@mui/material");
 
-var _store = require("./contexts/store");
+var _filter = require("./contexts/filter");
 
 var _customSelect = _interopRequireDefault(require("./components/custom-select"));
 
 var _filterAuthor = _interopRequireDefault(require("./components/filter-author"));
 
-var _utils = require("./tools/utils");
+var _utils = require("./libs/utils");
 
 var _list = _interopRequireDefault(require("./components/list"));
 
@@ -29,23 +29,22 @@ var _aside = _interopRequireDefault(require("./components/aside"));
 
 var _search = _interopRequireDefault(require("./components/search"));
 
-var _categories = require("./components/categories");
+var _categorySelect = _interopRequireDefault(require("./components/category-select"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 const ListBase = () => {
   var _getSortOptions$find, _getPrices$find;
 
-  const searchStore = (0, _store.useSearchContext)();
   const {
-    sortParams,
-    history,
+    handleDeveloper,
     blockletList,
-    queryParams,
+    filters,
     developerName,
     handleSort,
-    t
-  } = searchStore;
+    t,
+    handlePrice
+  } = (0, _filter.useFilterContext)();
   return /*#__PURE__*/_react.default.createElement(_material.Box, {
     display: "flex",
     alignItems: "flex-start",
@@ -58,10 +57,10 @@ const ListBase = () => {
     alignItems: "center"
   }, /*#__PURE__*/_react.default.createElement(_material.Hidden, {
     mdDown: true
-  }, !!queryParams.get('developer') && /*#__PURE__*/_react.default.createElement(_filterAuthor.default, {
+  }, !!filters.developer && /*#__PURE__*/_react.default.createElement(_filterAuthor.default, {
     user: developerName,
     deleteUserTag: () => {
-      history.push('/');
+      handleDeveloper(null);
     }
   })), /*#__PURE__*/_react.default.createElement(_material.Box, {
     mt: 0,
@@ -77,13 +76,11 @@ const ListBase = () => {
     className: "filterContainer"
   }, /*#__PURE__*/_react.default.createElement(_material.Hidden, {
     mdUp: true
-  }, /*#__PURE__*/_react.default.createElement(_categories.CategorySelect, null)), /*#__PURE__*/_react.default.createElement(_customSelect.default, {
-    value: sortParams.sort,
+  }, /*#__PURE__*/_react.default.createElement(_categorySelect.default, null)), /*#__PURE__*/_react.default.createElement(_customSelect.default, {
+    value: filters.sortBy,
     options: (0, _utils.getSortOptions)(t),
-    title: ((_getSortOptions$find = (0, _utils.getSortOptions)(t).find(f => f.value === sortParams.sort)) === null || _getSortOptions$find === void 0 ? void 0 : _getSortOptions$find.name) || t('sort.sort'),
-    icon: /*#__PURE__*/_react.default.createElement(_material.SvgIcon, {
-      component: _Sort.default
-    }),
+    title: ((_getSortOptions$find = (0, _utils.getSortOptions)(t).find(f => f.value === filters.sortBy)) === null || _getSortOptions$find === void 0 ? void 0 : _getSortOptions$find.name) || t('sort.sort'),
+    icon: /*#__PURE__*/_react.default.createElement(_Sort.default, null),
     onChange: v => {
       handleSort(v);
     }
@@ -93,22 +90,22 @@ const ListBase = () => {
     display: "flex",
     flexWrap: "wrap",
     alignItems: "center",
-    justifyContent: queryParams.get('developer') ? 'space-between' : 'flex-end'
-  }, !!queryParams.get('developer') && /*#__PURE__*/_react.default.createElement(_filterAuthor.default, {
+    justifyContent: filters.developer ? 'space-between' : 'flex-end'
+  }, !!filters.developer && /*#__PURE__*/_react.default.createElement(_filterAuthor.default, {
     user: developerName,
     deleteUserTag: () => {
-      history.push('/');
+      handleDeveloper(null);
     },
     style: {
       marginBottom: '16px'
     }
   }), /*#__PURE__*/_react.default.createElement(_customSelect.default, {
-    value: queryParams.get('price'),
+    value: filters.price,
     icon: /*#__PURE__*/_react.default.createElement(_FilterList.default, null),
     options: (0, _utils.getPrices)(t),
-    title: ((_getPrices$find = (0, _utils.getPrices)(t).find(f => f.value === queryParams.get('price'))) === null || _getPrices$find === void 0 ? void 0 : _getPrices$find.name) || t('common.price'),
+    title: ((_getPrices$find = (0, _utils.getPrices)(t).find(f => f.value === filters.price)) === null || _getPrices$find === void 0 ? void 0 : _getPrices$find.name) || t('common.price'),
     onChange: v => {
-      searchStore.handlePriceFilter(v);
+      handlePrice(v);
     },
     style: {
       marginBottom: '16px'

package/lib/components/{aside.js → aside/aside.js}

@@ -11,23 +11,22 @@ var _material = require("@mui/material");
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
-var _store = require("../contexts/store");
+var _filter = require("../../contexts/filter");
 
-var _utils = require("../tools/utils");
+var _utils = require("../../libs/utils");
 
-var _search = _interopRequireDefault(require("./search"));
+var _search = _interopRequireDefault(require("../search"));
 
-var _categories = require("./categories");
+var _categoryLinkList = _interopRequireDefault(require("./category-link-list"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 const Aside = () => {
-  const searchStore = (0, _store.useSearchContext)();
   const {
-    queryParams,
-    handlePriceFilter,
+    filters,
+    handlePrice,
     t
-  } = searchStore;
+  } = (0, _filter.useFilterContext)();
   return /*#__PURE__*/_react.default.createElement(StyledAside, null, /*#__PURE__*/_react.default.createElement(_search.default, {
     placeholder: t('common.searchStore')
   }), /*#__PURE__*/_react.default.createElement(_material.Box, {
@@ -37,10 +36,10 @@ const Aside = () => {
     key: item.value,
     control: /*#__PURE__*/_react.default.createElement(_material.Checkbox, {
       onClick: () => {
-        handlePriceFilter(item.value);
+        handlePrice(item.value);
       },
       size: "small",
-      checked: item.value === queryParams.get('price')
+      checked: item.value === filters.price
     }),
     label: item.name
   }))), /*#__PURE__*/_react.default.createElement(_material.List, {
@@ -51,12 +50,12 @@ const Aside = () => {
       border: '1px solid #dadce0',
       margin: '16px 16px'
     }
-  }), /*#__PURE__*/_react.default.createElement(_categories.CategoryLinkList, null)));
+  }), /*#__PURE__*/_react.default.createElement(_categoryLinkList.default, null)));
 };
 
 const StyledAside = _styledComponents.default.aside.withConfig({
   displayName: "aside__StyledAside",
-  componentId: "sc-1wkvsv6-0"
+  componentId: "sc-1vh5fc3-0"
 })(["width:220px;margin-right:20px;background-color:", ";height:100%;padding:15px 0px;border-radius:8px;.MuiListItemText-root{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}.payments{display:flex;padding:0 16px;.MuiFormControlLabel-label{color:#5f6368;font-size:1rem;}}.MuiListItem-root{text-transform:capitalize;.category > span{font-weight:", ";}>:not(.category){.MuiListItemText-primary{color:#5f6368;}}&.Mui-selected{background-color:", "!important;border-radius:4px;.MuiListItemText-primary{color:#fff !important;}}}@media (max-width:", "px){.MuiListItemText-primary{font-size:16px;}}"], props => props.theme.palette.grey[50], props => props.theme.typography.fontWeightBold, props => props.theme.palette.primary.main, props => props.theme.breakpoints.values.md);
 
 Aside.propTypes = {};

package/lib/components/aside/category-link-list.js

@@ -0,0 +1,78 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _material = require("@mui/material");
+
+var _urlJoin = _interopRequireDefault(require("url-join"));
+
+var _filter = require("../../contexts/filter");
+
+var _utils = require("../../libs/utils");
+
+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; }
+
+/**
+ * 宽屏幕下的分类列表
+ * @returns
+ */
+const CategoryLinkList = () => {
+  const {
+    categoryList,
+    selectedCategory,
+    filters,
+    baseUrl,
+    handleCategory,
+    t,
+    locale
+  } = (0, _filter.useFilterContext)();
+
+  const handleClick = (e, name) => {
+    handleCategory(name);
+    e.preventDefault();
+    return false;
+  };
+
+  const content = /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      marginRight: '16px'
+    }
+  }, /*#__PURE__*/_react.default.createElement(_material.ListItem, {
+    selected: !selectedCategory,
+    button: true,
+    onClick: e => handleClick(e, 'all')
+  }, /*#__PURE__*/_react.default.createElement(_material.ListItemText, {
+    primary: t('category.all')
+  })), categoryList.map(item => /*#__PURE__*/_react.default.createElement(_material.ListItem, {
+    key: item._id,
+    title: item.locales[locale],
+    component: _material.Link,
+    to: "".concat((0, _urlJoin.default)(baseUrl, '/search'), "?").concat((0, _utils.urlStringify)(_objectSpread(_objectSpread({}, filters), {}, {
+      category: item.name
+    }))),
+    onClick: e => handleClick(e, item.name),
+    button: true,
+    selected: item.name === selectedCategory
+  }, /*#__PURE__*/_react.default.createElement(_material.ListItemText, {
+    primary: item.locales[locale]
+  }))));
+
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_material.ListItem, null, /*#__PURE__*/_react.default.createElement(_material.ListItemText, {
+    className: "category",
+    primary: t('common.category')
+  })), content);
+};
+
+var _default = CategoryLinkList;
+exports.default = _default;

package/lib/components/aside/index.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _aside = _interopRequireDefault(require("./aside"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var _default = _aside.default;
+exports.default = _default;

package/lib/components/category-select.js

@@ -0,0 +1,55 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _material = require("@mui/material");
+
+var _filter = require("../contexts/filter");
+
+var _customSelect = _interopRequireDefault(require("./custom-select"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+/**
+ * 小屏幕下的分类选择器
+ * @returns
+ */
+const CategorySelect = () => {
+  var _categoryList$find;
+
+  const {
+    categoryList,
+    selectedCategory,
+    handleCategory,
+    t,
+    locale
+  } = (0, _filter.useFilterContext)();
+
+  const itemRender = item => {
+    return /*#__PURE__*/_react.default.createElement(_material.MenuItem, {
+      className: ['my-select__option', selectedCategory !== null && selectedCategory !== void 0 && selectedCategory.includes(item.name) ? 'my-select__option--active' : ''].join(' '),
+      key: item._id,
+      value: item.name,
+      onClick: () => handleCategory(item.name)
+    }, item.locales[locale]);
+  };
+
+  return /*#__PURE__*/_react.default.createElement(_customSelect.default, {
+    value: selectedCategory || 'all',
+    options: categoryList,
+    title: ((_categoryList$find = categoryList.find(i => i.name === selectedCategory)) === null || _categoryList$find === void 0 ? void 0 : _categoryList$find.locales[locale]) || t('category.all'),
+    itemRender: itemRender,
+    prepend: /*#__PURE__*/_react.default.createElement(_material.MenuItem, {
+      value: "all",
+      onClick: () => handleCategory('all')
+    }, t('category.all'))
+  });
+};
+
+var _default = CategorySelect;
+exports.default = _default;

package/lib/components/{button.js → custom-select/button.js}

@@ -27,7 +27,7 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 
 const StyledButton = (0, _styledComponents.default)(_material.Button).withConfig({
   displayName: "button__StyledButton",
-  componentId: "sc-ia5dpm-0"
+  componentId: "sc-8rpkj0-0"
 })(["border-radius:4px;"]);
 const Button = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
   let {

package/lib/components/{custom-select.js → custom-select/custom-select.js}

@@ -15,7 +15,9 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _material = require("@mui/material");
 
-var _mdiMaterialUi = require("mdi-material-ui");
+var _Check = _interopRequireDefault(require("@mui/icons-material/Check"));
+
+var _KeyboardArrowDown = _interopRequireDefault(require("@mui/icons-material/KeyboardArrowDown"));
 
 var _cloneDeep = _interopRequireDefault(require("lodash/cloneDeep"));
 
@@ -111,14 +113,14 @@ const CustomSelect = _ref => {
     className: "my-select__icon"
   }, icon), title, multiple && currentValue.length > 1 && " (".concat(currentValue.length, ")"), /*#__PURE__*/_react.default.createElement(_material.SvgIcon, {
     className: "my-select__arrowdown",
-    component: _mdiMaterialUi.ChevronDown,
+    component: _KeyboardArrowDown.default,
     fontSize: "small"
   })), /*#__PURE__*/_react.default.createElement(_material.Popper, {
     open: open,
     anchorEl: anchorRef.current,
     transition: true,
     style: {
-      zIndex: '1'
+      zIndex: '9999'
     }
   }, _ref2 => {
     let {
@@ -145,7 +147,7 @@ const CustomSelect = _ref => {
         onClick: () => toggle(option),
         className: ['my-select__option', containsValue(option.value) ? 'my-select__option--active' : ''].join(' ')
       }, multiple && /*#__PURE__*/_react.default.createElement(_material.SvgIcon, {
-        component: _mdiMaterialUi.Check,
+        component: _Check.default,
         className: ['my-select__option__icon', containsValue(option.value) ? 'my-select__option__icon--active' : ''].join(' ')
       }), option.name);
     })))));
@@ -178,11 +180,11 @@ CustomSelect.defaultProps = {
 };
 const StyledButton = (0, _styledComponents.default)(_button.default).withConfig({
   displayName: "custom-select__StyledButton",
-  componentId: "sc-v6xs6u-0"
+  componentId: "sc-15u16ye-0"
 })(["border:1px solid #f0f0f0;padding:6px 8px 6px 12px;font-weight:", ";font-size:16px;color:#666;line-height:1;text-transform:none;min-width:100px;& + &{margin-left:10px;}&.my-select__selector--active{&,.my-select__arrowdown,.my-select__icon svg{color:", ";}}.my-select__arrowdown{color:#999;font-size:16px;margin-left:6px;}.my-select__icon{font-size:0;svg{color:#999;font-size:18px;margin-right:3px;}}"], props => props.theme.typography.fontWeightBold, props => props.theme.palette.primary.main);
 const StyledMenuList = (0, _styledComponents.default)(_material.MenuList).withConfig({
   displayName: "custom-select__StyledMenuList",
-  componentId: "sc-v6xs6u-1"
+  componentId: "sc-15u16ye-1"
 })([".my-select__option__icon{color:transparent;font-size:16px;margin:0 3px 0 -5px;}.my-select__option{font-size:16px;color:#999;}.my-select__option--active{&,.my-select__option__icon{color:", ";}}"], props => props.theme.palette.primary.main);
 var _default = CustomSelect;
 exports.default = _default;

package/lib/components/custom-select/index.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _customSelect = _interopRequireDefault(require("./custom-select"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var _default = _customSelect.default;
+exports.default = _default;

package/lib/components/filter-author.js

@@ -15,7 +15,7 @@ var _material = require("@mui/material");
 
 var _Face = _interopRequireDefault(require("@mui/icons-material/Face"));
 
-var _store = require("../contexts/store");
+var _filter = require("../contexts/filter");
 
 const _excluded = ["user", "deleteUserTag"];
 
@@ -37,10 +37,9 @@ const FilterAuthor = _ref => {
   } = _ref,
       containerProps = _objectWithoutProperties(_ref, _excluded);
 
-  const searchStore = (0, _store.useSearchContext)();
   const {
     t
-  } = searchStore;
+  } = (0, _filter.useFilterContext)();
   if (!user) return null;
   return /*#__PURE__*/_react.default.createElement(StyleDiv, containerProps, /*#__PURE__*/_react.default.createElement(_material.Chip, {
     icon: /*#__PURE__*/_react.default.createElement(_Face.default, null),

package/lib/components/{empty.js → list/empty.js}

@@ -13,15 +13,14 @@ var _Box = _interopRequireDefault(require("@mui/material/Box"));
 
 var _Typography = _interopRequireDefault(require("@mui/material/Typography"));
 
-var _store = require("../contexts/store");
+var _filter = require("../../contexts/filter");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 const NoResults = () => {
-  const searchStore = (0, _store.useSearchContext)();
   const {
     t
-  } = searchStore;
+  } = (0, _filter.useFilterContext)();
   return /*#__PURE__*/_react.default.createElement(_Typography.default, {
     style: {
       textAlign: 'center'
@@ -37,11 +36,10 @@ const NoResultsTips = _ref => {
     filterTip,
     keywordTip
   } = _ref;
-  const searchStore = (0, _store.useSearchContext)();
   const {
     t,
     locale
-  } = searchStore;
+  } = (0, _filter.useFilterContext)();
 
   const getSplit = () => {
     if (locale === 'zh') return '、';
@@ -71,18 +69,18 @@ const EmptyTitle = _ref2 => {
   let {
     primaryStart,
     primaryEnd,
-    search
+    filter
   } = _ref2;
   return /*#__PURE__*/_react.default.createElement(_Typography.default, {
     variant: "subtitle2"
   }, /*#__PURE__*/_react.default.createElement("span", null, primaryStart), /*#__PURE__*/_react.default.createElement("span", {
     className: "primary"
-  }, " ", search, " "), /*#__PURE__*/_react.default.createElement("span", null, primaryEnd, " "));
+  }, " ", filter, " "), /*#__PURE__*/_react.default.createElement("span", null, primaryEnd, " "));
 };
 
 exports.EmptyTitle = EmptyTitle;
 EmptyTitle.propTypes = {
   primaryStart: _propTypes.default.string.isRequired,
   primaryEnd: _propTypes.default.string.isRequired,
-  search: _propTypes.default.string.isRequired
+  filter: _propTypes.default.string.isRequired
 };

package/lib/components/list/index.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _list = _interopRequireDefault(require("./list"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var _default = _list.default;
+exports.default = _default;

package/lib/components/{list.js → list/list.js}

@@ -23,9 +23,9 @@ var _CircularProgress = _interopRequireDefault(require("@mui/material/CircularPr
 
 var _empty = require("./empty");
 
-var _store = require("../contexts/store");
+var _filter = require("../../contexts/filter");
 
-var _utils = require("../tools/utils");
+var _utils = require("../../libs/utils");
 
 const _excluded = ["blocklets"];
 
@@ -48,10 +48,10 @@ function BlockletList(_ref) {
     selectedCategory,
     blockletList,
     getCategoryLocale,
-    queryParams,
+    filters,
     t
-  } = (0, _store.useSearchContext)();
-  const showFilterTip = !!selectedCategory || !!queryParams.get('price');
+  } = (0, _filter.useFilterContext)();
+  const showFilterTip = !!selectedCategory || !!filters.price;
 
   if (errors.fetchBlockletsError) {
     return /*#__PURE__*/_react.default.createElement(_Alert.default, {
@@ -68,22 +68,22 @@ function BlockletList(_ref) {
     }, /*#__PURE__*/_react.default.createElement(_CircularProgress.default, null));
   }
 
-  if (queryParams.get('search') && showFilterTip && blockletList.length === 0) {
+  if (filters.keyword && showFilterTip && blockletList.length === 0) {
     return /*#__PURE__*/_react.default.createElement(CustomEmpty, null, /*#__PURE__*/_react.default.createElement(_empty.EmptyTitle, {
       primaryStart: t('blocklet.noBlockletPart1'),
       primaryEnd: t('blocklet.noBlockletPart2'),
-      search: queryParams.get('search')
+      filter: filters.keyword
     }), /*#__PURE__*/_react.default.createElement(_empty.NoResultsTips, {
       keywordTip: true,
       filterTip: true
     }));
   }
 
-  if (queryParams.get('search') && blockletList.length === 0) {
+  if (filters.keyword && blockletList.length === 0) {
     return /*#__PURE__*/_react.default.createElement(CustomEmpty, null, /*#__PURE__*/_react.default.createElement(_empty.EmptyTitle, {
       primaryStart: t('blocklet.noBlockletPart1'),
       primaryEnd: t('blocklet.noBlockletPart2'),
-      search: queryParams.get('search')
+      filter: filters.keyword
     }), /*#__PURE__*/_react.default.createElement(_empty.NoResultsTips, {
       keywordTip: true
     }));
@@ -94,7 +94,7 @@ function BlockletList(_ref) {
     return /*#__PURE__*/_react.default.createElement(CustomEmpty, null, categoryLocale ? /*#__PURE__*/_react.default.createElement(_empty.EmptyTitle, {
       primaryStart: t('blocklet.noCategoryResults1'),
       primaryEnd: t('blocklet.noCategoryResults2'),
-      search: categoryLocale
+      filter: categoryLocale
     }) : /*#__PURE__*/_react.default.createElement(_empty.NoResults, null), /*#__PURE__*/_react.default.createElement(_empty.NoResultsTips, {
       filterTip: true
     }));
@@ -127,9 +127,9 @@ BlockletList.propTypes = {
 BlockletList.defaultProps = {};
 const StyledGrid = (0, _styledComponents.default)(_Grid.default).withConfig({
   displayName: "list__StyledGrid",
-  componentId: "sc-anbsot-0"
+  componentId: "sc-jzgpev-0"
 })(["@media (max-width:", "px){&.MuiGrid-item{padding-bottom:0px;padding-left:16px;padding-right:4px;}}"], props => props.theme.breakpoints.values.sm);
 const CustomEmpty = (0, _styledComponents.default)(_Empty.default).withConfig({
   displayName: "list__CustomEmpty",
-  componentId: "sc-anbsot-1"
+  componentId: "sc-jzgpev-1"
 })(["text-align:center;.primary{color:", ";}.tips{margin-top:", ";}"], props => props.theme.palette.primary.main, props => props.theme.spacing(1));

package/lib/components/search.js

@@ -9,7 +9,9 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _mdiMaterialUi = require("mdi-material-ui");
+var _Search = _interopRequireDefault(require("@mui/icons-material/Search"));
+
+var _Close = _interopRequireDefault(require("@mui/icons-material/Close"));
 
 var _material = require("@mui/material");
 
@@ -17,7 +19,7 @@ var _ahooks = require("ahooks");
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
-var _store = require("../contexts/store");
+var _filter = require("../contexts/filter");
 
 const _excluded = ["placeholder"];
 
@@ -37,15 +39,12 @@ const Search = _ref => {
   } = _ref,
       rest = _objectWithoutProperties(_ref, _excluded);
 
-  const searchStore = (0, _store.useSearchContext)();
-  const {
-    queryParams,
-    handleSearchKeyword
-  } = searchStore;
-  const [searchStr, setSearchStr] = (0, _react.useState)(queryParams.get('search') || '');
   const {
-    run: handleSearch
-  } = (0, _ahooks.useDebounceFn)(handleSearchKeyword, {
+    filters,
+    handleKeyword
+  } = (0, _filter.useFilterContext)();
+  const [searchStr, setSearchStr] = (0, _react.useState)(filters.keyword || '');
+  const debouncedSearch = (0, _ahooks.useDebounceFn)(handleKeyword, {
     wait: 300
   });
 
@@ -54,21 +53,24 @@ const Search = _ref => {
       value
     } = event.target;
     setSearchStr(value);
-    handleSearch(value);
+    debouncedSearch.run(value);
   };
 
   const handleClose = () => {
     setSearchStr('');
-    handleSearchKeyword();
+    handleKeyword();
   };
 
+  (0, _react.useEffect)(() => {
+    setSearchStr(filters.keyword || '');
+  }, [filters.keyword]);
   return /*#__PURE__*/_react.default.createElement(StyledSearch, Object.assign({
     inputProps: {
       'data-cy': 'search-blocklet'
     },
     startAdornment: /*#__PURE__*/_react.default.createElement(_material.InputAdornment, {
       position: "start"
-    }, /*#__PURE__*/_react.default.createElement(StyledMagnify, null)),
+    }, /*#__PURE__*/_react.default.createElement(StyledSearchIcon, null)),
     onChange: handleChange,
     placeholder: placeholder,
     value: searchStr,
@@ -76,7 +78,7 @@ const Search = _ref => {
     "data-cy": "search",
     endAdornment: searchStr && /*#__PURE__*/_react.default.createElement(_material.InputAdornment, {
       position: "end"
-    }, /*#__PURE__*/_react.default.createElement(StyledClose, {
+    }, /*#__PURE__*/_react.default.createElement(StyledCloseIcon, {
       "data-cy": "search-delete",
       onClick: handleClose
     }))
@@ -93,12 +95,12 @@ const StyledSearch = (0, _styledComponents.default)(_material.OutlinedInput).wit
   displayName: "search__StyledSearch",
   componentId: "sc-1ehlqka-0"
 })(["background-color:#fff;border-radius:12px;font-size:16px;margin:0 10px;.MuiInputBase-input{padding:12px 0px 12px 0px;}.MuiOutlinedInput-notchedOutline{border:none;}.Mui-focused{background-color:#f6f6f6;.MuiInputBase-input::placeholder{color:transparent;}}@media (max-width:", "px){font-size:14px;border-radius:6px;.MuiInputBase-input{padding:8px 0 8px 10px;}}"], props => props.theme.breakpoints.values.md);
-const StyledMagnify = (0, _styledComponents.default)(_mdiMaterialUi.Magnify).withConfig({
-  displayName: "search__StyledMagnify",
+const StyledSearchIcon = (0, _styledComponents.default)(_Search.default).withConfig({
+  displayName: "search__StyledSearchIcon",
   componentId: "sc-1ehlqka-1"
 })(["color:", ";font-size:28px;@media (max-width:", "px){font-size:24px;}"], props => props.theme.palette.grey[500], props => props.theme.breakpoints.values.md);
-const StyledClose = (0, _styledComponents.default)(_mdiMaterialUi.Close).withConfig({
-  displayName: "search__StyledClose",
+const StyledCloseIcon = (0, _styledComponents.default)(_Close.default).withConfig({
+  displayName: "search__StyledCloseIcon",
   componentId: "sc-1ehlqka-2"
 })(["color:", ";font-size:16px;cursor:pointer;"], props => props.theme.palette.grey[500]);
 var _default = Search;