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

React components for building web UI in Azure DevOps

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{css,KeyCode,Mouse}from"../../Util";import{Orientation,Position}from"./Sizer.Props";import{Tooltip}from"../../TooltipEx";import*as Resources from"../../Resources.Widgets";import{Button}from"../../Button";import{Location}from"../../Utilities/Position";import{Callout}from"../../Callout";class Sizer extends React.Component{constructor(e){super(e),this.sizerRef=React.createRef(),this.sizerCalloutRef=React.createRef(),this.lastLocation=-1,this.timerManagement=new TimerManagement,this.state={showPortal:!1,resizeInProgress:!1,lastTouchLocation:0,resizeButtonsUsed:!1},this.onDragStart=e=>{e.preventDefault(),this.setState({showPortal:!1}),Mouse.setCapture(this.onMouseCapture)},this.onDragEnd=e=>{Mouse.releaseCapture(this.onMouseCapture)},this.onDragEquivalentButtonClick=(e,t)=>{e.preventDefault(),this.setState({resizeButtonsUsed:!0,resizeInProgress:!0}),this.updateSize(e,t,!0),this.onSizeEnd()},this.onMouseCapture=e=>{var t=this.getMouseLocation(e)-this.state.lastTouchLocation;this.lastLocation+=this.updateSize(e,this.getMouseLocation(e)-this.lastLocation),"mouseup"===e.type&&(e.preventDefault(),e.stopPropagation(),document.body.setAttribute("data-resize-active","false"),setTimeout(()=>{document.body.removeAttribute("data-resize-active")},0),0!=t?(this.setState({resizeInProgress:!1,showPortal:!1}),null!=(t=null==(e=this.sizerRef.current)?void 0:e.parentElement)&&t.blur()):this.state.resizeInProgress?(this.setState({showPortal:!0}),null!=(t=null==(e=this.sizerRef.current)?void 0:e.parentElement)&&t.focus()):this.setState({showPortal:!1}),this.onSizeEnd())},this.onKeyDown=t=>{if(!t.defaultPrevented){var o=this.props["orientation"];let e;this.setState({resizeInProgress:!0}),o===Orientation.row?(t.which===KeyCode.enter&&null!=(o=null==(o=this.sizerRef.current)?void 0:o.parentElement)&&o.focus(),t.which===KeyCode.leftArrow?e=this.updateSize(t.nativeEvent,-1,!0):t.which===KeyCode.rightArrow&&(e=this.updateSize(t.nativeEvent,1,!0))):t.which===KeyCode.upArrow?e=this.updateSize(t.nativeEvent,-1,!0):t.which===KeyCode.downArrow&&(e=this.updateSize(t.nativeEvent,1,!0)),e&&(t.preventDefault(),this.debouncedEnd())}},this.onSizeEnd=()=>{this.props.onSizeEnd&&this.props.onSizeEnd(this.props.id),document.body.removeAttribute("data-resize-active")},this.onMouseDown=e=>{e.defaultPrevented||0!==e.button||e.currentTarget!==this.sizerRef.current||(document.body.setAttribute("data-resize-active","true"),this.lastLocation=this.getMouseLocation(e.nativeEvent),this.state.resizeInProgress||this.setState({lastTouchLocation:this.lastLocation,resizeInProgress:!0}),Mouse.setCapture(this.onMouseCapture),this.setState({showPortal:!0}),e.preventDefault())},this.debouncedEnd=this.timerManagement.debounce(this.onSizeEnd,500,{trailing:!0}),this.handleClickOutside=this.handleClickOutside.bind(this)}render(){var e=this.props["divider"];return React.createElement(Tooltip,{text:Resources.SizerAnnouncement,anchorOffset:{horizontal:0,vertical:30},anchorOrigin:{horizontal:Location.center,vertical:Location.start}},React.createElement("div",{"aria-label":this.props.ariaLabel||Resources.SizerAnnouncement,"aria-valuetext":ObservableLike.getValue(this.props.size)+" pixels wide","aria-valuenow":ObservableLike.getValue(this.props.size),className:css(this.props.className,"bolt-sizer",(this.state.resizeInProgress||this.state.showPortal)&&"bolt-sizer-active",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,onDragEnd:this.onDragEnd,ref:this.sizerRef,role:"separator",tabIndex:this.props.tabIndex},this.state.showPortal&&React.createElement(React.Fragment,null,React.createElement(Callout,{anchorElement:this.sizerRef.current,anchorOffset:{horizontal:0,vertical:-50},anchorOrigin:{horizontal:Location.start,vertical:Location.start},calloutOrigin:{horizontal:Location.center,vertical:Location.start},contentShadow:!0,viewportChangeDismiss:!1},React.createElement("div",{className:"flex-row bolt-sizer-callout-row",ref:this.sizerCalloutRef},React.createElement(Button,{ariaLabel:Resources.ColumnButtonSizerLeftAriaLabel,className:"icon-only bolt-sizer-resize-button",iconProps:{iconName:"ChevronLeft"},tooltipProps:{anchorOrigin:{horizontal:Location.center,vertical:Location.end},anchorOffset:{horizontal:0,vertical:-70},text:Resources.ColumnButtonSizerLeft},onMouseDown:e=>e.stopPropagation(),onClick:e=>this.onDragEquivalentButtonClick(e.nativeEvent,-1)}),React.createElement(Button,{ariaLabel:Resources.ColumnButtonSizerRightAriaLabel,className:"icon-only bolt-sizer-resize-button",iconProps:{iconName:"ChevronRight"},tooltipProps:{anchorOrigin:{horizontal:Location.center,vertical:Location.end},anchorOffset:{horizontal:0,vertical:-70},text:Resources.ColumnButtonSizerRight},onMouseDown:e=>e.stopPropagation(),onClick:e=>this.onDragEquivalentButtonClick(e.nativeEvent,1)}))))))}componentDidMount(){document.addEventListener("mousedown",this.handleClickOutside)}componentWillUnmount(){Mouse.releaseCapture(this.onMouseCapture),document.removeEventListener("mousedown",this.handleClickOutside),document.body.removeAttribute("data-resize-active")}getMouseLocation(e){return this.props.orientation===Orientation.row?e.pageX:e.pageY}handleClickOutside(e){var t=Array.from(e.composedPath()).includes(this.sizerCalloutRef.current);this.state.resizeInProgress&&this.getMouseLocation(e)!==this.state.lastTouchLocation&&!t&&(this.setState({resizeInProgress:!1,showPortal:!1,resizeButtonsUsed:!1}),null!=(t=null==(e=this.sizerRef.current)?void 0:e.parentElement)&&t.blur(),this.onSizeEnd())}updateSize(e,t,o=!1){var i=ObservableLike.getValue(this.props.size),r=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,i+t*r*o)));return this.props.onSize(e,t,this.props.id),(t-i)*r}}function Sized(o){return React.createElement(Observer,{height:o.height,width:o.width},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)})}Sizer.defaultProps={divider:!0,maxSize:1e4,minSize:100};export{Sizer,Sized};