@semcore/bulk-textarea 16.6.2 → 16.7.0-prerelease.2
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/components/InputField/InputField.js +92 -79
- package/lib/cjs/components/InputField/InputField.js.map +1 -1
- package/lib/cjs/components/InputField/InputField.types.js.map +1 -1
- package/lib/es6/components/InputField/InputField.js +92 -79
- package/lib/es6/components/InputField/InputField.js.map +1 -1
- package/lib/es6/components/InputField/InputField.types.js.map +1 -1
- package/lib/esm/components/InputField/InputField.mjs +72 -65
- package/lib/types/components/InputField/InputField.types.d.ts +2 -0
- package/package.json +4 -4
|
@@ -16,20 +16,20 @@ import Tooltip from '@semcore/tooltip';
|
|
|
16
16
|
import DOMPurify from 'dompurify';
|
|
17
17
|
import React from 'react';
|
|
18
18
|
/*!__reshadow-styles__:"./inputField.shadow.css"*/
|
|
19
|
-
var style = (/*__reshadow_css_start__*/_sstyled.insert(/*__inner_css_start__*/".
|
|
19
|
+
var style = (/*__reshadow_css_start__*/_sstyled.insert(/*__inner_css_start__*/".___SInputField_7e9un_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_7e9un_gg_>div:empty::before{content:\"1. \"attr(placeholder);color:var(--intergalactic-text-placeholder, #8a8e9b);position:absolute}.___SInputField_7e9un_gg_>div:nth-child(even){color:red;counter-increment:row;margin-bottom:var(--intergalactic-spacing-1x, 4px);position:relative;word-break:break-all}.___SInputField_7e9un_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_7e9un_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_7e9un_gg_>div>p:last-of-type{margin-bottom:0}.___SInputField_7e9un_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_7e9un_gg_>div>p[data-over-max-rows=true]{background-color:var(--intergalactic-bg-secondary-critical, #fff0f7)}.___SInputField_7e9un_gg_>div:has(p:nth-child(n+10))>p{padding-left:var(--intergalactic-spacing-6x, 24px)}.___SInputField_7e9un_gg_>div:has(p:nth-child(n+10))>p:nth-child(-n+9)::before{padding-left:var(--intergalactic-spacing-2x, 8px)}.___SInputField_7e9un_gg_>div:has(p:nth-child(n+100))>p{padding-left:var(--intergalactic-spacing-8x, 32px)}.___SInputField_7e9un_gg_>div:has(p:nth-child(n+100))>p:nth-child(-n+9)::before{padding-left:var(--intergalactic-spacing-4x, 16px)}.___SInputField_7e9un_gg_>div:has(p:nth-child(n+100))>p:nth-child(n+10)::before{padding-left:var(--intergalactic-spacing-2x, 8px)}.___SInputField_7e9un_gg_>div:has(p:nth-child(n+100))>p:nth-child(n+100)::before{padding-left:0}.___SInputField_7e9un_gg_>div:has(p:nth-child(n+1000))>p{padding-left:calc(var(--intergalactic-spacing-10x, 40px) + var(--intergalactic-spacing-1x, 4px))}.___SInputField_7e9un_gg_>div:has(p:nth-child(n+1000))>p:nth-child(-n+9)::before{padding-left:var(--intergalactic-spacing-6x, 24px)}.___SInputField_7e9un_gg_>div:has(p:nth-child(n+1000))>p:nth-child(n+10)::before{padding-left:var(--intergalactic-spacing-4x, 16px)}.___SInputField_7e9un_gg_>div:has(p:nth-child(n+1000))>p:nth-child(n+100)::before{padding-left:var(--intergalactic-spacing-2x, 8px)}.___SInputField_7e9un_gg_>div:has(p:nth-child(n+1000))>p:nth-child(n+1000)::before{padding-left:0}.___SInputField_7e9un_gg_.__showErrors_7e9un_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_7e9un_gg_._size_m_7e9un_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_7e9un)*20px);max-height:calc((var(--maxRows_7e9un) - 1)*(20px + var(--intergalactic-spacing-1x, 4px)) + 18px)}.___SInputField_7e9un_gg_._size_m_7e9un_gg_>div:empty{padding-left:var(--intergalactic-spacing-8x, 32px)}.___SInputField_7e9un_gg_._size_l_7e9un_gg_>div:empty::before,.___SInputField_7e9un_gg_._size_m_7e9un_gg_>div:empty::before{left:var(--intergalactic-spacing-4x, 16px)}.___SInputField_7e9un_gg_._size_l_7e9un_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_7e9un)*24px);max-height:calc((var(--maxRows_7e9un) - 1)*(24px + var(--intergalactic-spacing-1x, 4px)) + 20px)}.___SInputField_7e9un_gg_._size_l_7e9un_gg_>div:empty{padding-left:calc(var(--intergalactic-spacing-8x, 32px) + var(--intergalactic-spacing-05x, 2px))}.___SInputField_7e9un_gg_._state_normal_7e9un_gg_:not(.__disabled_7e9un_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_7e9un_gg_._state_valid_7e9un_gg_>div{border-color:var(--intergalactic-border-success-active, #007c65)}.___SInputField_7e9un_gg_._state_valid_7e9un_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_7e9un_gg_._state_invalid_7e9un_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_7e9un_gg_._state_invalid_7e9un_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_7e9un_gg_.__readonly_7e9un_gg_>div{background-color:var(--intergalactic-bg-secondary-neutral, #f4f5f9)}.___SInputField_7e9un_gg_.__disabled_7e9un_gg_>div{opacity:var(--intergalactic-disabled-opacity, 0.3)}", /*__inner_css_end__*/"7e9un_gg_"),
|
|
20
20
|
/*__reshadow_css_end__*/
|
|
21
21
|
{
|
|
22
|
-
"__SInputField": "
|
|
23
|
-
"_showErrors": "
|
|
24
|
-
"_readonly": "
|
|
25
|
-
"_disabled": "
|
|
26
|
-
"_size_m": "
|
|
27
|
-
"--minRows": "--
|
|
28
|
-
"--maxRows": "--
|
|
29
|
-
"_size_l": "
|
|
30
|
-
"_state_normal": "
|
|
31
|
-
"_state_valid": "
|
|
32
|
-
"_state_invalid": "
|
|
22
|
+
"__SInputField": "___SInputField_7e9un_gg_",
|
|
23
|
+
"_showErrors": "__showErrors_7e9un_gg_",
|
|
24
|
+
"_readonly": "__readonly_7e9un_gg_",
|
|
25
|
+
"_disabled": "__disabled_7e9un_gg_",
|
|
26
|
+
"_size_m": "_size_m_7e9un_gg_",
|
|
27
|
+
"--minRows": "--minRows_7e9un",
|
|
28
|
+
"--maxRows": "--maxRows_7e9un",
|
|
29
|
+
"_size_l": "_size_l_7e9un_gg_",
|
|
30
|
+
"_state_normal": "_state_normal_7e9un_gg_",
|
|
31
|
+
"_state_valid": "_state_valid_7e9un_gg_",
|
|
32
|
+
"_state_invalid": "_state_invalid_7e9un_gg_"
|
|
33
33
|
});
|
|
34
34
|
var InputField = /*#__PURE__*/function (_Component) {
|
|
35
35
|
function InputField(props) {
|
|
@@ -100,7 +100,12 @@ var InputField = /*#__PURE__*/function (_Component) {
|
|
|
100
100
|
}, {
|
|
101
101
|
key: "componentDidMount",
|
|
102
102
|
value: function componentDidMount() {
|
|
103
|
-
var _this$containerRef$cu
|
|
103
|
+
var _this$containerRef$cu,
|
|
104
|
+
_this2 = this;
|
|
105
|
+
var _this$asProps = this.asProps,
|
|
106
|
+
autoFocus = _this$asProps.autoFocus,
|
|
107
|
+
disabled = _this$asProps.disabled,
|
|
108
|
+
readonly = _this$asProps.readonly;
|
|
104
109
|
(_this$containerRef$cu = this.containerRef.current) === null || _this$containerRef$cu === void 0 || _this$containerRef$cu.append(this.textarea);
|
|
105
110
|
this.handleValueOutChange();
|
|
106
111
|
var config = {
|
|
@@ -111,11 +116,19 @@ var InputField = /*#__PURE__*/function (_Component) {
|
|
|
111
116
|
if (this.props.onImmediatelyChange) {
|
|
112
117
|
this.observer.observe(this.textarea, config);
|
|
113
118
|
}
|
|
119
|
+
if (autoFocus && !disabled) {
|
|
120
|
+
/* Safari & Firefox may silently ignore programmatic focus calls with very short
|
|
121
|
+
delays (<10ms). Using 10ms as a safe threshold based on observed behavior.
|
|
122
|
+
*/
|
|
123
|
+
setTimeout(function () {
|
|
124
|
+
return _this2.textarea.focus();
|
|
125
|
+
}, 10);
|
|
126
|
+
}
|
|
114
127
|
}
|
|
115
128
|
}, {
|
|
116
129
|
key: "componentDidUpdate",
|
|
117
130
|
value: function componentDidUpdate(prevProps, prevState) {
|
|
118
|
-
var
|
|
131
|
+
var _this3 = this;
|
|
119
132
|
var _this$props2 = this.props,
|
|
120
133
|
value = _this$props2.value,
|
|
121
134
|
errors = _this$props2.errors,
|
|
@@ -191,9 +204,9 @@ var InputField = /*#__PURE__*/function (_Component) {
|
|
|
191
204
|
}
|
|
192
205
|
this.validateLine(paragraph);
|
|
193
206
|
setTimeout(function () {
|
|
194
|
-
var newNode =
|
|
207
|
+
var newNode = _this3.textarea.childNodes.item(keyboardLineIndex);
|
|
195
208
|
if (newNode) {
|
|
196
|
-
|
|
209
|
+
_this3.setErrorIndex(newNode);
|
|
197
210
|
}
|
|
198
211
|
}, 0); // need this timeout to update errorIndex to the new (usually empty) line
|
|
199
212
|
}
|
|
@@ -213,9 +226,9 @@ var InputField = /*#__PURE__*/function (_Component) {
|
|
|
213
226
|
}, {
|
|
214
227
|
key: "isDisabled",
|
|
215
228
|
get: function get() {
|
|
216
|
-
var _this$
|
|
217
|
-
disabled = _this$
|
|
218
|
-
readonly = _this$
|
|
229
|
+
var _this$asProps2 = this.asProps,
|
|
230
|
+
disabled = _this$asProps2.disabled,
|
|
231
|
+
readonly = _this$asProps2.readonly;
|
|
219
232
|
return Boolean(disabled || readonly);
|
|
220
233
|
}
|
|
221
234
|
}, {
|
|
@@ -228,11 +241,11 @@ var InputField = /*#__PURE__*/function (_Component) {
|
|
|
228
241
|
key: "errorMessage",
|
|
229
242
|
get: function get() {
|
|
230
243
|
var _errorItem$errorMessa, _errorItem, _errorItem2;
|
|
231
|
-
var _this$
|
|
232
|
-
errors = _this$
|
|
233
|
-
errorIndex = _this$
|
|
234
|
-
commonErrorMessage = _this$
|
|
235
|
-
prevError = _this$
|
|
244
|
+
var _this$asProps3 = this.asProps,
|
|
245
|
+
errors = _this$asProps3.errors,
|
|
246
|
+
errorIndex = _this$asProps3.errorIndex,
|
|
247
|
+
commonErrorMessage = _this$asProps3.commonErrorMessage,
|
|
248
|
+
prevError = _this$asProps3.prevError;
|
|
236
249
|
var _this$state = this.state,
|
|
237
250
|
mouseLineIndex = _this$state.mouseLineIndex,
|
|
238
251
|
keyboardLineIndex = _this$state.keyboardLineIndex;
|
|
@@ -304,13 +317,13 @@ var InputField = /*#__PURE__*/function (_Component) {
|
|
|
304
317
|
}, {
|
|
305
318
|
key: "handleScroll",
|
|
306
319
|
value: function handleScroll() {
|
|
307
|
-
var
|
|
320
|
+
var _this4 = this;
|
|
308
321
|
if (this.scrollingTimeout) {
|
|
309
322
|
clearTimeout(this.scrollingTimeout);
|
|
310
323
|
}
|
|
311
324
|
this.isScrolling = true;
|
|
312
325
|
this.scrollingTimeout = window.setTimeout(function () {
|
|
313
|
-
|
|
326
|
+
_this4.isScrolling = false;
|
|
314
327
|
}, 50);
|
|
315
328
|
}
|
|
316
329
|
}, {
|
|
@@ -499,9 +512,9 @@ var InputField = /*#__PURE__*/function (_Component) {
|
|
|
499
512
|
} else if (childNodes.length === 1 && childNodes[0] instanceof HTMLBRElement) {
|
|
500
513
|
rowNode.innerHTML = this.emptyLineValue;
|
|
501
514
|
}
|
|
502
|
-
var _this$
|
|
503
|
-
errors = _this$
|
|
504
|
-
showErrors = _this$
|
|
515
|
+
var _this$asProps4 = this.asProps,
|
|
516
|
+
errors = _this$asProps4.errors,
|
|
517
|
+
showErrors = _this$asProps4.showErrors;
|
|
505
518
|
var isValid = this.validateLine(rowNode);
|
|
506
519
|
this.recalculateErrors();
|
|
507
520
|
this.setErrorIndex(rowNode);
|
|
@@ -554,22 +567,22 @@ var InputField = /*#__PURE__*/function (_Component) {
|
|
|
554
567
|
}, {
|
|
555
568
|
key: "handleBlur",
|
|
556
569
|
value: function handleBlur(event) {
|
|
557
|
-
var
|
|
570
|
+
var _this5 = this;
|
|
558
571
|
this.isFocusing = false;
|
|
559
572
|
this.setState({
|
|
560
573
|
visibleErrorPopper: false
|
|
561
574
|
});
|
|
562
|
-
var _this$
|
|
563
|
-
validateOn = _this$
|
|
564
|
-
onBlur = _this$
|
|
565
|
-
value = _this$
|
|
575
|
+
var _this$asProps5 = this.asProps,
|
|
576
|
+
validateOn = _this$asProps5.validateOn,
|
|
577
|
+
onBlur = _this$asProps5.onBlur,
|
|
578
|
+
value = _this$asProps5.value;
|
|
566
579
|
if (validateOn.includes('blur')) {
|
|
567
580
|
this.recalculateErrors();
|
|
568
581
|
}
|
|
569
582
|
var valueToChange = typeof value === 'string' ? this.getValues().join(this.delimiter) : this.getValues();
|
|
570
583
|
onBlur(valueToChange, event);
|
|
571
584
|
setTimeout(function () {
|
|
572
|
-
|
|
585
|
+
_this5.setState({
|
|
573
586
|
keyboardLineIndex: -1
|
|
574
587
|
});
|
|
575
588
|
}, 200);
|
|
@@ -577,7 +590,7 @@ var InputField = /*#__PURE__*/function (_Component) {
|
|
|
577
590
|
}, {
|
|
578
591
|
key: "handleKeyDown",
|
|
579
592
|
value: function handleKeyDown(event) {
|
|
580
|
-
var
|
|
593
|
+
var _this6 = this;
|
|
581
594
|
this.errorByInteraction = 'keyboard';
|
|
582
595
|
var linesDelimiters = this.asProps.linesDelimiters;
|
|
583
596
|
var currentNode = this.getNodeFromSelection();
|
|
@@ -625,7 +638,7 @@ var InputField = /*#__PURE__*/function (_Component) {
|
|
|
625
638
|
this.recalculateLinesCount();
|
|
626
639
|
}
|
|
627
640
|
setTimeout(function () {
|
|
628
|
-
|
|
641
|
+
_this6.recalculateErrors();
|
|
629
642
|
}, 0);
|
|
630
643
|
this.toggleErrorsPopperByKeyboard(0);
|
|
631
644
|
}
|
|
@@ -660,7 +673,7 @@ var InputField = /*#__PURE__*/function (_Component) {
|
|
|
660
673
|
}
|
|
661
674
|
}
|
|
662
675
|
setTimeout(function () {
|
|
663
|
-
|
|
676
|
+
_this6.recalculateErrors();
|
|
664
677
|
}, 0);
|
|
665
678
|
this.toggleErrorsPopperByKeyboard(0);
|
|
666
679
|
}
|
|
@@ -689,7 +702,7 @@ var InputField = /*#__PURE__*/function (_Component) {
|
|
|
689
702
|
this.setErrorIndex(currentNode);
|
|
690
703
|
this.recalculateLinesCount();
|
|
691
704
|
setTimeout(function () {
|
|
692
|
-
|
|
705
|
+
_this6.recalculateErrors();
|
|
693
706
|
}, 0);
|
|
694
707
|
this.toggleErrorsPopperByKeyboard(0);
|
|
695
708
|
} else if (focusElement !== anchorElement && focusElement instanceof Text && anchorElement instanceof Text && (focusElement === null || focusElement === void 0 ? void 0 : focusElement.textContent) === (focusElement === null || focusElement === 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 || (_anchorElement$parent = anchorElement.parentNode) === null || _anchorElement$parent === void 0 ? void 0 : _anchorElement$parent.textContent) && anchorOffset === 0 && focusOffset === (focusElement === null || focusElement === void 0 || (_focusElement$parentN2 = focusElement.parentNode) === null || _focusElement$parentN2 === void 0 || (_focusElement$parentN2 = _focusElement$parentN2.textContent) === null || _focusElement$parentN2 === void 0 ? void 0 : _focusElement$parentN2.length)) {
|
|
@@ -730,7 +743,7 @@ var InputField = /*#__PURE__*/function (_Component) {
|
|
|
730
743
|
this.setErrorIndex(currentNode);
|
|
731
744
|
this.recalculateLinesCount();
|
|
732
745
|
setTimeout(function () {
|
|
733
|
-
|
|
746
|
+
_this6.recalculateErrors();
|
|
734
747
|
}, 0);
|
|
735
748
|
this.toggleErrorsPopperByKeyboard(0);
|
|
736
749
|
}
|
|
@@ -745,11 +758,11 @@ var InputField = /*#__PURE__*/function (_Component) {
|
|
|
745
758
|
var _ref = this.asProps,
|
|
746
759
|
_ref2,
|
|
747
760
|
_this$containerRef$cu2,
|
|
748
|
-
|
|
761
|
+
_this7 = this;
|
|
749
762
|
var SInputField = Box;
|
|
750
|
-
var _this$
|
|
751
|
-
styles = _this$
|
|
752
|
-
showErrors = _this$
|
|
763
|
+
var _this$asProps6 = this.asProps,
|
|
764
|
+
styles = _this$asProps6.styles,
|
|
765
|
+
showErrors = _this$asProps6.showErrors;
|
|
753
766
|
var visibleErrorPopper = this.state.visibleErrorPopper;
|
|
754
767
|
var _this$errorMessage = this.errorMessage,
|
|
755
768
|
errorMessage = _this$errorMessage.errorMessage,
|
|
@@ -770,13 +783,13 @@ var InputField = /*#__PURE__*/function (_Component) {
|
|
|
770
783
|
}), function (_ref3) {
|
|
771
784
|
var popper = _ref3.popper,
|
|
772
785
|
setTrigger = _ref3.setTrigger;
|
|
773
|
-
if (!
|
|
774
|
-
|
|
786
|
+
if (!_this7.popper) {
|
|
787
|
+
_this7.setPopperTrigger = setTrigger;
|
|
775
788
|
// @ts-ignore
|
|
776
|
-
|
|
789
|
+
_this7.popper = popper;
|
|
777
790
|
}
|
|
778
791
|
return /*#__PURE__*/React.createElement(Tooltip.Popper, {
|
|
779
|
-
id:
|
|
792
|
+
id: _this7.popperDescribedId
|
|
780
793
|
}, errorMessage);
|
|
781
794
|
}), /*#__PURE__*/React.createElement(SInputField, _ref2.cn("SInputField", _objectSpread({}, _assignProps({
|
|
782
795
|
"ref": this.containerRef,
|
|
@@ -789,7 +802,7 @@ var InputField = /*#__PURE__*/function (_Component) {
|
|
|
789
802
|
var _pasteProps$lineProce,
|
|
790
803
|
_pasteProps$skipEmpty,
|
|
791
804
|
_pasteProps$delimiter,
|
|
792
|
-
|
|
805
|
+
_this8 = this;
|
|
793
806
|
var listOfNodes = [];
|
|
794
807
|
var pasteProps = this.asProps.pasteProps;
|
|
795
808
|
var lineProcessing = (_pasteProps$lineProce = pasteProps === null || pasteProps === void 0 ? void 0 : pasteProps.lineProcessing) !== null && _pasteProps$lineProce !== void 0 ? _pasteProps$lineProce : function (line) {
|
|
@@ -804,15 +817,15 @@ var InputField = /*#__PURE__*/function (_Component) {
|
|
|
804
817
|
if (preparedLine === '' && skipEmptyLines === false || preparedLine !== '') {
|
|
805
818
|
var node = document.createElement('p');
|
|
806
819
|
if (preparedLine === '') {
|
|
807
|
-
node.innerHTML =
|
|
820
|
+
node.innerHTML = _this8.emptyLineValue;
|
|
808
821
|
} else if (preparedLine.trim() === '') {
|
|
809
822
|
var allSpacesRegExp = new RegExp('\\s', 'g');
|
|
810
|
-
node.innerHTML = DOMPurify.sanitize(preparedLine.replace(allSpacesRegExp,
|
|
823
|
+
node.innerHTML = DOMPurify.sanitize(preparedLine.replace(allSpacesRegExp, _this8.spaceLineValue));
|
|
811
824
|
} else {
|
|
812
825
|
node.append(document.createTextNode(preparedLine));
|
|
813
826
|
}
|
|
814
827
|
listOfNodes.push(node);
|
|
815
|
-
|
|
828
|
+
_this8.validateLine(node);
|
|
816
829
|
}
|
|
817
830
|
});
|
|
818
831
|
return listOfNodes;
|
|
@@ -837,19 +850,19 @@ var InputField = /*#__PURE__*/function (_Component) {
|
|
|
837
850
|
}, {
|
|
838
851
|
key: "recalculateLinesCount",
|
|
839
852
|
value: function recalculateLinesCount() {
|
|
840
|
-
var
|
|
853
|
+
var _this9 = this;
|
|
841
854
|
if (this.linesCountTimeout) {
|
|
842
855
|
clearTimeout(this.linesCountTimeout);
|
|
843
856
|
}
|
|
844
857
|
this.linesCountTimeout = window.setTimeout(function () {
|
|
845
858
|
var lines = 0;
|
|
846
|
-
var
|
|
847
|
-
maxLines =
|
|
848
|
-
linesCount =
|
|
849
|
-
|
|
859
|
+
var _this9$asProps = _this9.asProps,
|
|
860
|
+
maxLines = _this9$asProps.maxLines,
|
|
861
|
+
linesCount = _this9$asProps.linesCount;
|
|
862
|
+
_this9.textarea.childNodes.forEach(function (node) {
|
|
850
863
|
if (node instanceof HTMLParagraphElement) {
|
|
851
864
|
node.dataset.overMaxRows = 'false';
|
|
852
|
-
if (node.textContent !==
|
|
865
|
+
if (node.textContent !== _this9.getEmptyParagraph().textContent && node.textContent !== '') {
|
|
853
866
|
lines++;
|
|
854
867
|
if (lines > maxLines) {
|
|
855
868
|
node.dataset.overMaxRows = 'true';
|
|
@@ -858,7 +871,7 @@ var InputField = /*#__PURE__*/function (_Component) {
|
|
|
858
871
|
}
|
|
859
872
|
});
|
|
860
873
|
if (linesCount !== lines) {
|
|
861
|
-
|
|
874
|
+
_this9.asProps.onChangeLinesCount(lines);
|
|
862
875
|
}
|
|
863
876
|
}, 100);
|
|
864
877
|
}
|
|
@@ -885,57 +898,57 @@ var InputField = /*#__PURE__*/function (_Component) {
|
|
|
885
898
|
}, {
|
|
886
899
|
key: "toggleErrorsPopperByKeyboard",
|
|
887
900
|
value: function toggleErrorsPopperByKeyboard(timer) {
|
|
888
|
-
var
|
|
901
|
+
var _this0 = this;
|
|
889
902
|
if (this.toggleErrorsPopperTimeout) {
|
|
890
903
|
clearTimeout(this.toggleErrorsPopperTimeout);
|
|
891
904
|
}
|
|
892
905
|
if (!this.isScrolling) {
|
|
893
906
|
setTimeout(function () {
|
|
894
|
-
var rowNode =
|
|
895
|
-
|
|
907
|
+
var rowNode = _this0.getNodeFromSelection();
|
|
908
|
+
_this0.toggleErrorsPopper('keyboardLineIndex', rowNode, timer);
|
|
896
909
|
}, 0);
|
|
897
910
|
} else {
|
|
898
911
|
this.toggleErrorsPopperTimeout = window.setTimeout(function () {
|
|
899
|
-
|
|
912
|
+
_this0.toggleErrorsPopperByKeyboard(timer);
|
|
900
913
|
}, 50);
|
|
901
914
|
}
|
|
902
915
|
}
|
|
903
916
|
}, {
|
|
904
917
|
key: "toggleErrorsPopper",
|
|
905
918
|
value: function toggleErrorsPopper(key, target, timer) {
|
|
906
|
-
var
|
|
919
|
+
var _this1 = this;
|
|
907
920
|
if (target instanceof HTMLDivElement || target instanceof HTMLParagraphElement) {
|
|
908
921
|
if (this.changeTriggerTimeout) {
|
|
909
922
|
clearTimeout(this.changeTriggerTimeout);
|
|
910
923
|
}
|
|
911
924
|
this.changeTriggerTimeout = window.setTimeout(function () {
|
|
912
|
-
var targetElement = target ===
|
|
925
|
+
var targetElement = target === _this1.textarea ? _this1.getNodeFromSelection() : target;
|
|
913
926
|
var lineIndex = -1;
|
|
914
927
|
var isInvalidRow = false;
|
|
915
928
|
if (targetElement instanceof HTMLParagraphElement) {
|
|
916
929
|
isInvalidRow = targetElement.getAttribute('aria-invalid') === 'true';
|
|
917
|
-
lineIndex = Array.from(
|
|
918
|
-
} else if (targetElement ===
|
|
930
|
+
lineIndex = Array.from(_this1.textarea.childNodes).indexOf(targetElement);
|
|
931
|
+
} else if (targetElement === _this1.textarea) {
|
|
919
932
|
lineIndex = 0;
|
|
920
933
|
}
|
|
921
934
|
if (targetElement instanceof HTMLElement) {
|
|
922
|
-
|
|
935
|
+
_this1.setState(function (prevState) {
|
|
923
936
|
var newState = {
|
|
924
|
-
visibleErrorPopper:
|
|
937
|
+
visibleErrorPopper: _this1.isFocusing && Boolean(_this1.asProps.commonErrorMessage) ? true : isInvalidRow,
|
|
925
938
|
mouseLineIndex: prevState.mouseLineIndex,
|
|
926
939
|
keyboardLineIndex: prevState.keyboardLineIndex
|
|
927
940
|
};
|
|
928
|
-
if (
|
|
941
|
+
if (_this1.isFocusing || key === 'mouseLineIndex' && isInvalidRow) {
|
|
929
942
|
newState[key] = lineIndex;
|
|
930
943
|
}
|
|
931
944
|
return newState;
|
|
932
945
|
}, function () {
|
|
933
|
-
|
|
934
|
-
var trigger = isInvalidRow ? targetElement :
|
|
935
|
-
if (
|
|
936
|
-
var
|
|
937
|
-
(
|
|
938
|
-
|
|
946
|
+
_this1.errorByInteraction = key === 'mouseLineIndex' ? 'mouse' : 'keyboard';
|
|
947
|
+
var trigger = isInvalidRow ? targetElement : _this1.textarea;
|
|
948
|
+
if (_this1.shouldChangePopperTrigger(trigger)) {
|
|
949
|
+
var _this1$setPopperTrigg;
|
|
950
|
+
(_this1$setPopperTrigg = _this1.setPopperTrigger) === null || _this1$setPopperTrigg === void 0 || _this1$setPopperTrigg.call(_this1, trigger);
|
|
951
|
+
_this1.forceUpdate();
|
|
939
952
|
}
|
|
940
953
|
});
|
|
941
954
|
}
|
|
@@ -961,7 +974,7 @@ var InputField = /*#__PURE__*/function (_Component) {
|
|
|
961
974
|
key: "handleChangeErrorIndex",
|
|
962
975
|
value: function handleChangeErrorIndex(errorIndex) {
|
|
963
976
|
var _error$lineNode,
|
|
964
|
-
|
|
977
|
+
_this10 = this;
|
|
965
978
|
var error = this.asProps.errors[errorIndex];
|
|
966
979
|
var childNodes = this.textarea.childNodes;
|
|
967
980
|
var node = error ? (_error$lineNode = error.lineNode) !== null && _error$lineNode !== void 0 ? _error$lineNode : childNodes.item(error.lineIndex) : null;
|
|
@@ -973,9 +986,9 @@ var InputField = /*#__PURE__*/function (_Component) {
|
|
|
973
986
|
setTimeout(function () {
|
|
974
987
|
var text = node.childNodes.item(0);
|
|
975
988
|
if (text instanceof Text) {
|
|
976
|
-
|
|
989
|
+
_this10.setSelection(text, 0, text.length);
|
|
977
990
|
} else {
|
|
978
|
-
|
|
991
|
+
_this10.setSelection(node, 0, 1);
|
|
979
992
|
}
|
|
980
993
|
}, 150);
|
|
981
994
|
}
|