azure-devops-ui
Version:
React components for building web UI in Azure DevOps
76 lines (75 loc) • 3.54 kB
JavaScript
import "../../CommonImports";
import "../../Core/core.css";
import "./Label.css";
import * as React from "react";
import { css, getSafeId } from '../../Util';
import { Tooltip } from '../../TooltipEx';
import { getColorString, isDark } from '../../Utilities/Color';
import { FocusWithin } from '../../FocusWithin';
import { FocusZoneContext } from '../../FocusZone';
import { Observer } from '../../Observer';
import { getTabIndex } from '../../Utilities/Focus';
import { FocusGroupContext } from '../../FocusGroup';
export class Label extends React.Component {
constructor(props) {
super(props);
this.rootRef = React.createRef();
this.onBlur = () => {
this.props.onBlur && this.props.onBlur();
};
this.onFocus = (event) => {
this.props.onFocus && this.props.onFocus(event);
this.context && this.props.id && this.context.onFocus(this.props.id);
};
this.onHoverStart = () => {
this.setState({
isHovered: true
});
};
this.onHoverEnd = () => {
this.setState({
isHovered: false
});
};
this.state = {
isHovered: false
};
}
render() {
const { className, content, color, enableHover = false, excludeFocusZone, id, selected, onClick, onKeyDown, onMouseDown } = this.props;
const { isHovered } = this.state;
const renderColor = color && isHovered && enableHover ? createHoverColor(color) : color;
const labelObject = (React.createElement(FocusZoneContext.Consumer, null, (zoneContext) => (React.createElement(FocusWithin, { onBlur: this.onBlur, onFocus: this.onFocus }, (focusStatus) => {
return (React.createElement(Observer, { selected: selected }, (observerProps) => (React.createElement("div", { className: css(className, "bolt-label", observerProps.selected && "selected", color && (this.isDark(color, observerProps.selected) ? "dark" : "light")), "data-focuszone": !excludeFocusZone && zoneContext.focuszoneId, id: getSafeId(id), onBlur: this.onBlur, onClick: onClick, onFocus: this.onFocus, onKeyDown: onKeyDown, onMouseDown: onMouseDown, onMouseEnter: this.onHoverStart, onMouseLeave: this.onHoverEnd, ref: this.rootRef, style: this.getStyle(renderColor, observerProps.selected, focusStatus.hasFocus), tabIndex: getTabIndex(this.props, this.context) },
React.createElement(Tooltip, { overflowOnly: true },
React.createElement("div", { className: "bolt-label-content text-ellipsis" }, content))))));
}))));
return labelObject;
}
focus() {
this.rootRef.current && this.rootRef.current.focus();
}
getStyle(color, isSelected, hasFocus) {
if (isSelected || hasFocus || !color) {
return undefined;
}
return { backgroundColor: getColorString(color) };
}
isDark(color, isSelected) {
if (isSelected || !color) {
return false;
}
return isDark(color);
}
}
Label.DEFAULT_COLOR = { red: 240, blue: 240, green: 240 };
Label.contextType = FocusGroupContext;
function createHoverColor(baseColor) {
const darkenFactor = 0.06;
const darkenMultiplier = 1 - darkenFactor;
return {
red: baseColor.red * darkenMultiplier,
green: baseColor.green * darkenMultiplier,
blue: baseColor.blue * darkenMultiplier
};
}