@blocklet/list 0.8.20 → 0.8.23

package/src/base.js

@@ -1,50 +1,54 @@
 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 FaceIcon from '@mui/icons-material/Face';
 
 import { useFilterContext } from './contexts/filter';
 import CustomSelect from './components/custom-select';
-import FilterAuthor from './components/filter-author';
-import { getSortOptions, getPrices } from './libs/utils';
+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 CategorySelect from './components/category-select';
 
 const ListBase = () => {
-  const { handleDeveloper, blockletList, filters, developerName, handleSort, t, handlePrice } = useFilterContext();
+  const {
+    handleDeveloper,
+    blockletList,
+    filters,
+    developerName,
+    handleSort,
+    handleCategory,
+    handlePrice,
+    t,
+    getCategoryLocale,
+    priceOptions,
+  } = useFilterContext();
+
+  const sortOptions = getSortOptions(t);
+  const sortLocale = sortOptions.find((f) => f.value === filters.sortBy)?.name || t('sort.sort');
+  const categoryLocale = getCategoryLocale(filters.category);
+  const priceLocale = priceOptions.find((price) => price.value === filters.price)?.name;
+
   return (
     <Box display="flex" alignItems="flex-start" height="100%">
       <Hidden mdDown>
         <Aside />
       </Hidden>
       <StyledMin>
-        <Box className="marketplace-header" display="flex" alignItems="center">
-          <Hidden mdDown>
-            {!!filters.developer && (
-              <FilterAuthor
-                user={developerName}
-                deleteUserTag={() => {
-                  handleDeveloper(null);
-                }}
-              />
-            )}
-          </Hidden>
-          <Box mt={0} className="searchContainer">
-            <Hidden mdUp>
-              <StyledSearch className="search" placeholder={t('common.searchStore')} />
-            </Hidden>
-          </Box>
-          <Box mt={0} ml="10px" className="filterContainer">
+        <Box className="filter-bar" display="flex" alignItems="center">
+          <StyledSearch className="search-container" placeholder={t('common.searchStore')} />
+          <Box mt={0} ml="16px" className="filter-container">
             <Hidden mdUp>
-              <CategorySelect />
+              {/* 小屏幕下类别 */}
+              <FilterIcon />
             </Hidden>
+            {/* 排序选择器 */}
             <CustomSelect
               value={filters.sortBy}
-              options={getSortOptions(t)}
-              title={getSortOptions(t).find((f) => f.value === filters.sortBy)?.name || t('sort.sort')}
+              options={sortOptions}
+              title={sortLocale}
               icon={<SortIcon />}
               onChange={(v) => {
                 handleSort(v);
@@ -52,34 +56,27 @@ const ListBase = () => {
             />
           </Box>
         </Box>
-        <Hidden mdUp>
-          <Box
-            display="flex"
-            flexWrap="wrap"
-            alignItems="center"
-            justifyContent={filters.developer ? 'space-between' : 'flex-end'}>
-            {!!filters.developer && (
-              <FilterAuthor
-                user={developerName}
-                deleteUserTag={() => {
-                  handleDeveloper(null);
-                }}
-                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>
+        <Box display="flex" flexWrap="wrap" alignItems="center" mb="16px">
+          <CustomChip
+            label={developerName}
+            icon={<FaceIcon />}
+            onDelete={() => {
+              handleDeveloper(null);
+            }}
+          />
+          <CustomChip
+            label={categoryLocale}
+            onDelete={() => {
+              handleCategory(null);
+            }}
+          />
+          <CustomChip
+            label={priceLocale}
+            onDelete={() => {
+              handlePrice(null);
+            }}
+          />
+        </Box>
         <BlockletList blocklets={blockletList} />
       </StyledMin>
     </Box>
@@ -90,44 +87,34 @@ const StyledMin = styled.main`
   flex: 1;
   width: 100%;
   min-width: 0;
-  .marketplace-header {
+  .filter-bar {
     justify-content: space-between;
-    margin-bottom: 20px;
+    margin-bottom: ${(props) => props.theme.spacing(2)};
   }
   .sort-button {
     white-space: nowrap;
   }
-  .search {
+  .search-container {
+    flex: 2;
     margin-left: 0px;
   }
-  @media (max-width: ${(props) => props.theme.breakpoints.values.md}px) {
-    .searchContainer {
-      flex: 1;
-    }
-    .search {
-      width: 100%;
-    }
-    .filterContainer {
-      flex: 1;
-      display: flex;
-      justify-content: flex-end;
-    }
+
+  .filter-container {
+    flex: 1;
+    display: flex;
+    justify-content: flex-end;
   }
-  @media (max-width: 750px) {
-    .searchContainer {
+  @media (max-width: ${(props) => props.theme.breakpoints.values.md}px) {
+    .search-container {
       width: 100%;
+      margin-bottom: ${(props) => props.theme.spacing(2)};
     }
-    .filterContainer {
-      width: 100%;
+    .filter-container {
       margin-left: 0;
       display: flex;
-      justify-content: space-between;
-    }
-    .search {
-      margin-bottom: 20px;
-      width: 100%;
+      justify-content: flex-start;
     }
-    .marketplace-header {
+    .filter-bar {
       display: flex;
       flex-direction: column;
       align-items: flex-start;

package/src/components/aside.js

@@ -0,0 +1,36 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import { useFilterContext } from '../contexts/filter';
+import { FilterGroup } from './filter';
+
+const Aside = () => {
+  const { selectedCategory, handleCategory, t, handlePrice, filters, categoryOptions, priceOptions } =
+    useFilterContext();
+
+  return (
+    <StyledAside>
+      <div>
+        <FilterGroup title={t('common.price')} options={priceOptions} value={filters.price} onChange={handlePrice} />
+      </div>
+      <div style={{ marginTop: '32px' }}>
+        <FilterGroup
+          title={t('common.category')}
+          options={categoryOptions}
+          value={selectedCategory}
+          onChange={handleCategory}
+        />
+      </div>
+    </StyledAside>
+  );
+};
+
+const StyledAside = styled.aside`
+  width: 220px;
+  margin-right: ${(props) => props.theme.spacing(2)};
+  height: 100%;
+`;
+
+Aside.propTypes = {};
+Aside.defaultProps = {};
+export default Aside;

package/src/components/filter/custom-chip.js

@@ -0,0 +1,33 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+import { Chip } from '@mui/material';
+
+const StyleDiv = styled.div`
+  .MuiChip-root {
+    border-radius: 4px;
+    height: initial;
+    text-transform: capitalize;
+    margin-right: ${(props) => props.theme.spacing(2)};
+    padding: 4px 0;
+  }
+`;
+const FilterChip = ({ label, icon, onDelete, ...containerProps }) => {
+  if (!label) return null;
+  return (
+    <StyleDiv {...containerProps}>
+      <Chip icon={icon} label={label} onDelete={onDelete} />
+    </StyleDiv>
+  );
+};
+FilterChip.propTypes = {
+  label: PropTypes.string,
+  onDelete: PropTypes.func,
+  icon: PropTypes.element,
+};
+FilterChip.defaultProps = {
+  onDelete: () => {},
+  icon: null,
+  label: null,
+};
+export default FilterChip;

package/src/components/filter/group.js

@@ -0,0 +1,64 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+
+function FilterGroup({ options, onChange, title, value }) {
+  return (
+    <StyledDiv>
+      <div className="title">{title}</div>
+      <div className="list">
+        {options.map((item) => {
+          return (
+            <div
+              title={item.name}
+              key={item.value}
+              data-cy="filter"
+              className={value === item.value ? 'select item' : 'item'}
+              onClick={() => onChange(item.value)}>
+              {item.name}
+            </div>
+          );
+        })}
+      </div>
+    </StyledDiv>
+  );
+}
+
+const StyledDiv = styled.div`
+  .title {
+    font-size: 18px;
+    font-weight: bold;
+    margin-bottom: ${(props) => props.theme.spacing(2)};
+  }
+  .list {
+  }
+  .item {
+    font-size: 16px;
+    font-weight: bold;
+    padding: ${(props) => props.theme.spacing(2)} ${(props) => props.theme.spacing(1)};
+    color: #9397a1;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    text-transform: capitalize;
+    cursor: pointer;
+    &:hover {
+      background-color: ${(props) => props.theme.palette.grey[50]};
+      color: initial;
+    }
+  }
+  .select {
+    color: ${(props) => props.theme.palette.primary.main};
+  }
+`;
+
+FilterGroup.propTypes = {
+  title: PropTypes.string.isRequired,
+  options: PropTypes.array.isRequired,
+  onChange: PropTypes.func.isRequired,
+  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+};
+FilterGroup.defaultProps = {
+  value: null,
+};
+export default FilterGroup;

package/src/components/filter/icon.js

@@ -0,0 +1,69 @@
+import React, { useState } from 'react';
+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 FilterGroup from './group';
+
+function FilterIcon() {
+  const { selectedCategory, handleCategory, t, handlePrice, filters, categoryOptions, priceOptions } =
+    useFilterContext();
+  const [open, setOpen] = useState(false);
+
+  const handelChange = (type, value) => {
+    if (type === 'category') {
+      handleCategory(value);
+    }
+    if (type === 'price') {
+      handlePrice(value);
+    }
+    setOpen(false);
+  };
+
+  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)}>
+        <FilterGroup
+          title={t('common.price')}
+          options={priceOptions}
+          value={filters.price}
+          onChange={(v) => {
+            handelChange('price', v);
+          }}
+        />
+        <div style={{ marginTop: '32px' }}>
+          <FilterGroup
+            title={t('common.category')}
+            options={categoryOptions}
+            value={selectedCategory}
+            onChange={(v) => {
+              handelChange('category', v);
+            }}
+          />
+        </div>
+      </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]};
+  }
+`;
+
+FilterIcon.propTypes = {};
+FilterIcon.defaultProps = {};
+export default FilterIcon;

package/src/components/filter/index.js

@@ -0,0 +1,5 @@
+import FilterIcon from './icon';
+import CustomChip from './custom-chip';
+import FilterGroup from './group';
+
+export { FilterIcon, CustomChip, FilterGroup };

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,13 @@ 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)};
+    }
+  }
+  @media (min-width: ${(props) => props.theme.breakpoints.values.sm}px) {
+    &.MuiGrid-item {
+      margin-bottom: ${(props) => props.theme.spacing(2)};
     }
   }
 `;

package/src/components/search.js

@@ -60,11 +60,10 @@ Search.defaultProps = {
 };
 const StyledSearch = styled(OutlinedInput)`
   background-color: #fff;
-  border-radius: 12px;
-  font-size: 16px;
-  margin: 0 10px;
+  font-size: 14px;
+  border-radius: 6px;
   .MuiInputBase-input {
-    padding: 12px 0px 12px 0px;
+    padding: 8px 0 8px 10px;
   }
   .MuiOutlinedInput-notchedOutline {
     border: none;
@@ -75,13 +74,6 @@ const StyledSearch = styled(OutlinedInput)`
       color: transparent;
     }
   }
-  @media (max-width: ${(props) => props.theme.breakpoints.values.md}px) {
-    font-size: 14px;
-    border-radius: 6px;
-    .MuiInputBase-input {
-      padding: 8px 0 8px 10px;
-    }
-  }
 `;
 
 const StyledSearchIcon = styled(SearchIcon)`

package/src/contexts/filter.js

@@ -5,24 +5,14 @@ import orderBy from 'lodash/orderBy';
 import axios from 'axios';
 // import joinUrl from 'url-join';
 
-import { getCategories, filterBlockletByPrice, replaceTranslate } from '../libs/utils';
+import { getCategories, filterBlockletByPrice, replaceTranslate, getPrices, getCategoryOptions } from '../libs/utils';
 import translations from '../assets/locale';
 import { propTypes, defaultProps } from '../libs/prop-types';
 
 const Filter = createContext({});
 const { Provider, Consumer } = Filter;
 
-function FilterProvider({
-  onSelectBlocklet,
-  selectedBlocklets,
-  filters,
-  children,
-  baseUrl,
-  endpoint,
-  locale,
-  blockletRender,
-  onFilterChange,
-}) {
+function FilterProvider({ filters, children, baseUrl, endpoint, locale, blockletRender, onFilterChange }) {
   const storeApi = axios.create({
     baseURL: endpoint,
   });
@@ -105,6 +95,10 @@ function FilterProvider({
 
     return replaceTranslate(translations[locale][key], data);
   };
+
+  const categoryOptions = useMemo(() => getCategoryOptions(categoryList, locale), [categoryList, locale]);
+  const priceOptions = getPrices(translate);
+
   const filterStore = {
     errors: { fetchBlockletsError, fetchCategoriesError },
     loadings: { fetchBlockletsLoading, fetchCategoriesLoading },
@@ -117,8 +111,8 @@ function FilterProvider({
     baseUrl,
     blockletRender,
     locale,
-    selectedBlocklets,
-    onSelectBlocklet,
+    categoryOptions,
+    priceOptions,
     handleSort: (sort) => {
       const changeData = {
         ...filters,
@@ -143,7 +137,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 getCategoryOptions = (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,
+  getCategoryOptions,
 };

package/lib/components/aside/aside.js

@@ -1,64 +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 _styledComponents = _interopRequireDefault(require("styled-components"));
-
-var _filter = require("../../contexts/filter");
-
-var _utils = require("../../libs/utils");
-
-var _search = _interopRequireDefault(require("../search"));
-
-var _categoryLinkList = _interopRequireDefault(require("./category-link-list"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-const Aside = () => {
-  const {
-    filters,
-    handlePrice,
-    t
-  } = (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, {
-    marginTop: "24px"
-  }, (0, _utils.getPrices)(t).map(item => /*#__PURE__*/_react.default.createElement(_material.FormControlLabel, {
-    className: "payments",
-    key: item.value,
-    control: /*#__PURE__*/_react.default.createElement(_material.Checkbox, {
-      onClick: () => {
-        handlePrice(item.value);
-      },
-      size: "small",
-      checked: item.value === filters.price
-    }),
-    label: item.name
-  }))), /*#__PURE__*/_react.default.createElement(_material.List, {
-    component: "nav",
-    color: "primary"
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    style: {
-      border: '1px solid #dadce0',
-      margin: '16px 16px'
-    }
-  }), /*#__PURE__*/_react.default.createElement(_categoryLinkList.default, null)));
-};
-
-const StyledAside = _styledComponents.default.aside.withConfig({
-  displayName: "aside__StyledAside",
-  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 = {};
-Aside.defaultProps = {};
-var _default = Aside;
-exports.default = _default;

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

@@ -1,78 +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 _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;