UNPKG

azure-devops-ui

Version:

React components for building web UI in Azure DevOps

1 lines 2.19 kB
import{__assign}from"tslib";import"../../CommonImports";import"../../Core/core.css";import"./Card.css";import*as React from"react";import{Button}from"../../Button";import{Header}from"../../Header";import{IconSize}from"../../Icon";import{Observer}from"../../Observer";import*as Resources from"../../Resources.Card";import{css}from"../../Util";import{CardContent}from"./CardContent";import{CustomCard}from"./CustomCard";var Card=function(a){var e=a.collapsible,r=a.collapsed,r=void 0!==r&&r,t=a.titleProps,o=a.headerCommandBarItems,s=a.onCollapseClick,l=a.renderHeader,c=(void 0===t?{}:t).text;return React.createElement(CustomCard,{className:css(a.className,(c||o)&&"bolt-card-with-header")},e?React.createElement(Observer,{collapsed:r},function(e){return React.createElement(React.Fragment,null,(c||o||l)&&React.createElement("div",{className:"flex-row"},React.createElement(Button,{ariaExpanded:!e.collapsed,ariaLabel:(c?c+" ":"")+(e.collapsed?Resources.ExpandButtonAriaLabel:Resources.CollapseButtonAriaLabel),subtle:!0,iconProps:{iconName:e.collapsed?"ChevronRightMed":"ChevronDownMed",size:IconSize.small},className:"bolt-card-expand-button flex-self-start",onClick:s}),l?l():React.createElement(CardHeader,__assign({},a,{headerClassName:css(a.headerClassName,"bolt-card-expandable-header",e.collapsed&&"bolt-card-header-collapsed")}))),!e.collapsed&&React.createElement(CardContent,__assign({},a.contentProps),a.children))}):React.createElement(React.Fragment,null,l?l():(c||o)&&React.createElement(CardHeader,__assign({},a)),React.createElement(CardContent,__assign({},a.contentProps),a.children)))},CardHeader=function(e){var a=e.collapsible,r=e.titleProps,r=void 0===r?{}:r,t=e.headerBreakpoints,o=e.headerClassName,s=e.headerCommandBarItems,l=e.headerDescriptionProps,l=void 0===l?{}:l,e=e.headerIconProps,c=r.text,n=r.className,d=r.id,i=r.size,r=r.ariaLevel;return React.createElement(Header,{className:css(o,"bolt-card-header",a&&"bolt-card-header-collapsible"),commandBarClassName:"justify-end",commandBarItems:s,description:l.text,descriptionClassName:l.className,headerBreakpoints:t,titleId:d,titleIconProps:e,title:c,titleAriaLevel:r,titleClassName:n,titleSize:i})};export{Card};