@atlaskit/renderer
Version:
Renderer component
65 lines • 2.5 kB
JavaScript
/**
* @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 */
import { jsx, css } from '@emotion/react';
import CopyButton from './codeBlockCopyButton';
import CodeWrapButton from './codeBlockWrapButton';
var codeBlockButtonsWrapper = css({
position: 'sticky',
top: '0px',
background: "var(--ds-surface, #FFFFFF)"
});
var codeBlockButtonsStyle = 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 jsx("div", {
css: codeBlockButtonsWrapper
}, jsx("div", {
css: codeBlockButtonsStyle
}, allowWrapCodeBlock && jsx(CodeWrapButton, {
setWrapLongLines: setWrapLongLines,
wrapLongLines: wrapLongLines
}), allowCopyToClipboard && jsx(CopyButton, {
content: text
})));
};
export default CodeBlockButtonContainer;