@atlaskit/renderer
Version:
Renderer component
217 lines (212 loc) • 10.1 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = BlockCard;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _react = require("@emotion/react");
var _smartCard = require("@atlaskit/smart-card");
var _ui = require("@atlaskit/editor-common/ui");
var _fallback = require("./fallback");
var _editorSmartLinkDraggable = require("@atlaskit/editor-smart-link-draggable");
var _getCardClickHandler = require("../utils/getCardClickHandler");
var _inlineCard = _interopRequireDefault(require("./inlineCard"));
var _analyticsNext = require("@atlaskit/analytics-next");
var _linkDatasource = require("@atlaskit/link-datasource");
var _ssr = require("@atlaskit/smart-card/ssr");
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
var _utils = require("@atlaskit/editor-common/utils");
var _PortalContext = require("../../ui/Renderer/PortalContext");
var _consts = require("../../consts");
/**
* @jsxRuntime classic
* @jsx jsx
*/
/* eslint-disable @typescript-eslint/consistent-type-imports, @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766; jsx required at runtime for @jsxRuntime classic */
var datasourceCenterWrapperStyles = (0, _react.css)({
marginTop: "var(--ds-space-150, 12px)",
marginBottom: "var(--ds-space-150, 12px)"
});
var datasourceContainerStyleWithMarginTop = (0, _react.css)({
borderRadius: "var(--ds-radius-large, 8px)",
border: "var(--ds-border-width, 1px)".concat(" solid ", "var(--ds-border, #0B120E24)"),
overflow: 'hidden',
marginTop: "var(--ds-space-150, 12px)",
marginBottom: "var(--ds-space-150, 12px)"
});
// No vertical margin when inside center wrapper (wrapper has margin so it participates in collapse). Styles from datasourceContainerStyleLegacy
var datasourceContainerStyleNoVerticalMargin = (0, _react.css)({
borderRadius: "var(--ds-radius-large, 8px)",
border: "var(--ds-border-width, 1px)".concat(" solid ", "var(--ds-border, #0B120E24)"),
overflow: 'hidden'
});
var datasourceContainerStyleLegacy = (0, _react.css)({
borderRadius: "var(--ds-radius-large, 8px)",
border: "var(--ds-border-width, 1px)".concat(" solid ", "var(--ds-border, #0B120E24)"),
overflow: 'hidden',
// eslint-disable-next-line @atlaskit/design-system/use-tokens-space
marginLeft: '50%',
marginBottom: "var(--ds-space-150, 12px)",
transform: 'translateX(-50%)',
marginTop: "var(--ds-space-150, 12px)"
});
function BlockCard(props) {
var url = props.url,
data = props.data,
eventHandlers = props.eventHandlers,
smartLinks = props.smartLinks,
isNodeNested = props.isNodeNested,
localId = props.localId,
onSetLinkTarget = props.onSetLinkTarget;
var portal = (0, _PortalContext.usePortal)(props);
var _ref = smartLinks || {},
actionOptions = _ref.actionOptions;
var onClick = (0, _getCardClickHandler.getCardClickHandler)(eventHandlers, url);
var platform = 'web';
var cardProps = {
url: url,
data: data,
onClick: onClick,
container: portal,
isDatasource: !!props.datasource,
actionOptions: actionOptions,
CompetitorPrompt: smartLinks === null || smartLinks === void 0 ? void 0 : smartLinks.CompetitorPrompt
};
var analyticsData = {
attributes: {
location: 'renderer'
},
// Below is added for the future implementation of Linking Platform namespaced analytic context
location: 'renderer'
};
var onError = function onError(_ref2) {
var err = _ref2.err;
if (err) {
throw err;
}
};
if (props.datasource) {
var views = props.datasource.views;
var tableView = views.find(function (view) {
return view.type === 'table';
});
var shouldRenderDatasource = tableView && (0, _utils.canRenderDatasource)(props.datasource.id);
if (shouldRenderDatasource) {
var _tableView$properties;
var columns = (_tableView$properties = tableView.properties) === null || _tableView$properties === void 0 ? void 0 : _tableView$properties.columns;
var visibleColumnKeys = columns === null || columns === void 0 ? void 0 : columns.map(function (_ref3) {
var key = _ref3.key;
return key;
});
// eslint-disable-next-line @atlassian/perf-linting/no-expensive-computations-in-render -- Ignored via go/ees017 (to be fixed)
var columnCustomSizesEntries = columns === null || columns === void 0 ? void 0 : columns.filter(function (c) {
return !!c.width;
}).map(function (_ref4) {
var key = _ref4.key,
width = _ref4.width;
return [key, width];
});
var columnCustomSizes = columnCustomSizesEntries !== null && columnCustomSizesEntries !== void 0 && columnCustomSizesEntries.length ? Object.fromEntries(columnCustomSizesEntries) : undefined;
// eslint-disable-next-line @atlassian/perf-linting/no-expensive-computations-in-render -- Ignored via go/ees017 (to be fixed)
var wrappedColumnKeys = columns === null || columns === void 0 ? void 0 : columns.filter(function (c) {
return c.isWrapped;
}).map(function (c) {
return c.key;
});
var datasource = props.datasource,
layout = props.layout;
return (0, _react.jsx)(_analyticsNext.AnalyticsContext, {
data: analyticsData
}, (0, _react.jsx)(_fallback.CardErrorBoundary, (0, _extends2.default)({
unsupportedComponent: _ui.UnsupportedInline,
datasourceId: props.datasource.id,
onSetLinkTarget: onSetLinkTarget
// Ignored via go/ees005
// eslint-disable-next-line react/jsx-props-no-spreading
}, cardProps), (0, _react.jsx)(_ui.WidthConsumer, null, function (_ref5) {
var width = _ref5.width;
var useStickySafeCentering = (0, _expValEquals.expValEquals)('platform_editor_flex_based_centering', 'isEnabled', true);
var useCenterWrapper = !isNodeNested && useStickySafeCentering;
var datasourceDiv = (0, _react.jsx)("div", {
css: useCenterWrapper ? datasourceContainerStyleNoVerticalMargin : useStickySafeCentering ? datasourceContainerStyleWithMarginTop : datasourceContainerStyleLegacy,
"data-testid": "renderer-datasource-table",
"data-local-id": localId,
style: {
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
width: isNodeNested ? '100%' : (0, _utils.calcBreakoutWidth)(layout, width)
}
}, (0, _react.jsx)(_linkDatasource.DatasourceTableView, {
datasourceId: datasource.id,
parameters: datasource.parameters,
visibleColumnKeys: visibleColumnKeys,
columnCustomSizes: columnCustomSizes,
wrappedColumnKeys: wrappedColumnKeys && wrappedColumnKeys.length > 0 ? wrappedColumnKeys : undefined,
url: url
}));
return useCenterWrapper ? (0, _react.jsx)("div", {
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
className: _consts.RendererCssClassName.BLOCK_CARD_DATASOURCE_CENTER_WRAPPER + ' ' + _consts.RendererCssClassName.FLEX_CENTER_WRAPPER,
css: datasourceCenterWrapperStyles
}, datasourceDiv) : datasourceDiv;
})));
}
return (0, _react.jsx)(_inlineCard.default, {
data: data,
url: url
});
}
var cardComponent;
if (smartLinks !== null && smartLinks !== void 0 && smartLinks.ssr && url && (
// Clean up feature gates when both are fully rolled out.
// - platform_ssr_smartlink_cards: Controls SSR smart links for confluence (100% rolled out)
// - jfp-magma-ssr-iv-editor-links: Controls SSR smart links for jira (at time of comment: 50% rolled out)
// Once both gates are 100% rolled out, remove this condition entirely and make
// smart link SSR behavior the default.
// NOTE: This is a temporary solution to allow for the gradual rollout of SSR smart links for jira and keep it
// fully rolled out for confluence since both gates target different products keep only one gate to control the behavior
// isnt correct.
(0, _platformFeatureFlags.fg)('platform_ssr_smartlink_cards') || (0, _platformFeatureFlags.fg)('jfp-magma-ssr-iv-editor-links'))) {
cardComponent = (0, _react.jsx)(_ssr.CardSSR, (0, _extends2.default)({
appearance: "block",
platform: platform
// Ignored via go/ees005
// eslint-disable-next-line react/jsx-props-no-spreading
}, cardProps, {
url: url,
onError: onError,
hideIconLoadingSkeleton: true
}));
} else {
cardComponent = (0, _react.jsx)(_smartCard.Card, (0, _extends2.default)({
appearance: "block",
platform: platform
// Ignored via go/ees005
// eslint-disable-next-line react/jsx-props-no-spreading
}, cardProps, {
onError: onError
}));
}
return (0, _react.jsx)(_editorSmartLinkDraggable.SmartLinkDraggable, {
url: url || '',
appearance: _editorSmartLinkDraggable.SMART_LINK_APPEARANCE.BLOCK,
source: _editorSmartLinkDraggable.SMART_LINK_DRAG_TYPES.RENDERER
}, (0, _react.jsx)(_analyticsNext.AnalyticsContext, {
data: analyticsData
}, (0, _react.jsx)("div", {
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
className: "blockCardView-content-wrap",
"data-block-card": true
// eslint-disable-next-line @atlassian/perf-linting/no-expensive-computations-in-render -- Ignored via go/ees017 (to be fixed)
,
"data-card-data": data ? JSON.stringify(data) : undefined,
"data-card-url": url,
"data-local-id": localId
}, (0, _react.jsx)(_fallback.CardErrorBoundary, (0, _extends2.default)({
unsupportedComponent: _ui.UnsupportedBlock,
onSetLinkTarget: onSetLinkTarget
// Ignored via go/ees005
// eslint-disable-next-line react/jsx-props-no-spreading
}, cardProps), cardComponent))));
}