@blocklet/list 0.8.15 → 0.8.18

package/src/components/aside/index.js

@@ -0,0 +1,3 @@
+import Aside from './aside';
+
+export default Aside;

package/src/components/category-select.js

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

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

@@ -4,7 +4,8 @@ import useTheme from '@mui/styles/useTheme';
 import styled from 'styled-components';
 import PropTypes from 'prop-types';
 import { ClickAwayListener, Grow, MenuItem, MenuList, Paper, Popper, SvgIcon, useMediaQuery } from '@mui/material';
-import { Check, ChevronDown } from 'mdi-material-ui';
+import CheckIcon from '@mui/icons-material/Check';
+import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
 import cloneDeep from 'lodash/cloneDeep';
 import isEmpty from 'lodash/isEmpty';
 import isEqual from 'lodash/isEqual';
@@ -81,9 +82,9 @@ const CustomSelect = ({
         <div className="my-select__icon">{icon}</div>
         {title}
         {multiple && currentValue.length > 1 && ` (${currentValue.length})`}
-        <SvgIcon className="my-select__arrowdown" component={ChevronDown} fontSize="small" />
+        <SvgIcon className="my-select__arrowdown" component={KeyboardArrowDownIcon} fontSize="small" />
       </StyledButton>
-      <Popper open={open} anchorEl={anchorRef.current} transition style={{ zIndex: '1' }}>
+      <Popper open={open} anchorEl={anchorRef.current} transition style={{ zIndex: '9999' }}>
         {({ TransitionProps, placement }) => (
           <Grow
             {...TransitionProps}
@@ -106,7 +107,7 @@ const CustomSelect = ({
                         ].join(' ')}>
                         {multiple && (
                           <SvgIcon
-                            component={Check}
+                            component={CheckIcon}
                             className={[
                               'my-select__option__icon',
                               containsValue(option.value) ? 'my-select__option__icon--active' : '',

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

@@ -0,0 +1,3 @@
+import CustomSelect from './custom-select';
+
+export default CustomSelect;

package/src/components/filter-author.js

@@ -4,7 +4,7 @@ import styled from 'styled-components';
 import { Chip } from '@mui/material';
 import FaceIcon from '@mui/icons-material/Face';
 
-import { useSearchContext } from '../contexts/store';
+import { useFilterContext } from '../contexts/filter';
 
 const StyleDiv = styled.div`
   .MuiChip-root {
@@ -14,8 +14,7 @@ const StyleDiv = styled.div`
   }
 `;
 const FilterAuthor = ({ user, deleteUserTag, ...containerProps }) => {
-  const searchStore = useSearchContext();
-  const { t } = searchStore;
+  const { t } = useFilterContext();
   if (!user) return null;
   return (
     <StyleDiv {...containerProps}>

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

@@ -3,11 +3,10 @@ import PropTypes from 'prop-types';
 import Box from '@mui/material/Box';
 import Typography from '@mui/material/Typography';
 
-import { useSearchContext } from '../contexts/store';
+import { useFilterContext } from '../../contexts/filter';
 
 const NoResults = () => {
-  const searchStore = useSearchContext();
-  const { t } = searchStore;
+  const { t } = useFilterContext();
   return (
     <Typography style={{ textAlign: 'center' }} variant="subtitle2">
       {t('blocklet.noResults')}
@@ -15,8 +14,8 @@ const NoResults = () => {
   );
 };
 const NoResultsTips = ({ filterTip, keywordTip }) => {
-  const searchStore = useSearchContext();
-  const { t, locale } = searchStore;
+  const { t, locale } = useFilterContext();
+
   const getSplit = () => {
     if (locale === 'zh') return '、';
     return ' , ';
@@ -39,11 +38,11 @@ NoResultsTips.defaultProps = {
   filterTip: false,
   keywordTip: false,
 };
-const EmptyTitle = ({ primaryStart, primaryEnd, search }) => {
+const EmptyTitle = ({ primaryStart, primaryEnd, filter }) => {
   return (
     <Typography variant="subtitle2">
       <span>{primaryStart}</span>
-      <span className="primary"> {search} </span>
+      <span className="primary"> {filter} </span>
       <span>{primaryEnd} </span>
     </Typography>
   );
@@ -51,7 +50,7 @@ const EmptyTitle = ({ primaryStart, primaryEnd, search }) => {
 EmptyTitle.propTypes = {
   primaryStart: PropTypes.string.isRequired,
   primaryEnd: PropTypes.string.isRequired,
-  search: PropTypes.string.isRequired,
+  filter: PropTypes.string.isRequired,
 };
 
 export { NoResults, EmptyTitle, NoResultsTips };

package/src/components/list/index.js

@@ -0,0 +1,3 @@
+import BlockletList from './list';
+
+export default BlockletList;

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

@@ -8,14 +8,14 @@ import Grid from '@mui/material/Grid';
 import CircularProgress from '@mui/material/CircularProgress';
 
 import { NoResults, EmptyTitle, NoResultsTips } from './empty';
-import { useSearchContext } from '../contexts/store';
-import { formatError } from '../tools/utils';
+import { useFilterContext } from '../../contexts/filter';
+import { formatError } from '../../libs/utils';
 
 export default function BlockletList({ blocklets, ...rest }) {
-  const { blockletRender, errors, loadings, selectedCategory, blockletList, getCategoryLocale, queryParams, t } =
-    useSearchContext();
+  const { blockletRender, errors, loadings, selectedCategory, blockletList, getCategoryLocale, filters, t } =
+    useFilterContext();
 
-  const showFilterTip = !!selectedCategory || !!queryParams.get('price');
+  const showFilterTip = !!selectedCategory || !!filters.price;
 
   if (errors.fetchBlockletsError) {
     return (
@@ -31,25 +31,25 @@ export default function BlockletList({ blocklets, ...rest }) {
       </Box>
     );
   }
-  if (queryParams.get('search') && showFilterTip && blockletList.length === 0) {
+  if (filters.keyword && showFilterTip && blockletList.length === 0) {
     return (
       <CustomEmpty>
         <EmptyTitle
           primaryStart={t('blocklet.noBlockletPart1')}
           primaryEnd={t('blocklet.noBlockletPart2')}
-          search={queryParams.get('search')}
+          filter={filters.keyword}
         />
         <NoResultsTips keywordTip filterTip />
       </CustomEmpty>
     );
   }
-  if (queryParams.get('search') && blockletList.length === 0) {
+  if (filters.keyword && blockletList.length === 0) {
     return (
       <CustomEmpty>
         <EmptyTitle
           primaryStart={t('blocklet.noBlockletPart1')}
           primaryEnd={t('blocklet.noBlockletPart2')}
-          search={queryParams.get('search')}
+          filter={filters.keyword}
         />
         <NoResultsTips keywordTip />
       </CustomEmpty>
@@ -63,7 +63,7 @@ export default function BlockletList({ blocklets, ...rest }) {
           <EmptyTitle
             primaryStart={t('blocklet.noCategoryResults1')}
             primaryEnd={t('blocklet.noCategoryResults2')}
-            search={categoryLocale}
+            filter={categoryLocale}
           />
         ) : (
           <NoResults />

package/src/components/search.js

@@ -1,27 +1,31 @@
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
-import { Magnify, Close } from 'mdi-material-ui';
+import SearchIcon from '@mui/icons-material/Search';
+import CloseIcon from '@mui/icons-material/Close';
 import { OutlinedInput, InputAdornment } from '@mui/material';
 import { useDebounceFn } from 'ahooks';
 import styled from 'styled-components';
 
-import { useSearchContext } from '../contexts/store';
+import { useFilterContext } from '../contexts/filter';
 
 const Search = ({ placeholder, ...rest }) => {
-  const searchStore = useSearchContext();
-  const { queryParams, handleSearchKeyword } = searchStore;
-  const [searchStr, setSearchStr] = useState(queryParams.get('search') || '');
+  const { filters, handleKeyword } = useFilterContext();
+  const [searchStr, setSearchStr] = useState(filters.keyword || '');
 
-  const { run: handleSearch } = useDebounceFn(handleSearchKeyword, { wait: 300 });
+  const debouncedSearch = useDebounceFn(handleKeyword, { wait: 300 });
   const handleChange = (event) => {
     const { value } = event.target;
     setSearchStr(value);
-    handleSearch(value);
+    debouncedSearch.run(value);
   };
   const handleClose = () => {
     setSearchStr('');
-    handleSearchKeyword();
+    handleKeyword();
   };
+  useEffect(() => {
+    setSearchStr(filters.keyword || '');
+  }, [filters.keyword]);
+
   return (
     <StyledSearch
       inputProps={{
@@ -29,7 +33,7 @@ const Search = ({ placeholder, ...rest }) => {
       }}
       startAdornment={
         <InputAdornment position="start">
-          <StyledMagnify />
+          <StyledSearchIcon />
         </InputAdornment>
       }
       onChange={handleChange}
@@ -40,7 +44,7 @@ const Search = ({ placeholder, ...rest }) => {
       endAdornment={
         searchStr && (
           <InputAdornment position="end">
-            <StyledClose data-cy="search-delete" onClick={handleClose} />
+            <StyledCloseIcon data-cy="search-delete" onClick={handleClose} />
           </InputAdornment>
         )
       }
@@ -80,7 +84,7 @@ const StyledSearch = styled(OutlinedInput)`
   }
 `;
 
-const StyledMagnify = styled(Magnify)`
+const StyledSearchIcon = styled(SearchIcon)`
   color: ${(props) => props.theme.palette.grey[500]};
   font-size: 28px;
   @media (max-width: ${(props) => props.theme.breakpoints.values.md}px) {
@@ -88,7 +92,7 @@ const StyledMagnify = styled(Magnify)`
   }
 `;
 
-const StyledClose = styled(Close)`
+const StyledCloseIcon = styled(CloseIcon)`
   color: ${(props) => props.theme.palette.grey[500]};
   font-size: 16px;
   cursor: pointer;

package/src/contexts/filter.js

@@ -0,0 +1,197 @@
+import React, { useContext, createContext, useMemo, useEffect } from 'react';
+import PropTypes from 'prop-types';
+import { useRequest } from 'ahooks';
+import orderBy from 'lodash/orderBy';
+import axios from 'axios';
+// import joinUrl from 'url-join';
+
+import { getCategories, filterBlockletByPrice, replaceTranslate } 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,
+}) {
+  const storeApi = axios.create({
+    baseURL: endpoint,
+  });
+
+  const {
+    data: allBlocklets,
+    error: fetchBlockletsError,
+    loading: fetchBlockletsLoading,
+    run: fetchBlocklets,
+  } = useRequest(
+    async () => {
+      const { data: list } = await storeApi.get('/api/blocklets.json');
+      return list;
+    },
+    { initialData: [], manual: true }
+  );
+
+  const {
+    data: allCategories,
+    error: fetchCategoriesError,
+    loading: fetchCategoriesLoading,
+    run: fetchCategories,
+  } = useRequest(
+    async () => {
+      const { data: list } = await storeApi.get('/api/blocklets/categories');
+      return list;
+    },
+    { initialData: [], manual: true }
+  );
+
+  const selectedCategory = filters.category;
+
+  const hasDeveloperFilter = !!filters.developer;
+  const categoryState = useMemo(() => {
+    return !hasDeveloperFilter ? { data: allCategories } : getCategories(allBlocklets, filters.developer);
+  }, [hasDeveloperFilter, allCategories]);
+
+  const blockletList = useMemo(() => {
+    const sortByName = (x) => x?.title?.toLocaleLowerCase() || x?.name?.toLocaleLowerCase(); // 按名称排序
+    const sortByPopularity = (x) => x.stats.downloads; // 按下载量排序
+    const sortByPublish = (x) => x.lastPublishedAt; // 按发布时间
+    const sortMap = {
+      nameAsc: sortByName,
+      nameDesc: sortByName,
+      popularity: sortByPopularity,
+      publishAt: sortByPublish,
+    };
+
+    let result = allBlocklets || [];
+    // 按照付费/免费筛选
+    result = filterBlockletByPrice(result, filters.price);
+    // 按照分类筛选
+    result = result.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() || '';
+    // 按照搜索筛选
+    result = result.filter((item) => {
+      return (
+        (item?.title || item?.name)?.toLocaleLowerCase().includes(lowerSearch) ||
+        item.description?.toLocaleLowerCase().includes(lowerSearch) ||
+        item?.version?.toLocaleLowerCase().includes(lowerSearch)
+      );
+    });
+    // 排序
+    return orderBy(result, [sortMap[filters.sortBy]], [filters.sortDirection]);
+  }, [allBlocklets, filters]);
+
+  const categoryList = useMemo(() => {
+    const list = categoryState.data || [];
+    // 分类按照名称排序
+    return orderBy(list, [(i) => i.name], ['asc']);
+  }, [categoryState.data]);
+
+  const translate = (key, data) => {
+    if (!translations[locale] || !translations[locale][key]) {
+      console.warn(`Warning: no ${key} translation of ${locale}`);
+      return key;
+    }
+
+    return replaceTranslate(translations[locale][key], data);
+  };
+  const filterStore = {
+    errors: { fetchBlockletsError, fetchCategoriesError },
+    loadings: { fetchBlockletsLoading, fetchCategoriesLoading },
+    endpoint,
+    blockletList,
+    t: translate,
+    filters: { sortBy: 'popularity', sortDirection: 'desc', ...filters },
+    selectedCategory,
+    categoryList,
+    baseUrl,
+    blockletRender,
+    locale,
+    selectedBlocklets,
+    onSelectBlocklet,
+    handleSort: (sort) => {
+      const changeData = {
+        ...filters,
+        sortBy: sort,
+        sortDirection: sort === 'nameAsc' ? 'asc' : 'desc',
+      };
+      onFilterChange(changeData);
+    },
+    handleKeyword: (keyWord) => {
+      const changeData = { ...filters, keyword: keyWord || undefined };
+      onFilterChange(changeData);
+    },
+    handlePrice: (price) => {
+      const changeData = {
+        ...filters,
+        price: price === filters.price ? undefined : price,
+      };
+      onFilterChange(changeData);
+    },
+    handleCategory: (category) => {
+      if (category === 'all') {
+        const changeData = { ...filters, category: undefined };
+        onFilterChange(changeData);
+      } else {
+        const changeData = { ...filters, category };
+        onFilterChange(changeData);
+      }
+    },
+    handleDeveloper: (developer) => {
+      const changeData = { ...filters, developer: developer || undefined };
+      onFilterChange(changeData);
+    },
+    getCategoryLocale: (category) => {
+      if (!category) return null;
+      let result = null;
+      const find = categoryState.data.find((item) => item.name === category);
+      if (find) {
+        result = find.locales[locale];
+      }
+      return result;
+    },
+    get developerName() {
+      return allBlocklets.find((i) => i.owner.did === filters.developer)?.owner?.name || '';
+    },
+  };
+
+  useEffect(() => {
+    if (!hasDeveloperFilter) {
+      fetchCategories();
+    }
+  }, [hasDeveloperFilter]);
+
+  useEffect(() => {
+    fetchBlocklets();
+    fetchCategories();
+  }, [endpoint]);
+
+  return <Provider value={filterStore}>{children}</Provider>;
+}
+
+FilterProvider.propTypes = {
+  ...propTypes,
+  children: PropTypes.any.isRequired,
+};
+
+FilterProvider.defaultProps = defaultProps;
+
+function useFilterContext() {
+  const filterStore = useContext(Filter);
+  if (!filterStore) {
+    return {};
+  }
+  return filterStore;
+}
+
+export { FilterProvider, Consumer as FilterConsumer, useFilterContext };

package/src/index.js

@@ -1,27 +1,17 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 
 import SelectBase from './base';
-import { SearchProvider } from './contexts/store';
+import { FilterProvider } from './contexts/filter';
+import { propTypes, defaultProps } from './libs/prop-types';
 
 export default function BlockletList(props) {
   return (
-    <SearchProvider {...props}>
+    <FilterProvider {...props}>
       <SelectBase />
-    </SearchProvider>
+    </FilterProvider>
   );
 }
 
-BlockletList.propTypes = {
-  baseUrl: PropTypes.string,
-  endpoint: PropTypes.string.isRequired,
-  // 组件的类型： page 单独作为页面使用 持久化数据将存储在 url 和 localstorage，select 作为选择器组件使用 数据在存储在内存中
-  type: PropTypes.oneOf(['select', 'page']).isRequired,
-  locale: PropTypes.oneOf(['zh', 'en']),
-  blockletRender: PropTypes.func.isRequired,
-};
+BlockletList.propTypes = propTypes;
 
-BlockletList.defaultProps = {
-  baseUrl: null,
-  locale: 'zh',
-};
+BlockletList.defaultProps = defaultProps;

package/src/libs/prop-types.js

@@ -0,0 +1,26 @@
+import PropTypes from 'prop-types';
+
+const propTypes = {
+  filters: PropTypes.shape({
+    keyword: PropTypes.string,
+    sortBy: PropTypes.string,
+    sortDirection: PropTypes.string,
+    price: PropTypes.string,
+    category: PropTypes.string,
+    developer: PropTypes.string,
+  }),
+  endpoint: PropTypes.string.isRequired,
+  blockletRender: PropTypes.func.isRequired,
+  onFilterChange: PropTypes.func,
+  baseUrl: PropTypes.string,
+  locale: PropTypes.oneOf(['zh', 'en']),
+};
+
+const defaultProps = {
+  baseUrl: null,
+  locale: 'zh',
+  filters: {},
+  onFilterChange: () => {},
+};
+
+export { propTypes, defaultProps };

package/src/{tools → libs}/utils.js

@@ -1,5 +1,5 @@
 import joinURL from 'url-join';
-import cloneDeep from 'lodash-es/cloneDeep';
+import cloneDeep from 'lodash/cloneDeep';
 
 const isFreeBlocklet = (meta) => {
   if (!meta.payment) {
@@ -87,13 +87,13 @@ const replaceTranslate = (template, data) =>
   template.replace(/{(\w*)}/g, (m, key) => (data.hasOwnProperty(key) ? data[key] : ''));
 
 const removeUndefined = (obj) => {
-  const innerObj = cloneDeep(obj);
-  Object.keys(innerObj).forEach((key) => {
-    if (innerObj[key] === undefined) {
-      delete innerObj[key];
+  const clone = cloneDeep(obj);
+  Object.keys(clone).forEach((key) => {
+    if (clone[key] === undefined) {
+      delete clone[key];
     }
   });
-  return innerObj;
+  return clone;
 };
 
 const urlStringify = (obj) => {