@atlaskit/editor-plugin-extension
Version:
editor-plugin-extension plugin for @atlaskit/editor-core
61 lines (58 loc) • 2.15 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.formatOptionLabel = void 0;
var _react = require("@emotion/react");
var _avatar = _interopRequireDefault(require("@atlaskit/avatar"));
/**
* @jsxRuntime classic
* @jsx jsx
*/
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled, @typescript-eslint/consistent-type-imports
var itemWrapperStyles = (0, _react.css)({
display: 'flex',
alignItems: 'center',
// eslint-disable-next-line @atlaskit/design-system/no-nested-styles, @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
small: {
margin: 0,
display: 'block',
color: 'currentColor'
}
});
var iconWrapperStyles = (0, _react.css)({
// eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
lineHeight: 1
});
// Adding 4px instead of 3px, since Design tokens supports space sizes in 2 multiples only Ref: https://atlassian.design/components/tokens/all-tokens
var iconWrapperMenuStyles = (0, _react.css)({
alignSelf: 'flex-start',
marginTop: "var(--ds-space-050, 4px)"
});
var getIconSize = function getIconSize(context, description) {
if (context === 'value' || !description) {
return 'xsmall';
}
return 'small';
};
var formatOptionLabel = exports.formatOptionLabel = function formatOptionLabel(_ref, _ref2) {
var label = _ref.label,
icon = _ref.icon,
description = _ref.description;
var context = _ref2.context;
return (0, _react.jsx)("div", {
css: itemWrapperStyles
}, (0, _react.jsx)("span", {
css: [iconWrapperStyles, context === 'menu' && iconWrapperMenuStyles]
}, typeof icon === 'string' ? (0, _react.jsx)(_avatar.default, {
src: icon,
size: getIconSize(context, description),
appearance: "square"
}) : icon), (0, _react.jsx)("div", {
style: {
paddingLeft: icon ? "var(--ds-space-100, 8px)" : "var(--ds-space-0, 0px)"
},
"data-testid": "extension-option-label"
}, label, description && context !== 'value' && (0, _react.jsx)("small", null, description)));
};