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