@blocklet/list 0.8.21 → 0.8.24

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/list",
-  "version": "0.8.21",
+  "version": "0.8.24",
   "description": "Common ux components of blocklet",
   "publishConfig": {
     "access": "public"
@@ -37,7 +37,7 @@
     "react": ">=18.1.0"
   },
   "dependencies": {
-    "@arcblock/ux": "^2.1.6",
+    "@arcblock/ux": "^2.1.7",
     "@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": "04b04a68686b6d5136c255128e7f399ab95eb1f3"
+  "gitHead": "0127bb9206c38b378711109469684738205e07a6"
 }

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: '16px' }}>
+        <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,38 @@ const StyledDiv = styled.div`
   .title {
     font-size: 18px;
     font-weight: bold;
+    margin-bottom: ${(props) => props.theme.spacing(1)};
   }
   .list {
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-    margin-left: 8px;
   }
   .item {
-    margin: 16px 0;
+    font-size: 16px;
+    padding: ${(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;
+      font-weight: bold;
+    }
   }
   .select {
     color: ${(props) => props.theme.palette.primary.main};
+    font-weight: bold;
   }
 `;
 
-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: '16px' }}>
+          <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,28 +5,17 @@ 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,
   });
-
   const {
     data: allBlocklets,
     error: fetchBlockletsError,
@@ -53,11 +42,11 @@ function FilterProvider({
     { initialData: [], manual: true }
   );
 
-  const selectedCategory = filters.category;
-
-  const hasDeveloperFilter = !!filters.developer;
+  const finalFilters = { sortBy: 'popularity', sortDirection: 'desc', ...filters };
+  const selectedCategory = finalFilters.category;
+  const hasDeveloperFilter = !!finalFilters.developer;
   const categoryState = useMemo(() => {
-    return !hasDeveloperFilter ? { data: allCategories } : getCategories(allBlocklets, filters.developer);
+    return !hasDeveloperFilter ? { data: allCategories } : getCategories(allBlocklets, finalFilters.developer);
   }, [hasDeveloperFilter, allCategories]);
 
   const blockletList = useMemo(() => {
@@ -71,16 +60,18 @@ function FilterProvider({
       publishAt: sortByPublish,
     };
 
-    let result = allBlocklets || [];
+    let blocklets = allBlocklets || [];
     // 按照付费/免费筛选
-    result = filterBlockletByPrice(result, filters.price);
+    blocklets = filterBlockletByPrice(blocklets, finalFilters.price);
     // 按照分类筛选
-    result = result.filter((item) => (selectedCategory ? item?.category?.name === selectedCategory : true));
+    blocklets = blocklets.filter((item) => (selectedCategory ? item?.category?.name === selectedCategory : true));
     // 按照作者筛选
-    result = result.filter((item) => (filters?.developer ? item.owner.did === filters.developer : true));
-    const lowerSearch = filters?.keyword?.toLocaleLowerCase() || '';
+    blocklets = blocklets.filter((item) =>
+      finalFilters?.developer ? item.owner.did === finalFilters.developer : true
+    );
+    const lowerSearch = finalFilters?.keyword?.toLocaleLowerCase() || '';
     // 按照搜索筛选
-    result = result.filter((item) => {
+    blocklets = blocklets.filter((item) => {
       return (
         (item?.title || item?.name)?.toLocaleLowerCase().includes(lowerSearch) ||
         item.description?.toLocaleLowerCase().includes(lowerSearch) ||
@@ -88,8 +79,8 @@ function FilterProvider({
       );
     });
     // 排序
-    return orderBy(result, [sortMap[filters.sortBy]], [filters.sortDirection]);
-  }, [allBlocklets, filters]);
+    return orderBy(blocklets, [sortMap[finalFilters.sortBy]], [finalFilters.sortDirection]);
+  }, [allBlocklets, finalFilters]);
 
   const categoryList = useMemo(() => {
     const list = categoryState.data || [];
@@ -105,50 +96,53 @@ 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 },
     endpoint,
     blockletList,
     t: translate,
-    filters: { sortBy: 'popularity', sortDirection: 'desc', ...filters },
+    filters: finalFilters,
     selectedCategory,
     categoryList,
     baseUrl,
     blockletRender,
     locale,
-    selectedBlocklets,
-    onSelectBlocklet,
+    categoryOptions,
+    priceOptions,
     handleSort: (sort) => {
       const changeData = {
-        ...filters,
+        ...finalFilters,
         sortBy: sort,
         sortDirection: sort === 'nameAsc' ? 'asc' : 'desc',
       };
       onFilterChange(changeData);
     },
     handleKeyword: (keyWord) => {
-      const changeData = { ...filters, keyword: keyWord || undefined };
+      const changeData = { ...finalFilters, keyword: keyWord || undefined };
       onFilterChange(changeData);
     },
     handlePrice: (price) => {
       const changeData = {
-        ...filters,
-        price: price === filters.price ? undefined : price,
+        ...finalFilters,
+        price: price === finalFilters.price ? undefined : price,
       };
       onFilterChange(changeData);
     },
     handleCategory: (category) => {
-      if (category === 'all') {
-        const changeData = { ...filters, category: undefined };
-        onFilterChange(changeData);
-      } else {
-        const changeData = { ...filters, category: category === filters.category ? undefined : category };
-        onFilterChange(changeData);
+      let finalCategory = category;
+      if (category === 'all' || category === finalFilters.category) {
+        finalCategory = undefined;
       }
+      const changeData = { ...finalFilters, category: finalCategory };
+      onFilterChange(changeData);
     },
     handleDeveloper: (developer) => {
-      const changeData = { ...filters, developer: developer || undefined };
+      const changeData = { ...finalFilters, developer: developer || undefined };
       onFilterChange(changeData);
     },
     getCategoryLocale: (category) => {
@@ -161,7 +155,7 @@ function FilterProvider({
       return result;
     },
     get developerName() {
-      return allBlocklets.find((i) => i.owner.did === filters.developer)?.owner?.name || '';
+      return allBlocklets.find((blocklet) => blocklet.owner.did === finalFilters.developer)?.owner?.name || '';
     },
   };
 

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,
 };