@tanstack/table-devtools/dist/components/ResizableSplit.js

Devtools for TanStack Table.

import { useStyles } from "../styles/use-styles.js";
import { createSignal, onCleanup } from "solid-js";
import { className, delegateEvents, effect, insert, setAttribute, setStyleProperty, template } from "solid-js/web";

//#region src/components/ResizableSplit.tsx
var _tmpl$ = /*#__PURE__*/ template(`<div><div></div><div role=separator aria-orientation=vertical aria-valuemin=15 aria-valuemax=85></div><div style="flex:1 1 0">`);
const DEFAULT_LEFT_PERCENT = 50;
const MIN_PANEL_PERCENT = 15;
const MAX_PANEL_PERCENT = 85;
function ResizableSplit(props) {
	const styles = useStyles();
	const [leftPercent, setLeftPercent] = createSignal(DEFAULT_LEFT_PERCENT);
	let cleanupDrag;
	onCleanup(() => {
		cleanupDrag?.();
	});
	const handleMouseDown = (e) => {
		e.preventDefault();
		cleanupDrag?.();
		const container = e.currentTarget.parentElement;
		if (!container) return;
		const previousCursor = document.body.style.cursor;
		const previousUserSelect = document.body.style.userSelect;
		const onMouseMove = (moveEvent) => {
			const rect = container.getBoundingClientRect();
			const x = moveEvent.clientX - rect.left;
			const percent = Math.max(MIN_PANEL_PERCENT, Math.min(MAX_PANEL_PERCENT, x / rect.width * 100));
			setLeftPercent(percent);
		};
		cleanupDrag = () => {
			document.removeEventListener("mousemove", onMouseMove);
			document.removeEventListener("mouseup", onMouseUp);
			document.body.style.cursor = previousCursor;
			document.body.style.userSelect = previousUserSelect;
			cleanupDrag = void 0;
		};
		const onMouseUp = () => cleanupDrag?.();
		document.addEventListener("mousemove", onMouseMove);
		document.addEventListener("mouseup", onMouseUp);
		document.body.style.cursor = "col-resize";
		document.body.style.userSelect = "none";
	};
	return (() => {
		var _el$ = _tmpl$(), _el$2 = _el$.firstChild, _el$3 = _el$2.nextSibling, _el$4 = _el$3.nextSibling;
		insert(_el$2, () => props.left);
		_el$3.$$mousedown = handleMouseDown;
		insert(_el$4, () => props.right);
		effect((_p$) => {
			var _v$ = styles().resizableSplitContainer, _v$2 = `${styles().section} ${styles().featuresSection}`, _v$3 = `0 0 ${leftPercent()}%`, _v$4 = styles().resizeHandle, _v$5 = leftPercent(), _v$6 = `${styles().section} ${styles().featuresSection}`;
			_v$ !== _p$.e && className(_el$, _p$.e = _v$);
			_v$2 !== _p$.t && className(_el$2, _p$.t = _v$2);
			_v$3 !== _p$.a && setStyleProperty(_el$2, "flex", _p$.a = _v$3);
			_v$4 !== _p$.o && className(_el$3, _p$.o = _v$4);
			_v$5 !== _p$.i && setAttribute(_el$3, "aria-valuenow", _p$.i = _v$5);
			_v$6 !== _p$.n && className(_el$4, _p$.n = _v$6);
			return _p$;
		}, {
			e: void 0,
			t: void 0,
			a: void 0,
			o: void 0,
			i: void 0,
			n: void 0
		});
		return _el$;
	})();
}
delegateEvents(["mousedown"]);

//#endregion
export { ResizableSplit };