@atlaskit/editor-plugin-extension
Version:
editor-plugin-extension plugin for @atlaskit/editor-core
167 lines (163 loc) • 6.24 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _react = require("react");
var _react2 = require("@emotion/react");
var _reactIntl = require("react-intl");
var _new = require("@atlaskit/button/new");
var _extensions = require("@atlaskit/editor-common/extensions");
var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
var _cross = _interopRequireDefault(require("@atlaskit/icon/core/cross"));
var _primitives = require("@atlaskit/primitives");
var _HelpLink = require("./HelpLink");
/**
* @jsxRuntime classic
* @jsx jsx
*/
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
// eslint-disable-next-line @atlaskit/design-system/no-emotion-primitives -- to be migrated to @atlaskit/primitives/compiled – go/akcss
var iconWidth = 40;
var buttonWidth = 40;
var margin = 16;
var gapSizeForEllipsis = iconWidth + buttonWidth + margin * 2;
var itemStyles = (0, _react2.css)({
display: 'flex',
marginBottom: "var(--ds-space-300, 24px)"
});
var itemIconStyles = (0, _react2.css)({
width: iconWidth,
height: iconWidth,
overflow: 'hidden',
border: "var(--ds-border-width, 1px)".concat(" solid ", "var(--ds-border, #0B120E24)"),
borderRadius: "var(--ds-radius-small, 3px)",
boxSizing: 'border-box',
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
// eslint-disable-next-line @atlaskit/design-system/no-nested-styles, @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
div: {
width: iconWidth,
height: iconWidth
}
});
var itemBodyStyles = (0, _react2.css)({
display: 'flex',
flexDirection: 'row',
flexWrap: 'nowrap',
justifyContent: 'space-between',
// eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
lineHeight: 1.4,
margin: "0 ".concat("var(--ds-space-200, 16px)"),
flexGrow: 3,
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
maxWidth: "calc(100% - ".concat(gapSizeForEllipsis, "px)")
});
var centeredItemTitleStyles = (0, _react2.css)({
display: 'flex',
flexDirection: 'column',
justifyContent: 'center'
});
var itemTextStyles = (0, _react2.css)({
maxWidth: '100%',
whiteSpace: 'initial',
// eslint-disable-next-line @atlaskit/design-system/no-nested-styles, @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
itemSummary: {
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
fontSize: (0, _editorSharedStyles.relativeFontSizeToBase16)(11.67),
color: "var(--ds-text-subtlest, #6B6E76)",
marginTop: "var(--ds-space-050, 4px)",
whiteSpace: 'nowrap',
overflow: 'hidden',
textOverflow: 'ellipsis'
}
});
var descriptionStyles = (0, _primitives.xcss)({
marginBottom: 'space.300'
});
var helpLinkStyles = (0, _primitives.xcss)({
paddingTop: 'space.150'
});
var closeButtonWrapperStyles = (0, _react2.css)({
width: buttonWidth,
textAlign: 'right'
});
var Header = function Header(_ref) {
var icon = _ref.icon,
title = _ref.title,
description = _ref.description,
summary = _ref.summary,
deprecation = _ref.deprecation,
documentationUrl = _ref.documentationUrl,
enableHelpCTA = _ref.enableHelpCTA,
onClose = _ref.onClose,
intl = _ref.intl;
var ResolvedIcon = (0, _react.useMemo)(function () {
return /*#__PURE__*/(0, _react.lazy)(function () {
return icon().then(function (Cmp) {
if ('default' in Cmp) {
return Cmp;
}
return {
default: Cmp
};
});
});
}, [icon]);
return (0, _react2.jsx)(_react.Fragment, null, (0, _react2.jsx)("div", {
css: itemStyles
}, (0, _react2.jsx)("div", {
css: itemIconStyles
}, (0, _react2.jsx)(_react.Suspense, {
fallback: null
}, (0, _react2.jsx)(ResolvedIcon, {
label: title
}))), (0, _react2.jsx)("div", {
css: itemBodyStyles
}, summary ? (0, _react2.jsx)("div", {
css: itemTextStyles
}, (0, _react2.jsx)("div", {
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
className: "item-title",
id: "context-panel-title",
"data-testid": "context-panel-title"
}, title), (0, _react2.jsx)("div", {
className: "item-summary"
}, summary)) : (0, _react2.jsx)("div", {
css: centeredItemTitleStyles,
id: "context-panel-title",
"data-testid": "context-panel-title"
}, title)), (0, _react2.jsx)("div", {
css: closeButtonWrapperStyles
}, (0, _react2.jsx)(_new.IconButton, {
appearance: "subtle",
testId: "config-panel-header-close-button",
label: intl.formatMessage(_extensions.configPanelMessages.close),
icon: _cross.default,
onClick: onClose
}))), (description || documentationUrl) && (0, _react2.jsx)(_primitives.Box, {
xcss: descriptionStyles
}, (0, _react2.jsx)(_primitives.Text, {
as: "p",
testId: "config-panel-header-description"
}, description && (0, _react2.jsx)(_react.Fragment, null,
// Ignored via go/ees005
// eslint-disable-next-line require-unicode-regexp
description.replace(/([^.])$/, '$1.'), ' '), (deprecation === null || deprecation === void 0 ? void 0 : deprecation.isDeprecated) && (deprecation === null || deprecation === void 0 ? void 0 : deprecation.message) && (0, _react2.jsx)(_primitives.Box, {
paddingBlockStart: "space.150"
}, deprecation.message), documentationUrl && (enableHelpCTA ? (0, _react2.jsx)(_primitives.Box, {
xcss: helpLinkStyles
}, (0, _react2.jsx)(_primitives.Text, {
as: "p"
}, (0, _react2.jsx)(_HelpLink.HelpLink, {
documentationUrl: documentationUrl,
label: intl.formatMessage(_extensions.configPanelMessages.help)
}))) : (0, _react2.jsx)(_HelpLink.HelpLink, {
documentationUrl: documentationUrl,
label: intl.formatMessage(_extensions.configPanelMessages.documentation)
})))));
};
var _default_1 = (0, _reactIntl.injectIntl)(Header);
var _default = exports.default = _default_1;