@atlaskit/editor-plugin-insert-block
Version:
Insert block plugin for @atlaskit/editor-core
61 lines (60 loc) • 3.47 kB
JavaScript
"use strict";
var _typeof = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.TableSizePicker = void 0;
var _react = _interopRequireWildcard(require("react"));
var _reactIntl = require("react-intl");
var _messages = require("@atlaskit/editor-common/messages");
var _toolbar = require("@atlaskit/editor-common/toolbar");
var _editorToolbar = require("@atlaskit/editor-toolbar");
var _useTableSelectorPopup = require("./hooks/useTableSelectorPopup");
var _TableSelectorPopupWrapper = require("./popups/TableSelectorPopupWrapper");
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
var TableSizePicker = exports.TableSizePicker = function TableSizePicker(_ref) {
var api = _ref.api,
tableSelectorSupported = _ref.tableSelectorSupported;
var _useIntl = (0, _reactIntl.useIntl)(),
formatMessage = _useIntl.formatMessage;
var tableSizePickerRef = (0, _react.useRef)(null);
var _useToolbarUI = (0, _editorToolbar.useToolbarUI)(),
popupsMountPoint = _useToolbarUI.popupsMountPoint,
popupsBoundariesElement = _useToolbarUI.popupsBoundariesElement,
popupsScrollableElement = _useToolbarUI.popupsScrollableElement;
var tableSelectorPopup = (0, _useTableSelectorPopup.useTableSelectorPopup)({
api: api,
buttonRef: tableSizePickerRef
});
if (!(api !== null && api !== void 0 && api.table) || !tableSelectorSupported) {
return null;
}
var onClick = function onClick(event) {
if (event.detail === 0) {
tableSelectorPopup.handleKeyboardOpen(event);
}
tableSelectorPopup.toggle();
};
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_TableSelectorPopupWrapper.TableSelectorPopupWrapper, {
isOpen: tableSelectorPopup.isOpen,
targetRef: tableSizePickerRef,
isOpenedByKeyboard: tableSelectorPopup.isOpenedByKeyboard,
onSelection: tableSelectorPopup.handleSelectedTableSize,
onClickOutside: tableSelectorPopup.handleClickOutside,
onEscapeKeydown: tableSelectorPopup.handleEscapeKeydown,
onUnmount: tableSelectorPopup.onPopupUnmount,
popupsMountPoint: popupsMountPoint,
popupsBoundariesElement: popupsBoundariesElement,
popupsScrollableElement: popupsScrollableElement
}), /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarTooltip, {
content: formatMessage(_messages.toolbarInsertBlockMessages.tableSelector)
}, /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarButton, {
iconBefore: /*#__PURE__*/_react.default.createElement(_editorToolbar.MoreItemsIcon, {
label: formatMessage(_messages.toolbarInsertBlockMessages.tableSelector)
}),
onClick: onClick,
isSelected: tableSelectorPopup.isOpen,
ref: tableSizePickerRef,
testId: _toolbar.TOOLBAR_BUTTON_TEST_ID.TABLE_SELECTOR
})));
};