@devbookhq/splitter - npm Package Compare versions

Comparing version 1.3.0 to 1.3.1

lib/cjs/index.js

@@ -1,2 +0,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),n=require("react-is");function i(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var r=i(t);function a(e,t){const n=getComputedStyle(t);if(!n)return;let i=e===exports.SplitDirection.Horizontal?t.clientWidth:t.clientHeight;return 0!==i?(e===exports.SplitDirection.Horizontal?i-=parseFloat(n.paddingLeft)+parseFloat(n.paddingRight):i-=parseFloat(n.paddingTop)+parseFloat(n.paddingBottom),i):void 0}function o(e,n,i=[]){t.useEffect((()=>(window.addEventListener(e,n),()=>window.removeEventListener(e,n))),[e,n,...i])}!function(e,t){void 0===t&&(t={});var n=t.insertAt;if(e&&"undefined"!=typeof document){var i=document.head||document.getElementsByTagName("head")[0],r=document.createElement("style");r.type="text/css","top"===n&&i.firstChild?i.insertBefore(r,i.firstChild):i.appendChild(r),r.styleSheet?r.styleSheet.cssText=e:r.appendChild(document.createTextNode(e))}}("/* === Main Container === */\n.__dbk__container {\n  height: 100%;\n  width: 100%;\n\n  display: flex;\n  overflow: hidden;\n}\n\n.__dbk__container.Horizontal {\n  flex-direction: row;\n}\n\n.__dbk__container.Vertical {\n  flex-direction: column;\n}\n/* ====== */\n\n/* === Wrapper for each child element === */\n.__dbk__child-wrapper {\n  height: 100%;\n  width: 100%;\n}\n/* ====== */\n\n/* === Gutter === */\n.__dbk__gutter {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n/* .__dbk__gutter > div {\n  background: red;\n} */\n.__dbk__gutter.Horizontal {\n  height: 100%;\n  padding: 0 2px;\n  flex-direction: column;\n}\n.__dbk__gutter.Horizontal:hover {\n  cursor: col-resize;\n}\n\n.__dbk__gutter.Vertical {\n  width: 100%;\n  padding: 2px 0;\n  flex-direction: row;\n}\n.__dbk__gutter.Vertical:hover {\n  cursor: row-resize;\n}\n\n.__dbk__gutter.Light {\n  background: #EDF0EF;\n}\n.__dbk__gutter.Light:hover > .__dbk__dragger {\n  background: #76747B;\n}\n\n.__dbk__gutter.Dark {\n  background: #020203;\n}\n.__dbk__gutter.Dark:hover > .__dbk__dragger {\n  background: #9995A3;\n}\n/* ====== */\n\n/* === Gutter's Dragger === */\n.__dbk__dragger {\n  border-radius: 2px;\n}\n\n.__dbk__dragger.Horizontal {\n  width: 4px;\n  height: 24px;  \n}\n\n.__dbk__dragger.Vertical {\n  width: 24px;\n  height: 4px;  \n}\n\n.__dbk__dragger.Light {\n  background: #A6ACB5;\n}\n\n.__dbk__dragger.Dark {\n  background: #434252;\n}\n/* ====== */");const s=r.default.forwardRef((({className:t,theme:n,draggerClassName:i,direction:r=exports.SplitDirection.Vertical,onMouseDown:a},o)=>{const s=`__dbk__gutter ${r} ${t||n}`,d=`__dbk__dragger ${r} ${i||n}`;return e.jsx("div",Object.assign({className:s,ref:o,dir:r,onMouseDown:a},{children:e.jsx("div",{className:d},void 0)}),void 0)}));var d,g,c;function l(e,t,n){let i,r;return t?(i=e/2,r=e):n?(i=e,r=e/2):(i=e,r=e),{aGutterSize:i,bGutterSize:r}}function u(e,t){switch(t.type){case d.SetIsReadyToCompute:return Object.assign(Object.assign({},e),{isReady:t.payload.isReady});case d.CreatePairs:{const{direction:n,children:i,gutters:r}=t.payload,o=i[0].parentNode;if(!o)throw new Error("Cannot create pairs - parent is undefined.");const s=a(n,o);if(void 0===s)throw new Error(`Cannot create pairs - parent has undefined or zero size: ${s}.`);const d=[];return i.forEach(((e,t)=>{if(t>0){const e=i[t-1],a=i[t],s=r[t-1],g=n===exports.SplitDirection.Horizontal?e.getBoundingClientRect().left:e.getBoundingClientRect().top,c=n===exports.SplitDirection.Horizontal?a.getBoundingClientRect().right:a.getBoundingClientRect().bottom,l=n===exports.SplitDirection.Horizontal?e.getBoundingClientRect().width+s.getBoundingClientRect().width+a.getBoundingClientRect().width:e.getBoundingClientRect().height+s.getBoundingClientRect().height+a.getBoundingClientRect().height,u=n===exports.SplitDirection.Horizontal?s.getBoundingClientRect().width:s.getBoundingClientRect().height,p={idx:t-1,a:e,b:a,gutter:s,parent:o,start:g,end:c,size:l,gutterSize:u,aSizePct:100/i.length,bSizePct:100/i.length};d.push(p)}})),Object.assign(Object.assign({},e),{pairs:d})}case d.StartDragging:{const{gutterIdx:n}=t.payload;return Object.assign(Object.assign({},e),{isDragging:!0,draggingIdx:n})}case d.StopDragging:return Object.assign(Object.assign({},e),{isDragging:!1});case d.CalculateSizes:{const{direction:n,gutterIdx:i}=t.payload,r=e.pairs[i],o=a(n,r.parent);if(!o)throw new Error("Cannot calculate sizes - 'pair.parent' has undefined or zero size.");const s=r.gutter[n===exports.SplitDirection.Horizontal?"clientWidth":"clientHeight"],d=0===i,g=i===e.pairs.length-1,{aGutterSize:c,bGutterSize:u}=l(s,d,g);let p,h,f,_,z;return n===exports.SplitDirection.Horizontal?(p=r.a.getBoundingClientRect().left,h=r.b.getBoundingClientRect().right,_=(r.a.getBoundingClientRect().width+c)/o*100,z=(r.b.getBoundingClientRect().width+u)/o*100,f=r.a.getBoundingClientRect().width+c+u+r.b.getBoundingClientRect().width):(p=r.a.getBoundingClientRect().top,h=r.b.getBoundingClientRect().bottom,_=(r.a.getBoundingClientRect().height+c)/o*100,z=(r.b.getBoundingClientRect().height+u)/o*100,f=r.a.getBoundingClientRect().height+c+u+r.b.getBoundingClientRect().height),e.pairs[i]=Object.assign(Object.assign({},r),{start:p,end:h,size:f,aSizePct:_,bSizePct:z,gutterSize:s}),Object.assign({},e)}default:return e}}function p(e,i=0,r=[]){return t.Children.toArray(e).reduce(((e,a,o)=>(n.isFragment(a)?e.push.apply(e,p(a.props.children,i+1,r.concat(a.key||o))):t.isValidElement(a)?e.push(t.cloneElement(a,{key:r.concat(String(a.key)).join(".")})):"string"!=typeof a&&"number"!=typeof a||e.push(a),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={})),exports.SplitDirection=void 0,(g=exports.SplitDirection||(exports.SplitDirection={})).Horizontal="Horizontal",g.Vertical="Vertical",exports.GutterTheme=void 0,(c=exports.GutterTheme||(exports.GutterTheme={})).Light="Light",c.Dark="Dark";function h(e){return e===exports.SplitDirection.Horizontal?"col-resize":"row-resize"}const f={isReady:!1,isDragging:!1,pairs:[]};exports.default=function({direction:n=exports.SplitDirection.Horizontal,minWidths:i=[],minHeights:g=[],initialSizes:c,gutterTheme:_=exports.GutterTheme.Dark,gutterClassName:z,draggerClassName:b,children:x,onResizeStarted:C,onResizeFinished:S,classes:w=[]}){const y=p(x);console.log("children",y);const[m,k]=t.useReducer(u,f),D=t.useRef(null),R=t.useRef([]),v=t.useRef([]);R.current=[],v.current=[];const B=r.default.useCallback((e=>{k({type:d.SetIsReadyToCompute,payload:{isReady:e}})}),[]),E=r.default.useCallback(((e,t)=>{k({type:d.StartDragging,payload:{gutterIdx:t}});const n=m.pairs[t];null==C||C(n.idx),n.a.style.userSelect="none",n.b.style.userSelect="none",n.gutter.style.cursor=h(e),n.parent.style.cursor=h(e),document.body.style.cursor=h(e)}),[m.pairs]),I=r.default.useCallback((()=>{k({type:d.StopDragging});const e=[];for(let t=0;t<m.pairs.length;t++){const i=m.pairs[t],r=a(n,i.parent);if(void 0===r)throw new Error("Cannot call the 'onResizeFinished' callback - parentSize is undefined");if(void 0===i.gutterSize)throw new Error("Cannot call 'onResizeFinished' callback - gutterSize is undefined");const o=0===t,s=t===m.pairs.length-1,d=i.a.getBoundingClientRect()[n===exports.SplitDirection.Horizontal?"width":"height"],{aGutterSize:g,bGutterSize:c}=l(i.gutterSize,o,s),u=(d+g)/r*100;if(e.push(u),s){const t=(i.b.getBoundingClientRect()[n===exports.SplitDirection.Horizontal?"width":"height"]+c)/r*100;e.push(t)}}if(void 0===m.draggingIdx)throw new Error("Could not reset cursor and user-select because 'state.draggingIdx' is undefined");const t=m.pairs[m.draggingIdx];null==S||S(t.idx,e),t.a.style.userSelect="",t.b.style.userSelect="",t.gutter.style.cursor="",t.parent.style.cursor="",document.body.style.cursor=""}),[m.draggingIdx,m.pairs,n]),j=r.default.useCallback(((e,t)=>{k({type:d.CalculateSizes,payload:{direction:e,gutterIdx:t}})}),[]),H=r.default.useCallback(((e,t,n)=>{k({type:d.CreatePairs,payload:{direction:e,children:t,gutters:n}})}),[]),O=r.default.useCallback(((e,t,n,i)=>{const r=t[0].parentNode;if(!r)throw new Error("Cannot set initial sizes - parent is undefined");if(void 0===a(e,r))throw new Error("Cannot set initial sizes - parent has undefined size");t.forEach(((r,a)=>{const o=0===a,s=a===t.length-1;let d,g=n[s?a-1:a].getBoundingClientRect()[e===exports.SplitDirection.Horizontal?"width":"height"];g=o||s?g/2:g,d=i&&a<i.length?`calc(${i[a]}% - ${g}px)`:`calc(${100/t.length}% - ${g}px)`,e===exports.SplitDirection.Horizontal?(r.style.width=d,r.style.height="100%"):(r.style.height=d,r.style.width="100%")}))}),[]),G=r.default.useCallback(((e,t)=>{if(void 0===m.draggingIdx)throw new Error("Cannot adjust size - 'draggingIdx' is undefined");const n=m.pairs[m.draggingIdx];if(void 0===n.size)throw new Error("Cannot adjust size - 'pair.size' is undefined");if(void 0===n.gutterSize)throw new Error("Cannot adjust size - 'pair.gutterSize' is undefined");const i=n.aSizePct+n.bSizePct,r=t/n.size*i,a=i-t/n.size*i,o=0===m.draggingIdx,s=m.draggingIdx===m.pairs.length-1,{aGutterSize:d,bGutterSize:g}=l(n.gutterSize,o,s),c=`calc(${r}% - ${d}px)`,u=`calc(${a}% - ${g}px)`;e===exports.SplitDirection.Horizontal?(n.a.style.width=c,n.b.style.width=u):(n.a.style.height=c,n.b.style.height=u)}),[m.draggingIdx,m.pairs,n]),N=r.default.useCallback(((e,t,n)=>{if(!m.isDragging)return;if(void 0===m.draggingIdx)throw new Error("Cannot drag - 'draggingIdx' is undefined");const i=m.pairs[m.draggingIdx];if(void 0===i.start)throw new Error("Cannot drag - 'pair.start' is undefined");if(void 0===i.size)throw new Error("Cannot drag - 'pair.size' is undefined");if(void 0===i.gutterSize)throw new Error("Cannot drag - 'pair.gutterSize' is undefined");let r=function(e,t){return e===exports.SplitDirection.Horizontal?t.clientX:t.clientY}(t,e)-i.start,a=16,o=16;n.length>m.draggingIdx&&(a=n[m.draggingIdx]),n.length>=m.draggingIdx+1&&(o=n[m.draggingIdx+1]),r<i.gutterSize+a&&(r=i.gutterSize+a),r>=i.size-(i.gutterSize+o)&&(r=i.size-(i.gutterSize+o)),G(t,r)}),[m.isDragging,m.draggingIdx,m.pairs,G]);function $(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 o("mouseup",(()=>{if(m.isDragging){if(void 0===m.draggingIdx)throw new Error("Cannot calculate sizes after dragging = 'state.draggingIdx' is undefined");j(n,m.draggingIdx),I()}}),[m.isDragging,I]),o("mousemove",(e=>{m.isDragging&&N(e,n,n===exports.SplitDirection.Horizontal?i:g)}),[n,m.isDragging,N,i,g]),t.useEffect((function(){if(!D.current)return;const e=D.current.parentElement;if(!e)return;const t=new ResizeObserver((()=>{const t=getComputedStyle(e),i=n===exports.SplitDirection.Horizontal?e.clientWidth:e.clientHeight;B(!!t&&!!i)}));return t.observe(e),()=>{t.disconnect()}}),[D.current,n]),t.useEffect((function(){if(m.isReady&&!(y.length<=1)){if(!R.current||!v.current)throw new Error("Cannot create pairs - either variable 'childRefs' or 'gutterRefs' is undefined");O(n,R.current,v.current,c),H(n,R.current,v.current)}}),[x,m.isReady,n,O,H,c]),e.jsx("div",Object.assign({className:`__dbk__container ${n}`,ref:D},{children:m.isReady&&y.map(((t,i)=>e.jsxs(r.default.Fragment,{children:[e.jsx("div",Object.assign({ref:e=>$(R,e),className:"__dbk__child-wrapper "+(i<w.length?w[i]:"")},{children:t}),void 0),i<y.length-1&&e.jsx(s,{ref:e=>$(v,e),className:z,theme:_,draggerClassName:b,direction:n,onMouseDown:e=>function(e,t){t.preventDefault(),j(n,e),E(n,e)}(i,e)},void 0)]},i)))}),void 0)};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),n=require("react-is");function i(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var r=i(t);function a(e,t){const n=getComputedStyle(t);if(!n)return;let i=e===exports.SplitDirection.Horizontal?t.clientWidth:t.clientHeight;return 0!==i?(e===exports.SplitDirection.Horizontal?i-=parseFloat(n.paddingLeft)+parseFloat(n.paddingRight):i-=parseFloat(n.paddingTop)+parseFloat(n.paddingBottom),i):void 0}function o(e,n,i=[]){t.useEffect((()=>(window.addEventListener(e,n),()=>window.removeEventListener(e,n))),[e,n,...i])}!function(e,t){void 0===t&&(t={});var n=t.insertAt;if(e&&"undefined"!=typeof document){var i=document.head||document.getElementsByTagName("head")[0],r=document.createElement("style");r.type="text/css","top"===n&&i.firstChild?i.insertBefore(r,i.firstChild):i.appendChild(r),r.styleSheet?r.styleSheet.cssText=e:r.appendChild(document.createTextNode(e))}}("/* === Main Container === */\n.__dbk__container {\n  height: 100%;\n  width: 100%;\n\n  display: flex;\n  overflow: hidden;\n}\n\n.__dbk__container.Horizontal {\n  flex-direction: row;\n}\n\n.__dbk__container.Vertical {\n  flex-direction: column;\n}\n/* ====== */\n\n/* === Wrapper for each child element === */\n.__dbk__child-wrapper {\n  height: 100%;\n  width: 100%;\n}\n/* ====== */\n\n/* === Gutter === */\n.__dbk__gutter {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n/* .__dbk__gutter > div {\n  background: red;\n} */\n.__dbk__gutter.Horizontal {\n  height: 100%;\n  padding: 0 2px;\n  flex-direction: column;\n}\n.__dbk__gutter.Horizontal:hover {\n  cursor: col-resize;\n}\n\n.__dbk__gutter.Vertical {\n  width: 100%;\n  padding: 2px 0;\n  flex-direction: row;\n}\n.__dbk__gutter.Vertical:hover {\n  cursor: row-resize;\n}\n\n.__dbk__gutter.Light {\n  background: #EDF0EF;\n}\n.__dbk__gutter.Light:hover > .__dbk__dragger {\n  background: #76747B;\n}\n\n.__dbk__gutter.Dark {\n  background: #020203;\n}\n.__dbk__gutter.Dark:hover > .__dbk__dragger {\n  background: #9995A3;\n}\n/* ====== */\n\n/* === Gutter's Dragger === */\n.__dbk__dragger {\n  border-radius: 2px;\n}\n\n.__dbk__dragger.Horizontal {\n  width: 4px;\n  height: 24px;  \n}\n\n.__dbk__dragger.Vertical {\n  width: 24px;\n  height: 4px;  \n}\n\n.__dbk__dragger.Light {\n  background: #A6ACB5;\n}\n\n.__dbk__dragger.Dark {\n  background: #434252;\n}\n/* ====== */");const s=r.default.forwardRef((({className:t,theme:n,draggerClassName:i,direction:r=exports.SplitDirection.Vertical,onMouseDown:a},o)=>{const s=`__dbk__gutter ${r} ${t||n}`,d=`__dbk__dragger ${r} ${i||n}`;return e.jsx("div",Object.assign({className:s,ref:o,dir:r,onMouseDown:a},{children:e.jsx("div",{className:d},void 0)}),void 0)}));var d,g,c;function l(e,t,n){let i,r;return t?(i=e/2,r=e):n?(i=e,r=e/2):(i=e,r=e),{aGutterSize:i,bGutterSize:r}}function u(e,t){switch(t.type){case d.SetIsReadyToCompute:return Object.assign(Object.assign({},e),{isReady:t.payload.isReady});case d.CreatePairs:{const{direction:n,children:i,gutters:r}=t.payload,o=i[0].parentNode;if(!o)throw new Error("Cannot create pairs - parent is undefined.");const s=a(n,o);if(void 0===s)throw new Error(`Cannot create pairs - parent has undefined or zero size: ${s}.`);const d=[];return i.forEach(((e,t)=>{if(t>0){const e=i[t-1],a=i[t],s=r[t-1],g=n===exports.SplitDirection.Horizontal?e.getBoundingClientRect().left:e.getBoundingClientRect().top,c=n===exports.SplitDirection.Horizontal?a.getBoundingClientRect().right:a.getBoundingClientRect().bottom,l=n===exports.SplitDirection.Horizontal?e.getBoundingClientRect().width+s.getBoundingClientRect().width+a.getBoundingClientRect().width:e.getBoundingClientRect().height+s.getBoundingClientRect().height+a.getBoundingClientRect().height,u=n===exports.SplitDirection.Horizontal?s.getBoundingClientRect().width:s.getBoundingClientRect().height,p={idx:t-1,a:e,b:a,gutter:s,parent:o,start:g,end:c,size:l,gutterSize:u,aSizePct:100/i.length,bSizePct:100/i.length};d.push(p)}})),Object.assign(Object.assign({},e),{pairs:d})}case d.StartDragging:{const{gutterIdx:n}=t.payload;return Object.assign(Object.assign({},e),{isDragging:!0,draggingIdx:n})}case d.StopDragging:return Object.assign(Object.assign({},e),{isDragging:!1});case d.CalculateSizes:{const{direction:n,gutterIdx:i}=t.payload,r=e.pairs[i],o=a(n,r.parent);if(!o)throw new Error("Cannot calculate sizes - 'pair.parent' has undefined or zero size.");const s=r.gutter[n===exports.SplitDirection.Horizontal?"clientWidth":"clientHeight"],d=0===i,g=i===e.pairs.length-1,{aGutterSize:c,bGutterSize:u}=l(s,d,g);let p,h,f,_,z;return n===exports.SplitDirection.Horizontal?(p=r.a.getBoundingClientRect().left,h=r.b.getBoundingClientRect().right,_=(r.a.getBoundingClientRect().width+c)/o*100,z=(r.b.getBoundingClientRect().width+u)/o*100,f=r.a.getBoundingClientRect().width+c+u+r.b.getBoundingClientRect().width):(p=r.a.getBoundingClientRect().top,h=r.b.getBoundingClientRect().bottom,_=(r.a.getBoundingClientRect().height+c)/o*100,z=(r.b.getBoundingClientRect().height+u)/o*100,f=r.a.getBoundingClientRect().height+c+u+r.b.getBoundingClientRect().height),e.pairs[i]=Object.assign(Object.assign({},r),{start:p,end:h,size:f,aSizePct:_,bSizePct:z,gutterSize:s}),Object.assign({},e)}default:return e}}function p(e,i=0,r=[]){return t.Children.toArray(e).reduce(((e,a,o)=>(n.isFragment(a)?e.push.apply(e,p(a.props.children,i+1,r.concat(a.key||o))):t.isValidElement(a)?e.push(t.cloneElement(a,{key:r.concat(String(a.key)).join(".")})):"string"!=typeof a&&"number"!=typeof a||e.push(a),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={})),exports.SplitDirection=void 0,(g=exports.SplitDirection||(exports.SplitDirection={})).Horizontal="Horizontal",g.Vertical="Vertical",exports.GutterTheme=void 0,(c=exports.GutterTheme||(exports.GutterTheme={})).Light="Light",c.Dark="Dark";function h(e){return e===exports.SplitDirection.Horizontal?"col-resize":"row-resize"}const f={isReady:!1,isDragging:!1,pairs:[]};exports.default=function({direction:n=exports.SplitDirection.Horizontal,minWidths:i=[],minHeights:g=[],initialSizes:c,gutterTheme:_=exports.GutterTheme.Dark,gutterClassName:z,draggerClassName:b,children:x,onResizeStarted:S,onResizeFinished:C,classes:w=[]}){const y=p(x),[m,k]=t.useReducer(u,f),D=t.useRef(null),R=t.useRef([]),v=t.useRef([]);R.current=[],v.current=[];const B=r.default.useCallback((e=>{k({type:d.SetIsReadyToCompute,payload:{isReady:e}})}),[]),E=r.default.useCallback(((e,t)=>{k({type:d.StartDragging,payload:{gutterIdx:t}});const n=m.pairs[t];null==S||S(n.idx),n.a.style.userSelect="none",n.b.style.userSelect="none",n.gutter.style.cursor=h(e),n.parent.style.cursor=h(e),document.body.style.cursor=h(e)}),[m.pairs]),I=r.default.useCallback((()=>{k({type:d.StopDragging});const e=[];for(let t=0;t<m.pairs.length;t++){const i=m.pairs[t],r=a(n,i.parent);if(void 0===r)throw new Error("Cannot call the 'onResizeFinished' callback - parentSize is undefined");if(void 0===i.gutterSize)throw new Error("Cannot call 'onResizeFinished' callback - gutterSize is undefined");const o=0===t,s=t===m.pairs.length-1,d=i.a.getBoundingClientRect()[n===exports.SplitDirection.Horizontal?"width":"height"],{aGutterSize:g,bGutterSize:c}=l(i.gutterSize,o,s),u=(d+g)/r*100;if(e.push(u),s){const t=(i.b.getBoundingClientRect()[n===exports.SplitDirection.Horizontal?"width":"height"]+c)/r*100;e.push(t)}}if(void 0===m.draggingIdx)throw new Error("Could not reset cursor and user-select because 'state.draggingIdx' is undefined");const t=m.pairs[m.draggingIdx];null==C||C(t.idx,e),t.a.style.userSelect="",t.b.style.userSelect="",t.gutter.style.cursor="",t.parent.style.cursor="",document.body.style.cursor=""}),[m.draggingIdx,m.pairs,n]),j=r.default.useCallback(((e,t)=>{k({type:d.CalculateSizes,payload:{direction:e,gutterIdx:t}})}),[]),H=r.default.useCallback(((e,t,n)=>{k({type:d.CreatePairs,payload:{direction:e,children:t,gutters:n}})}),[]),O=r.default.useCallback(((e,t,n,i)=>{const r=t[0].parentNode;if(!r)throw new Error("Cannot set initial sizes - parent is undefined");if(void 0===a(e,r))throw new Error("Cannot set initial sizes - parent has undefined size");t.forEach(((r,a)=>{const o=a===t.length-1;let s;if(t.length>1){n[o?a-1:a].getBoundingClientRect()[e===exports.SplitDirection.Horizontal?"width":"height"]}s=i&&a<i.length?`calc(${i[a]}% - 0px)`:`calc(${100/t.length}% - 0px)`,e===exports.SplitDirection.Horizontal?(r.style.width=s,r.style.height="100%"):(r.style.height=s,r.style.width="100%")}))}),[]),G=r.default.useCallback(((e,t)=>{if(void 0===m.draggingIdx)throw new Error("Cannot adjust size - 'draggingIdx' is undefined");const n=m.pairs[m.draggingIdx];if(void 0===n.size)throw new Error("Cannot adjust size - 'pair.size' is undefined");if(void 0===n.gutterSize)throw new Error("Cannot adjust size - 'pair.gutterSize' is undefined");const i=n.aSizePct+n.bSizePct,r=t/n.size*i,a=i-t/n.size*i,o=0===m.draggingIdx,s=m.draggingIdx===m.pairs.length-1,{aGutterSize:d,bGutterSize:g}=l(n.gutterSize,o,s),c=`calc(${r}% - ${d}px)`,u=`calc(${a}% - ${g}px)`;e===exports.SplitDirection.Horizontal?(n.a.style.width=c,n.b.style.width=u):(n.a.style.height=c,n.b.style.height=u)}),[m.draggingIdx,m.pairs,n]),N=r.default.useCallback(((e,t,n)=>{if(!m.isDragging)return;if(void 0===m.draggingIdx)throw new Error("Cannot drag - 'draggingIdx' is undefined");const i=m.pairs[m.draggingIdx];if(void 0===i.start)throw new Error("Cannot drag - 'pair.start' is undefined");if(void 0===i.size)throw new Error("Cannot drag - 'pair.size' is undefined");if(void 0===i.gutterSize)throw new Error("Cannot drag - 'pair.gutterSize' is undefined");let r=function(e,t){return e===exports.SplitDirection.Horizontal?t.clientX:t.clientY}(t,e)-i.start,a=16,o=16;n.length>m.draggingIdx&&(a=n[m.draggingIdx]),n.length>=m.draggingIdx+1&&(o=n[m.draggingIdx+1]),r<i.gutterSize+a&&(r=i.gutterSize+a),r>=i.size-(i.gutterSize+o)&&(r=i.size-(i.gutterSize+o)),G(t,r)}),[m.isDragging,m.draggingIdx,m.pairs,G]);function T(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 o("mouseup",(()=>{if(m.isDragging){if(void 0===m.draggingIdx)throw new Error("Cannot calculate sizes after dragging = 'state.draggingIdx' is undefined");j(n,m.draggingIdx),I()}}),[m.isDragging,I]),o("mousemove",(e=>{m.isDragging&&N(e,n,n===exports.SplitDirection.Horizontal?i:g)}),[n,m.isDragging,N,i,g]),t.useEffect((function(){if(!D.current)return;const e=D.current.parentElement;if(!e)return;const t=new ResizeObserver((()=>{const t=getComputedStyle(e),i=n===exports.SplitDirection.Horizontal?e.clientWidth:e.clientHeight;B(!!t&&!!i)}));return t.observe(e),()=>{t.disconnect()}}),[D.current,n]),t.useEffect((function(){if(console.log({initialSizes:c}),m.isReady){if(!R.current||!v.current)throw new Error("Cannot create pairs - either variable 'childRefs' or 'gutterRefs' is undefined");y.length<=1?O(n,R.current,v.current,c):(O(n,R.current,v.current,c),H(n,R.current,v.current))}}),[x,m.isReady,n,O,H,c]),e.jsx("div",Object.assign({className:`__dbk__container ${n}`,ref:D},{children:m.isReady&&y.map(((t,i)=>e.jsxs(r.default.Fragment,{children:[e.jsx("div",Object.assign({ref:e=>T(R,e),className:"__dbk__child-wrapper "+(i<w.length?w[i]:"")},{children:t}),void 0),i<y.length-1&&e.jsx(s,{ref:e=>T(v,e),className:z,theme:_,draggerClassName:b,direction:n,onMouseDown:e=>function(e,t){t.preventDefault(),j(n,e),E(n,e)}(i,e)},void 0)]},i)))}),void 0)};
 //# sourceMappingURL=index.js.map

lib/mjs/index.js

@@ -1,2 +0,2 @@
-import{jsx as e,jsxs as t}from"react/jsx-runtime";import n,{useEffect as i,Children as r,isValidElement as a,cloneElement as o,useReducer as g,useRef as d}from"react";import{isFragment as s}from"react-is";function c(e,t){const n=getComputedStyle(t);if(!n)return;let i=e===p.Horizontal?t.clientWidth:t.clientHeight;return 0!==i?(e===p.Horizontal?i-=parseFloat(n.paddingLeft)+parseFloat(n.paddingRight):i-=parseFloat(n.paddingTop)+parseFloat(n.paddingBottom),i):void 0}function l(e,t,n=[]){i((()=>(window.addEventListener(e,t),()=>window.removeEventListener(e,t))),[e,t,...n])}!function(e,t){void 0===t&&(t={});var n=t.insertAt;if(e&&"undefined"!=typeof document){var i=document.head||document.getElementsByTagName("head")[0],r=document.createElement("style");r.type="text/css","top"===n&&i.firstChild?i.insertBefore(r,i.firstChild):i.appendChild(r),r.styleSheet?r.styleSheet.cssText=e:r.appendChild(document.createTextNode(e))}}("/* === Main Container === */\n.__dbk__container {\n  height: 100%;\n  width: 100%;\n\n  display: flex;\n  overflow: hidden;\n}\n\n.__dbk__container.Horizontal {\n  flex-direction: row;\n}\n\n.__dbk__container.Vertical {\n  flex-direction: column;\n}\n/* ====== */\n\n/* === Wrapper for each child element === */\n.__dbk__child-wrapper {\n  height: 100%;\n  width: 100%;\n}\n/* ====== */\n\n/* === Gutter === */\n.__dbk__gutter {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n/* .__dbk__gutter > div {\n  background: red;\n} */\n.__dbk__gutter.Horizontal {\n  height: 100%;\n  padding: 0 2px;\n  flex-direction: column;\n}\n.__dbk__gutter.Horizontal:hover {\n  cursor: col-resize;\n}\n\n.__dbk__gutter.Vertical {\n  width: 100%;\n  padding: 2px 0;\n  flex-direction: row;\n}\n.__dbk__gutter.Vertical:hover {\n  cursor: row-resize;\n}\n\n.__dbk__gutter.Light {\n  background: #EDF0EF;\n}\n.__dbk__gutter.Light:hover > .__dbk__dragger {\n  background: #76747B;\n}\n\n.__dbk__gutter.Dark {\n  background: #020203;\n}\n.__dbk__gutter.Dark:hover > .__dbk__dragger {\n  background: #9995A3;\n}\n/* ====== */\n\n/* === Gutter's Dragger === */\n.__dbk__dragger {\n  border-radius: 2px;\n}\n\n.__dbk__dragger.Horizontal {\n  width: 4px;\n  height: 24px;  \n}\n\n.__dbk__dragger.Vertical {\n  width: 24px;\n  height: 4px;  \n}\n\n.__dbk__dragger.Light {\n  background: #A6ACB5;\n}\n\n.__dbk__dragger.Dark {\n  background: #434252;\n}\n/* ====== */");const u=n.forwardRef((({className:t,theme:n,draggerClassName:i,direction:r=p.Vertical,onMouseDown:a},o)=>{const g=`__dbk__gutter ${r} ${t||n}`,d=`__dbk__dragger ${r} ${i||n}`;return e("div",Object.assign({className:g,ref:o,dir:r,onMouseDown:a},{children:e("div",{className:d},void 0)}),void 0)}));var h,p,_;function f(e,t,n){let i,r;return t?(i=e/2,r=e):n?(i=e,r=e/2):(i=e,r=e),{aGutterSize:i,bGutterSize:r}}function z(e,t){switch(t.type){case h.SetIsReadyToCompute:return Object.assign(Object.assign({},e),{isReady:t.payload.isReady});case h.CreatePairs:{const{direction:n,children:i,gutters:r}=t.payload,a=i[0].parentNode;if(!a)throw new Error("Cannot create pairs - parent is undefined.");const o=c(n,a);if(void 0===o)throw new Error(`Cannot create pairs - parent has undefined or zero size: ${o}.`);const g=[];return i.forEach(((e,t)=>{if(t>0){const e=i[t-1],o=i[t],d=r[t-1],s=n===p.Horizontal?e.getBoundingClientRect().left:e.getBoundingClientRect().top,c=n===p.Horizontal?o.getBoundingClientRect().right:o.getBoundingClientRect().bottom,l=n===p.Horizontal?e.getBoundingClientRect().width+d.getBoundingClientRect().width+o.getBoundingClientRect().width:e.getBoundingClientRect().height+d.getBoundingClientRect().height+o.getBoundingClientRect().height,u=n===p.Horizontal?d.getBoundingClientRect().width:d.getBoundingClientRect().height,h={idx:t-1,a:e,b:o,gutter:d,parent:a,start:s,end:c,size:l,gutterSize:u,aSizePct:100/i.length,bSizePct:100/i.length};g.push(h)}})),Object.assign(Object.assign({},e),{pairs:g})}case h.StartDragging:{const{gutterIdx:n}=t.payload;return Object.assign(Object.assign({},e),{isDragging:!0,draggingIdx:n})}case h.StopDragging:return Object.assign(Object.assign({},e),{isDragging:!1});case h.CalculateSizes:{const{direction:n,gutterIdx:i}=t.payload,r=e.pairs[i],a=c(n,r.parent);if(!a)throw new Error("Cannot calculate sizes - 'pair.parent' has undefined or zero size.");const o=r.gutter[n===p.Horizontal?"clientWidth":"clientHeight"],g=0===i,d=i===e.pairs.length-1,{aGutterSize:s,bGutterSize:l}=f(o,g,d);let u,h,_,z,b;return n===p.Horizontal?(u=r.a.getBoundingClientRect().left,h=r.b.getBoundingClientRect().right,z=(r.a.getBoundingClientRect().width+s)/a*100,b=(r.b.getBoundingClientRect().width+l)/a*100,_=r.a.getBoundingClientRect().width+s+l+r.b.getBoundingClientRect().width):(u=r.a.getBoundingClientRect().top,h=r.b.getBoundingClientRect().bottom,z=(r.a.getBoundingClientRect().height+s)/a*100,b=(r.b.getBoundingClientRect().height+l)/a*100,_=r.a.getBoundingClientRect().height+s+l+r.b.getBoundingClientRect().height),e.pairs[i]=Object.assign(Object.assign({},r),{start:u,end:h,size:_,aSizePct:z,bSizePct:b,gutterSize:o}),Object.assign({},e)}default:return e}}function b(e,t=0,n=[]){return r.toArray(e).reduce(((e,i,r)=>(s(i)?e.push.apply(e,b(i.props.children,t+1,n.concat(i.key||r))):a(i)?e.push(o(i,{key:n.concat(String(i.key)).join(".")})):"string"!=typeof i&&"number"!=typeof i||e.push(i),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"}(h||(h={})),function(e){e.Horizontal="Horizontal",e.Vertical="Vertical"}(p||(p={})),function(e){e.Light="Light",e.Dark="Dark"}(_||(_={}));function C(e){return e===p.Horizontal?"col-resize":"row-resize"}const w={isReady:!1,isDragging:!1,pairs:[]};function y({direction:r=p.Horizontal,minWidths:a=[],minHeights:o=[],initialSizes:s,gutterTheme:y=_.Dark,gutterClassName:S,draggerClassName:m,children:k,onResizeStarted:x,onResizeFinished:R,classes:v=[]}){const B=b(k);console.log("children",B);const[I,D]=g(z,w),H=d(null),E=d([]),j=d([]);E.current=[],j.current=[];const O=n.useCallback((e=>{D({type:h.SetIsReadyToCompute,payload:{isReady:e}})}),[]),N=n.useCallback(((e,t)=>{D({type:h.StartDragging,payload:{gutterIdx:t}});const n=I.pairs[t];null==x||x(n.idx),n.a.style.userSelect="none",n.b.style.userSelect="none",n.gutter.style.cursor=C(e),n.parent.style.cursor=C(e),document.body.style.cursor=C(e)}),[I.pairs]),$=n.useCallback((()=>{D({type:h.StopDragging});const e=[];for(let t=0;t<I.pairs.length;t++){const n=I.pairs[t],i=c(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,o=t===I.pairs.length-1,g=n.a.getBoundingClientRect()[r===p.Horizontal?"width":"height"],{aGutterSize:d,bGutterSize:s}=f(n.gutterSize,a,o),l=(g+d)/i*100;if(e.push(l),o){const t=(n.b.getBoundingClientRect()[r===p.Horizontal?"width":"height"]+s)/i*100;e.push(t)}}if(void 0===I.draggingIdx)throw new Error("Could not reset cursor and user-select because 'state.draggingIdx' is undefined");const t=I.pairs[I.draggingIdx];null==R||R(t.idx,e),t.a.style.userSelect="",t.b.style.userSelect="",t.gutter.style.cursor="",t.parent.style.cursor="",document.body.style.cursor=""}),[I.draggingIdx,I.pairs,r]),F=n.useCallback(((e,t)=>{D({type:h.CalculateSizes,payload:{direction:e,gutterIdx:t}})}),[]),G=n.useCallback(((e,t,n)=>{D({type:h.CreatePairs,payload:{direction:e,children:t,gutters:n}})}),[]),P=n.useCallback(((e,t,n,i)=>{const r=t[0].parentNode;if(!r)throw new Error("Cannot set initial sizes - parent is undefined");if(void 0===c(e,r))throw new Error("Cannot set initial sizes - parent has undefined size");t.forEach(((r,a)=>{const o=0===a,g=a===t.length-1;let d,s=n[g?a-1:a].getBoundingClientRect()[e===p.Horizontal?"width":"height"];s=o||g?s/2:s,d=i&&a<i.length?`calc(${i[a]}% - ${s}px)`:`calc(${100/t.length}% - ${s}px)`,e===p.Horizontal?(r.style.width=d,r.style.height="100%"):(r.style.height=d,r.style.width="100%")}))}),[]),T=n.useCallback(((e,t)=>{if(void 0===I.draggingIdx)throw new Error("Cannot adjust size - 'draggingIdx' is undefined");const n=I.pairs[I.draggingIdx];if(void 0===n.size)throw new Error("Cannot adjust size - 'pair.size' is undefined");if(void 0===n.gutterSize)throw new Error("Cannot adjust size - 'pair.gutterSize' is undefined");const i=n.aSizePct+n.bSizePct,r=t/n.size*i,a=i-t/n.size*i,o=0===I.draggingIdx,g=I.draggingIdx===I.pairs.length-1,{aGutterSize:d,bGutterSize:s}=f(n.gutterSize,o,g),c=`calc(${r}% - ${d}px)`,l=`calc(${a}% - ${s}px)`;e===p.Horizontal?(n.a.style.width=c,n.b.style.width=l):(n.a.style.height=c,n.b.style.height=l)}),[I.draggingIdx,I.pairs,r]),L=n.useCallback(((e,t,n)=>{if(!I.isDragging)return;if(void 0===I.draggingIdx)throw new Error("Cannot drag - 'draggingIdx' is undefined");const i=I.pairs[I.draggingIdx];if(void 0===i.start)throw new Error("Cannot drag - 'pair.start' is undefined");if(void 0===i.size)throw new Error("Cannot drag - 'pair.size' is undefined");if(void 0===i.gutterSize)throw new Error("Cannot drag - 'pair.gutterSize' is undefined");let r=function(e,t){return e===p.Horizontal?t.clientX:t.clientY}(t,e)-i.start,a=16,o=16;n.length>I.draggingIdx&&(a=n[I.draggingIdx]),n.length>=I.draggingIdx+1&&(o=n[I.draggingIdx+1]),r<i.gutterSize+a&&(r=i.gutterSize+a),r>=i.size-(i.gutterSize+o)&&(r=i.size-(i.gutterSize+o)),T(t,r)}),[I.isDragging,I.draggingIdx,I.pairs,T]);function V(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 l("mouseup",(()=>{if(I.isDragging){if(void 0===I.draggingIdx)throw new Error("Cannot calculate sizes after dragging = 'state.draggingIdx' is undefined");F(r,I.draggingIdx),$()}}),[I.isDragging,$]),l("mousemove",(e=>{I.isDragging&&L(e,r,r===p.Horizontal?a:o)}),[r,I.isDragging,L,a,o]),i((function(){if(!H.current)return;const e=H.current.parentElement;if(!e)return;const t=new ResizeObserver((()=>{const t=getComputedStyle(e),n=r===p.Horizontal?e.clientWidth:e.clientHeight;O(!!t&&!!n)}));return t.observe(e),()=>{t.disconnect()}}),[H.current,r]),i((function(){if(I.isReady&&!(B.length<=1)){if(!E.current||!j.current)throw new Error("Cannot create pairs - either variable 'childRefs' or 'gutterRefs' is undefined");P(r,E.current,j.current,s),G(r,E.current,j.current)}}),[k,I.isReady,r,P,G,s]),e("div",Object.assign({className:`__dbk__container ${r}`,ref:H},{children:I.isReady&&B.map(((i,a)=>t(n.Fragment,{children:[e("div",Object.assign({ref:e=>V(E,e),className:"__dbk__child-wrapper "+(a<v.length?v[a]:"")},{children:i}),void 0),a<B.length-1&&e(u,{ref:e=>V(j,e),className:S,theme:y,draggerClassName:m,direction:r,onMouseDown:e=>function(e,t){t.preventDefault(),F(r,e),N(r,e)}(a,e)},void 0)]},a)))}),void 0)}export{_ as GutterTheme,p as SplitDirection,y as default};
+import{jsx as e,jsxs as t}from"react/jsx-runtime";import n,{useEffect as i,Children as r,isValidElement as a,cloneElement as o,useReducer as g,useRef as d}from"react";import{isFragment as s}from"react-is";function c(e,t){const n=getComputedStyle(t);if(!n)return;let i=e===p.Horizontal?t.clientWidth:t.clientHeight;return 0!==i?(e===p.Horizontal?i-=parseFloat(n.paddingLeft)+parseFloat(n.paddingRight):i-=parseFloat(n.paddingTop)+parseFloat(n.paddingBottom),i):void 0}function l(e,t,n=[]){i((()=>(window.addEventListener(e,t),()=>window.removeEventListener(e,t))),[e,t,...n])}!function(e,t){void 0===t&&(t={});var n=t.insertAt;if(e&&"undefined"!=typeof document){var i=document.head||document.getElementsByTagName("head")[0],r=document.createElement("style");r.type="text/css","top"===n&&i.firstChild?i.insertBefore(r,i.firstChild):i.appendChild(r),r.styleSheet?r.styleSheet.cssText=e:r.appendChild(document.createTextNode(e))}}("/* === Main Container === */\n.__dbk__container {\n  height: 100%;\n  width: 100%;\n\n  display: flex;\n  overflow: hidden;\n}\n\n.__dbk__container.Horizontal {\n  flex-direction: row;\n}\n\n.__dbk__container.Vertical {\n  flex-direction: column;\n}\n/* ====== */\n\n/* === Wrapper for each child element === */\n.__dbk__child-wrapper {\n  height: 100%;\n  width: 100%;\n}\n/* ====== */\n\n/* === Gutter === */\n.__dbk__gutter {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n/* .__dbk__gutter > div {\n  background: red;\n} */\n.__dbk__gutter.Horizontal {\n  height: 100%;\n  padding: 0 2px;\n  flex-direction: column;\n}\n.__dbk__gutter.Horizontal:hover {\n  cursor: col-resize;\n}\n\n.__dbk__gutter.Vertical {\n  width: 100%;\n  padding: 2px 0;\n  flex-direction: row;\n}\n.__dbk__gutter.Vertical:hover {\n  cursor: row-resize;\n}\n\n.__dbk__gutter.Light {\n  background: #EDF0EF;\n}\n.__dbk__gutter.Light:hover > .__dbk__dragger {\n  background: #76747B;\n}\n\n.__dbk__gutter.Dark {\n  background: #020203;\n}\n.__dbk__gutter.Dark:hover > .__dbk__dragger {\n  background: #9995A3;\n}\n/* ====== */\n\n/* === Gutter's Dragger === */\n.__dbk__dragger {\n  border-radius: 2px;\n}\n\n.__dbk__dragger.Horizontal {\n  width: 4px;\n  height: 24px;  \n}\n\n.__dbk__dragger.Vertical {\n  width: 24px;\n  height: 4px;  \n}\n\n.__dbk__dragger.Light {\n  background: #A6ACB5;\n}\n\n.__dbk__dragger.Dark {\n  background: #434252;\n}\n/* ====== */");const u=n.forwardRef((({className:t,theme:n,draggerClassName:i,direction:r=p.Vertical,onMouseDown:a},o)=>{const g=`__dbk__gutter ${r} ${t||n}`,d=`__dbk__dragger ${r} ${i||n}`;return e("div",Object.assign({className:g,ref:o,dir:r,onMouseDown:a},{children:e("div",{className:d},void 0)}),void 0)}));var h,p,f;function _(e,t,n){let i,r;return t?(i=e/2,r=e):n?(i=e,r=e/2):(i=e,r=e),{aGutterSize:i,bGutterSize:r}}function z(e,t){switch(t.type){case h.SetIsReadyToCompute:return Object.assign(Object.assign({},e),{isReady:t.payload.isReady});case h.CreatePairs:{const{direction:n,children:i,gutters:r}=t.payload,a=i[0].parentNode;if(!a)throw new Error("Cannot create pairs - parent is undefined.");const o=c(n,a);if(void 0===o)throw new Error(`Cannot create pairs - parent has undefined or zero size: ${o}.`);const g=[];return i.forEach(((e,t)=>{if(t>0){const e=i[t-1],o=i[t],d=r[t-1],s=n===p.Horizontal?e.getBoundingClientRect().left:e.getBoundingClientRect().top,c=n===p.Horizontal?o.getBoundingClientRect().right:o.getBoundingClientRect().bottom,l=n===p.Horizontal?e.getBoundingClientRect().width+d.getBoundingClientRect().width+o.getBoundingClientRect().width:e.getBoundingClientRect().height+d.getBoundingClientRect().height+o.getBoundingClientRect().height,u=n===p.Horizontal?d.getBoundingClientRect().width:d.getBoundingClientRect().height,h={idx:t-1,a:e,b:o,gutter:d,parent:a,start:s,end:c,size:l,gutterSize:u,aSizePct:100/i.length,bSizePct:100/i.length};g.push(h)}})),Object.assign(Object.assign({},e),{pairs:g})}case h.StartDragging:{const{gutterIdx:n}=t.payload;return Object.assign(Object.assign({},e),{isDragging:!0,draggingIdx:n})}case h.StopDragging:return Object.assign(Object.assign({},e),{isDragging:!1});case h.CalculateSizes:{const{direction:n,gutterIdx:i}=t.payload,r=e.pairs[i],a=c(n,r.parent);if(!a)throw new Error("Cannot calculate sizes - 'pair.parent' has undefined or zero size.");const o=r.gutter[n===p.Horizontal?"clientWidth":"clientHeight"],g=0===i,d=i===e.pairs.length-1,{aGutterSize:s,bGutterSize:l}=_(o,g,d);let u,h,f,z,b;return n===p.Horizontal?(u=r.a.getBoundingClientRect().left,h=r.b.getBoundingClientRect().right,z=(r.a.getBoundingClientRect().width+s)/a*100,b=(r.b.getBoundingClientRect().width+l)/a*100,f=r.a.getBoundingClientRect().width+s+l+r.b.getBoundingClientRect().width):(u=r.a.getBoundingClientRect().top,h=r.b.getBoundingClientRect().bottom,z=(r.a.getBoundingClientRect().height+s)/a*100,b=(r.b.getBoundingClientRect().height+l)/a*100,f=r.a.getBoundingClientRect().height+s+l+r.b.getBoundingClientRect().height),e.pairs[i]=Object.assign(Object.assign({},r),{start:u,end:h,size:f,aSizePct:z,bSizePct:b,gutterSize:o}),Object.assign({},e)}default:return e}}function b(e,t=0,n=[]){return r.toArray(e).reduce(((e,i,r)=>(s(i)?e.push.apply(e,b(i.props.children,t+1,n.concat(i.key||r))):a(i)?e.push(o(i,{key:n.concat(String(i.key)).join(".")})):"string"!=typeof i&&"number"!=typeof i||e.push(i),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"}(h||(h={})),function(e){e.Horizontal="Horizontal",e.Vertical="Vertical"}(p||(p={})),function(e){e.Light="Light",e.Dark="Dark"}(f||(f={}));function C(e){return e===p.Horizontal?"col-resize":"row-resize"}const w={isReady:!1,isDragging:!1,pairs:[]};function y({direction:r=p.Horizontal,minWidths:a=[],minHeights:o=[],initialSizes:s,gutterTheme:y=f.Dark,gutterClassName:S,draggerClassName:m,children:k,onResizeStarted:x,onResizeFinished:R,classes:v=[]}){const B=b(k),[I,D]=g(z,w),H=d(null),E=d([]),j=d([]);E.current=[],j.current=[];const O=n.useCallback((e=>{D({type:h.SetIsReadyToCompute,payload:{isReady:e}})}),[]),N=n.useCallback(((e,t)=>{D({type:h.StartDragging,payload:{gutterIdx:t}});const n=I.pairs[t];null==x||x(n.idx),n.a.style.userSelect="none",n.b.style.userSelect="none",n.gutter.style.cursor=C(e),n.parent.style.cursor=C(e),document.body.style.cursor=C(e)}),[I.pairs]),$=n.useCallback((()=>{D({type:h.StopDragging});const e=[];for(let t=0;t<I.pairs.length;t++){const n=I.pairs[t],i=c(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,o=t===I.pairs.length-1,g=n.a.getBoundingClientRect()[r===p.Horizontal?"width":"height"],{aGutterSize:d,bGutterSize:s}=_(n.gutterSize,a,o),l=(g+d)/i*100;if(e.push(l),o){const t=(n.b.getBoundingClientRect()[r===p.Horizontal?"width":"height"]+s)/i*100;e.push(t)}}if(void 0===I.draggingIdx)throw new Error("Could not reset cursor and user-select because 'state.draggingIdx' is undefined");const t=I.pairs[I.draggingIdx];null==R||R(t.idx,e),t.a.style.userSelect="",t.b.style.userSelect="",t.gutter.style.cursor="",t.parent.style.cursor="",document.body.style.cursor=""}),[I.draggingIdx,I.pairs,r]),F=n.useCallback(((e,t)=>{D({type:h.CalculateSizes,payload:{direction:e,gutterIdx:t}})}),[]),G=n.useCallback(((e,t,n)=>{D({type:h.CreatePairs,payload:{direction:e,children:t,gutters:n}})}),[]),P=n.useCallback(((e,t,n,i)=>{const r=t[0].parentNode;if(!r)throw new Error("Cannot set initial sizes - parent is undefined");if(void 0===c(e,r))throw new Error("Cannot set initial sizes - parent has undefined size");t.forEach(((r,a)=>{const o=a===t.length-1;let g;if(t.length>1){n[o?a-1:a].getBoundingClientRect()[e===p.Horizontal?"width":"height"]}g=i&&a<i.length?`calc(${i[a]}% - 0px)`:`calc(${100/t.length}% - 0px)`,e===p.Horizontal?(r.style.width=g,r.style.height="100%"):(r.style.height=g,r.style.width="100%")}))}),[]),T=n.useCallback(((e,t)=>{if(void 0===I.draggingIdx)throw new Error("Cannot adjust size - 'draggingIdx' is undefined");const n=I.pairs[I.draggingIdx];if(void 0===n.size)throw new Error("Cannot adjust size - 'pair.size' is undefined");if(void 0===n.gutterSize)throw new Error("Cannot adjust size - 'pair.gutterSize' is undefined");const i=n.aSizePct+n.bSizePct,r=t/n.size*i,a=i-t/n.size*i,o=0===I.draggingIdx,g=I.draggingIdx===I.pairs.length-1,{aGutterSize:d,bGutterSize:s}=_(n.gutterSize,o,g),c=`calc(${r}% - ${d}px)`,l=`calc(${a}% - ${s}px)`;e===p.Horizontal?(n.a.style.width=c,n.b.style.width=l):(n.a.style.height=c,n.b.style.height=l)}),[I.draggingIdx,I.pairs,r]),L=n.useCallback(((e,t,n)=>{if(!I.isDragging)return;if(void 0===I.draggingIdx)throw new Error("Cannot drag - 'draggingIdx' is undefined");const i=I.pairs[I.draggingIdx];if(void 0===i.start)throw new Error("Cannot drag - 'pair.start' is undefined");if(void 0===i.size)throw new Error("Cannot drag - 'pair.size' is undefined");if(void 0===i.gutterSize)throw new Error("Cannot drag - 'pair.gutterSize' is undefined");let r=function(e,t){return e===p.Horizontal?t.clientX:t.clientY}(t,e)-i.start,a=16,o=16;n.length>I.draggingIdx&&(a=n[I.draggingIdx]),n.length>=I.draggingIdx+1&&(o=n[I.draggingIdx+1]),r<i.gutterSize+a&&(r=i.gutterSize+a),r>=i.size-(i.gutterSize+o)&&(r=i.size-(i.gutterSize+o)),T(t,r)}),[I.isDragging,I.draggingIdx,I.pairs,T]);function V(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 l("mouseup",(()=>{if(I.isDragging){if(void 0===I.draggingIdx)throw new Error("Cannot calculate sizes after dragging = 'state.draggingIdx' is undefined");F(r,I.draggingIdx),$()}}),[I.isDragging,$]),l("mousemove",(e=>{I.isDragging&&L(e,r,r===p.Horizontal?a:o)}),[r,I.isDragging,L,a,o]),i((function(){if(!H.current)return;const e=H.current.parentElement;if(!e)return;const t=new ResizeObserver((()=>{const t=getComputedStyle(e),n=r===p.Horizontal?e.clientWidth:e.clientHeight;O(!!t&&!!n)}));return t.observe(e),()=>{t.disconnect()}}),[H.current,r]),i((function(){if(console.log({initialSizes:s}),I.isReady){if(!E.current||!j.current)throw new Error("Cannot create pairs - either variable 'childRefs' or 'gutterRefs' is undefined");B.length<=1?P(r,E.current,j.current,s):(P(r,E.current,j.current,s),G(r,E.current,j.current))}}),[k,I.isReady,r,P,G,s]),e("div",Object.assign({className:`__dbk__container ${r}`,ref:H},{children:I.isReady&&B.map(((i,a)=>t(n.Fragment,{children:[e("div",Object.assign({ref:e=>V(E,e),className:"__dbk__child-wrapper "+(a<v.length?v[a]:"")},{children:i}),void 0),a<B.length-1&&e(u,{ref:e=>V(j,e),className:S,theme:y,draggerClassName:m,direction:r,onMouseDown:e=>function(e,t){t.preventDefault(),F(r,e),N(r,e)}(a,e)},void 0)]},a)))}),void 0)}export{f as GutterTheme,p as SplitDirection,y as default};
 //# sourceMappingURL=index.js.map

package.json

 {
   "name": "@devbookhq/splitter",
-  "version": "1.3.0",
+  "version": "1.3.1",
   "description": "Create resizable split views - like in VS Code",
@@ -5,0 +5,0 @@ "license": "MIT",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

111736

increased by0.35%

No dependency changes