Skip to content

Commit 6a7b336

Browse files
JarrodMFleschJarrodMFlesch
committed
update row click detection
1 parent 2b651b9 commit 6a7b336

File tree

8 files changed

+823
-226
lines changed

8 files changed

+823
-226
lines changed

‎packages/ui/src/elements/TreeView/NestedSectionsTable/Header/index.scss‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
.nested-sections-table-header {
2+
display: table-header-group;
3+
4+
--cell-inline-padding-start: calc(var(--base) * 0.6);
5+
--cell-inline-padding-end: calc(var(--base) * 0.6);
6+
7+
&__cell {
8+
display: table-cell;
9+
color: var(--theme-elevation-400);
10+
vertical-align: top;
11+
padding-block: calc(var(--base) * 0.6);
12+
padding-inline-start: var(--cell-inline-padding-start);
13+
padding-inline-end: var(--cell-inline-padding-end);
14+
position: relative;
15+
z-index: 1;
16+
17+
[dir='rtl'] & {
18+
text-align: right;
19+
}
20+
&:first-child {
21+
--cell-inline-padding-start: calc(var(--base) * (0.8));
22+
}
23+
&:last-child {
24+
--cell-inline-padding-end: calc(var(--base) * (0.8));
25+
}
26+
}
27+
}

‎packages/ui/src/elements/TreeView/NestedSectionsTable/Header/index.tsx‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
import React from 'react'
2+
3+
import './index.scss'
4+
5+
const baseClass = 'nested-sections-table-header'
6+
7+
interface Column {
8+
label?: string
9+
name: string
10+
}
11+
12+
interface HeaderProps {
13+
columns: Column[]
14+
}
15+
16+
export const Header: React.FC<HeaderProps> = ({ columns }) => {
17+
return (
18+
<div className={baseClass}>
19+
<div className={`${baseClass}__cell`}>{/* Drag handle column header */}</div>
20+
{columns.map((col) => (
21+
<div className={`${baseClass}__cell`} key={col.name}>
22+
{col.label || col.name}
23+
</div>
24+
))}
25+
</div>
26+
)
27+
}

‎packages/ui/src/elements/TreeView/NestedSectionsTable/Row/index.scss‎

Lines changed: 311 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,311 @@
1+
@keyframes spinner-bar--1 {
2+
0% {
3+
transform: translateY(-1px);
4+
}
5+
50% {
6+
transform: translateY(1px);
7+
}
8+
100% {
9+
transform: translateY(-1px);
10+
}
11+
}
12+
13+
@keyframes spinner-bar--2 {
14+
0% {
15+
transform: translateY(1px);
16+
}
17+
50% {
18+
transform: translateY(-1px);
19+
}
20+
100% {
21+
transform: translateY(1px);
22+
}
23+
}
24+
25+
@keyframes spinner-bar--3 {
26+
0% {
27+
transform: translateY(-1px);
28+
}
29+
50% {
30+
transform: translateY(1px);
31+
}
32+
100% {
33+
transform: translateY(-1px);
34+
}
35+
}
36+
37+
.nested-sections-table-row-wrapper {
38+
width: 100%;
39+
overflow-x: auto;
40+
}
41+
42+
.nested-sections-table-row {
43+
display: table;
44+
min-width: 100%;
45+
46+
--cell-inline-padding-start: calc(var(--base) * 0.6);
47+
--cell-inline-padding-end: calc(var(--base) * 0.6);
48+
49+
&__header {
50+
display: table-header-group;
51+
}
52+
53+
&__header-cell {
54+
display: table-cell;
55+
color: var(--theme-elevation-400);
56+
vertical-align: top;
57+
padding-block: calc(var(--base) * 0.6);
58+
padding-inline-start: var(--cell-inline-padding-start);
59+
padding-inline-end: var(--cell-inline-padding-end);
60+
position: relative;
61+
z-index: 1;
62+
63+
[dir='rtl'] & {
64+
text-align: right;
65+
}
66+
&:first-child {
67+
--cell-inline-padding-start: calc(var(--base) * (0.8));
68+
}
69+
&:last-child {
70+
--cell-inline-padding-end: calc(var(--base) * (0.8));
71+
}
72+
}
73+
74+
&__row,
75+
&__placeholder-row {
76+
display: table-row;
77+
}
78+
79+
&__row-actions {
80+
display: flex;
81+
align-items: center;
82+
gap: calc(var(--base) * 0.4);
83+
color: var(--theme-elevation-600);
84+
}
85+
86+
&__tree-toggle {
87+
color: var(--theme-elevation-600);
88+
display: flex;
89+
height: 20px;
90+
width: 20px;
91+
justify-content: center;
92+
align-items: center;
93+
94+
.btn__label {
95+
display: flex;
96+
}
97+
98+
&:hover {
99+
color: var(--theme-elevation-400);
100+
}
101+
}
102+
103+
&__tree-toggle-placeholder {
104+
width: 20px;
105+
height: 20px;
106+
display: inline-block;
107+
}
108+
109+
&__tree-toggle-spinner {
110+
display: flex;
111+
align-items: center;
112+
justify-content: center;
113+
gap: 3px;
114+
height: 12px;
115+
}
116+
117+
&__spinner-bar {
118+
width: 1px;
119+
background-color: currentColor;
120+
height: 8px;
121+
border-radius: 3px;
122+
123+
&:nth-child(1) {
124+
animation: spinner-bar--1 1s infinite ease-in-out;
125+
}
126+
127+
&:nth-child(2) {
128+
animation: spinner-bar--2 1s infinite ease-in-out;
129+
}
130+
131+
&:nth-child(3) {
132+
animation: spinner-bar--3 1s infinite ease-in-out;
133+
}
134+
}
135+
136+
&__cell {
137+
display: table-cell;
138+
padding: 8px 12px;
139+
vertical-align: middle;
140+
position: relative;
141+
background: var(--cell-bg-color);
142+
border-radius: 0;
143+
border-top: 1px solid var(--cell-border-color);
144+
border-bottom: 1px solid var(--cell-border-color);
145+
146+
&:first-child {
147+
padding-inline-start: calc(var(--base) * (0.8));
148+
border-left: 1px solid var(--cell-border-color);
149+
border-top-left-radius: var(--style-radius-s);
150+
border-bottom-left-radius: var(--style-radius-s);
151+
}
152+
&:nth-last-child(2) {
153+
padding-inline-end: calc(var(--base) * (0.8));
154+
border-right: 1px solid var(--cell-border-color);
155+
border-top-right-radius: var(--style-radius-s);
156+
border-bottom-right-radius: var(--style-radius-s);
157+
}
158+
}
159+
160+
// When a selected section is followed by another selected section
161+
&__section--selected + &__section--selected &__cell,
162+
&__section--selected + &__section--selected-descendant &__cell,
163+
&__section--selected-descendant + &__section--selected &__cell,
164+
&__section--selected-descendant + &__section--selected-descendant &__cell {
165+
border-top: none;
166+
167+
&:first-child {
168+
border-top-left-radius: 0;
169+
}
170+
&:nth-last-child(2) {
171+
border-top-right-radius: 0;
172+
}
173+
}
174+
175+
// Selected section followed by another selected section - remove bottom radius and add inner border
176+
&__section--selected:has(+ &__section--selected) {
177+
.nested-sections-table-row__cell {
178+
&::after {
179+
content: '';
180+
position: absolute;
181+
bottom: -1px;
182+
left: 0;
183+
height: 1px;
184+
right: 0;
185+
background-color: var(--cell-inner-border-color);
186+
z-index: 1;
187+
}
188+
189+
&:first-child {
190+
border-bottom-left-radius: 0;
191+
}
192+
&:nth-last-child(2) {
193+
border-bottom-right-radius: 0;
194+
}
195+
}
196+
}
197+
198+
&__section--selected:has(+ &__section--selected-descendant),
199+
&__section--selected-descendant:has(+ &__section--selected),
200+
&__section--selected-descendant:has(+ &__section--selected-descendant) {
201+
.nested-sections-table-row__cell {
202+
&::after {
203+
content: '';
204+
position: absolute;
205+
bottom: -1px;
206+
left: 0;
207+
height: 1px;
208+
right: 0;
209+
background-color: var(--cell-inner-border-color);
210+
z-index: 1;
211+
}
212+
213+
&:first-child {
214+
border-bottom-left-radius: 0;
215+
}
216+
&:nth-last-child(2) {
217+
border-bottom-right-radius: 0;
218+
}
219+
}
220+
}
221+
222+
&__section {
223+
position: relative;
224+
display: table-row-group;
225+
outline: 1px solid transparent;
226+
--cell-bg-color: var(--theme-elevation-50);
227+
--cell-border-color: var(--theme-elevation-50);
228+
}
229+
230+
&__section--odd {
231+
--cell-bg-color: var(--theme-elevation-0);
232+
--cell-border-color: var(--theme-elevation-0);
233+
}
234+
235+
&__section--target {
236+
outline: 1px solid var(--theme-success-400);
237+
border-radius: var(--style-radius-s);
238+
z-index: 1;
239+
}
240+
241+
&__section--hovered {
242+
z-index: 1;
243+
outline: 1px solid var(--theme-elevation-200);
244+
transition:
245+
background-color 0.2s ease-in-out,
246+
outline 0.2s ease-in-out;
247+
}
248+
249+
&__section--selected {
250+
--cell-bg-color: var(--theme-success-50);
251+
--cell-border-color: var(--theme-success-500);
252+
--cell-inner-border-color: var(--theme-success-200);
253+
}
254+
255+
&__section--selected-descendant {
256+
--cell-bg-color: color-mix(in srgb, var(--theme-success-50) 40%, transparent);
257+
--cell-border-color: var(--theme-success-500);
258+
--cell-inner-border-color: var(--theme-success-200);
259+
}
260+
261+
&__section--selected-descendant.nested-sections-table-row__section--odd {
262+
--cell-bg-color: color-mix(in srgb, var(--theme-success-50) 40%, transparent);
263+
}
264+
265+
&__section--selected.nested-sections-table-row__section--dragging {
266+
opacity: 0.4;
267+
}
268+
269+
&__section--invalid-target {
270+
opacity: 0.4;
271+
}
272+
273+
&__placeholder-section {
274+
display: table-row-group;
275+
pointer-events: none;
276+
height: 36px;
277+
}
278+
279+
&__placeholder-row {
280+
.nested-sections-table-row__cell {
281+
padding: 0;
282+
283+
&:first-child {
284+
.nested-sections-table-row__placeholder-cell-bg {
285+
border-radius: var(--style-radius-s) 0 0 var(--style-radius-s);
286+
// border-left: 1px solid var(--theme-elevation-150);
287+
}
288+
}
289+
&:last-child {
290+
.nested-sections-table-row__placeholder-cell-bg {
291+
right: 0px;
292+
border-radius: 0 var(--style-radius-s) var(--style-radius-s) 0;
293+
// border-right: 1px solid var(--theme-elevation-150);
294+
}
295+
}
296+
}
297+
}
298+
299+
&__placeholder-cell-bg {
300+
// border: 1px solid var(--theme-elevation-100);
301+
height: calc(100% - 10px);
302+
border-right: none;
303+
border-left: none;
304+
position: absolute;
305+
top: 50%;
306+
bottom: 0;
307+
left: 0;
308+
right: 0;
309+
transform: translateY(-50%);
310+
}
311+
}

0 commit comments

Comments
 (0)