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