@equinor/eds-core-react
Version:
The React implementation of the Equinor Design System
68 lines (65 loc) • 2.26 kB
JavaScript
import { forwardRef } from 'react';
import styled, { css, ThemeProvider } from 'styled-components';
import { spacingsTemplate, typographyTemplate, bordersTemplate, useToken } from '@equinor/eds-utils';
import { token } from './HeaderCell.tokens.js';
import { jsx } from 'react/jsx-runtime';
import { useEds } from '../../EdsProvider/eds.context.js';
const StyledTableCell = styled.th.withConfig({
displayName: "HeaderCell__StyledTableCell",
componentId: "sc-18w2o3a-0"
})(props => {
const {
theme,
$sticky
} = props;
const {
background,
height,
typography,
spacings
} = theme;
const activeToken = theme.states.active;
const ariaSort = props['aria-sort'];
let sortStylingHover = css({});
let sortStylingActive = css({});
if (ariaSort) {
sortStylingHover = css(["@media (hover:hover) and (pointer:fine){&:hover{cursor:pointer;background:", ";}}"], theme.states.hover.background);
}
if (ariaSort && ariaSort !== 'none') {
sortStylingActive = css(["", ";background:", ";color:", ";"], activeToken.border.type === 'bordergroup' ? css(["border-color:", ";"], activeToken.border.bottom.color) : '', activeToken.background, activeToken.typography.color);
}
return css(["min-height:", ";height:", ";background:", ";box-sizing:border-box;", " ", " ", " ", " ", " ", ""], height, height, background, spacingsTemplate(spacings), typographyTemplate(typography), bordersTemplate(theme.border), sortStylingHover, sortStylingActive, $sticky ? css(["position:sticky;top:0;z-index:1;"]) : '');
});
const CellInner = styled.div.withConfig({
displayName: "HeaderCell__CellInner",
componentId: "sc-18w2o3a-1"
})(["display:flex;align-items:center;"]);
const TableHeaderCell = /*#__PURE__*/forwardRef(function TableHeaderCell({
children,
sort,
sticky,
...rest
}, ref) {
const {
density
} = useEds();
const token$1 = useToken({
density
}, token);
const props = {
ref,
$sticky: sticky,
...rest
};
return /*#__PURE__*/jsx(ThemeProvider, {
theme: token$1,
children: /*#__PURE__*/jsx(StyledTableCell, {
"aria-sort": sort,
...props,
children: /*#__PURE__*/jsx(CellInner, {
children: children
})
})
});
});
export { TableHeaderCell };