@blocklet/list 0.8.18 → 0.8.21

package/lib/base.js

@@ -11,8 +11,6 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
 
 var _Sort = _interopRequireDefault(require("@mui/icons-material/Sort"));
 
-var _FilterList = _interopRequireDefault(require("@mui/icons-material/FilterList"));
-
 var _material = require("@mui/material");
 
 var _filter = require("./contexts/filter");
@@ -29,12 +27,12 @@ var _aside = _interopRequireDefault(require("./components/aside"));
 
 var _search = _interopRequireDefault(require("./components/search"));
 
-var _categorySelect = _interopRequireDefault(require("./components/category-select"));
+var _filterMobile = _interopRequireDefault(require("./components/filter-mobile"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 const ListBase = () => {
-  var _getSortOptions$find, _getPrices$find;
+  var _getSortOptions$find;
 
   const {
     handleDeveloper,
@@ -42,8 +40,7 @@ const ListBase = () => {
     filters,
     developerName,
     handleSort,
-    t,
-    handlePrice
+    t
   } = (0, _filter.useFilterContext)();
   return /*#__PURE__*/_react.default.createElement(_material.Box, {
     display: "flex",
@@ -76,7 +73,7 @@ const ListBase = () => {
     className: "filterContainer"
   }, /*#__PURE__*/_react.default.createElement(_material.Hidden, {
     mdUp: true
-  }, /*#__PURE__*/_react.default.createElement(_categorySelect.default, null)), /*#__PURE__*/_react.default.createElement(_customSelect.default, {
+  }, /*#__PURE__*/_react.default.createElement(_filterMobile.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 === filters.sortBy)) === null || _getSortOptions$find === void 0 ? void 0 : _getSortOptions$find.name) || t('sort.sort'),
@@ -89,8 +86,7 @@ const ListBase = () => {
   }, /*#__PURE__*/_react.default.createElement(_material.Box, {
     display: "flex",
     flexWrap: "wrap",
-    alignItems: "center",
-    justifyContent: filters.developer ? 'space-between' : 'flex-end'
+    alignItems: "center"
   }, !!filters.developer && /*#__PURE__*/_react.default.createElement(_filterAuthor.default, {
     user: developerName,
     deleteUserTag: () => {
@@ -99,17 +95,6 @@ const ListBase = () => {
     style: {
       marginBottom: '16px'
     }
-  }), /*#__PURE__*/_react.default.createElement(_customSelect.default, {
-    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 === filters.price)) === null || _getPrices$find === void 0 ? void 0 : _getPrices$find.name) || t('common.price'),
-    onChange: v => {
-      handlePrice(v);
-    },
-    style: {
-      marginBottom: '16px'
-    }
   }))), /*#__PURE__*/_react.default.createElement(_list.default, {
     blocklets: blockletList
   })));
@@ -118,7 +103,7 @@ const ListBase = () => {
 const StyledMin = _styledComponents.default.main.withConfig({
   displayName: "base__StyledMin",
   componentId: "sc-wumzlv-0"
-})(["flex:1;width:100%;min-width:0;.marketplace-header{justify-content:space-between;margin-bottom:20px;}.sort-button{white-space:nowrap;}.search{margin-left:0px;}@media (max-width:", "px){.searchContainer{flex:1;}.search{width:100%;}.filterContainer{flex:1;display:flex;justify-content:flex-end;}}@media (max-width:750px){.searchContainer{width:100%;}.filterContainer{width:100%;margin-left:0;display:flex;justify-content:space-between;}.search{margin-bottom:20px;width:100%;}.marketplace-header{display:flex;flex-direction:column;align-items:flex-start;}}@media (max-width:", "px){.sort-button{font-size:12px;}}"], props => props.theme.breakpoints.values.md, props => props.theme.breakpoints.values.md);
+})(["flex:1;width:100%;min-width:0;.marketplace-header{justify-content:space-between;margin-bottom:20px;}.sort-button{white-space:nowrap;}.search{margin-left:0px;}@media (max-width:", "px){.searchContainer{flex:1;}.search{width:100%;}.filterContainer{flex:1;display:flex;justify-content:flex-end;}}@media (max-width:750px){.searchContainer{width:100%;}.filterContainer{width:100%;margin-left:0;display:flex;justify-content:flex-start;}.search{margin-bottom:20px;width:100%;}.marketplace-header{display:flex;flex-direction:column;align-items:flex-start;}}@media (max-width:", "px){.sort-button{font-size:12px;}}"], props => props.theme.breakpoints.values.md, props => props.theme.breakpoints.values.md);
 
 const StyledSearch = (0, _styledComponents.default)(_search.default).withConfig({
   displayName: "base__StyledSearch",

package/lib/components/filter-mobile/content.js

@@ -0,0 +1,51 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function Content(_ref) {
+  let {
+    options,
+    onChange,
+    title,
+    value
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement(StyledDiv, null, /*#__PURE__*/_react.default.createElement("div", {
+    className: "title"
+  }, title), /*#__PURE__*/_react.default.createElement("div", {
+    className: "list"
+  }, options.map(item => {
+    return /*#__PURE__*/_react.default.createElement("span", {
+      key: item.value,
+      className: value === item.value ? 'select item' : 'item',
+      onClick: () => onChange(item.value)
+    }, item.name);
+  })));
+}
+
+const StyledDiv = _styledComponents.default.div.withConfig({
+  displayName: "content__StyledDiv",
+  componentId: "sc-16pmlm6-0"
+})([".title{font-size:18px;font-weight:bold;}.list{display:flex;flex-direction:column;align-items:flex-start;margin-left:8px;}.item{margin:16px 0;cursor:pointer;}.select{color:", ";}"], props => props.theme.palette.primary.main);
+
+Content.propTypes = {
+  title: _propTypes.default.string.isRequired,
+  options: _propTypes.default.array.isRequired,
+  onChange: _propTypes.default.func.isRequired,
+  value: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number])
+};
+Content.defaultProps = {
+  value: null
+};
+var _default = Content;
+exports.default = _default;

package/lib/components/filter-mobile/index.js

@@ -0,0 +1,77 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _FilterAltOutlined = _interopRequireDefault(require("@mui/icons-material/FilterAltOutlined"));
+
+var _Dialog = _interopRequireDefault(require("@arcblock/ux/lib/Dialog"));
+
+var _Button = _interopRequireDefault(require("@mui/material/Button"));
+
+var _filter = require("../../contexts/filter");
+
+var _content = _interopRequireDefault(require("./content"));
+
+var _utils = require("../../libs/utils");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+// import PropTypes from 'prop-types';
+function MobileFilter() {
+  const {
+    selectedCategory,
+    handleCategory,
+    t,
+    handlePrice,
+    filters,
+    categoryList,
+    locale
+  } = (0, _filter.useFilterContext)();
+  const [open, setOpen] = (0, _react.useState)(false);
+  const categoriesOption = (0, _utils.getCategoriesOption)(categoryList, locale);
+  const prices = (0, _utils.getPrices)(t);
+  return /*#__PURE__*/_react.default.createElement(StyledDiv, null, /*#__PURE__*/_react.default.createElement(_Button.default, {
+    variant: "outlined",
+    className: "filter-button",
+    onClick: () => setOpen(true)
+  }, /*#__PURE__*/_react.default.createElement(_FilterAltOutlined.default, {
+    className: "filter-icon",
+    fontSize: "small"
+  })), /*#__PURE__*/_react.default.createElement(_Dialog.default, {
+    fullWidth: true,
+    title: "",
+    open: open,
+    onClose: () => setOpen(false)
+  }, /*#__PURE__*/_react.default.createElement(_content.default, {
+    title: t('common.price'),
+    options: prices,
+    value: filters.price,
+    onChange: handlePrice
+  }), /*#__PURE__*/_react.default.createElement(_content.default, {
+    title: t('common.category'),
+    options: categoriesOption,
+    value: selectedCategory,
+    onChange: handleCategory
+  })));
+}
+
+const StyledDiv = _styledComponents.default.div.withConfig({
+  displayName: "filter-mobile__StyledDiv",
+  componentId: "sc-5csoa5-0"
+})([".filter-button{margin-right:16px;border-color:rgb(240,240,240);padding:5px 8px;min-width:initial;}.filter-icon{cursor:pointer;color:", ";}"], props => props.theme.palette.grey[500]);
+
+MobileFilter.propTypes = {};
+MobileFilter.defaultProps = {};
+var _default = MobileFilter;
+exports.default = _default;

package/lib/components/list/list.js

@@ -105,8 +105,7 @@ function BlockletList(_ref) {
   }
 
   return /*#__PURE__*/_react.default.createElement(_Grid.default, Object.assign({
-    container: true,
-    spacing: 4
+    container: true
   }, rest), blocklets.map(blocklet => /*#__PURE__*/_react.default.createElement(StyledGrid, {
     item: true,
     lg: 4,
@@ -128,7 +127,7 @@ BlockletList.defaultProps = {};
 const StyledGrid = (0, _styledComponents.default)(_Grid.default).withConfig({
   displayName: "list__StyledGrid",
   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);
+})(["@media (max-width:", "px){&.MuiGrid-item{padding-bottom:0px;margin-left:", ";padding-right:", ";}}"], props => props.theme.breakpoints.values.sm, props => props.theme.spacing(-2), props => props.theme.spacing(0.5));
 const CustomEmpty = (0, _styledComponents.default)(_Empty.default).withConfig({
   displayName: "list__CustomEmpty",
   componentId: "sc-jzgpev-1"

package/lib/contexts/filter.js

@@ -206,7 +206,7 @@ function FilterProvider(_ref) {
         onFilterChange(changeData);
       } else {
         const changeData = _objectSpread(_objectSpread({}, filters), {}, {
-          category
+          category: category === filters.category ? undefined : category
         });
 
         onFilterChange(changeData);

package/lib/libs/utils.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.urlStringify = exports.replaceTranslate = exports.removeUndefined = exports.getStoreDetail = exports.getSortOptions = exports.getPrices = exports.getCategories = exports.formatLogoPath = exports.formatError = exports.filterBlockletByPrice = void 0;
+exports.urlStringify = exports.replaceTranslate = exports.removeUndefined = exports.getStoreDetail = exports.getSortOptions = exports.getPrices = exports.getCategoriesOption = exports.getCategories = exports.formatLogoPath = exports.formatError = exports.filterBlockletByPrice = void 0;
 
 var _urlJoin = _interopRequireDefault(require("url-join"));
 
@@ -47,6 +47,17 @@ const getPrices = t => {
     value: 'payment'
   }];
 };
+
+exports.getPrices = getPrices;
+
+const getCategoriesOption = function getCategoriesOption() {
+  let list = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+  let locale = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'en';
+  return list.map(item => ({
+    name: item.locales[locale],
+    value: item.name
+  }));
+};
 /**
  * 从开发者所属 blocklets 中的得到 Categories
  * @param {*} list
@@ -55,7 +66,7 @@ const getPrices = t => {
  */
 
 
-exports.getPrices = getPrices;
+exports.getCategoriesOption = getCategoriesOption;
 
 const getCategories = (list, developerDid) => {
   const filterList = list.filter(item => developerDid ? item.owner.did === developerDid : true);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/list",
-  "version": "0.8.18",
+  "version": "0.8.21",
   "description": "Common ux components of blocklet",
   "publishConfig": {
     "access": "public"
@@ -37,7 +37,7 @@
     "react": ">=18.1.0"
   },
   "dependencies": {
-    "@arcblock/ux": "^2.1.4",
+    "@arcblock/ux": "^2.1.6",
     "@emotion/react": "^11.9.0",
     "@emotion/styled": "^11.8.1",
     "@mui/icons-material": "^5.6.2",
@@ -58,5 +58,5 @@
     "babel-plugin-inline-react-svg": "^2.0.1",
     "babel-plugin-styled-components": "^1.10.7"
   },
-  "gitHead": "3fade57bc35e7abf298ed99812867d832962ed1d"
+  "gitHead": "04b04a68686b6d5136c255128e7f399ab95eb1f3"
 }

package/src/base.js

@@ -1,20 +1,19 @@
 import React from 'react';
 import styled from 'styled-components';
 import SortIcon from '@mui/icons-material/Sort';
-import FilterListIcon from '@mui/icons-material/FilterList';
 import { Box, Hidden } from '@mui/material';
 
 import { useFilterContext } from './contexts/filter';
 import CustomSelect from './components/custom-select';
 import FilterAuthor from './components/filter-author';
-import { getSortOptions, getPrices } from './libs/utils';
+import { getSortOptions } from './libs/utils';
 import BlockletList from './components/list';
 import Aside from './components/aside';
 import Search from './components/search';
-import CategorySelect from './components/category-select';
+import FilterOnMobile from './components/filter-mobile';
 
 const ListBase = () => {
-  const { handleDeveloper, blockletList, filters, developerName, handleSort, t, handlePrice } = useFilterContext();
+  const { handleDeveloper, blockletList, filters, developerName, handleSort, t } = useFilterContext();
   return (
     <Box display="flex" alignItems="flex-start" height="100%">
       <Hidden mdDown>
@@ -39,8 +38,10 @@ const ListBase = () => {
           </Box>
           <Box mt={0} ml="10px" className="filterContainer">
             <Hidden mdUp>
-              <CategorySelect />
+              {/* 小屏幕下类别 */}
+              <FilterOnMobile />
             </Hidden>
+            {/* 排序选择器 */}
             <CustomSelect
               value={filters.sortBy}
               options={getSortOptions(t)}
@@ -53,11 +54,7 @@ const ListBase = () => {
           </Box>
         </Box>
         <Hidden mdUp>
-          <Box
-            display="flex"
-            flexWrap="wrap"
-            alignItems="center"
-            justifyContent={filters.developer ? 'space-between' : 'flex-end'}>
+          <Box display="flex" flexWrap="wrap" alignItems="center">
             {!!filters.developer && (
               <FilterAuthor
                 user={developerName}
@@ -67,17 +64,6 @@ const ListBase = () => {
                 style={{ marginBottom: '16px' }}
               />
             )}
-            {/* 筛选付费/免费 */}
-            <CustomSelect
-              value={filters.price}
-              icon={<FilterListIcon />}
-              options={getPrices(t)}
-              title={getPrices(t).find((f) => f.value === filters.price)?.name || t('common.price')}
-              onChange={(v) => {
-                handlePrice(v);
-              }}
-              style={{ marginBottom: '16px' }}
-            />
           </Box>
         </Hidden>
         <BlockletList blocklets={blockletList} />
@@ -100,6 +86,7 @@ const StyledMin = styled.main`
   .search {
     margin-left: 0px;
   }
+  /* 小于960px */
   @media (max-width: ${(props) => props.theme.breakpoints.values.md}px) {
     .searchContainer {
       flex: 1;
@@ -121,7 +108,7 @@ const StyledMin = styled.main`
       width: 100%;
       margin-left: 0;
       display: flex;
-      justify-content: space-between;
+      justify-content: flex-start;
     }
     .search {
       margin-bottom: 20px;

package/src/components/filter-mobile/content.js

@@ -0,0 +1,54 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+
+function Content({ options, onChange, title, value }) {
+  return (
+    <StyledDiv>
+      <div className="title">{title}</div>
+      <div className="list">
+        {options.map((item) => {
+          return (
+            <span
+              key={item.value}
+              className={value === item.value ? 'select item' : 'item'}
+              onClick={() => onChange(item.value)}>
+              {item.name}
+            </span>
+          );
+        })}
+      </div>
+    </StyledDiv>
+  );
+}
+
+const StyledDiv = styled.div`
+  .title {
+    font-size: 18px;
+    font-weight: bold;
+  }
+  .list {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    margin-left: 8px;
+  }
+  .item {
+    margin: 16px 0;
+    cursor: pointer;
+  }
+  .select {
+    color: ${(props) => props.theme.palette.primary.main};
+  }
+`;
+
+Content.propTypes = {
+  title: PropTypes.string.isRequired,
+  options: PropTypes.array.isRequired,
+  onChange: PropTypes.func.isRequired,
+  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+};
+Content.defaultProps = {
+  value: null,
+};
+export default Content;

package/src/components/filter-mobile/index.js

@@ -0,0 +1,52 @@
+import React, { useState } from 'react';
+// import PropTypes from 'prop-types';
+import styled from 'styled-components';
+import FilterAltOutlinedIcon from '@mui/icons-material/FilterAltOutlined';
+import Dialog from '@arcblock/ux/lib/Dialog';
+import Button from '@mui/material/Button';
+
+import { useFilterContext } from '../../contexts/filter';
+import Content from './content';
+import { getCategoriesOption, getPrices } from '../../libs/utils';
+
+function MobileFilter() {
+  const { selectedCategory, handleCategory, t, handlePrice, filters, categoryList, locale } = useFilterContext();
+  const [open, setOpen] = useState(false);
+
+  const categoriesOption = getCategoriesOption(categoryList, locale);
+  const prices = getPrices(t);
+
+  return (
+    <StyledDiv>
+      <Button variant="outlined" className="filter-button" onClick={() => setOpen(true)}>
+        <FilterAltOutlinedIcon className="filter-icon" fontSize="small" />
+      </Button>
+      <Dialog fullWidth title="" open={open} onClose={() => setOpen(false)}>
+        <Content title={t('common.price')} options={prices} value={filters.price} onChange={handlePrice} />
+        <Content
+          title={t('common.category')}
+          options={categoriesOption}
+          value={selectedCategory}
+          onChange={handleCategory}
+        />
+      </Dialog>
+    </StyledDiv>
+  );
+}
+
+const StyledDiv = styled.div`
+  .filter-button {
+    margin-right: 16px;
+    border-color: rgb(240, 240, 240);
+    padding: 5px 8px;
+    min-width: initial;
+  }
+  .filter-icon {
+    cursor: pointer;
+    color: ${(props) => props.theme.palette.grey[500]};
+  }
+`;
+
+MobileFilter.propTypes = {};
+MobileFilter.defaultProps = {};
+export default MobileFilter;

package/src/components/list/list.js

@@ -81,7 +81,7 @@ export default function BlockletList({ blocklets, ...rest }) {
   }
 
   return (
-    <Grid container spacing={4} {...rest}>
+    <Grid container {...rest}>
       {blocklets.map((blocklet) => (
         <StyledGrid item lg={4} md={6} sm={6} xs={12} key={blocklet.did} data-blocklet-did={blocklet.did}>
           {blockletRender({ blocklet, blocklets: blockletList })}
@@ -101,8 +101,8 @@ const StyledGrid = styled(Grid)`
   @media (max-width: ${(props) => props.theme.breakpoints.values.sm}px) {
     &.MuiGrid-item {
       padding-bottom: 0px;
-      padding-left: 16px;
-      padding-right: 4px;
+      margin-left: ${(props) => props.theme.spacing(-2)};
+      padding-right: ${(props) => props.theme.spacing(0.5)};
     }
   }
 `;

package/src/contexts/filter.js

@@ -143,7 +143,7 @@ function FilterProvider({
         const changeData = { ...filters, category: undefined };
         onFilterChange(changeData);
       } else {
-        const changeData = { ...filters, category };
+        const changeData = { ...filters, category: category === filters.category ? undefined : category };
         onFilterChange(changeData);
       }
     },

package/src/libs/utils.js

@@ -35,6 +35,9 @@ const getPrices = (t) => {
     { name: t('blocklet.payment'), value: 'payment' },
   ];
 };
+const getCategoriesOption = (list = [], locale = 'en') => {
+  return list.map((item) => ({ name: item.locales[locale], value: item.name }));
+};
 /**
  * 从开发者所属 blocklets 中的得到 Categories
  * @param {*} list
@@ -114,4 +117,5 @@ export {
   formatError,
   removeUndefined,
   urlStringify,
+  getCategoriesOption,
 };

package/lib/components/category-select.js

@@ -1,55 +0,0 @@
-"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/src/components/category-select.js

@@ -1,43 +0,0 @@
-import React from 'react';
-import { MenuItem } from '@mui/material';
-
-import { useFilterContext } from '../contexts/filter';
-import CustomSelect from './custom-select';
-
-/**
- * 小屏幕下的分类选择器
- * @returns
- */
-const CategorySelect = () => {
-  const { categoryList, selectedCategory, handleCategory, t, locale } = useFilterContext();
-
-  const itemRender = (item) => {
-    return (
-      <MenuItem
-        className={['my-select__option', selectedCategory?.includes(item.name) ? 'my-select__option--active' : ''].join(
-          ' '
-        )}
-        key={item._id}
-        value={item.name}
-        onClick={() => handleCategory(item.name)}>
-        {item.locales[locale]}
-      </MenuItem>
-    );
-  };
-
-  return (
-    <CustomSelect
-      value={selectedCategory || 'all'}
-      options={categoryList}
-      title={categoryList.find((i) => i.name === selectedCategory)?.locales[locale] || t('category.all')}
-      itemRender={itemRender}
-      prepend={
-        <MenuItem value="all" onClick={() => handleCategory('all')}>
-          {t('category.all')}
-        </MenuItem>
-      }
-    />
-  );
-};
-
-export default CategorySelect;