Blame · DragHandle.tsx

b69ab31	1	/**
b69ab31	2	* Copyright (c) Meta Platforms, Inc. and affiliates.
b69ab31	3	*
b69ab31	4	* This source code is licensed under the MIT license found in the
b69ab31	5	* LICENSE file in the root directory of this source tree.
b69ab31	6	*/
b69ab31	7
b69ab31	8	import type * as stylex from '@stylexjs/stylex';
b69ab31	9	import type {PointerEventHandler, ReactElement} from 'react';
b69ab31	10
b69ab31	11	import {Icon} from 'isl-components/Icon';
b69ab31	12	import {stylexPropsWithClassName} from 'isl-components/utils';
b69ab31	13
b69ab31	14	export type DragHandler = (x: number, y: number, isDragging: boolean) => void;
b69ab31	15
b69ab31	16	/**
b69ab31	17	* A drag handle that fires events on drag-n-drop.
b69ab31	18	*
b69ab31	19	* At the start of dragging, or during dragging, call `onDrag(x, y, true)`.
b69ab31	20	* At the end of dragging, call `onDrag(x, y, false)`.
b69ab31	21	* `x`, `y` are relative to viewport, comparable to `getBoundingClientRect()`.
b69ab31	22	*
b69ab31	23	* This component renders children or the "gripper" icon to grab and updates
b69ab31	24	* the cursor style. It does not draw the element being dragged during
b69ab31	25	* dragging. The callstie might use a `position: fixed; left: 0; top: 0`
b69ab31	26	* element and move it using `transform: translate(x,y)` during dragging.
b69ab31	27	*/
b69ab31	28	export function DragHandle(props: {
b69ab31	29	onDrag?: DragHandler;
b69ab31	30	children?: ReactElement;
b69ab31	31	xstyle?: stylex.StyleXStyles;
b69ab31	32	}): ReactElement {
b69ab31	33	return (
b69ab31	34	<span
b69ab31	35	{...dragHandleProps(props.onDrag)}
b69ab31	36	{...stylexPropsWithClassName(props.xstyle, 'drag-handle')}>
b69ab31	37	{props.children ?? <Icon icon="gripper" />}
b69ab31	38	</span>
b69ab31	39	);
b69ab31	40	}
b69ab31	41
b69ab31	42	/**
b69ab31	43	* Return React properties to handle customized dragging.
b69ab31	44	*
b69ab31	45	* At the start of dragging, or during dragging, call `onDrag(x, y, true)`.
b69ab31	46	* At the end of dragging, call `onDrag(x, y, false)`.
b69ab31	47	* `x`, `y` are relative to viewport, comparable to `getBoundingClientRect()`.
b69ab31	48	*/
b69ab31	49	export function dragHandleProps(onDrag?: DragHandler): {
b69ab31	50	onDragStart?: React.DragEventHandler<unknown>;
b69ab31	51	onPointerDown?: PointerEventHandler<unknown>;
b69ab31	52	} {
b69ab31	53	if (onDrag == null) {
b69ab31	54	return {};
b69ab31	55	}
b69ab31	56	let pointerDown = false;
b69ab31	57	const handlePointerDown: PointerEventHandler = e => {
b69ab31	58	if (e.isPrimary && !pointerDown) {
b69ab31	59	// e.target might be unmounted and lose events, listen on `document.body` instead.
b69ab31	60	const body = (e.target as HTMLSpanElement).ownerDocument.body;
b69ab31	61
b69ab31	62	const handlePointerMove = (e: PointerEvent) => {
b69ab31	63	onDrag(e.clientX, e.clientY, true);
b69ab31	64	};
b69ab31	65	const handlePointerUp = (e: PointerEvent) => {
b69ab31	66	body.removeEventListener('pointermove', handlePointerMove as EventListener);
b69ab31	67	body.removeEventListener('pointerup', handlePointerUp as EventListener);
b69ab31	68	body.removeEventListener('pointerleave', handlePointerUp as EventListener);
b69ab31	69	body.releasePointerCapture(e.pointerId);
b69ab31	70	body.style.removeProperty('cursor');
b69ab31	71	pointerDown = false;
b69ab31	72	onDrag(e.clientX, e.clientY, false);
b69ab31	73	};
b69ab31	74
b69ab31	75	body.setPointerCapture(e.pointerId);
b69ab31	76	body.addEventListener('pointermove', handlePointerMove);
b69ab31	77	body.addEventListener('pointerup', handlePointerUp);
b69ab31	78	body.addEventListener('pointerleave', handlePointerUp);
b69ab31	79
b69ab31	80	body.style.cursor = 'grabbing';
b69ab31	81	pointerDown = true;
b69ab31	82
b69ab31	83	onDrag(e.clientX, e.clientY, true);
b69ab31	84	}
b69ab31	85	};
b69ab31	86
b69ab31	87	return {
b69ab31	88	onDragStart: e => e.preventDefault(),
b69ab31	89	onPointerDown: handlePointerDown,
b69ab31	90	};
b69ab31	91	}