UNPKG

@atlaskit/editor-common

Version:

A package that contains common classes and components for editor and renderer

76 lines (72 loc) 2.52 kB
"use strict"; 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 })); })); };