UNPKG

@equinor/eds-core-react

Version:

The React implementation of the Equinor Design System

68 lines (65 loc) 2.26 kB
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 };