@ansible/ansible-ui-framework 0.0.610 → 0.0.612
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import { FieldPath, FieldValues, Validate } from 'react-hook-form';
|
|
3
|
+
import { FormGroupTextInputProps } from '../..';
|
|
4
|
+
export type PageFormCodeEditorInputProps<TFieldValues extends FieldValues = FieldValues, TFieldName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> = {
|
|
5
|
+
name: TFieldName;
|
|
6
|
+
validate?: Validate<string, TFieldValues> | Record<string, Validate<string, TFieldValues>>;
|
|
7
|
+
} & Omit<FormGroupTextInputProps, 'onChange' | 'value'>;
|
|
8
|
+
export declare function PageFormCodeEditor<TFieldValues extends FieldValues = FieldValues, TFieldName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>(props: PageFormCodeEditorInputProps<TFieldValues, TFieldName>): JSX.Element;
|
|
9
|
+
export declare function MonacoEditor(props: {
|
|
10
|
+
id?: string;
|
|
11
|
+
value?: string;
|
|
12
|
+
onChange?: (value: string) => void;
|
|
13
|
+
isReadOnly?: boolean;
|
|
14
|
+
invalid?: boolean;
|
|
15
|
+
}): JSX.Element;
|
|
@@ -0,0 +1,154 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __assign = (this && this.__assign) || function () {
|
|
3
|
+
__assign = Object.assign || function(t) {
|
|
4
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
5
|
+
s = arguments[i];
|
|
6
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
7
|
+
t[p] = s[p];
|
|
8
|
+
}
|
|
9
|
+
return t;
|
|
10
|
+
};
|
|
11
|
+
return __assign.apply(this, arguments);
|
|
12
|
+
};
|
|
13
|
+
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
14
|
+
if (k2 === undefined) k2 = k;
|
|
15
|
+
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
16
|
+
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
17
|
+
desc = { enumerable: true, get: function() { return m[k]; } };
|
|
18
|
+
}
|
|
19
|
+
Object.defineProperty(o, k2, desc);
|
|
20
|
+
}) : (function(o, m, k, k2) {
|
|
21
|
+
if (k2 === undefined) k2 = k;
|
|
22
|
+
o[k2] = m[k];
|
|
23
|
+
}));
|
|
24
|
+
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
|
|
25
|
+
Object.defineProperty(o, "default", { enumerable: true, value: v });
|
|
26
|
+
}) : function(o, v) {
|
|
27
|
+
o["default"] = v;
|
|
28
|
+
});
|
|
29
|
+
var __importStar = (this && this.__importStar) || function (mod) {
|
|
30
|
+
if (mod && mod.__esModule) return mod;
|
|
31
|
+
var result = {};
|
|
32
|
+
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
|
|
33
|
+
__setModuleDefault(result, mod);
|
|
34
|
+
return result;
|
|
35
|
+
};
|
|
36
|
+
var __rest = (this && this.__rest) || function (s, e) {
|
|
37
|
+
var t = {};
|
|
38
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
39
|
+
t[p] = s[p];
|
|
40
|
+
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
41
|
+
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
42
|
+
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
43
|
+
t[p[i]] = s[p[i]];
|
|
44
|
+
}
|
|
45
|
+
return t;
|
|
46
|
+
};
|
|
47
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
48
|
+
exports.MonacoEditor = exports.PageFormCodeEditor = void 0;
|
|
49
|
+
var jsx_runtime_1 = require("react/jsx-runtime");
|
|
50
|
+
var monaco = __importStar(require("monaco-editor"));
|
|
51
|
+
var react_1 = require("react");
|
|
52
|
+
var react_hook_form_1 = require("react-hook-form");
|
|
53
|
+
var __1 = require("../..");
|
|
54
|
+
var capitalize_1 = require("../../utils/capitalize");
|
|
55
|
+
var PageFormGroup_1 = require("./PageFormGroup");
|
|
56
|
+
function PageFormCodeEditor(props) {
|
|
57
|
+
var _a;
|
|
58
|
+
var isReadOnly = props.isReadOnly, validate = props.validate, formGroupInputProps = __rest(props, ["isReadOnly", "validate"]);
|
|
59
|
+
var label = props.label, name = props.name, isRequired = props.isRequired;
|
|
60
|
+
var _b = (0, react_hook_form_1.useFormContext)(), control = _b.control, _c = _b.formState, isSubmitting = _c.isSubmitting, isValidating = _c.isValidating;
|
|
61
|
+
var id = (_a = props.id) !== null && _a !== void 0 ? _a : name.split('.').join('-');
|
|
62
|
+
return ((0, jsx_runtime_1.jsx)(react_hook_form_1.Controller, { name: name, control: control, shouldUnregister: true, render: function (_a) {
|
|
63
|
+
var _b = _a.field, onChange = _b.onChange, value = _b.value, error = _a.fieldState.error;
|
|
64
|
+
return ((0, jsx_runtime_1.jsx)(PageFormGroup_1.PageFormGroup, __assign({}, formGroupInputProps, { id: id, helperTextInvalid: !(validate && isValidating) && (error === null || error === void 0 ? void 0 : error.message) }, { children: (0, jsx_runtime_1.jsx)(MonacoEditor, { id: id, value: value, onChange: onChange, isReadOnly: isReadOnly || isSubmitting, invalid: !(validate && isValidating) && (error === null || error === void 0 ? void 0 : error.message) !== undefined }) })));
|
|
65
|
+
}, rules: {
|
|
66
|
+
required: typeof label === 'string' && typeof isRequired === 'boolean'
|
|
67
|
+
? {
|
|
68
|
+
value: true,
|
|
69
|
+
message: "".concat((0, capitalize_1.capitalizeFirstLetter)(label.toLocaleLowerCase()), " is required."),
|
|
70
|
+
}
|
|
71
|
+
: isRequired,
|
|
72
|
+
validate: props.validate,
|
|
73
|
+
} }));
|
|
74
|
+
}
|
|
75
|
+
exports.PageFormCodeEditor = PageFormCodeEditor;
|
|
76
|
+
function MonacoEditor(props) {
|
|
77
|
+
var onChange = props.onChange;
|
|
78
|
+
var divEl = (0, react_1.useRef)(null);
|
|
79
|
+
var editorRef = (0, react_1.useRef)({});
|
|
80
|
+
var settings = (0, __1.useSettings)();
|
|
81
|
+
(0, react_1.useEffect)(function () {
|
|
82
|
+
var _a;
|
|
83
|
+
var editor;
|
|
84
|
+
monaco.editor.defineTheme('my-dark', {
|
|
85
|
+
base: 'vs-dark',
|
|
86
|
+
inherit: true,
|
|
87
|
+
colors: {
|
|
88
|
+
'editor.background': '#00000000',
|
|
89
|
+
'minimap.background': '#00000000',
|
|
90
|
+
'scrollbarSlider.background': '#FFFFFF22',
|
|
91
|
+
},
|
|
92
|
+
rules: [{ token: '', background: '#222222' }],
|
|
93
|
+
});
|
|
94
|
+
monaco.editor.defineTheme('my-light', {
|
|
95
|
+
base: 'vs',
|
|
96
|
+
inherit: true,
|
|
97
|
+
colors: {
|
|
98
|
+
'editor.background': '#FFFFFF00',
|
|
99
|
+
'minimap.background': '#FFFFFF00',
|
|
100
|
+
'scrollbarSlider.background': '#FFFFFF22',
|
|
101
|
+
},
|
|
102
|
+
rules: [],
|
|
103
|
+
});
|
|
104
|
+
if (divEl.current) {
|
|
105
|
+
editor = monaco.editor.create(divEl.current, {
|
|
106
|
+
language: 'yaml',
|
|
107
|
+
lineNumbers: 'off',
|
|
108
|
+
theme: 'my-dark',
|
|
109
|
+
lineDecorationsWidth: 8,
|
|
110
|
+
// lineNumbersMinChars: 0,
|
|
111
|
+
// glyphMargin: false,
|
|
112
|
+
// folding: false,
|
|
113
|
+
padding: { top: 6, bottom: 8 },
|
|
114
|
+
fontSize: 14,
|
|
115
|
+
fontFamily: 'RedHatMono',
|
|
116
|
+
scrollBeyondLastLine: false,
|
|
117
|
+
minimap: { enabled: false },
|
|
118
|
+
renderLineHighlightOnlyWhenFocus: true,
|
|
119
|
+
});
|
|
120
|
+
editorRef.current.editor = editor;
|
|
121
|
+
(_a = editor.getModel()) === null || _a === void 0 ? void 0 : _a.onDidChangeContent(function () {
|
|
122
|
+
var _a;
|
|
123
|
+
onChange === null || onChange === void 0 ? void 0 : onChange((_a = editor.getValue()) !== null && _a !== void 0 ? _a : '');
|
|
124
|
+
});
|
|
125
|
+
}
|
|
126
|
+
return function () {
|
|
127
|
+
editor.dispose();
|
|
128
|
+
};
|
|
129
|
+
}, [onChange]);
|
|
130
|
+
(0, react_1.useEffect)(function () {
|
|
131
|
+
var _a, _b;
|
|
132
|
+
if ((_a = editorRef.current) === null || _a === void 0 ? void 0 : _a.editor) {
|
|
133
|
+
var currentValue = editorRef.current.editor.getValue();
|
|
134
|
+
if (currentValue !== props.value)
|
|
135
|
+
editorRef.current.editor.setValue((_b = props.value) !== null && _b !== void 0 ? _b : '');
|
|
136
|
+
}
|
|
137
|
+
}, [props.value]);
|
|
138
|
+
(0, react_1.useEffect)(function () {
|
|
139
|
+
var _a;
|
|
140
|
+
if ((_a = editorRef.current) === null || _a === void 0 ? void 0 : _a.editor) {
|
|
141
|
+
editorRef.current.editor.updateOptions({ readOnly: props.isReadOnly });
|
|
142
|
+
}
|
|
143
|
+
}, [props.isReadOnly]);
|
|
144
|
+
(0, react_1.useEffect)(function () {
|
|
145
|
+
var _a;
|
|
146
|
+
if ((_a = editorRef.current) === null || _a === void 0 ? void 0 : _a.editor) {
|
|
147
|
+
editorRef.current.editor.updateOptions({
|
|
148
|
+
theme: settings.activeTheme === 'dark' ? 'my-dark' : 'my-light',
|
|
149
|
+
});
|
|
150
|
+
}
|
|
151
|
+
}, [settings.activeTheme]);
|
|
152
|
+
return ((0, jsx_runtime_1.jsx)("div", __assign({ className: "pf-c-form-control", style: { padding: 0, height: 400 }, "aria-invalid": props.invalid ? 'true' : undefined }, { children: (0, jsx_runtime_1.jsx)("div", { id: props.id, ref: divEl, style: { height: '100%' } }) })));
|
|
153
|
+
}
|
|
154
|
+
exports.MonacoEditor = MonacoEditor;
|