@atlaskit/editor-common
Version:
A package that contains common classes and components for editor and renderer
76 lines (72 loc) • 2.52 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.LinkToolbarButtonGroup = void 0;
var _react = _interopRequireDefault(require("react"));
var _react2 = require("@emotion/react");
var _buttonGroup = _interopRequireDefault(require("@atlaskit/button/button-group"));
var _ui = require("../ui");
/**
* @jsxRuntime classic
* @jsx jsx
*/
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled, @typescript-eslint/consistent-type-imports -- Ignored via go/DSP-18766; jsx required at runtime for @jsxRuntime classic
/**
* Applying `pointer-events: none;` when disabled allows the Tooltip to be displayed
*/
var buttonStyle = (0, _react2.css)({
pointerEvents: 'auto'
});
var buttonStyleNoneEvent = (0, _react2.css)({
pointerEvents: 'none'
});
var DisallowedWrapper = function DisallowedWrapper(_ref) {
var disabled = _ref.disabled,
children = _ref.children;
return (0, _react2.jsx)("div", {
css: disabled ? disallowedWrapperStyle : defaultWrapperStyle
}, children);
};
/**
* The button requires `pointer-events: none;` in order to fix the tooltip, hence
* leaving us without a disabled cursor, the following fixes this:
*/
var defaultWrapperStyle = (0, _react2.css)({
cursor: 'pointer'
});
var disallowedWrapperStyle = (0, _react2.css)({
cursor: 'not-allowed'
});
var LinkToolbarButtonGroup = exports.LinkToolbarButtonGroup = function LinkToolbarButtonGroup(_ref2) {
var options = _ref2.options;
return (0, _react2.jsx)(_buttonGroup.default, null, options.map(function (_ref3) {
var onClick = _ref3.onClick,
selected = _ref3.selected,
disabled = _ref3.disabled,
testId = _ref3.testId,
tooltipContent = _ref3.tooltipContent,
title = _ref3.title,
icon = _ref3.icon,
areAnyNewToolbarFlagsEnabled = _ref3.areAnyNewToolbarFlagsEnabled;
var ButtonIcon = icon;
return (0, _react2.jsx)(DisallowedWrapper, {
key: testId,
disabled: disabled
}, (0, _react2.jsx)(_ui.FloatingToolbarButton, {
css: disabled ? buttonStyleNoneEvent : buttonStyle,
title: title,
icon: (0, _react2.jsx)(ButtonIcon, {
label: title,
spacing: "spacious"
}),
selected: selected,
onClick: onClick,
testId: testId,
disabled: disabled,
tooltipContent: tooltipContent,
areAnyNewToolbarFlagsEnabled: areAnyNewToolbarFlagsEnabled
}));
}));
};