azure-devops-ui
Version:
React components for building web UI in Azure DevOps
35 lines (34 loc) • 2.33 kB
JavaScript
import "../../CommonImports";
import "../../Core/core.css";
import "./ColorPicker.css";
import * as React from "react";
import { ObservableValue, useObservable } from '../../Core/Observable';
import { ExpandableButton } from '../../Button';
import { IconSize } from '../../Icon';
import { ListSelection } from '../../List';
import { Observer } from '../../Observer';
import { css } from '../../Util';
import { ColorDropdownCallout } from "./ColorDropdown";
import { addColorClass, colorItems } from "./Utils";
export function ExpandableColorButton({ ariaLabel, className, color, 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);
const onSelect = (evt, item) => {
currentColor.value = "#" + item.id;
onColorSelected("#" + item.id);
};
return (React.createElement("div", { className: "flex-column justify-center color-callout" },
React.createElement(ExpandableButton, { ariaLabel: ariaLabel, className: css(className, colorClassName, "color-dropdown color-callout"), renderCallout: (dropdown, dropdownId, anchorElement, anchorOffset, anchorOrigin, anchorPoint, dropdownOrigin) => {
return (React.createElement(ColorDropdownCallout, { id: dropdownId, focusOnMount: true, anchorElement: anchorElement, anchorOffset: anchorOffset, anchorOrigin: anchorOrigin, anchorPoint: anchorPoint, dropdownOrigin: dropdownOrigin, blurDismiss: true, lightDismiss: true, onDismiss: dropdown.collapse, items: colorItems, filterText: new ObservableValue(""), onSelect: onSelect, selection: selection.current }));
}, iconProps: { iconName: "FontColor", size: IconSize.medium }, hideDropdownIcon: true }),
React.createElement(Observer, { color: currentColor }, (observerProps) => (React.createElement("div", { className: "style-rule-font-color-bar", style: {
backgroundColor: observerProps.color
} })))));
}