@atlaskit/renderer
Version:
Renderer component
73 lines (71 loc) • 2.88 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _react = require("@emotion/react");
var _codeBlockCopyButton = _interopRequireDefault(require("./codeBlockCopyButton"));
var _codeBlockWrapButton = _interopRequireDefault(require("./codeBlockWrapButton"));
/**
* @jsxRuntime classic
* @jsx jsx
*/
/* eslint-disable @typescript-eslint/consistent-type-imports, @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766; jsx required at runtime for @jsxRuntime classic */
var codeBlockButtonsWrapper = (0, _react.css)({
position: 'sticky',
top: '0px',
background: "var(--ds-surface, #FFFFFF)"
});
var codeBlockButtonsStyle = (0, _react.css)({
display: 'flex',
justifyContent: 'flex-end',
position: 'absolute',
height: '0',
width: '100%',
right: "var(--ds-space-075, 6px)",
top: "var(--ds-space-050, 4px)",
padding: "var(--ds-space-025, 2px)",
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
button: {
height: '32px',
width: '32px',
border: "var(--ds-border-width-selected, 2px)".concat(" solid ", "var(--ds-border, #0B120E24)"),
borderRadius: "var(--ds-radius-small, 4px)",
marginLeft: "var(--ds-space-050, 4px)",
padding: "var(--ds-space-025, 2px)",
background: "var(--ds-surface-overlay, #FFFFFF)",
color: "var(--ds-icon, #292A2E)",
'&:hover': {
borderWidth: "var(--ds-border-width-selected, 2px)",
backgroundColor: "var(--ds-surface-overlay-hovered, #F0F1F2)",
height: '32px',
width: '32px'
},
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
'&.clicked': {
backgroundColor: "var(--ds-background-neutral-bold-pressed, #505258)",
borderRadius: "var(--ds-radius-small, 4px)",
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles -- Ignored via go/DSP-18766
color: "var(--ds-icon-inverse, #FFFFFF)".concat(" !important")
}
}
});
var CodeBlockButtonContainer = function CodeBlockButtonContainer(_ref) {
var allowCopyToClipboard = _ref.allowCopyToClipboard,
allowWrapCodeBlock = _ref.allowWrapCodeBlock,
setWrapLongLines = _ref.setWrapLongLines,
text = _ref.text,
wrapLongLines = _ref.wrapLongLines;
return (0, _react.jsx)("div", {
css: codeBlockButtonsWrapper
}, (0, _react.jsx)("div", {
css: codeBlockButtonsStyle
}, allowWrapCodeBlock && (0, _react.jsx)(_codeBlockWrapButton.default, {
setWrapLongLines: setWrapLongLines,
wrapLongLines: wrapLongLines
}), allowCopyToClipboard && (0, _react.jsx)(_codeBlockCopyButton.default, {
content: text
})));
};
var _default = exports.default = CodeBlockButtonContainer;