@atlaskit/editor-plugin-media
Version:
Media plugin for @atlaskit/editor-core
226 lines (223 loc) • 8.07 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _react = require("react");
var _react2 = require("@emotion/react");
var _icons = require("@atlaskit/editor-common/icons");
var _styles = require("@atlaskit/editor-common/styles");
var _ui = require("@atlaskit/editor-common/ui");
var _uiColor = require("@atlaskit/editor-common/ui-color");
var _uiMenu = require("@atlaskit/editor-common/ui-menu");
var _editorPalette = require("@atlaskit/editor-palette");
var _chevronDown = _interopRequireDefault(require("@atlaskit/icon/glyph/chevron-down"));
var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
var _messages = require("./messages");
var _styles2 = require("./styles");
/** @jsx jsx */
var ImageBorder = function ImageBorder(_ref) {
var formatMessage = _ref.intl.formatMessage,
toggleBorder = _ref.toggleBorder,
borderMark = _ref.borderMark,
setBorder = _ref.setBorder;
var popupTarget = (0, _react.useRef)(null);
var enabled = !!borderMark;
var color = borderMark === null || borderMark === void 0 ? void 0 : borderMark.color;
var size = borderMark === null || borderMark === void 0 ? void 0 : borderMark.size;
var _useState = (0, _react.useState)(false),
_useState2 = (0, _slicedToArray2.default)(_useState, 2),
isOpen = _useState2[0],
setIsOpen = _useState2[1];
var _useState3 = (0, _react.useState)(false),
_useState4 = (0, _slicedToArray2.default)(_useState3, 2),
isColorSubmenuOpen = _useState4[0],
setIsColorSubmenuOpen = _useState4[1];
var _useState5 = (0, _react.useState)(false),
_useState6 = (0, _slicedToArray2.default)(_useState5, 2),
isSizeSubmenuOpen = _useState6[0],
setIsSizeSubmenuOpen = _useState6[1];
var handleSubMenuRef = function handleSubMenuRef(ref) {
if (!ref) {
return;
}
var rect = ref.getBoundingClientRect();
if (rect.left + rect.width > window.innerWidth) {
ref.style.left = "-".concat(rect.width, "px");
}
};
var borderSizeOptions = [{
name: formatMessage(_messages.messages.borderSizeSubtle),
value: 1
}, {
name: formatMessage(_messages.messages.borderSizeMedium),
value: 2
}, {
name: formatMessage(_messages.messages.borderSizeBold),
value: 3
}];
var items = [{
content: formatMessage(_messages.messages.borderColor),
value: {
name: 'color'
},
elemAfter: (0, _react2.jsx)("div", {
className: _styles.DropdownMenuSharedCssClassName.SUBMENU
}, (0, _react2.jsx)("div", {
css: (0, _styles2.contextualMenuColorIcon)(color && (0, _editorPalette.hexToEditorBorderPaletteColor)(color))
}), isColorSubmenuOpen && (0, _react2.jsx)("div", {
css: (0, _styles2.contextualSubMenu)(0),
ref: handleSubMenuRef
}, (0, _react2.jsx)(_uiColor.ColorPalette, {
onClick: function onClick(color) {
setBorder({
color: color
});
setIsOpen(!isOpen);
},
selectedColor: color !== null && color !== void 0 ? color : null,
paletteOptions: {
palette: _uiColor.borderColorPalette,
paletteColorTooltipMessages: _uiColor.borderPaletteTooltipMessages,
hexToPaletteColor: _editorPalette.hexToEditorBorderPaletteColor
}
})))
}, {
content: formatMessage(_messages.messages.borderSize),
value: {
name: 'size'
},
elemAfter: (0, _react2.jsx)("div", {
className: _styles.DropdownMenuSharedCssClassName.SUBMENU
}, (0, _react2.jsx)("div", {
css: _styles2.contextualMenuArrow
}), isSizeSubmenuOpen && (0, _react2.jsx)("div", {
css: (0, _styles2.contextualSubMenu)(1),
ref: handleSubMenuRef
}, borderSizeOptions.map(function (_ref2, idx) {
var name = _ref2.name,
value = _ref2.value;
return (0, _react2.jsx)(_tooltip.default, {
key: idx,
content: name
}, (0, _react2.jsx)("span", {
css: _styles2.buttonWrapperStyle
}, (0, _react2.jsx)("button", {
css: (0, _styles2.buttonStyle)(value === size),
"aria-label": name,
role: "radio",
"aria-checked": value === size,
onClick: function onClick() {
setBorder({
size: value
});
setIsOpen(false);
},
onMouseDown: function onMouseDown(e) {
e.preventDefault();
}
}, (0, _react2.jsx)("div", {
css: (0, _styles2.line)(value, value === size),
role: "presentation"
}))));
})))
}];
/**
* We want to change direction of our dropdowns a bit early,
* not exactly when it hits the boundary.
*/
var fitTolerance = 10;
var fitWidth = _styles2.menuItemDimensions.width;
var fitHeight = items.length * (_styles2.menuItemDimensions.height + _styles2.itemSpacing);
return (0, _react2.jsx)("div", null, (0, _react2.jsx)("div", {
css: (0, _styles2.toolbarButtonWrapper)({
enabled: enabled,
isOpen: isOpen
})
}, (0, _react2.jsx)(_uiMenu.ToolbarButton, {
className: "image-border-toolbar-btn",
selected: enabled,
onClick: toggleBorder,
spacing: "compact",
"aria-label": enabled ? formatMessage(_messages.messages.removeBorder) : formatMessage(_messages.messages.addBorder),
iconBefore: (0, _react2.jsx)(_icons.BorderIcon, {
label: ""
}),
title: enabled ? formatMessage(_messages.messages.removeBorder) : formatMessage(_messages.messages.addBorder)
}), (0, _react2.jsx)("div", {
ref: popupTarget
}, (0, _react2.jsx)(_uiMenu.ToolbarButton, {
className: "image-border-toolbar-dropdown",
selected: enabled || isOpen,
"aria-label": formatMessage(_messages.messages.borderOptions),
title: formatMessage(_messages.messages.borderOptions),
spacing: "compact",
iconBefore: (0, _react2.jsx)(_chevronDown.default, {
label: ""
}),
onClick: function onClick() {
setIsOpen(!isOpen);
}
}))), (0, _react2.jsx)(_ui.Popup, {
target: popupTarget.current ? popupTarget.current : undefined,
fitWidth: fitWidth + fitTolerance,
fitHeight: fitHeight + fitTolerance,
forcePlacement: true,
stick: true
}, (0, _react2.jsx)("div", {
onMouseLeave: function onMouseLeave() {
setIsColorSubmenuOpen(false);
setIsSizeSubmenuOpen(false);
}
}, (0, _react2.jsx)(_uiMenu.DropdownMenu
//This needs be removed when the a11y is completely handled
//Disabling key navigation now as it works only partially
//Same with packages/editor/editor-plugin-table/src/plugins/table/ui/FloatingContextualMenu/ContextualMenu.tsx
, {
arrowKeyNavigationProviderOptions: {
type: _uiMenu.ArrowKeyNavigationType.MENU,
disableArrowKeyNavigation: true
},
items: [{
items: items
}],
isOpen: isOpen,
onOpenChange: function onOpenChange() {
setIsOpen(false);
setIsColorSubmenuOpen(false);
setIsSizeSubmenuOpen(false);
},
onItemActivated: function onItemActivated(_ref3) {
var item = _ref3.item;
if (item.value.name === 'color') {
setIsColorSubmenuOpen(!isColorSubmenuOpen);
}
if (item.value.name === 'size') {
setIsSizeSubmenuOpen(!isSizeSubmenuOpen);
}
},
onMouseEnter: function onMouseEnter(_ref4) {
var item = _ref4.item;
if (item.value.name === 'color') {
setIsColorSubmenuOpen(true);
}
if (item.value.name === 'size') {
setIsSizeSubmenuOpen(true);
}
},
onMouseLeave: function onMouseLeave(_ref5) {
var item = _ref5.item;
if (item.value.name === 'color') {
setIsColorSubmenuOpen(false);
}
if (item.value.name === 'size') {
setIsSizeSubmenuOpen(false);
}
},
fitWidth: fitWidth + fitTolerance,
fitHeight: fitHeight + fitTolerance
}))));
};
var _default = exports.default = ImageBorder;