@cdx-ui/components 0.0.1-beta.184 → 0.0.1-beta.185

package/src/components/Table/index.tsx

@@ -0,0 +1,489 @@
+import {
+  Children,
+  createContext,
+  forwardRef,
+  isValidElement,
+  useCallback,
+  useContext,
+  useId,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useState,
+  type ReactElement,
+  type ReactNode,
+} from 'react';
+import { ScrollView, Text, View, type LayoutChangeEvent } from 'react-native';
+import { Slot, dataAttributes, mergeDataAttributes } from '@cdx-ui/primitives';
+import { cn } from '@cdx-ui/utils';
+import {
+  tableNativeCaptionVariants,
+  tableContainerVariants,
+  tableNativeCellVariants,
+  tableNativeFooterVariants,
+  tableNativeHeadVariants,
+  tableNativeRootVariants,
+  tableNativeRowVariants,
+} from './styles';
+import type {
+  TableCaptionProps,
+  TableCellProps,
+  TableHeadProps,
+  TableProps,
+  TableRowProps,
+  TableSectionProps,
+} from './types';
+import {
+  ParentContext,
+  useTableStyleContext,
+  useTableVariantContext,
+} from './useTableStyleContext';
+
+export type {
+  TableCaptionProps,
+  TableCellProps,
+  TableHeadProps,
+  TableProps,
+  TableRowProps,
+  TableSectionProps,
+} from './types';
+export type { TableVariantProps } from './styles';
+
+const NATIVE_COL_MIN_WIDTH = 96;
+
+interface TableLayoutValue {
+  tableWidth: number;
+  columnCount: number;
+  registerRowColumnCount: (rowId: string, count: number) => void;
+  unregisterRowColumnCount: (rowId: string) => void;
+  setViewportWidth: (width: number) => void;
+}
+
+const TableLayoutContext = createContext<TableLayoutValue>({
+  tableWidth: 0,
+  columnCount: 0,
+  registerRowColumnCount: () => {},
+  unregisterRowColumnCount: () => {},
+  setViewportWidth: () => {},
+});
+
+const useTableLayout = () => useContext(TableLayoutContext);
+
+const nativeColumnStyle = (span: number, tableWidth: number, columnCount: number) => {
+  if (tableWidth <= 0 || columnCount <= 0) {
+    return undefined;
+  }
+
+  return {
+    width: (span / columnCount) * tableWidth,
+    flexGrow: 0,
+    flexShrink: 0,
+  };
+};
+
+const isTableColumnChild = (child: ReactNode): child is ReactElement<{ colSpan?: number }> =>
+  isValidElement(child) &&
+  ['Table.Head', 'Table.Cell'].includes((child.type as { displayName?: string }).displayName ?? '');
+
+const countRowColumns = (children: ReactNode): number =>
+  Children.toArray(children).reduce<number>((total, child) => {
+    if (!isTableColumnChild(child)) {
+      return total;
+    }
+    const span = child.props.colSpan;
+    return total + (span && span > 1 ? span : 1);
+  }, 0);
+
+const columnSpan = (colSpan?: number) => (colSpan && colSpan > 1 ? colSpan : 1);
+
+const nativeCrossAxisAlign = (className?: string) => {
+  if (!className) {
+    return undefined;
+  }
+
+  if (/\btext-right\b/.test(className)) {
+    return 'items-end';
+  }
+
+  if (/\btext-center\b/.test(className)) {
+    return 'items-center';
+  }
+
+  return undefined;
+};
+
+const isCaptionChild = (child: ReactNode): child is ReactElement =>
+  isValidElement(child) && (child.type as { displayName?: string }).displayName === 'Table.Caption';
+
+const nativeTextAlign = (className?: string) => {
+  if (!className) {
+    return undefined;
+  }
+
+  if (/\btext-right\b/.test(className)) {
+    return 'text-right';
+  }
+
+  if (/\btext-center\b/.test(className)) {
+    return 'text-center';
+  }
+
+  if (/\btext-left\b/.test(className)) {
+    return 'text-left';
+  }
+
+  return undefined;
+};
+
+const isTextChild = (child: ReactNode): child is string | number =>
+  typeof child === 'string' || typeof child === 'number';
+
+const renderNativeTableTextContent = (children: ReactNode, textClassName: string): ReactNode => {
+  if (isTextChild(children)) {
+    return (
+      <Text numberOfLines={1} ellipsizeMode="tail" className={textClassName}>
+        {children}
+      </Text>
+    );
+  }
+
+  const childList = Children.toArray(children);
+
+  if (childList.length === 0) {
+    return children;
+  }
+
+  if (childList.every(isTextChild)) {
+    return (
+      <Text numberOfLines={1} ellipsizeMode="tail" className={textClassName}>
+        {childList}
+      </Text>
+    );
+  }
+
+  return Children.map(children, (child, index) => {
+    if (!isTextChild(child)) {
+      return child;
+    }
+
+    return (
+      <Text
+        key={`table-text-${index.toString()}`}
+        numberOfLines={1}
+        ellipsizeMode="tail"
+        className={textClassName}
+      >
+        {child}
+      </Text>
+    );
+  });
+};
+
+const TableRoot = forwardRef<View, TableProps>(
+  ({ asChild, className, children, style, fullBleed = false, ...props }, ref) => {
+    const ctx = useTableVariantContext(fullBleed);
+    const computedClassName = cn(tableContainerVariants(), className);
+    const [viewportWidth, setViewportWidth] = useState(0);
+    const [columnCount, setColumnCount] = useState(0);
+    const rowColumnCountsRef = useRef(new Map<string, number>());
+    const syncColumnCount = useCallback(() => {
+      let max = 0;
+      for (const count of rowColumnCountsRef.current.values()) {
+        if (count > max) {
+          max = count;
+        }
+      }
+      setColumnCount((prev) => (prev === max ? prev : max));
+    }, []);
+    const registerRowColumnCount = useCallback(
+      (rowId: string, count: number) => {
+        rowColumnCountsRef.current.set(rowId, count);
+        syncColumnCount();
+      },
+      [syncColumnCount],
+    );
+    const unregisterRowColumnCount = useCallback(
+      (rowId: string) => {
+        if (rowColumnCountsRef.current.delete(rowId)) {
+          syncColumnCount();
+        }
+      },
+      [syncColumnCount],
+    );
+    const tableWidth = Math.max(viewportWidth, columnCount * NATIVE_COL_MIN_WIDTH);
+    const layout = useMemo(
+      () => ({
+        tableWidth,
+        columnCount,
+        registerRowColumnCount,
+        unregisterRowColumnCount,
+        setViewportWidth,
+      }),
+      [tableWidth, columnCount, registerRowColumnCount, unregisterRowColumnCount],
+    );
+
+    const handleViewportLayout = (event: LayoutChangeEvent) => {
+      const nextWidth = event.nativeEvent.layout.width;
+      setViewportWidth((prev) => (prev === nextWidth ? prev : nextWidth));
+    };
+
+    if (asChild) {
+      const Comp = Slot;
+      return (
+        <ParentContext.Provider value={ctx}>
+          <TableLayoutContext.Provider value={layout}>
+            <Comp
+              ref={ref}
+              className={computedClassName}
+              style={style}
+              {...props}
+              {...mergeDataAttributes(props, dataAttributes({ slot: 'table' }))}
+            >
+              {children}
+            </Comp>
+          </TableLayoutContext.Provider>
+        </ParentContext.Provider>
+      );
+    }
+
+    const childList = Children.toArray(children);
+    const captions = childList.filter(isCaptionChild);
+    const tableChildren = childList.filter((child) => !isCaptionChild(child));
+
+    return (
+      <ParentContext.Provider value={ctx}>
+        <TableLayoutContext.Provider value={layout}>
+          <ScrollView
+            horizontal
+            showsHorizontalScrollIndicator
+            className={computedClassName}
+            style={style}
+            onLayout={handleViewportLayout}
+          >
+            <View
+              ref={ref}
+              className={tableNativeRootVariants()}
+              style={tableWidth > 0 ? { width: tableWidth } : undefined}
+              accessibilityRole="none"
+              {...props}
+              {...mergeDataAttributes(props, dataAttributes({ slot: 'table' }))}
+            >
+              {tableChildren}
+              {captions}
+            </View>
+          </ScrollView>
+        </TableLayoutContext.Provider>
+      </ParentContext.Provider>
+    );
+  },
+);
+
+TableRoot.displayName = 'Table';
+
+const TableCaption = forwardRef<Text, TableCaptionProps>(
+  ({ asChild, className, children, style, ...props }, ref) => {
+    const computedClassName = cn(tableNativeCaptionVariants(), className);
+    const Comp = asChild ? Slot : Text;
+    const { tableWidth } = useTableLayout();
+
+    return (
+      <Comp
+        ref={ref}
+        className={computedClassName}
+        style={[tableWidth > 0 ? { width: tableWidth } : null, style]}
+        accessibilityRole="text"
+        {...props}
+        {...mergeDataAttributes(props, dataAttributes({ slot: 'table-caption' }))}
+      >
+        {children}
+      </Comp>
+    );
+  },
+);
+
+TableCaption.displayName = 'Table.Caption';
+
+const TableHeader = forwardRef<View, TableSectionProps>(
+  ({ asChild, className, children, style, ...props }, ref) => {
+    const Comp = asChild ? Slot : View;
+
+    return (
+      <Comp
+        ref={ref}
+        className={className}
+        style={style}
+        accessibilityRole="header"
+        {...props}
+        {...mergeDataAttributes(props, dataAttributes({ slot: 'table-header' }))}
+      >
+        {children}
+      </Comp>
+    );
+  },
+);
+
+TableHeader.displayName = 'Table.Header';
+
+const TableBody = forwardRef<View, TableSectionProps>(
+  ({ asChild, className, children, style, ...props }, ref) => {
+    const Comp = asChild ? Slot : View;
+
+    return (
+      <Comp
+        ref={ref}
+        className={className}
+        style={style}
+        {...props}
+        {...mergeDataAttributes(props, dataAttributes({ slot: 'table-body' }))}
+      >
+        {children}
+      </Comp>
+    );
+  },
+);
+
+TableBody.displayName = 'Table.Body';
+
+const TableFooter = forwardRef<View, TableSectionProps>(
+  ({ asChild, className, children, style, ...props }, ref) => {
+    const computedClassName = cn(tableNativeFooterVariants(), className);
+    const Comp = asChild ? Slot : View;
+
+    return (
+      <Comp
+        ref={ref}
+        className={computedClassName}
+        style={style}
+        accessibilityRole="summary"
+        {...props}
+        {...mergeDataAttributes(props, dataAttributes({ slot: 'table-footer' }))}
+      >
+        {children}
+      </Comp>
+    );
+  },
+);
+
+TableFooter.displayName = 'Table.Footer';
+
+const TableRow = forwardRef<View, TableRowProps>(
+  ({ asChild, className, children, style, ...props }, ref) => {
+    const computedClassName = cn(tableNativeRowVariants(), className);
+    const Comp = asChild ? Slot : View;
+    const rowId = useId();
+    const { tableWidth, registerRowColumnCount, unregisterRowColumnCount } = useTableLayout();
+    const columnCount = countRowColumns(children);
+
+    useLayoutEffect(() => {
+      if (columnCount > 0) {
+        registerRowColumnCount(rowId, columnCount);
+      } else {
+        unregisterRowColumnCount(rowId);
+      }
+
+      return () => {
+        unregisterRowColumnCount(rowId);
+      };
+    }, [rowId, columnCount, registerRowColumnCount, unregisterRowColumnCount]);
+
+    return (
+      <Comp
+        ref={ref}
+        className={computedClassName}
+        style={[tableWidth > 0 ? { width: tableWidth } : null, style]}
+        accessibilityRole="none"
+        {...props}
+        {...mergeDataAttributes(props, dataAttributes({ slot: 'table-row' }))}
+      >
+        {children}
+      </Comp>
+    );
+  },
+);
+
+TableRow.displayName = 'Table.Row';
+
+const TableHead = forwardRef<View, TableHeadProps>(
+  (
+    { asChild, className, children, style, colSpan, rowSpan: _rowSpan, scope: _scope, ...props },
+    ref,
+  ) => {
+    const { fullBleed } = useTableStyleContext();
+    const { tableWidth, columnCount } = useTableLayout();
+    const computedClassName = cn(
+      tableNativeHeadVariants({ fullBleed }),
+      nativeCrossAxisAlign(className),
+      className,
+    );
+    const Comp = asChild ? Slot : View;
+
+    return (
+      <Comp
+        ref={ref}
+        className={computedClassName}
+        style={[nativeColumnStyle(columnSpan(colSpan), tableWidth, columnCount), style]}
+        accessibilityRole="header"
+        {...props}
+        {...mergeDataAttributes(props, dataAttributes({ slot: 'table-head' }))}
+      >
+        {renderNativeTableTextContent(
+          children,
+          cn('w-full font-medium text-content-secondary body-md', nativeTextAlign(className)),
+        )}
+      </Comp>
+    );
+  },
+);
+
+TableHead.displayName = 'Table.Head';
+
+const TableCell = forwardRef<View, TableCellProps>(
+  ({ asChild, className, children, style, colSpan, rowSpan: _rowSpan, ...props }, ref) => {
+    const { fullBleed } = useTableStyleContext();
+    const { tableWidth, columnCount } = useTableLayout();
+    const computedClassName = cn(
+      tableNativeCellVariants({ fullBleed }),
+      nativeCrossAxisAlign(className),
+      className,
+    );
+    const Comp = asChild ? Slot : View;
+
+    return (
+      <Comp
+        ref={ref}
+        className={computedClassName}
+        style={[nativeColumnStyle(columnSpan(colSpan), tableWidth, columnCount), style]}
+        accessibilityRole="text"
+        {...props}
+        {...mergeDataAttributes(props, dataAttributes({ slot: 'table-cell' }))}
+      >
+        {renderNativeTableTextContent(
+          children,
+          cn('w-full body-md text-content-primary', nativeTextAlign(className)),
+        )}
+      </Comp>
+    );
+  },
+);
+
+TableCell.displayName = 'Table.Cell';
+
+type TableCompoundComponent = typeof TableRoot & {
+  Caption: typeof TableCaption;
+  Header: typeof TableHeader;
+  Body: typeof TableBody;
+  Footer: typeof TableFooter;
+  Row: typeof TableRow;
+  Head: typeof TableHead;
+  Cell: typeof TableCell;
+};
+
+export const Table = Object.assign(TableRoot, {
+  Caption: TableCaption,
+  Header: TableHeader,
+  Body: TableBody,
+  Footer: TableFooter,
+  Row: TableRow,
+  Head: TableHead,
+  Cell: TableCell,
+}) as TableCompoundComponent;