react-textarea-with-suggest 2.1.1 → 2.1.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/README.md +9 -1
- package/example/src/App.css +8 -0
- package/example/src/App.js +99 -115
- package/lib/index.d.ts +0 -1
- package/lib/index.js +1 -1
- package/lib/styles.css +0 -5
- package/lib/utils.d.ts +8 -0
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,5 +1,7 @@
|
|
|
1
1
|
# react-textarea-with-suggest
|
|
2
|
-
Textarea with suggest for React app v2
|
|
2
|
+
Textarea with suggest for React app v2
|
|
3
|
+
|
|
4
|
+
[](https://badge.fury.io/js/react-textarea-with-suggest)
|
|
3
5
|
|
|
4
6
|
### Last changes
|
|
5
7
|
[You can find in CHANGELOG.md](./CHANGELOG.md)
|
|
@@ -19,6 +21,12 @@ yarn add react-textarea-with-suggest
|
|
|
19
21
|
|
|
20
22
|
## Usage
|
|
21
23
|
|
|
24
|
+
### To use built-in styles
|
|
25
|
+
|
|
26
|
+
```
|
|
27
|
+
import "react-textarea-with-suggest/lib/styles.css";
|
|
28
|
+
```
|
|
29
|
+
|
|
22
30
|
### For functional component
|
|
23
31
|
```
|
|
24
32
|
import Textarea from "react-textarea-with-suggest";
|
package/example/src/App.css
CHANGED
package/example/src/App.js
CHANGED
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { useState } from "react";
|
|
2
2
|
import Textarea from "react-textarea-with-suggest";
|
|
3
|
+
import "react-textarea-with-suggest/lib/styles.css";
|
|
3
4
|
import "./App.css";
|
|
4
5
|
|
|
5
6
|
const randomResults = [
|
|
@@ -19,7 +20,29 @@ const randomResults = [
|
|
|
19
20
|
"Good bye",
|
|
20
21
|
];
|
|
21
22
|
|
|
23
|
+
function ExampleItem({ title, codeSnippet, pretty, children }) {
|
|
24
|
+
return (
|
|
25
|
+
<div className="example__item">
|
|
26
|
+
<p>
|
|
27
|
+
<strong>{title}</strong>
|
|
28
|
+
</p>
|
|
29
|
+
<pre>
|
|
30
|
+
<code>
|
|
31
|
+
{pretty
|
|
32
|
+
? codeSnippet
|
|
33
|
+
: codeSnippet
|
|
34
|
+
.split(" ")
|
|
35
|
+
.map((line, i) => (i === 0 ? line : ` ${line}`))
|
|
36
|
+
.join("\n")}
|
|
37
|
+
</code>
|
|
38
|
+
</pre>
|
|
39
|
+
{children}
|
|
40
|
+
</div>
|
|
41
|
+
);
|
|
42
|
+
}
|
|
43
|
+
|
|
22
44
|
function App() {
|
|
45
|
+
const [controllingValue, setControllingValue] = useState("");
|
|
23
46
|
const [results, setResults] = useState(undefined);
|
|
24
47
|
|
|
25
48
|
const onSearch = (searchPhrase) => {
|
|
@@ -35,46 +58,29 @@ function App() {
|
|
|
35
58
|
};
|
|
36
59
|
|
|
37
60
|
const onChange = (e) => {
|
|
38
|
-
console.log("onChange", e.target.value);
|
|
61
|
+
console.log("onChange", e.target.value, e);
|
|
39
62
|
};
|
|
40
63
|
|
|
41
64
|
return (
|
|
42
65
|
<div className="example">
|
|
43
66
|
<h1>TextareaWithSuggest Example</h1>
|
|
44
67
|
|
|
45
|
-
<
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
{`<Textarea
|
|
50
|
-
className="example__textarea"
|
|
51
|
-
onChange={onChange}
|
|
52
|
-
onSearch={onSearch}
|
|
53
|
-
suggestList={results}
|
|
54
|
-
/>`}
|
|
55
|
-
</code>
|
|
56
|
-
</p>
|
|
68
|
+
<ExampleItem
|
|
69
|
+
title="Default"
|
|
70
|
+
codeSnippet={`<Textarea className="example__textarea" onChange={onChange} onSearch={onSearch} suggestList={results} />`}
|
|
71
|
+
>
|
|
57
72
|
<Textarea
|
|
58
73
|
className="example__textarea"
|
|
59
74
|
onChange={onChange}
|
|
60
75
|
onSearch={onSearch}
|
|
61
76
|
suggestList={results}
|
|
62
77
|
/>
|
|
63
|
-
</
|
|
78
|
+
</ExampleItem>
|
|
64
79
|
|
|
65
|
-
<
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
{`<Textarea
|
|
70
|
-
autosizable
|
|
71
|
-
className="example__textarea"
|
|
72
|
-
onChange={onChange}
|
|
73
|
-
onSearch={onSearch}
|
|
74
|
-
suggestList={results}
|
|
75
|
-
/>`}
|
|
76
|
-
</code>
|
|
77
|
-
</p>
|
|
80
|
+
<ExampleItem
|
|
81
|
+
title="Autosizable"
|
|
82
|
+
codeSnippet={`<Textarea autosizable className="example__textarea" onChange={onChange} onSearch={onSearch} suggestList={results} />`}
|
|
83
|
+
>
|
|
78
84
|
<Textarea
|
|
79
85
|
autosizable
|
|
80
86
|
className="example__textarea"
|
|
@@ -82,88 +88,86 @@ function App() {
|
|
|
82
88
|
onSearch={onSearch}
|
|
83
89
|
suggestList={results}
|
|
84
90
|
/>
|
|
85
|
-
</
|
|
91
|
+
</ExampleItem>
|
|
86
92
|
|
|
87
|
-
<
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
{`<Textarea
|
|
92
|
-
autosizable
|
|
93
|
-
className="example__textarea"
|
|
94
|
-
value="Initial Value"
|
|
95
|
-
onChange={onChange}
|
|
96
|
-
onSearch={onSearch}
|
|
97
|
-
suggestList={results}
|
|
98
|
-
/>`}
|
|
99
|
-
</code>
|
|
100
|
-
</p>
|
|
93
|
+
<ExampleItem
|
|
94
|
+
title="With initial value"
|
|
95
|
+
codeSnippet={`<Textarea autosizable className="example__textarea" value="Initial_Value" onChange={onChange} onSearch={onSearch} suggestList={results} />`}
|
|
96
|
+
>
|
|
101
97
|
<Textarea
|
|
102
98
|
autosizable
|
|
103
99
|
className="example__textarea"
|
|
104
|
-
value="
|
|
100
|
+
value="Initial_Value"
|
|
105
101
|
onChange={onChange}
|
|
106
102
|
onSearch={onSearch}
|
|
107
103
|
suggestList={results}
|
|
108
104
|
/>
|
|
109
|
-
</
|
|
105
|
+
</ExampleItem>
|
|
110
106
|
|
|
111
|
-
<
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
107
|
+
<ExampleItem
|
|
108
|
+
title="As controlled component"
|
|
109
|
+
codeSnippet={`<Textarea className="example__textarea" value={controllingValue} onChange={onChange} onSearch={onSearch} suggestList={results} />`}
|
|
110
|
+
>
|
|
111
|
+
<div className="example__item__input">
|
|
112
|
+
<label htmlFor="textarea-controlling-value">
|
|
113
|
+
Controlling value for TextareaWithSuggest:{" "}
|
|
114
|
+
</label>
|
|
115
|
+
<input
|
|
116
|
+
type="text"
|
|
117
|
+
name="textarea-controlling-value"
|
|
118
|
+
value={controllingValue}
|
|
119
|
+
onChange={(e) => setControllingValue(e.target.value)}
|
|
120
|
+
/>
|
|
121
|
+
</div>
|
|
122
|
+
|
|
123
|
+
<Textarea
|
|
117
124
|
className="example__textarea"
|
|
118
|
-
|
|
125
|
+
value={controllingValue}
|
|
126
|
+
onChange={(e) => {
|
|
127
|
+
onChange(e);
|
|
128
|
+
setControllingValue(e.target.value);
|
|
129
|
+
}}
|
|
119
130
|
onSearch={onSearch}
|
|
120
131
|
suggestList={results}
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
132
|
+
/>
|
|
133
|
+
</ExampleItem>
|
|
134
|
+
|
|
135
|
+
<ExampleItem
|
|
136
|
+
title="With customSuggestItemRenderer"
|
|
137
|
+
pretty
|
|
138
|
+
codeSnippet={`
|
|
139
|
+
<Textarea
|
|
140
|
+
autosizable
|
|
141
|
+
className="example__textarea"
|
|
142
|
+
onChange={onChange}
|
|
143
|
+
onSearch={onSearch}
|
|
144
|
+
suggestList={results}
|
|
145
|
+
customSuggestItemRenderer={result => (
|
|
146
|
+
<div className="example__textarea__custom-item">
|
|
147
|
+
<p>Custom: <span>{result}</span></p>
|
|
148
|
+
</div>
|
|
149
|
+
)} />`}
|
|
150
|
+
>
|
|
134
151
|
<Textarea
|
|
135
152
|
autosizable
|
|
136
153
|
className="example__textarea"
|
|
137
154
|
onChange={onChange}
|
|
138
155
|
onSearch={onSearch}
|
|
139
156
|
suggestList={results}
|
|
140
|
-
customSuggestItemRenderer={(result
|
|
141
|
-
<div
|
|
142
|
-
className="example__textarea__custom-item"
|
|
143
|
-
onClick={defaultOnClick}
|
|
144
|
-
>
|
|
157
|
+
customSuggestItemRenderer={(result) => (
|
|
158
|
+
<div className="example__textarea__custom-item">
|
|
145
159
|
<p>
|
|
146
160
|
Custom: <span>{result}</span>
|
|
147
161
|
</p>
|
|
148
162
|
</div>
|
|
149
163
|
)}
|
|
150
164
|
/>
|
|
151
|
-
</
|
|
165
|
+
</ExampleItem>
|
|
152
166
|
|
|
153
|
-
<
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
{`<Textarea
|
|
158
|
-
autosizable
|
|
159
|
-
className="example__textarea"
|
|
160
|
-
onChange={onChange}
|
|
161
|
-
onSearch={onSearch}
|
|
162
|
-
suggestList={results}
|
|
163
|
-
searchMarker="#"
|
|
164
|
-
/>`}
|
|
165
|
-
</code>
|
|
166
|
-
</p>
|
|
167
|
+
<ExampleItem
|
|
168
|
+
title="With custom searchMarker '#'"
|
|
169
|
+
codeSnippet={`<Textarea autosizable className="example__textarea" onChange={onChange} onSearch={onSearch} suggestList={results} searchMarker="#" />`}
|
|
170
|
+
>
|
|
167
171
|
<Textarea
|
|
168
172
|
autosizable
|
|
169
173
|
className="example__textarea"
|
|
@@ -172,22 +176,12 @@ function App() {
|
|
|
172
176
|
suggestList={results}
|
|
173
177
|
searchMarker="#"
|
|
174
178
|
/>
|
|
175
|
-
</
|
|
179
|
+
</ExampleItem>
|
|
176
180
|
|
|
177
|
-
<
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
{`<Textarea
|
|
182
|
-
autosizable
|
|
183
|
-
className="example__textarea"
|
|
184
|
-
onChange={onChange}
|
|
185
|
-
onSearch={onSearch}
|
|
186
|
-
suggestList={results}
|
|
187
|
-
closeSuggestOnFocusOut
|
|
188
|
-
/>`}
|
|
189
|
-
</code>
|
|
190
|
-
</p>
|
|
181
|
+
<ExampleItem
|
|
182
|
+
title="Closes suggests on focusout, returns back on focusin"
|
|
183
|
+
codeSnippet={`<Textarea autosizable className="example__textarea" onChange={onChange} onSearch={onSearch} suggestList={results} closeSuggestOnFocusOut />`}
|
|
184
|
+
>
|
|
191
185
|
<Textarea
|
|
192
186
|
autosizable
|
|
193
187
|
className="example__textarea"
|
|
@@ -196,22 +190,12 @@ function App() {
|
|
|
196
190
|
suggestList={results}
|
|
197
191
|
closeSuggestOnFocusOut
|
|
198
192
|
/>
|
|
199
|
-
</
|
|
193
|
+
</ExampleItem>
|
|
200
194
|
|
|
201
|
-
<
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
{`<Textarea
|
|
206
|
-
autosizable
|
|
207
|
-
className="example__textarea"
|
|
208
|
-
onChange={onChange}
|
|
209
|
-
onSearch={onSearch}
|
|
210
|
-
suggestList={results}
|
|
211
|
-
cancelSearchOnFocusOut
|
|
212
|
-
/>`}
|
|
213
|
-
</code>
|
|
214
|
-
</p>
|
|
195
|
+
<ExampleItem
|
|
196
|
+
title="Cancelling search on focusout"
|
|
197
|
+
codeSnippet={`<Textarea autosizable className="example__textarea" onChange={onChange} onSearch={onSearch} suggestList={results} cancelSearchOnFocusOut />`}
|
|
198
|
+
>
|
|
215
199
|
<Textarea
|
|
216
200
|
autosizable
|
|
217
201
|
className="example__textarea"
|
|
@@ -220,7 +204,7 @@ function App() {
|
|
|
220
204
|
suggestList={results}
|
|
221
205
|
cancelSearchOnFocusOut
|
|
222
206
|
/>
|
|
223
|
-
</
|
|
207
|
+
</ExampleItem>
|
|
224
208
|
</div>
|
|
225
209
|
);
|
|
226
210
|
}
|
package/lib/index.d.ts
CHANGED
|
@@ -8,7 +8,6 @@
|
|
|
8
8
|
* LICENSE MIT.
|
|
9
9
|
*/
|
|
10
10
|
import React, { ReactNode, HTMLProps, ChangeEvent } from "react";
|
|
11
|
-
import "../styles.css";
|
|
12
11
|
interface TextareaSuggestProps<SuggestItemType> extends Partial<Omit<HTMLProps<HTMLTextAreaElement>, "style">> {
|
|
13
12
|
className?: string;
|
|
14
13
|
autosizable?: boolean;
|
package/lib/index.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("react-textarea-autosize");function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var
|
|
1
|
+
Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("react-textarea-autosize");function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var r=n(e),a=n(t),o=function(){return o=Object.assign||function(e){for(var t,n=1,r=arguments.length;n<r;n++)for(var a in t=arguments[n])Object.prototype.hasOwnProperty.call(t,a)&&(e[a]=t[a]);return e},o.apply(this,arguments)};function i(t){var n=e.useRef();return e.useEffect((function(){n.current=t}),[t]),n.current}function u(){if("undefined"==typeof navigator||"undefined"==typeof window)return!1;var e,t=!1;return e=navigator.userAgent||navigator.vendor||"opera"in window&&window.opera,(/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino|android|ipad|playbook|silk/i.test(e)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw-(n|u)|c55\/|capi|ccwa|cdm-|cell|chtm|cldc|cmd-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc-s|devi|dica|dmob|do(c|p)o|ds(12|-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(-|_)|g1 u|g560|gene|gf-5|g-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd-(m|p|t)|hei-|hi(pt|ta)|hp( i|ip)|hs-c|ht(c(-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i-(20|go|ma)|i230|iac( |-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|-[a-w])|libw|lynx|m1-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|-([1-8]|c))|phil|pire|pl(ay|uc)|pn-2|po(ck|rt|se)|prox|psio|pt-g|qa-a|qc(07|12|21|32|60|-[2-7]|i-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h-|oo|p-)|sdk\/|se(c(-|0|1)|47|mc|nd|ri)|sgh-|shar|sie(-|m)|sk-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h-|v-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl-|tdg-|tel(i|m)|tim-|t-mo|to(pl|sh)|ts(70|m-|m3|m5)|tx-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas-|your|zeto|zte-/i.test(e.substr(0,4)))&&(t=!0),t}var l=function(e){var t=!1,n=!1;return{nativeEvent:e,currentTarget:e.currentTarget,target:e.target,bubbles:e.bubbles,cancelable:e.cancelable,defaultPrevented:e.defaultPrevented,eventPhase:e.eventPhase,isTrusted:e.isTrusted,preventDefault:function(){t=!0,e.preventDefault()},isDefaultPrevented:function(){return t},stopPropagation:function(){n=!0,e.stopPropagation()},isPropagationStopped:function(){return n},persist:function(){},timeStamp:e.timeStamp,type:e.type}},c=function(t){var n=t.textareaRef,a=t.values,o=void 0===a?[]:a,i=t.isHidden,l=t.className,c=t.customSuggestItemRenderer,s=t.onItemClickHandler;if(i||!(null==o?void 0:o.length)||!n.current)return null;var d=e.useMemo((function(){var e;return(null===(e=n.current)||void 0===e?void 0:e.getBoundingClientRect())||{}}),[n.current]),v=d.width,f=void 0===v?0:v,m=d.left,p=void 0===m?0:m,g=u(),b=e.useCallback((function(e){return c?r.default.createElement("div",{className:"textarea-suggest-item",onMouseDown:g?void 0:s(e),onTouchStart:g?s(e):void 0},c(e)):r.default.createElement("div",{className:"textarea-suggest-item",onMouseDown:g?void 0:s(e),onTouchStart:g?s(e):void 0},r.default.createElement("div",{className:"textarea-suggest-item__info"},r.default.createElement("div",null,e)))}),[s,c]);return r.default.createElement("div",{className:"textarea-suggest__results ".concat(l?"".concat(l,"__results"):""),style:{position:"absolute",width:f,left:p}},o.map((function(t,n){return r.default.createElement(e.Fragment,{key:n},b(t))})))},s=e.forwardRef((function(e,t){return r.default.createElement("textarea",o({},e,{ref:t}))}));exports.default=function(t){var n=t.autosizable,d=void 0!==n&&n,v=t.value,f=void 0===v?"":v,m=t.searchMarker,p=void 0===m?"@":m,g=t.searchRegexp,b=t.suggestList,h=void 0===b?[]:b,w=t.closeSuggestOnFocusOut,y=void 0!==w&&w,k=t.cancelSearchOnFocusOut,x=void 0!==k&&k,O=t.onSearch,E=t.onChange,S=t.customSuggestItemRenderer,P=function(e,t){var n={};for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&t.indexOf(r)<0&&(n[r]=e[r]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var a=0;for(r=Object.getOwnPropertySymbols(e);a<r.length;a++)t.indexOf(r[a])<0&&Object.prototype.propertyIsEnumerable.call(e,r[a])&&(n[r[a]]=e[r[a]])}return n}(t,["autosizable","value","searchMarker","searchRegexp","suggestList","closeSuggestOnFocusOut","cancelSearchOnFocusOut","onSearch","onChange","customSuggestItemRenderer"]),j=e.useState(f),z=j[0],R=j[1],T=e.useState(null==f?void 0:f.includes(p)),I=T[0],_=T[1],C=e.useState(!0),M=C[0],F=C[1],N=i(z),q=i(f),D=e.useRef(null),B=d?a.default:s,H=e.useMemo((function(){return g?new RegExp(g):new RegExp("".concat(p,"([a-z0-9-_.]+[a-z0-9])"),"gim")}),[g]);e.useEffect((function(){if(p.length>1)throw new TypeError("Max length of searchMarker is 1 symbol. Please change your searchMarker to char")}),[]),e.useEffect((function(){f&&N!==f&&q!==f&&(R(f),G(void 0,f))}),[z,f,N,q]);var L=e.useCallback((function(e){var t;y&&F(!0),x&&_(!1),null===(t=P.onBlur)||void 0===t||t.call(P,e)}),[y,x,P.onBlur]),A=e.useCallback((function(e){var t;M&&F(!1),null===(t=P.onFocus)||void 0===t||t.call(P,e)}),[y,x,P.onFocus]),G=function(e,t){var n,r,a;void 0===t&&(t="");var i=e?void 0===(null===(n=e.currentTarget)||void 0===n?void 0:n.value)?z:(null===(r=e.currentTarget)||void 0===r?void 0:r.value)||z:t,u=!!e&&(void 0===e.isTrusted||e.isTrusted),c=null===(a=D.current)||void 0===a?void 0:a.selectionEnd,s=c?i.slice(c-1,c):i.slice(-1);if(R(i),s===p&&(t&&F(!1),_(!0)),i.includes(p)&&![" ","\n","\r"].includes(s)||!I||_(!1),s!==p&&I){var d=i.slice(0,c),v=d.slice(d.lastIndexOf(p)).match(H),f=v?v[0].slice(1):s;O(f)}if(!e&&D.current&&(D.current.value=i),e&&u)return null==E?void 0:E(e);if(e&&!u)return null==E?void 0:E(o(o({},e),{currentTarget:D.current,target:D.current}));var m=function(e,t){var n=new Event("change",{bubbles:!0});return Object.defineProperty(n,"target",{writable:!1,value:e}),l(n)}(D.current);return null==E?void 0:E(m)},J=e.useCallback((function(e){return function(){var t,n,r=null===(t=D.current)||void 0===t?void 0:t.selectionEnd,a=z.slice(0,r).lastIndexOf(p),o=z.slice(a);if(-1!==a){var i=(o.includes(" ")?o.indexOf(" "):z.length)+a;o.lastIndexOf(p)>0&&(i=o.lastIndexOf(p)+a),(!i||i<a)&&(i=z.length);var l=z.slice(0,a||0)+z.slice(a).replace(z.slice(a,i),"".concat(p).concat(e," "));if(u()){var c=l.slice(a).indexOf(" ")+a+1;null===(n=D.current)||void 0===n||n.setSelectionRange(c,c)}D.current&&(!function(e,t){var n,r,a=null===(n=Object.getOwnPropertyDescriptor(e,"value"))||void 0===n?void 0:n.set,o=Object.getPrototypeOf(e),i=null===(r=Object.getOwnPropertyDescriptor(o,"value"))||void 0===r?void 0:r.set;a&&a!==i?null==i||i.call(e,t):null==a||a.call(e,t),e.dispatchEvent(new Event("input",{bubbles:!0}))}(D.current,l),setTimeout((function(){var e;return null===(e=D.current)||void 0===e?void 0:e.focus()}))),_(!1),R(l)}}}),[D,z]);return r.default.createElement("div",{className:"textarea-suggest"},r.default.createElement(B,o({},P,{onBlur:L,onFocus:A,ref:D,onChange:G,value:z||f})),r.default.createElement(c,{className:P.className,textareaRef:D,values:h,isHidden:M||!I,customSuggestItemRenderer:S,onItemClickHandler:J}))};
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
package/lib/styles.css
CHANGED
package/lib/utils.d.ts
CHANGED
|
@@ -1,3 +1,11 @@
|
|
|
1
|
+
import { SyntheticEvent } from "react";
|
|
1
2
|
export type Nullable<T> = T | null;
|
|
2
3
|
export declare function usePrevious<T>(value: T): T | undefined;
|
|
3
4
|
export declare function isMobileAndTabletCheck(): boolean;
|
|
5
|
+
/**
|
|
6
|
+
* syntetic events no longer supported by react
|
|
7
|
+
* https://github.com/facebook/react/issues/12344
|
|
8
|
+
*/
|
|
9
|
+
export declare function setNativeValue(element: Element, value: string): void;
|
|
10
|
+
export declare const createSyntheticEventByTarget: <T extends Element>(target: T, eventType?: string) => SyntheticEvent<T, Event>;
|
|
11
|
+
export declare const createSyntheticEvent: <T extends Element, E extends Event>(event: E) => SyntheticEvent<T, E>;
|