a-multilayout-splitter/dist/DragHandle/DragHandle.js

A React package designed to facilitate the division of your views into distinct sections, offering effortless resizing and support for intricate layouts.

import{Fragment as _Fragment,jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";import"../style/DragHandle.css";import SplitUtils from"../utils/SplitUtils";function DragHandle({mode:e,onMouseDown:t,onTouchStart:i,props:l,position:s}){function n(t,e,i,l){t=t.target.parentElement.parentElement;SplitUtils.isSectionOpen(t,i+1,e)&&SplitUtils.isSectionOpen(t,i,e)?SplitUtils.closeSplitter(t,i,e,"close",l):!SplitUtils.isSectionOpen(t,i+1,e)&&SplitUtils.isSectionOpen(t,i,e)?SplitUtils.openSplitter(t,i+1,e,"open",l):SplitUtils.openSplitter(t,i,e,"open",l)}function a(t,e,i,l){t=t.target.parentElement.parentElement;SplitUtils.isSectionOpen(t,i+1,e)&&SplitUtils.isSectionOpen(t,i,e)?SplitUtils.closeSplitter(t,i+1,e,"close",l):(SplitUtils.isSectionOpen(t,i+1,e)&&SplitUtils.isSectionOpen(t,i,e),SplitUtils.openSplitter(t,i,e,"open",l))}function o(t){var e;null!=(e=t.target.parentElement.firstChild)&&e.classList.remove("a-icon-hide"),null!=(e=t.target.parentElement.lastChild)&&e.classList.remove("a-icon-hide")}function r(t){var e;null!=(e=t.target.parentElement.firstChild)&&e.classList.add("a-icon-hide"),null!=(e=t.target.parentElement.lastChild)&&e.classList.add("a-icon-hide")}return _jsx("div",Object.assign({},l,{onMouseDown:l.className.includes("a-split-handle-disable")?()=>{}:t,onTouchStart:l.className.includes("a-split-handle-disable")?()=>{}:i,onMouseOver:l.className.includes("a-split-handle-disable")?()=>{}:function(t){var e;null!=(e=t.target.firstChild)&&e.classList.remove("a-icon-hide"),null!=(e=t.target.lastChild)&&e.classList.remove("a-icon-hide")},onMouseOut:l.className.includes("a-split-handle-disable")?()=>{}:function(t){var e;null!=(e=t.target.firstChild)&&e.classList.add("a-icon-hide"),null!=(e=t.target.lastChild)&&e.classList.add("a-icon-hide")}},{children:l.className.includes("a-split-handle-disable")||l.className.includes("a-split-line-bar")?_jsx(_Fragment,{}):_jsxs(_Fragment,{children:[_jsx("button",{className:`a-splitter-collapse-icon splitter-${e}-${"horizontal"===e?"left":"top"}-icon a-icon-hide`,onClick:t=>{"horizontal"===e?n(t,"horizontal",s,"left"):n(t,"vertical",s,"top")},onMouseOver:o,onMouseOut:r}),_jsx("div",{className:"a-splitter-handlebar-icon",onMouseOver:o,onMouseOut:r}),_jsx("button",{className:`a-splitter-collapse-icon splitter-${e}-${"horizontal"===e?"right":"bottom"}-icon a-icon-hide`,onClick:t=>{"horizontal"===e?a(t,"horizontal",s,"right"):a(t,"vertical",s,"bottom")},onMouseOver:o,onMouseOut:r})]})}))}export default DragHandle;