@elliemae/ds-codeeditor 2.2.0-next.3 → 2.3.0-alpha.1
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/cjs/DSCodeEditor.js +120 -116
- package/cjs/DSCodeEditor.js.map +7 -0
- package/cjs/components/DSCodeEditorForm.js +86 -109
- package/cjs/components/DSCodeEditorForm.js.map +7 -0
- package/cjs/components/DSCodeEditorImpl.js +62 -52
- package/cjs/components/DSCodeEditorImpl.js.map +7 -0
- package/cjs/index.js +36 -10
- package/cjs/index.js.map +7 -0
- package/esm/DSCodeEditor.js +89 -103
- package/esm/DSCodeEditor.js.map +7 -0
- package/esm/components/DSCodeEditorForm.js +56 -101
- package/esm/components/DSCodeEditorForm.js.map +7 -0
- package/esm/components/DSCodeEditorImpl.js +32 -42
- package/esm/components/DSCodeEditorImpl.js.map +7 -0
- package/esm/index.js +7 -1
- package/esm/index.js.map +7 -0
- package/package.json +6 -6
- package/types/DSCodeEditor.d.ts +1 -21
|
@@ -1,23 +1,12 @@
|
|
|
1
|
-
import
|
|
2
|
-
import
|
|
3
|
-
import
|
|
4
|
-
import
|
|
5
|
-
import
|
|
6
|
-
import
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
import { convertPropToCssClassName, aggregatedClasses } from '@elliemae/ds-classnames';
|
|
11
|
-
import { ChevronSmallLeft, ChevronSmallRight } from '@elliemae/ds-icons';
|
|
12
|
-
|
|
13
|
-
var _DSButton, _ChevronSmallRight;
|
|
14
|
-
const blockName = 'code-editor';
|
|
15
|
-
const {
|
|
16
|
-
cssClassName,
|
|
17
|
-
classNameBlock
|
|
18
|
-
} = convertPropToCssClassName(blockName);
|
|
19
|
-
const CheckOptionsGroup = aggregatedClasses('div')("".concat(blockName, "-options-group"));
|
|
20
|
-
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import React2, { Component } from "react";
|
|
3
|
+
import DSButton from "@elliemae/ds-button";
|
|
4
|
+
import { DSCheckbox, DSTextBox, DSInputGroup } from "@elliemae/ds-form";
|
|
5
|
+
import { convertPropToCssClassName, aggregatedClasses } from "@elliemae/ds-classnames";
|
|
6
|
+
import { ChevronSmallLeft, ChevronSmallRight } from "@elliemae/ds-icons";
|
|
7
|
+
const blockName = "code-editor";
|
|
8
|
+
const { cssClassName, classNameBlock } = convertPropToCssClassName(blockName);
|
|
9
|
+
const CheckOptionsGroup = aggregatedClasses("div")(`${blockName}-options-group`);
|
|
21
10
|
class DSCodeEditorForm extends Component {
|
|
22
11
|
constructor(props) {
|
|
23
12
|
super(props);
|
|
@@ -26,25 +15,17 @@ class DSCodeEditorForm extends Component {
|
|
|
26
15
|
replace: false,
|
|
27
16
|
isCaseSensitive: false,
|
|
28
17
|
isWholeWord: false,
|
|
29
|
-
filteredText:
|
|
30
|
-
replaceText:
|
|
18
|
+
filteredText: "",
|
|
19
|
+
replaceText: ""
|
|
31
20
|
};
|
|
32
21
|
}
|
|
33
|
-
|
|
34
22
|
searchWord(isReplace, all) {
|
|
35
23
|
const {
|
|
36
24
|
reactAceComponent: {
|
|
37
|
-
current: {
|
|
38
|
-
editor
|
|
39
|
-
}
|
|
25
|
+
current: { editor }
|
|
40
26
|
}
|
|
41
27
|
} = this.props;
|
|
42
|
-
const {
|
|
43
|
-
isCaseSensitive,
|
|
44
|
-
isWholeWord,
|
|
45
|
-
filteredText,
|
|
46
|
-
replaceText
|
|
47
|
-
} = this.state;
|
|
28
|
+
const { isCaseSensitive, isWholeWord, filteredText, replaceText } = this.state;
|
|
48
29
|
const options = {
|
|
49
30
|
backwards: false,
|
|
50
31
|
wrap: true,
|
|
@@ -54,7 +35,6 @@ class DSCodeEditorForm extends Component {
|
|
|
54
35
|
};
|
|
55
36
|
editor.find(filteredText, options);
|
|
56
37
|
const selectedContent = editor.getSelectedText();
|
|
57
|
-
|
|
58
38
|
if (isReplace && replaceText && selectedContent) {
|
|
59
39
|
if (all) {
|
|
60
40
|
editor.findAll(filteredText, options);
|
|
@@ -65,118 +45,93 @@ class DSCodeEditorForm extends Component {
|
|
|
65
45
|
}
|
|
66
46
|
}
|
|
67
47
|
}
|
|
68
|
-
|
|
69
48
|
render() {
|
|
70
|
-
const {
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
replaceText
|
|
80
|
-
} = this.state;
|
|
81
|
-
return /*#__PURE__*/_jsx("div", {
|
|
82
|
-
className: "".concat(cssClassName)
|
|
83
|
-
}, void 0, fileName ? /*#__PURE__*/_jsx("div", {
|
|
84
|
-
className: classNameBlock('file-name')
|
|
85
|
-
}, void 0, "File Name: ", /*#__PURE__*/_jsx("span", {}, void 0, " ", fileName, " ")) : null, /*#__PURE__*/_jsx("div", {
|
|
86
|
-
className: classNameBlock('find-replace-btn')
|
|
87
|
-
}, void 0, !find && !replace ? /*#__PURE__*/_jsx(DSButton, {
|
|
49
|
+
const { fileName } = this.props;
|
|
50
|
+
const { find, replace, isCaseSensitive, isWholeWord, filteredText, replaceText } = this.state;
|
|
51
|
+
return /* @__PURE__ */ React2.createElement("div", {
|
|
52
|
+
className: `${cssClassName}`
|
|
53
|
+
}, fileName ? /* @__PURE__ */ React2.createElement("div", {
|
|
54
|
+
className: classNameBlock("file-name")
|
|
55
|
+
}, "File Name: ", /* @__PURE__ */ React2.createElement("span", null, " ", fileName, " ")) : null, /* @__PURE__ */ React2.createElement("div", {
|
|
56
|
+
className: classNameBlock("find-replace-btn")
|
|
57
|
+
}, !find && !replace ? /* @__PURE__ */ React2.createElement(DSButton, {
|
|
88
58
|
buttonType: "secondary",
|
|
89
59
|
labelText: "Find",
|
|
90
|
-
onClick: () => this.setState({
|
|
91
|
-
find: true
|
|
92
|
-
}),
|
|
60
|
+
onClick: () => this.setState({ find: true }),
|
|
93
61
|
size: "m"
|
|
94
|
-
}) : null, !replace ?
|
|
62
|
+
}) : null, !replace ? /* @__PURE__ */ React2.createElement(DSButton, {
|
|
95
63
|
buttonType: "secondary",
|
|
96
64
|
labelText: "Find & Replace",
|
|
97
|
-
onClick: () => this.setState({
|
|
98
|
-
replace: true
|
|
99
|
-
}),
|
|
65
|
+
onClick: () => this.setState({ replace: true }),
|
|
100
66
|
size: "m"
|
|
101
|
-
}) : null), find || replace ?
|
|
102
|
-
className: classNameBlock(
|
|
103
|
-
},
|
|
67
|
+
}) : null), find || replace ? /* @__PURE__ */ React2.createElement(DSInputGroup, {
|
|
68
|
+
className: classNameBlock("find")
|
|
69
|
+
}, /* @__PURE__ */ React2.createElement(DSTextBox, {
|
|
104
70
|
className: "find-word",
|
|
105
71
|
fluidWidth: false,
|
|
106
72
|
id: "find-textbox",
|
|
107
|
-
onChange: e => this.setState({
|
|
108
|
-
filteredText: e.currentTarget.value
|
|
109
|
-
}),
|
|
73
|
+
onChange: (e) => this.setState({ filteredText: e.currentTarget.value }),
|
|
110
74
|
placeholder: "Find",
|
|
111
|
-
rightComponent:
|
|
112
|
-
className: classNameBlock(
|
|
113
|
-
},
|
|
114
|
-
icon:
|
|
75
|
+
rightComponent: /* @__PURE__ */ React2.createElement("div", {
|
|
76
|
+
className: classNameBlock("next-back-btn")
|
|
77
|
+
}, /* @__PURE__ */ React2.createElement(DSButton, {
|
|
78
|
+
icon: /* @__PURE__ */ React2.createElement(ChevronSmallLeft, null),
|
|
115
79
|
size: "m"
|
|
116
|
-
})
|
|
117
|
-
icon:
|
|
80
|
+
}), /* @__PURE__ */ React2.createElement(DSButton, {
|
|
81
|
+
icon: /* @__PURE__ */ React2.createElement(ChevronSmallRight, null),
|
|
118
82
|
onClick: () => this.searchWord(),
|
|
119
83
|
size: "m"
|
|
120
84
|
})),
|
|
121
85
|
value: filteredText
|
|
122
|
-
}),
|
|
86
|
+
}), /* @__PURE__ */ React2.createElement(CheckOptionsGroup, null, /* @__PURE__ */ React2.createElement(DSCheckbox, {
|
|
123
87
|
checked: isCaseSensitive,
|
|
124
88
|
id: "case-sensitive-check",
|
|
125
89
|
labelText: "Case Sensitive",
|
|
126
90
|
name: "case-sensitive-check",
|
|
127
|
-
onChange: () => this.setState({
|
|
128
|
-
|
|
129
|
-
})
|
|
130
|
-
}), /*#__PURE__*/_jsx(DSCheckbox, {
|
|
91
|
+
onChange: () => this.setState({ isCaseSensitive: !isCaseSensitive })
|
|
92
|
+
}), /* @__PURE__ */ React2.createElement(DSCheckbox, {
|
|
131
93
|
checked: isWholeWord,
|
|
132
94
|
id: "whole-word-check",
|
|
133
95
|
labelText: "Whole Word",
|
|
134
96
|
name: "whole-word-check",
|
|
135
|
-
onChange: () => this.setState({
|
|
136
|
-
|
|
137
|
-
})
|
|
138
|
-
}), /*#__PURE__*/_jsx(DSCheckbox, {
|
|
97
|
+
onChange: () => this.setState({ isWholeWord: !isWholeWord })
|
|
98
|
+
}), /* @__PURE__ */ React2.createElement(DSCheckbox, {
|
|
139
99
|
checked: replace,
|
|
140
100
|
id: "replace-check",
|
|
141
101
|
labelText: "Replace",
|
|
142
102
|
name: "replace-check",
|
|
143
|
-
onChange: () => this.setState({
|
|
144
|
-
|
|
145
|
-
})
|
|
146
|
-
})), /*#__PURE__*/_jsx(DSButton, {
|
|
103
|
+
onChange: () => this.setState({ replace: !replace })
|
|
104
|
+
})), /* @__PURE__ */ React2.createElement(DSButton, {
|
|
147
105
|
buttonType: "secondary",
|
|
148
106
|
labelText: "Done",
|
|
149
|
-
onClick: () => this.setState({
|
|
150
|
-
replace: false,
|
|
151
|
-
find: false
|
|
152
|
-
}),
|
|
107
|
+
onClick: () => this.setState({ replace: false, find: false }),
|
|
153
108
|
size: "m"
|
|
154
|
-
})) : null, replace ?
|
|
155
|
-
className: classNameBlock(
|
|
156
|
-
},
|
|
109
|
+
})) : null, replace ? /* @__PURE__ */ React2.createElement("div", {
|
|
110
|
+
className: classNameBlock("replace")
|
|
111
|
+
}, /* @__PURE__ */ React2.createElement(DSTextBox, {
|
|
157
112
|
className: "find-word",
|
|
158
113
|
fluidWidth: false,
|
|
159
114
|
id: "replace-textbox",
|
|
160
|
-
onChange: e => this.setState({
|
|
161
|
-
replaceText: e.currentTarget.value
|
|
162
|
-
}),
|
|
115
|
+
onChange: (e) => this.setState({ replaceText: e.currentTarget.value }),
|
|
163
116
|
placeholder: "Replace",
|
|
164
117
|
value: replaceText
|
|
165
|
-
}),
|
|
166
|
-
className: classNameBlock(
|
|
167
|
-
},
|
|
118
|
+
}), /* @__PURE__ */ React2.createElement("div", {
|
|
119
|
+
className: classNameBlock("replace-btns")
|
|
120
|
+
}, /* @__PURE__ */ React2.createElement(DSButton, {
|
|
168
121
|
buttonType: "secondary",
|
|
169
122
|
labelText: "Replace",
|
|
170
123
|
onClick: () => this.searchWord(true, false),
|
|
171
124
|
size: "m"
|
|
172
|
-
}),
|
|
125
|
+
}), /* @__PURE__ */ React2.createElement(DSButton, {
|
|
173
126
|
buttonType: "secondary",
|
|
174
127
|
labelText: "Replace All",
|
|
175
128
|
onClick: () => this.searchWord(true, true),
|
|
176
129
|
size: "m"
|
|
177
130
|
}))) : null);
|
|
178
131
|
}
|
|
179
|
-
|
|
180
132
|
}
|
|
181
|
-
|
|
182
|
-
export {
|
|
133
|
+
var DSCodeEditorForm_default = DSCodeEditorForm;
|
|
134
|
+
export {
|
|
135
|
+
DSCodeEditorForm_default as default
|
|
136
|
+
};
|
|
137
|
+
//# sourceMappingURL=DSCodeEditorForm.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/components/DSCodeEditorForm.tsx"],
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable react/prop-types */\n/* eslint-disable max-lines */\nimport React, { Component } from 'react';\nimport DSButton from '@elliemae/ds-button';\nimport { DSCheckbox, DSTextBox, DSInputGroup } from '@elliemae/ds-form';\nimport { convertPropToCssClassName, aggregatedClasses } from '@elliemae/ds-classnames';\nimport { ChevronSmallLeft, ChevronSmallRight } from '@elliemae/ds-icons';\n\nconst blockName = 'code-editor';\n\nconst { cssClassName, classNameBlock } = convertPropToCssClassName(blockName);\n\nconst CheckOptionsGroup = aggregatedClasses('div')(`${blockName}-options-group`);\n\nclass DSCodeEditorForm extends Component {\n constructor(props) {\n super(props);\n this.state = {\n find: false,\n replace: false,\n isCaseSensitive: false,\n isWholeWord: false,\n filteredText: '',\n replaceText: '',\n };\n }\n\n searchWord(isReplace, all) {\n const {\n reactAceComponent: {\n current: { editor },\n },\n } = this.props;\n const { isCaseSensitive, isWholeWord, filteredText, replaceText } = this.state;\n const options = {\n backwards: false,\n wrap: true,\n caseSensitive: isCaseSensitive,\n wholeWord: isWholeWord,\n regExp: true,\n };\n editor.find(filteredText, options);\n const selectedContent = editor.getSelectedText();\n if (isReplace && replaceText && selectedContent) {\n if (all) {\n editor.findAll(filteredText, options);\n editor.replaceAll(replaceText);\n } else {\n const range = editor.selection.getRange();\n editor.session.replace(range, replaceText);\n }\n }\n }\n\n render() {\n const { fileName } = this.props;\n\n const { find, replace, isCaseSensitive, isWholeWord, filteredText, replaceText } = this.state;\n return (\n <div className={`${cssClassName}`}>\n {fileName ? (\n <div className={classNameBlock('file-name')}>\n File Name: <span> {fileName} </span>\n </div>\n ) : null}\n <div className={classNameBlock('find-replace-btn')}>\n {!find && !replace ? (\n <DSButton buttonType=\"secondary\" labelText=\"Find\" onClick={() => this.setState({ find: true })} size=\"m\" />\n ) : null}\n {!replace ? (\n <DSButton\n buttonType=\"secondary\"\n labelText=\"Find & Replace\"\n onClick={() => this.setState({ replace: true })}\n size=\"m\"\n />\n ) : null}\n </div>\n {find || replace ? (\n <DSInputGroup className={classNameBlock('find')}>\n <DSTextBox\n className=\"find-word\"\n fluidWidth={false}\n id=\"find-textbox\"\n onChange={(e) => this.setState({ filteredText: e.currentTarget.value })}\n placeholder=\"Find\"\n rightComponent={\n <div className={classNameBlock('next-back-btn')}>\n <DSButton icon={<ChevronSmallLeft />} size=\"m\" />\n <DSButton icon={<ChevronSmallRight />} onClick={() => this.searchWord()} size=\"m\" />\n </div>\n }\n value={filteredText}\n />\n <CheckOptionsGroup>\n <DSCheckbox\n checked={isCaseSensitive}\n id=\"case-sensitive-check\"\n labelText=\"Case Sensitive\"\n name=\"case-sensitive-check\"\n onChange={() => this.setState({ isCaseSensitive: !isCaseSensitive })}\n />\n <DSCheckbox\n checked={isWholeWord}\n id=\"whole-word-check\"\n labelText=\"Whole Word\"\n name=\"whole-word-check\"\n onChange={() => this.setState({ isWholeWord: !isWholeWord })}\n />\n <DSCheckbox\n checked={replace}\n id=\"replace-check\"\n labelText=\"Replace\"\n name=\"replace-check\"\n onChange={() => this.setState({ replace: !replace })}\n />\n </CheckOptionsGroup>\n <DSButton\n buttonType=\"secondary\"\n labelText=\"Done\"\n onClick={() => this.setState({ replace: false, find: false })}\n size=\"m\"\n />\n </DSInputGroup>\n ) : null}\n {replace ? (\n <div className={classNameBlock('replace')}>\n <DSTextBox\n className=\"find-word\"\n fluidWidth={false}\n id=\"replace-textbox\"\n onChange={(e) => this.setState({ replaceText: e.currentTarget.value })}\n placeholder=\"Replace\"\n value={replaceText}\n />\n <div className={classNameBlock('replace-btns')}>\n <DSButton\n buttonType=\"secondary\"\n labelText=\"Replace\"\n onClick={() => this.searchWord(true, false)}\n size=\"m\"\n />\n <DSButton\n buttonType=\"secondary\"\n labelText=\"Replace All\"\n onClick={() => this.searchWord(true, true)}\n size=\"m\"\n />\n </div>\n </div>\n ) : null}\n </div>\n );\n }\n}\n\nexport default DSCodeEditorForm;\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -1,12 +1,10 @@
|
|
|
1
|
-
import
|
|
2
|
-
import
|
|
3
|
-
import AceEditor from
|
|
4
|
-
import DSModal from
|
|
5
|
-
import DSCodeEditorForm from
|
|
6
|
-
import
|
|
7
|
-
import
|
|
8
|
-
import { jsx } from 'react/jsx-runtime';
|
|
9
|
-
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import React2, { Component } from "react";
|
|
3
|
+
import AceEditor from "react-ace";
|
|
4
|
+
import DSModal from "@elliemae/ds-modal";
|
|
5
|
+
import DSCodeEditorForm from "./DSCodeEditorForm";
|
|
6
|
+
import "brace/mode/javascript.js";
|
|
7
|
+
import "brace/theme/tomorrow.js";
|
|
10
8
|
class DSCodeEditorImpl extends Component {
|
|
11
9
|
constructor(props) {
|
|
12
10
|
super(props);
|
|
@@ -14,9 +12,8 @@ class DSCodeEditorImpl extends Component {
|
|
|
14
12
|
value: props.value,
|
|
15
13
|
errors: []
|
|
16
14
|
};
|
|
17
|
-
this.reactAceComponent =
|
|
15
|
+
this.reactAceComponent = React2.createRef();
|
|
18
16
|
}
|
|
19
|
-
|
|
20
17
|
render() {
|
|
21
18
|
const {
|
|
22
19
|
onSave,
|
|
@@ -34,46 +31,39 @@ class DSCodeEditorImpl extends Component {
|
|
|
34
31
|
style,
|
|
35
32
|
containerProps
|
|
36
33
|
} = this.props;
|
|
37
|
-
const {
|
|
38
|
-
|
|
39
|
-
errors
|
|
40
|
-
} = this.state;
|
|
41
|
-
return /*#__PURE__*/_jsx(DSModal, {
|
|
34
|
+
const { value, errors } = this.state;
|
|
35
|
+
return /* @__PURE__ */ React2.createElement(DSModal, {
|
|
42
36
|
centered: false,
|
|
43
|
-
confirmLabel
|
|
44
|
-
containerProps
|
|
45
|
-
isOpen
|
|
46
|
-
modalTitle
|
|
47
|
-
modalType
|
|
37
|
+
confirmLabel,
|
|
38
|
+
containerProps,
|
|
39
|
+
isOpen,
|
|
40
|
+
modalTitle,
|
|
41
|
+
modalType,
|
|
48
42
|
onClose: () => onClose(value, fileName, errors),
|
|
49
43
|
onConfirm: () => onSave(value, fileName, errors),
|
|
50
44
|
onReject: () => onReject(value, fileName, errors),
|
|
51
|
-
rejectLabel
|
|
52
|
-
size
|
|
53
|
-
style
|
|
54
|
-
},
|
|
55
|
-
fileName
|
|
45
|
+
rejectLabel,
|
|
46
|
+
size,
|
|
47
|
+
style
|
|
48
|
+
}, /* @__PURE__ */ React2.createElement(DSCodeEditorForm, {
|
|
49
|
+
fileName,
|
|
56
50
|
reactAceComponent: this.reactAceComponent
|
|
57
|
-
}),
|
|
51
|
+
}), /* @__PURE__ */ React2.createElement(AceEditor, {
|
|
58
52
|
ref: this.reactAceComponent,
|
|
59
|
-
editorProps: {
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
maxLines: maxLines,
|
|
63
|
-
minLines: minLines,
|
|
53
|
+
editorProps: { $blockScrolling: true },
|
|
54
|
+
maxLines,
|
|
55
|
+
minLines,
|
|
64
56
|
mode: "javascript",
|
|
65
57
|
name: "ace-code-edior",
|
|
66
|
-
onChange: val => this.setState({
|
|
67
|
-
|
|
68
|
-
}),
|
|
69
|
-
onValidate: annotations => this.setState({
|
|
70
|
-
errors: annotations
|
|
71
|
-
}),
|
|
58
|
+
onChange: (val) => this.setState({ value: val }),
|
|
59
|
+
onValidate: (annotations) => this.setState({ errors: annotations }),
|
|
72
60
|
theme: "tomorrow",
|
|
73
|
-
value
|
|
61
|
+
value
|
|
74
62
|
}));
|
|
75
63
|
}
|
|
76
|
-
|
|
77
64
|
}
|
|
78
|
-
|
|
79
|
-
export {
|
|
65
|
+
var DSCodeEditorImpl_default = DSCodeEditorImpl;
|
|
66
|
+
export {
|
|
67
|
+
DSCodeEditorImpl_default as default
|
|
68
|
+
};
|
|
69
|
+
//# sourceMappingURL=DSCodeEditorImpl.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/components/DSCodeEditorImpl.tsx"],
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { Component } from 'react';\nimport AceEditor from 'react-ace';\nimport DSModal from '@elliemae/ds-modal';\nimport DSCodeEditorForm from './DSCodeEditorForm';\nimport 'brace/mode/javascript.js';\nimport 'brace/theme/tomorrow.js';\n\nclass DSCodeEditorImpl extends Component {\n constructor(props) {\n super(props);\n this.state = {\n value: props.value,\n errors: [],\n };\n this.reactAceComponent = React.createRef();\n }\n\n render() {\n const {\n onSave,\n onClose,\n onReject,\n isOpen,\n fileName,\n confirmLabel,\n maxLines,\n minLines,\n modalTitle,\n modalType,\n rejectLabel,\n size,\n style,\n containerProps,\n } = this.props;\n\n const { value, errors } = this.state;\n return (\n <DSModal\n centered={false}\n confirmLabel={confirmLabel}\n containerProps={containerProps}\n isOpen={isOpen}\n modalTitle={modalTitle}\n modalType={modalType}\n onClose={() => onClose(value, fileName, errors)}\n onConfirm={() => onSave(value, fileName, errors)}\n onReject={() => onReject(value, fileName, errors)}\n rejectLabel={rejectLabel}\n size={size}\n style={style}\n >\n <DSCodeEditorForm\n fileName={fileName}\n reactAceComponent={this.reactAceComponent}\n />\n <AceEditor\n ref={this.reactAceComponent}\n editorProps={{ $blockScrolling: true }}\n maxLines={maxLines}\n minLines={minLines}\n mode=\"javascript\"\n name=\"ace-code-edior\"\n onChange={val => this.setState({ value: val })}\n onValidate={annotations => this.setState({ errors: annotations })}\n theme=\"tomorrow\"\n value={value}\n />\n </DSModal>\n );\n }\n}\n\nexport default DSCodeEditorImpl;\n"],
|
|
5
|
+
"mappings": "AAAA;ACAA;AACA;AACA;AACA;AACA;AACA;AAEA,+BAA+B,UAAU;AAAA,EACvC,YAAY,OAAO;AACjB,UAAM;AACN,SAAK,QAAQ;AAAA,MACX,OAAO,MAAM;AAAA,MACb,QAAQ;AAAA;AAEV,SAAK,oBAAoB,OAAM;AAAA;AAAA,EAGjC,SAAS;AACP,UAAM;AAAA,MACJ;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,QACE,KAAK;AAET,UAAM,EAAE,OAAO,WAAW,KAAK;AAC/B,WACE,qCAAC,SAAD;AAAA,MACE,UAAU;AAAA,MACV;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,SAAS,MAAM,QAAQ,OAAO,UAAU;AAAA,MACxC,WAAW,MAAM,OAAO,OAAO,UAAU;AAAA,MACzC,UAAU,MAAM,SAAS,OAAO,UAAU;AAAA,MAC1C;AAAA,MACA;AAAA,MACA;AAAA,OAEA,qCAAC,kBAAD;AAAA,MACE;AAAA,MACA,mBAAmB,KAAK;AAAA,QAE1B,qCAAC,WAAD;AAAA,MACE,KAAK,KAAK;AAAA,MACV,aAAa,EAAE,iBAAiB;AAAA,MAChC;AAAA,MACA;AAAA,MACA,MAAK;AAAA,MACL,MAAK;AAAA,MACL,UAAU,SAAO,KAAK,SAAS,EAAE,OAAO;AAAA,MACxC,YAAY,iBAAe,KAAK,SAAS,EAAE,QAAQ;AAAA,MACnD,OAAM;AAAA,MACN;AAAA;AAAA;AAAA;AAOV,IAAO,2BAAQ;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
package/esm/index.js
CHANGED
|
@@ -1 +1,7 @@
|
|
|
1
|
-
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import { default as default2, CodeEditorWithSchema } from "./DSCodeEditor";
|
|
3
|
+
export {
|
|
4
|
+
CodeEditorWithSchema,
|
|
5
|
+
default2 as default
|
|
6
|
+
};
|
|
7
|
+
//# sourceMappingURL=index.js.map
|
package/esm/index.js.map
ADDED
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/index.tsx"],
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export { default, CodeEditorWithSchema } from './DSCodeEditor';\n"],
|
|
5
|
+
"mappings": "AAAA;ACAA;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elliemae/ds-codeeditor",
|
|
3
|
-
"version": "2.
|
|
3
|
+
"version": "2.3.0-alpha.1",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "ICE MT - Dimsum - Code Editor",
|
|
6
6
|
"module": "./esm/index.js",
|
|
@@ -44,11 +44,11 @@
|
|
|
44
44
|
"build": "node ../../scripts/build/build.js"
|
|
45
45
|
},
|
|
46
46
|
"dependencies": {
|
|
47
|
-
"@elliemae/ds-button": "2.
|
|
48
|
-
"@elliemae/ds-classnames": "2.
|
|
49
|
-
"@elliemae/ds-form": "2.
|
|
50
|
-
"@elliemae/ds-icons": "2.
|
|
51
|
-
"@elliemae/ds-modal": "2.
|
|
47
|
+
"@elliemae/ds-button": "2.3.0-alpha.1",
|
|
48
|
+
"@elliemae/ds-classnames": "2.3.0-alpha.1",
|
|
49
|
+
"@elliemae/ds-form": "2.3.0-alpha.1",
|
|
50
|
+
"@elliemae/ds-icons": "2.3.0-alpha.1",
|
|
51
|
+
"@elliemae/ds-modal": "2.3.0-alpha.1",
|
|
52
52
|
"brace": "~0.11.1",
|
|
53
53
|
"react-ace": "~6.6.0",
|
|
54
54
|
"react-desc": "~4.1.3"
|
package/types/DSCodeEditor.d.ts
CHANGED
|
@@ -99,27 +99,7 @@ declare const DSCodeEditor: {
|
|
|
99
99
|
};
|
|
100
100
|
};
|
|
101
101
|
declare const CodeEditorWithSchema: {
|
|
102
|
-
(props?:
|
|
103
|
-
containerProps?: {} | undefined;
|
|
104
|
-
value?: string | undefined;
|
|
105
|
-
onSave?: (() => null) | undefined;
|
|
106
|
-
onClose?: (() => null) | undefined;
|
|
107
|
-
onReject?: (() => null) | undefined;
|
|
108
|
-
onChange?: (() => null) | undefined;
|
|
109
|
-
isOpen?: boolean | undefined;
|
|
110
|
-
fileName?: string | undefined;
|
|
111
|
-
confirmLabel?: string | undefined;
|
|
112
|
-
maxLines?: number | undefined;
|
|
113
|
-
minLines?: number | undefined;
|
|
114
|
-
modalTitle?: string | undefined;
|
|
115
|
-
modalType?: string | undefined;
|
|
116
|
-
rejectLabel?: string | undefined;
|
|
117
|
-
size?: string | undefined;
|
|
118
|
-
style?: {} | undefined;
|
|
119
|
-
useModal?: boolean | undefined;
|
|
120
|
-
showHeader?: boolean | undefined;
|
|
121
|
-
showSyntaxChecks?: boolean | undefined;
|
|
122
|
-
} | undefined): JSX.Element;
|
|
102
|
+
(props?: unknown): JSX.Element;
|
|
123
103
|
propTypes: unknown;
|
|
124
104
|
toTypescript: () => import("react-desc").TypescriptSchema;
|
|
125
105
|
};
|