@atlaskit/renderer
Version:
Renderer component
75 lines (73 loc) • 3.65 kB
JavaScript
import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
import _createClass from "@babel/runtime/helpers/createClass";
import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
import _inherits from "@babel/runtime/helpers/inherits";
function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
/**
* @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';
var fadeOutStyles = function fadeOutStyles(maxHeight, top, backgroundColor) {
return css({
position: 'relative',
overflowY: 'hidden',
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
maxHeight: "".concat(maxHeight, "px"),
'&::after': {
content: "''",
position: 'absolute',
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
top: "".concat(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( ".concat("var(--ds-background-neutral-subtle, #00000000)", ", ", backgroundColor, " )")
}
});
};
var FadeOut = function FadeOut(props) {
var children = props.children,
backgroundColor = props.backgroundColor,
fadeHeight = props.fadeHeight,
height = props.height;
var top = height - fadeHeight;
var 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 var TruncatedWrapper = /*#__PURE__*/function (_Component) {
function TruncatedWrapper(props) {
_classCallCheck(this, TruncatedWrapper);
return _callSuper(this, TruncatedWrapper, [props]);
}
// TODO: DSP-4123 - Quality ticket as elevation.surface will be issue when sits top of modal.
_inherits(TruncatedWrapper, _Component);
return _createClass(TruncatedWrapper, [{
key: "render",
value: function render() {
var _this$props = this.props,
_this$props$height = _this$props.height,
height = _this$props$height === void 0 ? 95 : _this$props$height,
_this$props$fadeHeigh = _this$props.fadeHeight,
fadeHeight = _this$props$fadeHeigh === void 0 ? 24 : _this$props$fadeHeigh,
_this$props$backgroun = _this$props.backgroundColor,
backgroundColor = _this$props$backgroun === void 0 ? "var(--ds-surface, #FFFFFF)" : _this$props$backgroun,
children = _this$props.children;
return jsx(FadeOut, {
height: height,
fadeHeight: fadeHeight,
backgroundColor: backgroundColor
}, children);
}
}]);
}(Component);