@atlaskit/editor-common
Version:
A package that contains common classes and components for editor and renderer
80 lines (76 loc) • 3.18 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = EmptyState;
var _react = require("react");
var _react2 = require("@emotion/react");
var _reactIntl = require("react-intl");
var _new = require("@atlaskit/button/new");
var _primitives = require("@atlaskit/primitives");
var _NotFoundIllustration = _interopRequireDefault(require("./NotFoundIllustration"));
/**
* @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
function EmptyState(_ref) {
var onExternalLinkClick = _ref.onExternalLinkClick,
focusOnEmptyStateButton = _ref.focusOnEmptyStateButton;
var buttonRef = (0, _react.useRef)(null);
(0, _react.useEffect)(function () {
if (focusOnEmptyStateButton && buttonRef.current) {
buttonRef.current.focus();
}
}, [focusOnEmptyStateButton]);
return (0, _react2.jsx)("div", {
css: emptyStateWrapper,
"data-testid": "empty-state-wrapper"
}, (0, _react2.jsx)(_NotFoundIllustration.default, null), (0, _react2.jsx)("div", {
css: emptyStateHeading
}, (0, _react2.jsx)(_reactIntl.FormattedMessage, {
id: "fabric.editor.elementbrowser.search.empty-state.heading",
defaultMessage: "Nothing matches your search",
description: "Empty state heading"
})), (0, _react2.jsx)("div", {
css: emptyStateSubHeading
}, (0, _react2.jsx)(_primitives.Text, null, (0, _react2.jsx)(_reactIntl.FormattedMessage, {
id: "fabric.editor.elementbrowser.search.empty-state.sub-heading",
defaultMessage: "Try searching with a different term or discover new apps for Atlassian products.",
description: "Empty state sub-heading"
})), (0, _react2.jsx)(_primitives.Box, {
xcss: externalLinkWrapper
}, (0, _react2.jsx)(_new.LinkButton, {
appearance: "primary",
target: "_blank",
ref: buttonRef,
href: "https://marketplace.atlassian.com/search?category=Macros&hosting=cloud&product=confluence",
onClick: onExternalLinkClick
}, (0, _react2.jsx)(_reactIntl.FormattedMessage, {
id: "fabric.editor.elementbrowser.search.empty-state.sub-heading.link",
defaultMessage: "Explore Atlassian Marketplace",
description: "Empty state sub-heading external link"
})))));
}
var emptyStateHeading = (0, _react2.css)({
font: "var(--ds-font-heading-medium, normal 653 20px/24px \"Atlassian Sans\", ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)",
color: "var(--ds-text, #292A2E)",
marginTop: "var(--ds-space-300, 24px)"
});
var emptyStateSubHeading = (0, _react2.css)({
marginTop: "var(--ds-space-200, 16px)",
maxWidth: '400px',
textAlign: 'center'
});
var emptyStateWrapper = (0, _react2.css)({
display: 'flex',
flexDirection: 'column',
justifyContent: 'center',
alignItems: 'center',
width: '100%'
});
var externalLinkWrapper = (0, _primitives.xcss)({
marginTop: 'space.150'
});