primereact
Version:
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
2 lines (1 loc) • 13.2 kB
JavaScript
this.primereact=this.primereact||{},this.primereact.splitter=function(e,t,r,n,u,i){"use strict";function l(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(r){if("default"!==r){var n=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,n.get?n:{enumerable:!0,get:function(){return e[r]}})}})),t.default=e,Object.freeze(t)}var o=l(t);function a(){return a=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(e[n]=r[n])}return e},a.apply(this,arguments)}function c(e,t){(null==t||t>e.length)&&(t=e.length);for(var r=0,n=new Array(t);r<t;r++)n[r]=e[r];return n}function s(e){if(Array.isArray(e))return c(e)}function p(e){if("undefined"!=typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)}function f(e,t){if(e){if("string"==typeof e)return c(e,t);var r=Object.prototype.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)?c(e,t):void 0}}function d(){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 m(e){return m="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},m(e)}function g(e,t){if("object"!==m(e)||null===e)return e;var r=e[Symbol.toPrimitive];if(void 0!==r){var n=r.call(e,t||"default");if("object"!==m(n))return n;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===t?String:Number)(e)}function h(e){var t=g(e,"string");return"symbol"===m(t)?t:String(t)}function y(e){if(Array.isArray(e))return e}function b(e,t){var r=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=r){var n,u,i,l,o=[],a=!0,c=!1;try{if(i=(r=r.call(e)).next,0===t){if(Object(r)!==r)return;a=!1}else for(;!(a=(n=i.call(r)).done)&&(o.push(n.value),o.length!==t);a=!0);}catch(e){c=!0,u=e}finally{try{if(!a&&null!=r.return&&(l=r.return(),Object(l)!==l))return}finally{if(c)throw u}}return o}}function v(){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 S(e,t){return y(e)||b(e,t)||f(e,t)||v()}var w=n.ComponentBase.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 i.classNames("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"}}),O=n.ComponentBase.extend({defaultProps:{__TYPE:"SplitterPanel",className:null,minSize:null,size:null,style:null,children:void 0},getCProps:function(e){return i.ObjectUtils.getComponentProps(e,O.defaultProps)},getCOtherProps:function(e){return i.ObjectUtils.getComponentDiffProps(e,O.defaultProps)},getCProp:function(e,t){return i.ObjectUtils.getComponentProp(e,t,O.defaultProps)}});function z(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 D(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?z(Object(r),!0).forEach((function(t){var n,u,i;n=e,i=r[t],(u=h(u=t))in n?Object.defineProperty(n,u,{value:i,enumerable:!0,configurable:!0,writable:!0}):n[u]=i})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):z(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}var E=function(){},j=o.memo(o.forwardRef((function(e,t){var l=u.useMergeProps(),c=o.useContext(r.PrimeReactContext),m=w.getProps(e,c),g=o.useRef(""),h=o.useRef(null),y=o.useRef(),b=o.useRef({}),v=o.useRef(null),z=o.useRef(null),E=o.useRef(null),j=o.useRef(null),P=o.useRef(null),x=o.useRef(null),H=o.useRef(null),R=o.useRef(null),A=o.useRef(null),C=o.useRef(null),N=o.useRef(null),k=o.useRef(null),I=S(o.useState([]),2),U=I[0],_=I[1],M=S(o.useState(!1),2),T=M[0],K=M[1],L=null!=m.stateKey,W=m.children&&m.children.length||1,Y=function(e,t){return t in e?e[t]:m.children&&[].concat(m.children)[t].props.size||100/W},B="horizontal"===m.layout,F={props:m,state:{panelSizes:U,nested:!0===i.DomHandler.getAttribute(h.current&&h.current.parentElement,"data-p-splitter-panel-nested")}},X=w.setMetaData(D({},F)),J=X.ptm,q=X.cx,$=X.isUnstyled;n.useHandleStyle(w.css.styles,$,{name:"splitter"});var G=S(u.useEventListener({type:"mousemove",listener:function(e){return ce(e)}}),2),Q=G[0],V=G[1],Z=S(u.useEventListener({type:"mouseup",listener:function(e){se(e),re()}}),2),ee=Z[0],te=Z[1],re=function(){V(),te()},ne=function(e,t){return O.getCProp(e,t)},ue=function(e,t){return!(e>100||e<0)&&(!(t>100||t<0)&&(!(m.children[N.current].props&&m.children[N.current].props.minSize&&m.children[N.current].props.minSize>e)&&!(m.children[N.current+1].props&&m.children[N.current+1].props.minSize&&m.children[N.current+1].props.minSize>t)))},ie=o.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]),le=function(e){i.ObjectUtils.isArray(e)&&ie().setItem(m.stateKey,JSON.stringify(e))},oe=o.useCallback((function(){var e=ie().getItem(m.stateKey);e&&_(JSON.parse(e))}),[ie,m.stateKey]),ae=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;y.current=b.current[t],v.current=B?i.DomHandler.getWidth(h.current):i.DomHandler.getHeight(h.current),z.current=!0,E.current=B?n:u,j.current=y.current.previousElementSibling,P.current=y.current.nextElementSibling,r?(x.current=B?i.DomHandler.getOuterWidth(j.current,!0):i.DomHandler.getOuterHeight(j.current,!0),A.current=B?i.DomHandler.getOuterWidth(P.current,!0):i.DomHandler.getOuterHeight(P.current,!0)):(x.current=100*(B?i.DomHandler.getOuterWidth(j.current,!0):i.DomHandler.getOuterHeight(j.current,!0))/v.current,A.current=100*(B?i.DomHandler.getOuterWidth(P.current,!0):i.DomHandler.getOuterHeight(P.current,!0))/v.current),R.current=x.current,C.current=A.current,N.current=t,!$()&&i.DomHandler.addClass(y.current,"p-splitter-gutter-resizing"),y.current.setAttribute("data-p-splitter-gutter-resizing",!0),!$()&&i.DomHandler.addClass(h.current,"p-splitter-resizing"),h.current.setAttribute("data-p-splitter-resizing",!0)},ce=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*(x.current+u)/v.current,r=100*(A.current-u)/v.current):(n=100*(x.current-u)/v.current,r=100*(A.current+u)/v.current):(n=x.current+(t=B?100*("touchmove"===e.type?e.touches[0].pageX:e.pageX)/v.current-100*E.current/v.current:100*("touchmove"===e.type?e.touches[0].pageY:e.pageY)/v.current-100*E.current/v.current),r=A.current-t),de(N.current,n,r)},se=function(e){var t=[R.current,C.current];m.onResizeEnd&&m.onResizeEnd({originalEvent:e,sizes:t}),L&&le(t),_(t),!$()&&i.DomHandler.removeClass(y.current,"p-splitter-gutter-resizing"),b.current&&Object.keys(b.current).forEach((function(e){return b.current[e].setAttribute("data-p-splitter-gutter-resizing",!1)})),!$()&&i.DomHandler.removeClass(h.current,"p-splitter-resizing"),h.current.setAttribute("data-p-splitter-resizing",!1),z.current=!1,v.current=null,E.current=null,j.current=null,P.current=null,x.current=null,R.current=null,A.current=null,C.current=null,N.current=null},pe=function(){he(),se()},fe=function(e,t){var r=m.children[t].props&&m.children[t].props.minSize||0;switch(e.code){case"ArrowLeft":B&&ge(e,t,-1*m.step),e.preventDefault();break;case"ArrowRight":B&&ge(e,t,m.step),e.preventDefault();break;case"ArrowDown":B||ge(e,t,-1*m.step),e.preventDefault();break;case"ArrowUp":B||ge(e,t,m.step),e.preventDefault();break;case"Home":de(t,100-r,r),e.preventDefault();break;case"End":de(t,r,100-r),e.preventDefault();break;case"Enter":H.current>=100-(r||5)?de(t,r,100-r):de(t,100-r,r),e.preventDefault()}},de=function(e,t,r){N.current=e,y.current=b.current[e],v.current=B?i.DomHandler.getWidth(h.current):i.DomHandler.getHeight(h.current),j.current=y.current.previousElementSibling,P.current=y.current.nextElementSibling,ue(t,r)&&(R.current=t,C.current=r,j.current.style.flexBasis="calc("+t+"% - "+(m.children.length-1)*m.gutterSize+"px)",P.current.style.flexBasis="calc("+r+"% - "+(m.children.length-1)*m.gutterSize+"px)",H.current=parseFloat(t).toFixed(4))},me=function(e,t,r){ae(e,t,!0),ce(e,r,!0)},ge=function(e,t,r){k.current||(k.current=setInterval((function(){me(e,t,r)}),40))},he=function(){k.current&&(clearInterval(k.current),k.current=null)},ye=function(e,t){ae(e,t,!1),Q(),ee()},be=function(e,t){ae(e,t,!1),window.addEventListener("touchmove",ve,{passive:!1,cancelable:!1}),window.addEventListener("touchend",Se)},ve=function(e){ce(e)},Se=function e(t){se(t),window.removeEventListener("touchmove",ve),window.removeEventListener("touchend",e)};o.useImperativeHandle(t,(function(){return{props:m,getElement:function(){return h.current}}})),u.useMountEffect((function(){h.current&&(g.current=i.UniqueComponentId())})),o.useEffect((function(){var e;(e=h.current.children,s(e)||p(e)||f(e)||d()).filter((function(e){return"splitterpanel.root"===i.DomHandler.getAttribute(e,"data-pc-section")})).map((function(e,t){H.current=Y(U,0),e.childNodes&&i.ObjectUtils.isNotEmpty(i.DomHandler.find(e,"[data-pc-name='splitter']")&&i.DomHandler.find(e,"[data-pc-section='root']"))&&(!$()&&i.DomHandler.addClass(e,"p-splitter-panel-nested"),e.setAttribute("data-p-splitter-panel-nested",!0),K(!0))}))}),[]),o.useEffect((function(){L&&oe()}),[oe,L]);var we=function(e,t){var r=ne(e,"id")||"".concat(g.current,"_").concat(t),n=i.classNames(ne(e,"className"),q("panel.root")),u=l({ref:function(e){return b.current[t]=e},className:q("gutter"),style:B?{width:m.gutterSize+"px"}:{height:m.gutterSize+"px"},onMouseDown:function(e){return ye(e,t)},onKeyDown:function(e){return fe(e,t)},onKeyUp:pe,onTouchStart:function(e){return be(e,t)},onTouchMove:function(e){return ve(e)},onTouchEnd:function(e){return Se(e)},"data-p-splitter-gutter-resizing":!1},J("gutter")),a=l({tabIndex:ne(e,"tabIndex")||0,className:q("gutterHandler"),role:"separator","aria-orientation":B?"vertical":"horizontal","aria-controls":r,"aria-label":ne(e,"aria-label"),"aria-labelledby":ne(e,"aria-labelledby"),"aria-valuenow":H.current,"aria-valuetext":parseFloat(H.current).toFixed(0)+"%","aria-valuemin":ne(e,"minSize")||"0","aria-valuemax":"100"},J("gutterHandler")),c=t!==m.children.length-1&&o.createElement("div",u,o.createElement("div",a)),s="calc("+Y(U,t)+"% - "+(W-1)*m.gutterSize+"px)",p=l({key:t,id:r,className:n,style:D(D({},ne(e,"style")),{},{flexBasis:s}),role:"presentation","data-p-splitter-panel-nested":!1},J("splitterpanel.root",{context:{nested:T}}));return o.createElement(o.Fragment,null,o.createElement("div",p,ne(e,"children")),c)},Oe=l({id:m.id,style:m.style,className:i.classNames(m.className,q("root")),"data-p-splitter-resizing":!1},w.getOtherProps(m),J("root")),ze=o.Children.map(m.children,we);return o.createElement("div",a({ref:h},Oe),ze)})));return E.displayName="SplitterPanel",j.displayName="Splitter",e.Splitter=j,e.SplitterPanel=E,Object.defineProperty(e,"__esModule",{value:!0}),e}({},React,primereact.api,primereact.componentbase,primereact.hooks,primereact.utils);