@atlaskit/editor-plugin-highlight
Version:
Highlight plugin for @atlaskit/editor-core
58 lines (57 loc) • 2.76 kB
JavaScript
import React from 'react';
import { ColorPalette, getSelectedRowAndColumnFromPalette, highlightColorPalette } from '@atlaskit/editor-common/ui-color';
import { ArrowKeyNavigationType, DropdownContainer as Dropdown } from '@atlaskit/editor-common/ui-menu';
import { hexToEditorTextBackgroundPaletteColor } from '@atlaskit/editor-palette';
import { akEditorMenuZIndex } from '@atlaskit/editor-shared-styles';
var HIGHLIGHT_COLOR_PICKER_COLUMNS = 8;
export var 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 = getSelectedRowAndColumnFromPalette(highlightColorPalette, activeColor, HIGHLIGHT_COLOR_PICKER_COLUMNS),
selectedRowIndex = _getSelectedRowAndCol.selectedRowIndex,
selectedColumnIndex = _getSelectedRowAndCol.selectedColumnIndex;
return /*#__PURE__*/React.createElement(Dropdown, {
mountTo: popupsMountPoint,
boundariesElement: popupsBoundariesElement,
scrollableElement: popupsScrollableElement,
isOpen: isOpen,
handleClickOutside: handleClickOutside,
handleEscapeKeydown: handleEscapeKeydown,
zIndex: 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: ArrowKeyNavigationType.COLOR,
selectedRowIndex: selectedRowIndex,
selectedColumnIndex: selectedColumnIndex,
isOpenedByKeyboard: isOpenedByKeyboard,
isPopupPositioned: true
},
trigger: trigger
}, /*#__PURE__*/React.createElement("div", {
"data-testid": "highlight-color-palette"
}, /*#__PURE__*/React.createElement(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: highlightColorPalette,
hexToPaletteColor: hexToEditorTextBackgroundPaletteColor
}
})));
};