React95/src/Table/TableHeadCell.tsx at master · react95-io/React95 · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
import React, { forwardRef } from 'react';
import styled, { css } from 'styled-components';
import { createBorderStyles, createDisabledTextStyles } from '../common';
import { noOp } from '../common/utils';
import { CommonStyledProps } from '../types';

type TableHeadCellProps = {
  children?: React.ReactNode;
  disabled?: boolean;
  sort?: 'asc' | 'desc' | null;
} & React.TdHTMLAttributes<HTMLTableCellElement> &
  CommonStyledProps;

const StyledHeadCell = styled.th<{ $disabled: boolean }>`
  position: relative;
  padding: 0 8px;
  display: table-cell;
  vertical-align: inherit;
  background: ${({ theme }) => theme.material};
  cursor: default;
  user-select: none;
  &:before {
    box-sizing: border-box;
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    ${createBorderStyles()}

    border-left: none;
    border-top: none;
  }
  ${({ $disabled }) =>
    !$disabled &&
    css`
      &:active {
        &:before {
          ${createBorderStyles({ invert: true, style: 'window' })}
          border-left: none;
          border-top: none;
          padding-top: 2px;
        }

        & > div {
          position: relative;
          top: 2px;
        }
      }
    `}

  color: ${({ theme }) => theme.materialText};
  ${({ $disabled }) => $disabled && createDisabledTextStyles()}
  &:hover {
    color: ${({ theme }) => theme.materialText};
    ${({ $disabled }) => $disabled && createDisabledTextStyles()}
  }
`;

const TableHeadCell = forwardRef<HTMLTableCellElement, TableHeadCellProps>(
  function TableHeadCell(
    {
      disabled = false,
      children,
      onClick,
      onTouchStart = noOp,
      sort,
      ...otherProps
    },
    ref
  ) {
    const ariaSort =
      sort === 'asc' ? 'ascending' : sort === 'desc' ? 'descending' : undefined;
    return (
      <StyledHeadCell
        $disabled={disabled}
        aria-disabled={disabled}
        aria-sort={ariaSort}
        onClick={disabled ? undefined : onClick}
        onTouchStart={disabled ? undefined : onTouchStart}
        ref={ref}
        {...otherProps}
      >
        <div>{children}</div>
      </StyledHeadCell>
    );
  }
);

TableHeadCell.displayName = 'TableHeadCell';

export { TableHeadCell, TableHeadCellProps };