@semcore/bulk-textarea 1.4.0 → 1.4.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/CHANGELOG.md +6 -0
- package/lib/cjs/components/InputField/InputField.js +15 -13
- package/lib/cjs/components/InputField/InputField.js.map +1 -1
- package/lib/es6/components/InputField/InputField.js +15 -13
- package/lib/es6/components/InputField/InputField.js.map +1 -1
- package/lib/esm/BulkTextarea.mjs +202 -143
- package/lib/esm/components/ClearAll.mjs +14 -13
- package/lib/esm/components/Counter.mjs +15 -14
- package/lib/esm/components/ErrorsNavigation.mjs +30 -30
- package/lib/esm/components/InputField/InputField.mjs +872 -429
- package/lib/esm/components/InputField/inputField.shadow.css +171 -0
- package/lib/esm/index.mjs +2 -2
- package/lib/esm/translations/__intergalactic-dynamic-locales.mjs +30 -30
- package/lib/esm/translations/de.json.mjs +2 -2
- package/lib/esm/translations/en.json.mjs +2 -2
- package/lib/esm/translations/es.json.mjs +2 -2
- package/lib/esm/translations/fr.json.mjs +2 -2
- package/lib/esm/translations/it.json.mjs +2 -2
- package/lib/esm/translations/ja.json.mjs +2 -2
- package/lib/esm/translations/ko.json.mjs +2 -2
- package/lib/esm/translations/nl.json.mjs +2 -2
- package/lib/esm/translations/pl.json.mjs +2 -2
- package/lib/esm/translations/pt.json.mjs +2 -2
- package/lib/esm/translations/sv.json.mjs +2 -2
- package/lib/esm/translations/tr.json.mjs +2 -2
- package/lib/esm/translations/vi.json.mjs +2 -2
- package/lib/esm/translations/zh.json.mjs +2 -2
- package/package.json +9 -9
|
@@ -1,54 +1,86 @@
|
|
|
1
|
-
import
|
|
2
|
-
import
|
|
3
|
-
import
|
|
4
|
-
import
|
|
5
|
-
import
|
|
6
|
-
import
|
|
7
|
-
import
|
|
8
|
-
import
|
|
9
|
-
import
|
|
10
|
-
import { sstyled
|
|
11
|
-
import { sstyled as
|
|
12
|
-
import
|
|
13
|
-
import { Box
|
|
14
|
-
import
|
|
15
|
-
import { extractAriaProps
|
|
16
|
-
import
|
|
17
|
-
import
|
|
18
|
-
|
|
1
|
+
import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
|
|
2
|
+
import _createForOfIteratorHelper from "@babel/runtime/helpers/esm/createForOfIteratorHelper";
|
|
3
|
+
import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
|
|
4
|
+
import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
|
|
5
|
+
import _createClass from "@babel/runtime/helpers/esm/createClass";
|
|
6
|
+
import _assertThisInitialized from "@babel/runtime/helpers/esm/assertThisInitialized";
|
|
7
|
+
import _inherits from "@babel/runtime/helpers/esm/inherits";
|
|
8
|
+
import _createSuper from "@babel/runtime/helpers/esm/createSuper";
|
|
9
|
+
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
|
|
10
|
+
import { sstyled } from "@semcore/utils/lib/core/index";
|
|
11
|
+
import { sstyled as sstyled$1, assignProps, Component } from "@semcore/core";
|
|
12
|
+
import React from "react";
|
|
13
|
+
import { Box } from "@semcore/flex-box";
|
|
14
|
+
import Tooltip from "@semcore/tooltip";
|
|
15
|
+
import { extractAriaProps } from "@semcore/utils/lib/ariaProps";
|
|
16
|
+
import uniqueIDEnhancement from "@semcore/utils/lib/uniqueID";
|
|
17
|
+
import DOMPurify from "dompurify";
|
|
18
|
+
/*!__reshadow-styles__:"./inputField.shadow.css"*/
|
|
19
|
+
var style = (
|
|
19
20
|
/*__reshadow_css_start__*/
|
|
20
|
-
(
|
|
21
|
+
(sstyled.insert(
|
|
21
22
|
/*__inner_css_start__*/
|
|
22
|
-
'.
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
"
|
|
31
|
-
"
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
23
|
+
'.___SInputField_1b160_gg_>div{box-sizing:content-box;outline:0;border-radius:var(--intergalactic-control-rounded, 6px);border-color:var(--intergalactic-border-primary, #c4c7cf);border-style:solid;border-width:1px;overflow:auto;position:relative;background-color:var(--intergalactic-bg-primary-neutral, #ffffff);color:var(--intergalactic-text-primary, #191b23);word-wrap:break-word;word-break:break-word;font-family:inherit}.___SInputField_1b160_gg_>div:empty::before{content:"1. "attr(placeholder);color:var(--intergalactic-text-placeholder, #8a8e9b);position:absolute}.___SInputField_1b160_gg_>div:nth-child(even){color:red;counter-increment:row;margin-bottom:var(--intergalactic-spacing-1x, 4px);position:relative;word-break:break-all}.___SInputField_1b160_gg_>div:nth-child(even)::before{content:counter(row)".";display:inline-block;white-space:nowrap;text-align:right;color:var(--intergalactic-text-secondary, #6c6e79);margin-right:var(--intergalactic-spacing-1x, 4px)}.___SInputField_1b160_gg_>div>p{counter-increment:row;margin:0 0 var(--intergalactic-spacing-1x, 4px)0;position:relative;word-break:break-all;white-space:pre-wrap;padding:0 var(--intergalactic-spacing-5x, 20px)0 var(--intergalactic-spacing-4x, 16px)}.___SInputField_1b160_gg_>div>p:last-of-type{margin-bottom:0}.___SInputField_1b160_gg_>div>p:not(:empty)::before{content:counter(row)".";display:inline-block;white-space:nowrap;text-align:right;color:var(--intergalactic-text-secondary, #6c6e79);margin-right:var(--intergalactic-spacing-1x, 4px);position:absolute;left:0}.___SInputField_1b160_gg_>div>p[data-over-max-rows=true]{background-color:var(--intergalactic-bg-secondary-critical, #fff0f7)}.___SInputField_1b160_gg_>div:has(p:nth-child(n+10))>p{padding-left:var(--intergalactic-spacing-6x, 24px)}.___SInputField_1b160_gg_>div:has(p:nth-child(n+10))>p:nth-child(-n+9)::before{padding-left:var(--intergalactic-spacing-2x, 8px)}.___SInputField_1b160_gg_>div:has(p:nth-child(n+100))>p{padding-left:var(--intergalactic-spacing-8x, 32px)}.___SInputField_1b160_gg_>div:has(p:nth-child(n+100))>p:nth-child(-n+9)::before{padding-left:var(--intergalactic-spacing-4x, 16px)}.___SInputField_1b160_gg_>div:has(p:nth-child(n+100))>p:nth-child(n+10)::before{padding-left:var(--intergalactic-spacing-2x, 8px)}.___SInputField_1b160_gg_>div:has(p:nth-child(n+100))>p:nth-child(n+100)::before{padding-left:0}.___SInputField_1b160_gg_.__showErrors_1b160_gg_>div[aria-invalid]>p[aria-invalid]:after{content:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBmaWxsPSIjZDEwMDJmIj48cGF0aCBkPSJNNyA2aDJ2NEg3VjZabTIgN3YtMkg3djJoMloiLz48cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTYuMTUyIDEuMTcyYy43MTktMS41NjMgMi45NzctMS41NjMgMy42OTYgMGw2LjA0MyAxMy4xNDFjLjM2My43OTEtLjIyNSAxLjY4Ny0xLjEwOSAxLjY4N0gxLjIxOGMtLjg4NCAwLTEuNDcyLS44OTYtMS4xMDktMS42ODdMNi4xNTIgMS4xNzJabTcuMzc0IDEyLjgzN0w4IDEuOTkgMi40NzQgMTQuMDFoMTEuMDUyWiIvPjwvc3ZnPgo=\\ );position:absolute;right:0;top:var(--intergalactic-spacing-05x, 2px)}.___SInputField_1b160_gg_._size_m_1b160_gg_>div{padding:var(--intergalactic-spacing-2x, 8px) var(--intergalactic-spacing-4x, 16px);font-size:var(--intergalactic-fs-200, 14px);line-height:var(--intergalactic-lh-200, 142%);min-height:calc(var(--minRows_1b160)*20px);max-height:calc((var(--maxRows_1b160) - 1)*(20px + var(--intergalactic-spacing-1x, 4px)) + 18px)}.___SInputField_1b160_gg_._size_m_1b160_gg_>div:empty{padding-left:var(--intergalactic-spacing-8x, 32px)}.___SInputField_1b160_gg_._size_l_1b160_gg_>div:empty::before,.___SInputField_1b160_gg_._size_m_1b160_gg_>div:empty::before{left:var(--intergalactic-spacing-4x, 16px)}.___SInputField_1b160_gg_._size_l_1b160_gg_>div{padding:var(--intergalactic-spacing-3x, 12px) var(--intergalactic-spacing-4x, 16px);font-size:var(--intergalactic-fs-300, 16px);line-height:var(--intergalactic-lh-300, 150%);min-height:calc(var(--minRows_1b160)*24px);max-height:calc((var(--maxRows_1b160) - 1)*(24px + var(--intergalactic-spacing-1x, 4px)) + 20px)}.___SInputField_1b160_gg_._size_l_1b160_gg_>div:empty{padding-left:calc(var(--intergalactic-spacing-8x, 32px) + var(--intergalactic-spacing-05x, 2px))}.___SInputField_1b160_gg_._state_normal_1b160_gg_:not(.__disabled_1b160_gg_)>div:focus:focus{box-shadow:var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.5));border-color:var(--intergalactic-border-info-active, #006dca)}.___SInputField_1b160_gg_._state_valid_1b160_gg_>div{border-color:var(--intergalactic-border-success-active, #007c65)}.___SInputField_1b160_gg_._state_valid_1b160_gg_>div:focus{box-shadow:var(--intergalactic-keyboard-focus-valid, 0px 0px 0px 3px rgba(0, 159, 129, 0.5))}.___SInputField_1b160_gg_._state_invalid_1b160_gg_>div{border-color:var(--intergalactic-border-critical-active, #d1002f);background-image:var(--intergalactic-border-critical-pattern, repeating-linear-gradient(315deg, rgba(209, 0, 47, 1) 0, rgba(209, 0, 47, 1) 2px, transparent 0, transparent 50%));background-size:6px 6px;background-color:var(--intergalactic-bg-primary-neutral, #ffffff);border-bottom-left-radius:var(--intergalactic-control-rounded, 6px);border-top-left-radius:var(--intergalactic-control-rounded, 6px);background-repeat:repeat-y}.___SInputField_1b160_gg_._state_invalid_1b160_gg_>div:focus{box-shadow:var(--intergalactic-keyboard-focus-invalid, 0px 0px 0px 3px rgba(255, 73, 83, 0.5))}.___SInputField_1b160_gg_.__readonly_1b160_gg_>div{background-color:var(--intergalactic-bg-secondary-neutral, #f4f5f9)}.___SInputField_1b160_gg_.__disabled_1b160_gg_>div{opacity:var(--intergalactic-disabled-opacity, 0.3)}',
|
|
24
|
+
/*__inner_css_end__*/
|
|
25
|
+
"1b160_gg_"
|
|
26
|
+
), /*__reshadow_css_end__*/
|
|
27
|
+
{
|
|
28
|
+
"__SInputField": "___SInputField_1b160_gg_",
|
|
29
|
+
"_showErrors": "__showErrors_1b160_gg_",
|
|
30
|
+
"_readonly": "__readonly_1b160_gg_",
|
|
31
|
+
"_disabled": "__disabled_1b160_gg_",
|
|
32
|
+
"_size_m": "_size_m_1b160_gg_",
|
|
33
|
+
"--minRows": "--minRows_1b160",
|
|
34
|
+
"--maxRows": "--maxRows_1b160",
|
|
35
|
+
"_size_l": "_size_l_1b160_gg_",
|
|
36
|
+
"_state_normal": "_state_normal_1b160_gg_",
|
|
37
|
+
"_state_valid": "_state_valid_1b160_gg_",
|
|
38
|
+
"_state_invalid": "_state_invalid_1b160_gg_"
|
|
36
39
|
})
|
|
37
|
-
)
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
40
|
+
);
|
|
41
|
+
var InputField = /* @__PURE__ */ function(_Component) {
|
|
42
|
+
_inherits(InputField2, _Component);
|
|
43
|
+
var _super = _createSuper(InputField2);
|
|
44
|
+
function InputField2(props) {
|
|
45
|
+
var _this;
|
|
46
|
+
_classCallCheck(this, InputField2);
|
|
47
|
+
_this = _super.call(this, props);
|
|
48
|
+
_defineProperty(_assertThisInitialized(_this), "delimiter", "\n");
|
|
49
|
+
_defineProperty(_assertThisInitialized(_this), "skipEmptyLines", true);
|
|
50
|
+
_defineProperty(_assertThisInitialized(_this), "emptyLineValue", "");
|
|
51
|
+
_defineProperty(_assertThisInitialized(_this), "spaceLineValue", " ");
|
|
52
|
+
_defineProperty(_assertThisInitialized(_this), "containerRef", /* @__PURE__ */ React.createRef());
|
|
53
|
+
_defineProperty(_assertThisInitialized(_this), "textarea", void 0);
|
|
54
|
+
_defineProperty(_assertThisInitialized(_this), "popper", null);
|
|
55
|
+
_defineProperty(_assertThisInitialized(_this), "setPopperTrigger", null);
|
|
56
|
+
_defineProperty(_assertThisInitialized(_this), "errorByInteraction", null);
|
|
57
|
+
_defineProperty(_assertThisInitialized(_this), "changeTriggerTimeout", 0);
|
|
58
|
+
_defineProperty(_assertThisInitialized(_this), "isScrolling", false);
|
|
59
|
+
_defineProperty(_assertThisInitialized(_this), "scrollingTimeout", 0);
|
|
60
|
+
_defineProperty(_assertThisInitialized(_this), "toggleErrorsPopperTimeout", 0);
|
|
61
|
+
_defineProperty(_assertThisInitialized(_this), "isFocusing", false);
|
|
62
|
+
_defineProperty(_assertThisInitialized(_this), "linesCountTimeout", 0);
|
|
63
|
+
_defineProperty(_assertThisInitialized(_this), "state", {
|
|
64
|
+
visibleErrorPopper: false,
|
|
45
65
|
keyboardLineIndex: -1,
|
|
46
66
|
mouseLineIndex: -1
|
|
47
|
-
})
|
|
67
|
+
});
|
|
68
|
+
_this.handlePaste = _this.handlePaste.bind(_assertThisInitialized(_this));
|
|
69
|
+
_this.handleChange = _this.handleChange.bind(_assertThisInitialized(_this));
|
|
70
|
+
_this.handleFocus = _this.handleFocus.bind(_assertThisInitialized(_this));
|
|
71
|
+
_this.handleBlur = _this.handleBlur.bind(_assertThisInitialized(_this));
|
|
72
|
+
_this.handleKeyDown = _this.handleKeyDown.bind(_assertThisInitialized(_this));
|
|
73
|
+
_this.handleMouseDown = _this.handleMouseDown.bind(_assertThisInitialized(_this));
|
|
74
|
+
_this.handleMouseMove = _this.handleMouseMove.bind(_assertThisInitialized(_this));
|
|
75
|
+
_this.handleMouseLeave = _this.handleMouseLeave.bind(_assertThisInitialized(_this));
|
|
76
|
+
_this.handleScroll = _this.handleScroll.bind(_assertThisInitialized(_this));
|
|
77
|
+
_this.handleSelectAll = _this.handleSelectAll.bind(_assertThisInitialized(_this));
|
|
78
|
+
_this.textarea = _this.createContentEditableElement(props);
|
|
79
|
+
return _this;
|
|
48
80
|
}
|
|
49
|
-
|
|
81
|
+
_createClass(InputField2, [{
|
|
50
82
|
key: "uncontrolledProps",
|
|
51
|
-
value: function() {
|
|
83
|
+
value: function uncontrolledProps() {
|
|
52
84
|
return {
|
|
53
85
|
value: null,
|
|
54
86
|
linesCount: null,
|
|
@@ -57,583 +89,994 @@ var me = (
|
|
|
57
89
|
}
|
|
58
90
|
}, {
|
|
59
91
|
key: "componentDidMount",
|
|
60
|
-
value: function() {
|
|
61
|
-
var
|
|
62
|
-
(
|
|
92
|
+
value: function componentDidMount() {
|
|
93
|
+
var _this$containerRef$cu;
|
|
94
|
+
(_this$containerRef$cu = this.containerRef.current) === null || _this$containerRef$cu === void 0 ? void 0 : _this$containerRef$cu.append(this.textarea);
|
|
95
|
+
this.handleValueOutChange();
|
|
63
96
|
}
|
|
64
97
|
}, {
|
|
65
98
|
key: "componentDidUpdate",
|
|
66
|
-
value: function(
|
|
67
|
-
var
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
99
|
+
value: function componentDidUpdate(prevProps, prevState) {
|
|
100
|
+
var _this2 = this;
|
|
101
|
+
var _this$props = this.props, value = _this$props.value, errors = _this$props.errors, errorIndex = _this$props.errorIndex, showErrors = _this$props.showErrors, disabled = _this$props.disabled, readonly = _this$props.readonly, highlightErrorIndex = _this$props.highlightErrorIndex, lineProcessing = _this$props.lineProcessing, _this$props$ariaDesc = _this$props["aria-describedby"], ariaDescribedby = _this$props$ariaDesc === void 0 ? "" : _this$props$ariaDesc;
|
|
102
|
+
if (prevProps.value !== value) {
|
|
103
|
+
var currentValue = this.getValues().join(this.delimiter);
|
|
104
|
+
if (typeof value === "string" ? value !== currentValue : value.join(this.delimiter) !== currentValue) {
|
|
105
|
+
this.handleValueOutChange();
|
|
106
|
+
}
|
|
107
|
+
}
|
|
108
|
+
if (prevProps.showErrors !== showErrors || prevProps.errors.length !== errors.length) {
|
|
109
|
+
this.toggleAriaInvalid(showErrors, errors.length);
|
|
110
|
+
if (showErrors === false) {
|
|
111
|
+
this.textarea.setAttribute("aria-describedby", ariaDescribedby);
|
|
112
|
+
}
|
|
113
|
+
}
|
|
114
|
+
if (prevProps.errorIndex !== errorIndex && highlightErrorIndex) {
|
|
115
|
+
this.handleChangeErrorIndex(errorIndex);
|
|
116
|
+
}
|
|
117
|
+
if (prevProps.disabled !== disabled || prevProps.readonly !== readonly) {
|
|
118
|
+
if (this.isDisabled) {
|
|
119
|
+
this.textarea.setAttribute("contenteditable", "false");
|
|
120
|
+
this.removeEventListeners(this.textarea);
|
|
121
|
+
} else {
|
|
122
|
+
this.textarea.setAttribute("contenteditable", "true");
|
|
123
|
+
this.addEventListeners(this.textarea);
|
|
124
|
+
}
|
|
125
|
+
if (disabled) {
|
|
126
|
+
this.textarea.setAttribute("tabindex", "-1");
|
|
127
|
+
} else {
|
|
128
|
+
this.textarea.setAttribute("tabindex", "0");
|
|
129
|
+
}
|
|
130
|
+
}
|
|
131
|
+
var keyboardLineIndex = this.state.keyboardLineIndex;
|
|
132
|
+
if (prevState.keyboardLineIndex !== -1 && prevState.keyboardLineIndex !== keyboardLineIndex) {
|
|
133
|
+
if (lineProcessing) {
|
|
134
|
+
var _lines$prevState$keyb;
|
|
135
|
+
var lines = this.getValues();
|
|
136
|
+
var newValue = lineProcessing((_lines$prevState$keyb = lines[prevState.keyboardLineIndex]) !== null && _lines$prevState$keyb !== void 0 ? _lines$prevState$keyb : "", lines);
|
|
137
|
+
var newValueTextNode = document.createTextNode(newValue);
|
|
138
|
+
var paragraph = this.textarea.childNodes.item(prevState.keyboardLineIndex);
|
|
139
|
+
if (paragraph instanceof HTMLParagraphElement) {
|
|
140
|
+
if (newValue === "") {
|
|
141
|
+
paragraph.innerHTML = this.emptyLineValue;
|
|
142
|
+
} else {
|
|
143
|
+
paragraph.replaceChild(newValueTextNode, paragraph.childNodes.item(0));
|
|
144
|
+
}
|
|
145
|
+
}
|
|
146
|
+
this.validateLine(paragraph);
|
|
147
|
+
setTimeout(function() {
|
|
148
|
+
var newNode = _this2.textarea.childNodes.item(keyboardLineIndex);
|
|
149
|
+
if (newNode) {
|
|
150
|
+
_this2.setErrorIndex(newNode);
|
|
151
|
+
}
|
|
80
152
|
}, 0);
|
|
81
153
|
}
|
|
82
|
-
|
|
154
|
+
if (!showErrors) {
|
|
155
|
+
this.recalculateErrors();
|
|
156
|
+
}
|
|
157
|
+
this.recalculateLinesCount();
|
|
158
|
+
this.asProps.onChangeLineIndex(keyboardLineIndex);
|
|
83
159
|
}
|
|
84
160
|
}
|
|
85
161
|
}, {
|
|
86
162
|
key: "componentWillUnmount",
|
|
87
|
-
value: function() {
|
|
163
|
+
value: function componentWillUnmount() {
|
|
88
164
|
this.removeEventListeners(this.textarea);
|
|
89
165
|
}
|
|
90
166
|
}, {
|
|
91
167
|
key: "isDisabled",
|
|
92
|
-
get: function() {
|
|
93
|
-
var
|
|
94
|
-
return
|
|
168
|
+
get: function get() {
|
|
169
|
+
var _this$asProps = this.asProps, disabled = _this$asProps.disabled, readonly = _this$asProps.readonly;
|
|
170
|
+
return Boolean(disabled || readonly);
|
|
95
171
|
}
|
|
96
172
|
}, {
|
|
97
173
|
key: "popperDescribedId",
|
|
98
|
-
get: function() {
|
|
99
|
-
var
|
|
100
|
-
return "bulk-textarea-".concat(
|
|
174
|
+
get: function get() {
|
|
175
|
+
var uid = this.asProps.uid;
|
|
176
|
+
return "bulk-textarea-".concat(uid, "-popper-describedby");
|
|
101
177
|
}
|
|
102
178
|
}, {
|
|
103
179
|
key: "errorMessage",
|
|
104
|
-
get: function() {
|
|
105
|
-
var
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
var
|
|
180
|
+
get: function get() {
|
|
181
|
+
var _errorItem$errorMessa, _errorItem, _errorItem2;
|
|
182
|
+
var _this$asProps2 = this.asProps, errors = _this$asProps2.errors, errorIndex = _this$asProps2.errorIndex, commonErrorMessage = _this$asProps2.commonErrorMessage, prevError = _this$asProps2.prevError;
|
|
183
|
+
var _this$state = this.state, mouseLineIndex = _this$state.mouseLineIndex, keyboardLineIndex = _this$state.keyboardLineIndex;
|
|
184
|
+
var currentLineIndex = this.errorByInteraction === "keyboard" ? keyboardLineIndex : this.errorByInteraction === "mouse" ? mouseLineIndex : -1;
|
|
185
|
+
var errorItem = errors[errorIndex];
|
|
186
|
+
if (currentLineIndex !== -1) {
|
|
187
|
+
errorItem = errors.find(function(e) {
|
|
188
|
+
return (e === null || e === void 0 ? void 0 : e.lineIndex) === currentLineIndex;
|
|
189
|
+
});
|
|
190
|
+
}
|
|
191
|
+
var errorMessage = errors.length === 0 && !prevError ? null : (_errorItem$errorMessa = (_errorItem = errorItem) === null || _errorItem === void 0 ? void 0 : _errorItem.errorMessage) !== null && _errorItem$errorMessa !== void 0 ? _errorItem$errorMessa : commonErrorMessage === "" || errors.length === 0 ? prevError === null || prevError === void 0 ? void 0 : prevError.errorMessage : commonErrorMessage;
|
|
192
|
+
var isCommonError = !((_errorItem2 = errorItem) !== null && _errorItem2 !== void 0 && _errorItem2.errorMessage) && (commonErrorMessage === "" || errors.length === 0 ? !(prevError !== null && prevError !== void 0 && prevError.errorMessage) : true);
|
|
110
193
|
return {
|
|
111
|
-
errorMessage
|
|
112
|
-
isCommonError
|
|
194
|
+
errorMessage,
|
|
195
|
+
isCommonError
|
|
113
196
|
};
|
|
114
197
|
}
|
|
115
198
|
}, {
|
|
116
199
|
key: "createContentEditableElement",
|
|
117
|
-
value: function(
|
|
118
|
-
var
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
200
|
+
value: function createContentEditableElement(props) {
|
|
201
|
+
var textarea = document.createElement("div");
|
|
202
|
+
textarea.setAttribute("contentEditable", props.disabled || props.readonly ? "false" : "true");
|
|
203
|
+
textarea.setAttribute("role", "textbox");
|
|
204
|
+
textarea.setAttribute("classname", "editable");
|
|
205
|
+
if (props.id) {
|
|
206
|
+
textarea.setAttribute("id", props.id);
|
|
207
|
+
}
|
|
208
|
+
if (props.placeholder) {
|
|
209
|
+
textarea.setAttribute("placeholder", props.placeholder);
|
|
210
|
+
}
|
|
211
|
+
var _extractAriaProps = extractAriaProps(props), extractedAriaProps = _extractAriaProps.extractedAriaProps;
|
|
212
|
+
for (var key in extractedAriaProps) {
|
|
213
|
+
var ariaProp = props[key];
|
|
214
|
+
if (ariaProp) {
|
|
215
|
+
textarea.setAttribute(key, ariaProp);
|
|
216
|
+
}
|
|
217
|
+
}
|
|
218
|
+
if (!props.disabled) {
|
|
219
|
+
textarea.setAttribute("tabIndex", "0");
|
|
220
|
+
} else {
|
|
221
|
+
textarea.setAttribute("tabIndex", "-1");
|
|
222
|
+
}
|
|
223
|
+
if (!props.disabled && !props.readonly) {
|
|
224
|
+
this.addEventListeners(textarea);
|
|
225
|
+
} else {
|
|
226
|
+
textarea.addEventListener("keydown", this.handleSelectAll.bind(this));
|
|
124
227
|
}
|
|
125
|
-
return
|
|
228
|
+
return textarea;
|
|
126
229
|
}
|
|
127
230
|
}, {
|
|
128
231
|
key: "handleValueOutChange",
|
|
129
|
-
value: function() {
|
|
130
|
-
var
|
|
131
|
-
if (
|
|
132
|
-
this.textarea.textContent = ""
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
232
|
+
value: function handleValueOutChange() {
|
|
233
|
+
var _this$props2 = this.props, value = _this$props2.value, onChangeLinesCount = _this$props2.onChangeLinesCount;
|
|
234
|
+
if (value === "") {
|
|
235
|
+
this.textarea.textContent = "";
|
|
236
|
+
onChangeLinesCount(0);
|
|
237
|
+
} else {
|
|
238
|
+
var _this$textarea;
|
|
239
|
+
var listOfNodes = this.prepareNodesForPaste(value);
|
|
240
|
+
(_this$textarea = this.textarea).replaceChildren.apply(_this$textarea, _toConsumableArray(listOfNodes));
|
|
241
|
+
this.recalculateLinesCount();
|
|
242
|
+
this.recalculateErrors();
|
|
136
243
|
}
|
|
137
244
|
}
|
|
138
245
|
}, {
|
|
139
246
|
key: "handleScroll",
|
|
140
|
-
value: function() {
|
|
141
|
-
var
|
|
142
|
-
|
|
143
|
-
|
|
247
|
+
value: function handleScroll() {
|
|
248
|
+
var _this3 = this;
|
|
249
|
+
if (this.scrollingTimeout) {
|
|
250
|
+
clearTimeout(this.scrollingTimeout);
|
|
251
|
+
}
|
|
252
|
+
this.isScrolling = true;
|
|
253
|
+
this.scrollingTimeout = window.setTimeout(function() {
|
|
254
|
+
_this3.isScrolling = false;
|
|
144
255
|
}, 50);
|
|
145
256
|
}
|
|
146
257
|
}, {
|
|
147
258
|
key: "handleMouseDown",
|
|
148
|
-
value: function(
|
|
149
|
-
var
|
|
150
|
-
|
|
259
|
+
value: function handleMouseDown(event) {
|
|
260
|
+
var element = event.target;
|
|
261
|
+
if (element instanceof HTMLElement) {
|
|
262
|
+
this.toggleErrorsPopper("keyboardLineIndex", element);
|
|
263
|
+
this.setErrorIndex(element);
|
|
264
|
+
}
|
|
151
265
|
}
|
|
152
266
|
}, {
|
|
153
267
|
key: "handleMouseMove",
|
|
154
|
-
value: function(
|
|
268
|
+
value: function handleMouseMove(event) {
|
|
155
269
|
this.errorByInteraction = "mouse";
|
|
156
|
-
var
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
270
|
+
var element = event.target;
|
|
271
|
+
if (element !== this.textarea) {
|
|
272
|
+
if (this.isFocusing || element instanceof HTMLElement && element.getAttribute("aria-invalid") === "true") {
|
|
273
|
+
this.toggleErrorsPopper("mouseLineIndex", element);
|
|
274
|
+
} else {
|
|
275
|
+
this.setState({
|
|
276
|
+
visibleErrorPopper: false
|
|
277
|
+
});
|
|
278
|
+
}
|
|
279
|
+
}
|
|
160
280
|
}
|
|
161
281
|
}, {
|
|
162
282
|
key: "handleMouseLeave",
|
|
163
|
-
value: function(
|
|
164
|
-
if (this.changeTriggerTimeout
|
|
283
|
+
value: function handleMouseLeave(event) {
|
|
284
|
+
if (this.changeTriggerTimeout) {
|
|
285
|
+
clearTimeout(this.changeTriggerTimeout);
|
|
286
|
+
}
|
|
287
|
+
if (this.isFocusing) {
|
|
165
288
|
this.errorByInteraction = "keyboard";
|
|
166
|
-
var
|
|
167
|
-
this.toggleErrorsPopper("keyboardLineIndex",
|
|
289
|
+
var rowNode = this.getNodeFromSelection();
|
|
290
|
+
this.toggleErrorsPopper("keyboardLineIndex", rowNode, 0);
|
|
291
|
+
this.setState({
|
|
168
292
|
mouseLineIndex: -1
|
|
169
293
|
});
|
|
170
|
-
} else
|
|
294
|
+
} else {
|
|
171
295
|
this.setState({
|
|
172
|
-
visibleErrorPopper:
|
|
296
|
+
visibleErrorPopper: false
|
|
173
297
|
});
|
|
298
|
+
}
|
|
174
299
|
}
|
|
175
300
|
}, {
|
|
176
301
|
key: "handlePaste",
|
|
177
|
-
value: function(
|
|
178
|
-
var
|
|
179
|
-
|
|
180
|
-
var
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
302
|
+
value: function handlePaste(event) {
|
|
303
|
+
var _event$clipboardData;
|
|
304
|
+
event.preventDefault();
|
|
305
|
+
var validateOn = this.asProps.validateOn;
|
|
306
|
+
var value = (_event$clipboardData = event.clipboardData) === null || _event$clipboardData === void 0 ? void 0 : _event$clipboardData.getData("text/plain");
|
|
307
|
+
var listOfNodes = value ? this.prepareNodesForPaste(value) : [];
|
|
308
|
+
if (listOfNodes.length === 0) return;
|
|
309
|
+
var selection = document.getSelection();
|
|
310
|
+
if (selection !== null && selection !== void 0 && selection.anchorNode && selection !== null && selection !== void 0 && selection.focusNode) {
|
|
311
|
+
var anchorOffset = selection.anchorOffset;
|
|
312
|
+
var focusOffset = selection.focusOffset;
|
|
313
|
+
var documentPosition = selection.anchorNode.compareDocumentPosition(selection.focusNode);
|
|
314
|
+
var direction = this.getSelectionDirection();
|
|
315
|
+
var anchorElement = direction === "forward" ? selection.anchorNode : selection.focusNode;
|
|
316
|
+
var focusElement = direction === "forward" ? selection.focusNode : selection.anchorNode;
|
|
317
|
+
var fromOffset = direction === "forward" ? anchorOffset : focusOffset;
|
|
318
|
+
var toOffset = direction === "forward" ? focusOffset : anchorOffset;
|
|
319
|
+
var anchorNode = anchorElement instanceof Text ? anchorElement.parentElement : anchorElement;
|
|
320
|
+
var focusNode = focusElement instanceof Text ? focusElement.parentElement : focusElement;
|
|
321
|
+
var textNode = null;
|
|
322
|
+
var position = null;
|
|
323
|
+
if (focusElement === this.textarea) {
|
|
324
|
+
var _this$textarea2, _lastNodeToInsert$tex;
|
|
325
|
+
(_this$textarea2 = this.textarea).replaceChildren.apply(_this$textarea2, _toConsumableArray(listOfNodes));
|
|
326
|
+
var lastNodeToInsert = listOfNodes[listOfNodes.length - 1];
|
|
327
|
+
textNode = lastNodeToInsert.childNodes.item(0);
|
|
328
|
+
position = ((_lastNodeToInsert$tex = lastNodeToInsert.textContent) !== null && _lastNodeToInsert$tex !== void 0 ? _lastNodeToInsert$tex : "").length;
|
|
329
|
+
} else if (focusNode instanceof HTMLParagraphElement && anchorNode instanceof HTMLParagraphElement) {
|
|
330
|
+
var _anchorNode$textConte, _anchorNode$textConte2, _focusNode$textConten, _focusNode$textConten2, _ref3;
|
|
331
|
+
var before = (_anchorNode$textConte = anchorNode === null || anchorNode === void 0 ? void 0 : (_anchorNode$textConte2 = anchorNode.textContent) === null || _anchorNode$textConte2 === void 0 ? void 0 : _anchorNode$textConte2.substring(0, fromOffset)) !== null && _anchorNode$textConte !== void 0 ? _anchorNode$textConte : "";
|
|
332
|
+
var after = (_focusNode$textConten = focusNode === null || focusNode === void 0 ? void 0 : (_focusNode$textConten2 = focusNode.textContent) === null || _focusNode$textConten2 === void 0 ? void 0 : _focusNode$textConten2.substring(toOffset)) !== null && _focusNode$textConten !== void 0 ? _focusNode$textConten : "";
|
|
333
|
+
var noEmptyLineBefore = before.trim() === "" ? "" : before;
|
|
334
|
+
var noEmptyLineAfter = after.trim() === "" ? "" : after;
|
|
335
|
+
selection.deleteFromDocument();
|
|
336
|
+
if (documentPosition !== 0) {
|
|
337
|
+
this.textarea.removeChild(focusNode);
|
|
201
338
|
}
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
339
|
+
var firstNodeToInsert = listOfNodes.splice(0, 1)[0];
|
|
340
|
+
var _lastNodeToInsert = listOfNodes[listOfNodes.length - 1];
|
|
341
|
+
anchorNode.textContent = (_ref3 = noEmptyLineBefore + (firstNodeToInsert === null || firstNodeToInsert === void 0 ? void 0 : firstNodeToInsert.textContent)) !== null && _ref3 !== void 0 ? _ref3 : "";
|
|
342
|
+
anchorNode.after.apply(anchorNode, _toConsumableArray(listOfNodes));
|
|
343
|
+
if (_lastNodeToInsert) {
|
|
344
|
+
var _lastNodeToInsert$tex2, _lastNodeToInsert$tex3;
|
|
345
|
+
_lastNodeToInsert.textContent = ((_lastNodeToInsert$tex2 = _lastNodeToInsert.textContent) !== null && _lastNodeToInsert$tex2 !== void 0 ? _lastNodeToInsert$tex2 : "") + noEmptyLineAfter;
|
|
346
|
+
textNode = _lastNodeToInsert.childNodes.item(0);
|
|
347
|
+
position = ((_lastNodeToInsert$tex3 = _lastNodeToInsert.textContent) !== null && _lastNodeToInsert$tex3 !== void 0 ? _lastNodeToInsert$tex3 : "").length;
|
|
348
|
+
this.validateLine(_lastNodeToInsert);
|
|
349
|
+
this.setErrorIndex(_lastNodeToInsert);
|
|
205
350
|
} else {
|
|
206
|
-
var
|
|
207
|
-
|
|
351
|
+
var _anchorNode$textConte3, _anchorNode$textConte4;
|
|
352
|
+
position = ((_anchorNode$textConte3 = anchorNode.textContent) !== null && _anchorNode$textConte3 !== void 0 ? _anchorNode$textConte3 : "").length;
|
|
353
|
+
anchorNode.textContent = ((_anchorNode$textConte4 = anchorNode.textContent) !== null && _anchorNode$textConte4 !== void 0 ? _anchorNode$textConte4 : "") + noEmptyLineAfter;
|
|
354
|
+
textNode = anchorNode.childNodes.item(0);
|
|
355
|
+
this.validateLine(anchorNode);
|
|
356
|
+
this.setErrorIndex(anchorNode);
|
|
208
357
|
}
|
|
209
358
|
}
|
|
210
|
-
|
|
359
|
+
if (textNode instanceof Text) {
|
|
360
|
+
var _position, _position2;
|
|
361
|
+
this.setSelection(textNode, (_position = position) !== null && _position !== void 0 ? _position : 1, (_position2 = position) !== null && _position2 !== void 0 ? _position2 : 1);
|
|
362
|
+
this.toggleErrorsPopper("keyboardLineIndex", textNode.parentNode);
|
|
363
|
+
} else {
|
|
364
|
+
var _textNode;
|
|
365
|
+
console.warn("incorrect child type", textNode, (_textNode = textNode) === null || _textNode === void 0 ? void 0 : _textNode.parentNode);
|
|
366
|
+
}
|
|
367
|
+
}
|
|
368
|
+
this.recalculateLinesCount();
|
|
369
|
+
if (validateOn.includes("paste") || this.asProps.showErrors) {
|
|
370
|
+
this.recalculateErrors();
|
|
211
371
|
}
|
|
212
372
|
}
|
|
213
373
|
}, {
|
|
214
374
|
key: "handleChange",
|
|
215
|
-
value: function(
|
|
216
|
-
var
|
|
217
|
-
if (
|
|
218
|
-
var
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
375
|
+
value: function handleChange(event) {
|
|
376
|
+
var target = event.target;
|
|
377
|
+
if (target instanceof HTMLDivElement && event instanceof InputEvent) {
|
|
378
|
+
var _firstNode$textConten2;
|
|
379
|
+
var nodes = this.textarea.childNodes;
|
|
380
|
+
var firstNode = nodes.item(0);
|
|
381
|
+
var secondNode = nodes.item(1);
|
|
382
|
+
var selection = document.getSelection();
|
|
383
|
+
if (firstNode instanceof Text) {
|
|
384
|
+
var _firstNode$textConten;
|
|
385
|
+
var nodeText = (_firstNode$textConten = firstNode.textContent) !== null && _firstNode$textConten !== void 0 ? _firstNode$textConten : "";
|
|
386
|
+
var firstRow = document.createElement("p");
|
|
387
|
+
var text = document.createTextNode(nodeText);
|
|
388
|
+
firstRow.append(text);
|
|
389
|
+
firstNode.replaceWith(firstRow);
|
|
390
|
+
selection === null || selection === void 0 ? void 0 : selection.setPosition(firstRow, nodeText.length);
|
|
391
|
+
} else if (!firstNode || firstNode instanceof HTMLBRElement && nodes.length === 1) {
|
|
392
|
+
this.textarea.textContent = "";
|
|
393
|
+
this.setState({
|
|
394
|
+
keyboardLineIndex: 0
|
|
395
|
+
});
|
|
396
|
+
} else if (firstNode instanceof HTMLParagraphElement && !((_firstNode$textConten2 = firstNode.textContent) !== null && _firstNode$textConten2 !== void 0 && _firstNode$textConten2.trim())) {
|
|
397
|
+
if (nodes.length <= 1 || secondNode instanceof HTMLBRElement) {
|
|
398
|
+
this.textarea.textContent = "";
|
|
399
|
+
this.setState({
|
|
400
|
+
keyboardLineIndex: 0
|
|
401
|
+
});
|
|
402
|
+
}
|
|
230
403
|
}
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
404
|
+
var maxDeep = 10;
|
|
405
|
+
var rowNode = selection === null || selection === void 0 ? void 0 : selection.focusNode;
|
|
406
|
+
while (((_rowNode = rowNode) === null || _rowNode === void 0 ? void 0 : _rowNode.parentNode) !== this.textarea && maxDeep > 0) {
|
|
407
|
+
var _rowNode, _rowNode2;
|
|
408
|
+
rowNode = (_rowNode2 = rowNode) === null || _rowNode2 === void 0 ? void 0 : _rowNode2.parentNode;
|
|
409
|
+
maxDeep--;
|
|
410
|
+
}
|
|
411
|
+
if (rowNode instanceof HTMLParagraphElement) {
|
|
412
|
+
var _rowNode$textContent, _this$popper;
|
|
413
|
+
var childNodes = rowNode.childNodes;
|
|
414
|
+
var textContent = (_rowNode$textContent = rowNode.textContent) !== null && _rowNode$textContent !== void 0 ? _rowNode$textContent : "";
|
|
415
|
+
if (childNodes.length > 1) {
|
|
416
|
+
var _childNodes$item$text;
|
|
417
|
+
var offset = (_childNodes$item$text = childNodes.item(0).textContent) === null || _childNodes$item$text === void 0 ? void 0 : _childNodes$item$text.length;
|
|
418
|
+
rowNode.textContent = textContent;
|
|
419
|
+
if (offset) {
|
|
420
|
+
this.setSelection(rowNode.childNodes.item(0), offset, offset);
|
|
421
|
+
}
|
|
236
422
|
}
|
|
237
|
-
if (
|
|
238
|
-
var
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
423
|
+
if (textContent.length > 0) {
|
|
424
|
+
var firstSymbol = textContent.at(0);
|
|
425
|
+
var lastSymbol = textContent.at(textContent.length - 1);
|
|
426
|
+
if (firstSymbol === this.getEmptyParagraph().textContent || lastSymbol === this.getEmptyParagraph().textContent) {
|
|
427
|
+
var _offset = null;
|
|
428
|
+
if (firstSymbol === this.getEmptyParagraph().textContent) {
|
|
429
|
+
rowNode.textContent = textContent.substring(1);
|
|
430
|
+
_offset = event.inputType === "deleteContentBackward" || event.inputType === "deleteContentForward" ? 0 : rowNode.textContent.length;
|
|
431
|
+
} else if (lastSymbol === this.getEmptyParagraph().textContent) {
|
|
432
|
+
rowNode.textContent = textContent.substring(0, textContent.length - 1);
|
|
433
|
+
_offset = rowNode.textContent.length;
|
|
434
|
+
}
|
|
435
|
+
if (_offset) {
|
|
436
|
+
this.setSelection(rowNode.childNodes.item(0), _offset, _offset);
|
|
437
|
+
}
|
|
242
438
|
}
|
|
243
|
-
} else
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
var
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
439
|
+
} else if (childNodes.length === 1 && childNodes[0] instanceof HTMLBRElement) {
|
|
440
|
+
rowNode.innerHTML = this.emptyLineValue;
|
|
441
|
+
}
|
|
442
|
+
var _this$asProps3 = this.asProps, errors = _this$asProps3.errors, showErrors = _this$asProps3.showErrors;
|
|
443
|
+
var isValid = this.validateLine(rowNode);
|
|
444
|
+
this.recalculateErrors();
|
|
445
|
+
this.setErrorIndex(rowNode);
|
|
446
|
+
if (!isValid && showErrors) {
|
|
447
|
+
this.toggleErrorsPopper("keyboardLineIndex", rowNode, 0);
|
|
448
|
+
}
|
|
449
|
+
var trigger = !isValid || isValid && errors.length === 1 && errors[0].lineNode === rowNode ? rowNode : this.textarea;
|
|
450
|
+
if (showErrors && ((_this$popper = this.popper) === null || _this$popper === void 0 ? void 0 : _this$popper.current.state.elements.reference) !== trigger) {
|
|
451
|
+
if (this.shouldChangePopperTrigger(trigger)) {
|
|
452
|
+
var _this$setPopperTrigge;
|
|
453
|
+
(_this$setPopperTrigge = this.setPopperTrigger) === null || _this$setPopperTrigge === void 0 ? void 0 : _this$setPopperTrigge.call(this, trigger);
|
|
454
|
+
} else {
|
|
252
455
|
this.setState({
|
|
253
|
-
visibleErrorPopper:
|
|
456
|
+
visibleErrorPopper: false
|
|
254
457
|
});
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
458
|
+
}
|
|
459
|
+
}
|
|
460
|
+
} else if (rowNode === null) {
|
|
461
|
+
var _this$setPopperTrigge2;
|
|
462
|
+
(_this$setPopperTrigge2 = this.setPopperTrigger) === null || _this$setPopperTrigge2 === void 0 ? void 0 : _this$setPopperTrigge2.call(this, this.textarea);
|
|
463
|
+
if ((selection === null || selection === void 0 ? void 0 : selection.focusNode) === this.textarea && this.textarea.childNodes.length > 1) {
|
|
464
|
+
var nodeIndex = selection.focusOffset;
|
|
465
|
+
var emptyParagraph = this.textarea.childNodes.item(nodeIndex - 1);
|
|
466
|
+
var emptyBr = this.textarea.childNodes.item(nodeIndex);
|
|
467
|
+
this.textarea.removeChild(emptyBr);
|
|
468
|
+
if (emptyParagraph instanceof HTMLParagraphElement) {
|
|
469
|
+
emptyParagraph.innerHTML = this.emptyLineValue;
|
|
470
|
+
}
|
|
471
|
+
if (emptyParagraph) {
|
|
472
|
+
this.setSelection(emptyParagraph, 0, 0);
|
|
473
|
+
}
|
|
474
|
+
} else {
|
|
261
475
|
this.setSelection(this.textarea, 0, 0);
|
|
476
|
+
}
|
|
262
477
|
}
|
|
263
478
|
this.recalculateLinesCount();
|
|
264
479
|
}
|
|
265
480
|
}
|
|
266
481
|
}, {
|
|
267
482
|
key: "handleFocus",
|
|
268
|
-
value: function(
|
|
269
|
-
this.isFocusing =
|
|
483
|
+
value: function handleFocus(event) {
|
|
484
|
+
this.isFocusing = true;
|
|
485
|
+
this.errorByInteraction = "keyboard";
|
|
486
|
+
if (this.asProps.showErrors) {
|
|
487
|
+
this.toggleErrorsPopperByKeyboard(150);
|
|
488
|
+
} else {
|
|
489
|
+
this.toggleErrorsPopper("keyboardLineIndex", this.textarea);
|
|
490
|
+
}
|
|
270
491
|
}
|
|
271
492
|
}, {
|
|
272
493
|
key: "handleBlur",
|
|
273
|
-
value: function(
|
|
274
|
-
var
|
|
275
|
-
this.isFocusing =
|
|
276
|
-
|
|
494
|
+
value: function handleBlur(event) {
|
|
495
|
+
var _this4 = this;
|
|
496
|
+
this.isFocusing = false;
|
|
497
|
+
this.setState({
|
|
498
|
+
visibleErrorPopper: false
|
|
277
499
|
});
|
|
278
|
-
var
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
|
|
282
|
-
|
|
500
|
+
var _this$asProps4 = this.asProps, validateOn = _this$asProps4.validateOn, onBlur = _this$asProps4.onBlur, value = _this$asProps4.value;
|
|
501
|
+
if (validateOn.includes("blur")) {
|
|
502
|
+
this.recalculateErrors();
|
|
503
|
+
}
|
|
504
|
+
var valueToChange = typeof value === "string" ? this.getValues().join(this.delimiter) : this.getValues();
|
|
505
|
+
onBlur(valueToChange, event);
|
|
506
|
+
setTimeout(function() {
|
|
507
|
+
_this4.setState({
|
|
283
508
|
keyboardLineIndex: -1
|
|
284
509
|
});
|
|
285
510
|
}, 200);
|
|
286
511
|
}
|
|
287
512
|
}, {
|
|
288
513
|
key: "handleKeyDown",
|
|
289
|
-
value: function(
|
|
290
|
-
var
|
|
514
|
+
value: function handleKeyDown(event) {
|
|
515
|
+
var _this5 = this;
|
|
291
516
|
this.errorByInteraction = "keyboard";
|
|
292
|
-
var
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
|
|
517
|
+
var linesDelimiters = this.asProps.linesDelimiters;
|
|
518
|
+
var currentNode = this.getNodeFromSelection();
|
|
519
|
+
if (event.key === "Enter" || linesDelimiters !== null && linesDelimiters !== void 0 && linesDelimiters.includes(event.key)) {
|
|
520
|
+
if (currentNode === this.textarea) {
|
|
521
|
+
event.preventDefault();
|
|
522
|
+
}
|
|
523
|
+
if (currentNode instanceof HTMLParagraphElement) {
|
|
524
|
+
var _currentNode$textCont;
|
|
525
|
+
var currentRowValue = (_currentNode$textCont = currentNode.textContent) === null || _currentNode$textCont === void 0 ? void 0 : _currentNode$textCont.trim();
|
|
526
|
+
if (!currentRowValue) {
|
|
527
|
+
event.preventDefault();
|
|
528
|
+
} else {
|
|
529
|
+
var _selection$focusNode, _selectionNode$textCo, _currentNode$textCont2, _row$textContent;
|
|
530
|
+
event.preventDefault();
|
|
531
|
+
var selection = document.getSelection();
|
|
532
|
+
var selectionNode = (selection === null || selection === void 0 ? void 0 : selection.focusNode) instanceof Text ? selection.focusNode : selection === null || selection === void 0 ? void 0 : (_selection$focusNode = selection.focusNode) === null || _selection$focusNode === void 0 ? void 0 : _selection$focusNode.childNodes.item(0);
|
|
533
|
+
var selectionOffset = selection === null || selection === void 0 ? void 0 : selection.focusOffset;
|
|
534
|
+
var newRowValue = "";
|
|
535
|
+
if (selectionNode instanceof Text && selectionOffset !== void 0 && selectionOffset !== ((_selectionNode$textCo = selectionNode.textContent) === null || _selectionNode$textCo === void 0 ? void 0 : _selectionNode$textCo.length)) {
|
|
536
|
+
var _selectionNode$textCo2, _selectionNode$textCo3;
|
|
537
|
+
newRowValue = (_selectionNode$textCo2 = (_selectionNode$textCo3 = selectionNode.textContent) === null || _selectionNode$textCo3 === void 0 ? void 0 : _selectionNode$textCo3.substring(selectionOffset)) !== null && _selectionNode$textCo2 !== void 0 ? _selectionNode$textCo2 : this.emptyLineValue;
|
|
538
|
+
if (selectionNode.textContent) {
|
|
539
|
+
selectionNode.textContent = selectionNode.textContent.substring(0, selectionOffset);
|
|
540
|
+
}
|
|
541
|
+
}
|
|
542
|
+
if (((_currentNode$textCont2 = currentNode.textContent) === null || _currentNode$textCont2 === void 0 ? void 0 : _currentNode$textCont2.trim()) === "") {
|
|
543
|
+
currentNode.innerHTML = this.emptyLineValue;
|
|
305
544
|
}
|
|
306
|
-
|
|
307
|
-
|
|
308
|
-
|
|
309
|
-
|
|
310
|
-
|
|
545
|
+
var row = document.createElement("p");
|
|
546
|
+
if (newRowValue) {
|
|
547
|
+
row.textContent = newRowValue;
|
|
548
|
+
} else {
|
|
549
|
+
row.innerHTML = this.emptyLineValue;
|
|
550
|
+
}
|
|
551
|
+
currentNode.after(row);
|
|
552
|
+
this.setSelection(row, 0, 0);
|
|
553
|
+
this.validateLine(currentNode);
|
|
554
|
+
this.validateLine(row);
|
|
555
|
+
if (currentNode.previousSibling) {
|
|
556
|
+
this.validateLine(currentNode.previousSibling);
|
|
557
|
+
}
|
|
558
|
+
this.setErrorIndex(row);
|
|
559
|
+
if (((_row$textContent = row.textContent) === null || _row$textContent === void 0 ? void 0 : _row$textContent.trim()) !== "") {
|
|
560
|
+
this.recalculateLinesCount();
|
|
561
|
+
}
|
|
562
|
+
setTimeout(function() {
|
|
563
|
+
_this5.recalculateErrors();
|
|
564
|
+
}, 0);
|
|
565
|
+
this.toggleErrorsPopperByKeyboard(0);
|
|
311
566
|
}
|
|
312
567
|
}
|
|
313
|
-
} else if (
|
|
314
|
-
|
|
315
|
-
|
|
316
|
-
|
|
317
|
-
|
|
318
|
-
|
|
319
|
-
|
|
320
|
-
|
|
321
|
-
|
|
322
|
-
|
|
323
|
-
|
|
324
|
-
|
|
325
|
-
|
|
326
|
-
|
|
327
|
-
|
|
568
|
+
} else if (event.key === "ArrowDown" || event.key === "ArrowUp" || event.key === "ArrowLeft" || event.key === "ArrowRight") {
|
|
569
|
+
if (currentNode instanceof HTMLParagraphElement) {
|
|
570
|
+
this.handleCursorMovement(currentNode, event);
|
|
571
|
+
}
|
|
572
|
+
this.toggleErrorsPopperByKeyboard(200);
|
|
573
|
+
} else if (this.isDeleteKey(event) && currentNode instanceof HTMLParagraphElement) {
|
|
574
|
+
var _currentNode$textCont3;
|
|
575
|
+
if (((_currentNode$textCont3 = currentNode.textContent) === null || _currentNode$textCont3 === void 0 ? void 0 : _currentNode$textCont3.trim()) === "" && !this.isRangeSelection()) {
|
|
576
|
+
var prevNode = currentNode.previousSibling;
|
|
577
|
+
if (prevNode instanceof HTMLParagraphElement) {
|
|
578
|
+
var _prevNode$textContent;
|
|
579
|
+
event.preventDefault();
|
|
580
|
+
this.textarea.removeChild(currentNode);
|
|
581
|
+
this.toggleErrorsPopperByKeyboard(0);
|
|
582
|
+
if (((_prevNode$textContent = prevNode.textContent) === null || _prevNode$textContent === void 0 ? void 0 : _prevNode$textContent.trim()) === "" && prevNode.previousSibling === null && this.textarea.childNodes.length === 1) {
|
|
583
|
+
this.textarea.textContent = "";
|
|
584
|
+
this.setSelection(this.textarea, 0, 0);
|
|
585
|
+
} else {
|
|
586
|
+
if (prevNode instanceof HTMLParagraphElement) {
|
|
587
|
+
var _text$textContent$len, _text$textContent;
|
|
588
|
+
var text = prevNode.childNodes.item(0);
|
|
589
|
+
var offset = (_text$textContent$len = (_text$textContent = text.textContent) === null || _text$textContent === void 0 ? void 0 : _text$textContent.length) !== null && _text$textContent$len !== void 0 ? _text$textContent$len : 0;
|
|
590
|
+
this.setSelection(text, offset, offset);
|
|
591
|
+
} else {
|
|
592
|
+
console.warn("incorrect prevNode type", prevNode);
|
|
593
|
+
}
|
|
594
|
+
}
|
|
328
595
|
setTimeout(function() {
|
|
329
|
-
|
|
330
|
-
}, 0)
|
|
596
|
+
_this5.recalculateErrors();
|
|
597
|
+
}, 0);
|
|
598
|
+
this.toggleErrorsPopperByKeyboard(0);
|
|
331
599
|
}
|
|
332
600
|
} else if (this.isRangeSelection()) {
|
|
333
|
-
var
|
|
334
|
-
|
|
335
|
-
|
|
336
|
-
|
|
337
|
-
|
|
338
|
-
|
|
339
|
-
|
|
340
|
-
|
|
341
|
-
|
|
342
|
-
var
|
|
343
|
-
|
|
344
|
-
|
|
345
|
-
|
|
346
|
-
|
|
601
|
+
var _currentNode$textCont4, _focusElement$parentN, _anchorElement$parent, _focusElement$parentN2, _focusElement$parentN3;
|
|
602
|
+
var _selection = document.getSelection();
|
|
603
|
+
var direction = this.getSelectionDirection();
|
|
604
|
+
var anchorElement = direction === "backward" ? _selection === null || _selection === void 0 ? void 0 : _selection.focusNode : _selection === null || _selection === void 0 ? void 0 : _selection.anchorNode;
|
|
605
|
+
var focusElement = direction === "backward" ? _selection === null || _selection === void 0 ? void 0 : _selection.anchorNode : _selection === null || _selection === void 0 ? void 0 : _selection.focusNode;
|
|
606
|
+
var anchorOffset = direction === "backward" ? _selection === null || _selection === void 0 ? void 0 : _selection.focusOffset : _selection === null || _selection === void 0 ? void 0 : _selection.anchorOffset;
|
|
607
|
+
var focusOffset = direction === "backward" ? _selection === null || _selection === void 0 ? void 0 : _selection.anchorOffset : _selection === null || _selection === void 0 ? void 0 : _selection.focusOffset;
|
|
608
|
+
if (anchorElement === focusElement && anchorOffset === 0 && (focusElement === currentNode && focusOffset === 1 || focusOffset === ((_currentNode$textCont4 = currentNode.textContent) === null || _currentNode$textCont4 === void 0 ? void 0 : _currentNode$textCont4.length))) {
|
|
609
|
+
event.preventDefault();
|
|
610
|
+
var anchorParagraph = anchorElement === null || anchorElement === void 0 ? void 0 : anchorElement.parentElement;
|
|
611
|
+
var focusParagraph = focusElement === null || focusElement === void 0 ? void 0 : focusElement.parentElement;
|
|
612
|
+
var childNodes = this.textarea.childNodes;
|
|
613
|
+
if (anchorParagraph === childNodes.item(0) && focusParagraph === childNodes.item(childNodes.length - 1)) {
|
|
614
|
+
this.textarea.textContent = "";
|
|
615
|
+
this.setSelection(this.textarea, 0, 0);
|
|
616
|
+
} else {
|
|
617
|
+
currentNode.innerHTML = this.emptyLineValue;
|
|
618
|
+
this.validateLine(currentNode);
|
|
619
|
+
}
|
|
620
|
+
this.setErrorIndex(currentNode);
|
|
621
|
+
this.recalculateLinesCount();
|
|
622
|
+
setTimeout(function() {
|
|
623
|
+
_this5.recalculateErrors();
|
|
624
|
+
}, 0);
|
|
625
|
+
this.toggleErrorsPopperByKeyboard(0);
|
|
626
|
+
} else if (focusElement !== anchorElement && focusElement instanceof Text && anchorElement instanceof Text && (focusElement === null || focusElement === void 0 ? void 0 : focusElement.textContent) === (focusElement === null || focusElement === void 0 ? void 0 : (_focusElement$parentN = focusElement.parentNode) === null || _focusElement$parentN === void 0 ? void 0 : _focusElement$parentN.textContent) && (anchorElement === null || anchorElement === void 0 ? void 0 : anchorElement.textContent) === (anchorElement === null || anchorElement === void 0 ? void 0 : (_anchorElement$parent = anchorElement.parentNode) === null || _anchorElement$parent === void 0 ? void 0 : _anchorElement$parent.textContent) && anchorOffset === 0 && focusOffset === (focusElement === null || focusElement === void 0 ? void 0 : (_focusElement$parentN2 = focusElement.parentNode) === null || _focusElement$parentN2 === void 0 ? void 0 : (_focusElement$parentN3 = _focusElement$parentN2.textContent) === null || _focusElement$parentN3 === void 0 ? void 0 : _focusElement$parentN3.length)) {
|
|
627
|
+
event.preventDefault();
|
|
628
|
+
var paragraphs = Array.from(this.textarea.children);
|
|
629
|
+
var _anchorParagraph = anchorElement.parentElement;
|
|
630
|
+
var _focusParagraph = focusElement.parentElement;
|
|
631
|
+
var _childNodes = this.textarea.childNodes;
|
|
632
|
+
if (_anchorParagraph === _childNodes.item(0) && _focusParagraph === _childNodes.item(_childNodes.length - 1)) {
|
|
633
|
+
this.textarea.textContent = "";
|
|
634
|
+
this.setSelection(this.textarea, 0, 0);
|
|
635
|
+
} else {
|
|
636
|
+
var isCleaning = false;
|
|
637
|
+
var _iterator = _createForOfIteratorHelper(paragraphs), _step;
|
|
347
638
|
try {
|
|
348
|
-
for (
|
|
349
|
-
var
|
|
350
|
-
if (
|
|
351
|
-
|
|
352
|
-
|
|
639
|
+
for (_iterator.s(); !(_step = _iterator.n()).done; ) {
|
|
640
|
+
var paragraph = _step.value;
|
|
641
|
+
if (paragraph === _anchorParagraph || isCleaning) {
|
|
642
|
+
isCleaning = true;
|
|
643
|
+
if (paragraph === _focusParagraph) {
|
|
644
|
+
_focusParagraph.innerHTML = this.emptyLineValue;
|
|
645
|
+
this.setSelection(_focusParagraph, 0, 0);
|
|
353
646
|
break;
|
|
354
|
-
} else
|
|
355
|
-
this.textarea.removeChild(
|
|
647
|
+
} else {
|
|
648
|
+
this.textarea.removeChild(paragraph);
|
|
649
|
+
}
|
|
650
|
+
}
|
|
356
651
|
}
|
|
357
|
-
} catch (
|
|
358
|
-
|
|
652
|
+
} catch (err) {
|
|
653
|
+
_iterator.e(err);
|
|
359
654
|
} finally {
|
|
360
|
-
|
|
655
|
+
_iterator.f();
|
|
361
656
|
}
|
|
362
|
-
this.validateLine(
|
|
657
|
+
this.validateLine(currentNode);
|
|
363
658
|
}
|
|
364
|
-
this.setErrorIndex(
|
|
365
|
-
|
|
366
|
-
|
|
659
|
+
this.setErrorIndex(currentNode);
|
|
660
|
+
this.recalculateLinesCount();
|
|
661
|
+
setTimeout(function() {
|
|
662
|
+
_this5.recalculateErrors();
|
|
663
|
+
}, 0);
|
|
664
|
+
this.toggleErrorsPopperByKeyboard(0);
|
|
367
665
|
}
|
|
368
666
|
}
|
|
369
|
-
} else
|
|
667
|
+
} else if (event.key === "z" && (event.ctrlKey || event.metaKey)) {
|
|
668
|
+
event.preventDefault();
|
|
669
|
+
}
|
|
370
670
|
}
|
|
371
671
|
}, {
|
|
372
672
|
key: "render",
|
|
373
|
-
value: function() {
|
|
374
|
-
var
|
|
375
|
-
|
|
376
|
-
|
|
377
|
-
|
|
378
|
-
|
|
379
|
-
|
|
380
|
-
|
|
381
|
-
|
|
382
|
-
|
|
383
|
-
|
|
673
|
+
value: function render() {
|
|
674
|
+
var _ref = this.asProps, _ref2, _this$containerRef$cu2, _this6 = this;
|
|
675
|
+
var SInputField = Box;
|
|
676
|
+
var _this$asProps5 = this.asProps, styles = _this$asProps5.styles, showErrors = _this$asProps5.showErrors;
|
|
677
|
+
var visibleErrorPopper = this.state.visibleErrorPopper;
|
|
678
|
+
var _this$errorMessage = this.errorMessage, errorMessage = _this$errorMessage.errorMessage, isCommonError = _this$errorMessage.isCommonError;
|
|
679
|
+
var visibleErrorTooltip = showErrors && visibleErrorPopper && Boolean(errorMessage) && !this.isDisabled;
|
|
680
|
+
var _extractAriaProps2 = extractAriaProps(this.asProps), __excludeProps = _extractAriaProps2.__excludeProps;
|
|
681
|
+
return _ref2 = sstyled$1(styles), /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Tooltip, _ref2.cn("Tooltip", {
|
|
682
|
+
"interaction": "none",
|
|
683
|
+
"placement": isCommonError ? "right-start" : "right",
|
|
684
|
+
"visible": visibleErrorTooltip,
|
|
685
|
+
"theme": "warning",
|
|
686
|
+
"offset": isCommonError ? void 0 : [0, 26],
|
|
687
|
+
"preventOverflow": {
|
|
688
|
+
boundary: (_this$containerRef$cu2 = this.containerRef.current) !== null && _this$containerRef$cu2 !== void 0 ? _this$containerRef$cu2 : void 0,
|
|
689
|
+
tether: false
|
|
690
|
+
}
|
|
691
|
+
}), function(_ref4) {
|
|
692
|
+
var popper = _ref4.popper, setTrigger = _ref4.setTrigger;
|
|
693
|
+
if (!_this6.popper) {
|
|
694
|
+
_this6.setPopperTrigger = setTrigger;
|
|
695
|
+
_this6.popper = popper;
|
|
384
696
|
}
|
|
385
|
-
|
|
386
|
-
|
|
387
|
-
|
|
388
|
-
|
|
389
|
-
|
|
390
|
-
|
|
391
|
-
|
|
392
|
-
__excludeProps: ["onBlur", "value"].concat(W(v))
|
|
393
|
-
}, e)))));
|
|
697
|
+
return /* @__PURE__ */ React.createElement(Tooltip.Popper, {
|
|
698
|
+
id: _this6.popperDescribedId
|
|
699
|
+
}, errorMessage);
|
|
700
|
+
}), /* @__PURE__ */ React.createElement(SInputField, _ref2.cn("SInputField", _objectSpread({}, assignProps({
|
|
701
|
+
"ref": this.containerRef,
|
|
702
|
+
"__excludeProps": ["onBlur", "value"].concat(_toConsumableArray(__excludeProps))
|
|
703
|
+
}, _ref)))));
|
|
394
704
|
}
|
|
395
705
|
}, {
|
|
396
706
|
key: "prepareNodesForPaste",
|
|
397
|
-
value: function(
|
|
398
|
-
var
|
|
399
|
-
|
|
400
|
-
|
|
401
|
-
|
|
402
|
-
|
|
403
|
-
|
|
404
|
-
|
|
405
|
-
|
|
406
|
-
|
|
407
|
-
|
|
408
|
-
|
|
409
|
-
|
|
410
|
-
|
|
411
|
-
|
|
412
|
-
|
|
413
|
-
|
|
707
|
+
value: function prepareNodesForPaste(value) {
|
|
708
|
+
var _pasteProps$lineProce, _pasteProps$skipEmpty, _pasteProps$delimiter, _this7 = this;
|
|
709
|
+
var listOfNodes = [];
|
|
710
|
+
var pasteProps = this.asProps.pasteProps;
|
|
711
|
+
var lineProcessing = (_pasteProps$lineProce = pasteProps === null || pasteProps === void 0 ? void 0 : pasteProps.lineProcessing) !== null && _pasteProps$lineProce !== void 0 ? _pasteProps$lineProce : function(line) {
|
|
712
|
+
var trimmedLine = line.trim();
|
|
713
|
+
return trimmedLine === "" ? line : trimmedLine;
|
|
714
|
+
};
|
|
715
|
+
var skipEmptyLines = (_pasteProps$skipEmpty = pasteProps === null || pasteProps === void 0 ? void 0 : pasteProps.skipEmptyLines) !== null && _pasteProps$skipEmpty !== void 0 ? _pasteProps$skipEmpty : this.skipEmptyLines;
|
|
716
|
+
var delimiter = (_pasteProps$delimiter = pasteProps === null || pasteProps === void 0 ? void 0 : pasteProps.delimiter) !== null && _pasteProps$delimiter !== void 0 ? _pasteProps$delimiter : this.delimiter;
|
|
717
|
+
var lines = Array.isArray(value) ? value : value.split(delimiter);
|
|
718
|
+
lines.forEach(function(line, index) {
|
|
719
|
+
var preparedLine = lineProcessing(line, index, lines.length);
|
|
720
|
+
if (preparedLine === "" && skipEmptyLines === false || preparedLine !== "") {
|
|
721
|
+
var node = document.createElement("p");
|
|
722
|
+
if (preparedLine === "") {
|
|
723
|
+
node.innerHTML = _this7.emptyLineValue;
|
|
724
|
+
} else if (preparedLine.trim() === "") {
|
|
725
|
+
var allSpacesRegExp = new RegExp("\\s", "g");
|
|
726
|
+
node.innerHTML = DOMPurify.sanitize(preparedLine.replace(allSpacesRegExp, _this7.spaceLineValue));
|
|
727
|
+
} else {
|
|
728
|
+
node.append(document.createTextNode(preparedLine));
|
|
729
|
+
}
|
|
730
|
+
listOfNodes.push(node);
|
|
731
|
+
_this7.validateLine(node);
|
|
414
732
|
}
|
|
415
|
-
})
|
|
733
|
+
});
|
|
734
|
+
return listOfNodes;
|
|
416
735
|
}
|
|
417
736
|
}, {
|
|
418
737
|
key: "recalculateErrors",
|
|
419
|
-
value: function() {
|
|
420
|
-
var
|
|
421
|
-
this.textarea.childNodes.forEach(function(
|
|
422
|
-
if (
|
|
423
|
-
var
|
|
424
|
-
|
|
425
|
-
|
|
426
|
-
|
|
738
|
+
value: function recalculateErrors() {
|
|
739
|
+
var errors = [];
|
|
740
|
+
this.textarea.childNodes.forEach(function(node, index) {
|
|
741
|
+
if (node instanceof HTMLParagraphElement && node.getAttribute("aria-invalid") === "true") {
|
|
742
|
+
var _node$dataset$errorme;
|
|
743
|
+
var errorItem = {
|
|
744
|
+
errorMessage: (_node$dataset$errorme = node.dataset.errormessage) !== null && _node$dataset$errorme !== void 0 ? _node$dataset$errorme : "",
|
|
745
|
+
lineNode: node,
|
|
746
|
+
lineIndex: index
|
|
427
747
|
};
|
|
428
|
-
|
|
748
|
+
errors.push(errorItem);
|
|
429
749
|
}
|
|
430
|
-
})
|
|
750
|
+
});
|
|
751
|
+
this.asProps.onErrorsChange(errors);
|
|
431
752
|
}
|
|
432
753
|
}, {
|
|
433
754
|
key: "recalculateLinesCount",
|
|
434
|
-
value: function() {
|
|
435
|
-
var
|
|
436
|
-
|
|
437
|
-
|
|
438
|
-
|
|
439
|
-
|
|
440
|
-
|
|
755
|
+
value: function recalculateLinesCount() {
|
|
756
|
+
var _this8 = this;
|
|
757
|
+
if (this.linesCountTimeout) {
|
|
758
|
+
clearTimeout(this.linesCountTimeout);
|
|
759
|
+
}
|
|
760
|
+
this.linesCountTimeout = window.setTimeout(function() {
|
|
761
|
+
var lines = 0;
|
|
762
|
+
var _this8$asProps = _this8.asProps, maxLines = _this8$asProps.maxLines, linesCount = _this8$asProps.linesCount;
|
|
763
|
+
_this8.textarea.childNodes.forEach(function(node, index) {
|
|
764
|
+
if (node instanceof HTMLParagraphElement) {
|
|
765
|
+
node.dataset.overMaxRows = "false";
|
|
766
|
+
if (node.textContent !== _this8.getEmptyParagraph().textContent && node.textContent !== "") {
|
|
767
|
+
lines++;
|
|
768
|
+
if (lines > maxLines) {
|
|
769
|
+
node.dataset.overMaxRows = "true";
|
|
770
|
+
}
|
|
771
|
+
}
|
|
772
|
+
}
|
|
773
|
+
});
|
|
774
|
+
if (linesCount !== lines) {
|
|
775
|
+
_this8.asProps.onChangeLinesCount(lines);
|
|
776
|
+
}
|
|
441
777
|
}, 100);
|
|
442
778
|
}
|
|
443
779
|
}, {
|
|
444
780
|
key: "getValues",
|
|
445
|
-
value: function() {
|
|
446
|
-
var
|
|
447
|
-
|
|
448
|
-
var
|
|
449
|
-
if (((
|
|
450
|
-
|
|
451
|
-
else {
|
|
452
|
-
var
|
|
453
|
-
|
|
781
|
+
value: function getValues() {
|
|
782
|
+
var values = [];
|
|
783
|
+
this.textarea.childNodes.forEach(function(node) {
|
|
784
|
+
var _node$textContent;
|
|
785
|
+
if (((_node$textContent = node.textContent) === null || _node$textContent === void 0 ? void 0 : _node$textContent.trim()) === "") {
|
|
786
|
+
values.push("");
|
|
787
|
+
} else {
|
|
788
|
+
var _node$textContent2;
|
|
789
|
+
values.push((_node$textContent2 = node.textContent) !== null && _node$textContent2 !== void 0 ? _node$textContent2 : "");
|
|
454
790
|
}
|
|
455
|
-
})
|
|
791
|
+
});
|
|
792
|
+
return values;
|
|
456
793
|
}
|
|
457
794
|
}, {
|
|
458
795
|
key: "shouldChangePopperTrigger",
|
|
459
|
-
value: function(
|
|
460
|
-
return this.textarea !==
|
|
796
|
+
value: function shouldChangePopperTrigger(node) {
|
|
797
|
+
return this.textarea !== node || this.textarea === node && Boolean(this.asProps.commonErrorMessage);
|
|
461
798
|
}
|
|
462
799
|
}, {
|
|
463
800
|
key: "toggleErrorsPopperByKeyboard",
|
|
464
|
-
value: function(
|
|
465
|
-
var
|
|
466
|
-
|
|
467
|
-
|
|
468
|
-
}
|
|
469
|
-
|
|
470
|
-
|
|
471
|
-
|
|
801
|
+
value: function toggleErrorsPopperByKeyboard(timer) {
|
|
802
|
+
var _this9 = this;
|
|
803
|
+
if (this.toggleErrorsPopperTimeout) {
|
|
804
|
+
clearTimeout(this.toggleErrorsPopperTimeout);
|
|
805
|
+
}
|
|
806
|
+
if (!this.isScrolling) {
|
|
807
|
+
setTimeout(function() {
|
|
808
|
+
var rowNode = _this9.getNodeFromSelection();
|
|
809
|
+
_this9.toggleErrorsPopper("keyboardLineIndex", rowNode, timer);
|
|
810
|
+
}, 0);
|
|
811
|
+
} else {
|
|
812
|
+
this.toggleErrorsPopperTimeout = window.setTimeout(function() {
|
|
813
|
+
_this9.toggleErrorsPopperByKeyboard(timer);
|
|
814
|
+
}, 50);
|
|
815
|
+
}
|
|
472
816
|
}
|
|
473
817
|
}, {
|
|
474
818
|
key: "toggleErrorsPopper",
|
|
475
|
-
value: function(
|
|
476
|
-
var
|
|
477
|
-
|
|
478
|
-
|
|
479
|
-
|
|
480
|
-
|
|
481
|
-
|
|
482
|
-
|
|
483
|
-
|
|
484
|
-
|
|
485
|
-
|
|
486
|
-
|
|
487
|
-
|
|
488
|
-
|
|
489
|
-
|
|
490
|
-
|
|
491
|
-
|
|
819
|
+
value: function toggleErrorsPopper(key, target, timer) {
|
|
820
|
+
var _this10 = this;
|
|
821
|
+
if (target instanceof HTMLDivElement || target instanceof HTMLParagraphElement) {
|
|
822
|
+
if (this.changeTriggerTimeout) {
|
|
823
|
+
clearTimeout(this.changeTriggerTimeout);
|
|
824
|
+
}
|
|
825
|
+
this.changeTriggerTimeout = window.setTimeout(function() {
|
|
826
|
+
var targetElement = target === _this10.textarea ? _this10.getNodeFromSelection() : target;
|
|
827
|
+
var lineIndex = -1;
|
|
828
|
+
var isInvalidRow = false;
|
|
829
|
+
if (targetElement instanceof HTMLParagraphElement) {
|
|
830
|
+
isInvalidRow = targetElement.getAttribute("aria-invalid") === "true";
|
|
831
|
+
lineIndex = Array.from(_this10.textarea.childNodes).indexOf(targetElement);
|
|
832
|
+
} else if (targetElement === _this10.textarea) {
|
|
833
|
+
lineIndex = 0;
|
|
834
|
+
}
|
|
835
|
+
if (targetElement instanceof HTMLElement) {
|
|
836
|
+
_this10.setState(function(prevState) {
|
|
837
|
+
var newState = {
|
|
838
|
+
visibleErrorPopper: _this10.isFocusing && Boolean(_this10.asProps.commonErrorMessage) ? true : isInvalidRow,
|
|
839
|
+
mouseLineIndex: prevState.mouseLineIndex,
|
|
840
|
+
keyboardLineIndex: prevState.keyboardLineIndex
|
|
841
|
+
};
|
|
842
|
+
if (_this10.isFocusing || key === "mouseLineIndex" && isInvalidRow) {
|
|
843
|
+
newState[key] = lineIndex;
|
|
844
|
+
}
|
|
845
|
+
return newState;
|
|
846
|
+
}, function() {
|
|
847
|
+
_this10.errorByInteraction = key === "mouseLineIndex" ? "mouse" : "keyboard";
|
|
848
|
+
var trigger = isInvalidRow ? targetElement : _this10.textarea;
|
|
849
|
+
if (_this10.shouldChangePopperTrigger(trigger)) {
|
|
850
|
+
var _this10$setPopperTrig;
|
|
851
|
+
(_this10$setPopperTrig = _this10.setPopperTrigger) === null || _this10$setPopperTrig === void 0 ? void 0 : _this10$setPopperTrig.call(_this10, trigger);
|
|
852
|
+
_this10.forceUpdate();
|
|
853
|
+
}
|
|
854
|
+
});
|
|
492
855
|
}
|
|
856
|
+
}, timer !== null && timer !== void 0 ? timer : 50);
|
|
857
|
+
} else {
|
|
858
|
+
this.setState({
|
|
859
|
+
visibleErrorPopper: false
|
|
493
860
|
});
|
|
494
|
-
}
|
|
495
|
-
visibleErrorPopper: !1
|
|
496
|
-
});
|
|
861
|
+
}
|
|
497
862
|
}
|
|
498
863
|
}, {
|
|
499
864
|
key: "toggleAriaInvalid",
|
|
500
|
-
value: function(
|
|
501
|
-
|
|
865
|
+
value: function toggleAriaInvalid(showErrors, errorsLength) {
|
|
866
|
+
if (showErrors && errorsLength > 0) {
|
|
867
|
+
this.textarea.setAttribute("aria-describedby", this.popperDescribedId);
|
|
868
|
+
this.textarea.setAttribute("aria-invalid", "true");
|
|
869
|
+
} else {
|
|
870
|
+
this.textarea.removeAttribute("aria-invalid");
|
|
871
|
+
this.textarea.removeAttribute("aria-describedby");
|
|
872
|
+
}
|
|
502
873
|
}
|
|
503
874
|
}, {
|
|
504
875
|
key: "handleChangeErrorIndex",
|
|
505
|
-
value: function(
|
|
506
|
-
var
|
|
507
|
-
|
|
508
|
-
|
|
509
|
-
|
|
510
|
-
|
|
511
|
-
|
|
512
|
-
|
|
876
|
+
value: function handleChangeErrorIndex(errorIndex) {
|
|
877
|
+
var _error$lineNode, _this11 = this;
|
|
878
|
+
var error = this.asProps.errors[errorIndex];
|
|
879
|
+
var childNodes = this.textarea.childNodes;
|
|
880
|
+
var node = error ? (_error$lineNode = error.lineNode) !== null && _error$lineNode !== void 0 ? _error$lineNode : childNodes.item(error.lineIndex) : null;
|
|
881
|
+
var selection = document.getSelection();
|
|
882
|
+
if (selection && node instanceof HTMLParagraphElement) {
|
|
883
|
+
this.setState({
|
|
884
|
+
visibleErrorPopper: false
|
|
885
|
+
});
|
|
886
|
+
setTimeout(function() {
|
|
887
|
+
var text = node.childNodes.item(0);
|
|
888
|
+
if (text instanceof Text) {
|
|
889
|
+
_this11.setSelection(text, 0, text.length);
|
|
890
|
+
} else {
|
|
891
|
+
_this11.setSelection(node, 0, 1);
|
|
892
|
+
}
|
|
893
|
+
}, 150);
|
|
894
|
+
}
|
|
513
895
|
}
|
|
514
896
|
}, {
|
|
515
897
|
key: "validateLine",
|
|
516
|
-
value: function(
|
|
517
|
-
var
|
|
518
|
-
if (
|
|
519
|
-
var
|
|
520
|
-
|
|
898
|
+
value: function validateLine(node) {
|
|
899
|
+
var lineValidation = this.asProps.lineValidation;
|
|
900
|
+
if (lineValidation && node instanceof HTMLElement) {
|
|
901
|
+
var _node$textContent3;
|
|
902
|
+
var _lineValidation = lineValidation((_node$textContent3 = node.textContent) !== null && _node$textContent3 !== void 0 ? _node$textContent3 : "", this.getValues()), isValid = _lineValidation.isValid, errorMessage = _lineValidation.errorMessage;
|
|
903
|
+
if (!isValid) {
|
|
904
|
+
node.setAttribute("aria-invalid", "true");
|
|
905
|
+
node.dataset.errormessage = errorMessage;
|
|
906
|
+
} else {
|
|
907
|
+
node.removeAttribute("aria-invalid");
|
|
908
|
+
node.dataset.errormessage = void 0;
|
|
909
|
+
}
|
|
910
|
+
return isValid;
|
|
521
911
|
}
|
|
522
|
-
return
|
|
912
|
+
return true;
|
|
523
913
|
}
|
|
524
914
|
}, {
|
|
525
915
|
key: "setSelection",
|
|
526
|
-
value: function(
|
|
527
|
-
var
|
|
528
|
-
|
|
529
|
-
var
|
|
530
|
-
|
|
531
|
-
|
|
532
|
-
|
|
533
|
-
|
|
534
|
-
|
|
916
|
+
value: function setSelection(node, start, end) {
|
|
917
|
+
var scrollType = arguments.length > 3 && arguments[3] !== void 0 ? arguments[3] : "center";
|
|
918
|
+
var selection = document.getSelection();
|
|
919
|
+
var range = document.createRange();
|
|
920
|
+
range.setStart(node, start);
|
|
921
|
+
range.setEnd(node, end);
|
|
922
|
+
selection === null || selection === void 0 ? void 0 : selection.removeAllRanges();
|
|
923
|
+
selection === null || selection === void 0 ? void 0 : selection.addRange(range);
|
|
924
|
+
var nodeToScroll = node instanceof Text ? node.parentNode : node;
|
|
925
|
+
if (nodeToScroll instanceof HTMLElement) {
|
|
926
|
+
nodeToScroll.scrollIntoView({
|
|
927
|
+
block: scrollType,
|
|
928
|
+
inline: scrollType,
|
|
929
|
+
behavior: "smooth"
|
|
930
|
+
});
|
|
931
|
+
}
|
|
535
932
|
}
|
|
536
933
|
}, {
|
|
537
934
|
key: "getNodeFromSelection",
|
|
538
|
-
value: function() {
|
|
539
|
-
var
|
|
540
|
-
|
|
935
|
+
value: function getNodeFromSelection() {
|
|
936
|
+
var selection = document.getSelection();
|
|
937
|
+
var rowNode = (selection === null || selection === void 0 ? void 0 : selection.focusNode) instanceof Text ? selection.focusNode.parentNode : selection === null || selection === void 0 ? void 0 : selection.focusNode;
|
|
938
|
+
return rowNode !== null && rowNode !== void 0 ? rowNode : null;
|
|
541
939
|
}
|
|
542
940
|
}, {
|
|
543
941
|
key: "handleCursorMovement",
|
|
544
|
-
value: function(
|
|
545
|
-
var
|
|
546
|
-
switch (
|
|
942
|
+
value: function handleCursorMovement(currentNode, event) {
|
|
943
|
+
var nextNode = null;
|
|
944
|
+
switch (event.key) {
|
|
547
945
|
case "ArrowUp":
|
|
548
|
-
|
|
946
|
+
event.preventDefault();
|
|
947
|
+
nextNode = currentNode.previousSibling;
|
|
549
948
|
break;
|
|
550
949
|
case "ArrowDown":
|
|
551
|
-
|
|
950
|
+
event.preventDefault();
|
|
951
|
+
nextNode = currentNode.nextSibling;
|
|
552
952
|
break;
|
|
553
953
|
case "ArrowLeft": {
|
|
554
|
-
|
|
954
|
+
if (currentNode.textContent === this.getEmptyParagraph().textContent) {
|
|
955
|
+
event.preventDefault();
|
|
956
|
+
nextNode = currentNode.previousSibling;
|
|
957
|
+
}
|
|
555
958
|
break;
|
|
556
959
|
}
|
|
557
|
-
case "ArrowRight":
|
|
558
|
-
|
|
960
|
+
case "ArrowRight": {
|
|
961
|
+
if (currentNode.textContent === this.getEmptyParagraph().textContent) {
|
|
962
|
+
event.preventDefault();
|
|
963
|
+
nextNode = currentNode.nextSibling;
|
|
964
|
+
}
|
|
965
|
+
}
|
|
559
966
|
}
|
|
560
|
-
if (
|
|
561
|
-
var
|
|
562
|
-
|
|
967
|
+
if (nextNode instanceof HTMLParagraphElement) {
|
|
968
|
+
var _nextNode$textContent, _nextNode$textContent2, _selection$focusOffse;
|
|
969
|
+
var selection = document.getSelection();
|
|
970
|
+
var firstNode = nextNode.childNodes.item(0);
|
|
971
|
+
var nodeToSetSelection = firstNode instanceof Text ? firstNode : nextNode;
|
|
972
|
+
var textNode = (_nextNode$textContent = (_nextNode$textContent2 = nextNode.textContent) === null || _nextNode$textContent2 === void 0 ? void 0 : _nextNode$textContent2.trim()) !== null && _nextNode$textContent !== void 0 ? _nextNode$textContent : "";
|
|
973
|
+
var currentOffset = (_selection$focusOffse = selection === null || selection === void 0 ? void 0 : selection.focusOffset) !== null && _selection$focusOffse !== void 0 ? _selection$focusOffse : 0;
|
|
974
|
+
var offset = currentOffset <= textNode.length ? currentOffset : textNode.length;
|
|
975
|
+
if (event.key === "ArrowLeft") {
|
|
976
|
+
offset = textNode.length;
|
|
977
|
+
} else if (event.key === "ArrowRight") {
|
|
978
|
+
offset = 0;
|
|
979
|
+
}
|
|
980
|
+
this.setSelection(nodeToSetSelection, offset, offset, "nearest");
|
|
563
981
|
}
|
|
564
982
|
}
|
|
565
983
|
}, {
|
|
566
984
|
key: "setErrorIndex",
|
|
567
|
-
value: function(
|
|
568
|
-
var
|
|
569
|
-
return
|
|
570
|
-
}).findIndex(function(
|
|
571
|
-
return
|
|
985
|
+
value: function setErrorIndex(nodeToCompare) {
|
|
986
|
+
var errorIndex = Array.from(this.textarea.childNodes).filter(function(node) {
|
|
987
|
+
return node instanceof Element && node.getAttribute("aria-invalid") === "true";
|
|
988
|
+
}).findIndex(function(node) {
|
|
989
|
+
return node === nodeToCompare;
|
|
572
990
|
});
|
|
573
|
-
this.handlers.errorIndex(
|
|
991
|
+
this.handlers.errorIndex(errorIndex);
|
|
574
992
|
}
|
|
575
993
|
}, {
|
|
576
994
|
key: "isDeleteKey",
|
|
577
|
-
value: function(
|
|
578
|
-
return
|
|
995
|
+
value: function isDeleteKey(event) {
|
|
996
|
+
return event.key === "Backspace" || event.key === "x" && (event.ctrlKey || event.metaKey);
|
|
579
997
|
}
|
|
580
998
|
}, {
|
|
581
999
|
key: "getEmptyParagraph",
|
|
582
|
-
value: function() {
|
|
583
|
-
var
|
|
584
|
-
|
|
1000
|
+
value: function getEmptyParagraph() {
|
|
1001
|
+
var element = document.createElement("p");
|
|
1002
|
+
element.innerHTML = this.emptyLineValue;
|
|
1003
|
+
return element;
|
|
585
1004
|
}
|
|
586
1005
|
}, {
|
|
587
1006
|
key: "addEventListeners",
|
|
588
|
-
value: function(
|
|
589
|
-
|
|
1007
|
+
value: function addEventListeners(textarea) {
|
|
1008
|
+
textarea.addEventListener("paste", this.handlePaste);
|
|
1009
|
+
textarea.addEventListener("input", this.handleChange);
|
|
1010
|
+
textarea.addEventListener("focus", this.handleFocus);
|
|
1011
|
+
textarea.addEventListener("blur", this.handleBlur);
|
|
1012
|
+
textarea.addEventListener("keydown", this.handleKeyDown);
|
|
1013
|
+
textarea.addEventListener("mousedown", this.handleMouseDown);
|
|
1014
|
+
textarea.addEventListener("mousemove", this.handleMouseMove);
|
|
1015
|
+
textarea.addEventListener("mouseleave", this.handleMouseLeave);
|
|
1016
|
+
textarea.addEventListener("scroll", this.handleScroll);
|
|
1017
|
+
textarea.removeEventListener("keydown", this.handleSelectAll);
|
|
590
1018
|
}
|
|
591
1019
|
}, {
|
|
592
1020
|
key: "removeEventListeners",
|
|
593
|
-
value: function(
|
|
594
|
-
|
|
1021
|
+
value: function removeEventListeners(textarea) {
|
|
1022
|
+
textarea.removeEventListener("paste", this.handlePaste);
|
|
1023
|
+
textarea.removeEventListener("input", this.handleChange);
|
|
1024
|
+
textarea.removeEventListener("focus", this.handleFocus);
|
|
1025
|
+
textarea.removeEventListener("blur", this.handleBlur);
|
|
1026
|
+
textarea.removeEventListener("keydown", this.handleKeyDown);
|
|
1027
|
+
textarea.removeEventListener("mousedown", this.handleMouseDown);
|
|
1028
|
+
textarea.removeEventListener("mousemove", this.handleMouseMove);
|
|
1029
|
+
textarea.removeEventListener("mouseleave", this.handleMouseLeave);
|
|
1030
|
+
textarea.removeEventListener("scroll", this.handleScroll);
|
|
1031
|
+
textarea.addEventListener("keydown", this.handleSelectAll);
|
|
595
1032
|
}
|
|
596
1033
|
}, {
|
|
597
1034
|
key: "handleSelectAll",
|
|
598
|
-
value: function(
|
|
599
|
-
if (
|
|
600
|
-
|
|
601
|
-
var
|
|
602
|
-
|
|
1035
|
+
value: function handleSelectAll(event) {
|
|
1036
|
+
if (event.key === "a" && (event.metaKey || event.ctrlKey)) {
|
|
1037
|
+
event.preventDefault();
|
|
1038
|
+
var node = event.target;
|
|
1039
|
+
if (node instanceof HTMLElement && node === this.textarea) {
|
|
1040
|
+
this.setSelection(node, 0, node.childNodes.length);
|
|
1041
|
+
}
|
|
603
1042
|
}
|
|
604
1043
|
}
|
|
605
1044
|
}, {
|
|
606
1045
|
key: "isRangeSelection",
|
|
607
|
-
value: function() {
|
|
608
|
-
var
|
|
609
|
-
return (
|
|
1046
|
+
value: function isRangeSelection() {
|
|
1047
|
+
var selection = document.getSelection();
|
|
1048
|
+
return (selection === null || selection === void 0 ? void 0 : selection.focusNode) !== (selection === null || selection === void 0 ? void 0 : selection.anchorNode) || (selection === null || selection === void 0 ? void 0 : selection.focusOffset) !== (selection === null || selection === void 0 ? void 0 : selection.anchorOffset);
|
|
610
1049
|
}
|
|
611
1050
|
}, {
|
|
612
1051
|
key: "getSelectionDirection",
|
|
613
|
-
value: function() {
|
|
614
|
-
var
|
|
615
|
-
if (
|
|
616
|
-
var
|
|
617
|
-
|
|
618
|
-
|
|
1052
|
+
value: function getSelectionDirection() {
|
|
1053
|
+
var selection = document.getSelection();
|
|
1054
|
+
if (selection !== null && selection !== void 0 && selection.anchorNode && selection !== null && selection !== void 0 && selection.focusNode) {
|
|
1055
|
+
var documentPosition = selection.anchorNode.compareDocumentPosition(selection.focusNode);
|
|
1056
|
+
if (documentPosition === 0 && selection.anchorOffset > selection.focusOffset || // if nodes are the same
|
|
1057
|
+
documentPosition === Node.DOCUMENT_POSITION_PRECEDING) {
|
|
1058
|
+
return "backward";
|
|
1059
|
+
}
|
|
1060
|
+
return "forward";
|
|
619
1061
|
}
|
|
620
1062
|
return null;
|
|
621
1063
|
}
|
|
622
|
-
}])
|
|
623
|
-
|
|
624
|
-
|
|
625
|
-
|
|
626
|
-
|
|
627
|
-
|
|
1064
|
+
}]);
|
|
1065
|
+
return InputField2;
|
|
1066
|
+
}(Component);
|
|
1067
|
+
_defineProperty(InputField, "displayName", "Textarea");
|
|
1068
|
+
_defineProperty(InputField, "style", style);
|
|
1069
|
+
_defineProperty(InputField, "enhance", [uniqueIDEnhancement()]);
|
|
1070
|
+
_defineProperty(InputField, "defaultProps", {
|
|
628
1071
|
defaultValue: "",
|
|
629
1072
|
size: "m",
|
|
630
1073
|
state: "normal",
|
|
631
1074
|
minRows: 2,
|
|
632
1075
|
maxRows: 10,
|
|
633
|
-
defaultShowErrors:
|
|
1076
|
+
defaultShowErrors: false,
|
|
634
1077
|
defaultErrorIndex: -1,
|
|
635
1078
|
defaultLinesCount: 0
|
|
636
1079
|
});
|
|
637
1080
|
export {
|
|
638
|
-
|
|
1081
|
+
InputField
|
|
639
1082
|
};
|