azure-devops-ui/Components/ColorPip/ColorPip.js

React components for building web UI in Azure DevOps

import "../../CommonImports";
import "../../Core/core.css";
import "./ColorPip.css";
import * as React from "react";
import { getColorString } from '../../Utilities/Color';
import { FocusZoneContext } from '../../FocusZone';
import { css } from '../../Util';
export class ColorPip extends React.Component {
    constructor() {
        super(...arguments);
        this.rootRef = React.createRef();
        this.onClick = (event) => {
            this.props.onClick && this.props.onClick(event, this.props.color);
        };
    }
    render() {
        const { className, color, isSelected } = this.props;
        return (React.createElement(FocusZoneContext.Consumer, null, zoneContext => (React.createElement("div", { ref: this.rootRef, className: css(className, "bolt-colorpip"), onClick: this.onClick, "data-focuszone": zoneContext.focuszoneId, tabIndex: isSelected ? 0 : -1 },
            React.createElement("div", { className: css("bolt-colorpip-content", isSelected && "selected"), style: color ? { backgroundColor: getColorString(color) } : undefined })))));
    }
}