@blocklet/list 0.8.34 → 0.8.35

package/lib/base.js

@@ -40,7 +40,7 @@ function ListBase() {
 
   const {
     handleDeveloper,
-    blockletList,
+    finalBlockletList,
     filters,
     developerName,
     handleSort,
@@ -111,7 +111,7 @@ function ListBase() {
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactErrorBoundary.ErrorBoundary, {
         FallbackComponent: _ErrorBoundary.ErrorFallback,
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_list.default, {
-          blocklets: blockletList
+          blocklets: finalBlockletList
         })
       })]
     })]

package/lib/components/list/index.js

@@ -5,6 +5,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = BlockletList;
 
+var _react = require("react");
+
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
@@ -17,6 +19,8 @@ var _Grid = _interopRequireDefault(require("@mui/material/Grid"));
 
 var _CircularProgress = _interopRequireDefault(require("@mui/material/CircularProgress"));
 
+var _reactInfiniteScrollHook = _interopRequireDefault(require("react-infinite-scroll-hook"));
+
 var _ErrorBoundary = require("@arcblock/ux/lib/ErrorBoundary");
 
 var _empty = require("./empty");
@@ -50,13 +54,21 @@ function BlockletList(_ref) {
     errors,
     loadings,
     selectedCategory,
-    blockletList,
+    finalBlockletList,
     getCategoryLocale,
     filters,
     t,
+    hasNextPage,
+    loadMore,
     endpoint
   } = (0, _filter.useFilterContext)();
   const showFilterTip = !!selectedCategory || !!filters.price;
+  const [sentryRef] = (0, _reactInfiniteScrollHook.default)({
+    loading: loadings.fetchBlockletsLoading,
+    hasNextPage,
+    onLoadMore: loadMore,
+    rootMargin: '0px 0px 400px 0px'
+  });
 
   if (errors.fetchBlockletsError) {
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ErrorBoundary.ErrorFallback, {
@@ -73,7 +85,7 @@ function BlockletList(_ref) {
     });
   }
 
-  if (filters.keyword && showFilterTip && blockletList.length === 0) {
+  if (filters.keyword && showFilterTip && finalBlockletList.length === 0) {
     return /*#__PURE__*/(0, _jsxRuntime.jsxs)(CustomEmpty, {
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_empty.EmptyTitle, {
         primaryStart: t('blocklet.noBlockletPart1'),
@@ -86,7 +98,7 @@ function BlockletList(_ref) {
     });
   }
 
-  if (filters.keyword && blockletList.length === 0) {
+  if (filters.keyword && finalBlockletList.length === 0) {
     return /*#__PURE__*/(0, _jsxRuntime.jsxs)(CustomEmpty, {
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_empty.EmptyTitle, {
         primaryStart: t('blocklet.noBlockletPart1'),
@@ -98,7 +110,7 @@ function BlockletList(_ref) {
     });
   }
 
-  if (showFilterTip && blockletList.length === 0) {
+  if (showFilterTip && finalBlockletList.length === 0) {
     const categoryLocale = getCategoryLocale(selectedCategory);
     return /*#__PURE__*/(0, _jsxRuntime.jsxs)(CustomEmpty, {
       children: [categoryLocale ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_empty.EmptyTitle, {
@@ -111,16 +123,16 @@ function BlockletList(_ref) {
     });
   }
 
-  if (blockletList.length === 0) {
+  if (finalBlockletList.length === 0) {
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(CustomEmpty, {
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_empty.NoResults, {})
     });
   }
 
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledGrid, _objectSpread(_objectSpread({
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(StyledGrid, _objectSpread(_objectSpread({
     container: true
   }, rest), {}, {
-    children: blocklets.map(blocklet => /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledGridItem, {
+    children: [blocklets.map(blocklet => /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledGridItem, {
       item: true,
       lg: 4,
       md: 6,
@@ -129,9 +141,20 @@ function BlockletList(_ref) {
       "data-blocklet-did": blocklet.did,
       children: blockletRender({
         blocklet,
-        blocklets: blockletList
+        blocklets: finalBlockletList
+      })
+    }, blocklet.did)), hasNextPage && /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledGridItem, {
+      item: true,
+      md: 12,
+      sm: 12,
+      xs: 12,
+      ref: sentryRef,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
+        display: "flex",
+        justifyContent: "center",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_CircularProgress.default, {})
       })
-    }, blocklet.did))
+    })]
   }));
 }
 
@@ -143,10 +166,10 @@ const StyledGrid = (0, _styledComponents.default)(_Grid.default).withConfig({
   displayName: "list__StyledGrid",
   componentId: "sc-1guvpon-0"
 })(["&.MuiGrid-root{width:auto;margin:0 -16px;}"]);
-const StyledGridItem = (0, _styledComponents.default)(_Grid.default).withConfig({
+const StyledGridItem = /*#__PURE__*/(0, _react.memo)((0, _styledComponents.default)(_Grid.default).withConfig({
   displayName: "list__StyledGridItem",
   componentId: "sc-1guvpon-1"
-})(["@media (max-width:", "px){&.MuiGrid-item{padding-bottom:0px;}}@media (min-width:", "px){&.MuiGrid-item{margin-bottom:", ";}}"], props => props.theme.breakpoints.values.sm, props => props.theme.breakpoints.values.sm, props => props.theme.spacing(2));
+})(["@media (max-width:", "px){&.MuiGrid-item{padding-bottom:0px;}}@media (min-width:", "px){&.MuiGrid-item{margin-bottom:", ";}}"], props => props.theme.breakpoints.values.sm, props => props.theme.breakpoints.values.sm, props => props.theme.spacing(2)));
 const CustomEmpty = (0, _styledComponents.default)(_Empty.default).withConfig({
   displayName: "list__CustomEmpty",
   componentId: "sc-1guvpon-2"

package/lib/contexts/filter.js

@@ -95,6 +95,11 @@ function FilterProvider(_ref) {
     initialData: [],
     manual: true
   });
+  const paginateState = (0, _ahooks.useReactive)({
+    currentPage: 1,
+    pageSize: (0, _utils.isMobileScreen)() ? 10 : 18,
+    defaultCurrentPage: 1
+  });
 
   const finalFilters = _objectSpread({
     sortBy: 'popularity',
@@ -153,6 +158,10 @@ function FilterProvider(_ref) {
 
     return (0, _orderBy.default)(blocklets, [sortMap[finalFilters.sortBy]], [finalFilters.sortDirection]);
   }, [allBlocklets, finalFilters]);
+  const finalBlockletList = (0, _react.useMemo)(() => {
+    // 前端分页 currentPage 当前页数  pageSize 每页条数
+    return blockletList.slice((paginateState.defaultCurrentPage - 1) * paginateState.pageSize, paginateState.currentPage * paginateState.pageSize);
+  }, [blockletList, paginateState]);
   const categoryList = (0, _react.useMemo)(() => {
     const list = categoryState.data || []; // 分类按照名称排序
 
@@ -180,7 +189,7 @@ function FilterProvider(_ref) {
       fetchCategoriesLoading
     },
     endpoint,
-    blockletList,
+    finalBlockletList,
     t: translate,
     filters: finalFilters,
     selectedCategory,
@@ -189,6 +198,7 @@ function FilterProvider(_ref) {
     locale,
     categoryOptions,
     priceOptions,
+    hasNextPage: blockletList.length >= paginateState.pageSize * paginateState.currentPage,
     handleSort: sort => {
       const changeData = _objectSpread(_objectSpread({}, finalFilters), {}, {
         sortBy: sort,
@@ -231,6 +241,18 @@ function FilterProvider(_ref) {
 
       onFilterChange(changeData);
     },
+    handlePage: page => {
+      const changeData = _objectSpread(_objectSpread({}, finalFilters), {}, {
+        currentPage: page
+      });
+
+      onFilterChange(changeData);
+    },
+    loadMore: () => {
+      setTimeout(() => {
+        paginateState.currentPage += 1;
+      }, 1000);
+    },
     getCategoryLocale: category => {
       if (!category) return null;
       let result = null;
@@ -243,6 +265,10 @@ function FilterProvider(_ref) {
       return result;
     },
 
+    get allBlocklets() {
+      return allBlocklets || [];
+    },
+
     get developerName() {
       var _blocklets$find, _blocklets$find$owner;
 

package/lib/libs/utils.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.urlStringify = exports.replaceTranslate = exports.removeUndefined = exports.getStoreDetail = exports.getSortOptions = exports.getPrices = exports.getCategoryOptions = exports.getCategories = exports.formatLogoPath = exports.formatError = exports.filterBlockletByPrice = void 0;
+exports.urlStringify = exports.replaceTranslate = exports.removeUndefined = exports.isMobileScreen = exports.getStoreDetail = exports.getSortOptions = exports.getPrices = exports.getCategoryOptions = exports.getCategories = exports.formatLogoPath = exports.formatError = exports.filterBlockletByPrice = void 0;
 
 var _urlJoin = _interopRequireDefault(require("url-join"));
 
@@ -159,4 +159,10 @@ const urlStringify = obj => {
   return new URLSearchParams(removeUndefined(obj)).toString();
 };
 
-exports.urlStringify = urlStringify;
+exports.urlStringify = urlStringify;
+
+const isMobileScreen = () => {
+  return window.innerWidth <= 600;
+};
+
+exports.isMobileScreen = isMobileScreen;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/list",
-  "version": "0.8.34",
+  "version": "0.8.35",
   "description": "Common ux components of blocklet",
   "publishConfig": {
     "access": "public"
@@ -38,7 +38,7 @@
     "react": ">=18.1.0"
   },
   "dependencies": {
-    "@arcblock/ux": "^2.1.19",
+    "@arcblock/ux": "^2.1.21",
     "@emotion/react": "^11.9.0",
     "@emotion/styled": "^11.8.1",
     "@mui/icons-material": "^5.6.2",
@@ -48,6 +48,7 @@
     "lodash": "^4.17.21",
     "prop-types": "^15.7.2",
     "react-error-boundary": "^3.1.4",
+    "react-infinite-scroll-hook": "^4.0.3",
     "styled-components": "5.3.5",
     "url-join": "^4.0.1"
   },
@@ -63,5 +64,5 @@
     "eslint": "^8.16.0",
     "prettier": "^2.6.2"
   },
-  "gitHead": "fed8918e15b5bd8cb3f4bac84b32434b58dda21b"
+  "gitHead": "f6a52e3c84e6eb4cd5625f688a55d7da1b477740"
 }

package/src/base.js

@@ -16,7 +16,7 @@ import Search from './components/search';
 function ListBase() {
   const {
     handleDeveloper,
-    blockletList,
+    finalBlockletList,
     filters,
     developerName,
     handleSort,
@@ -79,7 +79,7 @@ function ListBase() {
           />
         </Box>
         <ErrorBoundary FallbackComponent={ErrorFallback}>
-          <BlockletList blocklets={blockletList} />
+          <BlockletList blocklets={finalBlockletList} />
         </ErrorBoundary>
       </StyledMin>
     </Box>

package/src/components/list/index.js

@@ -1,20 +1,40 @@
+import { memo } from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
 import Empty from '@arcblock/ux/lib/Empty';
 import Box from '@mui/material/Box';
 import Grid from '@mui/material/Grid';
 import CircularProgress from '@mui/material/CircularProgress';
+import useInfiniteScroll from 'react-infinite-scroll-hook';
 import { ErrorFallback } from '@arcblock/ux/lib/ErrorBoundary';
 
 import { NoResults, EmptyTitle, NoResultsTips } from './empty';
 import { useFilterContext } from '../../contexts/filter';
 
 export default function BlockletList({ blocklets, ...rest }) {
-  const { blockletRender, errors, loadings, selectedCategory, blockletList, getCategoryLocale, filters, t, endpoint } =
-    useFilterContext();
+  const {
+    blockletRender,
+    errors,
+    loadings,
+    selectedCategory,
+    finalBlockletList,
+    getCategoryLocale,
+    filters,
+    t,
+    hasNextPage,
+    loadMore,
+    endpoint,
+  } = useFilterContext();
 
   const showFilterTip = !!selectedCategory || !!filters.price;
 
+  const [sentryRef] = useInfiniteScroll({
+    loading: loadings.fetchBlockletsLoading,
+    hasNextPage,
+    onLoadMore: loadMore,
+    rootMargin: '0px 0px 400px 0px',
+  });
+
   if (errors.fetchBlockletsError) {
     return (
       <ErrorFallback
@@ -29,7 +49,7 @@ export default function BlockletList({ blocklets, ...rest }) {
       </Box>
     );
   }
-  if (filters.keyword && showFilterTip && blockletList.length === 0) {
+  if (filters.keyword && showFilterTip && finalBlockletList.length === 0) {
     return (
       <CustomEmpty>
         <EmptyTitle
@@ -41,7 +61,7 @@ export default function BlockletList({ blocklets, ...rest }) {
       </CustomEmpty>
     );
   }
-  if (filters.keyword && blockletList.length === 0) {
+  if (filters.keyword && finalBlockletList.length === 0) {
     return (
       <CustomEmpty>
         <EmptyTitle
@@ -53,7 +73,7 @@ export default function BlockletList({ blocklets, ...rest }) {
       </CustomEmpty>
     );
   }
-  if (showFilterTip && blockletList.length === 0) {
+  if (showFilterTip && finalBlockletList.length === 0) {
     const categoryLocale = getCategoryLocale(selectedCategory);
     return (
       <CustomEmpty>
@@ -70,7 +90,7 @@ export default function BlockletList({ blocklets, ...rest }) {
       </CustomEmpty>
     );
   }
-  if (blockletList.length === 0) {
+  if (finalBlockletList.length === 0) {
     return (
       <CustomEmpty>
         <NoResults />
@@ -82,9 +102,16 @@ export default function BlockletList({ blocklets, ...rest }) {
     <StyledGrid container {...rest}>
       {blocklets.map((blocklet) => (
         <StyledGridItem item lg={4} md={6} sm={6} xs={12} key={blocklet.did} data-blocklet-did={blocklet.did}>
-          {blockletRender({ blocklet, blocklets: blockletList })}
+          {blockletRender({ blocklet, blocklets: finalBlockletList })}
         </StyledGridItem>
       ))}
+      {hasNextPage && (
+        <StyledGridItem item md={12} sm={12} xs={12} ref={sentryRef}>
+          <Box display="flex" justifyContent="center">
+            <CircularProgress />
+          </Box>
+        </StyledGridItem>
+      )}
     </StyledGrid>
   );
 }
@@ -102,7 +129,7 @@ const StyledGrid = styled(Grid)`
   }
 `;
 
-const StyledGridItem = styled(Grid)`
+const StyledGridItem = memo(styled(Grid)`
   @media (max-width: ${(props) => props.theme.breakpoints.values.sm}px) {
     &.MuiGrid-item {
       padding-bottom: 0px;
@@ -113,7 +140,7 @@ const StyledGridItem = styled(Grid)`
       margin-bottom: ${(props) => props.theme.spacing(2)};
     }
   }
-`;
+`);
 const CustomEmpty = styled(Empty)`
   text-align: center;
   .primary {

package/src/contexts/filter.js

@@ -1,11 +1,17 @@
 import { useContext, createContext, useMemo, useEffect } from 'react';
 import PropTypes from 'prop-types';
-import { useRequest } from 'ahooks';
+import { useRequest, useReactive } from 'ahooks';
 import orderBy from 'lodash/orderBy';
 import axios from 'axios';
 import isArray from 'lodash/isArray';
-
-import { getCategories, filterBlockletByPrice, replaceTranslate, getPrices, getCategoryOptions } from '../libs/utils';
+import {
+  getCategories,
+  filterBlockletByPrice,
+  replaceTranslate,
+  getPrices,
+  getCategoryOptions,
+  isMobileScreen,
+} from '../libs/utils';
 import translations from '../assets/locale';
 import { propTypes, defaultProps } from '../libs/prop-types';
 
@@ -48,6 +54,7 @@ function FilterProvider({ filters, children, endpoint, locale, blockletRender, o
     { initialData: [], manual: true }
   );
 
+  const paginateState = useReactive({ currentPage: 1, pageSize: isMobileScreen() ? 10 : 18, defaultCurrentPage: 1 });
   const finalFilters = { sortBy: 'popularity', sortDirection: 'desc', ...filters };
   const selectedCategory = finalFilters.category;
   const hasDeveloperFilter = !!finalFilters.developer;
@@ -89,6 +96,14 @@ function FilterProvider({ filters, children, endpoint, locale, blockletRender, o
     return orderBy(blocklets, [sortMap[finalFilters.sortBy]], [finalFilters.sortDirection]);
   }, [allBlocklets, finalFilters]);
 
+  const finalBlockletList = useMemo(() => {
+    // 前端分页 currentPage 当前页数  pageSize 每页条数
+    return blockletList.slice(
+      (paginateState.defaultCurrentPage - 1) * paginateState.pageSize,
+      paginateState.currentPage * paginateState.pageSize
+    );
+  }, [blockletList, paginateState]);
+
   const categoryList = useMemo(() => {
     const list = categoryState.data || [];
     // 分类按照名称排序
@@ -109,7 +124,7 @@ function FilterProvider({ filters, children, endpoint, locale, blockletRender, o
     errors: { fetchBlockletsError, fetchCategoriesError },
     loadings: { fetchBlockletsLoading, fetchCategoriesLoading },
     endpoint,
-    blockletList,
+    finalBlockletList,
     t: translate,
     filters: finalFilters,
     selectedCategory,
@@ -118,6 +133,7 @@ function FilterProvider({ filters, children, endpoint, locale, blockletRender, o
     locale,
     categoryOptions,
     priceOptions,
+    hasNextPage: blockletList.length >= paginateState.pageSize * paginateState.currentPage,
     handleSort: (sort) => {
       const changeData = {
         ...finalFilters,
@@ -149,6 +165,15 @@ function FilterProvider({ filters, children, endpoint, locale, blockletRender, o
       const changeData = { ...finalFilters, developer: developer || undefined };
       onFilterChange(changeData);
     },
+    handlePage: (page) => {
+      const changeData = { ...finalFilters, currentPage: page };
+      onFilterChange(changeData);
+    },
+    loadMore: () => {
+      setTimeout(() => {
+        paginateState.currentPage += 1;
+      }, 1000);
+    },
     getCategoryLocale: (category) => {
       if (!category) return null;
       let result = null;
@@ -158,6 +183,9 @@ function FilterProvider({ filters, children, endpoint, locale, blockletRender, o
       }
       return result;
     },
+    get allBlocklets() {
+      return allBlocklets || [];
+    },
     get developerName() {
       const blocklets = allBlocklets || [];
       return blocklets.find((blocklet) => blocklet.owner.did === finalFilters.developer)?.owner?.name || '';

package/src/libs/utils.js

@@ -5,10 +5,10 @@ const isFreeBlocklet = (meta) => {
   if (!meta.payment) {
     return true;
   }
-
   const priceList = (meta.payment.price || []).map((x) => x.value || 0);
   return priceList.every((x) => x === 0);
 };
+
 const getSortOptions = (t) => {
   return [
     {
@@ -106,6 +106,10 @@ const urlStringify = (obj) => {
   return new URLSearchParams(removeUndefined(obj)).toString();
 };
 
+const isMobileScreen = () => {
+  return window.innerWidth <= 600;
+};
+
 export {
   getSortOptions,
   getPrices,
@@ -118,4 +122,5 @@ export {
   removeUndefined,
   urlStringify,
   getCategoryOptions,
+  isMobileScreen,
 };