primereact/splitter/splitter.esm.min.js

PrimeReact is an open source UI library for React featuring a rich set of 90+ components, a theme designer, various theme alternatives such as Material, Bootstrap, Tailwind, premium templates and professional support. In addition, it integrates with Prime

import*as e from"react";import{PrimeReactContext as t}from"primereact/api";import{ComponentBase as r,useHandleStyle as n}from"primereact/componentbase";import{useMergeProps as u,useEventListener as i,useMountEffect as l}from"primereact/hooks";import{ObjectUtils as o,classNames as c,DomHandler as a,UniqueComponentId as s}from"primereact/utils";function p(){return p=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var n in r)({}).hasOwnProperty.call(r,n)&&(e[n]=r[n])}return e},p.apply(null,arguments)}function f(e,t){(null==t||t>e.length)&&(t=e.length);for(var r=0,n=Array(t);r<t;r++)n[r]=e[r];return n}function d(e){if(Array.isArray(e))return f(e)}function g(e){if("undefined"!=typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)}function m(e,t){if(e){if("string"==typeof e)return f(e,t);var r={}.toString.call(e).slice(8,-1);return"Object"===r&&e.constructor&&(r=e.constructor.name),"Map"===r||"Set"===r?Array.from(e):"Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r)?f(e,t):void 0}}function h(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}function y(e){return d(e)||g(e)||m(e)||h()}function v(e){return v="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},v(e)}function b(e,t){if("object"!=v(e)||!e)return e;var r=e[Symbol.toPrimitive];if(void 0!==r){var n=r.call(e,t||"default");if("object"!=v(n))return n;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===t?String:Number)(e)}function w(e){var t=b(e,"string");return"symbol"==v(t)?t:t+""}function S(e,t,r){return(t=w(t))in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function z(e){if(Array.isArray(e))return e}function O(e,t){var r=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=r){var n,u,i,l,o=[],c=!0,a=!1;try{if(i=(r=r.call(e)).next,0===t){if(Object(r)!==r)return;c=!1}else for(;!(c=(n=i.call(r)).done)&&(o.push(n.value),o.length!==t);c=!0);}catch(e){a=!0,u=e}finally{try{if(!c&&null!=r.return&&(l=r.return(),Object(l)!==l))return}finally{if(a)throw u}}return o}}function E(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}function x(e,t){return z(e)||O(e,t)||m(e,t)||E()}var P=r.extend({defaultProps:{__TYPE:"Splitter",className:null,gutterSize:4,id:null,step:5,layout:"horizontal",onResizeEnd:null,stateKey:null,stateStorage:"session",style:null,children:void 0},css:{classes:{root:function(e){return c("p-splitter p-component p-splitter-".concat(e.props.layout))},gutter:"p-splitter-gutter",gutterHandler:"p-splitter-gutter-handle",panel:{root:"p-splitter-panel"}},styles:"\n@layer primereact {\n    .p-splitter {\n        display: flex;\n        flex-wrap: nowrap;\n    }\n\n    .p-splitter-vertical {\n        flex-direction: column;\n    }\n\n    .p-splitter-panel {\n        flex-grow: 1;\n    }\n\n    .p-splitter-panel-nested {\n        display: flex;\n    }\n\n    .p-splitter-panel .p-splitter {\n        flex-grow: 1;\n        border: 0 none;\n    }\n\n    .p-splitter-gutter {\n        flex-grow: 0;\n        flex-shrink: 0;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        cursor: col-resize;\n    }\n\n    .p-splitter-horizontal.p-splitter-resizing {\n        cursor: col-resize;\n        user-select: none;\n    }\n\n    .p-splitter-horizontal > .p-splitter-gutter > .p-splitter-gutter-handle {\n        height: 24px;\n        width: 100%;\n    }\n\n    .p-splitter-horizontal > .p-splitter-gutter {\n        cursor: col-resize;\n    }\n\n    .p-splitter-vertical.p-splitter-resizing {\n        cursor: row-resize;\n        user-select: none;\n    }\n\n    .p-splitter-vertical > .p-splitter-gutter {\n        cursor: row-resize;\n    }\n\n    .p-splitter-vertical > .p-splitter-gutter > .p-splitter-gutter-handle {\n        width: 24px;\n        height: 100%;\n    }\n}\n\n"}}),j=r.extend({defaultProps:{__TYPE:"SplitterPanel",className:null,minSize:null,size:null,style:null,children:void 0},getCProps:function(e){return o.getComponentProps(e,j.defaultProps)},getCOtherProps:function(e){return o.getComponentDiffProps(e,j.defaultProps)},getCProp:function(e,t){return o.getComponentProp(e,t,j.defaultProps)}});function A(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,n)}return r}function R(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?A(Object(r),!0).forEach((function(t){S(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):A(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}var C=function(){},D=e.memo(e.forwardRef((function(r,f){var d=u(),g=e.useContext(t),m=P.getProps(r,g),h=e.useRef(""),v=e.useRef(null),b=e.useRef(),w=e.useRef({}),S=e.useRef(null),z=e.useRef(null),O=e.useRef(null),E=e.useRef(null),A=e.useRef(null),C=e.useRef(null),D=e.useRef(null),N=e.useRef(null),k=e.useRef(null),I=e.useRef(null),H=e.useRef(null),T=e.useRef(null),K=x(e.useState([]),2),W=K[0],Y=K[1],F=x(e.useState(!1),2),L=F[0],_=F[1],M=null!=m.stateKey,U=m.children&&m.children.length||1,X=function(e,t){return t in e?e[t]:m.children&&[].concat(m.children)[t].props.size||100/U},B="horizontal"===m.layout,J={props:m,state:{panelSizes:W,nested:!0===a.getAttribute(v.current&&v.current.parentElement,"data-p-splitter-panel-nested")}},$=P.setMetaData(R({},J)),q=$.ptm,G=$.cx,Q=$.isUnstyled;n(P.css.styles,Q,{name:"splitter"});var V=x(i({type:"mousemove",listener:function(e){return pe(e)}}),2),Z=V[0],ee=V[1],te=x(i({type:"mouseup",listener:function(e){fe(e),ue()}}),2),re=te[0],ne=te[1],ue=function(){ee(),ne()},ie=function(e,t){return j.getCProp(e,t)},le=function(e,t){return!(e>100||e<0)&&(!(t>100||t<0)&&(!(m.children[H.current].props&&m.children[H.current].props.minSize&&m.children[H.current].props.minSize>e)&&!(m.children[H.current+1].props&&m.children[H.current+1].props.minSize&&m.children[H.current+1].props.minSize>t)))},oe=e.useCallback((function(){switch(m.stateStorage){case"local":return window.localStorage;case"session":return window.sessionStorage;default:throw new Error(m.stateStorage+' is not a valid value for the state storage, supported values are "local" and "session".')}}),[m.stateStorage]),ce=function(e){o.isArray(e)&&oe().setItem(m.stateKey,JSON.stringify(e))},ae=e.useCallback((function(){var e=oe().getItem(m.stateKey);e&&Y(JSON.parse(e))}),[oe,m.stateKey]),se=function(e,t,r){var n="touchstart"===e.type?e.touches[0].pageX:e.pageX,u="touchstart"===e.type?e.touches[0].pageY:e.pageY;b.current=w.current[t],S.current=B?a.getWidth(v.current):a.getHeight(v.current),z.current=!0,O.current=B?n:u,E.current=b.current.previousElementSibling,A.current=b.current.nextElementSibling,r?(C.current=B?a.getOuterWidth(E.current,!0):a.getOuterHeight(E.current,!0),k.current=B?a.getOuterWidth(A.current,!0):a.getOuterHeight(A.current,!0)):(C.current=100*(B?a.getOuterWidth(E.current,!0):a.getOuterHeight(E.current,!0))/S.current,k.current=100*(B?a.getOuterWidth(A.current,!0):a.getOuterHeight(A.current,!0))/S.current),N.current=C.current,I.current=k.current,H.current=t,!Q()&&a.addClass(b.current,"p-splitter-gutter-resizing"),b.current.setAttribute("data-p-splitter-gutter-resizing",!0),!Q()&&a.addClass(v.current,"p-splitter-resizing"),v.current.setAttribute("data-p-splitter-resizing",!0)},pe=function(e){var t,r,n,u=arguments.length>1&&void 0!==arguments[1]?arguments[1]:0;arguments.length>2&&void 0!==arguments[2]&&arguments[2]?B?(n=100*(C.current+u)/S.current,r=100*(k.current-u)/S.current):(n=100*(C.current-u)/S.current,r=100*(k.current+u)/S.current):(n=C.current+(t=B?100*("touchmove"===e.type?e.touches[0].pageX:e.pageX)/S.current-100*O.current/S.current:100*("touchmove"===e.type?e.touches[0].pageY:e.pageY)/S.current-100*O.current/S.current),r=k.current-t),me(H.current,n,r)},fe=function(e){var t=y(W);t[H.current]=N.current,t[H.current+1]=I.current,m.onResizeEnd&&m.onResizeEnd({originalEvent:e,sizes:t}),M&&ce(t),Y(t),!Q()&&a.removeClass(b.current,"p-splitter-gutter-resizing"),w.current&&Object.keys(w.current).forEach((function(e){return w.current[e].setAttribute("data-p-splitter-gutter-resizing",!1)})),!Q()&&a.removeClass(v.current,"p-splitter-resizing"),v.current.setAttribute("data-p-splitter-resizing",!1),z.current=!1,S.current=null,O.current=null,E.current=null,A.current=null,C.current=null,N.current=null,k.current=null,I.current=null,H.current=null},de=function(){ve(),fe()},ge=function(e,t){var r=m.children[t].props&&m.children[t].props.minSize||0;switch(e.code){case"ArrowLeft":B&&ye(e,t,-1*m.step),e.preventDefault();break;case"ArrowRight":B&&ye(e,t,m.step),e.preventDefault();break;case"ArrowDown":B||ye(e,t,-1*m.step),e.preventDefault();break;case"ArrowUp":B||ye(e,t,m.step),e.preventDefault();break;case"Home":me(t,100-r,r),e.preventDefault();break;case"End":me(t,r,100-r),e.preventDefault();break;case"NumpadEnter":case"Enter":D.current>=100-(r||5)?me(t,r,100-r):me(t,100-r,r),e.preventDefault()}},me=function(e,t,r){H.current=e,b.current=w.current[e],S.current=B?a.getWidth(v.current):a.getHeight(v.current),E.current=b.current.previousElementSibling,A.current=b.current.nextElementSibling,le(t,r)&&(N.current=t,I.current=r,E.current.style.flexBasis="calc("+t+"% - "+(m.children.length-1)*m.gutterSize+"px)",A.current.style.flexBasis="calc("+r+"% - "+(m.children.length-1)*m.gutterSize+"px)",D.current=parseFloat(t).toFixed(4))},he=function(e,t,r){se(e,t,!0),pe(e,r,!0)},ye=function(e,t,r){T.current||(T.current=setInterval((function(){he(e,t,r)}),40))},ve=function(){T.current&&(clearInterval(T.current),T.current=null)},be=function(e,t){se(e,t,!1),Z(),re()},we=function(e,t){se(e,t,!1),window.addEventListener("touchmove",Se,{passive:!1,cancelable:!1}),window.addEventListener("touchend",ze)},Se=function(e){pe(e)},ze=function(e){fe(e),window.removeEventListener("touchmove",Se),window.removeEventListener("touchend",ze)};e.useImperativeHandle(f,(function(){return{props:m,getElement:function(){return v.current}}})),l((function(){v.current&&(h.current=s())})),e.useEffect((function(){var e=y(v.current.children).filter((function(e){return"splitterpanel.root"===a.getAttribute(e,"data-pc-section")})),t=[];e.map((function(e,r){D.current=X(W,0),t[r]=X(W,r),e.childNodes&&o.isNotEmpty(a.find(e,"[data-pc-name='splitter']")&&a.find(e,"[data-pc-section='root']"))&&(!Q()&&a.addClass(e,"p-splitter-panel-nested"),e.setAttribute("data-p-splitter-panel-nested",!0),_(!0))})),Y(t)}),[]),e.useEffect((function(){M&&ae()}),[ae,M]);var Oe=function(t,r){var n=ie(t,"id")||"".concat(h.current,"_").concat(r),u=c(ie(t,"className"),G("panel.root")),i=d({ref:function(e){return w.current[r]=e},className:G("gutter"),style:B?{width:m.gutterSize+"px"}:{height:m.gutterSize+"px"},onMouseDown:function(e){return be(e,r)},onKeyDown:function(e){return ge(e,r)},onKeyUp:de,onTouchStart:function(e){return we(e,r)},onTouchMove:function(e){return Se(e)},onTouchEnd:function(e){return ze(e)},"data-p-splitter-gutter-resizing":!1},q("gutter")),l=d({tabIndex:ie(t,"tabIndex")||0,className:G("gutterHandler"),role:"separator","aria-orientation":B?"vertical":"horizontal","aria-controls":n,"aria-label":ie(t,"aria-label"),"aria-labelledby":ie(t,"aria-labelledby"),"aria-valuenow":D.current,"aria-valuetext":parseFloat(D.current).toFixed(0)+"%","aria-valuemin":ie(t,"minSize")||"0","aria-valuemax":"100"},q("gutterHandler")),o=r!==m.children.length-1&&e.createElement("div",i,e.createElement("div",l)),a="calc("+X(W,r)+"% - "+(U-1)*m.gutterSize+"px)",s=d({key:r,id:n,className:u,style:R(R({},ie(t,"style")),{},{flexBasis:a}),role:"presentation","data-p-splitter-panel-nested":!1,onClick:ie(t,"onClick")},q("splitterpanel.root",{context:{nested:L}}));return e.createElement(e.Fragment,null,e.createElement("div",s,ie(t,"children")),o)},Ee=d({id:m.id,style:m.style,className:c(m.className,G("root")),"data-p-splitter-resizing":!1},P.getOtherProps(m),q("root")),xe=e.Children.map(m.children,Oe);return e.createElement("div",p({ref:v},Ee),xe)})));C.displayName="SplitterPanel",D.displayName="Splitter";export{D as Splitter,C as SplitterPanel};