# All files / src/table TableCellContent.tsx

78.63% Statements 92/117
25% Branches 1/4
100% Functions 1/1
78.63% Lines 92/117

Press n or j to go to the next uncovered block, b, p or k for the previous block.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    1181x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    145x
    145x
    145x
    145x
    145x
    145x
    145x
    145x
    145x
    145x
    145x
    145x
    145x
    145x
    145x

    145x
    145x
    145x
    145x
    145x
     import { cnb } from "cnbuilder";
    import { forwardRef, type ButtonHTMLAttributes, type ReactNode } from "react";
    import { ButtonUnstyled } from "../button/ButtonUnstyled.js";
    import { IconRotator, type IconRotatorProps } from "../icon/IconRotator.js";
    import { bem } from "../utils/bem.js";
    import { type TableCellHorizontalAlignment } from "./TableConfigurationProvider.js";

    export type SortOrder = "ascending" | "descending" | "none" | "other";

    /**
     * @remarks \@since 6.0.0
     */
    export type TableCellContentsIconRotatorProps = Omit<
      IconRotatorProps,
      "children" | "rotated"
    >;

    /**
     * @remarks \@since 6.0.0 Extends the `ButtonHTMLAttributes` so the extra props
     * can be passed to the `ButtonUnstyled`
     * @internal
     */
    export interface TableCellContentProps
      extends ButtonHTMLAttributes<HTMLButtonElement> {
      /**
       * The current sort order for this cell. Setting this to `null` will prevent
       * the button from being rendered.
       */
      sortOrder?: SortOrder;

      /**
       * This should normally be the `getIcon("sort")`
       */
      icon?: ReactNode;

      /** @defaultValue `false` */
      iconAfter?: boolean;

      /**
       * Boolean if the icon should be rotated.
       */
      rotated?: boolean;

      /**
       * Any additional props to pass to the `IconRotator`.
       */
      iconRotatorProps?: TableCellContentsIconRotatorProps;

      /**
       * @remarks \@since 4.0.3
       * @see {@link TableCellHorizontalAlignment}
       */
      hAlign?: TableCellHorizontalAlignment;
    }

    const styles = bem("rmd-table-cell");

    /**
     * **Server Component**
     * This might actually be a client component.
     *
     * This is mostly an internal component since it is automatically used within
     * the `TableCell` component but this will conditionally wrap the `children`
     * within an `UnstyledButton` to make a clickable cell. This is really to help
     * with sort behavior within headers.
     *
     * @internal
     */
    export const TableCellContent = forwardRef<
      HTMLButtonElement,
      TableCellContentProps
    >(function TableCellContent(props, ref) {
      const {
        icon: propIcon,
        style,
        className,
        sortOrder,
        children,
        rotated: propRotated,
        hAlign = "left",
        iconAfter,
        iconRotatorProps,
        ...remaining
      } = props;
      if (!sortOrder || propIcon === null) {
        return <>{children}</>;
      }

      let icon: ReactNode = null;
      if (sortOrder !== "none") {
        const rotated = propRotated ?? sortOrder === "descending";

        icon = (
          <IconRotator {...iconRotatorProps} rotated={rotated}>
            {propIcon}
          </IconRotator>
        );
      }

      return (
        <ButtonUnstyled
          {...remaining}
          ref={ref}
          style={style}
          className={cnb(
            styles("content", {
              [hAlign]: hAlign !== "left",
            }),
            className
          )}
        >
          {!iconAfter && icon}
          {children}
          {iconAfter && icon}
        </ButtonUnstyled>
      );
    });