azure-devops-ui
Version:
React components for building web UI in Azure DevOps
81 lines (80 loc) • 4.15 kB
JavaScript
import "../../CommonImports";
import "../../Core/core.css";
import "./PillGroup.css";
import * as React from "react";
import { Button } from '../../Button';
import { IconSize } from '../../Icon';
import { Intersection, IntersectionContext } from '../../Intersection';
import { Pill, PillSize } from '../../Pill';
import * as Resources from '../../Resources.Widgets';
import { css } from '../../Util';
import { PillGroupOverflow } from "./PillGroup.Props";
export class PillGroup extends React.Component {
constructor(props) {
super(props);
this.observing = false;
this.onClick = (event) => {
this.setState({
overflow: this.state.overflow === this.props.overflow ? PillGroupOverflow.wrap : this.props.overflow
});
event === null || event === void 0 ? void 0 : event.preventDefault();
};
this.observeElement = (element) => {
if (element && this.intersectionContext && !this.observing) {
this.intersectionContext.observe(element);
this.observing = true;
}
};
this.onIntersect = (entries) => {
this.setState({
// Only want the effect if the right side is cut off
overflowing: Math.round(entries[0].rootBounds.right) < Math.round(entries[0].boundingClientRect.right)
});
};
this.state = { overflowing: false, overflow: this.props.overflow };
}
render() {
const { onMouseEnter, onMouseLeave } = this.props;
const { overflow } = this.state;
let contents, extend;
extend = (React.createElement(Pill, { size: PillSize.compact },
React.createElement(Button, { ariaLabel: this.state.overflow === this.props.overflow ? Resources.ShowMore : Resources.ShowLess, className: "bolt-pill-button", iconProps: { iconName: "More", size: IconSize.inherit }, onClick: this.onClick, subtle: true, tooltipProps: { text: this.state.overflow === this.props.overflow ? Resources.ShowMore : Resources.ShowLess } })));
// If we have fade enabled put the intersection observer and the overflow element in place.
if (overflow === PillGroupOverflow.fade) {
contents = (React.createElement(IntersectionContext.Consumer, null, intersectionContext => {
this.intersectionContext = intersectionContext;
return (React.createElement("div", { className: "bolt-pill-overflow flex-row" },
React.createElement("div", { className: "bolt-pill-group-inner flex-row" },
this.state.overflowing && extend,
this.props.children),
React.createElement("div", { className: "bolt-pill-observe", ref: element => this.observeElement(element) })));
}));
}
else {
contents = (React.createElement("div", { className: "bolt-pill-group-inner flex-row" },
this.state.overflowing && extend,
this.props.children));
}
// Wrap the pill group in the outer shell.
contents = (React.createElement("div", { className: css(this.props.className, "bolt-pill-group flex-row", overflow === PillGroupOverflow.wrap
? "overflow-wrap"
: overflow === PillGroupOverflow.fade
? this.state.overflowing && "overflow-fade"
: undefined), onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave }, contents));
// If we have fade enabled wrap the PillGroup in the intersection.
if (overflow === PillGroupOverflow.fade) {
contents = React.createElement(Intersection, null, contents);
}
return contents;
}
componentDidMount() {
if (this.intersectionContext) {
this.intersectionContext.register(this.onIntersect);
}
}
componentWillUnmount() {
if (this.intersectionContext) {
this.intersectionContext.unregister(this.onIntersect);
}
}
}