Skip to content

Commit 94493d7

Browse files
JarrodMFleschJarrodMFlesch
committed
cleanup
1 parent 6a7b336 commit 94493d7

File tree

7 files changed

+102
-156
lines changed

7 files changed

+102
-156
lines changed

‎packages/ui/src/elements/DraggableWithClick/index.tsx‎

Lines changed: 0 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -56,14 +56,8 @@ export const DraggableWithClick = ({
5656
}: Props) => {
5757
const id = useId()
5858
const initialPos = useRef({ x: 0, y: 0 })
59-
const dragStartX = useRef(0)
6059
const { attributes, listeners, setNodeRef } = useDraggable({
6160
id,
62-
data: {
63-
get dragStartX() {
64-
return dragStartX.current
65-
},
66-
},
6761
disabled,
6862
})
6963
const isDragging = useRef(false)
@@ -81,7 +75,6 @@ export const DraggableWithClick = ({
8175
const handlePointerDown = React.useCallback(
8276
(e: PointerEvent) => {
8377
initialPos.current = { x: e.clientX, y: e.clientY }
84-
dragStartX.current = e.clientX
8578
isDragging.current = false
8679

8780
const handlePointerMove = (moveEvent: PointerEvent) => {

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

Lines changed: 21 additions & 64 deletions
Original file line numberDiff line numberDiff line change
@@ -40,43 +40,15 @@
4040
}
4141

4242
.nested-sections-table-row {
43-
display: table;
43+
display: table-row;
4444
min-width: 100%;
45+
border-collapse: collapse;
4546

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-
}
47+
&__drag-handler {
48+
cursor: grab;
7249
}
7350

74-
&__row,
75-
&__placeholder-row {
76-
display: table-row;
77-
}
78-
79-
&__row-actions {
51+
&__actions {
8052
display: flex;
8153
align-items: center;
8254
gap: calc(var(--base) * 0.4);
@@ -162,7 +134,7 @@
162134
&__section--selected + &__section--selected-descendant &__cell,
163135
&__section--selected-descendant + &__section--selected &__cell,
164136
&__section--selected-descendant + &__section--selected-descendant &__cell {
165-
border-top: none;
137+
border-top-color: transparent;
166138

167139
&:first-child {
168140
border-top-left-radius: 0;
@@ -172,20 +144,9 @@
172144
}
173145
}
174146

175-
// Selected section followed by another selected section - remove bottom radius and add inner border
147+
// Selected section followed by another selected section - remove bottom radius
176148
&__section--selected:has(+ &__section--selected) {
177149
.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-
189150
&:first-child {
190151
border-bottom-left-radius: 0;
191152
}
@@ -199,17 +160,6 @@
199160
&__section--selected-descendant:has(+ &__section--selected),
200161
&__section--selected-descendant:has(+ &__section--selected-descendant) {
201162
.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-
213163
&:first-child {
214164
border-bottom-left-radius: 0;
215165
}
@@ -224,12 +174,12 @@
224174
display: table-row-group;
225175
outline: 1px solid transparent;
226176
--cell-bg-color: var(--theme-elevation-50);
227-
--cell-border-color: var(--theme-elevation-50);
177+
--cell-border-color: transparent;
228178
}
229179

230180
&__section--odd {
231181
--cell-bg-color: var(--theme-elevation-0);
232-
--cell-border-color: var(--theme-elevation-0);
182+
--cell-border-color: transparent;
233183
}
234184

235185
&__section--target {
@@ -247,21 +197,28 @@
247197
}
248198

249199
&__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);
200+
--cell-bg-color: var(--theme-success-100);
201+
--cell-border-color: var(--theme-success-200);
253202
}
254203

255204
&__section--selected-descendant {
256205
--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);
206+
--cell-border-color: var(--theme-success-200);
259207
}
260208

261209
&__section--selected-descendant.nested-sections-table-row__section--odd {
262210
--cell-bg-color: color-mix(in srgb, var(--theme-success-50) 40%, transparent);
263211
}
264212

213+
&__section--focused {
214+
// --cell-border-color: var(--theme-elevation-400);
215+
--cell-bg-color: var(--theme-elevation-200);
216+
}
217+
218+
&__section--focused.nested-sections-table-row__section--odd {
219+
--cell-bg-color: var(--theme-elevation-200);
220+
}
221+
265222
&__section--selected.nested-sections-table-row__section--dragging {
266223
opacity: 0.4;
267224
}

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

Lines changed: 6 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -41,15 +41,7 @@ interface DivTableRowProps {
4141
placement?: string
4242
targetItem: null | SectionRow
4343
}) => void
44-
onRowClick: ({
45-
event,
46-
from,
47-
row,
48-
}: {
49-
event: React.MouseEvent<HTMLElement>
50-
from: 'dragHandle' | 'row'
51-
row: SectionRow
52-
}) => void
44+
onRowClick: ({ event, row }: { event: React.MouseEvent<HTMLElement>; row: SectionRow }) => void
5345
onRowDrag: (params: { event: PointerEvent; item: null | SectionRow }) => void
5446
onRowKeyPress?: (params: { event: React.KeyboardEvent; row: SectionRow }) => void
5547
openItemIDs?: Set<number | string>
@@ -92,6 +84,7 @@ export const NestedSectionsTableRow: React.FC<DivTableRowProps> = ({
9284
toggleRow,
9385
}) => {
9486
const isOdd = absoluteRowIndex % 2 === 1
87+
const isFocused = focusedRowIndex !== undefined && focusedRowIndex === absoluteRowIndex
9588
const rowRef = React.useRef<HTMLDivElement>(null)
9689

9790
// Focus this row when focusedRowIndex matches
@@ -106,7 +99,6 @@ export const NestedSectionsTableRow: React.FC<DivTableRowProps> = ({
10699
selectRow: (event) => {
107100
onRowClick({
108101
event: event as React.MouseEvent<HTMLElement>,
109-
from: 'row',
110102
row: rowItem,
111103
})
112104
},
@@ -129,6 +121,7 @@ export const NestedSectionsTableRow: React.FC<DivTableRowProps> = ({
129121
targetParentID === rowItem.rowID && `${baseClass}__section--target`,
130122
isRowSelected && `${baseClass}__section--selected`,
131123
hasSelectedAncestor && `${baseClass}__section--selected-descendant`,
124+
isFocused && `${baseClass}__section--focused`,
132125
]
133126
.filter(Boolean)
134127
.join(' ')}
@@ -144,18 +137,15 @@ export const NestedSectionsTableRow: React.FC<DivTableRowProps> = ({
144137
role="button"
145138
tabIndex={0}
146139
>
147-
<div className={`${baseClass}__row`}>
140+
<div className={baseClass}>
148141
<div className={`${baseClass}__cell`} ref={firstCellRef}>
149-
<div className={`${baseClass}__row-actions`}>
142+
<div className={`${baseClass}__actions`}>
150143
<DraggableWithClick
144+
className={`${baseClass}__drag-handler`}
151145
disabled={
152146
hasSelectedAncestor ||
153147
(selectedRowIDs.length > 1 && !selectedRowIDs.includes(rowItem.rowID))
154148
}
155-
onClick={(event) => {
156-
// needed for dragging unselected items
157-
onRowClick({ event, from: 'dragHandle', row: rowItem })
158-
}}
159149
onDrag={(event) => {
160150
onRowDrag({
161151
event,

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

Lines changed: 1 addition & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -30,15 +30,7 @@ interface NestedSectionsTableProps {
3030
placement?: string
3131
targetItem: null | SectionRow
3232
}) => void
33-
onRowClick?: ({
34-
event,
35-
from,
36-
row,
37-
}: {
38-
event: React.MouseEvent<HTMLElement>
39-
from: 'dragHandle' | 'row'
40-
row: SectionRow
41-
}) => void
33+
onRowClick?: ({ event, row }: { event: React.MouseEvent<HTMLElement>; row: SectionRow }) => void
4234
onRowDrag?: (params: { event: PointerEvent; item: null | SectionRow }) => void
4335
onRowKeyPress?: (params: { event: React.KeyboardEvent; row: SectionRow }) => void
4436
openItemIDs?: Set<number | string>

0 commit comments

Comments
 (0)