@atlaskit/editor-common
Version:
A package that contains common classes and components for editor and renderer
304 lines (300 loc) • 12.4 kB
JavaScript
/**
* @jsxRuntime classic
* @jsx jsx
*/
import React from 'react';
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
import { css, jsx } from '@emotion/react';
import withAnalyticsContext from '@atlaskit/analytics-next/withAnalyticsContext';
import withAnalyticsEvents from '@atlaskit/analytics-next/withAnalyticsEvents';
import Button from '@atlaskit/button/new';
import LegacyButton from '@atlaskit/button/standard-button';
import LegacyExpandIcon from '@atlaskit/icon/glyph/chevron-down';
import ChevronDownIcon from '@atlaskit/icon/utility/chevron-down';
import { fg } from '@atlaskit/platform-feature-flags';
import { Box, xcss, Inline } from '@atlaskit/primitives';
import Tooltip from '@atlaskit/tooltip';
import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, editorAnalyticsChannel, EVENT_TYPE } from '../../analytics';
import { ColorPalette, DEFAULT_BORDER_COLOR, getSelectedRowAndColumnFromPalette } from '../../ui-color';
import { withReactEditorViewOuterListeners } from '../../ui-react';
import { default as Popup } from '../../ui/Popup';
import { ArrowKeyNavigationProvider } from '../ArrowKeyNavigationProvider';
import { ArrowKeyNavigationType } from '../ArrowKeyNavigationProvider/types';
// helps adjusts position of popup
const colorPickerButtonWrapper = css({
position: 'relative'
});
const colorPickerExpandContainer = xcss({
marginTop: 'space.0',
marginBottom: 'space.0',
marginLeft: 'space.negative.050',
marginRight: 'space.negative.050'
});
const colorPickerExpandContainerVisualRefresh = xcss({
marginTop: 'space.negative.025',
marginRight: 'space.negative.050'
});
const colorPickerButtonStyle = css({
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
button: {
'&::after': {
border: 'none'
},
'&:hover': {
backgroundColor: `${"var(--ds-background-selected, #E9F2FF)"}`
}
}
});
// Control the size of color picker buttons and preview
// TODO: https://product-fabric.atlassian.net/browse/DSP-4134
/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
const colorPickerWrapper = () => css({
borderRadius: "var(--ds-border-radius, 3px)",
backgroundColor: "var(--ds-surface-overlay, #FFFFFF)",
boxShadow: "var(--ds-shadow-overlay, 0px 8px 12px #091E4226, 0px 0px 1px #091E424f)",
padding: `${"var(--ds-space-100, 8px)"} 0px`
});
/* eslint-enable @atlaskit/design-system/ensure-design-token-usage */
const ColorPaletteWithReactViewListeners = withReactEditorViewOuterListeners(ColorPalette);
const ColorPickerButton = props => {
const buttonRef = React.useRef(null);
const [isPopupOpen, setIsPopupOpen] = React.useState(false);
const [isPopupPositioned, setIsPopupPositioned] = React.useState(false);
const [isOpenedByKeyboard, setIsOpenedByKeyboard] = React.useState(false);
const togglePopup = () => {
setIsPopupOpen(!isPopupOpen);
if (!isPopupOpen) {
setIsOpenedByKeyboard(false);
setIsPopupPositioned(false);
}
};
React.useEffect(() => {
if (props.setDisableParentScroll) {
props.setDisableParentScroll(isPopupOpen);
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [isPopupOpen]);
const focusButton = () => {
var _buttonRef$current;
(_buttonRef$current = buttonRef.current) === null || _buttonRef$current === void 0 ? void 0 : _buttonRef$current.focus();
};
const handleEsc = React.useCallback(() => {
setIsOpenedByKeyboard(false);
setIsPopupPositioned(false);
setIsPopupOpen(false);
focusButton();
}, []);
const onPositionCalculated = React.useCallback(position => {
setIsPopupPositioned(true);
return position;
}, []);
const {
onChange,
createAnalyticsEvent,
colorPalette,
placement,
skipFocusButtonAfterPick
} = props;
const onColorSelected = React.useCallback((color, label) => {
setIsOpenedByKeyboard(false);
setIsPopupOpen(false);
setIsPopupPositioned(false);
if (onChange) {
if (createAnalyticsEvent) {
// fire analytics
const payload = {
action: ACTION.UPDATED,
actionSubject: ACTION_SUBJECT.PICKER,
actionSubjectId: ACTION_SUBJECT_ID.PICKER_COLOR,
attributes: {
color,
label,
placement: placement
},
eventType: EVENT_TYPE.TRACK
};
createAnalyticsEvent(payload).fire(editorAnalyticsChannel);
}
const newPalette = colorPalette.find(colorPalette => colorPalette.value === color);
newPalette && onChange(newPalette);
}
if (!skipFocusButtonAfterPick) {
focusButton();
}
}, [colorPalette, onChange, createAnalyticsEvent, placement, skipFocusButtonAfterPick]);
const renderPopup = () => {
if (!isPopupOpen || !buttonRef.current) {
return;
}
const selectedColor = props.currentColor || null;
const {
selectedRowIndex,
selectedColumnIndex
} = getSelectedRowAndColumnFromPalette(props.colorPalette, selectedColor, props.cols);
return jsx(Popup, {
target: buttonRef.current,
fitHeight: 350,
fitWidth: 350,
offset: [0, 10],
alignX: props.alignX,
mountTo: props.setDisableParentScroll ? props.mountPoint : undefined,
absoluteOffset: props.absoluteOffset
// Confluence inline comment editor has z-index: 500
// if the toolbar is scrollable, this will be mounted in the root editor
// we need an index of > 500 to display over it
,
zIndex: props.setDisableParentScroll ? 600 : undefined,
ariaLabel: "Color picker popup",
onPositionCalculated: onPositionCalculated
}, jsx("div", {
css: colorPickerWrapper,
"data-test-id": "color-picker-menu"
}, jsx(ArrowKeyNavigationProvider, {
type: ArrowKeyNavigationType.COLOR,
selectedRowIndex: selectedRowIndex,
selectedColumnIndex: selectedColumnIndex,
closeOnTab: true,
handleClose: () => setIsPopupOpen(false),
isOpenedByKeyboard: isOpenedByKeyboard,
isPopupPositioned: isPopupPositioned,
ignoreEscapeKey: props.returnEscToButton
}, jsx(ColorPaletteWithReactViewListeners, {
cols: props.cols,
selectedColor: selectedColor,
onClick: onColorSelected,
handleClickOutside: togglePopup,
handleEscapeKeydown: handleEsc,
paletteOptions: {
palette: props.colorPalette,
hexToPaletteColor: props.hexToPaletteColor,
paletteColorTooltipMessages: props.paletteColorTooltipMessages
}
}))));
};
const title = props.title || '';
const currentColor = props.currentColor && props.hexToPaletteColor ? props.hexToPaletteColor(props.currentColor) : props.currentColor;
const buttonStyle = () => {
var _props$size, _props$size2, _props$size3;
return css({
padding: `${"var(--ds-space-075, 6px)"} 10px`,
backgroundColor: "var(--ds-background-neutral-subtle, transparent)",
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
height: `${!!((_props$size = props.size) !== null && _props$size !== void 0 && _props$size.height) ? 'inherit' : ''}`,
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
'&:before': {
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
alignSelf: 'center',
content: "''",
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
border: `1px solid ${DEFAULT_BORDER_COLOR}`,
borderRadius: "var(--ds-border-radius, 3px)",
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
backgroundColor: currentColor || 'transparent',
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
width: ((_props$size2 = props.size) === null || _props$size2 === void 0 ? void 0 : _props$size2.width) || '14px',
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
height: ((_props$size3 = props.size) === null || _props$size3 === void 0 ? void 0 : _props$size3.height) || '14px',
padding: 0,
margin: `0px ${"var(--ds-space-025, 2px)"}`
},
'&:hover': {
background: "var(--ds-background-neutral-subtle-hovered, #091E420F)"
}
});
};
const buttonStyleVisualRefresh = () => {
var _props$size4, _props$size5, _props$size6;
return css({
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
height: `${!!((_props$size4 = props.size) !== null && _props$size4 !== void 0 && _props$size4.height) ? 'inherit' : ''}`,
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
'&:before': {
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
alignSelf: 'center',
content: "''",
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
border: `1px solid ${DEFAULT_BORDER_COLOR}`,
borderRadius: "var(--ds-border-radius, 3px)",
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
backgroundColor: currentColor || 'transparent',
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
width: ((_props$size5 = props.size) === null || _props$size5 === void 0 ? void 0 : _props$size5.width) || '14px',
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
height: ((_props$size6 = props.size) === null || _props$size6 === void 0 ? void 0 : _props$size6.height) || '14px',
marginTop: `${"var(--ds-space-025, 2px)"}`
}
});
};
return jsx("div", {
css: colorPickerButtonWrapper
}, jsx(Tooltip, {
content: title,
position: "top"
},
// eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix
fg('platform-visual-refresh-icons') ? jsx("div", {
css: colorPickerButtonStyle
}, jsx(Button, {
appearance: 'subtle',
ref: buttonRef,
"aria-label": title,
"aria-expanded": props.isAriaExpanded ? isPopupOpen : undefined,
spacing: "compact",
onClick: togglePopup,
onKeyDown: event => {
if (event.key === 'Enter' || event.key === ' ') {
event.preventDefault();
togglePopup();
setIsOpenedByKeyboard(true);
}
},
"data-selected-color": props.currentColor,
isSelected: isPopupOpen
}, jsx(Inline, {
alignBlock: "start"
}, jsx("span", {
// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
css: buttonStyleVisualRefresh
}), jsx(Box, {
xcss: colorPickerExpandContainerVisualRefresh
}, jsx(ChevronDownIcon, {
color: "currentColor",
spacing: "spacious",
LEGACY_fallbackIcon: LegacyExpandIcon,
label: "color-picker-chevron-down"
}))))) : jsx(LegacyButton, {
appearance: 'subtle',
ref: buttonRef,
"aria-label": title,
"aria-expanded": props.isAriaExpanded ? isPopupOpen : undefined,
spacing: "compact",
onClick: togglePopup,
onKeyDown: event => {
if (event.key === 'Enter' || event.key === ' ') {
event.preventDefault();
togglePopup();
setIsOpenedByKeyboard(true);
}
}
// eslint-disable-next-line @atlaskit/design-system/no-unsafe-style-overrides
,
css: buttonStyle,
iconAfter: jsx(Box, {
xcss: colorPickerExpandContainer
}, jsx(ChevronDownIcon, {
color: "currentColor",
spacing: "spacious",
LEGACY_fallbackIcon: LegacyExpandIcon,
label: "color-picker-chevron-down"
})),
"data-selected-color": props.currentColor
})), renderPopup());
};
export default withAnalyticsContext({
source: 'ConfigPanel'
})(withAnalyticsEvents()(ColorPickerButton));