@indevstudio/react-split-panel/dist/react-split-panel.cjs.production.min.js

React split-pane component for TypeScript and React 17+

"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var n=require("react"),t=e(n),r=require("@indevstudio/react-event-listener"),i=e(r),a=e(require("@emotion/styled")),o=e(require("lodash/isEqual"));function s(e){return e.endsWith("px")?"px":e.endsWith("%")?"%":"ratio"}var l,u,c,p=function(e,n){if("%"!==s(e))return e;if(!n)return e;var t=e.search("%"),r=+e.slice(0,t)/100;return 0===r?e:"calc("+e+" - "+n+"px*"+r+")"},f=function(e,n,t){switch(n){case"%":return(e/t*100).toFixed(2)+"%";case"px":return e.toFixed(2)+"px";case"ratio":return(100*e).toFixed(0)}throw new Error("unit out of bound!")},d=function(e){return t.Children.toArray(e).filter((function(e){return e}))},h=function(e){return d(e).map((function(e){var n,t=null!=(n=e.props.size)?n:e.props.initialSize;return null!=t?t:"1"}))},v=function(e,n){return d(e).map((function(e){var t=e.props[n];return void 0===t?"maxSize"===n?"100%":"0":t}))},m=function(e,n){return e?(t.Children.count(e)-1)*n:0},x=function(e,n){var t=e.match(/([0-9]+)([px|%]*)/);return t?function(e,n,t){switch(n){case"%":return+(t*e/100).toFixed(2);default:return+e}}(+t[1],t[2],n):0},z=n.forwardRef((function(e,n){var r=e.children,i=e.className,a=function(e){var n,t=e.__internal,r=e.initialSize,i=e.minSize,a=e.maxSize;if(!t)throw new Error("__internal is null");var o=t.size,l=t.resizersSize,u=null!=(n=null!=o?o:r)?n:"1",c="vertical"===t.split,f=c?"maxWidth":"maxHeight",d=c?"width":"height",h={display:"flex",outline:"none"};switch(h[c?"minWidth":"minHeight"]=i&&p(i,l),h[f]=a&&p(a,l),s(u)){case"ratio":h.flex=u;break;case"%":case"px":h.flexGrow=0,h[d]=p(u,l)}return h}(e);return t.createElement("div",{className:i,style:a,ref:n},r)}));function b(){return(b=Object.assign||function(e){for(var n=1;n<arguments.length;n++){var t=arguments[n];for(var r in t)Object.prototype.hasOwnProperty.call(t,r)&&(e[r]=t[r])}return e}).apply(this,arguments)}function S(e,n){return n||(n=e.slice(0)),e.raw=n,e}var g=a.div(l||(l=S(["\n  background: #000;\n  opacity: 0.2;\n  z-index: 1;\n  box-sizing: border-box;\n  background-clip: padding-box;\n\n  :hover {\n    transition: all 2s ease;\n  }\n"]))),w=a(g)(u||(u=S(["\n  height: 11px;\n  margin: -5px 0;\n  border-top: 5px solid rgba(255, 255, 255, 0);\n  border-bottom: 5px solid rgba(255, 255, 255, 0);\n  cursor: row-resize;\n  width: 100%;\n\n  :hover {\n    border-top: 5px solid rgba(0, 0, 0, 0.5);\n    border-bottom: 5px solid rgba(0, 0, 0, 0.5);\n  }\n\n  .disabled {\n    cursor: not-allowed;\n  }\n  .disabled:hover {\n    border-color: transparent;\n  }\n"]))),y=a(g)(c||(c=S(["\n  width: 11px;\n  margin: 0 -5px;\n  border-left: 5px solid rgba(255, 255, 255, 0);\n  border-right: 5px solid rgba(255, 255, 255, 0);\n  cursor: col-resize;\n\n  :hover {\n    border-left: 5px solid rgba(0, 0, 0, 0.5);\n    border-right: 5px solid rgba(0, 0, 0, 0.5);\n  }\n  .disabled {\n    cursor: not-allowed;\n  }\n  .disabled:hover {\n    border-color: transparent;\n  }\n"]))),C=function(e){var r=e.index,i=e.split,a=e.onMouseDown,o=e.onTouchStart,s=e.style,l=e.className,u={"data-attribute":i,"data-type":"Resizer",onMouseDown:n.useCallback((function(e){a&&(e.preventDefault(),a(e,r))}),[]),onTouchEnd:n.useCallback((function(e){e.preventDefault()}),[]),onTouchStart:n.useCallback((function(e){e.preventDefault(),o(e,r)}),[]),className:l,style:s};return t.createElement("vertical"===i?y:w,Object.assign({},u))},E=function(e){var r=e.children,i=e.sizes,a=e.resizerSize,o=e.split,s=e.paneElementsRef,l=e.onResizerMouseDown,u=e.onResizerTouchStart,c=e.resizerStyle,p=e.resizerClassName,f=n.useMemo((function(){return d(r)}),[r]),h=n.useMemo((function(){var e=m(f,a);return f.map((function(n,t){return b({},n.props,{key:"Pane-"+t,"data-type":"Pane",ref:function(e){return s.current[t]=e},__internal:{split:o,resizersSize:e,size:i[t]}})}))}),[o,a,i,s,f]),v={split:o,onMouseDown:l,onTouchStart:u,style:c,className:p};return t.createElement(t.Fragment,null,h.map((function(e,r){var i=f[r];return t.createElement(t.Fragment,{key:"idx"},0!==r&&t.createElement(C,Object.assign({index:r-1,key:"Resizer-"+(r-1)},v)),t.createElement(t.Fragment,{key:"Pane-"+r},i.type===z?n.cloneElement(i,e):t.createElement(z,Object.assign({},e),i)))})))},P=a.div({display:"flex",height:"100%",flexDirection:"column",flex:1,outline:"none",overflow:"hidden",userSelect:"text"}),k=a.div({display:"flex",height:"100%",flexDirection:"row",flex:1,outline:"none",overflow:"hidden",userSelect:"text"});exports.Pane=z,exports.SplitPanel=function(e){var a=e.children,l=e.onResizeEnd,u=e.disallowResize,c=e.onResizeStart,p=e.split,z=e.resizerSize,b=e.onChange,S=e.className,g=e.style,w=e.resizerClassName,y=e.resizerStyle,C=n.useRef([]);n.useEffect((function(){C.current=C.current.slice(0,t.Children.count(a))}),[a]);var D=n.useRef(null),R=n.useState([]),M=R[0],O=R[1],N=n.useState(!1),T=N[0],j=N[1],F=n.useState(0),X=F[0],Y=F[1],_=n.useState(),q=_[0],W=_[1],B=n.useState(0),H=B[0],I=B[1],A=n.useState(0),G=A[0],U=A[1],J=n.useCallback((function(e,n,t){if(!u&&D.current){Y(e);var r=function(e,n,t,r,i){var a=function(e){return e.filter((function(e){return e})).map((function(e){return e.getBoundingClientRect()}))}(r),o=i.getBoundingClientRect(),s=v(e,"minSize"),l=v(e,"maxSize"),u=d(e),c=m(u,n),p="vertical"===t?o.width-c:o.height-c,f=s.map((function(e){return x(e,p)})),h=l.map((function(e){return x(e,p)})),z=a.map((function(e){return"vertical"===t?e.width:e.height}));return{resizersSize:c,paneDimensions:a,splitPaneSizePx:p,minSizesPx:f,maxSizesPx:h,sizesPx:z}}(a,z,p,C.current,D.current);W(r),I(n),U(t),j(!0),c&&c()}}),[a,z,p,C.current,D.current,u,c,W,I,U,j]),K=n.useCallback((function(e,n){if(q){var t=function(e){var n=e.split,t=e.resizerIndex,r=e.dimensionsSnapshot,i=e.startClientX,a=e.startClientY,o=e.clientX,l=e.clientY,u=e.sizes,c=r.sizesPx,p=r.minSizesPx,d=r.maxSizesPx,h=r.splitPaneSizePx,v=r.paneDimensions,m="vertical"===n?"width":"height",x=v[t],z=v[t+1],b=x[m]+z[m],S=p[t],g=p[t+1],w=Math.min(d[t],b),y=Math.min(d[t+1],b),C="vertical"===n?i-o:a-l,E=x[m]-C,P=z[m]+C,k=!1,D=!1;E<S?(E=S,k=!0):E>w&&(E=w,k=!0),P<g?(P=g,D=!0):P>y&&(P=y,D=!0),k?P=x[m]+z[m]-E:D&&(E=x[m]+z[m]-P),c[t]=E,c[t+1]=P;var R,M=u.concat();if([E,P].forEach((function(e,n){var r=s(u[t+n]);"ratio"!==r?M[t+n]=f(e,r,h):R=!0})),R){var O=0,N=0;M=M.map((function(e,n){return"ratio"===s(e)?(O++,N=n,f(c[n],"ratio",0)):e})),1===O&&(M[N]="1")}return M}({clientX:e,clientY:n,startClientX:H,dimensionsSnapshot:q,resizerIndex:X,sizes:M,split:p,startClientY:G});b&&b(t),O(t)}}),[p,b,H,q,X,M,p,G,O]),L=n.useCallback((function(e){e.preventDefault(),j(!1),l&&l(M)}),[M,j,l]),Q=n.useCallback((function(e){e.preventDefault(),K(e.clientX,e.clientY)}),[K]),V=n.useCallback((function(e){e.preventDefault();var n=e.touches[0];K(n.clientX,n.clientY)}),[K]),Z=n.useCallback((function(e,n){0===e.button&&(e.preventDefault(),J(n,e.clientX,e.clientY))}),[J]),$=n.useCallback((function(e,n){e.preventDefault();var t=e.touches[0];J(n,t.clientX,t.clientY)}),[J]);n.useEffect((function(){var e=h(a);o(M,e)||O(e)}),[O,h,a]);var ee={onResizerMouseDown:Z,onResizerTouchStart:$,paneElementsRef:C,resizerSize:z,sizes:M,split:p,resizerClassName:w,resizerStyle:y},ne="vertical"===p?k:P;return t.createElement(t.Fragment,null,T&&t.createElement(i,{target:document,onMouseUp:r.withOptions(L,{passive:!1}),onMouseMove:r.withOptions(Q,{passive:!1}),onTouchMove:r.withOptions(V,{passive:!1}),onTouchEnd:r.withOptions(L,{passive:!1}),onTouchCancel:r.withOptions(L,{passive:!1})}),t.createElement(ne,{className:S,style:g,"data-type":"SplitPane","data-split":p,ref:D},t.createElement(E,Object.assign({},ee),a)))},exports.useSplitPanel=function(e){return b({resizerSize:1,split:"vertical"},e)};
//# sourceMappingURL=react-split-panel.cjs.production.min.js.map