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

React components for building web UI in Azure DevOps

import{__extends}from"tslib";import"../../CommonImports";import"../../Core/core.css";import"./Sizer.css";import*as React from"react";import{ObservableLike}from"../../Core/Observable";import{TimerManagement}from"../../Core/TimerManagement";import{Observer}from"../../Observer";import{Portal}from"../../Portal";import{css,KeyCode,Mouse}from"../../Util";import{Orientation,Position}from"./Sizer.Props";import{Tooltip}from"../../TooltipEx";import*as Resources from"../../Resources.Widgets";var Sizer=function(t){function e(e){var r=t.call(this,e)||this;return r.lastLocation=-1,r.timerManagement=new TimerManagement,r.state={showPortal:!1},r.onDragStart=function(e){e.preventDefault()},r.onMouseCapture=function(e){r.lastLocation+=r.updateSize(e,r.getMouseLocation(e)-r.lastLocation),"mouseup"===e.type&&(r.setState({showPortal:!1}),r.onSizeEnd())},r.onKeyDown=function(e){var t,o;e.defaultPrevented||(t=void 0,r.props.orientation===Orientation.row?(e.which===KeyCode.enter&&null!=(o=null==(o=r.props.getFocusedElement(e))?void 0:o.current)&&o.focus(),e.which===KeyCode.leftArrow?t=r.updateSize(e.nativeEvent,-1,!0):e.which===KeyCode.rightArrow&&(t=r.updateSize(e.nativeEvent,1,!0))):e.which===KeyCode.upArrow?t=r.updateSize(e.nativeEvent,-1,!0):e.which===KeyCode.downArrow&&(t=r.updateSize(e.nativeEvent,1,!0)),t&&(e.preventDefault(),r.debouncedEnd()))},r.onSizeEnd=function(){r.props.onSizeEnd&&r.props.onSizeEnd(r.props.id)},r.onMouseDown=function(e){e.defaultPrevented||0!==e.button||(r.lastLocation=r.getMouseLocation(e.nativeEvent),Mouse.setCapture(r.onMouseCapture),r.setState({showPortal:!0}),e.preventDefault())},r.debouncedEnd=r.timerManagement.debounce(r.onSizeEnd,500,{trailing:!0}),r}return __extends(e,t),e.prototype.render=function(){var e=this.props.divider;return React.createElement(Tooltip,{text:Resources.SizerAnnouncement},React.createElement("div",{"aria-label":this.props.ariaLabel||Resources.SizerAnnouncement,"aria-valuetext":"".concat(ObservableLike.getValue(this.props.size)," pixels wide"),"aria-valuenow":ObservableLike.getValue(this.props.size),className:css(this.props.className,"bolt-sizer",this.props.orientation===Orientation.row?"bolt-sizer-row flex-row":"bolt-sizer-column flex-column",e&&"divider"),id:this.props.id,onKeyDown:this.onKeyDown,onMouseDown:this.onMouseDown,onDragStart:this.onDragStart,role:"separator",tabIndex:this.props.tabIndex},this.state.showPortal&&React.createElement(Portal,{className:css("bolt-sizer-portal",this.props.orientation===Orientation.row?"bolt-sizer-portal-row":"bolt-sizer-portal-column")},React.createElement("div",null))))},e.prototype.componentWillUnmount=function(){Mouse.releaseCapture(this.onMouseCapture),this.timerManagement.dispose()},e.prototype.getMouseLocation=function(e){return this.props.orientation===Orientation.row?e.pageX:e.pageY},e.prototype.updateSize=function(e,t,o){void 0===o&&(o=!1);var r=ObservableLike.getValue(this.props.size),i=this.props.position===Position.far?-1:1,o=o&&this.props.keyboardStepMultiplier||1,t=Math.floor(Math.min(this.props.maxSize,Math.max(this.props.minSize,r+t*i*o)));return this.props.onSize(e,t,this.props.id),(t-r)*i},e.defaultProps={divider:!0,maxSize:1e4,minSize:100},e}(React.Component);function Sized(o){return React.createElement(Observer,{height:o.height,width:o.width},function(e){var t={};return void 0!==e.height&&(t.height=e.height+"px"),void 0!==e.width&&(t.width=e.width+"px"),React.createElement("div",{className:css(o.className,"flex-noshrink"),style:t},o.children)})}export{Sizer,Sized};