feat: add responvise page view (#2453)

packages/component/src/ui/table/styles.ts

@@ -1,18 +1,16 @@
 import { styled, textEllipsis } from '../../styles';
 import type { TableCellProps } from './interface';
 
-export const StyledTable = styled('table')<{ tableLayout: 'auto' | 'fixed' }>(
-  ({ tableLayout }) => {
-    return {
-      fontSize: 'var(--affine-font-base)',
-      color: 'var(--affine-text-primary-color)',
-      tableLayout,
-      width: '100%',
-      borderCollapse: 'separate',
-      borderSpacing: '0',
-    };
-  }
-);
+export const StyledTable = styled('table')(() => {
+  return {
+    fontSize: 'var(--affine-font-base)',
+    color: 'var(--affine-text-primary-color)',
+    tableLayout: 'fixed',
+    width: '100%',
+    borderCollapse: 'separate',
+    borderSpacing: '0',
+  };
+});
 
 export const StyledTableBody = styled('tbody')(() => {
   return {
@@ -37,7 +35,7 @@ export const StyledTableCell = styled('td')<
     return {
       width,
       height: '52px',
-      padding: '0 30px',
+      paddingLeft: '16px',
       boxSizing: 'border-box',
       textAlign: align,
       verticalAlign: 'middle',

packages/component/src/ui/table/table-body.tsx

@@ -1,11 +1,4 @@
-import type { HTMLAttributes, PropsWithChildren } from 'react';
-
 import { StyledTableBody } from './styles';
-export const TableBody = ({
-  children,
-  ...props
-}: PropsWithChildren<HTMLAttributes<HTMLTableSectionElement>>) => {
-  return <StyledTableBody {...props}>{children}</StyledTableBody>;
-};
+export const TableBody = StyledTableBody;
 
 export default TableBody;

packages/component/src/ui/table/table-cell.tsx

@@ -1,7 +1,4 @@
-import type { TableCellProps } from './interface';
 import { StyledTableCell } from './styles';
-export const TableCell = ({ children, ...props }: TableCellProps) => {
-  return <StyledTableCell {...props}>{children}</StyledTableCell>;
-};
+export const TableCell = StyledTableCell;
 
 export default TableCell;

packages/component/src/ui/table/table-row.tsx

@@ -1,11 +1,4 @@
-import type { HTMLAttributes, PropsWithChildren } from 'react';
-
 import { StyledTableRow } from './styles';
-export const TableRow = ({
-  children,
-  ...props
-}: PropsWithChildren<HTMLAttributes<HTMLTableRowElement>>) => {
-  return <StyledTableRow {...props}>{children}</StyledTableRow>;
-};
+export const TableRow = StyledTableRow;
 
 export default TableRow;

packages/component/src/ui/table/table.tsx

@@ -1,31 +1,5 @@
-import type { HTMLAttributes, PropsWithChildren, ReactNode } from 'react';
-import { Children } from 'react';
-
 import { StyledTable } from './styles';
-const childrenHasEllipsis = (children: ReactNode | ReactNode[]): boolean => {
-  return Children.toArray(children).some(child => {
-    if (typeof child === 'object' && 'props' in child) {
-      if (!child.props.ellipsis && child.props.children) {
-        return childrenHasEllipsis(child.props.children);
-      }
-      return child.props.ellipsis ?? false;
-    }
 
-    return false;
-  });
-};
-
-export const Table = ({
-  children,
-  ...props
-}: PropsWithChildren<HTMLAttributes<HTMLTableElement>>) => {
-  const tableLayout = childrenHasEllipsis(children) ? 'fixed' : 'auto';
-
-  return (
-    <StyledTable tableLayout={tableLayout} {...props}>
-      {children}
-    </StyledTable>
-  );
-};
+export const Table = StyledTable;
 
 export default Table;