@hazelcast/ui 1.3.2-next.19 → 1.3.2-next.20
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.
- package/lib/index.d.ts +0 -3
- package/lib/index.js +0 -3
- package/lib/index.js.map +1 -1
- package/package.json +2 -6
- package/lib/Code.d.ts +0 -9
- package/lib/Code.js +0 -16
- package/lib/Code.js.map +0 -1
- package/lib/CodeEditor.d.ts +0 -29
- package/lib/CodeEditor.js +0 -180
- package/lib/CodeEditor.js.map +0 -1
- package/lib/CodeEditor.module.scss +0 -32
- package/lib/CodeEditorFormik.d.ts +0 -11
- package/lib/CodeEditorFormik.js +0 -23
- package/lib/CodeEditorFormik.js.map +0 -1
package/lib/index.d.ts
CHANGED
|
@@ -7,9 +7,6 @@ export { Card } from './Card';
|
|
|
7
7
|
export { Checkbox } from './Checkbox';
|
|
8
8
|
export { CheckboxFormik } from './CheckboxFormik';
|
|
9
9
|
export { CircularProgressBar } from './CircularProgressBar';
|
|
10
|
-
export { Code } from './Code';
|
|
11
|
-
export { CodeEditor } from './CodeEditor';
|
|
12
|
-
export { CodeEditorFormik } from './CodeEditorFormik';
|
|
13
10
|
export { Dialog } from './Dialog';
|
|
14
11
|
export { EmptyState } from './EmptyState';
|
|
15
12
|
export { Error, errorId } from './Error';
|
package/lib/index.js
CHANGED
|
@@ -7,9 +7,6 @@ export { Card } from './Card';
|
|
|
7
7
|
export { Checkbox } from './Checkbox';
|
|
8
8
|
export { CheckboxFormik } from './CheckboxFormik';
|
|
9
9
|
export { CircularProgressBar } from './CircularProgressBar';
|
|
10
|
-
export { Code } from './Code';
|
|
11
|
-
export { CodeEditor } from './CodeEditor';
|
|
12
|
-
export { CodeEditorFormik } from './CodeEditorFormik';
|
|
13
10
|
export { Dialog } from './Dialog';
|
|
14
11
|
export { EmptyState } from './EmptyState';
|
|
15
12
|
export { Error, errorId } from './Error';
|
package/lib/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAA;AAC/B,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAA;AAC/B,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAA;AACjC,OAAO,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAA;AAC9C,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAA;AACxD,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAA;AAC7B,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;AACrC,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAA;AACjD,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAA;AAC3D,OAAO,EAAE,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@hazelcast/ui",
|
|
3
|
-
"version": "1.3.2-next.
|
|
3
|
+
"version": "1.3.2-next.20+6a69cea",
|
|
4
4
|
"description": "Hazelcast design system components",
|
|
5
5
|
"author": "",
|
|
6
6
|
"homepage": "https://github.com/hazelcast/frontend-shared#readme",
|
|
@@ -46,9 +46,6 @@
|
|
|
46
46
|
"url": "https://github.com/hazelcast/frontend-shared/issues"
|
|
47
47
|
},
|
|
48
48
|
"dependencies": {
|
|
49
|
-
"@codemirror/basic-setup": "^0.19.1",
|
|
50
|
-
"@codemirror/stream-parser": "^0.19.3",
|
|
51
|
-
"@codemirror/view": "^0.19.35",
|
|
52
49
|
"@hazelcast/helpers": "^1.3.1",
|
|
53
50
|
"@hazelcast/services": "^1.3.1",
|
|
54
51
|
"@headlessui/react": "^1.4.2",
|
|
@@ -76,7 +73,6 @@
|
|
|
76
73
|
"use-deep-compare": "^1.1.0"
|
|
77
74
|
},
|
|
78
75
|
"devDependencies": {
|
|
79
|
-
"@codemirror/legacy-modes": "0.19.0",
|
|
80
76
|
"@hazelcast/test-helpers": "^1.3.1",
|
|
81
77
|
"@storybook/addon-docs": "^6.4.9",
|
|
82
78
|
"@storybook/addons": "^6.4.9",
|
|
@@ -113,5 +109,5 @@
|
|
|
113
109
|
"webpack": "^5.65.0",
|
|
114
110
|
"yup": "^0.32.11"
|
|
115
111
|
},
|
|
116
|
-
"gitHead": "
|
|
112
|
+
"gitHead": "6a69cea5bb0c677be2654ea4596bb0a489e2f6d8"
|
|
117
113
|
}
|
package/lib/Code.d.ts
DELETED
package/lib/Code.js
DELETED
|
@@ -1,16 +0,0 @@
|
|
|
1
|
-
/*
|
|
2
|
-
CodeMirror based Code component.
|
|
3
|
-
|
|
4
|
-
This is a readonly code viewer component. For editing purposes use `CodeEditor`.
|
|
5
|
-
*/
|
|
6
|
-
import React from 'react';
|
|
7
|
-
import { CodeEditor, EditorView } from './CodeEditor';
|
|
8
|
-
const DEFAULT_OPTIONS = {
|
|
9
|
-
language: null,
|
|
10
|
-
lineWrapping: false,
|
|
11
|
-
lineNumbers: true,
|
|
12
|
-
};
|
|
13
|
-
export const Code = ({ value, className, options = DEFAULT_OPTIONS, dataTest = 'code' }) => {
|
|
14
|
-
return (React.createElement(CodeEditor, { value: value, options: options, dataTest: dataTest, className: className, customExtensions: [EditorView.editable.of(false)] }));
|
|
15
|
-
};
|
|
16
|
-
//# sourceMappingURL=Code.js.map
|
package/lib/Code.js.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"Code.js","sourceRoot":"","sources":["../src/Code.tsx"],"names":[],"mappings":"AAAA;;;;EAIE;AAEF,OAAO,KAAa,MAAM,OAAO,CAAA;AACjC,OAAO,EAAE,UAAU,EAAe,UAAU,EAAE,MAAM,cAAc,CAAA;AASlE,MAAM,eAAe,GAAgB;IACnC,QAAQ,EAAE,IAAI;IACd,YAAY,EAAE,KAAK;IACnB,WAAW,EAAE,IAAI;CAClB,CAAA;AAED,MAAM,CAAC,MAAM,IAAI,GAAkB,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,OAAO,GAAG,eAAe,EAAE,QAAQ,GAAG,MAAM,EAAE,EAAE,EAAE;IACxG,OAAO,CACL,oBAAC,UAAU,IACT,KAAK,EAAE,KAAK,EACZ,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,QAAQ,EAClB,SAAS,EAAE,SAAS,EACpB,gBAAgB,EAAE,CAAC,UAAU,CAAC,QAAQ,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,GACjD,CACH,CAAA;AACH,CAAC,CAAA"}
|
package/lib/CodeEditor.d.ts
DELETED
|
@@ -1,29 +0,0 @@
|
|
|
1
|
-
import { FC, MutableRefObject, FocusEvent } from 'react';
|
|
2
|
-
import { EditorView, KeyBinding } from '@codemirror/view';
|
|
3
|
-
import { EditorState, Extension } from '@codemirror/state';
|
|
4
|
-
export { EditorView, EditorState, KeyBinding };
|
|
5
|
-
export declare type CodeOptions = {
|
|
6
|
-
language?: any;
|
|
7
|
-
lineWrapping?: boolean;
|
|
8
|
-
lineNumbers?: boolean;
|
|
9
|
-
rows?: number;
|
|
10
|
-
};
|
|
11
|
-
export interface EditorViewRef {
|
|
12
|
-
view(): EditorView | null;
|
|
13
|
-
}
|
|
14
|
-
declare type OnChangeCallback = (val: string) => void;
|
|
15
|
-
export declare type CodeEditorProps = {
|
|
16
|
-
value?: string;
|
|
17
|
-
className?: string;
|
|
18
|
-
name?: string;
|
|
19
|
-
options?: CodeOptions;
|
|
20
|
-
onChange?: OnChangeCallback;
|
|
21
|
-
onBlur?: (e: FocusEvent) => void;
|
|
22
|
-
customExtensions?: Extension[];
|
|
23
|
-
customKeymap?: KeyBinding[];
|
|
24
|
-
innerRef?: MutableRefObject<EditorViewRef | null>;
|
|
25
|
-
error?: string;
|
|
26
|
-
errorClassName?: string;
|
|
27
|
-
dataTest?: string;
|
|
28
|
-
};
|
|
29
|
-
export declare const CodeEditor: FC<CodeEditorProps>;
|
package/lib/CodeEditor.js
DELETED
|
@@ -1,180 +0,0 @@
|
|
|
1
|
-
/*
|
|
2
|
-
CodeMirror based Code Editor component.
|
|
3
|
-
|
|
4
|
-
* For readonly/code-viewing purposes use `Code`.
|
|
5
|
-
|
|
6
|
-
## CM5 vs CM6
|
|
7
|
-
|
|
8
|
-
We are not using the old CM5; we're basing our component on CM6 which is the next gen. version of the hugely
|
|
9
|
-
popular CM5. CM6 is still years old and solid despite being a young project.
|
|
10
|
-
|
|
11
|
-
See https://codemirror.net/6/ for more.
|
|
12
|
-
|
|
13
|
-
## About language support
|
|
14
|
-
|
|
15
|
-
There is a combined package of backported languages from CM5. We are using this language pack for ease
|
|
16
|
-
of use (no need to add anything to your dependencies) and also there're not many CM6 languages as of
|
|
17
|
-
writing this.
|
|
18
|
-
|
|
19
|
-
// add @codemirror/legacy-modes to your project's dependencies.
|
|
20
|
-
import { javascript } from '@codemirror/legacy-modes/mode/javascript'
|
|
21
|
-
import { python } from '@codemirror/legacy-modes/mode/python'
|
|
22
|
-
|
|
23
|
-
So using a language is one import and one property assignment. See the `CodeEditor.stories.tsx`.
|
|
24
|
-
|
|
25
|
-
For more see https://github.com/codemirror/legacy-modes
|
|
26
|
-
|
|
27
|
-
## About styling/themes
|
|
28
|
-
|
|
29
|
-
CM6 is not that rich with predefined themes yet so we are not providing anything other than the
|
|
30
|
-
default theme (though it's easy provide custom ones if/when we need it.)
|
|
31
|
-
|
|
32
|
-
## Customizing the editor
|
|
33
|
-
|
|
34
|
-
For further customizations, one can use .customExtensions prop to extend the editor with
|
|
35
|
-
any CM6 extension possible. (see Code component for an example.)
|
|
36
|
-
|
|
37
|
-
For getting a handle to the actual CM6 instance one may use the .innerRef prop which refers
|
|
38
|
-
to the EditorView instance created behind the scenes. (See the story of this component)
|
|
39
|
-
*/
|
|
40
|
-
import React, { useEffect, useRef, useImperativeHandle } from 'react';
|
|
41
|
-
import cn from 'classnames';
|
|
42
|
-
import { useUID } from 'react-uid';
|
|
43
|
-
import { EditorView, highlightSpecialChars, drawSelection, highlightActiveLine, keymap, } from '@codemirror/view';
|
|
44
|
-
import { EditorState } from '@codemirror/state';
|
|
45
|
-
import { history, historyKeymap } from '@codemirror/history';
|
|
46
|
-
import { foldGutter, foldKeymap } from '@codemirror/fold';
|
|
47
|
-
import { indentOnInput } from '@codemirror/language';
|
|
48
|
-
import { lineNumbers } from '@codemirror/gutter';
|
|
49
|
-
import { defaultKeymap } from '@codemirror/commands';
|
|
50
|
-
import { bracketMatching } from '@codemirror/matchbrackets';
|
|
51
|
-
import { closeBrackets, closeBracketsKeymap } from '@codemirror/closebrackets';
|
|
52
|
-
import { highlightSelectionMatches, searchKeymap } from '@codemirror/search';
|
|
53
|
-
import { autocompletion, completionKeymap } from '@codemirror/autocomplete';
|
|
54
|
-
import { commentKeymap } from '@codemirror/comment';
|
|
55
|
-
import { rectangularSelection } from '@codemirror/rectangular-selection';
|
|
56
|
-
import { defaultHighlightStyle } from '@codemirror/highlight';
|
|
57
|
-
import { lintKeymap } from '@codemirror/lint';
|
|
58
|
-
import { StreamLanguage } from '@codemirror/stream-parser';
|
|
59
|
-
import { useDeepCompareMemo } from './hooks/useDeepCompareMemo';
|
|
60
|
-
import { Error } from './Error';
|
|
61
|
-
import styles from './CodeEditor.module.scss';
|
|
62
|
-
// Export these very common CodeMirror types for ease of use
|
|
63
|
-
export { EditorView, EditorState };
|
|
64
|
-
const DEFAULT_OPTIONS = {
|
|
65
|
-
language: null,
|
|
66
|
-
lineWrapping: false,
|
|
67
|
-
lineNumbers: true,
|
|
68
|
-
};
|
|
69
|
-
export const CodeEditor = ({ name, value, className, options = {}, onChange, onBlur, customExtensions, customKeymap, innerRef, error, errorClassName, dataTest = 'code-editor', }) => {
|
|
70
|
-
const id = useUID();
|
|
71
|
-
const parentRef = useRef(null);
|
|
72
|
-
const cm = useRef(null);
|
|
73
|
-
const optionsMemoized = useDeepCompareMemo(() => options, [options]);
|
|
74
|
-
// use onChange via a Ref so we avoid unnecessary calls if the caller does not use useCallback on onChange
|
|
75
|
-
const onChangeRef = useRef(onChange);
|
|
76
|
-
// use this handle to access the cm element (which is a `view`)
|
|
77
|
-
useImperativeHandle(innerRef, () => ({
|
|
78
|
-
view: () => cm.current,
|
|
79
|
-
}));
|
|
80
|
-
useEffect(() => {
|
|
81
|
-
if (!parentRef.current)
|
|
82
|
-
return;
|
|
83
|
-
const opts = { ...DEFAULT_OPTIONS, ...optionsMemoized };
|
|
84
|
-
const updateListenerExtension = () => EditorView.updateListener.of((v) => {
|
|
85
|
-
if (!v.docChanged)
|
|
86
|
-
return;
|
|
87
|
-
const val = v.state.doc.toString();
|
|
88
|
-
const cb = onChangeRef.current;
|
|
89
|
-
if (cb)
|
|
90
|
-
cb(val);
|
|
91
|
-
});
|
|
92
|
-
const domEventsExtension = () => {
|
|
93
|
-
const eventHandlers = {
|
|
94
|
-
blur: (event) => onBlur && onBlur(event),
|
|
95
|
-
};
|
|
96
|
-
return EditorView.domEventHandlers(eventHandlers);
|
|
97
|
-
};
|
|
98
|
-
// configure/enable very common features
|
|
99
|
-
const basicExtensions = [
|
|
100
|
-
highlightSpecialChars(),
|
|
101
|
-
history(),
|
|
102
|
-
drawSelection(),
|
|
103
|
-
EditorState.allowMultipleSelections.of(true),
|
|
104
|
-
indentOnInput(),
|
|
105
|
-
defaultHighlightStyle.fallback,
|
|
106
|
-
bracketMatching(),
|
|
107
|
-
closeBrackets(),
|
|
108
|
-
autocompletion(),
|
|
109
|
-
rectangularSelection(),
|
|
110
|
-
highlightActiveLine(),
|
|
111
|
-
highlightSelectionMatches(),
|
|
112
|
-
keymap.of([
|
|
113
|
-
...closeBracketsKeymap,
|
|
114
|
-
...defaultKeymap,
|
|
115
|
-
...searchKeymap,
|
|
116
|
-
...historyKeymap,
|
|
117
|
-
...foldKeymap,
|
|
118
|
-
...commentKeymap,
|
|
119
|
-
...completionKeymap,
|
|
120
|
-
...lintKeymap,
|
|
121
|
-
...(customKeymap !== null && customKeymap !== void 0 ? customKeymap : []),
|
|
122
|
-
]),
|
|
123
|
-
];
|
|
124
|
-
const fixedHeightExtension = () => {
|
|
125
|
-
if (!opts.rows)
|
|
126
|
-
return [];
|
|
127
|
-
const LINE_HEIGHT = 22;
|
|
128
|
-
const EXTRA_PADDING = 4;
|
|
129
|
-
const h = LINE_HEIGHT * opts.rows + EXTRA_PADDING;
|
|
130
|
-
return EditorView.theme({
|
|
131
|
-
'&': { height: `${h}px` },
|
|
132
|
-
'.cm-scroller': { overflow: 'auto' },
|
|
133
|
-
});
|
|
134
|
-
};
|
|
135
|
-
const extensions = [
|
|
136
|
-
...basicExtensions,
|
|
137
|
-
...(customExtensions !== null && customExtensions !== void 0 ? customExtensions : []),
|
|
138
|
-
// eslint-disable-next-line @typescript-eslint/no-unsafe-argument
|
|
139
|
-
...(opts.language ? [StreamLanguage.define(opts.language)] : []),
|
|
140
|
-
...(opts.lineWrapping ? [EditorView.lineWrapping] : []),
|
|
141
|
-
...(opts.lineNumbers ? [foldGutter(), lineNumbers()] : []),
|
|
142
|
-
...(opts.rows ? [fixedHeightExtension()] : []),
|
|
143
|
-
updateListenerExtension(),
|
|
144
|
-
domEventsExtension(),
|
|
145
|
-
];
|
|
146
|
-
cm.current = new EditorView({
|
|
147
|
-
state: EditorState.create({
|
|
148
|
-
doc: value || '',
|
|
149
|
-
extensions,
|
|
150
|
-
}),
|
|
151
|
-
parent: parentRef.current,
|
|
152
|
-
});
|
|
153
|
-
// set the .id attr. of the dom element (formik demands this)
|
|
154
|
-
if (name)
|
|
155
|
-
cm.current.contentDOM.id = name;
|
|
156
|
-
return () => {
|
|
157
|
-
var _a;
|
|
158
|
-
// destroy cm. (mind you; this component will be recreated whenever options are modified.)
|
|
159
|
-
(_a = cm.current) === null || _a === void 0 ? void 0 : _a.destroy();
|
|
160
|
-
cm.current = null;
|
|
161
|
-
};
|
|
162
|
-
},
|
|
163
|
-
// value should not be a dependency (it is handled below), just disable the warnings:
|
|
164
|
-
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
165
|
-
[cm, optionsMemoized, customExtensions, onChangeRef]);
|
|
166
|
-
useEffect(() => {
|
|
167
|
-
if (!cm.current)
|
|
168
|
-
return;
|
|
169
|
-
// avoid recursive calls between .value and onChange listener/
|
|
170
|
-
if (value === cm.current.state.doc.toString())
|
|
171
|
-
return;
|
|
172
|
-
cm.current.dispatch({
|
|
173
|
-
changes: { from: 0, to: cm.current.state.doc.length, insert: value },
|
|
174
|
-
});
|
|
175
|
-
}, [value]);
|
|
176
|
-
return (React.createElement(React.Fragment, null,
|
|
177
|
-
React.createElement("div", { className: cn(styles.container, className), id: name, ref: parentRef, "data-test": dataTest }),
|
|
178
|
-
React.createElement(Error, { error: error, className: cn(styles.errorContainer, errorClassName), inputId: id })));
|
|
179
|
-
};
|
|
180
|
-
//# sourceMappingURL=CodeEditor.js.map
|
package/lib/CodeEditor.js.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"CodeEditor.js","sourceRoot":"","sources":["../src/CodeEditor.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,32 +0,0 @@
|
|
|
1
|
-
@use '../styles/constants' as c;
|
|
2
|
-
@use '../styles/helpers' as h;
|
|
3
|
-
|
|
4
|
-
.container {
|
|
5
|
-
box-shadow: 0 c.$cardShadowSize c.$cardShadowBlur 0 c.$colorShadow;
|
|
6
|
-
border-radius: c.$borderRadius;
|
|
7
|
-
|
|
8
|
-
:global .cm-editor {
|
|
9
|
-
// bogus padding to avoid overlapping with our outlineFormField mixin.
|
|
10
|
-
padding: 1px;
|
|
11
|
-
border-radius: c.$borderRadius;
|
|
12
|
-
border: c.$borderWidth solid c.$colorNeutralLight;
|
|
13
|
-
}
|
|
14
|
-
|
|
15
|
-
:global .cm-editor.cm-focused {
|
|
16
|
-
// inherited outline just looks weird, override it
|
|
17
|
-
outline: none;
|
|
18
|
-
|
|
19
|
-
// use our own outline
|
|
20
|
-
@include h.outlineFormField;
|
|
21
|
-
|
|
22
|
-
border: c.$borderWidth solid c.$colorAccessibilityOutline;
|
|
23
|
-
}
|
|
24
|
-
|
|
25
|
-
:global .cm-scroller {
|
|
26
|
-
border-radius: c.$borderRadius;
|
|
27
|
-
}
|
|
28
|
-
}
|
|
29
|
-
|
|
30
|
-
.errorContainer {
|
|
31
|
-
margin-top: c.$grid;
|
|
32
|
-
}
|
|
@@ -1,11 +0,0 @@
|
|
|
1
|
-
import React, { ReactElement } from 'react';
|
|
2
|
-
import { FieldValidator } from 'formik';
|
|
3
|
-
import { CodeEditorProps } from './CodeEditor';
|
|
4
|
-
import { ExtractKeysOfValueType } from './utils/types';
|
|
5
|
-
export declare type CodeEditorFormikProps<V extends object> = CodeEditorProps & {
|
|
6
|
-
name: ExtractKeysOfValueType<V, string | undefined>;
|
|
7
|
-
validate?: FieldValidator;
|
|
8
|
-
onChange?: (value: string) => void;
|
|
9
|
-
onBlur?: (e: React.FocusEvent) => void;
|
|
10
|
-
};
|
|
11
|
-
export declare const CodeEditorFormik: <V extends object>({ name, validate, onBlur, onChange, ...props }: CodeEditorFormikProps<V>) => ReactElement;
|
package/lib/CodeEditorFormik.js
DELETED
|
@@ -1,23 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import { useField } from 'formik';
|
|
3
|
-
import { CodeEditor } from './CodeEditor';
|
|
4
|
-
import { getFieldError } from './utils/formik';
|
|
5
|
-
export const CodeEditorFormik = ({ name, validate, onBlur, onChange, ...props }) => {
|
|
6
|
-
const [{ onBlur: onFormikBlur, value }, meta, helpers] = useField({
|
|
7
|
-
name,
|
|
8
|
-
validate,
|
|
9
|
-
});
|
|
10
|
-
const onBlurInner = React.useCallback((e) => {
|
|
11
|
-
if (onBlur) {
|
|
12
|
-
onBlur(e);
|
|
13
|
-
}
|
|
14
|
-
onFormikBlur(e);
|
|
15
|
-
}, [onBlur, onFormikBlur]);
|
|
16
|
-
return (React.createElement(CodeEditor, { ...props, name: name, value: value, onChange: (val) => {
|
|
17
|
-
if (onChange) {
|
|
18
|
-
onChange(val);
|
|
19
|
-
}
|
|
20
|
-
helpers.setValue(val);
|
|
21
|
-
}, onBlur: onBlurInner, error: getFieldError(meta) }));
|
|
22
|
-
};
|
|
23
|
-
//# sourceMappingURL=CodeEditorFormik.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"CodeEditorFormik.js","sourceRoot":"","sources":["../src/CodeEditorFormik.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAuB,MAAM,OAAO,CAAA;AAC3C,OAAO,EAAkB,QAAQ,EAAE,MAAM,QAAQ,CAAA;AAEjD,OAAO,EAAE,UAAU,EAAmB,MAAM,cAAc,CAAA;AAC1D,OAAO,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAA;AAU9C,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAAmB,EACjD,IAAI,EACJ,QAAQ,EACR,MAAM,EACN,QAAQ,EACR,GAAG,KAAK,EACiB,EAAgB,EAAE;IAC3C,MAAM,CAAC,EAAE,MAAM,EAAE,YAAY,EAAE,KAAK,EAAE,EAAE,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAqB;QACpF,IAAI;QACJ,QAAQ;KACT,CAAC,CAAA;IAEF,MAAM,WAAW,GAAG,KAAK,CAAC,WAAW,CACnC,CAAC,CAAmB,EAAE,EAAE;QACtB,IAAI,MAAM,EAAE;YACV,MAAM,CAAC,CAAC,CAAC,CAAA;SACV;QACD,YAAY,CAAC,CAAC,CAAC,CAAA;IACjB,CAAC,EACD,CAAC,MAAM,EAAE,YAAY,CAAC,CACvB,CAAA;IAED,OAAO,CACL,oBAAC,UAAU,OACL,KAAK,EACT,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,CAAC,GAAW,EAAE,EAAE;YACxB,IAAI,QAAQ,EAAE;gBACZ,QAAQ,CAAC,GAAG,CAAC,CAAA;aACd;YAED,OAAO,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAA;QACvB,CAAC,EACD,MAAM,EAAE,WAAW,EACnB,KAAK,EAAE,aAAa,CAAC,IAAI,CAAC,GAC1B,CACH,CAAA;AACH,CAAC,CAAA"}
|