react-textarea-with-suggest 2.1.4 → 2.2.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/README.md +1 -1
- package/example/src/App.css +2 -1
- package/lib/index.js +1 -1
- package/lib/styles.css +2 -1
- package/lib/suggest.d.ts +3 -2
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -82,7 +82,7 @@ export default class MyApp extends React.Component {
|
|
|
82
82
|
|onChange|func: (event: React.ChangeEvent) => {}|no|function on change value in textarea|
|
|
83
83
|
|onSearch|func: (searchPhrase: string) => {}|yes|function after input of searchMarker into textarea|
|
|
84
84
|
|suggestList|array: (string OR CustomType)[]: []|no|rendering suggest when suggestList isn't empty, items rendering in customSuggestItemRenderer function|
|
|
85
|
-
|customSuggestItemRenderer|func: (searchListItem: string OR CustomType) => ReactNode|no|custom function for rendering each item in suggest|
|
|
85
|
+
|customSuggestItemRenderer|func: (searchListItem: string OR CustomType, isSelected: boolean) => ReactNode|no|custom function for rendering each item in suggest, second argument is true if user navigates through items by keyboard and stops on current element|
|
|
86
86
|
```
|
|
87
87
|
//customSuggestItemRenderer
|
|
88
88
|
|
package/example/src/App.css
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}function
|
|
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 c(){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 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}},l=function(t){var n=t.textareaRef,a=t.values,o=void 0===a?[]:a,i=t.isHidden,u=t.className,l=t.selectedItemIndex,s=t.customSuggestItemRenderer,d=t.onItemClickHandler;if(i||!(null==o?void 0:o.length)||!n.current)return null;var v=e.useMemo((function(){var e;return(null===(e=n.current)||void 0===e?void 0:e.getBoundingClientRect())||{}}),[n.current]),f=v.width,p=void 0===f?0:f,m=v.left,g=void 0===m?0:m,b=c(),w=e.useCallback((function(e,t){var n=l===t,a=["textarea-suggest-item",n?"textarea-suggest-item_selected":"",u?"".concat(u,"__results__item"):"",n&&u?"".concat(u,"__results__item_selected"):""].filter(Boolean).join(" ");return s?r.default.createElement("div",{className:a,onMouseDown:b?void 0:d(e),onTouchStart:b?d(e):void 0},s(e,n)):r.default.createElement("div",{className:a,onMouseDown:b?void 0:d(e),onTouchStart:b?d(e):void 0},r.default.createElement("div",{className:"textarea-suggest-item__info"},e))}),[d,s,l]);return r.default.createElement("div",{className:"textarea-suggest__results ".concat(u?"".concat(u,"__results"):""),style:{position:"absolute",width:p,left:g}},o.map((function(t,n){return r.default.createElement(e.Fragment,{key:n},w(t,n))})))},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,p=t.searchMarker,m=void 0===p?"@":p,g=t.searchRegexp,b=t.suggestList,w=void 0===b?[]:b,h=t.closeSuggestOnFocusOut,y=void 0!==h&&h,k=t.cancelSearchOnFocusOut,x=void 0!==k&&k,O=t.onSearch,E=t.onChange,S=t.customSuggestItemRenderer,_=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"]),P=e.useState(f),j=P[0],I=P[1],z=e.useState(null==f?void 0:f.includes(m)),D=z[0],R=z[1],T=e.useState(!0),C=T[0],M=T[1],F=e.useState(void 0),N=F[0],q=F[1],A=i(j),B=i(f),H=e.useRef(null),K=d?a.default:s,L=e.useMemo((function(){return g?new RegExp(g):new RegExp("".concat(m,"([a-z0-9-_.]+[a-z0-9])"),"gim")}),[g]);e.useEffect((function(){if(m.length>1)throw new TypeError("Max length of searchMarker is 1 symbol. Please change your searchMarker to char")}),[]),e.useEffect((function(){f&&A!==f&&B!==f&&(I(f),Q(void 0,f))}),[j,f,A,B]);var U=e.useCallback((function(e){var t,n=e.code,r=D&&!C&&w.length;if(null===(t=_.onKeyDown)||void 0===t||t.call(_,e),r&&["ArrowUp","ArrowDown","Enter","Escape"].includes(n))switch(e.stopPropagation(),e.nativeEvent.stopImmediatePropagation(),n){case"ArrowUp":return e.preventDefault(),q((function(e){return void 0===e||0===e?w.length-1:e-1}));case"ArrowDown":return e.preventDefault(),q((function(e){return void 0===e||e===w.length-1?0:e+1}));case"Enter":return void(void 0!==N&&(e.preventDefault(),V(w[N])()));case"Escape":R(!1),q(void 0)}}),[_.onKeyDown,N,w,D,C]),G=e.useCallback((function(e){var t;y&&M(!0),x&&R(!1),null===(t=_.onBlur)||void 0===t||t.call(_,e)}),[y,x,_.onBlur]),J=e.useCallback((function(e){var t;C&&M(!1),null===(t=_.onFocus)||void 0===t||t.call(_,e)}),[y,x,_.onFocus]),Q=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)?j:(null===(r=e.currentTarget)||void 0===r?void 0:r.value)||"":t,c=!!e&&(void 0===e.isTrusted||e.isTrusted),l=null===(a=H.current)||void 0===a?void 0:a.selectionEnd,s=l?i.slice(l-1,l):i.slice(-1);if(I(i),s===m&&(t&&M(!1),R(!0)),i.includes(m)&&![" ","\n","\r"].includes(s)||!D||R(!1),s!==m&&D){var d=i.slice(0,l),v=d.slice(d.lastIndexOf(m)).match(L),f=v?v[0].slice(1):s;O(f)}if(!e&&H.current&&(H.current.value=i),e&&c)return null==E?void 0:E(e);if(e&&!c)return null==E?void 0:E(o(o({},e),{currentTarget:H.current,target:H.current}));var p=function(e,t){var n=new Event("change",{bubbles:!0});return Object.defineProperty(n,"target",{writable:!1,value:e}),u(n)}(H.current);return null==E?void 0:E(p)},V=e.useCallback((function(e){return function(){var t,n,r=null===(t=H.current)||void 0===t?void 0:t.selectionEnd,a=j.slice(0,r).lastIndexOf(m),o=j.slice(a);if(-1!==a){var i=(o.includes(" ")?o.indexOf(" "):j.length)+a;o.lastIndexOf(m)>0&&(i=o.lastIndexOf(m)+a),(!i||i<a)&&(i=j.length);var u=j.slice(0,a||0)+j.slice(a).replace(j.slice(a,i),"".concat(m).concat(e," "));if(c()){var l=u.slice(a).indexOf(" ")+a+1;null===(n=H.current)||void 0===n||n.setSelectionRange(l,l)}H.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}))}(H.current,u),setTimeout((function(){var e;return null===(e=H.current)||void 0===e?void 0:e.focus()}))),q(void 0),R(!1),I(u)}}}),[H,j]);return r.default.createElement("div",{className:"textarea-suggest"},r.default.createElement(K,o({},_,{onKeyDown:U,onBlur:G,onFocus:J,ref:H,onChange:Q,value:j||f})),r.default.createElement(l,{className:_.className,textareaRef:H,values:w,selectedItemIndex:N,isHidden:C||!D,customSuggestItemRenderer:S,onItemClickHandler:V}))};
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
package/lib/styles.css
CHANGED
package/lib/suggest.d.ts
CHANGED
|
@@ -3,10 +3,11 @@ import { Nullable } from "./utils";
|
|
|
3
3
|
interface SuggestProps<T> {
|
|
4
4
|
className?: string;
|
|
5
5
|
textareaRef: RefObject<Nullable<HTMLTextAreaElement>>;
|
|
6
|
+
selectedItemIndex?: number;
|
|
6
7
|
values: T[];
|
|
7
8
|
isHidden?: boolean;
|
|
8
9
|
onItemClickHandler: (item: T) => () => void;
|
|
9
|
-
customSuggestItemRenderer?: (item: T) => ReactNode;
|
|
10
|
+
customSuggestItemRenderer?: (item: T, isSelected?: boolean) => ReactNode;
|
|
10
11
|
}
|
|
11
|
-
export declare const SuggestResults: <T extends React.ReactNode>({ textareaRef, values, isHidden, className, customSuggestItemRenderer, onItemClickHandler, }: SuggestProps<T>) => JSX.Element | null;
|
|
12
|
+
export declare const SuggestResults: <T extends React.ReactNode>({ textareaRef, values, isHidden, className, selectedItemIndex, customSuggestItemRenderer, onItemClickHandler, }: SuggestProps<T>) => JSX.Element | null;
|
|
12
13
|
export {};
|