react-textarea-with-suggest 2.3.0 → 2.5.0
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/example/package-lock.json +31664 -0
- package/example/package.json +1 -2
- package/lib/components/TextareaWithSuggests.d.ts +7 -3
- package/lib/constants.d.ts +5 -0
- package/lib/index.d.ts +1 -0
- package/lib/index.js +1 -1
- package/package.json +8 -7
package/example/package.json
CHANGED
|
@@ -5,7 +5,6 @@
|
|
|
5
5
|
"dependencies": {
|
|
6
6
|
"react": "^17.0.0",
|
|
7
7
|
"react-dom": "^17.0.0",
|
|
8
|
-
"react-scripts": "5.0.1",
|
|
9
8
|
"react-textarea-with-suggest": "latest"
|
|
10
9
|
},
|
|
11
10
|
"scripts": {
|
|
@@ -35,6 +34,6 @@
|
|
|
35
34
|
},
|
|
36
35
|
"devDependencies": {
|
|
37
36
|
"gh-pages": "^4.0.0",
|
|
38
|
-
"react-
|
|
37
|
+
"react-scripts": "^5.0.1"
|
|
39
38
|
}
|
|
40
39
|
}
|
|
@@ -7,9 +7,11 @@
|
|
|
7
7
|
*
|
|
8
8
|
* LICENSE MIT.
|
|
9
9
|
*/
|
|
10
|
-
import React, { HTMLProps, ChangeEvent } from "react";
|
|
10
|
+
import React, { HTMLProps, ChangeEvent, RefObject } from "react";
|
|
11
|
+
import { TextareaAutosizeProps } from "react-textarea-autosize";
|
|
11
12
|
import { CustomSuggestItemRenderer } from "../types";
|
|
12
|
-
|
|
13
|
+
import { AutoHighlightFirstItemValues } from "../constants";
|
|
14
|
+
interface TextareaSuggestProps<SuggestItemType> extends Partial<Omit<TextareaAutosizeProps & HTMLProps<HTMLTextAreaElement>, "style">> {
|
|
13
15
|
className?: string;
|
|
14
16
|
autosizable?: boolean;
|
|
15
17
|
searchMarker?: string;
|
|
@@ -21,6 +23,8 @@ interface TextareaSuggestProps<SuggestItemType> extends Partial<Omit<HTMLProps<H
|
|
|
21
23
|
onChange?: (event: ChangeEvent<HTMLTextAreaElement>) => void;
|
|
22
24
|
onSearch: (newValue: string) => void;
|
|
23
25
|
customSuggestItemRenderer?: CustomSuggestItemRenderer<SuggestItemType>;
|
|
26
|
+
forwardedRef?: RefObject<HTMLTextAreaElement>;
|
|
27
|
+
autoHighlightFirstItem?: AutoHighlightFirstItemValues;
|
|
24
28
|
}
|
|
25
|
-
export declare const TextareaWithSuggests: <SuggestItemType extends React.ReactNode>({ autosizable, value, searchMarker, searchRegexp: searchRegexpProp, suggestList, closeSuggestOnFocusOut, cancelSearchOnFocusOut, onSearch, onChange, customSuggestItemRenderer, ...props }: TextareaSuggestProps<SuggestItemType>) => JSX.Element;
|
|
29
|
+
export declare const TextareaWithSuggests: <SuggestItemType extends React.ReactNode>({ autosizable, value, searchMarker, searchRegexp: searchRegexpProp, suggestList, closeSuggestOnFocusOut, cancelSearchOnFocusOut, forwardedRef, autoHighlightFirstItem, onSearch, onChange, customSuggestItemRenderer, ...props }: TextareaSuggestProps<SuggestItemType>) => JSX.Element;
|
|
26
30
|
export {};
|
package/lib/constants.d.ts
CHANGED
|
@@ -7,3 +7,8 @@ export declare enum KeyCodes {
|
|
|
7
7
|
export declare const SUPPORTED_KEYDOWN: KeyCodes[];
|
|
8
8
|
export declare const SEARCH_MARKER = "@";
|
|
9
9
|
export declare const ENDING_SYMBOLS: string[];
|
|
10
|
+
export declare enum AutoHighlightFirstItemValues {
|
|
11
|
+
Always = "always",
|
|
12
|
+
OnlySingleItem = "only_single_item",
|
|
13
|
+
Never = "never"
|
|
14
|
+
}
|
package/lib/index.d.ts
CHANGED
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 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}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}var l,u=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=e.forwardRef((function(e,t){return r.default.createElement("textarea",o({},e,{ref:t}))})),s=r.default.memo((function(t){var n=t.isSelected,a=t.item,o=t.className,i=t.customSuggestItemRenderer,l=t.onItemClickHandler,u=e.useRef(!1),c=a,s=["textarea-suggest-item",n?"textarea-suggest-item_selected":"",o?"".concat(o,"__results__item"):"",n&&o?"".concat(o,"__results__item_selected"):""].filter(Boolean).join(" ");return r.default.createElement("div",{className:s,onMouseDown:function(e){if(u.current)return e.preventDefault(),e.stopPropagation(),void(u.current=!1);l(c)()},onTouchStart:function(e){u.current=!0,e.stopPropagation(),l(c)()}},i?i(c,n):r.default.createElement("div",{className:"textarea-suggest-item__info"},c))})),d=function(t){var n=t.textareaRef,a=t.values,o=void 0===a?[]:a,i=t.isHidden,l=t.className,u=t.selectedItemIndex,c=t.customSuggestItemRenderer,d=t.onItemClickHandler,v=e.useMemo((function(){var e,t;return(null===(t=null===(e=null==n?void 0:n.current)||void 0===e?void 0:e.getBoundingClientRect)||void 0===t?void 0:t.call(e))||{}}),[null==n?void 0:n.current]),g=v.width,m=void 0===g?0:g,f=v.left,p=void 0===f?0:f;return!i&&(null==o?void 0:o.length)&&(null==n?void 0:n.current)?r.default.createElement("div",{className:"textarea-suggest__results ".concat(l?"".concat(l,"__results"):""),style:{position:"absolute",width:m,left:p}},o.map((function(e,t){return r.default.createElement(s,{key:t,className:l,item:e,isSelected:t===u,onItemClickHandler:d,customSuggestItemRenderer:c})}))):null};!function(e){e.ArrowUp="ArrowUp",e.ArrowDown="ArrowDown",e.Enter="Enter",e.Escape="Escape"}(l||(l={}));var v,g=[l.ArrowUp,l.ArrowDown,l.Enter,l.Escape],m=[" ","\n","\r"];exports.AutoHighlightFirstItemValues=void 0,(v=exports.AutoHighlightFirstItemValues||(exports.AutoHighlightFirstItemValues={})).Always="always",v.OnlySingleItem="only_single_item",v.Never="never";exports.default=function(t){var n=t.autosizable,s=void 0!==n&&n,v=t.value,f=void 0===v?"":v,p=t.searchMarker,h=void 0===p?"@":p,w=t.searchRegexp,b=t.suggestList,y=void 0===b?[]:b,x=t.closeSuggestOnFocusOut,k=void 0!==x&&x,O=t.cancelSearchOnFocusOut,E=void 0!==O&&O,I=t.forwardedRef,S=void 0===I?void 0:I,_=t.autoHighlightFirstItem,P=void 0===_?exports.AutoHighlightFirstItemValues.Never:_,R=t.onSearch,j=t.onChange,A=t.customSuggestItemRenderer,D=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","forwardedRef","autoHighlightFirstItem","onSearch","onChange","customSuggestItemRenderer"]),z=e.useState(f),F=z[0],H=z[1],C=e.useState(null==f?void 0:f.includes(h)),T=C[0],N=C[1],M=e.useState(!0),q=M[0],V=M[1],B=e.useState(void 0),U=B[0],K=B[1],L=i(F),G=i(f),J=S||e.useRef(null),Q=s?a.default:c,W=e.useMemo((function(){return w?new RegExp(w):new RegExp("".concat(h,"([a-z0-9-_.]+[a-z0-9])"),"gim")}),[w]);e.useEffect((function(){if(h.length>1)throw new TypeError("Max length of searchMarker is 1 symbol. Please change your searchMarker to char")}),[]),e.useEffect((function(){f&&L!==f&&G!==f&&(H(f),$(void 0,f))}),[F,f,L,G]),e.useEffect((function(){(1===(null==y?void 0:y.length)&&P===exports.AutoHighlightFirstItemValues.OnlySingleItem||P===exports.AutoHighlightFirstItemValues.Always)&&K(0)}),[y,P]);var X=e.useCallback((function(e){var t,n=e.code,r=T&&!q&&y.length;if(null===(t=D.onKeyDown)||void 0===t||t.call(D,e),r&&g.includes(n))switch(e.stopPropagation(),e.nativeEvent.stopImmediatePropagation(),n){case l.ArrowUp:return e.preventDefault(),K((function(e){return void 0===e||0===e?y.length-1:e-1}));case l.ArrowDown:return e.preventDefault(),K((function(e){return void 0===e||e===y.length-1?0:e+1}));case l.Enter:return void(void 0!==U&&(e.preventDefault(),ee(y[U])()));case l.Escape:N(!1),K(void 0)}}),[D.onKeyDown,U,y,T,q]),Y=e.useCallback((function(e){var t;k&&V(!0),E&&N(!1),null===(t=D.onBlur)||void 0===t||t.call(D,e)}),[k,E,D.onBlur]),Z=e.useCallback((function(e){var t;q&&V(!1),null===(t=D.onFocus)||void 0===t||t.call(D,e)}),[k,E,D.onFocus]),$=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)?F:(null===(r=e.currentTarget)||void 0===r?void 0:r.value)||"":t,l=!!e&&(void 0===e.isTrusted||e.isTrusted),c=null===(a=J.current)||void 0===a?void 0:a.selectionEnd,s=c?i.slice(c-1,c):i.slice(-1);if(H(i),s===h&&(t&&V(!1),N(!0)),i.includes(h)&&!m.includes(s)||!T||N(!1),s!==h&&T){var d=i.slice(0,c),v=d.slice(d.lastIndexOf(h)).match(W),g=v?v[0].slice(1):s;R(g)}if(!e&&J.current&&(J.current.value=i),e&&l)return null==j?void 0:j(e);if(e&&!l)return null==j?void 0:j(o(o({},e),{currentTarget:J.current,target:J.current}));var f=function(e,t){var n=new Event(t||"change",{bubbles:!0});return Object.defineProperty(n,"target",{writable:!1,value:e}),u(n)}(J.current);return null==j?void 0:j(f)},ee=e.useCallback((function(e){return function(){var t,n,r=null===(t=J.current)||void 0===t?void 0:t.selectionEnd,a=F.slice(0,r).lastIndexOf(h),o=F.slice(a);if(-1!==a){var i;i=o.includes(" ")?o.indexOf(" "):o.includes("\n")?o.indexOf("\n"):F.length,i+=a,o.lastIndexOf(h)>0&&(i=o.lastIndexOf(h)+a),(!i||i<a)&&(i=F.length);var l=F.slice(0,a||0)+F.slice(a).replace(F.slice(a,i),"".concat(h).concat(e," "));if(function(){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|tablet|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/gi.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 u=l.slice(a).indexOf(" ")+a+1;null===(n=J.current)||void 0===n||n.setSelectionRange(u,u)}J.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}))}(J.current,l),setTimeout((function(){var e;return null===(e=J.current)||void 0===e?void 0:e.focus()}))),K(void 0),N(!1),H(l)}}}),[J,F]);return r.default.createElement("div",{className:"textarea-suggest"},r.default.createElement(Q,o({},D,{onKeyDown:X,onBlur:Y,onFocus:Z,ref:J,onChange:$,value:F||f})),r.default.createElement(d,{className:D.className,textareaRef:J,values:y,selectedItemIndex:U,isHidden:q||!T,customSuggestItemRenderer:A,onItemClickHandler:ee}))};
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "react-textarea-with-suggest",
|
|
3
|
-
"version": "2.
|
|
3
|
+
"version": "2.5.0",
|
|
4
4
|
"description": "Textarea with suggest for React app",
|
|
5
5
|
"main": "lib/index.js",
|
|
6
6
|
"types": "lib/index.d.ts",
|
|
@@ -13,11 +13,15 @@
|
|
|
13
13
|
],
|
|
14
14
|
"scripts": {
|
|
15
15
|
"prettier": "prettier --write .",
|
|
16
|
+
"prettier:check": "prettier --check .",
|
|
16
17
|
"build:debug": "npm install && npm run build && rm -rf node_modules",
|
|
17
18
|
"build": "rollup -c",
|
|
18
19
|
"start": "rollup -c -w",
|
|
19
20
|
"deploy:demo": "cd ./example && rm -rf node_modules && rm package-lock.json && npm i && npm run deploy && cd ../",
|
|
20
|
-
"test": "jest --coverage --"
|
|
21
|
+
"test": "jest --coverage --",
|
|
22
|
+
"pre-commit": "npm run prettier:check",
|
|
23
|
+
"pre-push": "npm run test",
|
|
24
|
+
"prepare": "husky install"
|
|
21
25
|
},
|
|
22
26
|
"license": "MIT",
|
|
23
27
|
"eslintConfig": {
|
|
@@ -80,15 +84,12 @@
|
|
|
80
84
|
"@types/react": "^18.0.26",
|
|
81
85
|
"babel-loader": "^8.0.6",
|
|
82
86
|
"css-loader": "^6.7.3",
|
|
87
|
+
"husky": "^8.0.0",
|
|
83
88
|
"jest": "^29.3.1",
|
|
84
89
|
"jest-environment-jsdom": "^29.3.1",
|
|
85
90
|
"prettier": "2.7.1",
|
|
86
91
|
"rollup": "^2.79.1",
|
|
87
92
|
"rollup-plugin-css-only": "^4.3.0",
|
|
88
|
-
"typescript": "^4.9.4"
|
|
89
|
-
"webpack": "^5.75.0",
|
|
90
|
-
"webpack-cli": "^5.0.1",
|
|
91
|
-
"webpack-dev-server": "^4.11.1",
|
|
92
|
-
"webpack-merge": "^4.2.1"
|
|
93
|
+
"typescript": "^4.9.4"
|
|
93
94
|
}
|
|
94
95
|
}
|