@atlaskit/renderer
Version:
Renderer component
309 lines (303 loc) • 13.8 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _react = require("@emotion/react");
var _react2 = _interopRequireWildcard(require("react"));
var _analytics = require("@atlaskit/editor-common/analytics");
var _ui = require("@atlaskit/editor-common/ui");
var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
var _chevronRight = _interopRequireDefault(require("@atlaskit/icon/core/chevron-right"));
var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
var _uniqueId2 = _interopRequireDefault(require("lodash/uniqueId"));
var _reactIntl = require("react-intl");
var _events = require("../analytics/events");
var _activeHeaderIdProvider = require("./active-header-id-provider");
var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
/**
* @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-deprecated-imports
var titleStyles = (0, _react.css)({
outline: 'none',
border: 'none',
// eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
fontSize: "".concat(14 / 16, "rem"),
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/design-system/use-tokens-typography -- Ignored via go/DSP-18766
lineHeight: _editorSharedStyles.akEditorLineHeight,
fontWeight: "var(--ds-font-weight-regular, 400)",
display: 'flex',
flex: 1,
margin: 0,
padding: "0 0 0 ".concat("var(--ds-space-050, 4px)"),
textAlign: 'left'
});
var titleStylesDense = (0, _react.css)({
// eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
fontSize: 'var(--ak-renderer-base-font-size)'
});
var containerStyles = (0, _react.css)({
borderWidth: "var(--ds-border-width, 1px)",
borderStyle: 'solid',
borderColor: 'transparent',
borderRadius: "var(--ds-radius-small, 4px)",
minHeight: '25px',
background: "var(--ds-background-neutral-subtle, #00000000)",
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
transition: "background 0.3s ".concat(_editorSharedStyles.akEditorSwoopCubicBezier, ", border-color 0.3s ").concat(_editorSharedStyles.akEditorSwoopCubicBezier),
padding: "var(--ds-space-0, 0px)",
paddingBottom: "var(--ds-space-0, 0px)",
marginTop: "var(--ds-space-050, 4px)",
marginBottom: 0,
marginLeft: 0,
marginRight: 0,
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
'td > :not(style):first-child, td > style:first-child + *': {
marginTop: 0
}
});
var containerStylesExpanded = (0, _react.css)({
background: "var(--ds-surface, #FFFFFF)",
paddingBottom: "var(--ds-space-100, 8px)",
borderColor: "var(--ds-border, #0B120E24)"
});
var containerStylesFocused = (0, _react.css)({
borderColor: "var(--ds-border-focused, #4688EC)"
});
var containerStylesDataNodeTypeExpand = (0, _react.css)({
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
marginLeft: "-".concat(_editorSharedStyles.akLayoutGutterOffset, "px"),
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
marginRight: "-".concat(_editorSharedStyles.akLayoutGutterOffset, "px")
});
var titleContainerStyles = (0, _react.css)({
display: 'flex',
alignItems: 'flex-start',
background: 'none',
border: 'none',
// eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
fontSize: "".concat(14 / 16, "rem"),
width: '100%',
color: "var(--ds-text-subtle, #505258)",
overflow: 'hidden',
cursor: 'pointer',
padding: "var(--ds-space-100, 8px)",
'&:focus': {
outline: 0
}
});
var titleContainerStylesExpanded = (0, _react.css)({
paddingBottom: "var(--ds-space-0, 0px)"
});
var contentContainerStyles = (0, _react.css)({
paddingTop: "var(--ds-space-0, 0px)",
marginLeft: "var(--ds-space-050, 4px)",
paddingRight: "var(--ds-space-200, 16px)",
paddingLeft: "var(--ds-space-400, 32px)",
display: 'flow-root',
visibility: 'hidden',
// The follow rules inside @supports block are added as a part of ED-8893
// The fix is targeting mobile bridge on iOS 12 or below,
// We should consider remove this fix when we no longer support iOS 12
'@supports not (display: flow-root)': {
width: '100%',
boxSizing: 'border-box'
}
});
var contentContainerStylesExpanded = (0, _react.css)({
paddingTop: "var(--ds-space-100, 8px)",
visibility: 'visible'
});
var contentContainerStylesNotExpanded = (0, _react.css)({
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
'.expand-content-wrapper, .nestedExpand-content-wrapper': {
/* We visually hide the content here to preserve the content during copy+paste */
/* Do not add text nowrap here because inline comment navigation depends on the location of the text */
width: '100%',
display: 'block',
height: 0,
overflow: 'hidden',
clip: 'rect(1px, 1px, 1px, 1px)',
userSelect: 'none'
}
});
var clearNextSiblingMarginTopStyle = (0, _react.css)({
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
'& + *': {
// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview, @atlaskit/ui-styling-standard/no-important-styles -- Ignored via go/DSP-18766
marginTop: '0 !important'
}
});
// Lazy-loaded children component
var LazyChildren = /*#__PURE__*/(0, _react2.lazy)(function () {
return Promise.resolve({
default: function _default(_ref) {
var children = _ref.children;
return /*#__PURE__*/_react2.default.createElement(_react2.default.Fragment, null, children);
}
});
});
var Container = function Container(props) {
return (0, _react.jsx)("div", {
css: [containerStyles, props['data-node-type'] === 'expand' && containerStylesDataNodeTypeExpand, props.expanded && containerStylesExpanded, props.focused && containerStylesFocused],
"data-testid": props['data-testid'],
"data-node-type": props['data-node-type'],
"data-title": props['data-title'],
"data-expanded": props['data-expanded'],
"data-local-id": props['data-local-id']
}, props.children);
};
var TitleContainer = function TitleContainer(props) {
var expanded = props.expanded;
return (
// eslint-disable-next-line @atlaskit/design-system/no-html-button
(0, _react.jsx)("button", {
type: "button",
css: [titleContainerStyles, expanded && titleContainerStylesExpanded],
onClick: props.onClick,
onFocus: props.onFocus,
onBlur: props.onBlur,
"aria-labelledby": props['aria-labelledby'],
"aria-expanded": props['aria-expanded'],
contentEditable: props.contentEditable
}, props.children)
);
};
TitleContainer.displayName = 'TitleContainerButton';
var ContentContainer = function ContentContainer(props) {
return (0, _react.jsx)("div", {
css: [contentContainerStyles, props.expanded && contentContainerStylesExpanded, !props.expanded && contentContainerStylesNotExpanded]
}, props.children);
};
function fireExpandToggleAnalytics(nodeType, expanded, fireAnalyticsEvent) {
if (!fireAnalyticsEvent) {
return;
}
fireAnalyticsEvent({
action: _analytics.ACTION.TOGGLE_EXPAND,
actionSubject: nodeType === 'expand' ? _analytics.ACTION_SUBJECT.EXPAND : _analytics.ACTION_SUBJECT.NESTED_EXPAND,
attributes: {
platform: _events.PLATFORM.WEB,
mode: _events.MODE.RENDERER,
expanded: !expanded
},
eventType: _analytics.EVENT_TYPE.TRACK
});
}
function Expand(_ref2) {
var title = _ref2.title,
children = _ref2.children,
nodeType = _ref2.nodeType,
intl = _ref2.intl,
fireAnalyticsEvent = _ref2.fireAnalyticsEvent,
localId = _ref2.localId,
nestedHeaderIds = _ref2.nestedHeaderIds,
rendererContentMode = _ref2.rendererContentMode,
loadBodyContent = _ref2.loadBodyContent;
var _React$useState = _react2.default.useState(false),
_React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
expanded = _React$useState2[0],
setExpanded = _React$useState2[1];
var _React$useState3 = _react2.default.useState(false),
_React$useState4 = (0, _slicedToArray2.default)(_React$useState3, 2),
focused = _React$useState4[0],
setFocused = _React$useState4[1];
var _React$useState5 = _react2.default.useState(false),
_React$useState6 = (0, _slicedToArray2.default)(_React$useState5, 2),
hasLoadedChildren = _React$useState6[0],
setHasLoadedChildren = _React$useState6[1];
var isMobile = false;
var label = intl.formatMessage(expanded ? _ui.expandMessages.collapseNode : _ui.expandMessages.expandNode);
var _useRef = (0, _react2.useRef)((0, _uniqueId2.default)('expand-title-')),
id = _useRef.current;
var handleFocus = (0, _react2.useCallback)(function () {
return setFocused(true);
}, []);
var handleBlur = (0, _react2.useCallback)(function () {
return setFocused(false);
}, []);
var isCompactModeSupported = (0, _expValEquals.expValEquals)('confluence_compact_text_format', 'isEnabled', true) || (0, _expValEquals.expValEquals)('cc_editor_ai_content_mode', 'variant', 'test') && (0, _platformFeatureFlags.fg)('platform_editor_content_mode_button_mvp');
var isCompact = rendererContentMode === 'compact' && isCompactModeSupported;
return (0, _react.jsx)(Container, {
"data-testid": "expand-container-".concat(nodeType, "-").concat(id),
"data-node-type": nodeType,
"data-title": title,
"data-expanded": expanded,
"data-local-id": localId,
expanded: expanded,
focused: focused
}, nestedHeaderIds && nestedHeaderIds.length > 0 ? (0, _react.jsx)(_activeHeaderIdProvider.ActiveHeaderIdConsumer, {
nestedHeaderIds: nestedHeaderIds
// eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
,
onNestedHeaderIdMatch: function onNestedHeaderIdMatch() {
if (!hasLoadedChildren) {
setHasLoadedChildren(true);
}
setExpanded(true);
}
}) : null, (0, _react.jsx)(TitleContainer
// eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
, {
onClick: function onClick(e) {
e.preventDefault();
e.stopPropagation();
fireExpandToggleAnalytics(nodeType, expanded, fireAnalyticsEvent);
// Mark children as loaded when expanding for the first time
if (!expanded && !hasLoadedChildren) {
setHasLoadedChildren(true);
}
setExpanded(!expanded);
e.persist();
// @ts-ignore detail doesn't exist on type
e.detail ? handleBlur() : handleFocus();
},
onFocus: handleFocus,
onBlur: handleBlur,
"aria-labelledby": id,
"aria-expanded": expanded,
contentEditable: false,
expanded: expanded
}, isMobile ? (0, _react.jsx)(_ui.ExpandIconWrapper, {
expanded: expanded
}, (0, _react.jsx)(_chevronRight.default, {
label: label,
spacing: "spacious",
size: "small"
})) : (0, _react.jsx)(_tooltip.default, {
content: label,
position: "top"
// @ts-ignore: [PIT-1685] Fails in post-office due to backwards incompatibility issue with React 18
,
tag: _ui.ExpandLayoutWrapperWithRef,
testId: 'tooltip'
}, (0, _react.jsx)(_ui.ExpandIconWrapper, {
expanded: expanded
}, (0, _react.jsx)(_chevronRight.default, {
label: label,
spacing: "spacious",
size: "small"
}))), (0, _react.jsx)("span", {
css: [titleStyles, isCompact && titleStylesDense],
id: id
}, title || intl.formatMessage(_ui.expandMessages.expandDefaultTitle))), (0, _react.jsx)(ContentContainer, {
expanded: expanded
}, (0, _react.jsx)("div", {
className: "".concat(nodeType, "-content-wrapper")
}, (0, _react.jsx)(_ui.WidthProvider, null, (0, _react.jsx)("div", {
css: clearNextSiblingMarginTopStyle
}), (0, _platformFeatureFlags.fg)('hot-121622_lazy_load_expand_content') ? hasLoadedChildren || loadBodyContent ? (0, _react.jsx)(_react2.Suspense, {
fallback: (0, _react.jsx)("div", null, intl.formatMessage(_ui.expandMessages.loading))
}, (0, _react.jsx)(LazyChildren, null, children)) : null : children))));
}
// eslint-disable-next-line @typescript-eslint/ban-types
var _default_1 = (0, _reactIntl.injectIntl)(Expand);
var _default2 = exports.default = _default_1;