@atlaskit/renderer
Version:
Renderer component
76 lines (72 loc) • 4.03 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.LayoutSectionEmotion = void 0;
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _react = _interopRequireDefault(require("react"));
var _react2 = require("@emotion/react");
var _ui = require("@atlaskit/editor-common/ui");
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
var _expValEqualsNoExposure = require("@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure");
/**
* @jsxRuntime classic
* @jsx jsx
*/
/**
* Emotion branch of the `platform_editor_static_css` experiment.
* Used via `componentWithCondition` in `layoutColumn.tsx`.
*
* Cleanup: delete this file once the experiment has shipped.
*/
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- intentional: emotion fallback for compiled migration
// localized styles, was from clearNextSiblingMarginTopStyle in @atlaskit/editor-common/ui
var clearNextSiblingMarginTopStyle = (0, _react2.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'
}
});
var verticalAlignMiddleStyles = (0, _react2.css)({
display: 'flex',
flexDirection: 'column',
justifyContent: 'center'
});
var verticalAlignBottomStyles = (0, _react2.css)({
display: 'flex',
flexDirection: 'column',
justifyContent: 'flex-end'
});
var multipleWrappedImagesStyle = (0, _react2.css)({
// Given the first wrapped mediaSingle has 0 marginTop (see clearNextSiblingMarginTopStyle),
// update all wrapped mediaSingle inside layout to have 0 margin top unless they don't have sibling wrapped mediaSingle
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
'& [class*="image-wrap-"] + [class*="image-wrap-"], & [class*="image-wrap-"]:has( + [class*="image-wrap-"])': {
marginTop: '0'
}
});
// localized styles, was from clearNextSiblingBlockMarkMarginTopStyle in @atlaskit/editor-common/ui
var clearNextSiblingBlockMarkMarginTopStyle = (0, _react2.css)((0, _defineProperty2.default)({}, "+ .fabric-editor-block-mark > p,\n\t + .fabric-editor-block-mark > h1,\n\t + .fabric-editor-block-mark > h2,\n\t + .fabric-editor-block-mark > h3,\n\t + .fabric-editor-block-mark > h4,\n\t + .fabric-editor-block-mark > h5,\n\t + .fabric-editor-block-mark > h6\n\t", {
// 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'
}));
var LayoutSectionEmotion = exports.LayoutSectionEmotion = function LayoutSectionEmotion(props) {
var isLayoutColumnMenuEnabled = (0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_layout_column_menu', 'isEnabled', true);
return (0, _react2.jsx)("div", {
"data-layout-column": true,
"data-column-width": props.width,
"data-valign": props.valign
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- flexBasis is dynamic
,
style: {
flexBasis: "".concat(props.width, "%")
},
css: [
// Keep separate: Compiled crashes on ternary/object lookup here.
isLayoutColumnMenuEnabled && props.valign === 'middle' && verticalAlignMiddleStyles, isLayoutColumnMenuEnabled && props.valign === 'bottom' && verticalAlignBottomStyles, (0, _platformFeatureFlags.fg)('platform_editor_fix_media_in_renderer') && multipleWrappedImagesStyle]
}, (0, _react2.jsx)(_ui.WidthProvider, null, (0, _react2.jsx)("div", {
css: [clearNextSiblingMarginTopStyle, clearNextSiblingBlockMarkMarginTopStyle]
}), props.children));
};