@atlaskit/renderer
Version:
Renderer component
81 lines (78 loc) • 4.13 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.TruncatedWrapper = void 0;
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
var _react = require("@emotion/react");
var _react2 = require("react");
function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2.default)(o), (0, _possibleConstructorReturn2.default)(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2.default)(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
// oxlint-ignore @typescript-eslint/consistent-type-imports -- classic @jsx jsx factory + jsx.JSX.Element types
var fadeOutStyles = function fadeOutStyles(maxHeight, top, backgroundColor) {
return (0, _react.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 (0, _react.jsx)("div", {
css: styles
}, children);
};
// Ignored via go/ees005
// eslint-disable-next-line @repo/internal/react/no-class-components, react/prefer-stateless-function
var TruncatedWrapper = exports.TruncatedWrapper = /*#__PURE__*/function (_Component) {
function TruncatedWrapper(props) {
(0, _classCallCheck2.default)(this, TruncatedWrapper);
return _callSuper(this, TruncatedWrapper, [props]);
}
// TODO: DSP-4123 - Quality ticket as elevation.surface will be issue when sits top of modal.
(0, _inherits2.default)(TruncatedWrapper, _Component);
return (0, _createClass2.default)(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 (0, _react.jsx)(FadeOut, {
height: height,
fadeHeight: fadeHeight,
backgroundColor: backgroundColor
}, children);
}
}]);
}(_react2.Component);