optimizely-oui/src/components/Table/TR/index.js

Optimizely's Component Library.

import React from "react";
import classNames from "classnames";
import PropTypes from "prop-types";

const TR = React.forwardRef(
    (
        {
            backgroundColor,
            borderStyle,
            children,
            className,
            isActive,
            isHighlighted,
            isLink,
            noBorder,
            noHover,
            onRowClick = () => null,
            testSection,
            ...props
        },
        ref
    ) => {
        let classes = classNames({
            "oui-table-row--active": isActive,
            "oui-table-row--highlighted": isHighlighted,
            "oui-table-row--link": isLink,
            "no-border": noBorder,
            "hover--disabled": noHover,
            [`border--${borderStyle}`]: borderStyle,
            [`background--${backgroundColor}`]: backgroundColor,
        }, className);
        return (
            <tr className={classes} data-test-section={testSection} onClick={onRowClick} ref={ref} {...props}>
                {children}
            </tr>
        );
    }
);

TR.propTypes = {
    /** Background color for each row */
    backgroundColor: PropTypes.oneOf(["faint", "light"]),
    /** Border style for each row */
    borderStyle: PropTypes.oneOf(["bottom", "top", "sides", "ends", "none"]),
    /** Expects a `Table.TD` or `Table.TH` component */
    children: PropTypes.node,
    /** CSS class names. */
    className: PropTypes.string,
    /** If true, add active class */
    isActive: PropTypes.bool,
    /** If true, add highlight class */
    isHighlighted: PropTypes.bool,
    /** If true, add link class */
    isLink: PropTypes.bool,
    /** If true, add class to remove border */
    noBorder: PropTypes.bool,
    /** If true, remove hover on inner TDs */
    noHover: PropTypes.bool,
    /** Function to handle row click action */
    onRowClick: PropTypes.func,
    /** Hook for automated JavaScript tests */
    testSection: PropTypes.string,
};

TR.displayName = "TR";

export default TR;