@equinor/eds-core-react
Version:
The React implementation of the Equinor Design System
43 lines (40 loc) • 1.89 kB
JavaScript
import { forwardRef } from 'react';
import styled, { css } from 'styled-components';
import { typographyTemplate } from '@equinor/eds-utils';
import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
import { Divider } from '../Divider/Divider.js';
const StyledDialogContent = styled.div.withConfig({
displayName: "DialogContent__StyledDialogContent",
componentId: "sc-1tze18k-0"
})(({
theme,
$scrollable
}) => {
return css(["--content-spacing-top:", ";", " min-height:", ";align-self:stretch;justify-self:stretch;padding:0 ", " 0 ", ";&:first-child{padding-top:var(--content-spacing-top);}&:last-child{padding-bottom:", ";}", ""], theme.entities.children.spacings.top, typographyTemplate(theme.entities.content.typography), theme.entities.content.minHeight, theme.entities.children.spacings.right, theme.entities.children.spacings.left, theme.entities.children.spacings.bottom, $scrollable && css(["&:not(:first-child){margin-top:calc(var(--content-spacing-top) * -1);}padding-top:var(--content-spacing-top);margin-bottom:calc(var(--content-spacing-top) * -1);padding-bottom:var(--content-spacing-top);min-height:initial;height:", ";overflow-y:auto;"], theme.entities.content.height));
});
const StyledDivider = styled(Divider).withConfig({
displayName: "DialogContent__StyledDivider",
componentId: "sc-1tze18k-1"
})(["width:100%;margin:0;"]);
const DialogContent = /*#__PURE__*/forwardRef(function DialogContent({
children,
scrollable = false,
...rest
}, ref) {
const props = {
$scrollable: scrollable,
ref,
...rest
};
return /*#__PURE__*/jsxs(Fragment, {
children: [/*#__PURE__*/jsx(StyledDialogContent, {
id: "eds-dialog-customcontent",
...props,
children: children
}), children && scrollable && /*#__PURE__*/jsx(StyledDivider, {
color: "medium",
variant: "small"
})]
});
});
export { DialogContent };