@react-md/table/es/TableCell.js

Create responsive data tables and accessible fixed tables

var __assign = (this && this.__assign) || function () {
    __assign = Object.assign || function(t) {
        for (var s, i = 1, n = arguments.length; i < n; i++) {
            s = arguments[i];
            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
                t[p] = s[p];
        }
        return t;
    };
    return __assign.apply(this, arguments);
};
var __rest = (this && this.__rest) || function (s, e) {
    var t = {};
    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
        t[p] = s[p];
    if (s != null && typeof Object.getOwnPropertySymbols === "function")
        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
                t[p[i]] = s[p[i]];
        }
    return t;
};
import { jsx as _jsx } from "react/jsx-runtime";
import { forwardRef } from "react";
import cn from "classnames";
import { useIcon } from "@react-md/icon";
import { bem } from "@react-md/utils";
import { useTableConfig } from "./config";
import { useTableFooter } from "./footer";
import { useSticky } from "./sticky";
import { TableCellContent } from "./TableCellContent";
var block = bem("rmd-table-cell");
/**
 * Creates a `<th>` or `<td>` cell with sensible styled defaults. You can create
 * a `<th>` element by enabling the `header` prop OR having a `TableCell` as a
 * child of the `TableHeader` component.
 *
 * Note: If you have a checkbox column in the `TableHeader` without any labels,
 * you will need to manually set the `header={false}` prop for that cell since
 * it is invalid to have a `<th>` without any readable content for screen
 * readers.
 */
export var TableCell = forwardRef(function TableCell(_a, ref) {
    var _b;
    var sortOrder = _a["aria-sort"], id = _a.id, className = _a.className, _c = _a.grow, grow = _c === void 0 ? false : _c, propScope = _a.scope, propHAlign = _a.hAlign, propVAlign = _a.vAlign, propHeader = _a.header, propDisableLineWrap = _a.lineWrap, children = _a.children, propSticky = _a.sticky, propSortIcon = _a.sortIcon, _d = _a.sortIconAfter, sortIconAfter = _d === void 0 ? false : _d, sortIconRotated = _a.sortIconRotated, disablePadding = _a.disablePadding, propColSpan = _a.colSpan, props = __rest(_a, ["aria-sort", "id", "className", "grow", "scope", "hAlign", "vAlign", "header", "lineWrap", "children", "sticky", "sortIcon", "sortIconAfter", "sortIconRotated", "disablePadding", "colSpan"]);
    // have to double cast to get the `100%` value to work.
    var colSpan = propColSpan;
    var sortIcon = useIcon("sort", propSortIcon);
    var isNoPadding = disablePadding !== null && disablePadding !== void 0 ? disablePadding : (sortIcon && sortOrder);
    // Note: unlike the other usages of `useTableConfig`, the `propHeader`
    // is not provided. This is so that `TableCheckbox` components can still
    // be a sticky header without being rendered as a `<th>`. This also makes
    // it so the scope can be defaulted to `col` or `row` automatically.
    var _e = useTableConfig({
        hAlign: propHAlign,
        vAlign: propVAlign,
        lineWrap: propDisableLineWrap,
    }), inheritedHeader = _e.header, hAlign = _e.hAlign, vAlign = _e.vAlign, lineWrap = _e.lineWrap;
    var header = propHeader !== null && propHeader !== void 0 ? propHeader : inheritedHeader;
    var footer = useTableFooter();
    var sticky = useSticky(propSticky);
    var isStickyCell = propSticky === "cell" || (!header && sticky);
    var isStickyHeader = propSticky === "header";
    var isStickyFooter = sticky && footer;
    var isStickyFooterCell = isStickyFooter && (propColSpan === "100%" || propColSpan === 0);
    var isStickyAbove = propSticky === "header-cell" || isStickyFooterCell;
    var scope = propScope;
    if (!scope && header) {
        scope = !inheritedHeader && propHeader ? "row" : "col";
    }
    var Component = header ? "th" : "td";
    return (_jsx(Component, __assign({}, props, { ref: ref, id: id, "aria-sort": sortOrder === "none" ? undefined : sortOrder, colSpan: colSpan, className: cn(block((_b = {
                grow: grow,
                header: header,
                sticky: sticky,
                "sticky-header": (header && sticky && propSticky !== "cell") ||
                    isStickyHeader ||
                    isStickyAbove,
                "sticky-cell": isStickyCell || isStickyAbove || isStickyFooterCell,
                "sticky-footer": isStickyFooter,
                "sticky-above": isStickyAbove
            },
            _b[hAlign] = hAlign !== "left",
            _b[vAlign] = vAlign !== "middle",
            _b.vertical = vAlign !== "middle",
            _b["no-wrap"] = !lineWrap,
            _b.padded = !isNoPadding && lineWrap === "padded",
            _b["no-padding"] = isNoPadding,
            _b)), className), scope: scope }, { children: _jsx(TableCellContent, __assign({ id: id ? "".concat(id, "-sort") : undefined, icon: sortIcon, iconAfter: sortIconAfter, sortOrder: sortOrder, rotated: sortIconRotated, hAlign: hAlign }, { children: children })) })));
});
//# sourceMappingURL=TableCell.js.map