@blocklet/list 0.8.21 → 0.8.22

package/src/base.js

@@ -2,50 +2,53 @@ import React from 'react';
 import styled from 'styled-components';
 import SortIcon from '@mui/icons-material/Sort';
 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 { 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 FilterOnMobile from './components/filter-mobile';
 
 const ListBase = () => {
-  const { handleDeveloper, blockletList, filters, developerName, handleSort, t } = 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>
               {/* 小屏幕下类别 */}
-              <FilterOnMobile />
+              <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);
@@ -53,19 +56,27 @@ const ListBase = () => {
             />
           </Box>
         </Box>
-        <Hidden mdUp>
-          <Box display="flex" flexWrap="wrap" alignItems="center">
-            {!!filters.developer && (
-              <FilterAuthor
-                user={developerName}
-                deleteUserTag={() => {
-                  handleDeveloper(null);
-                }}
-                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>
@@ -76,45 +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;
   }
-  /* 小于960px */
-  @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: flex-start;
     }
-    .search {
-      margin-bottom: 20px;
-      width: 100%;
-    }
-    .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-mobile/content.js → filter/group.js}

@@ -2,19 +2,21 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
 
-function Content({ options, onChange, title, value }) {
+function FilterGroup({ options, onChange, title, value }) {
   return (
     <StyledDiv>
       <div className="title">{title}</div>
       <div className="list">
         {options.map((item) => {
           return (
-            <span
+            <div
+              title={item.name}
               key={item.value}
+              data-cy="filter"
               className={value === item.value ? 'select item' : 'item'}
               onClick={() => onChange(item.value)}>
               {item.name}
-            </span>
+            </div>
           );
         })}
       </div>
@@ -26,29 +28,37 @@ const StyledDiv = styled.div`
   .title {
     font-size: 18px;
     font-weight: bold;
+    margin-bottom: ${(props) => props.theme.spacing(2)};
   }
   .list {
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-    margin-left: 8px;
   }
   .item {
-    margin: 16px 0;
+    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};
   }
 `;
 
-Content.propTypes = {
+FilterGroup.propTypes = {
   title: PropTypes.string.isRequired,
   options: PropTypes.array.isRequired,
   onChange: PropTypes.func.isRequired,
   value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
 };
-Content.defaultProps = {
+FilterGroup.defaultProps = {
   value: null,
 };
-export default Content;
+export default FilterGroup;

package/src/components/{filter-mobile/index.js → filter/icon.js}

@@ -1,20 +1,26 @@
 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';
+import FilterGroup from './group';
 
-function MobileFilter() {
-  const { selectedCategory, handleCategory, t, handlePrice, filters, categoryList, locale } = useFilterContext();
+function FilterIcon() {
+  const { selectedCategory, handleCategory, t, handlePrice, filters, categoryOptions, priceOptions } =
+    useFilterContext();
   const [open, setOpen] = useState(false);
 
-  const categoriesOption = getCategoriesOption(categoryList, locale);
-  const prices = getPrices(t);
+  const handelChange = (type, value) => {
+    if (type === 'category') {
+      handleCategory(value);
+    }
+    if (type === 'price') {
+      handlePrice(value);
+    }
+    setOpen(false);
+  };
 
   return (
     <StyledDiv>
@@ -22,13 +28,24 @@ function MobileFilter() {
         <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}
+        <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>
   );
@@ -47,6 +64,6 @@ const StyledDiv = styled.div`
   }
 `;
 
-MobileFilter.propTypes = {};
-MobileFilter.defaultProps = {};
-export default MobileFilter;
+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

@@ -105,6 +105,11 @@ const StyledGrid = styled(Grid)`
       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)};
+    }
+  }
 `;
 const CustomEmpty = styled(Empty)`
   text-align: center;

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,

package/src/libs/utils.js

@@ -35,7 +35,7 @@ const getPrices = (t) => {
     { name: t('blocklet.payment'), value: 'payment' },
   ];
 };
-const getCategoriesOption = (list = [], locale = 'en') => {
+const getCategoryOptions = (list = [], locale = 'en') => {
   return list.map((item) => ({ name: item.locales[locale], value: item.name }));
 };
 /**
@@ -117,5 +117,5 @@ export {
   formatError,
   removeUndefined,
   urlStringify,
-  getCategoriesOption,
+  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;

package/lib/components/aside/index.js

@@ -1,13 +0,0 @@
-"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;