a-multilayout-splitter/dist/base/Split.js

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

var __rest=this&&this.__rest||function(e,i){var t={};for(l in e)Object.prototype.hasOwnProperty.call(e,l)&&i.indexOf(l)<0&&(t[l]=e[l]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols)for(var s=0,l=Object.getOwnPropertySymbols(e);s<l.length;s++)i.indexOf(l[s])<0&&Object.prototype.propertyIsEnumerable.call(e,l[s])&&(t[l[s]]=e[l[s]]);return t};import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";import React from"react";import"../style/index.css";import SplitUtils from"../utils/SplitUtils";import SplitSessionStorage from"../utils/SplitSessionStorage";import throttle from"lodash/throttle";import debounce from"lodash/debounce";import ManageHandleBar from"../helper/ManageHandleBar";import DragHandle from"../DragHandle/DragHandle";import{withSplitState}from"./SplitProvider";class Split extends React.Component{constructor(e){var i;super(e),this.HORIZONTAL="horizontal",this.VERTICAL="vertical",this.state={dragging:!1},this.currentInstanceProps={children:null,disable:null,lineBar:null,visible:null,initialSize:null,collapsed:null,maxSize:null,minSize:null,modes:null,enableLocalStorage:null},this.paneConfig={minPrevSize:null,maxPrevSize:null,minNextSize:null,maxNextSize:null,prevElement:null,nextElement:null},this.handleBarLayoutInfo={width:1,afterElementWidth:16,marginLeft:5,marginRight:5},this.currentInstanceProps=Object.assign(Object.assign({},e.splitStateContext.splitState),{modes:Object.assign(Object.assign({},e.splitStateContext.splitState.modes),{[e.id]:e.mode}),children:Object.assign(Object.assign({},e.splitStateContext.splitState.children),{[e.id]:React.Children.toArray(e.children)}),initialSize:Object.assign(Object.assign({},e.splitStateContext.splitState.initialSize),{[e.id]:e.initialSizes}),collapsed:Object.assign(Object.assign({},e.splitStateContext.splitState.collapsed),{[e.id]:e.collapsed}),visible:Object.assign(Object.assign({},e.splitStateContext.splitState.visible),{[e.id]:null!=(i=e.visible)?i:e.visiable}),disable:Object.assign(Object.assign({},e.splitStateContext.splitState.disable),{[e.id]:e.disable}),lineBar:Object.assign(Object.assign({},e.splitStateContext.splitState.lineBar),{[e.id]:e.lineBar}),maxSize:Object.assign(Object.assign({},e.splitStateContext.splitState.maxSize),{[e.id]:(e.maxSizes,Array.isArray(e.maxSizes)&&0===e.maxSizes.length?[...Array(React.Children.toArray(e.children).length).fill(100)]:e.maxSizes)}),minSize:Object.assign(Object.assign({},e.splitStateContext.splitState.minSize),{[e.id]:void 0===e.minSizes||Array.isArray(e.minSizes)&&0===e.minSizes.length?[...Array(React.Children.toArray(e.children).length).fill(0)]:e.minSizes})}),this.onDraggingThrottled=throttle(this.onDragging.bind(this),16),this.onDragEndThrottled=throttle(this.onDragEnd.bind(this),16),this.saveHorizontalSizesToLocalStorageDebounced=debounce(SplitUtils.saveHorizontalSizesToLocalStorage.bind(SplitUtils),300),this.saveVerticalSizesToLocalStorageDebounced=debounce(SplitUtils.saveVerticalSizesToLocalStorage.bind(SplitUtils),300),this.userSession=new SplitSessionStorage,this.initDragging=!1,window.addEventListener("beforeunload",this.saveHorizontalSizesToLocalStorageDebounced),window.addEventListener("beforeunload",this.saveVerticalSizesToLocalStorageDebounced)}componentWillUnmount(){this.removeTouchEvent(),this.removeEvent()}componentDidMount(){this.props.splitStateContext.setSplitState(e=>Object.assign(Object.assign({},e),this.currentInstanceProps)),this.setInitialSizes()}componentDidUpdate(e,i,t){var s=this.props.splitStateContext["splitState"];e.splitStateContext.splitState.children!==s.children&&this.arraysAreEqual(e.splitStateContext.splitState.initialSize,s.initialSize)&&this.arraysAreEqual(e.splitStateContext.splitState.collapsed,s.collapsed)&&this.resetInitialSizes()}arraysAreEqual(i,t){if(!i)return!1;if(!t)return!1;if(i.length!==t.length)return!1;for(let e=0;e<i.length;e++)if(i[e]===t[e])return!1;return!0}checkTouchDevice(){return"ontouchstart"in window||0<navigator.maxTouchPoints}addTouchEvent(){this.checkTouchDevice()&&(window.addEventListener("touchmove",this.onDraggingThrottled,{passive:!1}),window.addEventListener("touchend",this.onDragEndThrottled,{passive:!1}))}removeTouchEvent(){this.checkTouchDevice()&&(window.removeEventListener("touchmove",this.onDraggingThrottled,!1),window.removeEventListener("touchcancel",this.onDragEndThrottled,!1))}removeEvent(){window.removeEventListener("mousemove",this.onDraggingThrottled,!1),window.removeEventListener("mouseup",this.onDragEndThrottled,!1),window.removeEventListener("beforeunload",this.saveHorizontalSizesToLocalStorageDebounced,!1),window.removeEventListener("beforeunload",this.saveVerticalSizesToLocalStorageDebounced,!1)}addPane(p,c,d,x={collapsed:!1,disable:null,initialSize:"",lineBar:null,maxSize:100,minSize:0,visible:null,newChildPosition:-1}){const{setSplitState:e,splitState:g}=this.props.splitStateContext;g&&g.modes&&(SplitUtils.resetLocalStorageOnPaneAddOrRemove(g.modes[p]),-1!==x.newChildPosition&&--x.newChildPosition,e(e=>{var i=React.Children.toArray(c),t=[...e.collapsed[p]];let s=e.disable&&void 0!==e.disable[p]&&null!==e.disable[p]?Array.isArray(e.disable[p])?[...e.disable[p]]:e.disable[p]:null,l=e.visible&&void 0!==e.visible[p]&&null!==e.visible[p]?Array.isArray(e.visible[p])?[...e.visible[p]]:e.visible[p]:null,n=e.lineBar&&void 0!==e.lineBar[p]&&null!==e.lineBar[p]?Array.isArray(e.lineBar)?[...e.lineBar[p]]:e.lineBar[p]:null;var a,r=[...d],o=e.maxSize&&void 0!==e.maxSize[p]&&null!==e.maxSize[p]?[...e.maxSize[p]]:void 0,h=e.minSize&&void 0!==e.minSize[p]&&null!==e.minSize[p]?[...e.minSize[p]]:void 0;return x&&null!=x.disable&&(Array.isArray(s)?s=-1!==x.newChildPosition?[...s.slice(0,x.newChildPosition),x.disable,...s.slice(x.newChildPosition)]:[...s,x.disable]:"boolean"==typeof s&&(s=[x.disable])),x&&null!=x.visible&&(Array.isArray(l)?l=-1!==x.newChildPosition?[...l.slice(0,x.newChildPosition),x.visible,...l.slice(x.newChildPosition)]:[...l,x.visible]:"boolean"==typeof l&&(l=[x.visible])),x&&null!=x.lineBar&&(Array.isArray(n)?n=-1!==x.newChildPosition?[...n.slice(0,x.newChildPosition),x.lineBar,...n.slice(x.newChildPosition)]:[...n,x.lineBar]:"boolean"==typeof n&&(n=[x.lineBar])),e&&e.children&&e.children[p]?(a=[...e.children[p]],Object.assign(Object.assign({},e),{children:Object.assign(Object.assign({},e.children),{[p]:-1!==x.newChildPosition?[...a.slice(0,x.newChildPosition),...i,...a.slice(x.newChildPosition)]:[...e.children[p],...i]}),collapsed:Object.assign(Object.assign({},e.collapsed),{[p]:-1!==x.newChildPosition?[...t.slice(0,x.newChildPosition),x.collapsed,...t.slice(x.newChildPosition)]:[...t,x.collapsed]}),disable:Object.assign(Object.assign({},e.disable),{[p]:s}),visible:Object.assign(Object.assign({},e.visible),{[p]:l}),lineBar:Object.assign(Object.assign({},e.lineBar),{[p]:n}),initialSize:Object.assign(Object.assign({},e.initialSize),{[p]:-1!==x.newChildPosition?[...r.slice(0,x.newChildPosition),x.initialSize,...r.slice(x.newChildPosition)]:[...r,x.initialSize]}),maxSize:Object.assign(Object.assign({},e.maxSize),{[p]:o?-1!==x.newChildPosition?[...o.slice(0,x.newChildPosition),x.maxSize,...o.slice(x.newChildPosition)]:[...o,x.maxSize]:void 0}),minSize:Object.assign(Object.assign({},e.minSize),{[p]:h?-1!==x.newChildPosition?[...h.slice(0,x.newChildPosition),x.minSize,...h.slice(x.newChildPosition)]:[...h,x.minSize]:void 0})})):Object.assign(Object.assign({},g),{children:Object.assign(Object.assign({},g.children),{[p]:[c]}),collapsed:Object.assign(Object.assign({},e.collapsed),{[p]:-1!==x.newChildPosition?[...t.slice(0,x.newChildPosition),x.collapsed,...t.slice(x.newChildPosition)]:[...t,x.collapsed]}),disable:Object.assign(Object.assign({},e.disable),{[p]:s}),visible:Object.assign(Object.assign({},e.visible),{[p]:l}),lineBar:Object.assign(Object.assign({},e.lineBar),{[p]:n}),initialSize:Object.assign(Object.assign({},e.initialSize),{[p]:-1!==x.newChildPosition?[...r.slice(0,x.newChildPosition),x.initialSize,...r.slice(x.newChildPosition)]:[...r,x.initialSize]}),maxSize:Object.assign(Object.assign({},e.maxSize),{[p]:o?-1!==x.newChildPosition?[...o.slice(0,x.newChildPosition),x.maxSize,...o.slice(x.newChildPosition)]:[...o,x.maxSize]:void 0}),minSize:Object.assign(Object.assign({},e.minSize),{[p]:h?-1!==x.newChildPosition?[...h.slice(0,x.newChildPosition),x.minSize,...h.slice(x.newChildPosition)]:[...h,x.minSize]:void 0})})}))}removePane(h,p){var e=this.props.splitStateContext["setSplitState"];SplitUtils.resetLocalStorageOnPaneAddOrRemove("horizontal"),e(e=>{var i,t,s,l,n,a,r,o;return e&&({children:n,collapsed:t,disable:o,lineBar:a,maxSize:s,minSize:l,visible:r}=e,t=t?Object.assign(Object.assign({},t),{[h]:[...t[h]]}):{},s=s?Object.assign(Object.assign({},s),{[h]:s[h]?[...s[h]]:[]}):{},l=l?Object.assign(Object.assign({},l),{[h]:l[h]?[...l[h]]:[]}):{},n=n?Object.assign(Object.assign({},n),{[h]:[...n[h]]}):{},a=a?Object.assign(Object.assign({},a),{[h]:Array.isArray(a[h])?[...a[h]]:a[h]}):{},r=r?Object.assign(Object.assign({},r),{[h]:Array.isArray(r[h])?[...r[h]]:r[h]}):{},o=o?Object.assign(Object.assign({},o),{[h]:Array.isArray(o[h])?[...o[h]]:o[h]}):{},t[h].splice(p-1,1),null!=(i=s[h])&&i.splice(p-1,1),null!=(i=l[h])&&i.splice(p-1,1),n[h].splice(p-1,1),Array.isArray(a[h])&&null!=(i=a[h])&&i.splice(p-1,1),Array.isArray(r[h])&&null!=(i=r[h])&&i.splice(p-1,1),Array.isArray(o[h])&&null!=(i=o[h])&&i.splice(p-1,1),Object.assign(Object.assign({},e),{initialSize:e.initialSize&&e.initialSize[h]?Object.assign(Object.assign({},e.initialSize),{[h]:function(i,e){var e=i.splice(e,1),t=parseFloat(e[0])/i.length;for(let e=0;e<i.length;e++)i[e]=""+(parseFloat(i[e])+t)+(i[e].includes("%")?"%":"px");return i}([...e.initialSize[h]],p)}):Object.assign({},e.initialSize),collapsed:Object.assign({},t),maxSize:Object.assign({},s),minSize:Object.assign({},l),children:Object.assign({},n),lineBar:Object.assign({},a),visible:Object.assign({},r),disable:Object.assign({},o)}))})}resetInitialSizes(){const s=this.props.splitStateContext["splitState"];s.modes&&s.initialSize&&s.children&&Object.keys(s.children).map((e,i)=>{var t;return this.setInitialSizes({mode:s.modes[e],initialSizesConfig:null==(t=s.initialSize)?void 0:t[e],collapseConfig:null==(t=s.collapsed)?void 0:t[e],maxSizeConfig:null==(t=s.maxSize)?void 0:t[e],minSizeConfig:null==(t=s.minSize)?void 0:t[e]}),e})}setInitialSizes(e=null){let{mode:n,initialSizes:i}=this.props;var a=null==(b=this.warpper)?void 0:b.children;if((n=(null==e?void 0:e.mode)||n)===this.HORIZONTAL&&this.warpper){if(!this.warpper.classList.contains("a-split-horizontal"))return}else if(this.warpper&&!this.warpper.classList.contains("a-split-vertical"))return;if(a&&0<a.length){SplitUtils.setWrapper(this.warpper,n,{[this.props.id]:this.props.onLayoutChange},this.props.enableSessionStorage),this.props.id&&SplitUtils.setSplitPaneInstance({[this.props.id]:this.warpper});var r=(null==e?void 0:e.initialSizesConfig)||i,o=(null==e?void 0:e.collapseConfig)||this.props.collapsed,h=(null==e?void 0:e.maxSizeConfig)||this.props.maxSizes,p=(null==e?void 0:e.minSizeConfig)||this.props.minSizes;const z=this.userSession.GetSession(n);var c,d,x,g,S,u,f=(a.length+1)/2,b=Math.abs((a.length+1)/2-a.length),v=(this.handleBarLayoutInfo.marginLeft+this.handleBarLayoutInfo.marginRight+this.handleBarLayoutInfo.width)*b/f;let t=1,s=-1,l=!1;if(r&&0<r.length){let i=0;for(let e=0;e<a.length;e++)a[e].classList.contains("a-split-control-pane")&&(c=r[i],d=e,a.length>d)&&(x=a[d],z&&0<z.length&&z.length===r.length&&this.props.enableSessionStorage?"-1"===z[i].flexGrow?x.style.flexBasis=z[i].flexBasis:("0"===z[i].flexGrow&&x.classList.add("a-split-hidden"),x.style.flexBasis=z[i].flexBasis,x.style.flexGrow=z[i].flexGrow):(g=null==(g=x.parentElement)?void 0:g.getBoundingClientRect(),-1<v?c&&c.includes("%")?x.style.flexBasis=parseFloat(c)-SplitUtils.pixelToPercentage(v,`${n===this.HORIZONTAL?null==g?void 0:g.width:null==g?void 0:g.height}px`)+"%":x.style.flexBasis=parseFloat(c)-v+"px":x.style.flexBasis=""+c,o[i]||(s=d),o[i]&&(x.style.flexGrow="0",x.classList.add("a-split-hidden"),l=!0)),x.setAttribute("min-size",""+(p[i]||0)),x.setAttribute("max-size",""+(h[i]||100)),ManageHandleBar.removeHandleIconOnClose(this.warpper,t++,SplitUtils.modeWrapper,SplitUtils.cachedMappedSplitPanePosition,n===this.HORIZONTAL?"horizontal":"vertical"),++i)}if(r&&0===r.length){let i=0;for(let e=0;e<a.length;e++)a[e].classList.contains("a-split-control-pane")&&(u=null==(u=(S=a[e]).parentElement)?void 0:u.getBoundingClientRect(),S.style.flexBasis=(n===this.HORIZONTAL?null==u?void 0:u.width:null==u?void 0:u.height)/f-v+"px",S.setAttribute("min-size",""+(p[i]||0)),S.setAttribute("max-size",""+(h[i]||100)),o[i]||(s=e),o[i]&&(S.style.flexGrow="0",S.classList.add("a-split-hidden"),l=!0),++i,ManageHandleBar.removeHandleIconOnClose(this.warpper,t++,SplitUtils.modeWrapper,SplitUtils.cachedMappedSplitPanePosition,n===this.HORIZONTAL?"horizontal":"vertical"))}-1<s&&l&&a[s]&&(a[s].style.flexGrow="1",l=!1),z&&r&&0<z.length&&z.length!==r.length&&(n===this.HORIZONTAL?SplitUtils.resetLocalStorageOnPaneAddOrRemove("horizontal"):SplitUtils.resetLocalStorageOnPaneAddOrRemove("vertical")),setTimeout(()=>{z&&0===z.length&&(n===this.HORIZONTAL?SplitUtils.saveHorizontalSizesToLocalStorage():SplitUtils.saveVerticalSizesToLocalStorage())},600)}}setResizingLayout(t,s,l){l=String("horizontal"===l?this.props.width||(null==(l=null==t?void 0:t.parentElement)?void 0:l.getBoundingClientRect().width)||(null==(l=null==s?void 0:s.parentElement)?void 0:l.getBoundingClientRect().width):this.props.height||(null==(l=null==t?void 0:t.parentElement)?void 0:l.getBoundingClientRect().height)||(null==(l=null==s?void 0:s.parentElement)?void 0:l.getBoundingClientRect().height));if(this.prevToPrev&&this.prevToPrev.classList.contains("a-split-hidden")){let e=-1,i=!1;if(this.prevToPrev.style.flexBasis.includes("px")&&s.style.flexBasis.includes("%"))if(""===s.style.flexGrow){if(SplitUtils.percentageToPixel(this.nextSize,l)-parseFloat(this.prevToPrev.style.flexBasis)<0)return;t.style.flexBasis.includes("px")?t.style.flexBasis=SplitUtils.percentageToPixel(this.nextSize,l)-parseFloat(this.prevToPrev.style.flexBasis)+"px":t.style.flexBasis=this.nextSize-SplitUtils.pixelToPercentage(parseFloat(this.prevToPrev.style.flexBasis),l)+"%",s.style.flexBasis=this.preSize+"%"}else e=this.preSize-SplitUtils.pixelToPercentage(parseFloat(this.prevToPrev.style.flexBasis),l);else if(this.prevToPrev.style.flexBasis.includes("%")&&s.style.flexBasis.includes("px"))if(i=!0,""===s.style.flexGrow){if(SplitUtils.percentageToPixel(this.nextSize,l)-SplitUtils.percentageToPixel(parseFloat(this.prevToPrev.style.flexBasis),l)<0)return;t.style.flexBasis.includes("px")?t.style.flexBasis=SplitUtils.percentageToPixel(this.nextSize,l)-SplitUtils.percentageToPixel(parseFloat(this.prevToPrev.style.flexBasis),l)+"px":t.style.flexBasis=this.nextSize-parseFloat(this.prevToPrev.style.flexBasis)+"%",s.style.flexBasis=SplitUtils.percentageToPixel(this.preSize,l)+"px"}else e=SplitUtils.percentageToPixel(this.preSize,l)-SplitUtils.percentageToPixel(parseFloat(this.prevToPrev.style.flexBasis),l);else if(this.prevToPrev.style.flexBasis.includes("px")&&s.style.flexBasis.includes("px"))if(i=!0,""===s.style.flexGrow){if(SplitUtils.percentageToPixel(this.nextSize,l)-parseFloat(this.prevToPrev.style.flexBasis)<0)return;t.style.flexBasis.includes("px")?t.style.flexBasis=SplitUtils.percentageToPixel(this.nextSize,l)-parseFloat(this.prevToPrev.style.flexBasis)+"px":t.style.flexBasis=this.nextSize-SplitUtils.percentageToPixel(parseFloat(this.prevToPrev.style.flexBasis),l)+"%",s.style.flexBasis=SplitUtils.percentageToPixel(this.preSize,l)+"px"}else e=SplitUtils.percentageToPixel(this.preSize,l)-parseFloat(this.prevToPrev.style.flexBasis);else if(""===s.style.flexGrow){if(this.nextSize-parseFloat(this.prevToPrev.style.flexBasis)<0)return;t.style.flexBasis.includes("px")?t.style.flexBasis=SplitUtils.percentageToPixel(this.nextSize,l)-SplitUtils.percentageToPixel(parseFloat(this.prevToPrev.style.flexBasis),l)+"px":t.style.flexBasis=this.nextSize-parseFloat(this.prevToPrev.style.flexBasis)+"%",s.style.flexBasis=this.preSize+"%"}else e=this.preSize-parseFloat(this.prevToPrev.style.flexBasis);0<=e&&(s.style.flexBasis=""+e+(i?"px":"%"),t.style.flexBasis.includes("px")?t.style.flexBasis=SplitUtils.percentageToPixel(this.nextSize,l)+"px":t.style.flexBasis=this.nextSize+"%")}else if(this.nextToNext&&this.nextToNext.classList.contains("a-split-hidden")){let e=-1,i=!1;if(this.nextToNext.style.flexBasis.includes("px")&&t.style.flexBasis.includes("%"))if(""===t.style.flexGrow){if(SplitUtils.percentageToPixel(this.preSize,l)-parseFloat(this.nextToNext.style.flexBasis)<0)return;s.style.flexBasis.includes("px")?s.style.flexBasis=SplitUtils.percentageToPixel(this.preSize,l)-parseFloat(this.nextToNext.style.flexBasis)+"px":s.style.flexBasis=this.preSize-SplitUtils.pixelToPercentage(parseFloat(this.nextToNext.style.flexBasis),l)+"%",t.style.flexBasis=this.nextSize+"%"}else e=this.nextSize-SplitUtils.pixelToPercentage(parseFloat(this.nextToNext.style.flexBasis),l);else if(this.nextToNext.style.flexBasis.includes("%")&&t.style.flexBasis.includes("px"))if(i=!0,""===t.style.flexGrow){if(SplitUtils.percentageToPixel(this.preSize,l)-SplitUtils.percentageToPixel(parseFloat(this.nextToNext.style.flexBasis),l)<0)return;s.style.flexBasis.includes("px")?s.style.flexBasis=SplitUtils.percentageToPixel(this.preSize,l)-SplitUtils.percentageToPixel(parseFloat(this.nextToNext.style.flexBasis),l)+"px":s.style.flexBasis=this.preSize-parseFloat(this.nextToNext.style.flexBasis)+"%",t.style.flexBasis=SplitUtils.percentageToPixel(this.nextSize,l)+"px"}else e=SplitUtils.percentageToPixel(this.nextSize,l)-SplitUtils.percentageToPixel(parseFloat(this.nextToNext.style.flexBasis),l);else if(this.nextToNext.style.flexBasis.includes("px")&&t.style.flexBasis.includes("px"))if(i=!0,""===t.style.flexGrow){if(SplitUtils.percentageToPixel(this.preSize,l)-parseFloat(this.nextToNext.style.flexBasis)<0)return;s.style.flexBasis.includes("px")?s.style.flexBasis=SplitUtils.percentageToPixel(this.preSize,l)-parseFloat(this.nextToNext.style.flexBasis)+"px":s.style.flexBasis=this.preSize-SplitUtils.percentageToPixel(parseFloat(this.nextToNext.style.flexBasis),l)+"%",t.style.flexBasis=SplitUtils.percentageToPixel(this.nextSize,l)+"px"}else e=SplitUtils.percentageToPixel(this.nextSize,l)-parseFloat(this.nextToNext.style.flexBasis);else if(""===t.style.flexGrow){if(this.preSize-parseFloat(this.nextToNext.style.flexBasis)<0)return;s.style.flexBasis.includes("px")?s.style.flexBasis=SplitUtils.percentageToPixel(this.preSize,l)-SplitUtils.percentageToPixel(parseFloat(this.nextToNext.style.flexBasis),l)+"px":s.style.flexBasis=this.preSize-parseFloat(this.nextToNext.style.flexBasis)+"%",t.style.flexBasis=this.nextSize+"%"}else e=this.nextSize-parseFloat(this.nextToNext.style.flexBasis);0<=e&&(s.style.flexBasis.includes("px")?s.style.flexBasis=SplitUtils.percentageToPixel(this.preSize,l)+"px":s.style.flexBasis=this.preSize+"%",t.style.flexBasis=""+e+(i?"px":"%"))}else s.style.flexBasis.includes("px")?s.style.flexBasis=SplitUtils.percentageToPixel(this.preSize,l)+"px":s.style.flexBasis=this.preSize+"%",t.style.flexBasis.includes("px")?t.style.flexBasis=SplitUtils.percentageToPixel(this.nextSize,l)+"px":t.style.flexBasis=this.nextSize+"%"}checkResizingBound(e,i,t,s){if(e&&i){if(this.paneConfig.minPrevSize&&t<=parseInt(this.paneConfig.minPrevSize))return 1;if(this.paneConfig.minNextSize&&s<=parseInt(this.paneConfig.minNextSize))return 1}if(e&&i){if(this.paneConfig.maxPrevSize&&t>=parseInt(this.paneConfig.maxPrevSize))return 1;if(this.paneConfig.maxNextSize&&s>=parseInt(this.paneConfig.maxNextSize))return 1}return e&&i&&!this.paneConfig.nextElement&&!this.paneConfig.prevElement?1:0}onMouseDown(e,i){var t,s;i.target&&this.warpper&&(i.cancelable&&!this.checkTouchDevice()&&i.preventDefault(),s=("touches"in i?i.touches[0]:i).clientX,t=("touches"in i?i.touches[0]:i).clientY,this.paneNumber=e,this.startX=s,this.startY=t,this.move=!0,i.target.classList.contains("a-splitter-handlebar-icon")||i.target.classList.contains("a-splitter-collapse-icon")?this.target=i.target.parentElement:this.target=i.target,e=this.target.previousElementSibling,s=this.target.nextElementSibling,this.paneConfig=Object.assign(Object.assign({},this.paneConfig),{prevElement:e,nextElement:s}),this.boxWidth=this.warpper.offsetWidth,this.boxHeight=this.warpper.offsetHeight,e&&(this.preWidth=e.offsetWidth,this.preHeight=e.offsetHeight,this.paneConfig=Object.assign(Object.assign({},this.paneConfig),{minPrevSize:e.getAttribute("min-size"),maxPrevSize:e.getAttribute("max-size")})),s&&(this.nextWidth=s.offsetWidth,this.nextHeight=s.offsetHeight,this.paneConfig=Object.assign(Object.assign({},this.paneConfig),{minNextSize:s.getAttribute("min-size"),maxNextSize:s.getAttribute("max-size")})),e&&e.previousElementSibling&&e.previousElementSibling.previousElementSibling&&(this.prevToPrev=e.previousElementSibling.previousElementSibling),s&&s.nextElementSibling&&s.nextElementSibling.nextElementSibling&&(this.nextToNext=s.nextElementSibling.nextElementSibling),this.addTouchEvent(),window.addEventListener("mouseup",this.onDragEndThrottled,!1),window.addEventListener("mousemove",this.onDraggingThrottled),this.setState({dragging:!0}))}onDragging(e){if(e.cancelable&&!this.checkTouchDevice()&&e.preventDefault(),this.move){this.state.dragging||this.setState({dragging:!0});const{mode:t,onDragging:s}=this.props,l=this.paneConfig.nextElement,n=this.paneConfig.prevElement;if(!l||!n||!l.classList.contains("a-split-hidden")&&!n.classList.contains("a-split-hidden")){var i=("touches"in e?e.touches[0]:e).clientX,e=("touches"in e?e.touches[0]:e).clientY;const a=i-this.startX,r=e-this.startY;this.preSize=0,this.nextSize=0;const o=()=>{if(t===this.HORIZONTAL){if(this.preSize=-1<this.preWidth+a?this.preWidth+a:0,this.nextSize=-1<this.nextWidth-a?this.nextWidth-a:0,0===this.preSize||0===this.nextSize)return;if(Math.abs(this.preSize-this.preWidth)<=1)return;if(Math.abs(this.nextSize-this.nextWidth)<=1)return;if(this.preSize=100*(1<=this.preSize/this.boxWidth?1:this.preSize/this.boxWidth),this.nextSize=100*(1<=this.nextSize/this.boxWidth?1:this.nextSize/this.boxWidth),this.checkResizingBound(n,l,this.preSize,this.nextSize))return;n&&l&&this.setResizingLayout(l,n,this.HORIZONTAL)}if(t===this.VERTICAL&&-1<this.preHeight+r&&-1<this.nextHeight-r){if(this.preSize=-1<this.preHeight+r?this.preHeight+r:0,this.nextSize=-1<this.nextHeight-r?this.nextHeight-r:0,this.preSize=100*(1<=this.preSize/this.boxHeight?1:this.preSize/this.boxHeight),this.nextSize=100*(1<=this.nextSize/this.boxHeight?1:this.nextSize/this.boxHeight),0===this.preSize||0===this.nextSize)return;if(Math.abs(this.preSize-this.preHeight)<=1)return;if(Math.abs(this.nextSize-this.nextHeight)<=1)return;if(this.checkResizingBound(n,l,this.preSize,this.nextSize))return;n&&l&&this.setResizingLayout(l,n,this.VERTICAL)}this.initDragging=!0,s&&s(this.preSize,this.nextSize,this.paneNumber)};requestAnimationFrame(function(){o()}.bind(this))}}}onDragEnd(){var e=this.props["onDragEnd"];this.move=!1,e&&e(this.preSize,this.nextSize,this.paneNumber),this.removeTouchEvent(),this.removeEvent(),this.setState({dragging:!1}),this.paneConfig={maxNextSize:null,maxPrevSize:null,minNextSize:null,minPrevSize:null,prevElement:null,nextElement:null},this.props.enableSessionStorage&&this.initDragging&&(this.props.mode===this.HORIZONTAL?this.saveHorizontalSizesToLocalStorageDebounced():this.saveVerticalSizesToLocalStorageDebounced(),this.initDragging=!1)}render(){const e=this.props,{prefixCls:r,childPrefixCls:o,className:i,mode:t,visible:s=null==this.props.visible&&this.props.visiable,renderBar:h,fixClass:l,id:p}=e,n=__rest(e,["prefixCls","childPrefixCls","className","mode","visiable","visible","renderBar","lineBar","disable","onDragEnd","onDragging","fixClass","id"]);var a=this.state["dragging"];const c=this.props.splitStateContext["splitState"];var d=c["children"],a=[r,i,r+"-"+t,a?"dragging":null,l?"a-split-pane-fix a-split-pane-helper-fix":null].filter(Boolean).join(" ").trim(),d=React.Children.toArray(d[p]),{height:x,width:g}=n,S=__rest(n,["initialSizes","minSizes","maxSizes","enableSessionStorage","collapsed","height","width","onLayoutChange","splitStateContext"]);return _jsx("div",Object.assign({className:a},S,{ref:e=>this.warpper=e,style:Object.assign({height:x||"",width:g||""},S.style),id:p},{children:React.Children.map(d,(e,i)=>{var t,s=Object.assign({},e.props,{className:[o,r+"-pane",e&&e.props&&"horizontal"!==e.props.mode&&"vertical"!==e.props.mode&&"a-split-scrollable",e.props.className].filter(Boolean).join(" ").trim(),style:Object.assign({},e.props.style)}),l=!0===(null==(l=c.visible)?void 0:l[p])||c.visible&&Array.isArray(null==(l=c.visible)?void 0:l[p])&&(null==(l=null==(l=c.visible)?void 0:l[p])?void 0:l.includes(i+1))||!1,n={className:[r+"-bar"].filter(Boolean).join(" ").trim()};0!==i&&(!0===(null==(t=c.lineBar)?void 0:t[p])||c.lineBar&&Array.isArray(null==(t=c.lineBar)?void 0:t[p])&&null!=(t=null==(t=c.lineBar)?void 0:t[p])&&t.includes(i))&&(n.className=[n.className,null!=(t=c.lineBar)&&t[p]?r+"-line-bar":null].filter(Boolean).join(" ").trim()),0!==i&&(!0===(null==(t=c.disable)?void 0:t[p])||c.disable&&Array.isArray(null==(t=c.disable)?void 0:t[p])&&null!=(t=null==(t=c.disable)?void 0:t[p])&&t.includes(i))&&(n.className=[n.className,null!=(t=c.disable)&&t[p]?"a-split-handle-disable":null].filter(Boolean).join(" ").trim());let a=null;return 0!==i&&l&&h?a=h(Object.assign(Object.assign({},n),{onMouseDown:this.onMouseDown.bind(this,i+1),onTouchStart:this.onMouseDown.bind(this,i+1)}),i):0!==i&&l&&(a=_jsx(DragHandle,{props:n,mode:this.props.mode,onMouseDown:this.onMouseDown.bind(this,i+1),onTouchStart:this.onMouseDown.bind(this,i+1),position:i},i)),_jsxs(React.Fragment,{children:[a,React.cloneElement(e&&e.props&&("horizontal"===e.props.mode||"vertical"===e.props.mode)?e:_jsx("div",{children:e}),Object.assign({},s))]},i)})}))}}Split.defaultProps={prefixCls:"a-split",childPrefixCls:"a-split-control-pane",visiable:!0,mode:"horizontal",initialSizes:[],minSizes:[],maxSizes:[],enableSessionStorage:!1,collapsed:[],height:null,width:null};export default withSplitState(Split);