geist-ui/components/table/table-head.tsx at fd75933f6917d1c4ef3119aa393e5617f9498344 · geist-org/geist-ui · 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
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
import React, { useMemo } from 'react'
import useTheme from '../use-theme'
import { TableAbstractColumn, TableDataItemBase } from './table-types'

interface Props<TableDataItem extends TableDataItemBase> {
  width: number
  columns: Array<TableAbstractColumn<TableDataItem>>
  className?: string
}

const defaultProps = {
  className: '',
}

type NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props<any>>
export type TableHeadProps<TableDataItem extends TableDataItemBase> =
  Props<TableDataItem> & NativeAttrs

const makeColgroup = <TableDataItem extends TableDataItemBase>(
  width: number,
  columns: Array<TableAbstractColumn<TableDataItem>>,
) => {
  const unsetWidthCount = columns.filter(c => !c.width).length
  const customWidthTotal = columns.reduce((pre, current) => {
    return current.width ? pre + current.width : pre
  }, 0)
  const averageWidth = (width - customWidthTotal) / unsetWidthCount
  if (averageWidth <= 0) return <colgroup />
  return (
    <colgroup>
      {columns.map((column, index) => (
        <col key={`colgroup-${index}`} width={column.width || averageWidth} />
      ))}
    </colgroup>
  )
}

const TableHead = <TableDataItem extends TableDataItemBase>(
  props: TableHeadProps<TableDataItem>,
) => {
  const theme = useTheme()
  const { columns, width } = props as TableHeadProps<TableDataItem> & typeof defaultProps
  const isScalableWidth = useMemo(() => columns.find(item => !!item.width), [columns])
  const colgroup = useMemo(() => {
    if (!isScalableWidth) return <colgroup />
    return makeColgroup(width, columns)
  }, [isScalableWidth, width])

  return (
    <>
      {colgroup}
      <thead>
        <tr>
          {columns.map((column, index) => (
            <th
              key={`table-th-${String(column.prop)}-${index}`}
              className={column.className}>
              <div className="thead-box">{column.label}</div>
            </th>
          ))}
        </tr>
      </thead>
      <style jsx>{`
        thead {
          border-collapse: separate;
          border-spacing: 0;
          font-size: inherit;
        }

        th {
          padding: 0 0.5em;
          font-size: calc(0.75 * var(--table-font-size));
          font-weight: normal;
          text-align: left;
          letter-spacing: 0;
          vertical-align: middle;
          min-height: calc(2.5 * var(--table-font-size));
          color: ${theme.palette.accents_5};
          background: ${theme.palette.accents_1};
          border-bottom: 1px solid ${theme.palette.border};
          border-top: 1px solid ${theme.palette.border};
          border-radius: 0;
        }

        th:nth-child(1) {
          border-bottom: 1px solid ${theme.palette.border};
          border-left: 1px solid ${theme.palette.border};
          border-top: 1px solid ${theme.palette.border};
          border-top-left-radius: ${theme.layout.radius};
          border-bottom-left-radius: ${theme.layout.radius};
        }

        th:last-child {
          border-bottom: 1px solid ${theme.palette.border};
          border-right: 1px solid ${theme.palette.border};
          border-top: 1px solid ${theme.palette.border};
          border-top-right-radius: ${theme.layout.radius};
          border-bottom-right-radius: ${theme.layout.radius};
        }

        .thead-box {
          display: flex;
          align-items: center;
          -webkit-box-align: center;
          min-height: calc(2.5 * var(--table-font-size));
          text-transform: uppercase;
        }
      `}</style>
    </>
  )
}

TableHead.defaultProps = defaultProps
TableHead.displayName = 'GeistTableHead'
export default TableHead