table/packages/table-devtools/src/components/Shell.tsx at 26fc1057afe18fe5004fa7c2cf44a2fd34fb73b1 · TanStack/table · 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
import { For, Match, Show, Switch } from 'solid-js'
import { Header, HeaderLogo, MainPanel, Select } from '@tanstack/devtools-ui'
import { useTableDevtoolsContext } from '../TableContextProvider'
import { useStyles } from '../styles/use-styles'
import { ColumnsPanel } from './ColumnsPanel'
import { FeaturesPanel } from './FeaturesPanel'
import { RowsPanel } from './RowsPanel'
import { StatePanel } from './StatePanel'
import { OptionsPanel } from './OptionsPanel'

const EMPTY_PANEL_KEY = '__table-devtools-empty__'

const tabs = [
  { id: 'features', label: 'Features' },
  { id: 'options', label: 'Options' },
  { id: 'state', label: 'State' },
  { id: 'rows', label: 'Rows' },
  { id: 'columns', label: 'Columns' },
] as const

export function Shell() {
  const styles = useStyles()
  const {
    activeTab,
    setActiveTab,
    selectedTargetId,
    setSelectedTargetId,
    table,
    targets,
  } = useTableDevtoolsContext()

  const tableOptions = () =>
    targets().map((target) => ({
      value: target.id,
      label: target.id,
    }))

  return (
    <MainPanel>
      <Header>
        <HeaderLogo
          flavor={{ light: '#06b6d4', dark: '#2563eb' }}
          onClick={() => {
            window.open('https://tanstack.com/table', '_blank')
          }}
        >
          TanStack Table
        </HeaderLogo>
      </Header>

      <div class={styles().mainContainer}>
        <Show when={tableOptions().length > 0 && tableOptions()}>
          {(tableOptions) => (
            <Show when={selectedTargetId() ?? EMPTY_PANEL_KEY}>
              {(selectedTargetId) => (
                <Select
                  label="Table"
                  options={tableOptions()}
                  value={selectedTargetId()}
                  onChange={(value) => setSelectedTargetId(value)}
                />
              )}
            </Show>
          )}
        </Show>

        <div class={styles().tabBar}>
          <For each={tabs}>
            {(tab) => (
              <button
                type="button"
                class={`${styles().tabButton} ${
                  activeTab() === tab.id ? styles().tabButtonActive : ''
                }`}
                onClick={() => setActiveTab(tab.id)}
              >
                {tab.label}
              </button>
            )}
          </For>
        </div>

        <div class={styles().contentArea}>
          <Show when={table() ?? EMPTY_PANEL_KEY} keyed>
            {(_table) => (
              <Switch>
                <Match when={activeTab() === 'features'}>
                  <FeaturesPanel />
                </Match>
                <Match when={activeTab() === 'state'}>
                  <StatePanel />
                </Match>
                <Match when={activeTab() === 'options'}>
                  <OptionsPanel />
                </Match>
                <Match when={activeTab() === 'rows'}>
                  <RowsPanel />
                </Match>
                <Match when={activeTab() === 'columns'}>
                  <ColumnsPanel />
                </Match>
              </Switch>
            )}
          </Show>
        </div>
      </div>
    </MainPanel>
  )
}