@atlaskit/renderer
Version:
Renderer component
61 lines (59 loc) • 2.05 kB
JavaScript
/**
* @jsxRuntime classic
* @jsx jsx
*/
// eslint-disable-next-line @typescript-eslint/consistent-type-imports, @atlaskit/ui-styling-standard/use-compiled -- emotion jsx pragma; go/DSP-18766
import { css, jsx } from '@emotion/react'; // oxlint-ignore @typescript-eslint/consistent-type-imports -- classic @jsx jsx factory + jsx.JSX.Element types
import { Component } from 'react';
const fadeOutStyles = (maxHeight, top, backgroundColor) => css({
position: 'relative',
overflowY: 'hidden',
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
maxHeight: `${maxHeight}px`,
'&::after': {
content: "''",
position: 'absolute',
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
top: `${top}px`,
bottom: 0,
left: 0,
right: 0,
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
backgroundImage: `linear-gradient( ${"var(--ds-background-neutral-subtle, #00000000)"}, ${backgroundColor} )`
}
});
const FadeOut = props => {
const {
children,
backgroundColor,
fadeHeight,
height
} = props;
const top = height - fadeHeight;
const styles = fadeOutStyles(height, top, backgroundColor);
// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
return jsx("div", {
css: styles
}, children);
};
// Ignored via go/ees005
// eslint-disable-next-line @repo/internal/react/no-class-components, react/prefer-stateless-function
export class TruncatedWrapper extends Component {
constructor(props) {
super(props);
}
// TODO: DSP-4123 - Quality ticket as elevation.surface will be issue when sits top of modal.
render() {
const {
height = 95,
fadeHeight = 24,
backgroundColor = "var(--ds-surface, #FFFFFF)",
children
} = this.props;
return jsx(FadeOut, {
height: height,
fadeHeight: fadeHeight,
backgroundColor: backgroundColor
}, children);
}
}