@atlaskit/editor-plugin-text-formatting
Version:
Text-formatting plugin for @atlaskit/editor-core
65 lines (62 loc) • 2.57 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.DropdownToolbarButton = void 0;
var _react = _interopRequireDefault(require("react"));
var _react2 = require("@emotion/react");
var _styles = require("@atlaskit/editor-common/styles");
var _uiMenu = require("@atlaskit/editor-common/ui-menu");
var _chevronDown = _interopRequireDefault(require("@atlaskit/icon/core/chevron-down"));
var _textItalic = _interopRequireDefault(require("@atlaskit/icon/core/text-italic"));
var _types = require("./types");
/**
* @jsxRuntime classic
* @jsx jsx
*/
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled, @typescript-eslint/consistent-type-imports
var DropdownToolbarButton = exports.DropdownToolbarButton = function DropdownToolbarButton(_ref) {
var label = _ref.label,
isReducedSpacing = _ref.isReducedSpacing,
isDisabled = _ref.isDisabled,
isSelected = _ref.isSelected,
ariaExpanded = _ref['aria-expanded'],
onClick = _ref.onClick,
onKeyDown = _ref.onKeyDown,
toolbarType = _ref.toolbarType,
iconBefore = _ref.iconBefore,
activeIconName = _ref.activeIconName;
var reducedSpacing = toolbarType === _types.ToolbarType.FLOATING ? 'compact' : 'none';
return (0, _react2.jsx)(_uiMenu.ToolbarButton
// eslint-disable-next-line @atlaskit/design-system/no-unsafe-style-overrides, @atlaskit/ui-styling-standard/no-imported-style-values
, {
css: _styles.disableBlueBorderStyles,
testId: 'ak-editor-selection-toolbar-format-text-button',
spacing: isReducedSpacing ? reducedSpacing : 'default',
disabled: isDisabled,
selected: isSelected,
"aria-label": label,
"aria-expanded": ariaExpanded,
"aria-haspopup": true,
title: label,
onClick: onClick,
onKeyDown: onKeyDown,
iconBefore: (0, _react2.jsx)("div", {
css:
// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values
_styles.triggerWrapperStylesWithPadding,
"data-testid": activeIconName ? "editor-toolbar__".concat(activeIconName) : undefined
}, iconBefore ? iconBefore : (0, _react2.jsx)(_textItalic.default, {
color: "currentColor",
spacing: "spacious",
label: ""
}), (0, _react2.jsx)("span", {
css: _styles.expandIconContainerStyle
}, (0, _react2.jsx)(_chevronDown.default, {
label: "",
color: "currentColor",
size: "small"
})))
});
};