@semcore/bulk-textarea 16.2.0-prerelease.4 → 16.2.1-prerelease.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +6 -0
- package/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
|
@@ -1,6 +1,6 @@
|
|
|
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
|
});
|
|
@@ -10,74 +10,75 @@ var _createForOfIteratorHelper2 = _interopRequireDefault(require("@babel/runtime
|
|
|
10
10
|
var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
|
|
11
11
|
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
|
|
12
12
|
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
|
|
13
|
-
var
|
|
13
|
+
var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
|
|
14
|
+
var _isNativeReflectConstruct2 = _interopRequireDefault(require("@babel/runtime/helpers/isNativeReflectConstruct"));
|
|
15
|
+
var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
|
|
14
16
|
var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
|
|
15
|
-
var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/createSuper"));
|
|
16
17
|
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
17
18
|
var _core = require("@semcore/core");
|
|
18
|
-
var _react = _interopRequireDefault(require("react"));
|
|
19
|
-
var _flexBox = require("@semcore/flex-box");
|
|
20
|
-
var _tooltip = _interopRequireDefault(require("@semcore/tooltip"));
|
|
21
19
|
var _ariaProps = require("@semcore/core/lib/utils/ariaProps");
|
|
22
20
|
var _uniqueID = _interopRequireDefault(require("@semcore/core/lib/utils/uniqueID"));
|
|
21
|
+
var _flexBox = require("@semcore/flex-box");
|
|
22
|
+
var _tooltip = _interopRequireDefault(require("@semcore/tooltip"));
|
|
23
23
|
var _dompurify = _interopRequireDefault(require("dompurify"));
|
|
24
|
+
var _react = _interopRequireDefault(require("react"));
|
|
25
|
+
function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2["default"])(o), (0, _possibleConstructorReturn2["default"])(t, (0, _isNativeReflectConstruct2["default"])() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2["default"])(t).constructor) : o.apply(t, e)); }
|
|
24
26
|
/*!__reshadow-styles__:"./inputField.shadow.css"*/
|
|
25
|
-
var style = (
|
|
27
|
+
var style = (/*__reshadow_css_start__*/_core.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_"),
|
|
26
28
|
/*__reshadow_css_end__*/
|
|
27
29
|
{
|
|
28
|
-
"__SInputField": "
|
|
29
|
-
"_showErrors": "
|
|
30
|
-
"_readonly": "
|
|
31
|
-
"_disabled": "
|
|
32
|
-
"_size_m": "
|
|
33
|
-
"--minRows": "--
|
|
34
|
-
"--maxRows": "--
|
|
35
|
-
"_size_l": "
|
|
36
|
-
"_state_normal": "
|
|
37
|
-
"_state_valid": "
|
|
38
|
-
"_state_invalid": "
|
|
30
|
+
"__SInputField": "___SInputField_4h96k_gg_",
|
|
31
|
+
"_showErrors": "__showErrors_4h96k_gg_",
|
|
32
|
+
"_readonly": "__readonly_4h96k_gg_",
|
|
33
|
+
"_disabled": "__disabled_4h96k_gg_",
|
|
34
|
+
"_size_m": "_size_m_4h96k_gg_",
|
|
35
|
+
"--minRows": "--minRows_4h96k",
|
|
36
|
+
"--maxRows": "--maxRows_4h96k",
|
|
37
|
+
"_size_l": "_size_l_4h96k_gg_",
|
|
38
|
+
"_state_normal": "_state_normal_4h96k_gg_",
|
|
39
|
+
"_state_valid": "_state_valid_4h96k_gg_",
|
|
40
|
+
"_state_invalid": "_state_invalid_4h96k_gg_"
|
|
39
41
|
});
|
|
40
|
-
var InputField = /*#__PURE__*/function (_Component) {
|
|
41
|
-
(0, _inherits2["default"])(InputField, _Component);
|
|
42
|
-
var _super = (0, _createSuper2["default"])(InputField);
|
|
42
|
+
var InputField = exports.InputField = /*#__PURE__*/function (_Component) {
|
|
43
43
|
function InputField(props) {
|
|
44
44
|
var _this;
|
|
45
45
|
(0, _classCallCheck2["default"])(this, InputField);
|
|
46
|
-
_this =
|
|
47
|
-
(0, _defineProperty2["default"])(
|
|
48
|
-
(0, _defineProperty2["default"])(
|
|
49
|
-
(0, _defineProperty2["default"])(
|
|
50
|
-
(0, _defineProperty2["default"])(
|
|
51
|
-
(0, _defineProperty2["default"])(
|
|
52
|
-
(0, _defineProperty2["default"])(
|
|
53
|
-
(0, _defineProperty2["default"])(
|
|
54
|
-
(0, _defineProperty2["default"])(
|
|
55
|
-
(0, _defineProperty2["default"])(
|
|
56
|
-
(0, _defineProperty2["default"])(
|
|
57
|
-
(0, _defineProperty2["default"])(
|
|
58
|
-
(0, _defineProperty2["default"])(
|
|
59
|
-
(0, _defineProperty2["default"])(
|
|
60
|
-
(0, _defineProperty2["default"])(
|
|
61
|
-
(0, _defineProperty2["default"])(
|
|
62
|
-
(0, _defineProperty2["default"])(
|
|
46
|
+
_this = _callSuper(this, InputField, [props]);
|
|
47
|
+
(0, _defineProperty2["default"])(_this, "delimiter", '\n');
|
|
48
|
+
(0, _defineProperty2["default"])(_this, "skipEmptyLines", true);
|
|
49
|
+
(0, _defineProperty2["default"])(_this, "emptyLineValue", '');
|
|
50
|
+
(0, _defineProperty2["default"])(_this, "spaceLineValue", ' ');
|
|
51
|
+
(0, _defineProperty2["default"])(_this, "containerRef", /*#__PURE__*/_react["default"].createRef());
|
|
52
|
+
(0, _defineProperty2["default"])(_this, "textarea", void 0);
|
|
53
|
+
(0, _defineProperty2["default"])(_this, "popper", null);
|
|
54
|
+
(0, _defineProperty2["default"])(_this, "setPopperTrigger", null);
|
|
55
|
+
(0, _defineProperty2["default"])(_this, "errorByInteraction", null);
|
|
56
|
+
(0, _defineProperty2["default"])(_this, "changeTriggerTimeout", 0);
|
|
57
|
+
(0, _defineProperty2["default"])(_this, "isScrolling", false);
|
|
58
|
+
(0, _defineProperty2["default"])(_this, "scrollingTimeout", 0);
|
|
59
|
+
(0, _defineProperty2["default"])(_this, "toggleErrorsPopperTimeout", 0);
|
|
60
|
+
(0, _defineProperty2["default"])(_this, "isFocusing", false);
|
|
61
|
+
(0, _defineProperty2["default"])(_this, "linesCountTimeout", 0);
|
|
62
|
+
(0, _defineProperty2["default"])(_this, "state", {
|
|
63
63
|
visibleErrorPopper: false,
|
|
64
64
|
keyboardLineIndex: -1,
|
|
65
65
|
mouseLineIndex: -1
|
|
66
66
|
});
|
|
67
|
-
_this.handlePaste = _this.handlePaste.bind(
|
|
68
|
-
_this.handleChange = _this.handleChange.bind(
|
|
69
|
-
_this.handleFocus = _this.handleFocus.bind(
|
|
70
|
-
_this.handleBlur = _this.handleBlur.bind(
|
|
71
|
-
_this.handleKeyDown = _this.handleKeyDown.bind(
|
|
72
|
-
_this.handleMouseDown = _this.handleMouseDown.bind(
|
|
73
|
-
_this.handleMouseMove = _this.handleMouseMove.bind(
|
|
74
|
-
_this.handleMouseLeave = _this.handleMouseLeave.bind(
|
|
75
|
-
_this.handleScroll = _this.handleScroll.bind(
|
|
76
|
-
_this.handleSelectAll = _this.handleSelectAll.bind(
|
|
67
|
+
_this.handlePaste = _this.handlePaste.bind(_this);
|
|
68
|
+
_this.handleChange = _this.handleChange.bind(_this);
|
|
69
|
+
_this.handleFocus = _this.handleFocus.bind(_this);
|
|
70
|
+
_this.handleBlur = _this.handleBlur.bind(_this);
|
|
71
|
+
_this.handleKeyDown = _this.handleKeyDown.bind(_this);
|
|
72
|
+
_this.handleMouseDown = _this.handleMouseDown.bind(_this);
|
|
73
|
+
_this.handleMouseMove = _this.handleMouseMove.bind(_this);
|
|
74
|
+
_this.handleMouseLeave = _this.handleMouseLeave.bind(_this);
|
|
75
|
+
_this.handleScroll = _this.handleScroll.bind(_this);
|
|
76
|
+
_this.handleSelectAll = _this.handleSelectAll.bind(_this);
|
|
77
77
|
_this.textarea = _this.createContentEditableElement(props);
|
|
78
78
|
return _this;
|
|
79
79
|
}
|
|
80
|
-
(0,
|
|
80
|
+
(0, _inherits2["default"])(InputField, _Component);
|
|
81
|
+
return (0, _createClass2["default"])(InputField, [{
|
|
81
82
|
key: "uncontrolledProps",
|
|
82
83
|
value: function uncontrolledProps() {
|
|
83
84
|
return {
|
|
@@ -90,7 +91,7 @@ var InputField = /*#__PURE__*/function (_Component) {
|
|
|
90
91
|
key: "componentDidMount",
|
|
91
92
|
value: function componentDidMount() {
|
|
92
93
|
var _this$containerRef$cu;
|
|
93
|
-
(_this$containerRef$cu = this.containerRef.current) === null || _this$containerRef$cu === void 0
|
|
94
|
+
(_this$containerRef$cu = this.containerRef.current) === null || _this$containerRef$cu === void 0 || _this$containerRef$cu.append(this.textarea);
|
|
94
95
|
this.handleValueOutChange();
|
|
95
96
|
}
|
|
96
97
|
}, {
|
|
@@ -160,7 +161,6 @@ var InputField = /*#__PURE__*/function (_Component) {
|
|
|
160
161
|
}
|
|
161
162
|
}, 0); // need this timeout to update errorIndex to the new (usually empty) line
|
|
162
163
|
}
|
|
163
|
-
|
|
164
164
|
if (!showErrors) {
|
|
165
165
|
this.recalculateErrors();
|
|
166
166
|
}
|
|
@@ -303,7 +303,7 @@ var InputField = /*#__PURE__*/function (_Component) {
|
|
|
303
303
|
}
|
|
304
304
|
}, {
|
|
305
305
|
key: "handleMouseLeave",
|
|
306
|
-
value: function handleMouseLeave(
|
|
306
|
+
value: function handleMouseLeave() {
|
|
307
307
|
if (this.changeTriggerTimeout) {
|
|
308
308
|
clearTimeout(this.changeTriggerTimeout);
|
|
309
309
|
}
|
|
@@ -350,9 +350,9 @@ var InputField = /*#__PURE__*/function (_Component) {
|
|
|
350
350
|
textNode = lastNodeToInsert.childNodes.item(0);
|
|
351
351
|
position = ((_lastNodeToInsert$tex = lastNodeToInsert.textContent) !== null && _lastNodeToInsert$tex !== void 0 ? _lastNodeToInsert$tex : '').length;
|
|
352
352
|
} else if (focusNode instanceof HTMLParagraphElement && anchorNode instanceof HTMLParagraphElement) {
|
|
353
|
-
var _anchorNode$textConte, _anchorNode$textConte2, _focusNode$textConten, _focusNode$textConten2,
|
|
354
|
-
var before = (_anchorNode$textConte = anchorNode === null || anchorNode === void 0
|
|
355
|
-
var after = (_focusNode$textConten = focusNode === null || focusNode === void 0
|
|
353
|
+
var _anchorNode$textConte, _anchorNode$textConte2, _focusNode$textConten, _focusNode$textConten2, _firstNodeToInsert$te;
|
|
354
|
+
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 : '';
|
|
355
|
+
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 : '';
|
|
356
356
|
var noEmptyLineBefore = before.trim() === '' ? '' : before;
|
|
357
357
|
var noEmptyLineAfter = after.trim() === '' ? '' : after;
|
|
358
358
|
selection.deleteFromDocument();
|
|
@@ -361,7 +361,7 @@ var InputField = /*#__PURE__*/function (_Component) {
|
|
|
361
361
|
}
|
|
362
362
|
var firstNodeToInsert = listOfNodes.splice(0, 1)[0];
|
|
363
363
|
var _lastNodeToInsert = listOfNodes[listOfNodes.length - 1];
|
|
364
|
-
anchorNode.textContent =
|
|
364
|
+
anchorNode.textContent = noEmptyLineBefore + ((_firstNodeToInsert$te = firstNodeToInsert === null || firstNodeToInsert === void 0 ? void 0 : firstNodeToInsert.textContent) !== null && _firstNodeToInsert$te !== void 0 ? _firstNodeToInsert$te : '');
|
|
365
365
|
anchorNode.after.apply(anchorNode, (0, _toConsumableArray2["default"])(listOfNodes));
|
|
366
366
|
if (_lastNodeToInsert) {
|
|
367
367
|
var _lastNodeToInsert$tex2, _lastNodeToInsert$tex3;
|
|
@@ -380,8 +380,7 @@ var InputField = /*#__PURE__*/function (_Component) {
|
|
|
380
380
|
}
|
|
381
381
|
}
|
|
382
382
|
if (textNode instanceof Text) {
|
|
383
|
-
|
|
384
|
-
this.setSelection(textNode, (_position = position) !== null && _position !== void 0 ? _position : 1, (_position2 = position) !== null && _position2 !== void 0 ? _position2 : 1);
|
|
383
|
+
this.setSelection(textNode, position !== null && position !== void 0 ? position : 1, position !== null && position !== void 0 ? position : 1);
|
|
385
384
|
this.toggleErrorsPopper('keyboardLineIndex', textNode.parentNode);
|
|
386
385
|
} else {
|
|
387
386
|
var _textNode;
|
|
@@ -410,7 +409,7 @@ var InputField = /*#__PURE__*/function (_Component) {
|
|
|
410
409
|
var text = document.createTextNode(nodeText);
|
|
411
410
|
firstRow.append(text);
|
|
412
411
|
firstNode.replaceWith(firstRow);
|
|
413
|
-
selection === null || selection === void 0
|
|
412
|
+
selection === null || selection === void 0 || selection.setPosition(firstRow, nodeText.length);
|
|
414
413
|
} else if (!firstNode || firstNode instanceof HTMLBRElement && nodes.length === 1) {
|
|
415
414
|
this.textarea.textContent = '';
|
|
416
415
|
this.setState({
|
|
@@ -475,7 +474,7 @@ var InputField = /*#__PURE__*/function (_Component) {
|
|
|
475
474
|
if (showErrors && ((_this$popper = this.popper) === null || _this$popper === void 0 ? void 0 : _this$popper.current.state.elements.reference) !== trigger) {
|
|
476
475
|
if (this.shouldChangePopperTrigger(trigger)) {
|
|
477
476
|
var _this$setPopperTrigge;
|
|
478
|
-
(_this$setPopperTrigge = this.setPopperTrigger) === null || _this$setPopperTrigge === void 0
|
|
477
|
+
(_this$setPopperTrigge = this.setPopperTrigger) === null || _this$setPopperTrigge === void 0 || _this$setPopperTrigge.call(this, trigger);
|
|
479
478
|
} else {
|
|
480
479
|
this.setState({
|
|
481
480
|
visibleErrorPopper: false
|
|
@@ -484,7 +483,7 @@ var InputField = /*#__PURE__*/function (_Component) {
|
|
|
484
483
|
}
|
|
485
484
|
} else if (rowNode === null) {
|
|
486
485
|
var _this$setPopperTrigge2;
|
|
487
|
-
(_this$setPopperTrigge2 = this.setPopperTrigger) === null || _this$setPopperTrigge2 === void 0
|
|
486
|
+
(_this$setPopperTrigge2 = this.setPopperTrigger) === null || _this$setPopperTrigge2 === void 0 || _this$setPopperTrigge2.call(this, this.textarea);
|
|
488
487
|
if ((selection === null || selection === void 0 ? void 0 : selection.focusNode) === this.textarea && this.textarea.childNodes.length > 1) {
|
|
489
488
|
var nodeIndex = selection.focusOffset;
|
|
490
489
|
var emptyParagraph = this.textarea.childNodes.item(nodeIndex - 1);
|
|
@@ -505,7 +504,7 @@ var InputField = /*#__PURE__*/function (_Component) {
|
|
|
505
504
|
}
|
|
506
505
|
}, {
|
|
507
506
|
key: "handleFocus",
|
|
508
|
-
value: function handleFocus(
|
|
507
|
+
value: function handleFocus() {
|
|
509
508
|
this.isFocusing = true;
|
|
510
509
|
this.errorByInteraction = 'keyboard';
|
|
511
510
|
if (this.asProps.showErrors) {
|
|
@@ -557,7 +556,7 @@ var InputField = /*#__PURE__*/function (_Component) {
|
|
|
557
556
|
var _selection$focusNode, _selectionNode$textCo, _currentNode$textCont2, _row$textContent;
|
|
558
557
|
event.preventDefault();
|
|
559
558
|
var selection = document.getSelection();
|
|
560
|
-
var selectionNode = (selection === null || selection === void 0 ? void 0 : selection.focusNode) instanceof Text ? selection.focusNode : selection === null || selection === void 0
|
|
559
|
+
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);
|
|
561
560
|
var selectionOffset = selection === null || selection === void 0 ? void 0 : selection.focusOffset;
|
|
562
561
|
var newRowValue = '';
|
|
563
562
|
if (selectionNode instanceof Text && selectionOffset !== undefined && selectionOffset !== ((_selectionNode$textCo = selectionNode.textContent) === null || _selectionNode$textCo === void 0 ? void 0 : _selectionNode$textCo.length)) {
|
|
@@ -627,7 +626,7 @@ var InputField = /*#__PURE__*/function (_Component) {
|
|
|
627
626
|
this.toggleErrorsPopperByKeyboard(0);
|
|
628
627
|
}
|
|
629
628
|
} else if (this.isRangeSelection()) {
|
|
630
|
-
var _currentNode$textCont4, _focusElement$parentN, _anchorElement$parent, _focusElement$parentN2
|
|
629
|
+
var _currentNode$textCont4, _focusElement$parentN, _anchorElement$parent, _focusElement$parentN2;
|
|
631
630
|
var _selection = document.getSelection();
|
|
632
631
|
var direction = this.getSelectionDirection();
|
|
633
632
|
var anchorElement = direction === 'backward' ? _selection === null || _selection === void 0 ? void 0 : _selection.focusNode : _selection === null || _selection === void 0 ? void 0 : _selection.anchorNode;
|
|
@@ -654,9 +653,8 @@ var InputField = /*#__PURE__*/function (_Component) {
|
|
|
654
653
|
_this5.recalculateErrors();
|
|
655
654
|
}, 0);
|
|
656
655
|
this.toggleErrorsPopperByKeyboard(0);
|
|
657
|
-
}
|
|
658
|
-
|
|
659
|
-
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)) {
|
|
656
|
+
} 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)) {
|
|
657
|
+
// Backspace on selected few full rows
|
|
660
658
|
event.preventDefault();
|
|
661
659
|
var paragraphs = Array.from(this.textarea.children);
|
|
662
660
|
var _anchorParagraph = anchorElement.parentElement;
|
|
@@ -730,9 +728,9 @@ var InputField = /*#__PURE__*/function (_Component) {
|
|
|
730
728
|
boundary: (_this$containerRef$cu2 = this.containerRef.current) !== null && _this$containerRef$cu2 !== void 0 ? _this$containerRef$cu2 : undefined,
|
|
731
729
|
tether: false
|
|
732
730
|
}
|
|
733
|
-
}), function (
|
|
734
|
-
var popper =
|
|
735
|
-
setTrigger =
|
|
731
|
+
}), function (_ref3) {
|
|
732
|
+
var popper = _ref3.popper,
|
|
733
|
+
setTrigger = _ref3.setTrigger;
|
|
736
734
|
if (!_this6.popper) {
|
|
737
735
|
_this6.setPopperTrigger = setTrigger;
|
|
738
736
|
// @ts-ignore
|
|
@@ -809,7 +807,7 @@ var InputField = /*#__PURE__*/function (_Component) {
|
|
|
809
807
|
var _this8$asProps = _this8.asProps,
|
|
810
808
|
maxLines = _this8$asProps.maxLines,
|
|
811
809
|
linesCount = _this8$asProps.linesCount;
|
|
812
|
-
_this8.textarea.childNodes.forEach(function (node
|
|
810
|
+
_this8.textarea.childNodes.forEach(function (node) {
|
|
813
811
|
if (node instanceof HTMLParagraphElement) {
|
|
814
812
|
node.dataset.overMaxRows = 'false';
|
|
815
813
|
if (node.textContent !== _this8.getEmptyParagraph().textContent && node.textContent !== '') {
|
|
@@ -866,39 +864,39 @@ var InputField = /*#__PURE__*/function (_Component) {
|
|
|
866
864
|
}, {
|
|
867
865
|
key: "toggleErrorsPopper",
|
|
868
866
|
value: function toggleErrorsPopper(key, target, timer) {
|
|
869
|
-
var
|
|
867
|
+
var _this0 = this;
|
|
870
868
|
if (target instanceof HTMLDivElement || target instanceof HTMLParagraphElement) {
|
|
871
869
|
if (this.changeTriggerTimeout) {
|
|
872
870
|
clearTimeout(this.changeTriggerTimeout);
|
|
873
871
|
}
|
|
874
872
|
this.changeTriggerTimeout = window.setTimeout(function () {
|
|
875
|
-
var targetElement = target ===
|
|
873
|
+
var targetElement = target === _this0.textarea ? _this0.getNodeFromSelection() : target;
|
|
876
874
|
var lineIndex = -1;
|
|
877
875
|
var isInvalidRow = false;
|
|
878
876
|
if (targetElement instanceof HTMLParagraphElement) {
|
|
879
877
|
isInvalidRow = targetElement.getAttribute('aria-invalid') === 'true';
|
|
880
|
-
lineIndex = Array.from(
|
|
881
|
-
} else if (targetElement ===
|
|
878
|
+
lineIndex = Array.from(_this0.textarea.childNodes).indexOf(targetElement);
|
|
879
|
+
} else if (targetElement === _this0.textarea) {
|
|
882
880
|
lineIndex = 0;
|
|
883
881
|
}
|
|
884
882
|
if (targetElement instanceof HTMLElement) {
|
|
885
|
-
|
|
883
|
+
_this0.setState(function (prevState) {
|
|
886
884
|
var newState = {
|
|
887
|
-
visibleErrorPopper:
|
|
885
|
+
visibleErrorPopper: _this0.isFocusing && Boolean(_this0.asProps.commonErrorMessage) ? true : isInvalidRow,
|
|
888
886
|
mouseLineIndex: prevState.mouseLineIndex,
|
|
889
887
|
keyboardLineIndex: prevState.keyboardLineIndex
|
|
890
888
|
};
|
|
891
|
-
if (
|
|
889
|
+
if (_this0.isFocusing || key === 'mouseLineIndex' && isInvalidRow) {
|
|
892
890
|
newState[key] = lineIndex;
|
|
893
891
|
}
|
|
894
892
|
return newState;
|
|
895
893
|
}, function () {
|
|
896
|
-
|
|
897
|
-
var trigger = isInvalidRow ? targetElement :
|
|
898
|
-
if (
|
|
899
|
-
var
|
|
900
|
-
(
|
|
901
|
-
|
|
894
|
+
_this0.errorByInteraction = key === 'mouseLineIndex' ? 'mouse' : 'keyboard';
|
|
895
|
+
var trigger = isInvalidRow ? targetElement : _this0.textarea;
|
|
896
|
+
if (_this0.shouldChangePopperTrigger(trigger)) {
|
|
897
|
+
var _this0$setPopperTrigg;
|
|
898
|
+
(_this0$setPopperTrigg = _this0.setPopperTrigger) === null || _this0$setPopperTrigg === void 0 || _this0$setPopperTrigg.call(_this0, trigger);
|
|
899
|
+
_this0.forceUpdate();
|
|
902
900
|
}
|
|
903
901
|
});
|
|
904
902
|
}
|
|
@@ -924,7 +922,7 @@ var InputField = /*#__PURE__*/function (_Component) {
|
|
|
924
922
|
key: "handleChangeErrorIndex",
|
|
925
923
|
value: function handleChangeErrorIndex(errorIndex) {
|
|
926
924
|
var _error$lineNode,
|
|
927
|
-
|
|
925
|
+
_this1 = this;
|
|
928
926
|
var error = this.asProps.errors[errorIndex];
|
|
929
927
|
var childNodes = this.textarea.childNodes;
|
|
930
928
|
var node = error ? (_error$lineNode = error.lineNode) !== null && _error$lineNode !== void 0 ? _error$lineNode : childNodes.item(error.lineIndex) : null;
|
|
@@ -936,9 +934,9 @@ var InputField = /*#__PURE__*/function (_Component) {
|
|
|
936
934
|
setTimeout(function () {
|
|
937
935
|
var text = node.childNodes.item(0);
|
|
938
936
|
if (text instanceof Text) {
|
|
939
|
-
|
|
937
|
+
_this1.setSelection(text, 0, text.length);
|
|
940
938
|
} else {
|
|
941
|
-
|
|
939
|
+
_this1.setSelection(node, 0, 1);
|
|
942
940
|
}
|
|
943
941
|
}, 150);
|
|
944
942
|
}
|
|
@@ -971,8 +969,8 @@ var InputField = /*#__PURE__*/function (_Component) {
|
|
|
971
969
|
var range = document.createRange();
|
|
972
970
|
range.setStart(node, start);
|
|
973
971
|
range.setEnd(node, end);
|
|
974
|
-
selection === null || selection === void 0
|
|
975
|
-
selection === null || selection === void 0
|
|
972
|
+
selection === null || selection === void 0 || selection.removeAllRanges();
|
|
973
|
+
selection === null || selection === void 0 || selection.addRange(range);
|
|
976
974
|
var nodeToScroll = node instanceof Text ? node.parentNode : node;
|
|
977
975
|
if (nodeToScroll instanceof HTMLElement) {
|
|
978
976
|
nodeToScroll.scrollIntoView({
|
|
@@ -1119,9 +1117,7 @@ var InputField = /*#__PURE__*/function (_Component) {
|
|
|
1119
1117
|
return null;
|
|
1120
1118
|
}
|
|
1121
1119
|
}]);
|
|
1122
|
-
return InputField;
|
|
1123
1120
|
}(_core.Component);
|
|
1124
|
-
exports.InputField = InputField;
|
|
1125
1121
|
(0, _defineProperty2["default"])(InputField, "displayName", 'Textarea');
|
|
1126
1122
|
(0, _defineProperty2["default"])(InputField, "style", style);
|
|
1127
1123
|
(0, _defineProperty2["default"])(InputField, "enhance", [(0, _uniqueID["default"])()]);
|