@atlaskit/editor-common
Version:
A package that contains common classes and components for editor and renderer
155 lines • 4.9 kB
JavaScript
/**
* @jsxRuntime classic
* @jsx jsx
*/
import { useContext, useEffect, useMemo, useRef } from 'react';
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
import { css, jsx } from '@emotion/react';
import { injectIntl } from 'react-intl';
import { Stack } from '@atlaskit/primitives/compiled';
import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
import { toolbarInsertBlockMessages as messages } from '../../messages';
import { OutsideClickTargetRefContext } from '../../ui-react';
export const TABLE_SELECTOR_BUTTON_GAP = 2;
export const TABLE_SELECTOR_BUTTON_SIZE = 17;
const MULTIPLICATION_SYMBOL = '×';
const selectedButtonStyles = css({
backgroundColor: "var(--ds-background-accent-blue-subtlest, #E9F2FE)",
border: `${"var(--ds-border-width, 1px)"} solid ${"var(--ds-background-accent-blue-subtle, #669DF1)"}`
});
const buttonStyles = css({
height: `${TABLE_SELECTOR_BUTTON_SIZE}px`,
width: `${TABLE_SELECTOR_BUTTON_SIZE}px`,
border: `${"var(--ds-border-width, 1px)"} solid ${"var(--ds-border, #0B120E24)"}`,
backgroundColor: "var(--ds-background-input, #FFFFFF)",
// eslint-disable-next-line @atlaskit/design-system/no-unsafe-design-token-usage
borderRadius: "var(--ds-radius-small, 3px)",
cursor: 'pointer',
display: 'block',
'&:focus': {
outline: 'none',
border: `${"var(--ds-border-width, 1px)"} solid ${"var(--ds-border-focused, #4688EC)"}`,
boxShadow: `0 0 0 0.5px ${"var(--ds-border-focused, #4688EC)"}`
}
});
const selectionSizeTextStyles = css({
// eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
lineHeight: '14px',
display: 'flex',
justifyContent: 'center',
marginTop: "var(--ds-space-075, 6px)",
padding: "var(--ds-space-075, 6px)"
});
const TableSelectorButton = ({
row,
col,
isActive,
onClick,
label,
onKeyDown,
isFocused,
handleInitialButtonFocus
}) => {
const btnRef = useRef(null);
useEffect(() => {
if (btnRef.current) {
if (isFocused) {
btnRef.current.focus({
preventScroll: editorExperiment('platform_editor_controls', 'variant1') ? true : undefined
});
} else {
btnRef.current.blur();
}
}
}, [isFocused, btnRef]);
const handleFocus = col === 1 && row === 1 ? () => handleInitialButtonFocus() : undefined;
return jsx("button", {
type: "button",
css: [buttonStyles, isActive ? selectedButtonStyles : undefined],
onClick: () => onClick(row, col),
"aria-label": label,
onKeyDown: onKeyDown,
ref: btnRef,
onFocus: handleFocus
});
};
const createArray = (maxCols, maxRows) => {
const arr = [];
for (let i = 1; i < maxRows + 1; i++) {
for (let j = 1; j < maxCols + 1; j++) {
arr.push({
col: j,
row: i
});
}
}
return arr;
};
const gridWrapperStyles = ({
maxCols,
maxRows
}) => css({
display: 'grid',
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
gridTemplateColumns: `repeat(${maxCols}, 1fr)`,
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
gridTemplateRows: `repeat(${maxRows}, 1fr)`,
gap: `${"var(--ds-space-025, 2px)"}`
});
const TableSelectorPopup = ({
maxCols,
maxRows,
onSelection,
selectedCol,
selectedRow,
onKeyDown,
isFocused,
handleInitialButtonFocus,
intl: {
formatMessage
}
}) => {
const buttons = useMemo(() => {
return createArray(maxCols, maxRows);
}, [maxCols, maxRows]);
const setOutsideClickTargetRef = useContext(OutsideClickTargetRefContext);
return jsx(Stack, {
ref: setOutsideClickTargetRef
}, jsx("div", {
"aria-label": `${formatMessage(messages.tableSizeSelectorPopup)}`,
css:
// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
gridWrapperStyles({
maxCols: maxCols,
maxRows: maxRows
})
}, buttons.map(({
col,
row
}, index) => {
const isCurrentFocused = isFocused && selectedCol === col && selectedRow === row;
const isActive = selectedCol >= col && selectedRow >= row ? true : false;
return jsx(TableSelectorButton
// Ignored via go/ees005
// eslint-disable-next-line react/no-array-index-key
, {
key: index,
isActive: isActive,
col: col,
row: row,
onClick: onSelection,
label: `${formatMessage(messages.tableSizeSelectorButton, {
numberOfColumns: col,
numberOfRows: row
})}`,
onKeyDown: onKeyDown,
isFocused: isCurrentFocused,
handleInitialButtonFocus: handleInitialButtonFocus
});
})), jsx("span", {
css: selectionSizeTextStyles,
"aria-hidden": true
}, `${selectedCol} ${MULTIPLICATION_SYMBOL} ${selectedRow}`));
};
const _default_1 = injectIntl(TableSelectorPopup);
export default _default_1;