azure-devops-ui/Components/Splitter/Splitter.min.js

React components for building web UI in Azure DevOps

import{__extends}from"tslib";import"../../CommonImports";import"../../Core/core.css";import"./Splitter.css";import*as React from"react";import{EventManagement}from"../../Core/EventManagement";import{ObservableLike,ObservableValue}from"../../Core/Observable";import{announce}from"../../Core/Util/Accessibility";import{format}from"../../Core/Util/String";import{Button}from"../../Button";import{Observer}from"../../Observer";import*as Resources from"../../Resources.Splitter";import{css,getSafeId,KeyCode}from"../../Util";import{FixedSizeLimitsFormat,SplitterDirection,SplitterElementPosition}from"../../Components/Splitter/Splitter.Props";var DIVIDER_MOVE_INCREMENT=20,DIVIDER_WIDTH=4,COLLAPSED_PANE_SIZE=38,idCount=0,Splitter=function(i){function e(e,t){var o=i.call(this,e,t)||this;return o._cachedNearElement=null,o._cachedFarElement=null,o.events=new EventManagement,o.uncontrolledFixedSize=new ObservableValue(void 0),o.placeholderPosition=new ObservableValue(void 0),o.collapse=function(){o.isCollapsed()||(o.props.onCollapsedChanged&&o.props.onCollapsedChanged(!0),announce(Resources.SplitterCollapsed))},o.expand=function(){o.isCollapsed()&&(o.props.onCollapsedChanged&&o.props.onCollapsedChanged(!1),announce(Resources.SplitterExpanded))},o._onDividerKeyDown=function(e){var t=o.props,i=t.disabled,n=t.splitterDirection;if(!i&&!o._isDragging()){switch(e.keyCode){case KeyCode.leftArrow:n===SplitterDirection.Vertical&&o._moveDivider(-DIVIDER_MOVE_INCREMENT);break;case KeyCode.rightArrow:n===SplitterDirection.Vertical&&o._moveDivider(DIVIDER_MOVE_INCREMENT);break;case KeyCode.upArrow:n===SplitterDirection.Horizontal&&o._moveDivider(-DIVIDER_MOVE_INCREMENT);break;case KeyCode.downArrow:n===SplitterDirection.Horizontal&&o._moveDivider(DIVIDER_MOVE_INCREMENT);break;default:return}e.preventDefault(),e.stopPropagation()}},o._onDividerMouseDown=function(e){o._onDividerDown(e,e.clientX,e.clientY),o._attachMouseWindowEvents()},o._onDividerTouchDown=function(e){1===e.touches.length&&(o._onDividerDown(e,e.touches[0].clientX,e.touches[0].clientY),o._attachTouchWindowEvents())},o._onDividerDown=function(e,t,i){o._fixedRef&&!o.props.disabled&&(e.preventDefault(),e.stopPropagation(),o._dragAnchorPos=o._getEventBoundedClientPos(t,i),o._previousFixedSize=o._getElementSize(o._fixedRef),void 0!==o.placeholderPosition.value&&(o.placeholderPosition.value=void 0),o._handleDragEvent(e,t,i))},o._onDividerMouseMove=function(e){o._handleDragEvent(e,e.clientX,e.clientY)},o._onDividerTouchMove=function(e){1===e.touches.length&&o._handleDragEvent(e,e.touches[0].clientX,e.touches[0].clientY)},o._onDividerMouseUp=function(e){o._detachMouseWindowEvents(),o._onDividerEnd(e.clientX,e.clientY)},o._onDividerTouchEnd=function(e){o._detachTouchWindowEvents(),o._onDividerEnd(e.changedTouches[0].clientX,e.changedTouches[0].clientY)},o._onDividerEnd=function(e,t){e=o._getEventBoundedClientPos(e,t),t=o._getNewFixedSize(o._previousFixedSize,e-o._dragAnchorPos);o.placeholderPosition.value=void 0,o._setFixedSize(t),o._fireWindowResize()},o.refresh=function(){o.forceUpdate()},o.uncontrolledFixedSize.value=e.initialFixedSize,o.fixedPaneId="splitter-fixed-pane"+idCount++,o}return __extends(e,i),Object.defineProperty(e.prototype,"maxFixedSize",{get:function(){return this._getSizeLimitValue(this.props.maxFixedSize)},enumerable:!1,configurable:!0}),Object.defineProperty(e.prototype,"minFixedSize",{get:function(){return this._getSizeLimitValue(this.props.minFixedSize)},enumerable:!1,configurable:!0}),e.prototype.componentDidMount=function(){this._fireWindowResize(),this.props.fixedSizeLimitsFormat===FixedSizeLimitsFormat.Percentage&&(window.addEventListener("resize",this.refresh),this.refresh())},e.prototype.componentWillUnmount=function(){this.events.removeAllListeners(),window.removeEventListener("resize",this.refresh)},e.prototype.render=function(){var o=this,e=this.props,r=e.className,t=e.collapsed,i=e.fixedElement,n=e.onRenderFarElement,s=e.onRenderNearElement,a=e.splitterDirection,l=i===SplitterElementPosition.Near?!!s:!!n;return React.createElement(Observer,{collapsed:t,fixedSize:void 0===this.props.fixedSize?this.uncontrolledFixedSize:this.props.fixedSize,placeholderPosition:this.placeholderPosition},function(e){var t,i=o.maxFixedSize,n=o.minFixedSize;return e.collapsed?t=COLLAPSED_PANE_SIZE:e.fixedSize?(t=Math.max(e.fixedSize,n||0),(e=!(e=i)&&o._splitterContainer?o._getElementSize(o._splitterContainer):e)&&e<t&&(t=e)):void 0!==n?t=n:void 0!==i&&(t=i),React.createElement("div",{className:css(r,"vss-Splitter--container",a===SplitterDirection.Vertical&&"vss-Splitter--container-row",a===SplitterDirection.Horizontal&&"vss-Splitter--container-column",o._isDragging()&&"vss-Splitter--container-dragging"),ref:function(e){return o._splitterContainer=e}},o._renderNearElement(t),l?o._renderDivider(t):null,o._renderDragPlaceHolder(),o._renderFarElement(t))})},e.prototype._renderNearElement=function(e){var t=this.props,i=t.fixedElement,n=t.onRenderNearElement,t=t.nearElementClassName;return this._isDragging()&&this._cachedNearElement||(n?(n=n(),this._cachedNearElement=i===SplitterElementPosition.Near?this._renderFixedPane(n,t,e):this._renderFlexiblePane(n,t)):this._cachedNearElement=null),this._cachedNearElement},e.prototype._renderFarElement=function(e){var t=this.props,i=t.fixedElement,n=t.onRenderFarElement,t=t.farElementClassName;return this._isDragging()&&this._cachedFarElement||(n?(n=n(),this._cachedFarElement=i===SplitterElementPosition.Far?this._renderFixedPane(n,t,e):this._renderFlexiblePane(n,t)):this._cachedFarElement=null),this._cachedFarElement},e.prototype._renderFixedPane=function(e,t,i){var n,o=this,r=this.props,s=r.expandTooltip,r=r.splitterDirection,a=this.isCollapsed(),r=((n={})[r===SplitterDirection.Vertical?"width":"height"]=void 0===i?"50%":i-DIVIDER_WIDTH-1,n);return e?React.createElement("div",{className:css("vss-Splitter--pane-fixed",a?"flex-column collapsed":t),id:getSafeId(this.fixedPaneId),style:r,ref:function(e){return o._fixedRef=e}},a?React.createElement(Button,{className:"vss-splitter-expand-button",iconProps:{iconName:this.getCollapsedButtonIconName()},onClick:this.expand,subtle:!0,tooltipProps:{text:s||Resources.ExpandTooltip}}):e):null},e.prototype.getCollapsedButtonIconName=function(){var e=this.props.fixedElement===SplitterElementPosition.Far;return this.props.splitterDirection===SplitterDirection.Vertical?e?"DoubleChevronLeft":"DoubleChevronRight":e?"DoubleChevronUp":"DoubleChevronDown"},e.prototype._renderFlexiblePane=function(e,t){return React.createElement("div",{className:css("vss-Splitter--pane-flexible",t)},e)},e.prototype._renderDivider=function(e){var t=this._getSplitterBoundaries(),i=t.startBound,t=t.endBound,n=0;return this._fixedRef&&(n=this._getElementSize(this._fixedRef)),React.createElement("div",{"aria-valuemin":i,"aria-valuemax":t-DIVIDER_WIDTH-1,"aria-label":this.props.ariaLabel,"aria-labelledby":this.props.ariaLabel?void 0:this.props.ariaLabelledBy||getSafeId(this.fixedPaneId),"aria-orientation":this.props.splitterDirection===SplitterDirection.Horizontal?"horizontal":"vertical","aria-valuenow":e?e-DIVIDER_WIDTH-1:n,"aria-valuetext":format(Resources.SplitterValueText,e?e-DIVIDER_WIDTH-1:n),role:"separator",tabIndex:0,className:css("vss-Splitter--divider",this._isDragging()&&"vss-Splitter--divider-dragging"),onKeyDown:this._onDividerKeyDown,onMouseDown:this._onDividerMouseDown,onTouchStart:this._onDividerTouchDown})},e.prototype._renderDragPlaceHolder=function(){var e;return this._isDragging()?((e={})[this.props.splitterDirection===SplitterDirection.Vertical?"left":"top"]=this.placeholderPosition.value,React.createElement("div",{className:"vss-Splitter--drag-placeholder",style:e})):null},e.prototype._handleDragEvent=function(e,t,i){var n=this.props.fixedElement,e=(e.preventDefault(),e.stopPropagation(),this._getEventBoundedClientPos(t,i)),t=this._getNewFixedSize(this._previousFixedSize,e-this._dragAnchorPos),i=t.collapsed?0:t.fixedSize,e=n===SplitterElementPosition.Near?i:this._getElementSize(this._splitterContainer)-i-DIVIDER_WIDTH;e!==this.placeholderPosition.value&&(this.placeholderPosition.value=e)},e.prototype._setFixedSize=function(e){var t=this.props.onFixedSizeChanged;e.collapsed?this.collapse():(e=e.fixedSize,this.uncontrolledFixedSize.value=e,t&&t(e),this.isCollapsed()&&this.expand())},e.prototype._moveDivider=function(e){var t=this._getElementSize(this._fixedRef),t=this._getNewFixedSize(t,e);this._setFixedSize(t),this._fireWindowResize()},e.prototype._attachMouseWindowEvents=function(){this.events.addEventListener(window,"mousemove",this._onDividerMouseMove),this.events.addEventListener(window,"mouseup",this._onDividerMouseUp)},e.prototype._detachMouseWindowEvents=function(){this.events.removeEventListener(window,"mousemove",this._onDividerMouseMove),this.events.removeEventListener(window,"mouseup",this._onDividerMouseUp)},e.prototype._attachTouchWindowEvents=function(){this.events.addEventListener(window,"touchmove",this._onDividerTouchMove),this.events.addEventListener(window,"touchend",this._onDividerTouchEnd)},e.prototype._detachTouchWindowEvents=function(){this.events.removeEventListener(window,"touchmove",this._onDividerTouchMove),this.events.removeEventListener(window,"touchend",this._onDividerTouchEnd)},e.prototype._getEventBoundedClientPos=function(e,t){var i;switch(this.props.splitterDirection){case SplitterDirection.Vertical:i=e;break;case SplitterDirection.Horizontal:i=t;break;default:i=0}return this._getBoundedClientPos(i)},e.prototype._getBoundedClientPos=function(e){var t=this._getSplitterBoundaries(!!this.props.onCollapsedChanged),i=t.startBound,t=t.endBound;return Math.max(i,Math.min(e,t))-this._getElementStartPos(this._splitterContainer)},e.prototype._getSplitterBoundaries=function(e){var t=this.props.fixedElement,i=this.minFixedSize,n=this.maxFixedSize;if(!this._splitterContainer)return{startBound:0,endBound:0};(e=void 0===e?!1:e)&&(i=0);var e=this._getElementStartPos(this._splitterContainer),o=e+this._getElementSize(this._splitterContainer);return{startBound:t===SplitterElementPosition.Near?i?e+i:e:n?o-n:e,endBound:t===SplitterElementPosition.Near?n?e+n:o:i?o-i:o}},e.prototype._getNewFixedSize=function(e,t){var i=this.props,n=i.fixedElement,i=i.onCollapsedChanged,o=this.maxFixedSize,r=this.minFixedSize||0,n=(void 0===o&&(o=this._getElementSize(this._splitterContainer)),n===SplitterElementPosition.Far&&(t*=-1),e+t),e=(o<n&&(n=o),this.isCollapsed());return i&&(e=n<COLLAPSED_PANE_SIZE||!this.isCollapsed()&&n<r),{fixedSize:n=n<r?r:n,collapsed:e}},e.prototype.isCollapsed=function(){return!!ObservableLike.getValue(this.props.collapsed)},e.prototype._isDragging=function(){return void 0!==this.placeholderPosition.value},e.prototype._getElementSize=function(e){return this.props.splitterDirection===SplitterDirection.Vertical?e.clientWidth:e.clientHeight},e.prototype._getElementStartPos=function(e){e=e.getBoundingClientRect();return this.props.splitterDirection===SplitterDirection.Vertical?e.left:e.top},e.prototype._fireWindowResize=function(){var e=document.createEvent("Event");e.initEvent("resize",!1,!0),window.dispatchEvent(e)},e.prototype._getSizeLimitValue=function(e){return this.props.fixedSizeLimitsFormat!==FixedSizeLimitsFormat.Percentage?e:e&&this._splitterContainer?e*this._getElementSize(this._splitterContainer):void 0},e.defaultProps={fixedElement:SplitterElementPosition.Far,splitterDirection:SplitterDirection.Vertical,fixedSizeLimitsFormat:FixedSizeLimitsFormat.Pixels},e}(React.Component);export{Splitter};