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

React components for building web UI in Azure DevOps

import "../../CommonImports";
import "../../Core/core.css";
import "./Checkbox.css";
import * as React from "react";
import { ObservableLike } from '../../Core/Observable';
import { FocusGroupContext } from '../../FocusGroup';
import { FocusZoneContext } from '../../FocusZone';
import { Icon, IconSize } from '../../Icon';
import { Observer } from '../../Observer';
import { Tooltip } from '../../TooltipEx';
import { css, getSafeId, KeyCode } from '../../Util';
import { getTabIndex } from '../../Utilities/Focus';
let checkboxId = 1;
export class TriStateCheckbox extends React.Component {
    constructor(props) {
        super(props);
        this.checkboxElement = React.createRef();
        this.animationClassName = "";
        this.onClick = (event) => {
            this.focus();
            this.onChange(event);
        };
        this.onFocus = () => {
            const id = this.props.id;
            if (id) {
                this.context.onFocus(id);
            }
        };
        this.onKeyDown = (event) => {
            if (!event.defaultPrevented && !this.props.disabled) {
                if (event.which === KeyCode.space) {
                    this.onChange(event);
                    event.preventDefault();
                }
            }
        };
        this.onChange = (event) => {
            if (this.props.onChange) {
                let checked = ObservableLike.getValue(this.props.checked);
                // Unchecked transitions to Checked.
                // Checked transitions to TriState or Unchecked.
                // Indeterminate transitions to Unchecked.
                if (checked === false) {
                    checked = true;
                }
                else if (checked === true) {
                    if (this.props.triState) {
                        checked = undefined;
                    }
                    else {
                        checked = false;
                    }
                }
                else {
                    checked = false;
                }
                this.props.onChange(event, checked);
            }
        };
        this.labelId = `checkbox-${checkboxId++}-label`;
    }
    render() {
        const { disabled, label, labelId, tooltipProps } = this.props;
        return (React.createElement(FocusZoneContext.Consumer, null, (zoneContext) => (React.createElement(Observer, { checked: this.props.checked }, (props) => {
            let ariaChecked;
            if (this.props.role !== "presentation") {
                ariaChecked = props.checked === undefined ? "mixed" : props.checked ? "true" : "false";
            }
            let checkbox = (React.createElement("div", { "aria-checked": ariaChecked, "aria-describedby": getSafeId(this.props.ariaDescribedBy), "aria-disabled": this.props.disabled, "aria-label": this.props.ariaLabel, "aria-labelledby": !this.props.ariaLabel ? getSafeId(this.props.ariaLabelledBy) : undefined, className: css(this.props.className, "bolt-checkbox cursor-pointer", props.checked !== false && "checked", disabled ? "disabled" : "enabled", "bolt-focus-treatment", label && "labelled"), "data-focuszone": !disabled && css(this.props.focuszoneId, !this.props.excludeFocusZone ? zoneContext.focuszoneId : undefined), id: getSafeId(this.props.id), onClick: !disabled ? this.onClick : undefined, onFocus: this.onFocus, onKeyDown: this.onKeyDown, ref: this.checkboxElement, role: this.props.role || "checkbox", tabIndex: getTabIndex(this.props, this.context) },
                React.createElement("div", { className: "bolt-checkmark justify-center flex-row flex-noshrink scroll-hidden" }, Icon({
                    className: this.animationClassName,
                    iconName: props.checked === undefined ? "SkypeMinus" : "CheckMark",
                    size: IconSize.small
                })),
                label && (React.createElement("div", { className: "bolt-checkbox-label", id: getSafeId(labelId || this.labelId) }, label)),
                this.props.children));
            if (tooltipProps) {
                checkbox = (React.createElement(Tooltip, Object.assign({ addAriaDescribedBy: true }, tooltipProps), checkbox));
            }
            return checkbox;
        }))));
    }
    componentDidMount() {
        this.animationClassName = "animation-ready";
    }
    focus() {
        if (this.checkboxElement.current) {
            this.checkboxElement.current.focus();
        }
    }
}
TriStateCheckbox.contextType = FocusGroupContext;
export class Checkbox extends TriStateCheckbox {
}
Checkbox.defaultProps = {
    checked: false
};