@semcore/bulk-textarea 16.2.0 → 16.2.1-prerelease.3
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 +1 -31
- package/lib/cjs/BulkTextarea.js +28 -28
- package/lib/cjs/BulkTextarea.js.map +1 -1
- package/lib/cjs/BulkTextarea.types.js.map +1 -1
- package/lib/cjs/components/ClearAll.js +2 -2
- package/lib/cjs/components/ClearAll.js.map +1 -1
- package/lib/cjs/components/Counter.js +3 -3
- package/lib/cjs/components/Counter.js.map +1 -1
- package/lib/cjs/components/ErrorsNavigation.js +12 -12
- package/lib/cjs/components/ErrorsNavigation.js.map +1 -1
- package/lib/cjs/components/InputField/InputField.js +87 -91
- package/lib/cjs/components/InputField/InputField.js.map +1 -1
- package/lib/cjs/components/InputField/InputField.types.js.map +1 -1
- package/lib/cjs/index.js +1 -1
- package/lib/cjs/index.js.map +1 -1
- package/lib/cjs/translations/__intergalactic-dynamic-locales.js +4 -5
- package/lib/cjs/translations/__intergalactic-dynamic-locales.js.map +1 -1
- package/lib/es6/BulkTextarea.js +26 -25
- package/lib/es6/BulkTextarea.js.map +1 -1
- package/lib/es6/BulkTextarea.types.js.map +1 -1
- package/lib/es6/components/ClearAll.js +2 -2
- package/lib/es6/components/ClearAll.js.map +1 -1
- package/lib/es6/components/Counter.js +2 -2
- package/lib/es6/components/Counter.js.map +1 -1
- package/lib/es6/components/ErrorsNavigation.js +9 -9
- package/lib/es6/components/ErrorsNavigation.js.map +1 -1
- package/lib/es6/components/InputField/InputField.js +87 -90
- package/lib/es6/components/InputField/InputField.js.map +1 -1
- package/lib/es6/components/InputField/InputField.types.js.map +1 -1
- package/lib/es6/index.js.map +1 -1
- package/lib/es6/translations/__intergalactic-dynamic-locales.js +2 -2
- package/lib/es6/translations/__intergalactic-dynamic-locales.js.map +1 -1
- package/lib/esm/BulkTextarea.mjs +28 -24
- package/lib/esm/components/ClearAll.mjs +1 -1
- package/lib/esm/components/Counter.mjs +2 -2
- package/lib/esm/components/ErrorsNavigation.mjs +3 -3
- package/lib/esm/components/InputField/InputField.mjs +86 -85
- package/lib/esm/translations/__intergalactic-dynamic-locales.mjs +2 -2
- package/lib/types/BulkTextarea.d.ts +1 -1
- package/lib/types/BulkTextarea.types.d.ts +6 -6
- package/lib/types/components/ClearAll.d.ts +2 -2
- package/lib/types/components/Counter.d.ts +4 -4
- package/lib/types/components/ErrorsNavigation.d.ts +2 -2
- package/lib/types/components/InputField/InputField.d.ts +6 -6
- package/lib/types/components/InputField/InputField.types.d.ts +29 -29
- package/package.json +10 -10
|
@@ -3,76 +3,77 @@ import _createForOfIteratorHelper from "@babel/runtime/helpers/createForOfIterat
|
|
|
3
3
|
import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
|
|
4
4
|
import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
|
|
5
5
|
import _createClass from "@babel/runtime/helpers/createClass";
|
|
6
|
-
import
|
|
6
|
+
import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
|
|
7
|
+
import _isNativeReflectConstruct from "@babel/runtime/helpers/isNativeReflectConstruct";
|
|
8
|
+
import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
|
|
7
9
|
import _inherits from "@babel/runtime/helpers/inherits";
|
|
8
|
-
import _createSuper from "@babel/runtime/helpers/createSuper";
|
|
9
10
|
import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
|
10
11
|
import { sstyled as _sstyled } from "@semcore/core";
|
|
11
12
|
import { assignProps as _assignProps } from "@semcore/core";
|
|
12
|
-
|
|
13
|
+
function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
|
|
13
14
|
import { Component, sstyled, Root } from '@semcore/core';
|
|
15
|
+
import { extractAriaProps } from '@semcore/core/lib/utils/ariaProps';
|
|
16
|
+
import uniqueIDEnhancement from '@semcore/core/lib/utils/uniqueID';
|
|
14
17
|
import { Box } from '@semcore/flex-box';
|
|
18
|
+
import Tooltip from '@semcore/tooltip';
|
|
19
|
+
import DOMPurify from 'dompurify';
|
|
20
|
+
import React from 'react';
|
|
15
21
|
/*!__reshadow-styles__:"./inputField.shadow.css"*/
|
|
16
|
-
var style = (
|
|
22
|
+
var style = (/*__reshadow_css_start__*/_sstyled.insert(/*__inner_css_start__*/".___SInputField_4h96k_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_4h96k_gg_>div:empty::before{content:\"1. \"attr(placeholder);color:var(--intergalactic-text-placeholder, #8a8e9b);position:absolute}.___SInputField_4h96k_gg_>div:nth-child(even){color:red;counter-increment:row;margin-bottom:var(--intergalactic-spacing-1x, 4px);position:relative;word-break:break-all}.___SInputField_4h96k_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_4h96k_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_4h96k_gg_>div>p:last-of-type{margin-bottom:0}.___SInputField_4h96k_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_4h96k_gg_>div>p[data-over-max-rows=true]{background-color:var(--intergalactic-bg-secondary-critical, #fff0f7)}.___SInputField_4h96k_gg_>div:has(p:nth-child(n+10))>p{padding-left:var(--intergalactic-spacing-6x, 24px)}.___SInputField_4h96k_gg_>div:has(p:nth-child(n+10))>p:nth-child(-n+9)::before{padding-left:var(--intergalactic-spacing-2x, 8px)}.___SInputField_4h96k_gg_>div:has(p:nth-child(n+100))>p{padding-left:var(--intergalactic-spacing-8x, 32px)}.___SInputField_4h96k_gg_>div:has(p:nth-child(n+100))>p:nth-child(-n+9)::before{padding-left:var(--intergalactic-spacing-4x, 16px)}.___SInputField_4h96k_gg_>div:has(p:nth-child(n+100))>p:nth-child(n+10)::before{padding-left:var(--intergalactic-spacing-2x, 8px)}.___SInputField_4h96k_gg_>div:has(p:nth-child(n+100))>p:nth-child(n+100)::before{padding-left:0}.___SInputField_4h96k_gg_.__showErrors_4h96k_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_4h96k_gg_._size_m_4h96k_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_4h96k)*20px);max-height:calc((var(--maxRows_4h96k) - 1)*(20px + var(--intergalactic-spacing-1x, 4px)) + 18px)}.___SInputField_4h96k_gg_._size_m_4h96k_gg_>div:empty{padding-left:var(--intergalactic-spacing-8x, 32px)}.___SInputField_4h96k_gg_._size_l_4h96k_gg_>div:empty::before,.___SInputField_4h96k_gg_._size_m_4h96k_gg_>div:empty::before{left:var(--intergalactic-spacing-4x, 16px)}.___SInputField_4h96k_gg_._size_l_4h96k_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_4h96k)*24px);max-height:calc((var(--maxRows_4h96k) - 1)*(24px + var(--intergalactic-spacing-1x, 4px)) + 20px)}.___SInputField_4h96k_gg_._size_l_4h96k_gg_>div:empty{padding-left:calc(var(--intergalactic-spacing-8x, 32px) + var(--intergalactic-spacing-05x, 2px))}.___SInputField_4h96k_gg_._state_normal_4h96k_gg_:not(.__disabled_4h96k_gg_)>div:focus:focus{box-shadow:var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.5));border-color:var(--intergalactic-border-info-active, #006dca)}.___SInputField_4h96k_gg_._state_valid_4h96k_gg_>div{border-color:var(--intergalactic-border-success-active, #007c65)}.___SInputField_4h96k_gg_._state_valid_4h96k_gg_>div:focus{box-shadow:var(--intergalactic-keyboard-focus-valid, 0px 0px 0px 3px rgba(0, 159, 129, 0.5))}.___SInputField_4h96k_gg_._state_invalid_4h96k_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_4h96k_gg_._state_invalid_4h96k_gg_>div:focus{box-shadow:var(--intergalactic-keyboard-focus-invalid, 0px 0px 0px 3px rgba(255, 73, 83, 0.5))}.___SInputField_4h96k_gg_.__readonly_4h96k_gg_>div{background-color:var(--intergalactic-bg-secondary-neutral, #f4f5f9)}.___SInputField_4h96k_gg_.__disabled_4h96k_gg_>div{opacity:var(--intergalactic-disabled-opacity, 0.3)}", /*__inner_css_end__*/"4h96k_gg_"),
|
|
17
23
|
/*__reshadow_css_end__*/
|
|
18
24
|
{
|
|
19
|
-
"__SInputField": "
|
|
20
|
-
"_showErrors": "
|
|
21
|
-
"_readonly": "
|
|
22
|
-
"_disabled": "
|
|
23
|
-
"_size_m": "
|
|
24
|
-
"--minRows": "--
|
|
25
|
-
"--maxRows": "--
|
|
26
|
-
"_size_l": "
|
|
27
|
-
"_state_normal": "
|
|
28
|
-
"_state_valid": "
|
|
29
|
-
"_state_invalid": "
|
|
25
|
+
"__SInputField": "___SInputField_4h96k_gg_",
|
|
26
|
+
"_showErrors": "__showErrors_4h96k_gg_",
|
|
27
|
+
"_readonly": "__readonly_4h96k_gg_",
|
|
28
|
+
"_disabled": "__disabled_4h96k_gg_",
|
|
29
|
+
"_size_m": "_size_m_4h96k_gg_",
|
|
30
|
+
"--minRows": "--minRows_4h96k",
|
|
31
|
+
"--maxRows": "--maxRows_4h96k",
|
|
32
|
+
"_size_l": "_size_l_4h96k_gg_",
|
|
33
|
+
"_state_normal": "_state_normal_4h96k_gg_",
|
|
34
|
+
"_state_valid": "_state_valid_4h96k_gg_",
|
|
35
|
+
"_state_invalid": "_state_invalid_4h96k_gg_"
|
|
30
36
|
});
|
|
31
|
-
import Tooltip from '@semcore/tooltip';
|
|
32
|
-
import { extractAriaProps } from '@semcore/core/lib/utils/ariaProps';
|
|
33
|
-
import uniqueIDEnhancement from '@semcore/core/lib/utils/uniqueID';
|
|
34
|
-
import DOMPurify from 'dompurify';
|
|
35
37
|
var InputField = /*#__PURE__*/function (_Component) {
|
|
36
|
-
_inherits(InputField, _Component);
|
|
37
|
-
var _super = _createSuper(InputField);
|
|
38
38
|
function InputField(props) {
|
|
39
39
|
var _this;
|
|
40
40
|
_classCallCheck(this, InputField);
|
|
41
|
-
_this =
|
|
42
|
-
_defineProperty(
|
|
43
|
-
_defineProperty(
|
|
44
|
-
_defineProperty(
|
|
45
|
-
_defineProperty(
|
|
46
|
-
_defineProperty(
|
|
47
|
-
_defineProperty(
|
|
48
|
-
_defineProperty(
|
|
49
|
-
_defineProperty(
|
|
50
|
-
_defineProperty(
|
|
51
|
-
_defineProperty(
|
|
52
|
-
_defineProperty(
|
|
53
|
-
_defineProperty(
|
|
54
|
-
_defineProperty(
|
|
55
|
-
_defineProperty(
|
|
56
|
-
_defineProperty(
|
|
57
|
-
_defineProperty(
|
|
41
|
+
_this = _callSuper(this, InputField, [props]);
|
|
42
|
+
_defineProperty(_this, "delimiter", '\n');
|
|
43
|
+
_defineProperty(_this, "skipEmptyLines", true);
|
|
44
|
+
_defineProperty(_this, "emptyLineValue", '');
|
|
45
|
+
_defineProperty(_this, "spaceLineValue", ' ');
|
|
46
|
+
_defineProperty(_this, "containerRef", /*#__PURE__*/React.createRef());
|
|
47
|
+
_defineProperty(_this, "textarea", void 0);
|
|
48
|
+
_defineProperty(_this, "popper", null);
|
|
49
|
+
_defineProperty(_this, "setPopperTrigger", null);
|
|
50
|
+
_defineProperty(_this, "errorByInteraction", null);
|
|
51
|
+
_defineProperty(_this, "changeTriggerTimeout", 0);
|
|
52
|
+
_defineProperty(_this, "isScrolling", false);
|
|
53
|
+
_defineProperty(_this, "scrollingTimeout", 0);
|
|
54
|
+
_defineProperty(_this, "toggleErrorsPopperTimeout", 0);
|
|
55
|
+
_defineProperty(_this, "isFocusing", false);
|
|
56
|
+
_defineProperty(_this, "linesCountTimeout", 0);
|
|
57
|
+
_defineProperty(_this, "state", {
|
|
58
58
|
visibleErrorPopper: false,
|
|
59
59
|
keyboardLineIndex: -1,
|
|
60
60
|
mouseLineIndex: -1
|
|
61
61
|
});
|
|
62
|
-
_this.handlePaste = _this.handlePaste.bind(
|
|
63
|
-
_this.handleChange = _this.handleChange.bind(
|
|
64
|
-
_this.handleFocus = _this.handleFocus.bind(
|
|
65
|
-
_this.handleBlur = _this.handleBlur.bind(
|
|
66
|
-
_this.handleKeyDown = _this.handleKeyDown.bind(
|
|
67
|
-
_this.handleMouseDown = _this.handleMouseDown.bind(
|
|
68
|
-
_this.handleMouseMove = _this.handleMouseMove.bind(
|
|
69
|
-
_this.handleMouseLeave = _this.handleMouseLeave.bind(
|
|
70
|
-
_this.handleScroll = _this.handleScroll.bind(
|
|
71
|
-
_this.handleSelectAll = _this.handleSelectAll.bind(
|
|
62
|
+
_this.handlePaste = _this.handlePaste.bind(_this);
|
|
63
|
+
_this.handleChange = _this.handleChange.bind(_this);
|
|
64
|
+
_this.handleFocus = _this.handleFocus.bind(_this);
|
|
65
|
+
_this.handleBlur = _this.handleBlur.bind(_this);
|
|
66
|
+
_this.handleKeyDown = _this.handleKeyDown.bind(_this);
|
|
67
|
+
_this.handleMouseDown = _this.handleMouseDown.bind(_this);
|
|
68
|
+
_this.handleMouseMove = _this.handleMouseMove.bind(_this);
|
|
69
|
+
_this.handleMouseLeave = _this.handleMouseLeave.bind(_this);
|
|
70
|
+
_this.handleScroll = _this.handleScroll.bind(_this);
|
|
71
|
+
_this.handleSelectAll = _this.handleSelectAll.bind(_this);
|
|
72
72
|
_this.textarea = _this.createContentEditableElement(props);
|
|
73
73
|
return _this;
|
|
74
74
|
}
|
|
75
|
-
|
|
75
|
+
_inherits(InputField, _Component);
|
|
76
|
+
return _createClass(InputField, [{
|
|
76
77
|
key: "uncontrolledProps",
|
|
77
78
|
value: function uncontrolledProps() {
|
|
78
79
|
return {
|
|
@@ -85,7 +86,7 @@ var InputField = /*#__PURE__*/function (_Component) {
|
|
|
85
86
|
key: "componentDidMount",
|
|
86
87
|
value: function componentDidMount() {
|
|
87
88
|
var _this$containerRef$cu;
|
|
88
|
-
(_this$containerRef$cu = this.containerRef.current) === null || _this$containerRef$cu === void 0
|
|
89
|
+
(_this$containerRef$cu = this.containerRef.current) === null || _this$containerRef$cu === void 0 || _this$containerRef$cu.append(this.textarea);
|
|
89
90
|
this.handleValueOutChange();
|
|
90
91
|
}
|
|
91
92
|
}, {
|
|
@@ -155,7 +156,6 @@ var InputField = /*#__PURE__*/function (_Component) {
|
|
|
155
156
|
}
|
|
156
157
|
}, 0); // need this timeout to update errorIndex to the new (usually empty) line
|
|
157
158
|
}
|
|
158
|
-
|
|
159
159
|
if (!showErrors) {
|
|
160
160
|
this.recalculateErrors();
|
|
161
161
|
}
|
|
@@ -298,7 +298,7 @@ var InputField = /*#__PURE__*/function (_Component) {
|
|
|
298
298
|
}
|
|
299
299
|
}, {
|
|
300
300
|
key: "handleMouseLeave",
|
|
301
|
-
value: function handleMouseLeave(
|
|
301
|
+
value: function handleMouseLeave() {
|
|
302
302
|
if (this.changeTriggerTimeout) {
|
|
303
303
|
clearTimeout(this.changeTriggerTimeout);
|
|
304
304
|
}
|
|
@@ -345,9 +345,9 @@ var InputField = /*#__PURE__*/function (_Component) {
|
|
|
345
345
|
textNode = lastNodeToInsert.childNodes.item(0);
|
|
346
346
|
position = ((_lastNodeToInsert$tex = lastNodeToInsert.textContent) !== null && _lastNodeToInsert$tex !== void 0 ? _lastNodeToInsert$tex : '').length;
|
|
347
347
|
} else if (focusNode instanceof HTMLParagraphElement && anchorNode instanceof HTMLParagraphElement) {
|
|
348
|
-
var _anchorNode$textConte, _anchorNode$textConte2, _focusNode$textConten, _focusNode$textConten2,
|
|
349
|
-
var before = (_anchorNode$textConte = anchorNode === null || anchorNode === void 0
|
|
350
|
-
var after = (_focusNode$textConten = focusNode === null || focusNode === void 0
|
|
348
|
+
var _anchorNode$textConte, _anchorNode$textConte2, _focusNode$textConten, _focusNode$textConten2, _firstNodeToInsert$te;
|
|
349
|
+
var before = (_anchorNode$textConte = anchorNode === null || anchorNode === void 0 || (_anchorNode$textConte2 = anchorNode.textContent) === null || _anchorNode$textConte2 === void 0 ? void 0 : _anchorNode$textConte2.substring(0, fromOffset)) !== null && _anchorNode$textConte !== void 0 ? _anchorNode$textConte : '';
|
|
350
|
+
var after = (_focusNode$textConten = focusNode === null || focusNode === void 0 || (_focusNode$textConten2 = focusNode.textContent) === null || _focusNode$textConten2 === void 0 ? void 0 : _focusNode$textConten2.substring(toOffset)) !== null && _focusNode$textConten !== void 0 ? _focusNode$textConten : '';
|
|
351
351
|
var noEmptyLineBefore = before.trim() === '' ? '' : before;
|
|
352
352
|
var noEmptyLineAfter = after.trim() === '' ? '' : after;
|
|
353
353
|
selection.deleteFromDocument();
|
|
@@ -356,7 +356,7 @@ var InputField = /*#__PURE__*/function (_Component) {
|
|
|
356
356
|
}
|
|
357
357
|
var firstNodeToInsert = listOfNodes.splice(0, 1)[0];
|
|
358
358
|
var _lastNodeToInsert = listOfNodes[listOfNodes.length - 1];
|
|
359
|
-
anchorNode.textContent =
|
|
359
|
+
anchorNode.textContent = noEmptyLineBefore + ((_firstNodeToInsert$te = firstNodeToInsert === null || firstNodeToInsert === void 0 ? void 0 : firstNodeToInsert.textContent) !== null && _firstNodeToInsert$te !== void 0 ? _firstNodeToInsert$te : '');
|
|
360
360
|
anchorNode.after.apply(anchorNode, _toConsumableArray(listOfNodes));
|
|
361
361
|
if (_lastNodeToInsert) {
|
|
362
362
|
var _lastNodeToInsert$tex2, _lastNodeToInsert$tex3;
|
|
@@ -375,8 +375,7 @@ var InputField = /*#__PURE__*/function (_Component) {
|
|
|
375
375
|
}
|
|
376
376
|
}
|
|
377
377
|
if (textNode instanceof Text) {
|
|
378
|
-
|
|
379
|
-
this.setSelection(textNode, (_position = position) !== null && _position !== void 0 ? _position : 1, (_position2 = position) !== null && _position2 !== void 0 ? _position2 : 1);
|
|
378
|
+
this.setSelection(textNode, position !== null && position !== void 0 ? position : 1, position !== null && position !== void 0 ? position : 1);
|
|
380
379
|
this.toggleErrorsPopper('keyboardLineIndex', textNode.parentNode);
|
|
381
380
|
} else {
|
|
382
381
|
var _textNode;
|
|
@@ -405,7 +404,7 @@ var InputField = /*#__PURE__*/function (_Component) {
|
|
|
405
404
|
var text = document.createTextNode(nodeText);
|
|
406
405
|
firstRow.append(text);
|
|
407
406
|
firstNode.replaceWith(firstRow);
|
|
408
|
-
selection === null || selection === void 0
|
|
407
|
+
selection === null || selection === void 0 || selection.setPosition(firstRow, nodeText.length);
|
|
409
408
|
} else if (!firstNode || firstNode instanceof HTMLBRElement && nodes.length === 1) {
|
|
410
409
|
this.textarea.textContent = '';
|
|
411
410
|
this.setState({
|
|
@@ -470,7 +469,7 @@ var InputField = /*#__PURE__*/function (_Component) {
|
|
|
470
469
|
if (showErrors && ((_this$popper = this.popper) === null || _this$popper === void 0 ? void 0 : _this$popper.current.state.elements.reference) !== trigger) {
|
|
471
470
|
if (this.shouldChangePopperTrigger(trigger)) {
|
|
472
471
|
var _this$setPopperTrigge;
|
|
473
|
-
(_this$setPopperTrigge = this.setPopperTrigger) === null || _this$setPopperTrigge === void 0
|
|
472
|
+
(_this$setPopperTrigge = this.setPopperTrigger) === null || _this$setPopperTrigge === void 0 || _this$setPopperTrigge.call(this, trigger);
|
|
474
473
|
} else {
|
|
475
474
|
this.setState({
|
|
476
475
|
visibleErrorPopper: false
|
|
@@ -479,7 +478,7 @@ var InputField = /*#__PURE__*/function (_Component) {
|
|
|
479
478
|
}
|
|
480
479
|
} else if (rowNode === null) {
|
|
481
480
|
var _this$setPopperTrigge2;
|
|
482
|
-
(_this$setPopperTrigge2 = this.setPopperTrigger) === null || _this$setPopperTrigge2 === void 0
|
|
481
|
+
(_this$setPopperTrigge2 = this.setPopperTrigger) === null || _this$setPopperTrigge2 === void 0 || _this$setPopperTrigge2.call(this, this.textarea);
|
|
483
482
|
if ((selection === null || selection === void 0 ? void 0 : selection.focusNode) === this.textarea && this.textarea.childNodes.length > 1) {
|
|
484
483
|
var nodeIndex = selection.focusOffset;
|
|
485
484
|
var emptyParagraph = this.textarea.childNodes.item(nodeIndex - 1);
|
|
@@ -500,7 +499,7 @@ var InputField = /*#__PURE__*/function (_Component) {
|
|
|
500
499
|
}
|
|
501
500
|
}, {
|
|
502
501
|
key: "handleFocus",
|
|
503
|
-
value: function handleFocus(
|
|
502
|
+
value: function handleFocus() {
|
|
504
503
|
this.isFocusing = true;
|
|
505
504
|
this.errorByInteraction = 'keyboard';
|
|
506
505
|
if (this.asProps.showErrors) {
|
|
@@ -552,7 +551,7 @@ var InputField = /*#__PURE__*/function (_Component) {
|
|
|
552
551
|
var _selection$focusNode, _selectionNode$textCo, _currentNode$textCont2, _row$textContent;
|
|
553
552
|
event.preventDefault();
|
|
554
553
|
var selection = document.getSelection();
|
|
555
|
-
var selectionNode = (selection === null || selection === void 0 ? void 0 : selection.focusNode) instanceof Text ? selection.focusNode : selection === null || selection === void 0
|
|
554
|
+
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);
|
|
556
555
|
var selectionOffset = selection === null || selection === void 0 ? void 0 : selection.focusOffset;
|
|
557
556
|
var newRowValue = '';
|
|
558
557
|
if (selectionNode instanceof Text && selectionOffset !== undefined && selectionOffset !== ((_selectionNode$textCo = selectionNode.textContent) === null || _selectionNode$textCo === void 0 ? void 0 : _selectionNode$textCo.length)) {
|
|
@@ -622,7 +621,7 @@ var InputField = /*#__PURE__*/function (_Component) {
|
|
|
622
621
|
this.toggleErrorsPopperByKeyboard(0);
|
|
623
622
|
}
|
|
624
623
|
} else if (this.isRangeSelection()) {
|
|
625
|
-
var _currentNode$textCont4, _focusElement$parentN, _anchorElement$parent, _focusElement$parentN2
|
|
624
|
+
var _currentNode$textCont4, _focusElement$parentN, _anchorElement$parent, _focusElement$parentN2;
|
|
626
625
|
var _selection = document.getSelection();
|
|
627
626
|
var direction = this.getSelectionDirection();
|
|
628
627
|
var anchorElement = direction === 'backward' ? _selection === null || _selection === void 0 ? void 0 : _selection.focusNode : _selection === null || _selection === void 0 ? void 0 : _selection.anchorNode;
|
|
@@ -649,9 +648,8 @@ var InputField = /*#__PURE__*/function (_Component) {
|
|
|
649
648
|
_this5.recalculateErrors();
|
|
650
649
|
}, 0);
|
|
651
650
|
this.toggleErrorsPopperByKeyboard(0);
|
|
652
|
-
}
|
|
653
|
-
|
|
654
|
-
else if (focusElement !== anchorElement && focusElement instanceof Text && anchorElement instanceof Text && (focusElement === null || focusElement === void 0 ? void 0 : focusElement.textContent) === (focusElement === null || focusElement === void 0 ? void 0 : (_focusElement$parentN = focusElement.parentNode) === null || _focusElement$parentN === void 0 ? void 0 : _focusElement$parentN.textContent) && (anchorElement === null || anchorElement === void 0 ? void 0 : anchorElement.textContent) === (anchorElement === null || anchorElement === void 0 ? void 0 : (_anchorElement$parent = anchorElement.parentNode) === null || _anchorElement$parent === void 0 ? void 0 : _anchorElement$parent.textContent) && anchorOffset === 0 && focusOffset === (focusElement === null || focusElement === void 0 ? void 0 : (_focusElement$parentN2 = focusElement.parentNode) === null || _focusElement$parentN2 === void 0 ? void 0 : (_focusElement$parentN3 = _focusElement$parentN2.textContent) === null || _focusElement$parentN3 === void 0 ? void 0 : _focusElement$parentN3.length)) {
|
|
651
|
+
} 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)) {
|
|
652
|
+
// Backspace on selected few full rows
|
|
655
653
|
event.preventDefault();
|
|
656
654
|
var paragraphs = Array.from(this.textarea.children);
|
|
657
655
|
var _anchorParagraph = anchorElement.parentElement;
|
|
@@ -725,9 +723,9 @@ var InputField = /*#__PURE__*/function (_Component) {
|
|
|
725
723
|
boundary: (_this$containerRef$cu2 = this.containerRef.current) !== null && _this$containerRef$cu2 !== void 0 ? _this$containerRef$cu2 : undefined,
|
|
726
724
|
tether: false
|
|
727
725
|
}
|
|
728
|
-
}), function (
|
|
729
|
-
var popper =
|
|
730
|
-
setTrigger =
|
|
726
|
+
}), function (_ref3) {
|
|
727
|
+
var popper = _ref3.popper,
|
|
728
|
+
setTrigger = _ref3.setTrigger;
|
|
731
729
|
if (!_this6.popper) {
|
|
732
730
|
_this6.setPopperTrigger = setTrigger;
|
|
733
731
|
// @ts-ignore
|
|
@@ -804,7 +802,7 @@ var InputField = /*#__PURE__*/function (_Component) {
|
|
|
804
802
|
var _this8$asProps = _this8.asProps,
|
|
805
803
|
maxLines = _this8$asProps.maxLines,
|
|
806
804
|
linesCount = _this8$asProps.linesCount;
|
|
807
|
-
_this8.textarea.childNodes.forEach(function (node
|
|
805
|
+
_this8.textarea.childNodes.forEach(function (node) {
|
|
808
806
|
if (node instanceof HTMLParagraphElement) {
|
|
809
807
|
node.dataset.overMaxRows = 'false';
|
|
810
808
|
if (node.textContent !== _this8.getEmptyParagraph().textContent && node.textContent !== '') {
|
|
@@ -861,39 +859,39 @@ var InputField = /*#__PURE__*/function (_Component) {
|
|
|
861
859
|
}, {
|
|
862
860
|
key: "toggleErrorsPopper",
|
|
863
861
|
value: function toggleErrorsPopper(key, target, timer) {
|
|
864
|
-
var
|
|
862
|
+
var _this0 = this;
|
|
865
863
|
if (target instanceof HTMLDivElement || target instanceof HTMLParagraphElement) {
|
|
866
864
|
if (this.changeTriggerTimeout) {
|
|
867
865
|
clearTimeout(this.changeTriggerTimeout);
|
|
868
866
|
}
|
|
869
867
|
this.changeTriggerTimeout = window.setTimeout(function () {
|
|
870
|
-
var targetElement = target ===
|
|
868
|
+
var targetElement = target === _this0.textarea ? _this0.getNodeFromSelection() : target;
|
|
871
869
|
var lineIndex = -1;
|
|
872
870
|
var isInvalidRow = false;
|
|
873
871
|
if (targetElement instanceof HTMLParagraphElement) {
|
|
874
872
|
isInvalidRow = targetElement.getAttribute('aria-invalid') === 'true';
|
|
875
|
-
lineIndex = Array.from(
|
|
876
|
-
} else if (targetElement ===
|
|
873
|
+
lineIndex = Array.from(_this0.textarea.childNodes).indexOf(targetElement);
|
|
874
|
+
} else if (targetElement === _this0.textarea) {
|
|
877
875
|
lineIndex = 0;
|
|
878
876
|
}
|
|
879
877
|
if (targetElement instanceof HTMLElement) {
|
|
880
|
-
|
|
878
|
+
_this0.setState(function (prevState) {
|
|
881
879
|
var newState = {
|
|
882
|
-
visibleErrorPopper:
|
|
880
|
+
visibleErrorPopper: _this0.isFocusing && Boolean(_this0.asProps.commonErrorMessage) ? true : isInvalidRow,
|
|
883
881
|
mouseLineIndex: prevState.mouseLineIndex,
|
|
884
882
|
keyboardLineIndex: prevState.keyboardLineIndex
|
|
885
883
|
};
|
|
886
|
-
if (
|
|
884
|
+
if (_this0.isFocusing || key === 'mouseLineIndex' && isInvalidRow) {
|
|
887
885
|
newState[key] = lineIndex;
|
|
888
886
|
}
|
|
889
887
|
return newState;
|
|
890
888
|
}, function () {
|
|
891
|
-
|
|
892
|
-
var trigger = isInvalidRow ? targetElement :
|
|
893
|
-
if (
|
|
894
|
-
var
|
|
895
|
-
(
|
|
896
|
-
|
|
889
|
+
_this0.errorByInteraction = key === 'mouseLineIndex' ? 'mouse' : 'keyboard';
|
|
890
|
+
var trigger = isInvalidRow ? targetElement : _this0.textarea;
|
|
891
|
+
if (_this0.shouldChangePopperTrigger(trigger)) {
|
|
892
|
+
var _this0$setPopperTrigg;
|
|
893
|
+
(_this0$setPopperTrigg = _this0.setPopperTrigger) === null || _this0$setPopperTrigg === void 0 || _this0$setPopperTrigg.call(_this0, trigger);
|
|
894
|
+
_this0.forceUpdate();
|
|
897
895
|
}
|
|
898
896
|
});
|
|
899
897
|
}
|
|
@@ -919,7 +917,7 @@ var InputField = /*#__PURE__*/function (_Component) {
|
|
|
919
917
|
key: "handleChangeErrorIndex",
|
|
920
918
|
value: function handleChangeErrorIndex(errorIndex) {
|
|
921
919
|
var _error$lineNode,
|
|
922
|
-
|
|
920
|
+
_this1 = this;
|
|
923
921
|
var error = this.asProps.errors[errorIndex];
|
|
924
922
|
var childNodes = this.textarea.childNodes;
|
|
925
923
|
var node = error ? (_error$lineNode = error.lineNode) !== null && _error$lineNode !== void 0 ? _error$lineNode : childNodes.item(error.lineIndex) : null;
|
|
@@ -931,9 +929,9 @@ var InputField = /*#__PURE__*/function (_Component) {
|
|
|
931
929
|
setTimeout(function () {
|
|
932
930
|
var text = node.childNodes.item(0);
|
|
933
931
|
if (text instanceof Text) {
|
|
934
|
-
|
|
932
|
+
_this1.setSelection(text, 0, text.length);
|
|
935
933
|
} else {
|
|
936
|
-
|
|
934
|
+
_this1.setSelection(node, 0, 1);
|
|
937
935
|
}
|
|
938
936
|
}, 150);
|
|
939
937
|
}
|
|
@@ -966,8 +964,8 @@ var InputField = /*#__PURE__*/function (_Component) {
|
|
|
966
964
|
var range = document.createRange();
|
|
967
965
|
range.setStart(node, start);
|
|
968
966
|
range.setEnd(node, end);
|
|
969
|
-
selection === null || selection === void 0
|
|
970
|
-
selection === null || selection === void 0
|
|
967
|
+
selection === null || selection === void 0 || selection.removeAllRanges();
|
|
968
|
+
selection === null || selection === void 0 || selection.addRange(range);
|
|
971
969
|
var nodeToScroll = node instanceof Text ? node.parentNode : node;
|
|
972
970
|
if (nodeToScroll instanceof HTMLElement) {
|
|
973
971
|
nodeToScroll.scrollIntoView({
|
|
@@ -1114,7 +1112,6 @@ var InputField = /*#__PURE__*/function (_Component) {
|
|
|
1114
1112
|
return null;
|
|
1115
1113
|
}
|
|
1116
1114
|
}]);
|
|
1117
|
-
return InputField;
|
|
1118
1115
|
}(Component);
|
|
1119
1116
|
_defineProperty(InputField, "displayName", 'Textarea');
|
|
1120
1117
|
_defineProperty(InputField, "style", style);
|