@atlaskit/status
Version:
Fabric Status React Components
96 lines (95 loc) • 4.88 kB
JavaScript
/* color-palette.tsx generated by @compiled/babel-plugin v0.36.1 */
import "./color-palette.compiled.css";
import { ax, ix } from "@compiled/react/runtime";
import React, { useEffect, useRef, useCallback, useState } from 'react';
import Color from './color';
import { fg } from '@atlaskit/platform-feature-flags';
const paletteLegacy = [['neutral', "var(--ds-background-neutral, #091E420F)", "var(--ds-border-bold, #758195)", "var(--ds-icon, #44546F)"], ['purple', "var(--ds-background-discovery, #F3F0FF)", "var(--ds-border-discovery, #8270DB)", "var(--ds-icon-discovery, #8270DB)"], ['blue', "var(--ds-background-information, #E9F2FF)", "var(--ds-border-information, #1D7AFC)", "var(--ds-icon-information, #1D7AFC)"], ['red', "var(--ds-background-danger, #FFECEB)", "var(--ds-border-danger, #E2483D)", "var(--ds-icon-danger, #C9372C)"], ['yellow', "var(--ds-background-warning, #FFF7D6)", "var(--ds-border-warning, #E56910)", "var(--ds-icon-warning, #E56910)"], ['green', "var(--ds-background-success, #DCFFF1)", "var(--ds-border-success, #22A06B)", "var(--ds-icon-success, #22A06B)"]];
const paletteRefreshed = [['neutral', "var(--ds-background-accent-gray-subtler, #DCDFE4)", "var(--ds-border-bold, #758195)", "var(--ds-icon, #44546F)"], ['blue', "var(--ds-background-information-pressed, #85B8FF)", "var(--ds-border-information, #1D7AFC)", "var(--ds-icon, #44546F)"], ['green', "var(--ds-background-success-pressed, #7EE2B8)", "var(--ds-border-success, #22A06B)", "var(--ds-icon, #44546F)"], ['yellow', "var(--ds-background-warning-pressed, #F5CD47)", "var(--ds-border-warning, #E56910)", "var(--ds-icon, #44546F)"], ['red', "var(--ds-background-danger-pressed, #FD9891)", "var(--ds-border-danger, #E2483D)", "var(--ds-icon, #44546F)"], ['purple', "var(--ds-background-discovery-pressed, #B8ACF6)", "var(--ds-border-discovery, #8270DB)", "var(--ds-icon, #44546F)"]];
const getPalette = () => fg('platform-component-visual-refresh') ? paletteRefreshed : paletteLegacy;
const palette = getPalette();
// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/design-system/no-css-tagged-template-expression -- Ignored via go/DSP-18766
const colorPaletteWrapperStyles = null;
const VK_LEFT = 37; //ArrowLeft
const VK_RIGHT = 39; //ArrowRight
const VK_UP = 38; //ArrowUp
const VK_DOWN = 40; //ArrowDown
const VK_TAB = 9;
export default (({
cols = 7,
onClick,
selectedColor,
className,
onHover
}) => {
const colorRefs = useRef([]);
const [currentFocusedColor, setCurrentFocusedColor] = useState(0);
useEffect(() => {
colorRefs.current = colorRefs.current.slice(0, palette.length);
}, []);
const memoizedHandleKeyDown = useCallback(e => {
let newColorIndex = null;
const nextColor = () => currentFocusedColor + 1 > palette.length - 1 ? 0 : currentFocusedColor + 1;
const previousColor = () => currentFocusedColor - 1 < 0 ? palette.length - 1 : currentFocusedColor - 1;
if (fg('editor_a11y_arrow_key_status_colour_palette')) {
switch (e.key) {
case 'ArrowRight':
case 'ArrowDown':
e.preventDefault();
newColorIndex = nextColor();
break;
case 'ArrowLeft':
case 'ArrowUp':
e.preventDefault();
newColorIndex = previousColor();
break;
case 'Tab':
setCurrentFocusedColor(0);
break;
}
} else {
switch (e.keyCode) {
case VK_RIGHT:
case VK_DOWN:
e.preventDefault();
newColorIndex = nextColor();
break;
case VK_LEFT:
case VK_UP:
e.preventDefault();
newColorIndex = previousColor();
break;
case VK_TAB:
setCurrentFocusedColor(0);
break;
}
}
if (newColorIndex === null) {
return;
}
setCurrentFocusedColor(newColorIndex);
const newRef = colorRefs.current[newColorIndex];
newRef === null || newRef === void 0 ? void 0 : newRef.focus();
}, [currentFocusedColor, setCurrentFocusedColor, colorRefs]);
return /*#__PURE__*/React.createElement("ul", {
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
className: ax(["_19bvidpf _19pku2gc _2hwxu2gc _otyridpf _18u0u2gc _1e0c1txw _1n261g80", className]),
style: {
maxWidth: cols * 32
},
onKeyDown: memoizedHandleKeyDown
}, palette.map(([colorValue, backgroundColor, borderColor, iconColor], i) => {
return /*#__PURE__*/React.createElement(Color, {
key: colorValue,
value: colorValue,
backgroundColor: backgroundColor,
borderColor: borderColor,
iconColor: iconColor,
onClick: onClick,
onHover: onHover,
isSelected: colorValue === selectedColor,
tabIndex: i === 0 ? 0 : -1,
setRef: el => colorRefs.current[i] = el
});
}));
});