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