azure-devops-ui
Version:
React components for building web UI in Azure DevOps
71 lines (70 loc) • 3.58 kB
JavaScript
import "../../CommonImports";
import "../../Core/core.css";
import "./ZeroData.css";
import * as React from "react";
import { Button } from '../../Button';
import { Icon } from '../../Icon';
import { Link } from '../../Link';
import { css } from '../../Util';
import { ZeroDataActionType } from "./ZeroData.Props";
/**
* Component for displaying helpful information when there is no data to show.
*/
export const ZeroData = props => {
return React.createElement(ZeroDataMultiple, { items: [props], className: props.className });
};
/**
* Component for displaying helpful information when there is no data to show. This one displays
* multiple (or one) ZeroDataItems.
*
* THIS CLASS IS NOT EXPORTED presently because no design for multiple ZeroDataItems has yet been
* approved.
*/
const ZeroDataMultiple = props => {
const multiple = props.items.length > 1;
return (React.createElement("div", { className: css("vss-ZeroData flex-row justify-center", multiple ? "multiple" : "single", props.className) }, props.items.map((item, index) => (React.createElement(ZeroDataItem, { item: item, key: index, multiple: multiple })))));
};
/**
* Represents a single item for the ZeroData component.
*/
class ZeroDataItem extends React.Component {
render() {
const item = this.props.item;
let secondary;
if (typeof item.secondaryText === "string") {
secondary = React.createElement("span", null, item.secondaryText);
}
else {
secondary = item.secondaryText;
}
return (React.createElement("div", { className: css("vss-ZeroDataItem flex-column flex-center", this.props.multiple && "flex-grow") },
item.iconProps ? (React.createElement(Icon, Object.assign({ className: "vss-ZeroDataItem--icon-image" }, item.iconProps))) : (React.createElement("img", { className: "vss-ZeroDataItem--image", src: item.imagePath, alt: item.imageAltText })),
React.createElement("div", { className: css("vss-ZeroDataItem--primary margin-horizontal-16", this.props.multiple ? "title-m" : "title-l") }, item.primaryText),
secondary && React.createElement("div", { className: "vss-ZeroDataItem--secondary margin-horizontal-16" }, secondary),
this.renderAction(item)));
}
renderAction(item) {
var _a;
if (item.renderAction) {
return item.renderAction();
}
if (!item.actionText) {
return null;
}
// actionType === 1 is for back-compat where it used to be button type
// button type is rendered same as ctaButton now
// we can remove actionType === 1 in 143
if (item.actionType === ZeroDataActionType.ctaButton || item.actionType === 1) {
const onActionClick = (ev) => {
if (item.onActionClick) {
item.onActionClick.call(null, ev, item);
}
};
const buttonProps = Object.assign(Object.assign({}, (item.actionButtonProps || {})), { className: css("vss-ZeroDataItem--action", (_a = item.actionButtonProps) === null || _a === void 0 ? void 0 : _a.className), text: item.actionText, onClick: onActionClick, href: item.actionHref, role: item.actionHref ? "link" : undefined });
return React.createElement(Button, Object.assign({}, buttonProps, { primary: true }));
}
else {
return React.createElement(Link, { href: item.actionHref }, item.actionText);
}
}
}