@equinor/eds-core-react
Version:
The React implementation of the Equinor Design System
48 lines (45 loc) • 1.42 kB
JavaScript
import { forwardRef } from 'react';
import styled, { css, ThemeProvider } from 'styled-components';
import { spacingsTemplate, typographyTemplate, bordersTemplate, useToken } from '@equinor/eds-utils';
import { applyVariant, tableCell } from './DataCell.tokens.js';
import { jsx } from 'react/jsx-runtime';
import { useEds } from '../../EdsProvider/eds.context.js';
const StyledTableCell = styled.td.withConfig({
displayName: "DataCell__StyledTableCell",
componentId: "sc-15tuitc-0"
})(({
theme,
color
}) => {
const {
height,
typography,
spacings,
border,
align
} = theme;
const backgroundColor = color === 'error' ? theme.validation.error?.background : '';
const base = css(["min-height:", ";height:", ";background:", ";vertical-align:", ";box-sizing:border-box;", " ", " ", ""], height, height, backgroundColor, align.vertical, spacingsTemplate(spacings), typographyTemplate(typography), bordersTemplate(border));
return base;
});
const TableDataCell = /*#__PURE__*/forwardRef(function TableDataCell({
children,
variant = 'text',
...rest
}, ref) {
const {
density
} = useEds();
const token = useToken({
density
}, applyVariant(variant, tableCell));
return /*#__PURE__*/jsx(ThemeProvider, {
theme: token,
children: /*#__PURE__*/jsx(StyledTableCell, {
...rest,
ref: ref,
children: children
})
});
});
export { TableDataCell };