mui-spfx-controls
Version:
SPFx component library built with MUI
110 lines • 6.33 kB
JavaScript
import { __assign, __rest } from "tslib";
import { Editor } from '@monaco-editor/react';
import { Box, FormControlLabel, MenuItem, Paper, Switch, TextField, } from '@mui/material';
import React, { forwardRef, useMemo, useState, } from 'react';
var Languages;
(function (Languages) {
Languages["javascript"] = "javascript";
Languages["typescript"] = "typescript";
Languages["html"] = "html";
Languages["handlebars"] = "handlebars";
Languages["markdown"] = "markdown";
Languages["less"] = "less";
Languages["css"] = "css";
Languages["scss"] = "scss";
Languages["json"] = "json";
Languages["xml"] = "xml";
})(Languages || (Languages = {}));
var Theme;
(function (Theme) {
Theme["vs"] = "vs";
Theme["vsDark"] = "vs-dark";
Theme["hcBlack"] = "hc-black";
})(Theme || (Theme = {}));
var languages = [
{ label: 'Javascript', value: Languages.javascript },
{ label: 'Typescript', value: Languages.typescript },
{ label: 'HTML', value: Languages.html },
{ label: 'Handlebars', value: Languages.handlebars },
{ label: 'Markdown', value: Languages.markdown },
{ label: 'LESS', value: Languages.less },
{ label: 'CSS', value: Languages.css },
{ label: 'SCSS', value: Languages.scss },
{ label: 'JSON', value: Languages.json },
{ label: 'XML', value: Languages.xml },
];
var themes = [
{ label: 'VS', value: Theme.vs },
{ label: 'VS Dark', value: Theme.vsDark },
{ label: 'High Contrast', value: Theme.hcBlack },
];
var CodeEditor = forwardRef(function (_a, ref) {
var height = _a.height, value = _a.value, _b = _a.renderControls, renderControls = _b === void 0 ? true : _b, onChange = _a.onChange, props = __rest(_a, ["height", "value", "renderControls", "onChange"]);
var _c = useState(Languages.javascript), language = _c[0], setLanguage = _c[1];
var _d = useState(Theme.vs), theme = _d[0], setTheme = _d[1];
var _e = useState(14), fontSize = _e[0], setFontSize = _e[1];
var _f = useState(4), tabSize = _f[0], setTabSize = _f[1];
var _g = useState('off'), wordWrap = _g[0], setWordWrap = _g[1];
var _h = useState('on'), lineNumbers = _h[0], setLineNumbers = _h[1];
var _j = useState({
enabled: true,
renderCharacters: true,
}), minimap = _j[0], setMinimap = _j[1];
var options = useMemo(function () {
return {
language: language,
theme: theme,
fontSize: fontSize,
wordWrap: wordWrap,
lineNumbers: lineNumbers,
minimap: minimap,
tabSize: tabSize,
};
}, [language, theme, fontSize, wordWrap, lineNumbers, minimap, tabSize]);
return (React.createElement(Paper, { "data-testid": "mui-spfx-code-editor", variant: "outlined", sx: {
height: height !== null && height !== void 0 ? height : { xs: 300, md: 400, xl: 500 },
p: 2,
position: 'relative',
display: 'flex',
flexDirection: 'column',
gap: 2,
overflow: 'hidden',
}, ref: ref },
renderControls ? (React.createElement(Box, { sx: { display: 'flex', alignItems: 'center', gap: 1 } },
React.createElement(Box, { sx: { width: 150 } },
React.createElement(TextField, { "data-testid": "code-editor-language", value: language, label: "Language", fullWidth: true, select: true, size: "small", onChange: function (event) {
setLanguage(event.target.value);
} }, languages.map(function (_a, index) {
var label = _a.label, value = _a.value;
return (React.createElement(MenuItem, { key: "".concat(value, "-").concat(index), value: value }, label));
}))),
React.createElement(Box, { sx: { width: 150 } },
React.createElement(TextField, { "data-testid": "code-editor-theme", value: theme, label: "Theme", fullWidth: true, select: true, size: "small", onChange: function (event) {
setTheme(event.target.value);
} }, themes.map(function (_a, index) {
var label = _a.label, value = _a.value;
return (React.createElement(MenuItem, { key: "".concat(value, "-").concat(index), value: value }, label));
}))),
React.createElement(Box, { sx: { width: 150 } },
React.createElement(TextField, { "data-testid": "code-editor-font-size", value: fontSize, type: "number", label: "Font Size", fullWidth: true, size: "small", onChange: function (event) {
setFontSize(Number(event.target.value));
} })),
React.createElement(Box, { sx: { width: 150 } },
React.createElement(TextField, { "data-testid": "code-editor-tab-size", value: tabSize, type: "number", label: "Tab Size", fullWidth: true, size: "small", onChange: function (event) {
setTabSize(Number(event.target.value));
} })),
React.createElement(FormControlLabel, { control: React.createElement(Switch, { "data-testid": "code-editor-word-wrap", checked: wordWrap === 'on', onChange: function (event) {
return setWordWrap(event.target.checked ? 'on' : 'off');
} }), label: "Word Wrap" }),
React.createElement(FormControlLabel, { control: React.createElement(Switch, { "data-testid": "code-editor-line-numbers", checked: lineNumbers === 'on', onChange: function (event) {
return setLineNumbers(event.target.checked ? 'on' : 'off');
} }), label: "Line Numbers" }),
React.createElement(FormControlLabel, { control: React.createElement(Switch, { "data-testid": "code-editor-minimap", checked: minimap.enabled, onChange: function (event) {
return setMinimap(__assign(__assign({}, minimap), { enabled: event.target.checked }));
} }), label: "Minimap" }))) : null,
React.createElement(Box, { sx: { flexGrow: 1, overflow: 'hidden' } },
React.createElement(Editor, __assign({}, props, { language: language, options: options })))));
});
export default CodeEditor;
export { Languages };
//# sourceMappingURL=CodeEditor.js.map