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

React components for building web UI in Azure DevOps

import"../../CommonImports";import"../../Core/core.css";import"./SplitButton.css";import*as React from"react";import{Button}from"../../Button";import{Expandable}from"../../Expandable";import{FocusZone,FocusZoneContext,FocusZoneDirection}from"../../FocusZone";import{IconSize}from"../../Icon";import{ContextualMenu}from"../../Menu";import*as Resources from"../../Resources.Widgets";import{css}from"../../Util";import{Location}from"../../Utilities/Position";function SplitButton(n){const r=React.useRef(),s=n.expandableRef||React.useRef(),{buttonRef:t,buttonProps:a,className:i,disabled:c,menuButtonProps:l,primary:u,subtle:m}=n,p=()=>{const t="function"==typeof n.menuButtonProps.contextualMenuProps?n.menuButtonProps.contextualMenuProps():n.menuButtonProps.contextualMenuProps;return React.createElement(ContextualMenu,{anchorElement:r.current,anchorOrigin:{horizontal:Location.end,vertical:Location.end},menuOrigin:{horizontal:Location.end,vertical:Location.start},menuProps:t.menuProps,onActivate:(e,o)=>{t.onActivate&&t.onActivate(e,o),s.current&&s.current.collapse()},onDismiss:()=>s.current&&s.current.collapse()})};return React.createElement(FocusZoneContext.Consumer,null,e=>{let o=React.createElement("div",{className:css(i,"bolt-split-button flex-stretch inline-flex-row"),ref:r},React.createElement(Button,Object.assign({},a,{className:css("bolt-split-button-main",a.className),disabled:c||a.disabled,focusZoneId:e.direction===FocusZoneDirection.Vertical?e.focuszoneId:void 0,primary:u,subtle:m,ref:t})),React.createElement("div",{className:css("bolt-split-button-divider flex-noshrink",u&&"primary",c&&"disabled")}),React.createElement(Expandable,{disabled:c,onCollapse:l.onCollapse,onExpand:l.onExpand,ref:s,renderCallout:n.renderCallout||p},e=>React.createElement("div",{className:"inline-flex-row",onMouseDown:e.onMouseDown,onKeyDown:e.onKeyDown},React.createElement(Button,Object.assign({ariaExpanded:e.expanded,ariaLabel:Resources.MoreActions,iconProps:{iconName:"ChevronDownMed",size:IconSize.small},text:void 0},l,{className:css("bolt-split-button-option flex-self-stretch body-s",l.className,e.expanded&&"active"),disabled:c,onClick:e.onClick,primary:u,subtle:m})))));return o=e.direction!==FocusZoneDirection.Horizontal?React.createElement(FocusZone,{direction:FocusZoneDirection.Horizontal},o):o})}export{SplitButton};