@elliemae/ds-codeeditor 2.2.0-alpha.3 → 3.0.0-next.0
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 +116 -120
- package/cjs/components/DSCodeEditorForm.js +109 -86
- package/cjs/components/DSCodeEditorImpl.js +52 -62
- package/cjs/index.js +10 -36
- package/esm/DSCodeEditor.js +103 -89
- package/esm/components/DSCodeEditorForm.js +101 -56
- package/esm/components/DSCodeEditorImpl.js +42 -32
- package/esm/index.js +1 -7
- package/package.json +6 -6
- package/cjs/DSCodeEditor.js.map +0 -7
- package/cjs/components/DSCodeEditorForm.js.map +0 -7
- package/cjs/components/DSCodeEditorImpl.js.map +0 -7
- package/cjs/index.js.map +0 -7
- package/esm/DSCodeEditor.js.map +0 -7
- package/esm/components/DSCodeEditorForm.js.map +0 -7
- package/esm/components/DSCodeEditorImpl.js.map +0 -7
- package/esm/index.js.map +0 -7
package/cjs/DSCodeEditor.js
CHANGED
|
@@ -1,131 +1,127 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
var
|
|
6
|
-
|
|
7
|
-
var
|
|
8
|
-
var
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
var
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
isOpen = false,
|
|
49
|
-
fileName = "",
|
|
50
|
-
confirmLabel = "Save",
|
|
51
|
-
maxLines = 20,
|
|
52
|
-
minLines = 20,
|
|
53
|
-
modalTitle = "Javascript Editor",
|
|
54
|
-
modalType = "confirm",
|
|
55
|
-
rejectLabel = "Close",
|
|
56
|
-
size = "large",
|
|
57
|
-
style = {},
|
|
58
|
-
useModal = true,
|
|
59
|
-
showHeader = true,
|
|
60
|
-
showSyntaxChecks = true
|
|
61
|
-
}) => {
|
|
62
|
-
const [{ value, errors }, setState] = (0, import_react.useState)({
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
+
|
|
5
|
+
var _jsx = require('@babel/runtime/helpers/jsx');
|
|
6
|
+
require('core-js/modules/web.dom-collections.iterator.js');
|
|
7
|
+
var React = require('react');
|
|
8
|
+
var reactDesc = require('react-desc');
|
|
9
|
+
var DSModal = require('@elliemae/ds-modal');
|
|
10
|
+
var AceEditor = require('react-ace');
|
|
11
|
+
var DSCodeEditorForm = require('./components/DSCodeEditorForm.js');
|
|
12
|
+
require('brace/mode/javascript.js');
|
|
13
|
+
require('brace/theme/tomorrow.js');
|
|
14
|
+
var jsxRuntime = require('react/jsx-runtime');
|
|
15
|
+
|
|
16
|
+
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
17
|
+
|
|
18
|
+
var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
|
|
19
|
+
var DSModal__default = /*#__PURE__*/_interopDefaultLegacy(DSModal);
|
|
20
|
+
var AceEditor__default = /*#__PURE__*/_interopDefaultLegacy(AceEditor);
|
|
21
|
+
|
|
22
|
+
const DSCodeEditor = _ref => {
|
|
23
|
+
let {
|
|
24
|
+
containerProps = {},
|
|
25
|
+
value: defaultValue = '',
|
|
26
|
+
onSave = () => null,
|
|
27
|
+
onClose = () => null,
|
|
28
|
+
onReject = () => null,
|
|
29
|
+
onChange = () => null,
|
|
30
|
+
isOpen = false,
|
|
31
|
+
fileName = '',
|
|
32
|
+
confirmLabel = 'Save',
|
|
33
|
+
maxLines = 20,
|
|
34
|
+
minLines = 20,
|
|
35
|
+
modalTitle = 'Javascript Editor',
|
|
36
|
+
modalType = 'confirm',
|
|
37
|
+
rejectLabel = 'Close',
|
|
38
|
+
size = 'large',
|
|
39
|
+
style = {},
|
|
40
|
+
useModal = true,
|
|
41
|
+
showHeader = true,
|
|
42
|
+
showSyntaxChecks = true
|
|
43
|
+
} = _ref;
|
|
44
|
+
const [{
|
|
45
|
+
value,
|
|
46
|
+
errors
|
|
47
|
+
}, setState] = React.useState({
|
|
63
48
|
value: defaultValue,
|
|
64
49
|
errors: []
|
|
65
50
|
});
|
|
66
|
-
const reactAceComponent =
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
51
|
+
const reactAceComponent = React.useRef();
|
|
52
|
+
|
|
53
|
+
const editor = /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
|
|
54
|
+
children: [showHeader && /*#__PURE__*/_jsx__default["default"](DSCodeEditorForm, {
|
|
55
|
+
fileName: fileName,
|
|
56
|
+
reactAceComponent: reactAceComponent
|
|
57
|
+
}), /*#__PURE__*/jsxRuntime.jsx(AceEditor__default["default"], {
|
|
58
|
+
ref: reactAceComponent,
|
|
59
|
+
editorProps: {
|
|
60
|
+
$blockScrolling: true
|
|
61
|
+
},
|
|
62
|
+
maxLines: maxLines,
|
|
63
|
+
minLines: minLines,
|
|
64
|
+
mode: "javascript",
|
|
65
|
+
name: "ace-code-edior",
|
|
66
|
+
onChange: val => {
|
|
67
|
+
setState({
|
|
68
|
+
errors,
|
|
69
|
+
value: val
|
|
70
|
+
});
|
|
71
|
+
onChange(val, errors);
|
|
72
|
+
},
|
|
73
|
+
onValidate: annotations => setState({
|
|
74
|
+
value,
|
|
75
|
+
errors: annotations
|
|
76
|
+
}),
|
|
77
|
+
theme: "tomorrow",
|
|
78
|
+
setOptions: {
|
|
79
|
+
useWorker: showSyntaxChecks
|
|
80
|
+
},
|
|
81
|
+
value: value
|
|
82
|
+
})]
|
|
83
|
+
});
|
|
84
|
+
|
|
85
|
+
if (!useModal) return editor;
|
|
86
|
+
return /*#__PURE__*/_jsx__default["default"](DSModal__default["default"], {
|
|
91
87
|
centered: false,
|
|
92
|
-
confirmLabel,
|
|
93
|
-
containerProps,
|
|
94
|
-
isOpen,
|
|
95
|
-
modalTitle,
|
|
96
|
-
modalType,
|
|
88
|
+
confirmLabel: confirmLabel,
|
|
89
|
+
containerProps: containerProps,
|
|
90
|
+
isOpen: isOpen,
|
|
91
|
+
modalTitle: modalTitle,
|
|
92
|
+
modalType: modalType,
|
|
97
93
|
onClose: () => onClose(value, fileName, errors),
|
|
98
94
|
onConfirm: () => onSave(value, fileName, errors),
|
|
99
95
|
onReject: () => onReject(value, fileName, errors),
|
|
100
|
-
rejectLabel,
|
|
101
|
-
size,
|
|
102
|
-
style
|
|
103
|
-
}, editor);
|
|
96
|
+
rejectLabel: rejectLabel,
|
|
97
|
+
size: size,
|
|
98
|
+
style: style
|
|
99
|
+
}, void 0, editor);
|
|
104
100
|
};
|
|
101
|
+
|
|
105
102
|
const codeEditorProps = {
|
|
106
|
-
containerProps:
|
|
107
|
-
value:
|
|
108
|
-
onSave:
|
|
109
|
-
onClose:
|
|
110
|
-
onReject:
|
|
111
|
-
onChange:
|
|
112
|
-
isOpen:
|
|
113
|
-
fileName:
|
|
114
|
-
maxLines:
|
|
115
|
-
minLines:
|
|
116
|
-
modalTitle:
|
|
117
|
-
confirmLabel:
|
|
118
|
-
rejectLabel:
|
|
119
|
-
modalType:
|
|
120
|
-
size:
|
|
121
|
-
style:
|
|
122
|
-
useModal:
|
|
123
|
-
showHeader:
|
|
124
|
-
showSyntaxChecks:
|
|
103
|
+
containerProps: reactDesc.PropTypes.object.description('Set of Properties attached to the main container'),
|
|
104
|
+
value: reactDesc.PropTypes.string.description('editors content').isRequired,
|
|
105
|
+
onSave: reactDesc.PropTypes.func.description('function called when the user press save'),
|
|
106
|
+
onClose: reactDesc.PropTypes.func.description('function called when the user closes the modal'),
|
|
107
|
+
onReject: reactDesc.PropTypes.func.description('function called when is rejected'),
|
|
108
|
+
onChange: reactDesc.PropTypes.func.description('function executed when code editor value changes').isRequired,
|
|
109
|
+
isOpen: reactDesc.PropTypes.bool.description('Whether the modal is opened or not').defaultValue(false),
|
|
110
|
+
fileName: reactDesc.PropTypes.string.description('File name to open in the editor'),
|
|
111
|
+
maxLines: reactDesc.PropTypes.number.description('Max lines in the editor content').defaultValue(20),
|
|
112
|
+
minLines: reactDesc.PropTypes.number.description('Min lines in the editor content').defaultValue(20),
|
|
113
|
+
modalTitle: reactDesc.PropTypes.string.description('Modal title').defaultValue('Javascript Editor'),
|
|
114
|
+
confirmLabel: reactDesc.PropTypes.string.description('Customize modal confirm label').defaultValue('Save'),
|
|
115
|
+
rejectLabel: reactDesc.PropTypes.string.description('Customize modal rejection label').defaultValue('Close'),
|
|
116
|
+
modalType: reactDesc.PropTypes.oneOf(DSModal.modalTypes).description('Modal type').defaultValue('confirm'),
|
|
117
|
+
size: reactDesc.PropTypes.oneOf(['xsmall', 'small', 'medium', 'large', 'xlarge']).description('modal size').defaultValue('large'),
|
|
118
|
+
style: reactDesc.PropTypes.object.description('css inline style'),
|
|
119
|
+
useModal: reactDesc.PropTypes.bool.description('whether to use code editor inside modal or not').defaultValue(true),
|
|
120
|
+
showHeader: reactDesc.PropTypes.bool.description('show editors header').defaultValue(true),
|
|
121
|
+
showSyntaxChecks: reactDesc.PropTypes.bool.description('show syntax warnings and checks').defaultValue(true)
|
|
125
122
|
};
|
|
126
|
-
|
|
127
|
-
const CodeEditorWithSchema = (0, import_react_desc.describe)(DSCodeEditor);
|
|
123
|
+
const CodeEditorWithSchema = reactDesc.describe(DSCodeEditor);
|
|
128
124
|
CodeEditorWithSchema.propTypes = codeEditorProps;
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
125
|
+
|
|
126
|
+
exports.CodeEditorWithSchema = CodeEditorWithSchema;
|
|
127
|
+
exports["default"] = DSCodeEditor;
|
|
@@ -1,44 +1,31 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
var
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
var
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
var
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
__export(DSCodeEditorForm_exports, {
|
|
30
|
-
default: () => DSCodeEditorForm_default
|
|
31
|
-
});
|
|
32
|
-
var React = __toESM(require("react"));
|
|
33
|
-
var import_react = __toESM(require("react"));
|
|
34
|
-
var import_ds_button = __toESM(require("@elliemae/ds-button"));
|
|
35
|
-
var import_ds_form = __toESM(require("@elliemae/ds-form"));
|
|
36
|
-
var import_ds_classnames = __toESM(require("@elliemae/ds-classnames"));
|
|
37
|
-
var import_ds_icons = __toESM(require("@elliemae/ds-icons"));
|
|
38
|
-
const blockName = "code-editor";
|
|
39
|
-
const { cssClassName, classNameBlock } = (0, import_ds_classnames.convertPropToCssClassName)(blockName);
|
|
40
|
-
const CheckOptionsGroup = (0, import_ds_classnames.aggregatedClasses)("div")(`${blockName}-options-group`);
|
|
41
|
-
class DSCodeEditorForm extends import_react.Component {
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var _jsx = require('@babel/runtime/helpers/jsx');
|
|
4
|
+
require('core-js/modules/esnext.async-iterator.find.js');
|
|
5
|
+
require('core-js/modules/esnext.iterator.constructor.js');
|
|
6
|
+
require('core-js/modules/esnext.iterator.find.js');
|
|
7
|
+
require('core-js/modules/es.string.replace.js');
|
|
8
|
+
require('core-js/modules/es.string.replace-all.js');
|
|
9
|
+
var React = require('react');
|
|
10
|
+
var DSButton = require('@elliemae/ds-button');
|
|
11
|
+
var dsForm = require('@elliemae/ds-form');
|
|
12
|
+
var dsClassnames = require('@elliemae/ds-classnames');
|
|
13
|
+
var dsIcons = require('@elliemae/ds-icons');
|
|
14
|
+
|
|
15
|
+
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
16
|
+
|
|
17
|
+
var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
|
|
18
|
+
var DSButton__default = /*#__PURE__*/_interopDefaultLegacy(DSButton);
|
|
19
|
+
|
|
20
|
+
var _DSButton, _ChevronSmallRight;
|
|
21
|
+
const blockName = 'code-editor';
|
|
22
|
+
const {
|
|
23
|
+
cssClassName,
|
|
24
|
+
classNameBlock
|
|
25
|
+
} = dsClassnames.convertPropToCssClassName(blockName);
|
|
26
|
+
const CheckOptionsGroup = dsClassnames.aggregatedClasses('div')("".concat(blockName, "-options-group"));
|
|
27
|
+
|
|
28
|
+
class DSCodeEditorForm extends React.Component {
|
|
42
29
|
constructor(props) {
|
|
43
30
|
super(props);
|
|
44
31
|
this.state = {
|
|
@@ -46,17 +33,25 @@ class DSCodeEditorForm extends import_react.Component {
|
|
|
46
33
|
replace: false,
|
|
47
34
|
isCaseSensitive: false,
|
|
48
35
|
isWholeWord: false,
|
|
49
|
-
filteredText:
|
|
50
|
-
replaceText:
|
|
36
|
+
filteredText: '',
|
|
37
|
+
replaceText: ''
|
|
51
38
|
};
|
|
52
39
|
}
|
|
40
|
+
|
|
53
41
|
searchWord(isReplace, all) {
|
|
54
42
|
const {
|
|
55
43
|
reactAceComponent: {
|
|
56
|
-
current: {
|
|
44
|
+
current: {
|
|
45
|
+
editor
|
|
46
|
+
}
|
|
57
47
|
}
|
|
58
48
|
} = this.props;
|
|
59
|
-
const {
|
|
49
|
+
const {
|
|
50
|
+
isCaseSensitive,
|
|
51
|
+
isWholeWord,
|
|
52
|
+
filteredText,
|
|
53
|
+
replaceText
|
|
54
|
+
} = this.state;
|
|
60
55
|
const options = {
|
|
61
56
|
backwards: false,
|
|
62
57
|
wrap: true,
|
|
@@ -66,6 +61,7 @@ class DSCodeEditorForm extends import_react.Component {
|
|
|
66
61
|
};
|
|
67
62
|
editor.find(filteredText, options);
|
|
68
63
|
const selectedContent = editor.getSelectedText();
|
|
64
|
+
|
|
69
65
|
if (isReplace && replaceText && selectedContent) {
|
|
70
66
|
if (all) {
|
|
71
67
|
editor.findAll(filteredText, options);
|
|
@@ -76,91 +72,118 @@ class DSCodeEditorForm extends import_react.Component {
|
|
|
76
72
|
}
|
|
77
73
|
}
|
|
78
74
|
}
|
|
75
|
+
|
|
79
76
|
render() {
|
|
80
|
-
const {
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
77
|
+
const {
|
|
78
|
+
fileName
|
|
79
|
+
} = this.props;
|
|
80
|
+
const {
|
|
81
|
+
find,
|
|
82
|
+
replace,
|
|
83
|
+
isCaseSensitive,
|
|
84
|
+
isWholeWord,
|
|
85
|
+
filteredText,
|
|
86
|
+
replaceText
|
|
87
|
+
} = this.state;
|
|
88
|
+
return /*#__PURE__*/_jsx__default["default"]("div", {
|
|
89
|
+
className: "".concat(cssClassName)
|
|
90
|
+
}, void 0, fileName ? /*#__PURE__*/_jsx__default["default"]("div", {
|
|
91
|
+
className: classNameBlock('file-name')
|
|
92
|
+
}, void 0, "File Name: ", /*#__PURE__*/_jsx__default["default"]("span", {}, void 0, " ", fileName, " ")) : null, /*#__PURE__*/_jsx__default["default"]("div", {
|
|
93
|
+
className: classNameBlock('find-replace-btn')
|
|
94
|
+
}, void 0, !find && !replace ? /*#__PURE__*/_jsx__default["default"](DSButton__default["default"], {
|
|
89
95
|
buttonType: "secondary",
|
|
90
96
|
labelText: "Find",
|
|
91
|
-
onClick: () => this.setState({
|
|
97
|
+
onClick: () => this.setState({
|
|
98
|
+
find: true
|
|
99
|
+
}),
|
|
92
100
|
size: "m"
|
|
93
|
-
}) : null, !replace ?
|
|
101
|
+
}) : null, !replace ? /*#__PURE__*/_jsx__default["default"](DSButton__default["default"], {
|
|
94
102
|
buttonType: "secondary",
|
|
95
103
|
labelText: "Find & Replace",
|
|
96
|
-
onClick: () => this.setState({
|
|
104
|
+
onClick: () => this.setState({
|
|
105
|
+
replace: true
|
|
106
|
+
}),
|
|
97
107
|
size: "m"
|
|
98
|
-
}) : null), find || replace ?
|
|
99
|
-
className: classNameBlock(
|
|
100
|
-
},
|
|
108
|
+
}) : null), find || replace ? /*#__PURE__*/_jsx__default["default"](dsForm.DSInputGroup, {
|
|
109
|
+
className: classNameBlock('find')
|
|
110
|
+
}, void 0, /*#__PURE__*/_jsx__default["default"](dsForm.DSTextBox, {
|
|
101
111
|
className: "find-word",
|
|
102
112
|
fluidWidth: false,
|
|
103
113
|
id: "find-textbox",
|
|
104
|
-
onChange:
|
|
114
|
+
onChange: e => this.setState({
|
|
115
|
+
filteredText: e.currentTarget.value
|
|
116
|
+
}),
|
|
105
117
|
placeholder: "Find",
|
|
106
|
-
rightComponent:
|
|
107
|
-
className: classNameBlock(
|
|
108
|
-
},
|
|
109
|
-
icon:
|
|
118
|
+
rightComponent: /*#__PURE__*/_jsx__default["default"]("div", {
|
|
119
|
+
className: classNameBlock('next-back-btn')
|
|
120
|
+
}, void 0, _DSButton || (_DSButton = /*#__PURE__*/_jsx__default["default"](DSButton__default["default"], {
|
|
121
|
+
icon: /*#__PURE__*/_jsx__default["default"](dsIcons.ChevronSmallLeft, {}),
|
|
110
122
|
size: "m"
|
|
111
|
-
}),
|
|
112
|
-
icon:
|
|
123
|
+
})), /*#__PURE__*/_jsx__default["default"](DSButton__default["default"], {
|
|
124
|
+
icon: _ChevronSmallRight || (_ChevronSmallRight = /*#__PURE__*/_jsx__default["default"](dsIcons.ChevronSmallRight, {})),
|
|
113
125
|
onClick: () => this.searchWord(),
|
|
114
126
|
size: "m"
|
|
115
127
|
})),
|
|
116
128
|
value: filteredText
|
|
117
|
-
}),
|
|
129
|
+
}), /*#__PURE__*/_jsx__default["default"](CheckOptionsGroup, {}, void 0, /*#__PURE__*/_jsx__default["default"](dsForm.DSCheckbox, {
|
|
118
130
|
checked: isCaseSensitive,
|
|
119
131
|
id: "case-sensitive-check",
|
|
120
132
|
labelText: "Case Sensitive",
|
|
121
133
|
name: "case-sensitive-check",
|
|
122
|
-
onChange: () => this.setState({
|
|
123
|
-
|
|
134
|
+
onChange: () => this.setState({
|
|
135
|
+
isCaseSensitive: !isCaseSensitive
|
|
136
|
+
})
|
|
137
|
+
}), /*#__PURE__*/_jsx__default["default"](dsForm.DSCheckbox, {
|
|
124
138
|
checked: isWholeWord,
|
|
125
139
|
id: "whole-word-check",
|
|
126
140
|
labelText: "Whole Word",
|
|
127
141
|
name: "whole-word-check",
|
|
128
|
-
onChange: () => this.setState({
|
|
129
|
-
|
|
142
|
+
onChange: () => this.setState({
|
|
143
|
+
isWholeWord: !isWholeWord
|
|
144
|
+
})
|
|
145
|
+
}), /*#__PURE__*/_jsx__default["default"](dsForm.DSCheckbox, {
|
|
130
146
|
checked: replace,
|
|
131
147
|
id: "replace-check",
|
|
132
148
|
labelText: "Replace",
|
|
133
149
|
name: "replace-check",
|
|
134
|
-
onChange: () => this.setState({
|
|
135
|
-
|
|
150
|
+
onChange: () => this.setState({
|
|
151
|
+
replace: !replace
|
|
152
|
+
})
|
|
153
|
+
})), /*#__PURE__*/_jsx__default["default"](DSButton__default["default"], {
|
|
136
154
|
buttonType: "secondary",
|
|
137
155
|
labelText: "Done",
|
|
138
|
-
onClick: () => this.setState({
|
|
156
|
+
onClick: () => this.setState({
|
|
157
|
+
replace: false,
|
|
158
|
+
find: false
|
|
159
|
+
}),
|
|
139
160
|
size: "m"
|
|
140
|
-
})) : null, replace ?
|
|
141
|
-
className: classNameBlock(
|
|
142
|
-
},
|
|
161
|
+
})) : null, replace ? /*#__PURE__*/_jsx__default["default"]("div", {
|
|
162
|
+
className: classNameBlock('replace')
|
|
163
|
+
}, void 0, /*#__PURE__*/_jsx__default["default"](dsForm.DSTextBox, {
|
|
143
164
|
className: "find-word",
|
|
144
165
|
fluidWidth: false,
|
|
145
166
|
id: "replace-textbox",
|
|
146
|
-
onChange:
|
|
167
|
+
onChange: e => this.setState({
|
|
168
|
+
replaceText: e.currentTarget.value
|
|
169
|
+
}),
|
|
147
170
|
placeholder: "Replace",
|
|
148
171
|
value: replaceText
|
|
149
|
-
}),
|
|
150
|
-
className: classNameBlock(
|
|
151
|
-
},
|
|
172
|
+
}), /*#__PURE__*/_jsx__default["default"]("div", {
|
|
173
|
+
className: classNameBlock('replace-btns')
|
|
174
|
+
}, void 0, /*#__PURE__*/_jsx__default["default"](DSButton__default["default"], {
|
|
152
175
|
buttonType: "secondary",
|
|
153
176
|
labelText: "Replace",
|
|
154
177
|
onClick: () => this.searchWord(true, false),
|
|
155
178
|
size: "m"
|
|
156
|
-
}),
|
|
179
|
+
}), /*#__PURE__*/_jsx__default["default"](DSButton__default["default"], {
|
|
157
180
|
buttonType: "secondary",
|
|
158
181
|
labelText: "Replace All",
|
|
159
182
|
onClick: () => this.searchWord(true, true),
|
|
160
183
|
size: "m"
|
|
161
184
|
}))) : null);
|
|
162
185
|
}
|
|
186
|
+
|
|
163
187
|
}
|
|
164
|
-
|
|
165
|
-
module.exports =
|
|
166
|
-
//# sourceMappingURL=DSCodeEditorForm.js.map
|
|
188
|
+
|
|
189
|
+
module.exports = DSCodeEditorForm;
|