@atlaskit/renderer
Version:
Renderer component
209 lines (206 loc) • 9.4 kB
JavaScript
import _extends from "@babel/runtime/helpers/extends";
/**
* @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 */
import { jsx, css } from '@emotion/react';
import { Card } from '@atlaskit/smart-card';
import { UnsupportedBlock, UnsupportedInline, WidthConsumer } from '@atlaskit/editor-common/ui';
import { CardErrorBoundary } from './fallback';
import { SmartLinkDraggable, SMART_LINK_DRAG_TYPES, SMART_LINK_APPEARANCE } from '@atlaskit/editor-smart-link-draggable';
import { getCardClickHandler } from '../utils/getCardClickHandler';
import InlineCard from './inlineCard';
import { AnalyticsContext } from '@atlaskit/analytics-next';
import { DatasourceTableView } from '@atlaskit/link-datasource';
import { CardSSR } from '@atlaskit/smart-card/ssr';
import { fg } from '@atlaskit/platform-feature-flags';
import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
import { calcBreakoutWidth, canRenderDatasource } from '@atlaskit/editor-common/utils';
import { usePortal } from '../../ui/Renderer/PortalContext';
import { RendererCssClassName } from '../../consts';
var datasourceCenterWrapperStyles = css({
marginTop: "var(--ds-space-150, 12px)",
marginBottom: "var(--ds-space-150, 12px)"
});
var datasourceContainerStyleWithMarginTop = 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 = css({
borderRadius: "var(--ds-radius-large, 8px)",
border: "var(--ds-border-width, 1px)".concat(" solid ", "var(--ds-border, #0B120E24)"),
overflow: 'hidden'
});
var datasourceContainerStyleLegacy = 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)"
});
export default 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 = usePortal(props);
var _ref = smartLinks || {},
actionOptions = _ref.actionOptions;
var onClick = 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 && 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 jsx(AnalyticsContext, {
data: analyticsData
}, jsx(CardErrorBoundary, _extends({
unsupportedComponent: UnsupportedInline,
datasourceId: props.datasource.id,
onSetLinkTarget: onSetLinkTarget
// Ignored via go/ees005
// eslint-disable-next-line react/jsx-props-no-spreading
}, cardProps), jsx(WidthConsumer, null, function (_ref5) {
var width = _ref5.width;
var useStickySafeCentering = expValEquals('platform_editor_flex_based_centering', 'isEnabled', true);
var useCenterWrapper = !isNodeNested && useStickySafeCentering;
var datasourceDiv = 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%' : calcBreakoutWidth(layout, width)
}
}, jsx(DatasourceTableView, {
datasourceId: datasource.id,
parameters: datasource.parameters,
visibleColumnKeys: visibleColumnKeys,
columnCustomSizes: columnCustomSizes,
wrappedColumnKeys: wrappedColumnKeys && wrappedColumnKeys.length > 0 ? wrappedColumnKeys : undefined,
url: url
}));
return useCenterWrapper ? jsx("div", {
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
className: RendererCssClassName.BLOCK_CARD_DATASOURCE_CENTER_WRAPPER + ' ' + RendererCssClassName.FLEX_CENTER_WRAPPER,
css: datasourceCenterWrapperStyles
}, datasourceDiv) : datasourceDiv;
})));
}
return jsx(InlineCard, {
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.
fg('platform_ssr_smartlink_cards') || fg('jfp-magma-ssr-iv-editor-links'))) {
cardComponent = jsx(CardSSR, _extends({
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 = jsx(Card, _extends({
appearance: "block",
platform: platform
// Ignored via go/ees005
// eslint-disable-next-line react/jsx-props-no-spreading
}, cardProps, {
onError: onError
}));
}
return jsx(SmartLinkDraggable, {
url: url || '',
appearance: SMART_LINK_APPEARANCE.BLOCK,
source: SMART_LINK_DRAG_TYPES.RENDERER
}, jsx(AnalyticsContext, {
data: analyticsData
}, 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
}, jsx(CardErrorBoundary, _extends({
unsupportedComponent: UnsupportedBlock,
onSetLinkTarget: onSetLinkTarget
// Ignored via go/ees005
// eslint-disable-next-line react/jsx-props-no-spreading
}, cardProps), cardComponent))));
}