@myklt/splitter/lib/cjs/index.js

Create resizable split views - like in VS Code

"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),r=require("react-is");function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var i=n(t);function o(e,t){const r=getComputedStyle(t);if(!r)return;let n=e===exports.SplitDirection.Horizontal?t.clientWidth:t.clientHeight;return 0!==n?(e===exports.SplitDirection.Horizontal?n-=parseFloat(r.paddingLeft)+parseFloat(r.paddingRight):n-=parseFloat(r.paddingTop)+parseFloat(r.paddingBottom),n):void 0}
/*! *****************************************************************************
Copyright (c) Microsoft Corporation.

Permission to use, copy, modify, and/or distribute this software for any
purpose with or without fee is hereby granted.

THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
PERFORMANCE OF THIS SOFTWARE.
***************************************************************************** */function a(e,r,n=[],i={condition:!0}){const{condition:o}=i,a=function(e,t){var r={};for(var n in e)Object.prototype.hasOwnProperty.call(e,n)&&t.indexOf(n)<0&&(r[n]=e[n]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var i=0;for(n=Object.getOwnPropertySymbols(e);i<n.length;i++)t.indexOf(n[i])<0&&Object.prototype.propertyIsEnumerable.call(e,n[i])&&(r[n[i]]=e[n[i]])}return r}(i,["condition"]);t.useEffect((()=>(o&&window.addEventListener(e,r,a),()=>{o&&window.removeEventListener(e,r)})),[e,r,o,...n])}!function(e,t){void 0===t&&(t={});var r=t.insertAt;if(e&&"undefined"!=typeof document){var n=document.head||document.getElementsByTagName("head")[0],i=document.createElement("style");i.type="text/css","top"===r&&n.firstChild?n.insertBefore(i,n.firstChild):n.appendChild(i),i.styleSheet?i.styleSheet.cssText=e:i.appendChild(document.createTextNode(e))}}("/* === Main Container === */\r\n.__dbk__container {\r\n  height: 100%;\r\n  width: 100%;\r\n\r\n  display: flex;\r\n  overflow: hidden;\r\n}\r\n\r\n.__dbk__container.Horizontal {\r\n  flex-direction: row;\r\n}\r\n\r\n.__dbk__container.Vertical {\r\n  flex-direction: column;\r\n}\r\n/* ====== */\r\n\r\n/* === Wrapper for each child element === */\r\n.__dbk__child-wrapper {\r\n  height: 100%;\r\n  width: 100%;\r\n}\r\n/* ====== */\r\n\r\n/* === Gutter === */\r\n.__dbk__gutter {\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n}\r\n/* .__dbk__gutter > div {\r\n  background: red;\r\n} */\r\n.__dbk__gutter.Horizontal {\r\n  height: 100%;\r\n  padding: 0 2px;\r\n  flex-direction: column;\r\n}\r\n.__dbk__gutter.Horizontal:hover {\r\n  cursor: col-resize;\r\n}\r\n\r\n.__dbk__gutter.Vertical {\r\n  width: 100%;\r\n  padding: 2px 0;\r\n  flex-direction: row;\r\n}\r\n.__dbk__gutter.Vertical:hover {\r\n  cursor: row-resize;\r\n}\r\n\r\n.__dbk__gutter.Light {\r\n  background: #EDF0EF;\r\n}\r\n.__dbk__gutter.Light:hover > .__dbk__dragger {\r\n  background: #76747B;\r\n}\r\n\r\n.__dbk__gutter.Dark {\r\n  background: #020203;\r\n}\r\n.__dbk__gutter.Dark:hover > .__dbk__dragger {\r\n  background: #9995A3;\r\n}\r\n/* ====== */\r\n\r\n/* === Gutter's Dragger === */\r\n.__dbk__dragger {\r\n  border-radius: 2px;\r\n}\r\n\r\n.__dbk__dragger.Horizontal {\r\n  width: 4px;\r\n  height: 24px;  \r\n}\r\n\r\n.__dbk__dragger.Vertical {\r\n  width: 24px;\r\n  height: 4px;  \r\n}\r\n\r\n.__dbk__dragger.Light {\r\n  background: #A6ACB5;\r\n}\r\n\r\n.__dbk__dragger.Dark {\r\n  background: #434252;\r\n}\r\n/* ====== */");const s=i.default.forwardRef((({className:t,theme:r,draggerClassName:n,direction:i=exports.SplitDirection.Vertical,onDragging:o},a)=>{const s=`__dbk__gutter ${i} ${t||r}`,d=`__dbk__dragger ${i} ${n||r}`;return e.jsx("div",Object.assign({className:s,ref:a,dir:i,onMouseDown:o,onTouchStart:f?o:void 0},{children:e.jsx("div",{className:d},void 0)}),void 0)}));var d;function g(e,t,r){let n,i;return t?(n=e/2,i=e):r?(n=e,i=e/2):(n=e,i=e),{aGutterSize:n,bGutterSize:i}}function c(e,t){switch(t.type){case d.SetIsReadyToCompute:return Object.assign(Object.assign({},e),{isReady:t.payload.isReady});case d.CreatePairs:{const{direction:r,children:n,gutters:i}=t.payload,a=n[0].parentNode;if(!a)throw new Error("Cannot create pairs - parent is undefined.");const s=o(r,a);if(void 0===s)throw new Error(`Cannot create pairs - parent has undefined or zero size: ${s}.`);const d=[];return n.forEach(((e,t)=>{if(t>0){const e=n[t-1],o=n[t],s=i[t-1],g=r===exports.SplitDirection.Horizontal?e.getBoundingClientRect().left:e.getBoundingClientRect().top,c=r===exports.SplitDirection.Horizontal?o.getBoundingClientRect().right:o.getBoundingClientRect().bottom,l=r===exports.SplitDirection.Horizontal?e.getBoundingClientRect().width+s.getBoundingClientRect().width+o.getBoundingClientRect().width:e.getBoundingClientRect().height+s.getBoundingClientRect().height+o.getBoundingClientRect().height,u=r===exports.SplitDirection.Horizontal?s.getBoundingClientRect().width:s.getBoundingClientRect().height,p={idx:t-1,a:e,b:o,gutter:s,parent:a,start:g,end:c,size:l,gutterSize:u,aSizePct:100/n.length,bSizePct:100/n.length};d.push(p)}})),Object.assign(Object.assign({},e),{pairs:d})}case d.StartDragging:{const{gutterIdx:r}=t.payload;return Object.assign(Object.assign({},e),{isDragging:!0,draggingIdx:r})}case d.StopDragging:return Object.assign(Object.assign({},e),{isDragging:!1});case d.CalculateSizes:{const{direction:r,gutterIdx:n}=t.payload,i=e.pairs[n],a=o(r,i.parent);if(!a)throw new Error("Cannot calculate sizes - 'pair.parent' has undefined or zero size.");const s=i.gutter[r===exports.SplitDirection.Horizontal?"clientWidth":"clientHeight"],d=0===n,c=n===e.pairs.length-1,{aGutterSize:l,bGutterSize:u}=g(s,d,c);let p,h,f,_,b;return r===exports.SplitDirection.Horizontal?(p=i.a.getBoundingClientRect().left,h=i.b.getBoundingClientRect().right,_=(i.a.getBoundingClientRect().width+l)/a*100,b=(i.b.getBoundingClientRect().width+u)/a*100,f=i.a.getBoundingClientRect().width+l+u+i.b.getBoundingClientRect().width):(p=i.a.getBoundingClientRect().top,h=i.b.getBoundingClientRect().bottom,_=(i.a.getBoundingClientRect().height+l)/a*100,b=(i.b.getBoundingClientRect().height+u)/a*100,f=i.a.getBoundingClientRect().height+l+u+i.b.getBoundingClientRect().height),e.pairs[n]=Object.assign(Object.assign({},i),{start:p,end:h,size:f,aSizePct:_,bSizePct:b,gutterSize:s}),Object.assign({},e)}default:return e}}function l(e,n=0,i=[]){return t.Children.toArray(e).reduce(((e,o,a)=>(r.isFragment(o)?e.push.apply(e,l(o.props.children,n+1,i.concat(o.key||a))):t.isValidElement(o)?e.push(t.cloneElement(o,{key:i.concat(String(o.key)).join(".")})):"string"!=typeof o&&"number"!=typeof o||e.push(o),e)),[])}!function(e){e[e.SetIsReadyToCompute=0]="SetIsReadyToCompute",e[e.CreatePairs=1]="CreatePairs",e[e.CalculateSizes=2]="CalculateSizes",e[e.StartDragging=3]="StartDragging",e[e.StopDragging=4]="StopDragging"}(d||(d={}));const u=e=>"changedTouches"in e;var p,h;exports.SplitDirection=void 0,(p=exports.SplitDirection||(exports.SplitDirection={})).Horizontal="Horizontal",p.Vertical="Vertical",exports.GutterTheme=void 0,(h=exports.GutterTheme||(exports.GutterTheme={})).Light="Light",h.Dark="Dark";const f="undefined"!=typeof window&&"ontouchstart"in window;function _(e){return e===exports.SplitDirection.Horizontal?"col-resize":"row-resize"}const b={isReady:!1,isDragging:!1,pairs:[]};exports.default=function({direction:r=exports.SplitDirection.Horizontal,minWidths:n=[],minHeights:p=[],initialSizes:h,gutterTheme:z=exports.GutterTheme.Dark,gutterClassName:x,draggerClassName:S,children:w,onResizeStarted:C,onResizeFinished:y,classes:m=[]}){const v=l(w),[D,k]=t.useReducer(c,b),R=t.useRef(null),j=t.useRef([]),E=t.useRef([]);j.current=[],E.current=[];const B=i.default.useCallback((e=>{k({type:d.SetIsReadyToCompute,payload:{isReady:e}})}),[]),I=i.default.useCallback(((e,t)=>{k({type:d.StartDragging,payload:{gutterIdx:t}});const r=D.pairs[t];null==C||C(r.idx),r.a.style.userSelect="none",r.b.style.userSelect="none",r.gutter.style.cursor=_(e),r.parent.style.cursor=_(e),document.body.style.cursor=_(e)}),[D.pairs]),H=i.default.useCallback((()=>{k({type:d.StopDragging});const e=[];for(let t=0;t<D.pairs.length;t++){const n=D.pairs[t],i=o(r,n.parent);if(void 0===i)throw new Error("Cannot call the 'onResizeFinished' callback - parentSize is undefined");if(void 0===n.gutterSize)throw new Error("Cannot call 'onResizeFinished' callback - gutterSize is undefined");const a=0===t,s=t===D.pairs.length-1,d=n.a.getBoundingClientRect()[r===exports.SplitDirection.Horizontal?"width":"height"],{aGutterSize:c,bGutterSize:l}=g(n.gutterSize,a,s),u=(d+c)/i*100;if(e.push(u),s){const t=(n.b.getBoundingClientRect()[r===exports.SplitDirection.Horizontal?"width":"height"]+l)/i*100;e.push(t)}}if(void 0===D.draggingIdx)throw new Error("Could not reset cursor and user-select because 'state.draggingIdx' is undefined");const t=D.pairs[D.draggingIdx];null==y||y(t.idx,e),t.a.style.userSelect="",t.b.style.userSelect="",t.gutter.style.cursor="",t.parent.style.cursor="",document.body.style.cursor=""}),[D.draggingIdx,D.pairs,r]),O=i.default.useCallback(((e,t)=>{k({type:d.CalculateSizes,payload:{direction:e,gutterIdx:t}})}),[]),T=i.default.useCallback(((e,t,r)=>{k({type:d.CreatePairs,payload:{direction:e,children:t,gutters:r}})}),[]),P=i.default.useCallback(((e,t,r,n)=>{const i=t[0].parentNode;if(!i)throw new Error("Cannot set initial sizes - parent is undefined");if(void 0===o(e,i))throw new Error("Cannot set initial sizes - parent has undefined size");t.forEach(((i,o)=>{const a=o===t.length-1;let s;if(t.length>1){r[a?o-1:o].getBoundingClientRect()[e===exports.SplitDirection.Horizontal?"width":"height"]}s=n&&o<n.length?`calc(${n[o]}% - 0px)`:`calc(${100/t.length}% - 0px)`,e===exports.SplitDirection.Horizontal?(i.style.width=s,i.style.height="100%"):(i.style.height=s,i.style.width="100%")}))}),[]),G=i.default.useCallback(((e,t)=>{if(void 0===D.draggingIdx)throw new Error("Cannot adjust size - 'draggingIdx' is undefined");const r=D.pairs[D.draggingIdx];if(void 0===r.size)throw new Error("Cannot adjust size - 'pair.size' is undefined");if(void 0===r.gutterSize)throw new Error("Cannot adjust size - 'pair.gutterSize' is undefined");const n=r.aSizePct+r.bSizePct,i=t/r.size*n,o=n-t/r.size*n,a=0===D.draggingIdx,s=D.draggingIdx===D.pairs.length-1,{aGutterSize:d,bGutterSize:c}=g(r.gutterSize,a,s),l=`calc(${i}% - ${d}px)`,u=`calc(${o}% - ${c}px)`;e===exports.SplitDirection.Horizontal?(r.a.style.width=l,r.b.style.width=u):(r.a.style.height=l,r.b.style.height=u)}),[D.draggingIdx,D.pairs,r]),N=i.default.useCallback(((e,t,r)=>{if(!D.isDragging)return;if(void 0===D.draggingIdx)throw new Error("Cannot drag - 'draggingIdx' is undefined");const n=D.pairs[D.draggingIdx];if(void 0===n.start)throw new Error("Cannot drag - 'pair.start' is undefined");if(void 0===n.size)throw new Error("Cannot drag - 'pair.size' is undefined");if(void 0===n.gutterSize)throw new Error("Cannot drag - 'pair.gutterSize' is undefined");let i=function(e,t){const r=u(t)?t.changedTouches[0]:t;return e===exports.SplitDirection.Horizontal?r.clientX:r.clientY}(t,e)-n.start,o=16,a=16;r.length>D.draggingIdx&&(o=r[D.draggingIdx]),r.length>=D.draggingIdx+1&&(a=r[D.draggingIdx+1]),i<n.gutterSize+o&&(i=n.gutterSize+o),i>=n.size-(n.gutterSize+a)&&(i=n.size-(n.gutterSize+a)),G(t,i)}),[D.isDragging,D.draggingIdx,D.pairs,G]),$=()=>{if(D.isDragging){if(void 0===D.draggingIdx)throw new Error("Cannot calculate sizes after dragging = 'state.draggingIdx' is undefined");O(r,D.draggingIdx),H()}},F=e=>{D.isDragging&&(u(e)&&e.preventDefault(),N(e,r,r===exports.SplitDirection.Horizontal?n:p))};function L(e,t){if(!e.current)throw new Error("Can't add element to ref object - ref isn't initialized");t&&!e.current.includes(t)&&e.current.push(t)}return a("mouseup",$,[D.isDragging,H]),a("mousemove",F,[r,D.isDragging,N,n,p]),a("touchend",$,[D.isDragging,H],{condition:f}),a("touchmove",F,[r,D.isDragging,N,n,p],{condition:f,passive:!f}),t.useEffect((function(){if(!R.current)return;const e=R.current.parentElement;if(!e)return;const t=new ResizeObserver((()=>{const t=getComputedStyle(e),n=r===exports.SplitDirection.Horizontal?e.clientWidth:e.clientHeight;B(!!t&&!!n)}));return t.observe(e),()=>{t.disconnect()}}),[R.current,r]),t.useEffect((function(){if(D.isReady&&(!j.current||j.current[0].offsetParent)){if(!j.current||!E.current)throw new Error("Cannot create pairs - either variable 'childRefs' or 'gutterRefs' is undefined");v.length<=1?P(r,j.current,E.current,h):(P(r,j.current,E.current,h),T(r,j.current,E.current))}}),[w,D.isReady,r,P,T,h]),e.jsx("div",Object.assign({className:`__dbk__container ${r}`,ref:R},{children:D.isReady&&v.map(((t,n)=>e.jsxs(i.default.Fragment,{children:[e.jsx("div",Object.assign({ref:e=>L(j,e),className:"__dbk__child-wrapper "+(n<m.length?m[n]:"")},{children:t}),void 0),n<v.length-1&&e.jsx(s,{ref:e=>L(E,e),className:x,theme:z,draggerClassName:S,direction:r,onDragging:()=>{return O(r,e=n),void I(r,e);var e}},void 0)]},n)))}),void 0)},exports.isTouchDevice=f;
//# sourceMappingURL=index.js.map