mui-spfx-controls
Version:
SPFx component library built with MUI
112 lines • 6.93 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.Languages = void 0;
var tslib_1 = require("tslib");
var react_1 = require("@monaco-editor/react");
var material_1 = require("@mui/material");
var react_2 = tslib_1.__importStar(require("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 || (exports.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 = (0, react_2.forwardRef)(function (_a, ref) {
var height = _a.height, value = _a.value, _b = _a.renderControls, renderControls = _b === void 0 ? true : _b, onChange = _a.onChange, props = tslib_1.__rest(_a, ["height", "value", "renderControls", "onChange"]);
var _c = (0, react_2.useState)(Languages.javascript), language = _c[0], setLanguage = _c[1];
var _d = (0, react_2.useState)(Theme.vs), theme = _d[0], setTheme = _d[1];
var _e = (0, react_2.useState)(14), fontSize = _e[0], setFontSize = _e[1];
var _f = (0, react_2.useState)(4), tabSize = _f[0], setTabSize = _f[1];
var _g = (0, react_2.useState)('off'), wordWrap = _g[0], setWordWrap = _g[1];
var _h = (0, react_2.useState)('on'), lineNumbers = _h[0], setLineNumbers = _h[1];
var _j = (0, react_2.useState)({
enabled: true,
renderCharacters: true,
}), minimap = _j[0], setMinimap = _j[1];
var options = (0, react_2.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_2.default.createElement(material_1.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_2.default.createElement(material_1.Box, { sx: { display: 'flex', alignItems: 'center', gap: 1 } },
react_2.default.createElement(material_1.Box, { sx: { width: 150 } },
react_2.default.createElement(material_1.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_2.default.createElement(material_1.MenuItem, { key: "".concat(value, "-").concat(index), value: value }, label));
}))),
react_2.default.createElement(material_1.Box, { sx: { width: 150 } },
react_2.default.createElement(material_1.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_2.default.createElement(material_1.MenuItem, { key: "".concat(value, "-").concat(index), value: value }, label));
}))),
react_2.default.createElement(material_1.Box, { sx: { width: 150 } },
react_2.default.createElement(material_1.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_2.default.createElement(material_1.Box, { sx: { width: 150 } },
react_2.default.createElement(material_1.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_2.default.createElement(material_1.FormControlLabel, { control: react_2.default.createElement(material_1.Switch, { "data-testid": "code-editor-word-wrap", checked: wordWrap === 'on', onChange: function (event) {
return setWordWrap(event.target.checked ? 'on' : 'off');
} }), label: "Word Wrap" }),
react_2.default.createElement(material_1.FormControlLabel, { control: react_2.default.createElement(material_1.Switch, { "data-testid": "code-editor-line-numbers", checked: lineNumbers === 'on', onChange: function (event) {
return setLineNumbers(event.target.checked ? 'on' : 'off');
} }), label: "Line Numbers" }),
react_2.default.createElement(material_1.FormControlLabel, { control: react_2.default.createElement(material_1.Switch, { "data-testid": "code-editor-minimap", checked: minimap.enabled, onChange: function (event) {
return setMinimap(tslib_1.__assign(tslib_1.__assign({}, minimap), { enabled: event.target.checked }));
} }), label: "Minimap" }))) : null,
react_2.default.createElement(material_1.Box, { sx: { flexGrow: 1, overflow: 'hidden' } },
react_2.default.createElement(react_1.Editor, tslib_1.__assign({}, props, { language: language, options: options })))));
});
exports.default = CodeEditor;
//# sourceMappingURL=CodeEditor.js.map