@atlaskit/renderer
Version:
Renderer component
69 lines (66 loc) • 3.56 kB
JavaScript
import _defineProperty from "@babel/runtime/helpers/defineProperty";
/**
* @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.
*/
import React from 'react';
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- intentional: emotion fallback for compiled migration
import { css, jsx } from '@emotion/react';
import { WidthProvider } from '@atlaskit/editor-common/ui';
import { fg } from '@atlaskit/platform-feature-flags';
import { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure';
// localized styles, was from clearNextSiblingMarginTopStyle in @atlaskit/editor-common/ui
var clearNextSiblingMarginTopStyle = 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 = css({
display: 'flex',
flexDirection: 'column',
justifyContent: 'center'
});
var verticalAlignBottomStyles = css({
display: 'flex',
flexDirection: 'column',
justifyContent: 'flex-end'
});
var multipleWrappedImagesStyle = 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 = css(_defineProperty({}, "+ .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'
}));
export var LayoutSectionEmotion = function LayoutSectionEmotion(props) {
var isLayoutColumnMenuEnabled = expValEqualsNoExposure('platform_editor_layout_column_menu', 'isEnabled', true);
return 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, fg('platform_editor_fix_media_in_renderer') && multipleWrappedImagesStyle]
}, jsx(WidthProvider, null, jsx("div", {
css: [clearNextSiblingMarginTopStyle, clearNextSiblingBlockMarkMarginTopStyle]
}), props.children));
};