@atlaskit/editor-common
Version:
A package that contains common classes and components for editor and renderer
163 lines (160 loc) • 6.02 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = exports.TABLE_SELECTOR_BUTTON_SIZE = exports.TABLE_SELECTOR_BUTTON_GAP = void 0;
var _react = require("react");
var _react2 = require("@emotion/react");
var _reactIntl = require("react-intl");
var _compiled = require("@atlaskit/primitives/compiled");
var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
var _messages = require("../../messages");
var _uiReact = require("../../ui-react");
/**
* @jsxRuntime classic
* @jsx jsx
*/
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
var TABLE_SELECTOR_BUTTON_GAP = exports.TABLE_SELECTOR_BUTTON_GAP = 2;
var TABLE_SELECTOR_BUTTON_SIZE = exports.TABLE_SELECTOR_BUTTON_SIZE = 17;
var MULTIPLICATION_SYMBOL = '×';
var selectedButtonStyles = (0, _react2.css)({
backgroundColor: "var(--ds-background-accent-blue-subtlest, #E9F2FE)",
border: "var(--ds-border-width, 1px)".concat(" solid ", "var(--ds-background-accent-blue-subtle, #669DF1)")
});
var buttonStyles = (0, _react2.css)({
height: "".concat(TABLE_SELECTOR_BUTTON_SIZE, "px"),
width: "".concat(TABLE_SELECTOR_BUTTON_SIZE, "px"),
border: "var(--ds-border-width, 1px)".concat(" 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)".concat(" solid ", "var(--ds-border-focused, #4688EC)"),
boxShadow: "0 0 0 0.5px ".concat("var(--ds-border-focused, #4688EC)")
}
});
var selectionSizeTextStyles = (0, _react2.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)"
});
var TableSelectorButton = function TableSelectorButton(_ref) {
var row = _ref.row,
col = _ref.col,
isActive = _ref.isActive,
_onClick = _ref.onClick,
label = _ref.label,
onKeyDown = _ref.onKeyDown,
isFocused = _ref.isFocused,
handleInitialButtonFocus = _ref.handleInitialButtonFocus;
var btnRef = (0, _react.useRef)(null);
(0, _react.useEffect)(function () {
if (btnRef.current) {
if (isFocused) {
btnRef.current.focus({
preventScroll: (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') ? true : undefined
});
} else {
btnRef.current.blur();
}
}
}, [isFocused, btnRef]);
var handleFocus = col === 1 && row === 1 ? function () {
return handleInitialButtonFocus();
} : undefined;
return (0, _react2.jsx)("button", {
type: "button",
css: [buttonStyles, isActive ? selectedButtonStyles : undefined],
onClick: function onClick() {
return _onClick(row, col);
},
"aria-label": label,
onKeyDown: onKeyDown,
ref: btnRef,
onFocus: handleFocus
});
};
var createArray = function createArray(maxCols, maxRows) {
var arr = [];
for (var i = 1; i < maxRows + 1; i++) {
for (var j = 1; j < maxCols + 1; j++) {
arr.push({
col: j,
row: i
});
}
}
return arr;
};
var gridWrapperStyles = function gridWrapperStyles(_ref2) {
var maxCols = _ref2.maxCols,
maxRows = _ref2.maxRows;
return (0, _react2.css)({
display: 'grid',
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
gridTemplateColumns: "repeat(".concat(maxCols, ", 1fr)"),
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
gridTemplateRows: "repeat(".concat(maxRows, ", 1fr)"),
gap: "var(--ds-space-025, 2px)"
});
};
var TableSelectorPopup = function TableSelectorPopup(_ref3) {
var maxCols = _ref3.maxCols,
maxRows = _ref3.maxRows,
onSelection = _ref3.onSelection,
selectedCol = _ref3.selectedCol,
selectedRow = _ref3.selectedRow,
onKeyDown = _ref3.onKeyDown,
isFocused = _ref3.isFocused,
handleInitialButtonFocus = _ref3.handleInitialButtonFocus,
formatMessage = _ref3.intl.formatMessage;
var buttons = (0, _react.useMemo)(function () {
return createArray(maxCols, maxRows);
}, [maxCols, maxRows]);
var setOutsideClickTargetRef = (0, _react.useContext)(_uiReact.OutsideClickTargetRefContext);
return (0, _react2.jsx)(_compiled.Stack, {
ref: setOutsideClickTargetRef
}, (0, _react2.jsx)("div", {
"aria-label": "".concat(formatMessage(_messages.toolbarInsertBlockMessages.tableSizeSelectorPopup)),
css:
// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
gridWrapperStyles({
maxCols: maxCols,
maxRows: maxRows
})
}, buttons.map(function (_ref4, index) {
var col = _ref4.col,
row = _ref4.row;
var isCurrentFocused = isFocused && selectedCol === col && selectedRow === row;
var isActive = selectedCol >= col && selectedRow >= row ? true : false;
return (0, _react2.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: "".concat(formatMessage(_messages.toolbarInsertBlockMessages.tableSizeSelectorButton, {
numberOfColumns: col,
numberOfRows: row
})),
onKeyDown: onKeyDown,
isFocused: isCurrentFocused,
handleInitialButtonFocus: handleInitialButtonFocus
});
})), (0, _react2.jsx)("span", {
css: selectionSizeTextStyles,
"aria-hidden": true
}, "".concat(selectedCol, " ").concat(MULTIPLICATION_SYMBOL, " ").concat(selectedRow)));
};
var _default_1 = (0, _reactIntl.injectIntl)(TableSelectorPopup);
var _default = exports.default = _default_1;