Skip to content
This repository was archived by the owner on Mar 25, 2025. It is now read-only.

Commit 01ff635

Browse files
Anton BilovusTigge
Anton Bilovus
authored and
Tigge
committed
refactor(draggable): moves drag handle inside DraggableListItem
Moves drag handle inside `DraggableListItem` so it can be easily styled, for example, wrapped in the border.
1 parent 0f4adf9 commit 01ff635

File tree

2 files changed

+144
-119
lines changed

2 files changed

+144
-119
lines changed

‎packages/core/src/DraggableList/__snapshots__/index.test.tsx.snap‎

Lines changed: 106 additions & 96 deletions
Original file line numberDiff line numberDiff line change
@@ -41,11 +41,6 @@ exports[`DraggableList DraggableList 1`] = `
4141
-webkit-box-align: center;
4242
-ms-flex-align: center;
4343
align-items: center;
44-
-webkit-box-pack: justify;
45-
-webkit-justify-content: space-between;
46-
-ms-flex-pack: justify;
47-
justify-content: space-between;
48-
width: 100%;
4944
height: 48px;
5045
}
5146
@@ -68,6 +63,11 @@ exports[`DraggableList DraggableList 1`] = `
6863
-webkit-box-align: center;
6964
-ms-flex-align: center;
7065
align-items: center;
66+
-webkit-box-pack: justify;
67+
-webkit-justify-content: space-between;
68+
-ms-flex-pack: justify;
69+
justify-content: space-between;
70+
width: 100%;
7171
}
7272
7373
.c8 {
@@ -120,30 +120,32 @@ exports[`DraggableList DraggableList 1`] = `
120120
className="c3"
121121
disabled={false}
122122
>
123-
<p>
124-
1
125-
</p>
126-
</div>
127-
<div
128-
className="c4"
129-
onMouseDown={[Function]}
130-
onMouseUp={[Function]}
131-
>
132-
<span
133-
className="c5"
134-
role="img"
135-
size="medium"
123+
<div>
124+
<p>
125+
1
126+
</p>
127+
</div>
128+
<div
129+
className="c4"
130+
onMouseDown={[Function]}
131+
onMouseUp={[Function]}
136132
>
137-
<svg
138-
height="1em"
139-
viewBox="0 0 24 24"
140-
width="1em"
133+
<span
134+
className="c5"
135+
role="img"
136+
size="medium"
141137
>
142-
<path
143-
d="m20 9h-16v2h16v-2zm-16 6h16v-2h-16v2z"
144-
/>
145-
</svg>
146-
</span>
138+
<svg
139+
height="1em"
140+
viewBox="0 0 24 24"
141+
width="1em"
142+
>
143+
<path
144+
d="m20 9h-16v2h16v-2zm-16 6h16v-2h-16v2z"
145+
/>
146+
</svg>
147+
</span>
148+
</div>
147149
</div>
148150
</div>
149151
<div
@@ -167,30 +169,32 @@ exports[`DraggableList DraggableList 1`] = `
167169
className="c3"
168170
disabled={false}
169171
>
170-
<p>
171-
2
172-
</p>
173-
</div>
174-
<div
175-
className="c4"
176-
onMouseDown={[Function]}
177-
onMouseUp={[Function]}
178-
>
179-
<span
180-
className="c5"
181-
role="img"
182-
size="medium"
172+
<div>
173+
<p>
174+
2
175+
</p>
176+
</div>
177+
<div
178+
className="c4"
179+
onMouseDown={[Function]}
180+
onMouseUp={[Function]}
183181
>
184-
<svg
185-
height="1em"
186-
viewBox="0 0 24 24"
187-
width="1em"
182+
<span
183+
className="c5"
184+
role="img"
185+
size="medium"
188186
>
189-
<path
190-
d="m20 9h-16v2h16v-2zm-16 6h16v-2h-16v2z"
191-
/>
192-
</svg>
193-
</span>
187+
<svg
188+
height="1em"
189+
viewBox="0 0 24 24"
190+
width="1em"
191+
>
192+
<path
193+
d="m20 9h-16v2h16v-2zm-16 6h16v-2h-16v2z"
194+
/>
195+
</svg>
196+
</span>
197+
</div>
194198
</div>
195199
</div>
196200
<div
@@ -214,30 +218,32 @@ exports[`DraggableList DraggableList 1`] = `
214218
className="c3"
215219
disabled={false}
216220
>
217-
<p>
218-
3
219-
</p>
220-
</div>
221-
<div
222-
className="c4"
223-
onMouseDown={[Function]}
224-
onMouseUp={[Function]}
225-
>
226-
<span
227-
className="c5"
228-
role="img"
229-
size="medium"
221+
<div>
222+
<p>
223+
3
224+
</p>
225+
</div>
226+
<div
227+
className="c4"
228+
onMouseDown={[Function]}
229+
onMouseUp={[Function]}
230230
>
231-
<svg
232-
height="1em"
233-
viewBox="0 0 24 24"
234-
width="1em"
231+
<span
232+
className="c5"
233+
role="img"
234+
size="medium"
235235
>
236-
<path
237-
d="m20 9h-16v2h16v-2zm-16 6h16v-2h-16v2z"
238-
/>
239-
</svg>
240-
</span>
236+
<svg
237+
height="1em"
238+
viewBox="0 0 24 24"
239+
width="1em"
240+
>
241+
<path
242+
d="m20 9h-16v2h16v-2zm-16 6h16v-2h-16v2z"
243+
/>
244+
</svg>
245+
</span>
246+
</div>
241247
</div>
242248
</div>
243249
<div
@@ -260,9 +266,11 @@ exports[`DraggableList DraggableList 1`] = `
260266
className="c3"
261267
disabled={true}
262268
>
263-
<p>
264-
4
265-
</p>
269+
<div>
270+
<p>
271+
4
272+
</p>
273+
</div>
266274
</div>
267275
</div>
268276
<div
@@ -286,30 +294,32 @@ exports[`DraggableList DraggableList 1`] = `
286294
className="c3"
287295
disabled={false}
288296
>
289-
<p>
290-
5
291-
</p>
292-
</div>
293-
<div
294-
className="c4"
295-
onMouseDown={[Function]}
296-
onMouseUp={[Function]}
297-
>
298-
<span
299-
className="c5"
300-
role="img"
301-
size="medium"
297+
<div>
298+
<p>
299+
5
300+
</p>
301+
</div>
302+
<div
303+
className="c4"
304+
onMouseDown={[Function]}
305+
onMouseUp={[Function]}
302306
>
303-
<svg
304-
height="1em"
305-
viewBox="0 0 24 24"
306-
width="1em"
307+
<span
308+
className="c5"
309+
role="img"
310+
size="medium"
307311
>
308-
<path
309-
d="m20 9h-16v2h16v-2zm-16 6h16v-2h-16v2z"
310-
/>
311-
</svg>
312-
</span>
312+
<svg
313+
height="1em"
314+
viewBox="0 0 24 24"
315+
width="1em"
316+
>
317+
<path
318+
d="m20 9h-16v2h16v-2zm-16 6h16v-2h-16v2z"
319+
/>
320+
</svg>
321+
</span>
322+
</div>
313323
</div>
314324
</div>
315325
<div

‎packages/core/src/DraggableList/index.tsx‎

Lines changed: 38 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -20,8 +20,6 @@ type BaseProps = React.HTMLAttributes<BaseElement>
2020
const DraggableItem = styled.div`
2121
display: flex;
2222
align-items: center;
23-
justify-content: space-between;
24-
width: 100%;
2523
height: ${componentSize.large};
2624
`
2725

@@ -36,15 +34,52 @@ const DragHandleIcon = () => (
3634
</svg>
3735
)
3836

39-
export const DraggableListItem = styled.div<{
37+
const DraggableListItemStyled = styled.div<{
4038
readonly disabled?: boolean
4139
}>`
4240
display: flex;
4341
height: 100%;
4442
flex-grow: 1;
4543
align-items: center;
44+
justify-content: space-between;
45+
width: 100%;
4646
`
4747

48+
interface DraggableListItemProps extends BaseProps {
49+
readonly disabled?: boolean
50+
readonly className?: string
51+
}
52+
53+
export const DraggableListItem: React.FC<DraggableListItemProps> = ({
54+
children,
55+
...props
56+
}) => {
57+
const onGrabHandle = useCallback<MouseEventHandler<HTMLDivElement>>(e => {
58+
e.currentTarget.parentElement?.parentElement?.setAttribute(
59+
'draggable',
60+
'true'
61+
)
62+
}, [])
63+
64+
const onReleaseHandle = useCallback<MouseEventHandler<HTMLDivElement>>(e => {
65+
e.currentTarget.parentElement?.parentElement?.setAttribute(
66+
'draggable',
67+
'false'
68+
)
69+
}, [])
70+
71+
return (
72+
<DraggableListItemStyled {...props}>
73+
<div>{children}</div>
74+
{props.disabled === true ? null : (
75+
<DraggableHandle onMouseDown={onGrabHandle} onMouseUp={onReleaseHandle}>
76+
<Icon icon={DragHandleIcon} />
77+
</DraggableHandle>
78+
)}
79+
</DraggableListItemStyled>
80+
)
81+
}
82+
4883
/**
4984
* Draggable list
5085
*
@@ -120,18 +155,6 @@ export const DraggableList: React.FC<DraggableListProps> = ({
120155
onChange(order)
121156
}, [order, onChange])
122157

123-
const onGrabHandle = useCallback<MouseEventHandler<HTMLDivElement>>(e => {
124-
if (e.currentTarget.parentElement !== null) {
125-
e.currentTarget.parentElement.setAttribute('draggable', 'true')
126-
}
127-
}, [])
128-
129-
const onReleaseHandle = useCallback<MouseEventHandler<HTMLDivElement>>(e => {
130-
if (e.currentTarget.parentElement !== null) {
131-
e.currentTarget.parentElement.setAttribute('draggable', 'false')
132-
}
133-
}, [])
134-
135158
return (
136159
<div {...props}>
137160
{order.map((childIndex, index) => {
@@ -150,14 +173,6 @@ export const DraggableList: React.FC<DraggableListProps> = ({
150173
}}
151174
>
152175
{el}
153-
{isLocked ? null : (
154-
<DraggableHandle
155-
onMouseDown={onGrabHandle}
156-
onMouseUp={onReleaseHandle}
157-
>
158-
<Icon icon={DragHandleIcon} />
159-
</DraggableHandle>
160-
)}
161176
</DraggableItem>
162177
<Divider />
163178
</div>

0 commit comments

Comments
 (0)