@atlaskit/editor-plugin-highlight
Version:
Highlight plugin for @atlaskit/editor-core
65 lines (63 loc) • 3 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.PaletteDropdown = void 0;
var _react = _interopRequireDefault(require("react"));
var _uiColor = require("@atlaskit/editor-common/ui-color");
var _uiMenu = require("@atlaskit/editor-common/ui-menu");
var _editorPalette = require("@atlaskit/editor-palette");
var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
var HIGHLIGHT_COLOR_PICKER_COLUMNS = 8;
var PaletteDropdown = exports.PaletteDropdown = function PaletteDropdown(props) {
var popupsMountPoint = props.popupsMountPoint,
popupsBoundariesElement = props.popupsBoundariesElement,
popupsScrollableElement = props.popupsScrollableElement,
isOpen = props.isOpen,
activeColor = props.activeColor,
trigger = props.trigger,
onColorChange = props.onColorChange,
isOpenedByKeyboard = props.isOpenedByKeyboard,
handleClickOutside = props.handleClickOutside,
handleEscapeKeydown = props.handleEscapeKeydown;
// pixels, used to determine where to horizontally position the dropdown when space is limited
// this should reflect the width of the dropdown when fully populated with colors, including translations due to layering
var fitWidth = 274;
var _getSelectedRowAndCol = (0, _uiColor.getSelectedRowAndColumnFromPalette)(_uiColor.highlightColorPalette, activeColor, HIGHLIGHT_COLOR_PICKER_COLUMNS),
selectedRowIndex = _getSelectedRowAndCol.selectedRowIndex,
selectedColumnIndex = _getSelectedRowAndCol.selectedColumnIndex;
return /*#__PURE__*/_react.default.createElement(_uiMenu.DropdownContainer, {
mountTo: popupsMountPoint,
boundariesElement: popupsBoundariesElement,
scrollableElement: popupsScrollableElement,
isOpen: isOpen,
handleClickOutside: handleClickOutside,
handleEscapeKeydown: handleEscapeKeydown,
zIndex: _editorSharedStyles.akEditorMenuZIndex,
fitWidth: fitWidth,
closeOnTab: true
// eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
,
arrowKeyNavigationProviderOptions: {
type: _uiMenu.ArrowKeyNavigationType.COLOR,
selectedRowIndex: selectedRowIndex,
selectedColumnIndex: selectedColumnIndex,
isOpenedByKeyboard: isOpenedByKeyboard,
isPopupPositioned: true
},
trigger: trigger
}, /*#__PURE__*/_react.default.createElement("div", {
"data-testid": "highlight-color-palette"
}, /*#__PURE__*/_react.default.createElement(_uiColor.ColorPalette, {
cols: HIGHLIGHT_COLOR_PICKER_COLUMNS,
onClick: onColorChange,
selectedColor: activeColor
// eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
,
paletteOptions: {
palette: _uiColor.highlightColorPalette,
hexToPaletteColor: _editorPalette.hexToEditorTextBackgroundPaletteColor
}
})));
};