SortableListItem.jsx — GenerateBlocks 1.9.0

generateblocks / src / components / dnd / SortableListItem.jsx

generateblocks / src / components / dnd Last commit date

SortableList.jsx 2 years ago SortableListItem.jsx 2 years ago editor.scss 2 years ago index.js 2 years ago

SortableListItem.jsx

113 lines

1	import { __ } from '@wordpress/i18n';
2	import { Button } from '@wordpress/components';
3	import { useSortable } from '@dnd-kit/sortable';
4	import { CSS } from '@dnd-kit/utilities';
5	import classnames from 'classnames';
6
7	const verticalDots = (
8	<svg
9	xmlns="http://www.w3.org/2000/svg"
10	viewBox="0 0 256 256"
11	>
12	<rect
13	width="256"
14	height="256"
15	fill="none"
16	/>
17	<circle
18	cx="91"
19	cy="60"
20	r="16"
21	/>
22	<circle
23	cx="91"
24	cy="128"
25	r="16"
26	/>
27	<circle
28	cx="91"
29	cy="196"
30	r="16"
31	/>
32	<circle
33	cx="161"
34	cy="60"
35	r="16"
36	/>
37	<circle
38	cx="161"
39	cy="128"
40	r="16"
41	/>
42	<circle
43	cx="161"
44	cy="196"
45	r="16"
46	/>
47	</svg>
48	);
49
50	export function SortableListItem( {
51	children,
52	id,
53	dragHandle = true,
54	dragHandleLabel = __( 'Reorder Item', 'generateblocks' ),
55	as = 'li',
56	className = '',
57	disabled = false,
58	} ) {
59	const {
60	active,
61	attributes,
62	listeners,
63	setNodeRef,
64	transform,
65	transition,
66	isDragging,
67	} = useSortable( {
68	id,
69	disabled,
70	data: {
71	disabled,
72	},
73	} );
74
75	const style = {
76	transform: CSS.Transform.toString( transform ),
77	transition,
78	};
79
80	if ( active && active.id === id ) {
81	style.zIndex = 1;
82	}
83
84	const Element = as;
85
86	const elementProps = dragHandle ? {
87	ref: setNodeRef,
88	style,
89	} : {
90	ref: setNodeRef,
91	style,
92	...attributes,
93	...listeners,
94	};
95
96	return (
97	<Element className={ classnames( 'gb-sortable-listitem', className, isDragging && 'is-dragging' ) } { ...elementProps }>
98	{ dragHandle && (
99	<Button
100	className="gb-sortable-listitem__handle"
101	variant="tertiary"
102	showTooltip={ false }
103	icon={ verticalDots }
104	label={ dragHandleLabel }
105	{ ...attributes }
106	{ ...listeners }
107	/>
108	) }
109	{ children }
110	</Element>
111	);
112	}
113