@atlaskit/status
Version:
Fabric Status React Components
113 lines (112 loc) • 5.43 kB
JavaScript
/* color-palette.tsx generated by @compiled/babel-plugin v0.36.1 */
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
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';
var 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)"]];
var 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)"]];
var getPalette = function getPalette() {
return fg('platform-component-visual-refresh') ? paletteRefreshed : paletteLegacy;
};
var 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
var colorPaletteWrapperStyles = null;
var VK_LEFT = 37; //ArrowLeft
var VK_RIGHT = 39; //ArrowRight
var VK_UP = 38; //ArrowUp
var VK_DOWN = 40; //ArrowDown
var VK_TAB = 9;
export default (function (_ref) {
var _ref$cols = _ref.cols,
cols = _ref$cols === void 0 ? 7 : _ref$cols,
onClick = _ref.onClick,
selectedColor = _ref.selectedColor,
className = _ref.className,
onHover = _ref.onHover;
var colorRefs = useRef([]);
var _useState = useState(0),
_useState2 = _slicedToArray(_useState, 2),
currentFocusedColor = _useState2[0],
setCurrentFocusedColor = _useState2[1];
useEffect(function () {
colorRefs.current = colorRefs.current.slice(0, palette.length);
}, []);
var memoizedHandleKeyDown = useCallback(function (e) {
var newColorIndex = null;
var nextColor = function nextColor() {
return currentFocusedColor + 1 > palette.length - 1 ? 0 : currentFocusedColor + 1;
};
var previousColor = function previousColor() {
return 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);
var newRef = colorRefs.current[newColorIndex];
newRef === null || newRef === 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(function (_ref2, i) {
var _ref3 = _slicedToArray(_ref2, 4),
colorValue = _ref3[0],
backgroundColor = _ref3[1],
borderColor = _ref3[2],
iconColor = _ref3[3];
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: function setRef(el) {
return colorRefs.current[i] = el;
}
});
}));
});