docs(changeset): List is now mobile friendly

uidu-org · Apr 13, 2023 · 00b2a31 · 00b2a31
1 parent 28796e3
commit 00b2a31
Show file tree

Hide file tree

Showing 10 changed files with 120 additions and 108 deletions.
diff --git a/.changeset/gorgeous-tables-vanish.md b/.changeset/gorgeous-tables-vanish.md
@@ -0,0 +1,9 @@
+---
+'@uidu/table': minor
+'@uidu/list': minor
+'@uidu/data-manager': patch
+'@uidu/shell': patch
+'@uidu/guidu-website': patch
+---
+
+List is now mobile friendly
diff --git a/packages/data/data-manager/examples/Basic.tsx b/packages/data/data-manager/examples/Basic.tsx
@@ -252,7 +252,7 @@ export default function Basic({}) {
     <IntlProvider locale="en">
       <Router>
         <>
-          <ShellSidebar tw="w-80 border-r">
+          <ShellSidebar tw="w-80 border-r hidden md:flex">
             <Navigation tw="bg-white border-b" schema={schema} />
           </ShellSidebar>
           <ShellMain>
@@ -368,40 +368,38 @@ export default function Basic({}) {
                       updateView={onViewUpdate}
                     >
                       <ShellBody>
-                        <ShellMain>
-                          <Suspense fallback={<ShellBodyWithSpinner />}>
-                            <DataManagerView
-                              viewProps={{
-                                gallery: {
-                                  gutterSize: 24,
-                                },
-                                list: {
-                                  rowHeight: 104,
-                                },
-                                calendar: {
-                                  components: {
+                        <Suspense fallback={<ShellBodyWithSpinner />}>
+                          <DataManagerView
+                            viewProps={{
+                              gallery: {
+                                gutterSize: 24,
+                              },
+                              list: {
+                                rowHeight: 104,
+                              },
+                              calendar: {
+                                components: {
+                                  event: (props) => (
+                                    <div tw="bg-red-500 my-0.5">Ciao</div>
+                                  ),
+                                  month: {
                                     event: (props) => (
-                                      <div tw="bg-red-500 my-0.5">Ciao</div>
+                                      <div tw="bg-red-500 my-0.5">
+                                        {props.title}
+                                      </div>
                                     ),
-                                    month: {
-                                      event: (props) => (
-                                        <div tw="bg-red-500 my-0.5">
-                                          {props.title}
-                                        </div>
-                                      ),
-                                    },
                                   },
                                 },
-                                board: {},
-                                table: {
-                                  includeFooter: false,
-                                  headerHeight: 48,
-                                  rowHeight: 48,
-                                },
-                              }}
-                            />
-                          </Suspense>
-                        </ShellMain>
+                              },
+                              board: {},
+                              table: {
+                                includeFooter: false,
+                                headerHeight: 48,
+                                rowHeight: 48,
+                              },
+                            }}
+                          />
+                        </Suspense>
                       </ShellBody>
                       <DataManagerFooter />
                     </DataManager>

diff --git a/packages/data/data-manager/src/components/DataManagerView.tsx b/packages/data/data-manager/src/components/DataManagerView.tsx
@@ -278,18 +278,16 @@ function DataManagerView<T>({
         <Suspense fallback={<ShellBodyWithSpinner />}>
           <LoadableTable fallback={<ShellBodyWithSpinner />}>
             {({ default: Table }: { default: FC<TableProps<T>> }) => (
-              <div tw="h-full">
-                <Table
-                  // setAggregation={setAggregation}
-                  // setColumnWidth={setColumnWidth}
-                  rowHeight={(viewProps.table || {}).rowHeight || 56}
-                  onItemClick={onItemClick}
-                  pagination={pagination}
-                  tableInstance={tableInstance}
-                  isPending={isPending}
-                  {...viewProps.table}
-                />
-              </div>
+              <Table
+                // setAggregation={setAggregation}
+                // setColumnWidth={setColumnWidth}
+                rowHeight={(viewProps.table || {}).rowHeight || 56}
+                onItemClick={onItemClick}
+                pagination={pagination}
+                tableInstance={tableInstance}
+                isPending={isPending}
+                {...viewProps.table}
+              />
             )}
           </LoadableTable>
         </Suspense>

diff --git a/packages/data/list/package.json b/packages/data/list/package.json
@@ -13,6 +13,7 @@
     "@tanstack/react-table": "^8.8.5",
     "@tanstack/react-virtual": "^3.0.0-beta.48",
     "@uidu/data-fields": "^2.1.42",
+    "@uidu/shell": "2.1.51",
     "react": "^18.2.0",
     "styled-components": "^5.3.9",
     "tslib": "^2.5.0"

diff --git a/packages/data/list/src/components/List.tsx b/packages/data/list/src/components/List.tsx
@@ -1,5 +1,6 @@
 import { Row } from '@tanstack/react-table';
 import { useVirtualizer } from '@tanstack/react-virtual';
+import { ScrollableContainer } from '@uidu/shell';
 import React, { useCallback, useEffect, useRef } from 'react';
 import { StyledRow } from '../styled';
 import { ListProps } from '../types';
@@ -29,7 +30,7 @@ export default function List<T>({
   const headerGroups = getHeaderGroups();
   const { rows } = getRowModel();
 
-  const rowVirtualizer = useVirtualizer({
+  const rowVirtualizer = useVirtualizer<HTMLDivElement>({
     count: hasNext ? rows.length + 1 : rows.length,
     getScrollElement: () => parentRef.current,
     getItemKey: (index) => rows[index]?.original?.id,
@@ -95,29 +96,39 @@ export default function List<T>({
   }, [loadNext, hasNext, rows.length, virtualRows, isLoadingNext, isPending]);
 
   return (
-    <div tw="h-full">
-      <div ref={parentRef} tw="h-full w-full overflow-auto xl:px-4 px-3">
-        <Header headerGroups={headerGroups} />
-        <div
-          tw="relative"
-          style={{
-            height: `${totalSize}px`,
-            minHeight: `calc(100% - ${rowHeight * 2 - 8 - 16}px)`,
-          }}
-        >
-          {isPending ? (
-            <LoadingSkeleton
-              count={50}
-              rowHeight={rowHeight}
-              gutterSize={gutterSize}
-            />
-          ) : (
-            virtualRows.map(({ index, key, start, size }) => (
-              <Item index={index} key={key} start={start} size={size} />
-            ))
-          )}
-        </div>
+    <ScrollableContainer
+      ref={parentRef}
+      tw="h-full w-full overflow-auto xl:px-4 px-3 z-20 min-w-0 min-h-0"
+      // style={{
+      //   WebkitOverflowScrolling: 'auto',
+      //   WebkitBackfaceVisibility: 'hidden',
+      //   overscrollBehavior: 'contain contain',
+      //   flex: '0 1 auto',
+      //   overflowY: 'auto',
+      //   height: 300,
+      // }}
+    >
+      <Header headerGroups={headerGroups} />
+      <div
+        tw="relative flex flex-col"
+        style={{
+          height: `${totalSize}px`,
+          minHeight: `calc(100% - ${rowHeight * 2 - 8 - 16}px)`,
+          flex: '0 1 auto',
+        }}
+      >
+        {isPending ? (
+          <LoadingSkeleton
+            count={50}
+            rowHeight={rowHeight}
+            gutterSize={gutterSize}
+          />
+        ) : (
+          virtualRows.map(({ index, key, start, size }) => (
+            <Item index={index} key={key} start={start} size={size} />
+          ))
+        )}
       </div>
-    </div>
+    </ScrollableContainer>
   );
 }
diff --git a/packages/data/table/package.json b/packages/data/table/package.json
@@ -21,6 +21,7 @@
     "@uidu/menu": "^0.8.15",
     "@uidu/popup": "^0.7.16",
     "@uidu/portal": "1.0.9",
+    "@uidu/shell": "2.1.51",
     "numeral": "^2.0.6",
     "react": "^18.2.0",
     "react-cool-onclickoutside": "^1.7.0",

diff --git a/packages/data/table/src/components/Table.tsx b/packages/data/table/src/components/Table.tsx
@@ -3,6 +3,7 @@
 
 import { Row as RowType } from '@tanstack/react-table';
 import { useVirtualizer } from '@tanstack/react-virtual';
+import { ScrollableContainer } from '@uidu/shell';
 import React, { useCallback, useEffect, useMemo, useRef } from 'react';
 import * as defaultComponents from '../styled';
 import { TableProps } from '../types';
@@ -129,55 +130,43 @@ function Table<T extends { id: string }>({
       : 0;
 
   return (
-    <div tw="h-full" role="table">
-      <div ref={parentRef} tw="h-full w-full overflow-scroll">
-        {/* <div
+    <ScrollableContainer ref={parentRef} tw="h-full w-full overflow-scroll">
+      {/* <div
           style={{
             // width: tableInstance.getTotalSize(),
             minWidth: '100%',
           }}
           tw="h-full overflow-auto"
         > */}
-        <Headers
-          headerGroups={headerGroups}
-          components={headerComponents}
-          headerHeight={headerHeight}
-          columnSizingInfo={columnSizingInfo}
-          style={{
-            width: tableInstance.getTotalSize(),
-          }}
-        />
-        {/* Here we should insert the pagination fragment, and manage data  */}
-        <Body
-          $height={totalSize}
-          $verticalPadding={headerHeight}
-          style={{
-            width: tableInstance.getTotalSize(),
-          }}
-        >
-          {/* {paddingTop > 0 && <div style={{ height: `${paddingTop}px` }} />} */}
-          {isPending ? (
-            <LoadingSkeleton
-              components={rowComponents}
-              columns={tableInstance.getAllColumns()}
-              count={50}
-              rowHeight={rowHeight}
-            />
-          ) : (
-            virtualRows.map(({ size, start, index, key }) => (
-              <Row key={key} size={size} start={start} index={index} />
-            ))
-          )}
-          {/* {paddingBottom > 0 && (
+      <Headers
+        headerGroups={headerGroups}
+        components={headerComponents}
+        headerHeight={headerHeight}
+        columnSizingInfo={columnSizingInfo}
+      />
+      {/* Here we should insert the pagination fragment, and manage data  */}
+      <Body $height={totalSize} $verticalPadding={headerHeight}>
+        {/* {paddingTop > 0 && <div style={{ height: `${paddingTop}px` }} />} */}
+        {isPending ? (
+          <LoadingSkeleton
+            components={rowComponents}
+            columns={tableInstance.getAllColumns()}
+            count={50}
+            rowHeight={rowHeight}
+          />
+        ) : (
+          virtualRows.map(({ size, start, index, key }) => (
+            <Row key={key} size={size} start={start} index={index} />
+          ))
+        )}
+        {/* {paddingBottom > 0 && (
             <div style={{ height: `${paddingBottom}px` }} />
           )} */}
-        </Body>
-        {includeFooter ? (
-          <Footer footerGroups={footerGroups} rowHeight={rowHeight} />
-        ) : null}
-      </div>
-      {/* </div> */}
-    </div>
+      </Body>
+      {includeFooter ? (
+        <Footer footerGroups={footerGroups} rowHeight={rowHeight} />
+      ) : null}
+    </ScrollableContainer>
   );
 }
 

diff --git a/packages/navigation/shell/src/components/ScrollableContainer/styled.tsx b/packages/navigation/shell/src/components/ScrollableContainer/styled.tsx
@@ -3,6 +3,7 @@ import styled from 'styled-components';
 export const StyledScrollableContainer = styled.div`
   flex: 1 1 auto;
   scroll-behavior: smooth;
+  overscroll-behavior: contain contain;
   overflow-x: hidden;
   overflow-y: auto;
   // to fix chrome flex

diff --git a/website/webpack.config.js b/website/webpack.config.js
@@ -24,6 +24,8 @@ runDevServer({
           // and bind address to 0.0.0.0 using ifconfig 192.168.xxx.xxx:9000
           // https: false,
           https,
+          // host: 'local-ip',
+          // disableHostCheck: true,
         },
       }
     : {}),

diff --git a/yarn.lock b/yarn.lock
@@ -9123,6 +9123,7 @@ __metadata:
     "@tanstack/react-virtual": ^3.0.0-beta.48
     "@uidu/data-fields": ^2.1.42
     "@uidu/docs": ^0.5.28
+    "@uidu/shell": 2.1.51
     react: ^18.2.0
     styled-components: ^5.3.9
     tslib: ^2.5.0
@@ -10045,6 +10046,7 @@ __metadata:
     "@uidu/menu": ^0.8.15
     "@uidu/popup": ^0.7.16
     "@uidu/portal": 1.0.9
+    "@uidu/shell": 2.1.51
     numeral: ^2.0.6
     react: ^18.2.0
     react-cool-onclickoutside: ^1.7.0