@blocklet/list 0.8.6

package/src/base.js

@@ -0,0 +1,148 @@
+import React from 'react';
+import styled from 'styled-components';
+import Sort from 'mdi-material-ui/Sort';
+import FilterListIcon from '@mui/icons-material/FilterList';
+import { Box, Hidden, SvgIcon } from '@mui/material';
+
+import { useSearchContext } from './contexts/store';
+import CustomSelect from './components/custom-select';
+import FilterAuthor from './components/filter-author';
+import { getSortOptions, getPrices } from './tools/utils';
+import BlockletList from './components/list';
+import Aside from './components/aside';
+import Search from './components/search';
+import { CategorySelect } from './components/categories';
+
+const ListBase = () => {
+  const searchStore = useSearchContext();
+  const { sortParams, history, blockletList, queryParams, developerName, handleSort, t } = searchStore;
+  return (
+    <Box display="flex" alignItems="flex-start" height="100%">
+      <Hidden mdDown>
+        <Aside />
+      </Hidden>
+      <StyledMin>
+        <Box className="marketplace-header" display="flex" alignItems="center">
+          <Hidden mdDown>
+            {!!queryParams.developer && (
+              <FilterAuthor
+                user={developerName}
+                deleteUserTag={() => {
+                  history.push('/');
+                }}
+              />
+            )}
+          </Hidden>
+          <Box mt={0} className="searchContainer">
+            <Hidden mdUp>
+              <StyledSearch className="search" placeholder={t('common.searchStore')} />
+            </Hidden>
+          </Box>
+          <Box mt={0} ml="10px" className="filterContainer">
+            <Hidden mdUp>
+              <CategorySelect />
+            </Hidden>
+            <CustomSelect
+              value={sortParams.sort}
+              options={getSortOptions(t)}
+              title={getSortOptions(t).find((f) => f.value === sortParams.sort)?.name || t('sort.sort')}
+              icon={<SvgIcon component={Sort} />}
+              onChange={(v) => {
+                handleSort(v);
+              }}
+            />
+          </Box>
+        </Box>
+        <Hidden mdUp>
+          <Box
+            display="flex"
+            flexWrap="wrap"
+            alignItems="center"
+            justifyContent={queryParams.developer ? 'space-between' : 'flex-end'}>
+            {!!queryParams.developer && (
+              <FilterAuthor
+                user={developerName}
+                deleteUserTag={() => {
+                  history.push('/');
+                }}
+                style={{ marginBottom: '16px' }}
+              />
+            )}
+            {/* 筛选付费/免费 */}
+            <CustomSelect
+              value={queryParams.price}
+              icon={<FilterListIcon />}
+              options={getPrices(t)}
+              title={getPrices(t).find((f) => f.value === queryParams.price)?.name || t('common.price')}
+              onChange={(v) => {
+                searchStore.handlePriceFilter(v);
+              }}
+              style={{ marginBottom: '16px' }}
+            />
+          </Box>
+        </Hidden>
+        <BlockletList blocklets={blockletList} />
+      </StyledMin>
+    </Box>
+  );
+};
+
+const StyledMin = styled.main`
+  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: ${(props) => props.theme.breakpoints.values.md}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: ${(props) => props.theme.breakpoints.values.md}px) {
+    .sort-button {
+      font-size: 12px;
+    }
+  }
+`;
+
+const StyledSearch = styled(Search)`
+  background-color: ${(props) => props.theme.palette.grey[50]};
+`;
+
+export default ListBase;

package/src/components/aside.js

@@ -0,0 +1,91 @@
+import React from 'react';
+import { Box, List, Checkbox, FormControlLabel } from '@mui/material';
+import styled from 'styled-components';
+
+import { useSearchContext } from '../contexts/store';
+import { getPrices } from '../tools/utils';
+import Search from './search';
+import { CategoryLinkList } from './categories';
+
+const Aside = () => {
+  const searchStore = useSearchContext();
+  const { queryParams, handlePriceFilter, t } = searchStore;
+  return (
+    <StyledAside>
+      <Search placeholder={t('common.searchStore')} />
+      <Box marginTop="24px">
+        {getPrices(t).map((item) => (
+          <FormControlLabel
+            className="payments"
+            key={item.value}
+            control={
+              <Checkbox
+                onClick={() => {
+                  handlePriceFilter(item.value);
+                }}
+                size="small"
+                checked={item.value === queryParams.price}
+              />
+            }
+            label={item.name}
+          />
+        ))}
+      </Box>
+      <List component="nav" color="primary">
+        {/* 分割线 */}
+        <div style={{ border: '1px solid #dadce0', margin: '16px 16px' }} />
+        <CategoryLinkList />
+      </List>
+    </StyledAside>
+  );
+};
+
+const StyledAside = styled.aside`
+  width: 220px;
+  margin-right: 20px;
+  background-color: ${(props) => props.theme.palette.grey[50]};
+  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: ${(props) => props.theme.typography.fontWeightBold};
+    }
+    > :not(.category) {
+      .MuiListItemText-primary {
+        color: #5f6368;
+      }
+    }
+    &.Mui-selected {
+      background-color: ${(props) => props.theme.palette.primary.main}!important;
+      border-radius: 4px;
+      .MuiListItemText-primary {
+        color: #fff !important;
+      }
+    }
+  }
+  @media (max-width: ${(props) => props.theme.breakpoints.values.md}px) {
+    .MuiListItemText-primary {
+      font-size: 16px;
+    }
+  }
+`;
+
+Aside.propTypes = {};
+Aside.defaultProps = {};
+export default Aside;

package/src/components/button.js

@@ -0,0 +1,35 @@
+import React, { forwardRef } from 'react';
+import PropTypes from 'prop-types';
+import { Button as MuiButton, CircularProgress } from '@mui/material';
+import styled from 'styled-components';
+
+const StyledButton = styled(MuiButton)`
+  border-radius: 4px;
+`;
+
+const Button = forwardRef(({ children, rounded, loading, disabled, ...rest }, ref) => {
+  return (
+    <StyledButton
+      ref={ref}
+      disableElevation
+      disabled={disabled || loading}
+      {...rest}
+      startIcon={loading && <CircularProgress size="1em" />}>
+      {children}
+    </StyledButton>
+  );
+});
+
+Button.propTypes = {
+  children: PropTypes.any,
+  rounded: PropTypes.bool,
+  loading: PropTypes.bool,
+  disabled: PropTypes.bool,
+};
+Button.defaultProps = {
+  children: null,
+  rounded: false,
+  loading: false,
+  disabled: false,
+};
+export default Button;

package/src/components/categories.js

@@ -0,0 +1,111 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+import { MenuItem, ListItem, ListItemText } from '@mui/material';
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import qs from 'qs';
+
+import { useSearchContext } from '../contexts/store';
+import CustomSelect from './custom-select';
+
+/**
+ * 小屏幕下的分类选择器
+ * @returns
+ */
+const CategorySelect = () => {
+  const searchStore = useSearchContext();
+  const { categoryList, selectedCategory, handleCategorySelect, t, locale } = searchStore;
+  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={() => handleCategorySelect(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={() => handleCategorySelect('all')}>
+          {t('category.all')}
+        </MenuItem>
+      }
+    />
+  );
+};
+/**
+ * 宽屏幕下的分类列表
+ * @returns
+ */
+const CategoryLinkList = () => {
+  const { t, locale } = useLocaleContext();
+  const searchStore = useSearchContext();
+  const { queryParams, categoryList, isSearchPage, selectedCategory, isPageMode, handleCategorySelect, baseUrl } =
+    searchStore;
+
+  let content = null;
+  if (isPageMode) {
+    content = (
+      <div style={{ marginRight: '16px' }}>
+        <ListItem
+          selected={!selectedCategory}
+          button
+          component={Link}
+          to={!isSearchPage ? baseUrl : `${baseUrl}search?${qs.stringify({ ...queryParams, category: undefined })}`}>
+          <ListItemText primary={t('category.all')} />
+        </ListItem>
+        {categoryList.map((item) => (
+          <ListItem
+            key={item._id}
+            title={item.locales[locale]}
+            button
+            selected={item.name === selectedCategory}
+            component={Link}
+            to={
+              !isSearchPage
+                ? `${baseUrl}category/${item.name}`
+                : `${baseUrl}search?${qs.stringify({ ...queryParams, category: item.name })}`
+            }>
+            <ListItemText primary={item.locales[locale]} />
+          </ListItem>
+        ))}
+      </div>
+    );
+  } else {
+    content = (
+      <div style={{ marginRight: '16px' }}>
+        <ListItem selected={!selectedCategory} button onClick={() => handleCategorySelect('all')}>
+          <ListItemText primary={t('category.all')} />
+        </ListItem>
+        {categoryList.map((item) => (
+          <ListItem
+            key={item._id}
+            title={item.locales[locale]}
+            onClick={() => handleCategorySelect(item.name)}
+            button
+            selected={item.name === selectedCategory}>
+            <ListItemText primary={item.locales[locale]} />
+          </ListItem>
+        ))}
+      </div>
+    );
+  }
+  return (
+    <>
+      <ListItem>
+        <ListItemText className="category" primary={t('common.category')} />
+      </ListItem>
+      {content}
+    </>
+  );
+};
+export { CategorySelect, CategoryLinkList };

package/src/components/custom-select.js

@@ -0,0 +1,207 @@
+/* eslint-disable no-unused-expressions */
+import React, { useEffect, useRef, useState } from 'react';
+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 cloneDeep from 'lodash/cloneDeep';
+import isEmpty from 'lodash/isEmpty';
+import isEqual from 'lodash/isEqual';
+
+import Button from './button';
+
+const CustomSelect = ({
+  title,
+  value,
+  icon,
+  prepend,
+  options,
+  multiple,
+  onClose,
+  onShow,
+  onChange,
+  onInput,
+  itemRender,
+  ...buttonProps
+}) => {
+  const anchorRef = useRef(null);
+  const theme = useTheme();
+  const [open, setOpen] = useState(false);
+  const [currentValue, setCurrentValue] = value !== null ? useState(value) : useState(multiple ? [] : '');
+  const isSm = useMediaQuery(theme.breakpoints.down('sm'));
+
+  useEffect(() => {
+    // eslint-disable-next-line no-nested-ternary
+    setCurrentValue(value !== null ? value : multiple ? [] : '');
+  }, [value]);
+
+  function closeMenu() {
+    isEqual(value, currentValue) || onInput(currentValue);
+    onClose();
+    setOpen(false);
+  }
+  function openMenu() {
+    setOpen(true);
+    onShow();
+  }
+
+  function toggle(option) {
+    if (multiple) {
+      const copyValue = cloneDeep(currentValue);
+      const index = copyValue.indexOf(option.value);
+      if (index >= 0) {
+        copyValue.splice(index, 1);
+      } else {
+        copyValue.push(option.value);
+      }
+      setCurrentValue(copyValue);
+      onChange(copyValue);
+    } else {
+      setCurrentValue(option.value);
+      onChange(option.value);
+      if (isSm) {
+        closeMenu();
+      }
+    }
+  }
+  function containsValue(optionValue) {
+    return multiple ? currentValue.includes(optionValue) : optionValue === currentValue;
+  }
+
+  return (
+    <>
+      <StyledButton
+        ref={anchorRef}
+        onClick={openMenu}
+        variant="outlined"
+        size="small"
+        className={['my-select__selector', isEmpty(currentValue) ? '' : 'my-select__selector--active'].join(' ')}
+        {...buttonProps}>
+        <div className="my-select__icon">{icon}</div>
+        {title}
+        {multiple && currentValue.length > 1 && ` (${currentValue.length})`}
+        <SvgIcon className="my-select__arrowdown" component={ChevronDown} fontSize="small" />
+      </StyledButton>
+      <Popper open={open} anchorEl={anchorRef.current} transition style={{ zIndex: '1' }}>
+        {({ TransitionProps, placement }) => (
+          <Grow
+            {...TransitionProps}
+            style={{ transformOrigin: placement === 'bottom' ? 'center top' : 'center bottom' }}>
+            <Paper>
+              <ClickAwayListener onClickAway={closeMenu}>
+                <StyledMenuList autoFocusItem={open} onMouseEnter={openMenu} onMouseLeave={closeMenu}>
+                  {prepend}
+                  {options.map((option) => {
+                    if (itemRender) {
+                      return itemRender(option);
+                    }
+                    return (
+                      <MenuItem
+                        key={option.value}
+                        onClick={() => toggle(option)}
+                        className={[
+                          'my-select__option',
+                          containsValue(option.value) ? 'my-select__option--active' : '',
+                        ].join(' ')}>
+                        {multiple && (
+                          <SvgIcon
+                            component={Check}
+                            className={[
+                              'my-select__option__icon',
+                              containsValue(option.value) ? 'my-select__option__icon--active' : '',
+                            ].join(' ')}
+                          />
+                        )}
+                        {option.name}
+                      </MenuItem>
+                    );
+                  })}
+                </StyledMenuList>
+              </ClickAwayListener>
+            </Paper>
+          </Grow>
+        )}
+      </Popper>
+    </>
+  );
+};
+
+CustomSelect.propTypes = {
+  options: PropTypes.array.isRequired,
+  multiple: PropTypes.bool,
+  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.array]),
+  onShow: PropTypes.func,
+  onClose: PropTypes.func,
+  onInput: PropTypes.func,
+  onChange: PropTypes.func,
+  itemRender: PropTypes.func,
+  title: PropTypes.string.isRequired,
+  icon: PropTypes.any,
+  prepend: PropTypes.any,
+};
+CustomSelect.defaultProps = {
+  multiple: false,
+  value: null,
+  icon: null,
+  prepend: null,
+  itemRender: null,
+  onShow: () => {},
+  onClose: () => {},
+  onInput: () => {},
+  onChange: () => {},
+};
+
+const StyledButton = styled(Button)`
+  border: 1px solid #f0f0f0;
+  padding: 6px 8px 6px 12px;
+  font-weight: ${(props) => props.theme.typography.fontWeightBold};
+  font-size: 16px;
+  color: #666;
+  line-height: 1;
+  text-transform: none;
+  min-width: 100px;
+  & + & {
+    margin-left: 10px;
+  }
+  &.my-select__selector--active {
+    &,
+    .my-select__arrowdown,
+    .my-select__icon svg {
+      color: ${(props) => props.theme.palette.primary.main};
+    }
+  }
+  .my-select__arrowdown {
+    color: #999;
+    font-size: 16px;
+    margin-left: 6px;
+  }
+  .my-select__icon {
+    font-size: 0;
+    svg {
+      color: #999;
+      font-size: 18px;
+      margin-right: 3px;
+    }
+  }
+`;
+
+const StyledMenuList = styled(MenuList)`
+  .my-select__option__icon {
+    color: transparent;
+    font-size: 16px;
+    margin: 0 3px 0 -5px;
+  }
+  .my-select__option {
+    font-size: 16px;
+    color: #999;
+  }
+  .my-select__option--active {
+    &,
+    .my-select__option__icon {
+      color: ${(props) => props.theme.palette.primary.main};
+    }
+  }
+`;
+
+export default CustomSelect;

package/src/components/empty.js

@@ -0,0 +1,57 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import Box from '@mui/material/Box';
+import Typography from '@mui/material/Typography';
+
+import { useSearchContext } from '../contexts/store';
+
+const NoResults = () => {
+  const searchStore = useSearchContext();
+  const { t } = searchStore;
+  return (
+    <Typography style={{ textAlign: 'center' }} variant="subtitle2">
+      {t('blocklet.noResults')}
+    </Typography>
+  );
+};
+const NoResultsTips = ({ filterTip, keywordTip }) => {
+  const searchStore = useSearchContext();
+  const { t, locale } = searchStore;
+  const getSplit = () => {
+    if (locale === 'zh') return '、';
+    return ' , ';
+  };
+  return (
+    <Box className="tips">
+      <span style={{ marginRight: '16px' }}>{t('blocklet.emptyTip')}</span>
+      {filterTip && <span>{t('blocklet.filterTip')}</span>}
+      {filterTip && keywordTip && getSplit()}
+      {keywordTip && <span>{t('blocklet.keywordTip')}</span>}
+    </Box>
+  );
+};
+NoResultsTips.propTypes = {
+  filterTip: PropTypes.bool,
+  keywordTip: PropTypes.bool,
+};
+
+NoResultsTips.defaultProps = {
+  filterTip: false,
+  keywordTip: false,
+};
+const EmptyTitle = ({ primaryStart, primaryEnd, search }) => {
+  return (
+    <Typography variant="subtitle2">
+      <span>{primaryStart}</span>
+      <span className="primary"> {search} </span>
+      <span>{primaryEnd} </span>
+    </Typography>
+  );
+};
+EmptyTitle.propTypes = {
+  primaryStart: PropTypes.string.isRequired,
+  primaryEnd: PropTypes.string.isRequired,
+  search: PropTypes.string.isRequired,
+};
+
+export { NoResults, EmptyTitle, NoResultsTips };

package/src/components/filter-author.js

@@ -0,0 +1,39 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+import { Chip } from '@mui/material';
+import FaceIcon from '@mui/icons-material/Face';
+
+import { useSearchContext } from '../contexts/store';
+
+const StyleDiv = styled.div`
+  .MuiChip-root {
+    border-radius: 4px;
+    height: initial;
+    text-transform: capitalize;
+  }
+`;
+const FilterAuthor = ({ user, deleteUserTag, ...containerProps }) => {
+  const searchStore = useSearchContext();
+  const { t } = searchStore;
+  if (!user) return null;
+  return (
+    <StyleDiv {...containerProps}>
+      <Chip
+        icon={<FaceIcon />}
+        label={t('blocklet.owner', { name: user })}
+        onDelete={() => {
+          deleteUserTag();
+        }}
+      />
+    </StyleDiv>
+  );
+};
+FilterAuthor.propTypes = {
+  user: PropTypes.string.isRequired,
+  deleteUserTag: PropTypes.func,
+};
+FilterAuthor.defaultProps = {
+  deleteUserTag: () => {},
+};
+export default FilterAuthor;