@atlaskit/status
Version:
Fabric Status React Components
123 lines (121 loc) • 6.75 kB
JavaScript
/* color-palette.tsx generated by @compiled/babel-plugin v0.36.1 */
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
require("./color-palette.compiled.css");
var _runtime = require("@compiled/react/runtime");
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _react = _interopRequireWildcard(require("react"));
var _color = _interopRequireDefault(require("./color"));
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
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 (0, _platformFeatureFlags.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;
var _default = exports.default = function _default(_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 = (0, _react.useRef)([]);
var _useState = (0, _react.useState)(0),
_useState2 = (0, _slicedToArray2.default)(_useState, 2),
currentFocusedColor = _useState2[0],
setCurrentFocusedColor = _useState2[1];
(0, _react.useEffect)(function () {
colorRefs.current = colorRefs.current.slice(0, palette.length);
}, []);
var memoizedHandleKeyDown = (0, _react.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 ((0, _platformFeatureFlags.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.default.createElement("ul", {
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
className: (0, _runtime.ax)(["_19bvidpf _19pku2gc _2hwxu2gc _otyridpf _18u0u2gc _1e0c1txw _1n261g80", className]),
style: {
maxWidth: cols * 32
},
onKeyDown: memoizedHandleKeyDown
}, palette.map(function (_ref2, i) {
var _ref3 = (0, _slicedToArray2.default)(_ref2, 4),
colorValue = _ref3[0],
backgroundColor = _ref3[1],
borderColor = _ref3[2],
iconColor = _ref3[3];
return /*#__PURE__*/_react.default.createElement(_color.default, {
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;
}
});
}));
};