@tanstack/table-devtools
Version:
Devtools for TanStack Table.
91 lines (89 loc) • 4.13 kB
JavaScript
import { useStyles } from "../styles/use-styles.js";
import { createSignal, onCleanup } from "solid-js";
import { addEventListener, className, delegateEvents, effect, insert, setAttribute, setStyleProperty, template } from "solid-js/web";
//#region src/components/ThreeWayResizableSplit.tsx
var _tmpl$ = /*#__PURE__*/ template(`<div><div></div><div role=separator aria-orientation=vertical aria-valuemin=10 aria-valuemax=80></div><div></div><div role=separator aria-orientation=vertical aria-valuemin=10 aria-valuemax=80></div><div style="flex:1 1 0">`);
const DEFAULT_LEFT_PERCENT = 33.33;
const DEFAULT_MIDDLE_PERCENT = 33.33;
const MIN_PANEL_PERCENT = 10;
const MAX_PANEL_PERCENT = 80;
function ThreeWayResizableSplit(props) {
const styles = useStyles();
const [leftPercent, setLeftPercent] = createSignal(DEFAULT_LEFT_PERCENT);
const [middlePercent, setMiddlePercent] = createSignal(DEFAULT_MIDDLE_PERCENT);
let cleanupDrag;
onCleanup(() => {
cleanupDrag?.();
});
const makeDragHandler = (which) => (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 startLeft = leftPercent();
const startMiddle = middlePercent();
const onMouseMove = (moveEvent) => {
const rect = container.getBoundingClientRect();
const percent = (moveEvent.clientX - rect.left) / rect.width * 100;
if (which === "left") {
const clamped = Math.max(MIN_PANEL_PERCENT, Math.min(startLeft + startMiddle - MIN_PANEL_PERCENT, Math.min(MAX_PANEL_PERCENT, percent)));
setLeftPercent(clamped);
setMiddlePercent(startLeft + startMiddle - clamped);
} else {
const newMiddle = Math.max(MIN_PANEL_PERCENT, Math.min(MAX_PANEL_PERCENT, percent - startLeft));
setMiddlePercent(newMiddle);
}
};
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, _el$5 = _el$4.nextSibling, _el$6 = _el$5.nextSibling;
insert(_el$2, () => props.left);
addEventListener(_el$3, "mousedown", makeDragHandler("left"), true);
insert(_el$4, () => props.middle);
addEventListener(_el$5, "mousedown", makeDragHandler("right"), true);
insert(_el$6, () => 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$7 = `0 0 ${middlePercent()}%`, _v$8 = styles().resizeHandle, _v$9 = leftPercent() + middlePercent(), _v$0 = `${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);
_v$7 !== _p$.s && setStyleProperty(_el$4, "flex", _p$.s = _v$7);
_v$8 !== _p$.h && className(_el$5, _p$.h = _v$8);
_v$9 !== _p$.r && setAttribute(_el$5, "aria-valuenow", _p$.r = _v$9);
_v$0 !== _p$.d && className(_el$6, _p$.d = _v$0);
return _p$;
}, {
e: void 0,
t: void 0,
a: void 0,
o: void 0,
i: void 0,
n: void 0,
s: void 0,
h: void 0,
r: void 0,
d: void 0
});
return _el$;
})();
}
delegateEvents(["mousedown"]);
//#endregion
export { ThreeWayResizableSplit };