@blocklet/list 0.8.25 → 0.8.28

package/src/components/list/empty.js

@@ -1,19 +1,18 @@
-import React from 'react';
 import PropTypes from 'prop-types';
 import Box from '@mui/material/Box';
 import Typography from '@mui/material/Typography';
 
 import { useFilterContext } from '../../contexts/filter';
 
-const NoResults = () => {
+function NoResults() {
   const { t } = useFilterContext();
   return (
     <Typography style={{ textAlign: 'center' }} variant="subtitle2">
       {t('blocklet.noResults')}
     </Typography>
   );
-};
-const NoResultsTips = ({ filterTip, keywordTip }) => {
+}
+function NoResultsTips({ filterTip, keywordTip }) {
   const { t, locale } = useFilterContext();
 
   const getSplit = () => {
@@ -28,7 +27,7 @@ const NoResultsTips = ({ filterTip, keywordTip }) => {
       {keywordTip && <span>{t('blocklet.keywordTip')}</span>}
     </Box>
   );
-};
+}
 NoResultsTips.propTypes = {
   filterTip: PropTypes.bool,
   keywordTip: PropTypes.bool,
@@ -38,7 +37,7 @@ NoResultsTips.defaultProps = {
   filterTip: false,
   keywordTip: false,
 };
-const EmptyTitle = ({ primaryStart, primaryEnd, filter }) => {
+function EmptyTitle({ primaryStart, primaryEnd, filter }) {
   return (
     <Typography variant="subtitle2">
       <span>{primaryStart}</span>
@@ -46,7 +45,7 @@ const EmptyTitle = ({ primaryStart, primaryEnd, filter }) => {
       <span>{primaryEnd} </span>
     </Typography>
   );
-};
+}
 EmptyTitle.propTypes = {
   primaryStart: PropTypes.string.isRequired,
   primaryEnd: PropTypes.string.isRequired,

package/src/components/list/list.js

@@ -1,4 +1,3 @@
-import React from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
 import Empty from '@arcblock/ux/lib/Empty';
@@ -81,13 +80,13 @@ export default function BlockletList({ blocklets, ...rest }) {
   }
 
   return (
-    <Grid container {...rest}>
+    <StyledGrid container {...rest}>
       {blocklets.map((blocklet) => (
-        <StyledGrid item lg={4} md={6} sm={6} xs={12} key={blocklet.did} data-blocklet-did={blocklet.did}>
+        <StyledGridItem item lg={4} md={6} sm={6} xs={12} key={blocklet.did} data-blocklet-did={blocklet.did}>
           {blockletRender({ blocklet, blocklets: blockletList })}
-        </StyledGrid>
+        </StyledGridItem>
       ))}
-    </Grid>
+    </StyledGrid>
   );
 }
 
@@ -98,11 +97,16 @@ BlockletList.propTypes = {
 BlockletList.defaultProps = {};
 
 const StyledGrid = styled(Grid)`
+  &.MuiGrid-root {
+    width: auto;
+    margin: 0 -16px;
+  }
+`;
+
+const StyledGridItem = styled(Grid)`
   @media (max-width: ${(props) => props.theme.breakpoints.values.sm}px) {
     &.MuiGrid-item {
       padding-bottom: 0px;
-      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) {

package/src/components/search.js

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 import SearchIcon from '@mui/icons-material/Search';
 import CloseIcon from '@mui/icons-material/Close';
@@ -8,7 +8,7 @@ import styled from 'styled-components';
 
 import { useFilterContext } from '../contexts/filter';
 
-const Search = ({ placeholder, ...rest }) => {
+function Search({ placeholder, ...rest }) {
   const { filters, handleKeyword } = useFilterContext();
   const [searchStr, setSearchStr] = useState(filters.keyword || '');
 
@@ -51,7 +51,7 @@ const Search = ({ placeholder, ...rest }) => {
       {...rest}
     />
   );
-};
+}
 Search.propTypes = {
   placeholder: PropTypes.string,
 };

package/src/contexts/filter.js

@@ -1,4 +1,4 @@
-import React, { useContext, createContext, useMemo, useEffect } from 'react';
+import { useContext, createContext, useMemo, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import { useRequest } from 'ahooks';
 import orderBy from 'lodash/orderBy';

package/src/index.js

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import SelectBase from './base';
 import { FilterProvider } from './contexts/filter';
 import { propTypes, defaultProps } from './libs/prop-types';