@up-group-ui/react-controls
Version:
Up shared react controls
76 lines • 4.9 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var jsx_runtime_1 = require("react/jsx-runtime");
var react_1 = (0, tslib_1.__importDefault)(require("react"));
var classnames_1 = (0, tslib_1.__importDefault)(require("classnames"));
var typestyle_1 = require("typestyle");
var prism_react_renderer_1 = (0, tslib_1.__importStar)(require("prism-react-renderer"));
var Paragraph_1 = (0, tslib_1.__importDefault)(require("../Paragraph"));
var Box_1 = (0, tslib_1.__importDefault)(require("../../Containers/Box"));
var ButtonGroup_1 = (0, tslib_1.__importDefault)(require("../../Containers/ButtonGroup"));
var UpButton_1 = (0, tslib_1.__importDefault)(require("../../Inputs/Button/UpButton"));
var Heading_1 = (0, tslib_1.__importDefault)(require("../../Display/Heading"));
var UpCodeViewer = function (_a) {
var _b = _a.language, language = _b === void 0 ? 'jsx' : _b, code = _a.code, theme = _a.theme, divProps = (0, tslib_1.__rest)(_a, ["language", "code", "theme"]);
var _c = react_1.default.useState(''), copySuccess = _c[0], setCopySuccess = _c[1];
var textAreaRef = react_1.default.useRef(null);
var copyToClipboard = function (e) {
textAreaRef.current.select();
document.execCommand('copy');
e.target.focus();
setCopySuccess('Copied!');
};
var toolBarStyle = (0, typestyle_1.style)({
$nest: {},
});
return ((0, jsx_runtime_1.jsxs)(Paragraph_1.default, (0, tslib_1.__assign)({ className: (0, classnames_1.default)('up-code-viewer', (0, typestyle_1.style)({
maxWidth: '100%',
$nest: {
'.prism-code': {
maxWidth: '100%',
overflowX: 'auto',
borderBottomLeftRadius: '6px',
borderBottomRightRadius: '6px',
borderTopLeftRadius: '0px',
borderTopRightRadius: '0px',
padding: '8px',
marginTop: '0px',
},
'.prism-code span': {
textAlign: 'left',
},
'.prism-code div': {
textAlign: 'left',
},
'.up-codeviewer-toolbar': {
paddingRight: '8px',
marginTop: '0px',
backgroundColor: 'whitesmoke',
padding: '4px',
borderTopLeftRadius: '6px',
borderTopRightRadius: '6px',
borderBottomLeftRadius: '0px',
borderBottomRightRadius: '0px',
},
'.up-codeviewer-toolbar .up-btn-wrapper:first-child': {
marginRight: '0px',
width: '24px',
},
'.up-codeviewer-toolbar-title': {
margin: '0px',
textAlign: 'left',
fontSize: '14px',
flex: 1,
},
},
})) }, { children: [(0, jsx_runtime_1.jsxs)(Box_1.default, (0, tslib_1.__assign)({ flexDirection: 'row', justifyContent: 'flex-end', alignItems: 'flex-end', className: 'up-codeviewer-toolbar' }, { children: [(0, jsx_runtime_1.jsx)(Heading_1.default, (0, tslib_1.__assign)({ className: 'up-codeviewer-toolbar-title', tag: 'h3' }, { children: "Code" }), void 0), (0, jsx_runtime_1.jsx)(ButtonGroup_1.default, { children: (0, jsx_runtime_1.jsx)(UpButton_1.default, { intent: 'primary', onClick: copyToClipboard, width: 'icon', actionType: 'copy' }, void 0) }, void 0)] }), void 0), (0, jsx_runtime_1.jsx)(prism_react_renderer_1.default, (0, tslib_1.__assign)({}, prism_react_renderer_1.defaultProps, { language: language, code: code }, { children: function (_a) {
var className = _a.className, style = _a.style, tokens = _a.tokens, getLineProps = _a.getLineProps, getTokenProps = _a.getTokenProps;
return ((0, jsx_runtime_1.jsx)("pre", (0, tslib_1.__assign)({ className: className, style: style }, { children: tokens.map(function (line, i) { return ((0, jsx_runtime_1.jsx)("div", (0, tslib_1.__assign)({}, getLineProps({ line: line, key: i }), { children: line.map(function (token, key) { return ((0, jsx_runtime_1.jsx)("span", (0, tslib_1.__assign)({}, getTokenProps({
token: token,
key: key,
})), key)); }) }), i)); }) }), void 0));
} }), void 0), (0, jsx_runtime_1.jsx)("form", (0, tslib_1.__assign)({ style: { position: 'absolute', left: '-9999px' } }, { children: (0, jsx_runtime_1.jsx)("textarea", { ref: textAreaRef, value: code, onChange: function (e) { return null; } }, void 0) }), void 0)] }), void 0));
};
exports.default = UpCodeViewer;
//# sourceMappingURL=UpCodeViewer.js.map