react-native-mantine 0.6.0 → 0.7.0

package/src/components/Table/Table.example.tsx

@@ -0,0 +1,85 @@
+import { View } from 'react-native';
+import { Table } from './index';
+
+/**
+ * Example demonstrating the fixed Table component with proper column alignment.
+ *
+ * The fix addresses the following issues:
+ * 1. Removed flex: 1 from cells which caused equal spacing regardless of content
+ * 2. Implemented automatic column width calculation using onLayout callbacks
+ * 3. Each column now uses the maximum width of all cells in that column
+ * 4. Columns align properly across all rows (thead, tbody, tfoot)
+ */
+
+const elements = [
+  { position: 6, mass: 12.011, symbol: 'C', name: 'Carbon' },
+  { position: 7, mass: 14.007, symbol: 'N', name: 'Nitrogen' },
+  { position: 39, mass: 88.906, symbol: 'Y', name: 'Yttrium' },
+  { position: 56, mass: 137.33, symbol: 'Ba', name: 'Barium' },
+  { position: 58, mass: 140.12, symbol: 'Ce', name: 'Cerium' },
+];
+
+export function TableExample() {
+  return (
+    <View style={{ padding: 40 }}>
+      <Table
+        verticalSpacing="md"
+        horizontalSpacing="md"
+        fontSize="sm"
+        striped
+        withBorder
+        withColumnBorders
+      >
+        <Table.Thead>
+          <Table.Tr>
+            <Table.Th>Element position</Table.Th>
+            <Table.Th>Element name</Table.Th>
+            <Table.Th>Symbol</Table.Th>
+            <Table.Th>Atomic mass</Table.Th>
+          </Table.Tr>
+        </Table.Thead>
+        <Table.Tbody>
+          {elements.map((element) => (
+            <Table.Tr key={element.name}>
+              <Table.Td>{element.position}</Table.Td>
+              <Table.Td>{element.name}</Table.Td>
+              <Table.Td>{element.symbol}</Table.Td>
+              <Table.Td>{element.mass}</Table.Td>
+            </Table.Tr>
+          ))}
+        </Table.Tbody>
+      </Table>
+    </View>
+  );
+}
+
+export function TableWithVariableContent() {
+  return (
+    <View style={{ padding: 40 }}>
+      <Table withBorder withColumnBorders>
+        <Table.Thead>
+          <Table.Tr>
+            <Table.Th>Short</Table.Th>
+            <Table.Th>Medium length header</Table.Th>
+            <Table.Th>Very long header text that spans multiple words</Table.Th>
+            <Table.Th>ID</Table.Th>
+          </Table.Tr>
+        </Table.Thead>
+        <Table.Tbody>
+          <Table.Tr>
+            <Table.Td>A</Table.Td>
+            <Table.Td>Medium content here</Table.Td>
+            <Table.Td>Short</Table.Td>
+            <Table.Td>1</Table.Td>
+          </Table.Tr>
+          <Table.Tr>
+            <Table.Td>B</Table.Td>
+            <Table.Td>Short</Table.Td>
+            <Table.Td>This is a very long content that should make the column wider</Table.Td>
+            <Table.Td>2</Table.Td>
+          </Table.Tr>
+        </Table.Tbody>
+      </Table>
+    </View>
+  );
+}

package/src/components/Table/index.tsx

@@ -1,11 +1,13 @@
-import React, { forwardRef, createContext, useContext } from 'react';
+import React, { forwardRef, createContext, useContext, useState, useCallback } from 'react';
 import { ScrollView } from 'react-native';
+import type { LayoutChangeEvent } from 'react-native';
 import { BoxView } from '../BoxView';
 import { Text } from '../Text';
 import type { DefaultProps, SpacingValue } from '../../theme/types';
 import { useComponentDefaultProps } from '../../theme/theme-provider';
 import { createStyles } from '../../theme';
 import { rem } from '../../theme/utils/rem';
+import { withTextWrapper, type WithTextWrapperProps } from '../../theme/utils/withTextWrapper';
 
 interface TableContextValue {
   striped: boolean;
@@ -15,6 +17,8 @@ interface TableContextValue {
   fontSize: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
   verticalSpacing: SpacingValue;
   horizontalSpacing: SpacingValue;
+  columnWidths: number[];
+  onCellLayout: (columnIndex: number, width: number) => void;
 }
 
 const TableContext = createContext<TableContextValue | null>(null);
@@ -94,20 +98,26 @@ export interface TableTrProps extends DefaultProps {
   __index?: number;
 }
 
-export interface TableThProps extends DefaultProps {
+export interface TableThProps extends DefaultProps, WithTextWrapperProps {
   /** Th children */
   children?: React.ReactNode;
 
   /** Additional styles */
   style?: any;
+
+  /** Internal column index */
+  __columnIndex?: number;
 }
 
-export interface TableTdProps extends DefaultProps {
+export interface TableTdProps extends DefaultProps, WithTextWrapperProps {
   /** Td children */
   children?: React.ReactNode;
 
   /** Additional styles */
   style?: any;
+
+  /** Internal column index */
+  __columnIndex?: number;
 }
 
 const fontSizes = {
@@ -130,7 +140,7 @@ const useTableStyles = createStyles(
     }
   ) => ({
     wrapper: {
-      flex: 1,
+      // No flex: 1 here to avoid constraining the table
     },
     root: {
       width: '100%',
@@ -179,6 +189,7 @@ const useTableRowStyles = createStyles(
     }
   ) => ({
     tr: {
+      flexDirection: 'row',
       borderBottomWidth: 1,
       borderBottomColor:
         theme.colorScheme === 'dark'
@@ -204,12 +215,14 @@ const useTableCellStyles = createStyles(
       horizontalSpacing,
       withColumnBorders,
       isHeader,
+      width,
     }: {
       fontSize: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
       verticalSpacing: SpacingValue;
       horizontalSpacing: SpacingValue;
       withColumnBorders: boolean;
       isHeader: boolean;
+      width?: number;
     }
   ) => {
     const getVerticalPadding = () => {
@@ -224,6 +237,9 @@ const useTableCellStyles = createStyles(
 
     return {
       cell: {
+        // Remove flex: 1 to prevent equal spacing
+        // Use explicit width when available for column alignment
+        ...(width && { width }),
         paddingVertical: getVerticalPadding() as any,
         paddingHorizontal: getHorizontalPadding() as any,
         fontSize: fontSizes[fontSize],
@@ -276,6 +292,20 @@ const Table = forwardRef<any, TableProps>((props, ref) => {
     { name: 'Table' }
   ) as any;
 
+  // Track column widths to ensure alignment across rows
+  const [columnWidths, setColumnWidths] = useState<number[]>([]);
+
+  const onCellLayout = useCallback((columnIndex: number, width: number) => {
+    setColumnWidths((prevWidths) => {
+      const newWidths = [...prevWidths];
+      // Store the maximum width for each column to ensure all cells in that column have the same width
+      if (!newWidths[columnIndex] || width > newWidths[columnIndex]) {
+        newWidths[columnIndex] = width;
+      }
+      return newWidths;
+    });
+  }, []);
+
   return (
     <TableContext.Provider
       value={{
@@ -286,6 +316,8 @@ const Table = forwardRef<any, TableProps>((props, ref) => {
         fontSize: fontSize!,
         verticalSpacing: verticalSpacing!,
         horizontalSpacing: horizontalSpacing!,
+        columnWidths,
+        onCellLayout,
       }}
     >
       <ScrollView
@@ -357,17 +389,32 @@ const Tr = forwardRef<any, TableTrProps>((props, ref) => {
     { name: 'Tr' }
   ) as any;
 
+  // Add column indices to children (Th and Td components)
+  const childrenArray = React.Children.toArray(children);
+  const childrenWithColumnIndex = childrenArray.map((child, index) => {
+    if (!React.isValidElement(child)) return child;
+    return React.cloneElement<TableThProps | TableTdProps>(
+      child as React.ReactElement<TableThProps | TableTdProps>,
+      {
+        __columnIndex: index,
+      }
+    );
+  });
+
   return (
     <BoxView ref={ref} style={sx(styles.tr, style)} {...others}>
-      {children}
+      {childrenWithColumnIndex}
     </BoxView>
   );
 });
 
 const Th = forwardRef<any, TableThProps>((props, ref) => {
-  const { children, style, ...others } = props;
+  const { children, style, withTextWrapper: shouldWrapInText = true, __columnIndex, ...others } = props;
   const context = useTableContext();
 
+  const columnIndex = __columnIndex ?? 0;
+  const columnWidth = context?.columnWidths?.[columnIndex];
+
   const { styles, sx } = useTableCellStyles(
     {
       fontSize: context?.fontSize ?? 'sm',
@@ -375,21 +422,40 @@ const Th = forwardRef<any, TableThProps>((props, ref) => {
       horizontalSpacing: context?.horizontalSpacing ?? 'xs',
       withColumnBorders: context?.withColumnBorders ?? false,
       isHeader: true,
+      width: columnWidth,
     },
     { name: 'Th' }
   ) as any;
 
+  const handleLayout = useCallback(
+    (event: LayoutChangeEvent) => {
+      const { width } = event.nativeEvent.layout;
+      if (context?.onCellLayout && width > 0) {
+        context.onCellLayout(columnIndex, width);
+      }
+    },
+    [context, columnIndex]
+  );
+
   return (
-    <BoxView ref={ref} style={sx(styles.cell, style)} {...others}>
-      <Text style={styles.cell}>{children}</Text>)
+    <BoxView
+      ref={ref}
+      style={sx(styles.cell, style)}
+      onLayout={handleLayout}
+      {...others}
+    >
+      {withTextWrapper(children, shouldWrapInText, styles.cell)}
     </BoxView>
   );
 });
 
 const Td = forwardRef<any, TableTdProps>((props, ref) => {
-  const { children, style, ...others } = props;
+  const { children, style, withTextWrapper: shouldWrapInText = true, __columnIndex, ...others } = props;
   const context = useTableContext();
 
+  const columnIndex = __columnIndex ?? 0;
+  const columnWidth = context?.columnWidths?.[columnIndex];
+
   const { styles, sx } = useTableCellStyles(
     {
       fontSize: context?.fontSize ?? 'sm',
@@ -397,13 +463,29 @@ const Td = forwardRef<any, TableTdProps>((props, ref) => {
       horizontalSpacing: context?.horizontalSpacing ?? 'xs',
       withColumnBorders: context?.withColumnBorders ?? false,
       isHeader: false,
+      width: columnWidth,
     },
     { name: 'Td' }
   ) as any;
 
+  const handleLayout = useCallback(
+    (event: LayoutChangeEvent) => {
+      const { width } = event.nativeEvent.layout;
+      if (context?.onCellLayout && width > 0) {
+        context.onCellLayout(columnIndex, width);
+      }
+    },
+    [context, columnIndex]
+  );
+
   return (
-    <BoxView ref={ref} style={sx(styles.cell, style)} {...others}>
-      <Text style={styles.cell}>{children}</Text>
+    <BoxView
+      ref={ref}
+      style={sx(styles.cell, style)}
+      onLayout={handleLayout}
+      {...others}
+    >
+      {withTextWrapper(children, shouldWrapInText, styles.cell)}
     </BoxView>
   );
 });

package/src/components/Title/index.tsx

@@ -2,8 +2,9 @@ import React, { forwardRef } from 'react';
 import { Text } from '../Text';
 import type { TextProps } from '../Text';
 import { useTheme } from '../../theme/theme-provider';
+import type { WithTextWrapperProps } from '../../theme/utils/withTextWrapper';
 
-export interface TitleProps extends Omit<TextProps, 'size'> {
+export interface TitleProps extends Omit<TextProps, 'size'>, WithTextWrapperProps {
   /** Heading order (h1-h6) */
   order?: 1 | 2 | 3 | 4 | 5 | 6;
 
@@ -16,7 +17,7 @@ export interface TitleProps extends Omit<TextProps, 'size'> {
  * Maps order prop to h1-h6 heading styles from theme
  */
 export const Title = forwardRef<any, TitleProps>((props, ref) => {
-  const { order = 1, children, style, ...others} = props;
+  const { order = 1, children, style, withTextWrapper: shouldWrapInText = true, ...others} = props;
   const theme = useTheme();
 
   // Get heading styles from theme
@@ -29,6 +30,10 @@ export const Title = forwardRef<any, TitleProps>((props, ref) => {
     theme.headings.fontWeight ??
     700;
 
+  if (!shouldWrapInText) {
+    return children;
+  }
+
   return (
     <Text
       ref={ref}

package/src/theme/utils/index.ts

@@ -0,0 +1,2 @@
+export { rem, em } from './rem';
+export { withTextWrapper, type WithTextWrapperProps } from './withTextWrapper';

package/src/theme/utils/withTextWrapper.tsx

@@ -0,0 +1,58 @@
+import type { ReactNode } from 'react';
+import { Text } from '../../components/Text';
+import type { TextProps } from '../../components/Text';
+
+/**
+ * Conditionally wraps content in a Text component based on the withTextWrapper prop.
+ *
+ * In React Native, all text must be wrapped in a Text component. However, some
+ * components may need flexibility to render with or without this wrapper depending
+ * on whether their content is text or other components (like icons, views, etc.).
+ *
+ * @param children - The content to potentially wrap
+ * @param shouldWrap - Whether to wrap the content in a Text component
+ * @param textStyle - Optional style to apply to the Text wrapper
+ * @param textProps - Optional additional props to pass to the Text component
+ * @returns The children wrapped in Text if shouldWrap is true, otherwise just the children
+ *
+ * @example
+ * // Wrap text content
+ * withTextWrapper('Hello', true, styles.text)
+ *
+ * @example
+ * // Don't wrap components
+ * withTextWrapper(<Icon />, false)
+ *
+ * @example
+ * // Default behavior (wrap)
+ * withTextWrapper('Text', true, styles.text, { numberOfLines: 1 })
+ */
+export function withTextWrapper(
+  children: ReactNode,
+  shouldWrap: boolean = true,
+  textStyle?: any,
+  textProps?: Omit<TextProps, 'children' | 'style'>
+): ReactNode {
+  if (!shouldWrap) {
+    return children;
+  }
+
+  return (
+    <Text style={textStyle} {...textProps}>
+      {children}
+    </Text>
+  );
+}
+
+/**
+ * Type helper for components that support the withTextWrapper pattern.
+ * Add this to your component props interface.
+ */
+export interface WithTextWrapperProps {
+  /**
+   * If false, children will not be wrapped in a Text component.
+   * This is useful when the children contain non-text elements like icons or custom components.
+   * @default true
+   */
+  withTextWrapper?: boolean;
+}