@blocklet/list 0.8.58 → 0.8.62

package/lib/base.js

@@ -110,8 +110,15 @@ function ListBase() {
         })]
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactErrorBoundary.ErrorBoundary, {
         FallbackComponent: _ErrorBoundary.ErrorFallback,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_list.default, {
-          blocklets: finalBlockletList
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          style: {
+            position: 'relative',
+            flex: 1,
+            overflow: 'auto'
+          },
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_list.default, {
+            blocklets: finalBlockletList
+          })
         })
       })]
     })]
@@ -121,7 +128,7 @@ function ListBase() {
 const StyledMin = _styledComponents.default.main.withConfig({
   displayName: "base__StyledMin",
   componentId: "sc-wumzlv-0"
-})(["flex:1;width:100%;min-width:0;.filter-bar{justify-content:space-between;margin-bottom:", ";}.sort-button{white-space:nowrap;}.search-container{flex:2;margin-left:0px;}.filter-container{flex:1;display:flex;justify-content:flex-end;}@media (max-width:", "px){.search-container{width:100%;margin-bottom:", ";}.filter-container{margin-left:0;display:flex;justify-content:flex-start;}.filter-bar{display:flex;flex-direction:column;align-items:flex-start;}}@media (max-width:", "px){.sort-button{font-size:12px;}}"], props => props.theme.spacing(2), props => props.theme.breakpoints.values.md, props => props.theme.spacing(2), props => props.theme.breakpoints.values.md);
+})(["display:flex;flex-direction:column;flex:1;width:100%;height:100%;.filter-bar{justify-content:space-between;margin-bottom:", ";}.sort-button{white-space:nowrap;}.search-container{flex:2;margin-left:0px;}.filter-container{flex:1;display:flex;justify-content:flex-end;}@media (max-width:", "px){.search-container{width:100%;margin-bottom:", ";}.filter-container{margin-left:0;display:flex;justify-content:flex-start;}.filter-bar{display:flex;flex-direction:column;align-items:flex-start;}}@media (max-width:", "px){.sort-button{font-size:12px;}}"], props => props.theme.spacing(2), props => props.theme.breakpoints.values.md, props => props.theme.spacing(2), props => props.theme.breakpoints.values.md);
 
 const StyledSearch = (0, _styledComponents.default)(_search.default).withConfig({
   displayName: "base__StyledSearch",

package/lib/components/aside.js

@@ -50,7 +50,7 @@ function Aside() {
 const StyledAside = _styledComponents.default.aside.withConfig({
   displayName: "aside__StyledAside",
   componentId: "sc-1wkvsv6-0"
-})(["width:220px;margin-right:", ";height:100%;"], props => props.theme.spacing(2));
+})(["width:220px;margin-right:", ";height:100%;overflow-y:auto;"], props => props.theme.spacing(2));
 
 Aside.propTypes = {};
 Aside.defaultProps = {};

package/lib/components/list/index.js

@@ -66,8 +66,7 @@ function BlockletList(_ref) {
   const [sentryRef] = (0, _reactInfiniteScrollHook.default)({
     loading: loadings.fetchBlockletsLoading,
     hasNextPage,
-    onLoadMore: loadMore,
-    rootMargin: '0px 0px 400px 0px'
+    onLoadMore: loadMore
   });
 
   if (errors.fetchBlockletsError) {
@@ -78,6 +77,7 @@ function BlockletList(_ref) {
 
   if (loadings.fetchBlockletsLoading) {
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
+      height: 60,
       display: "flex",
       alignItems: "center",
       justifyContent: "center",
@@ -150,6 +150,7 @@ function BlockletList(_ref) {
       xs: 12,
       ref: sentryRef,
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
+        height: 60,
         display: "flex",
         justifyContent: "center",
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_CircularProgress.default, {})
@@ -165,7 +166,7 @@ BlockletList.defaultProps = {};
 const StyledGrid = (0, _styledComponents.default)(_Grid.default).withConfig({
   displayName: "list__StyledGrid",
   componentId: "sc-1guvpon-0"
-})(["&.MuiGrid-root{width:auto;margin:0 -16px;}"]);
+})(["&.MuiGrid-root{width:100%;margin:0 -16px;}"]);
 const StyledGridItem = /*#__PURE__*/(0, _react.memo)((0, _styledComponents.default)(_Grid.default).withConfig({
   displayName: "list__StyledGridItem",
   componentId: "sc-1guvpon-1"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/list",
-  "version": "0.8.58",
+  "version": "0.8.62",
   "description": "Common ux components of blocklet",
   "publishConfig": {
     "access": "public"
@@ -38,7 +38,7 @@
     "react": ">=18.1.0"
   },
   "dependencies": {
-    "@arcblock/ux": "^2.1.53",
+    "@arcblock/ux": "^2.1.57",
     "@emotion/react": "^11.9.0",
     "@emotion/styled": "^11.8.1",
     "@mui/icons-material": "^5.6.2",
@@ -64,5 +64,5 @@
     "eslint": "^8.16.0",
     "prettier": "^2.6.2"
   },
-  "gitHead": "7958fe8a5c1a29451612f7177cd58e93d8805753"
+  "gitHead": "2554f4332e15ac769e6d12a35a0e7ab8e0a7c7ab"
 }

package/src/base.js

@@ -26,7 +26,6 @@ function ListBase() {
     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);
@@ -79,7 +78,9 @@ function ListBase() {
           />
         </Box>
         <ErrorBoundary FallbackComponent={ErrorFallback}>
-          <BlockletList blocklets={finalBlockletList} />
+          <div style={{ position: 'relative', flex: 1, overflow: 'auto' }}>
+            <BlockletList blocklets={finalBlockletList} />
+          </div>
         </ErrorBoundary>
       </StyledMin>
     </Box>
@@ -87,9 +88,11 @@ function ListBase() {
 }
 
 const StyledMin = styled.main`
+  display: flex;
+  flex-direction: column;
   flex: 1;
   width: 100%;
-  min-width: 0;
+  height: 100%;
   .filter-bar {
     justify-content: space-between;
     margin-bottom: ${(props) => props.theme.spacing(2)};

package/src/components/aside.js

@@ -30,6 +30,7 @@ const StyledAside = styled.aside`
   width: 220px;
   margin-right: ${(props) => props.theme.spacing(2)};
   height: 100%;
+  overflow-y: auto;
 `;
 
 Aside.propTypes = {};

package/src/components/list/index.js

@@ -32,7 +32,6 @@ export default function BlockletList({ blocklets, ...rest }) {
     loading: loadings.fetchBlockletsLoading,
     hasNextPage,
     onLoadMore: loadMore,
-    rootMargin: '0px 0px 400px 0px',
   });
 
   if (errors.fetchBlockletsError) {
@@ -44,7 +43,7 @@ export default function BlockletList({ blocklets, ...rest }) {
   }
   if (loadings.fetchBlockletsLoading) {
     return (
-      <Box display="flex" alignItems="center" justifyContent="center">
+      <Box height={60} display="flex" alignItems="center" justifyContent="center">
         <CircularProgress />
       </Box>
     );
@@ -107,7 +106,7 @@ export default function BlockletList({ blocklets, ...rest }) {
       ))}
       {hasNextPage && (
         <StyledGridItem item md={12} sm={12} xs={12} ref={sentryRef}>
-          <Box display="flex" justifyContent="center">
+          <Box height={60} display="flex" justifyContent="center">
             <CircularProgress />
           </Box>
         </StyledGridItem>
@@ -124,7 +123,7 @@ BlockletList.defaultProps = {};
 
 const StyledGrid = styled(Grid)`
   &.MuiGrid-root {
-    width: auto;
+    width: 100%;
     margin: 0 -16px;
   }
 `;