azure-devops-ui/Components/ColorPicker/ColorDropdown.js

React components for building web UI in Azure DevOps

import "../../CommonImports";
import "../../Core/core.css";
import "./ColorPicker.css";
import * as React from "react";
import { useObservable } from '../../Core/Observable';
import { Dropdown } from '../../Dropdown';
import { ListSelection } from '../../List';
import { css } from '../../Util';
import { ColorDropdownCalloutComponent } from "./ColorCallout";
import { addColorClass, colorItems } from "./Utils";
export function ColorDropdown({ ariaLabel, className, color, disabled, onColorSelected }) {
    const selection = React.useRef(new ListSelection());
    const [currentColor] = useObservable("#000000");
    // Update our internal value and selection whenever the color prop changes
    React.useEffect(() => {
        currentColor.value = color;
        const idx = colorItems.findIndex(ci => "#" + ci.id === color);
        selection.current.select(idx >= 0 ? idx : 0);
    }, [color]);
    const colorClassName = addColorClass(color);
    return (React.createElement(Dropdown, { ariaLabel: ariaLabel, className: css(className, colorClassName, "color-dropdown"), dismissOnSelect: true, disabled: disabled, items: colorItems, renderCallout: ColorDropdownCallout, renderSelectedItems: () => "", selection: selection.current, onSelect: (evt, item) => {
            onColorSelected("#" + item.id);
        } }));
}
export function ColorDropdownCallout(props) {
    return React.createElement(ColorDropdownCalloutComponent, Object.assign({}, props));
}