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

React components for building web UI in Azure DevOps

import"../../CommonImports";import"../../Core/core.css";import*as React from"react";import{FocusGroupContext}from"../../FocusGroup";import{FocusZoneContext}from"../../FocusZone";import{MouseWithin}from"../../MouseWithin";import{css,getSafeId,KeyCode,setFocusVisible}from"../../Util";import{getTabIndex}from"../../Utilities/Focus";class Expandable extends React.Component{constructor(){super(...arguments),this.state={expanded:!1},this.collapse=()=>{this.state.expanded&&(this.setState({expanded:!1}),this.props.onCollapse)&&this.props.onCollapse()},this.expand=()=>{this.state.expanded||(this.setState({expanded:!this.state.expanded}),this.props.onExpand&&this.props.onExpand())},this.onClick=e=>{this.props.disabled?e.preventDefault():e.defaultPrevented||this.state.expanded||this.ignoreClick||(this.expand(),e.preventDefault())},this.onKeyDown=e=>{e.defaultPrevented||e.ctrlKey||!this.state.expanded&&this.isExpandKey(e)&&(this.ignoreClick=!1,this.expand(),e.preventDefault())},this.onMouseDown=()=>{this.ignoreClick=this.state.expanded}}render(){var e=this.state["expanded"],t=this.props.children;return React.createElement(React.Fragment,null,t({expanded:e,onClick:this.onClick,onKeyDown:this.onKeyDown,onMouseDown:this.onMouseDown}),e&&this.props.renderCallout&&this.props.renderCallout())}isExpandKey(e){return Array.isArray(this.props.expandKey)&&-1!==this.props.expandKey.indexOf(e.which)||e.which===this.props.expandKey}}Expandable.defaultProps={expandKey:KeyCode.downArrow};let expandableContainerId=1;class ExpandableContainer extends React.Component{constructor(){super(...arguments),this.element=React.createRef(),this.expandedOnHover=!1,this.expandable=React.createRef(),this.expandableId="expandableContainer-"+expandableContainerId++,this.collapse=()=>{this.expandable.current&&this.expandable.current.collapse()},this.expand=()=>{this.expandable.current&&this.expandable.current.expand()},this.onFocus=e=>{!this.props.id||this.element.current&&this.element.current!==e.target||this.context.onFocus(this.props.id)},this.onMouseEnter=()=>{this.props.expandOnHover&&(this.expandedOnHover=!0,setFocusVisible(!1),this.expand())},this.onMouseLeave=()=>{this.expandedOnHover&&this.collapse()},this.renderCallout=()=>this.props.renderCallout(this.expandable.current,this.expandableId,this.element.current)}render(){return React.createElement(FocusZoneContext.Consumer,null,s=>React.createElement(MouseWithin,{enterDelay:this.props.expandDelay,leaveDelay:this.props.collapseDelay,onMouseEnter:this.onMouseEnter,onMouseLeave:this.onMouseLeave,updateStateOnMouseChange:!1},t=>React.createElement(Expandable,Object.assign({},this.props,{renderCallout:void 0,ref:this.expandable}),e=>React.createElement("div",{"aria-controls":void 0===this.props.ariaControls?e.expanded?getSafeId(this.props.expandableId):void 0:this.props.ariaControls||void 0,"aria-expanded":void 0===this.props.ariaExpanded?e.expanded:null===this.props.ariaExpanded?void 0:this.props.ariaExpanded,"aria-haspopup":void 0===this.props.ariaHasPopup||(null===this.props.ariaHasPopup?void 0:this.props.ariaHasPopup),"aria-label":this.props.ariaLabel,className:css(this.props.className,"bolt-expandable-container flex-row flex-center",e.expanded&&"expanded"),"data-focuszone":this.props.disabled||this.props.excludeFocusZone?void 0:s.focuszoneId,id:getSafeId(this.props.id),onClick:e.onClick,onFocus:this.onFocus,onKeyDown:e.onKeyDown,onMouseDown:e.onMouseDown,onMouseEnter:t.onMouseEnter,onMouseLeave:t.onMouseLeave,role:this.props.role||"button",tabIndex:getTabIndex(this.props,this.context),ref:this.element},this.props.children,e.expanded&&this.renderCallout()))))}}ExpandableContainer.contextType=FocusGroupContext,ExpandableContainer.defaultProps={collapseDelay:250,expandDelay:250,expandKey:[KeyCode.downArrow,KeyCode.enter]};export{Expandable,ExpandableContainer};