@grafana/ui
Version:
Grafana Components Library
79 lines (76 loc) • 2.69 kB
JavaScript
import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
import { css } from '@emotion/css';
import { useRef, createElement } from 'react';
import { useTheme2 } from '../../themes/ThemeContext.mjs';
import { closePopover } from '../../utils/closePopover.mjs';
import { Popover } from '../Tooltip/Popover.mjs';
import { PopoverController } from '../Tooltip/PopoverController.mjs';
import { ColorPickerPopover } from './ColorPickerPopover.mjs';
import { ColorSwatch } from './ColorSwatch.mjs';
import { SeriesColorPickerPopover } from './SeriesColorPickerPopover.mjs';
;
const colorPickerFactory = (popover, displayName = "ColorPicker") => {
const ColorPickerComponent = (props) => {
const { children, onChange, color, id } = props;
const theme = useTheme2();
const pickerTriggerRef = useRef(null);
const styles = getStyles(theme);
const popoverElement = createElement(
popover,
{
...props,
onChange
},
null
);
return /* @__PURE__ */ jsx(PopoverController, { content: popoverElement, hideAfter: 300, children: (showPopper, hidePopper, popperProps) => {
return /* @__PURE__ */ jsxs(Fragment, { children: [
pickerTriggerRef.current && /* @__PURE__ */ jsx(
Popover,
{
...popperProps,
referenceElement: pickerTriggerRef.current,
wrapperClassName: styles.colorPicker,
onMouseLeave: hidePopper,
onMouseEnter: showPopper,
onKeyDown: (event) => closePopover(event, hidePopper)
}
),
children ? children({
ref: pickerTriggerRef,
showColorPicker: showPopper,
hideColorPicker: hidePopper,
isOpen: popperProps.show
}) : /* @__PURE__ */ jsx(
ColorSwatch,
{
id,
ref: pickerTriggerRef,
onClick: showPopper,
onMouseLeave: hidePopper,
color: theme.visualization.getColorByName(color || "#000000"),
"aria-label": color
}
)
] });
} });
};
return ColorPickerComponent;
};
const ColorPicker = colorPickerFactory(ColorPickerPopover, "ColorPicker");
const SeriesColorPicker = colorPickerFactory(SeriesColorPickerPopover, "SeriesColorPicker");
const getStyles = (theme) => {
return {
colorPicker: css({
position: "absolute",
zIndex: theme.zIndex.tooltip,
color: theme.colors.text.primary,
maxWidth: "400px",
fontSize: theme.typography.size.sm,
maxHeight: "100vh",
overflow: "auto"
})
};
};
export { ColorPicker, SeriesColorPicker };
//# sourceMappingURL=ColorPicker.mjs.map