forked from adazzle/react-data-grid
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Nav.tsx
177 lines (161 loc) · 4.74 KB
/
Nav.tsx
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
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
import { NavLink } from 'react-router-dom';
import { css } from '@linaria/core';
import type { Direction } from '../src/types';
const navClassname = css`
display: flex;
flex-direction: column;
white-space: nowrap;
@media (prefers-color-scheme: light) {
border-inline-start: 4px solid hsl(210deg 50% 80%);
}
@media (prefers-color-scheme: dark) {
border-inline-start: 4px solid hsl(210deg 50% 40%);
}
h1,
h2 {
margin: 8px;
}
a {
color: inherit;
font-size: 14px;
line-height: 22px;
text-decoration: none;
padding-block: 0;
padding-inline: 16px;
transition: 0.1s background-color;
&:hover {
@media (prefers-color-scheme: light) {
background-color: hsl(210deg 50% 90%);
}
@media (prefers-color-scheme: dark) {
background-color: hsl(210deg 50% 30%);
}
}
}
`;
const activeNavClassname = css`
font-weight: 500;
@media (prefers-color-scheme: light) {
background-color: hsl(210deg 50% 80%);
}
@media (prefers-color-scheme: dark) {
background-color: hsl(210deg 50% 40%);
}
a&:hover {
@media (prefers-color-scheme: light) {
background-color: hsl(210deg 50% 70%);
}
@media (prefers-color-scheme: dark) {
background-color: hsl(210deg 50% 50%);
}
}
`;
const rtlCheckboxClassname = css`
padding-inline-start: 8px;
`;
interface Props {
direction: Direction;
onDirectionChange: (direction: Direction) => void;
}
export default function Nav({ direction, onDirectionChange }: Props) {
return (
<nav className={navClassname}>
<h1>react-data-grid</h1>
<h2>Demos</h2>
<NavLink to="/common-features" end className={getActiveClassname}>
Common Features
</NavLink>
<NavLink to="/all-features" end className={getActiveClassname}>
All Features
</NavLink>
<NavLink to="/cell-navigation" end className={getActiveClassname}>
Cell Navigation
</NavLink>
<NavLink to="/column-spanning" end className={getActiveClassname}>
Column Spanning
</NavLink>
<NavLink to="/columns-reordering" end className={getActiveClassname}>
Columns Reordering
</NavLink>
<NavLink to="/context-menu" end className={getActiveClassname}>
Context Menu
</NavLink>
<NavLink to="/customizable-renderers" end className={getActiveClassname}>
Customizable Renderers
</NavLink>
<NavLink to="/grouping" end className={getActiveClassname}>
Grouping
</NavLink>
<NavLink to="/header-filters" end className={getActiveClassname}>
Header Filters
</NavLink>
<NavLink to="/infinite-scrolling" end className={getActiveClassname}>
Infinite Scrolling
</NavLink>
<NavLink to="/master-detail" end className={getActiveClassname}>
Master Detail
</NavLink>
<NavLink to="/million-cells" end className={getActiveClassname}>
A Million Cells
</NavLink>
<NavLink to="/no-rows" end className={getActiveClassname}>
No Rows
</NavLink>
<NavLink to="/resizable-grid" end className={getActiveClassname}>
Resizable Grid
</NavLink>
<NavLink to="/rows-reordering" end className={getActiveClassname}>
Rows Reordering
</NavLink>
<NavLink to="/scroll-to-row" end className={getActiveClassname}>
Scroll To Row
</NavLink>
<NavLink to="/tree-view" end className={getActiveClassname}>
Tree View
</NavLink>
<NavLink to="/variable-row-height" end className={getActiveClassname}>
Variable Row Height
</NavLink>
<NavLink to="/animation" end className={getActiveClassname}>
Animation
</NavLink>
<h2>Links</h2>
<a
href="https://github.com/adazzle/react-data-grid/blob/main/README.md"
target="_blank"
rel="noreferrer"
>
Documentation
</a>
<a
href="https://github.com/adazzle/react-data-grid/blob/main/CHANGELOG.md"
target="_blank"
rel="noreferrer"
>
Changelog
</a>
<a
href="https://github.com/adazzle/react-data-grid/discussions"
target="_blank"
rel="noreferrer"
>
Discussions
</a>
<a href="https://github.com/adazzle/react-data-grid/issues" target="_blank" rel="noreferrer">
Issues
</a>
<h2>Direction</h2>
<label className={rtlCheckboxClassname}>
<input
type="checkbox"
checked={direction === 'rtl'}
onChange={() => onDirectionChange(direction === 'rtl' ? 'ltr' : 'rtl')}
/>
Right to left
</label>
</nav>
);
}
function getActiveClassname({ isActive }: { isActive: boolean }) {
return isActive ? activeNavClassname : '';
}