Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

react-autocomplete-input

Package Overview
Dependencies
Maintainers
1
Versions
34
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-autocomplete-input - npm Package Compare versions

Comparing version 1.0.4 to 1.0.5

package-lock.json

4

CHANGELOG.md

@@ -0,1 +1,5 @@

### 24th September 2018 - Version 1.0.5
- Fixed empty prefix and regex issues https://github.com/yury-dymov/react-autocomplete-input/pull/10
- New props: offsetX, offsetY to control popup offset, and matchAny to catch options in the middle of words as well
### 21st August 2017 - Version 1.0.4

@@ -2,0 +6,0 @@ - Fixed "Click" bug: sometimes autocompletion failed to work after clicking on the option https://github.com/yury-dymov/react-autocomplete-input/issues/7

2

dist/bundle.js

@@ -1,1 +0,1 @@

module.exports=function(e){function t(r){if(n[r])return n[r].exports;var o=n[r]={exports:{},id:r,loaded:!1};return e[r].call(o.exports,o,o.exports,t),o.loaded=!0,o.exports}var n={};return t.m=e,t.c=n,t.p="",t(0)}([function(e,t,n){e.exports=n(1)},function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{default:e}}function o(e,t){var n={};for(var r in e)t.indexOf(r)>=0||Object.prototype.hasOwnProperty.call(e,r)&&(n[r]=e[r]);return n}function i(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function a(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function s(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}Object.defineProperty(t,"__esModule",{value:!0});var l=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},u="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},p=function(){function e(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}return function(t,n,r){return n&&e(t.prototype,n),r&&e(t,r),t}}(),f=n(5),h=r(f),c=n(4),d=r(c),g=n(6),v=n(7),b=r(v),y=n(3),m=r(y);n(2);var O=38,w=40,x=13,C=14,S=27,k=10,D=100,V={Component:d.default.string,defaultValue:d.default.string,disabled:d.default.bool,maxOptions:d.default.number,onBlur:d.default.func,onChange:d.default.func,onKeyDown:d.default.func,onRequestOptions:d.default.func,options:d.default.array,regex:d.default.string,requestOnlyIfNoOptions:d.default.bool,spaceRemovers:d.default.array,trigger:d.default.string,value:d.default.any},L={Component:"textarea",defaultValue:"",disabled:!1,maxOptions:6,onBlur:function(){},onChange:function(){},onKeyDown:function(){},onRequestOptions:function(){},options:[],regex:"^[A-Za-z0-9\\-_]+$",requestOnlyIfNoOptions:!0,spaceRemovers:[",",".","!","?"],trigger:"@"},M=function(e){function t(e){i(this,t);var n=a(this,(t.__proto__||Object.getPrototypeOf(t)).call(this,e));return n.isTrigger=n.isTrigger.bind(n),n.getMatch=n.getMatch.bind(n),n.handleChange=n.handleChange.bind(n),n.handleKeyDown=n.handleKeyDown.bind(n),n.handleResize=n.handleResize.bind(n),n.handleSelection=n.handleSelection.bind(n),n.updateCaretPosition=n.updateCaretPosition.bind(n),n.updateHelper=n.updateHelper.bind(n),n.resetHelper=n.resetHelper.bind(n),n.renderAutocompleteList=n.renderAutocompleteList.bind(n),n.state={helperVisible:!1,left:0,matchLength:0,matchStart:0,options:[],selection:0,top:0,value:null},n.recentValue=e.defaultValue,n}return s(t,e),p(t,[{key:"componentDidMount",value:function(){window.addEventListener("resize",this.handleResize)}},{key:"componentWillReceiveProps",value:function(e){e.options.length!==this.props.options.length&&this.updateHelper(this.recentValue,this.state.caret,e.options)}},{key:"componentWillUnmount",value:function(){window.removeEventListener("resize",this.handleResize)}},{key:"getMatch",value:function(e,t,n){for(var r=this.props.trigger.length,o=t-1;o>=0;--o){var i=new RegExp(this.props.regex),a=e.substring(o,t),s=a.match(i);if((0!==r||s)&&(0===r||!s)){var l=o-r+1;if(l<0)return null;if(this.isTrigger(e,l)){var p=function(){var e=a.substring(1,a.length),t=n.filter(function(t){return t.substring(0,e.length)===e}),r=e.length,i=o+1;return{v:{matchLength:r,matchStart:i,options:t}}}();if("object"===("undefined"==typeof p?"undefined":u(p)))return p.v}break}}return null}},{key:"isTrigger",value:function(e,t){var n=this.props.trigger;return!n||!n.length||e.substr(t,n.length)===n}},{key:"handleChange",value:function(e){var t=this.props,n=t.onChange,r=t.options,o=t.spaceRemovers,i=this.recentValue,a=e.target.value,s=(0,m.default)(e.target).end;if(a.length||this.setState({helperVisible:!1}),this.recentValue=a,this.setState({caret:s,value:e.target.value}),!a.length||!s)return n(e.target.value);if(o.length&&a.length>2)for(var l=0;l<Math.max(i.length,a.length);++l)if(i[l]!==a[l]){if(l>=2&&" "===a[l-1]&&o.indexOf(a[l-2])===-1&&o.indexOf(a[l])!==-1&&this.getMatch(a.substring(0,l-2).toLowerCase(),s-3,r)){var u=""+a.slice(0,l-1)+a.slice(l,a.length)+" ";return this.updateCaretPosition(l+1),(0,g.findDOMNode)(this.refInput).value=u,this.props.value||this.setState({value:u}),n(u)}break}return this.updateHelper(a,s,r),this.props.value||this.setState({value:e.target.value}),n(e.target.value)}},{key:"handleKeyDown",value:function(e){if(this.state.helperVisible){var t=this.state,n=t.options,r=t.selection;switch(e.keyCode){case S:e.preventDefault(),this.resetHelper();break;case O:e.preventDefault(),this.setState({selection:(n.length+r-1)%n.length});break;case w:e.preventDefault(),this.setState({selection:(r+1)%n.length});break;case C:case x:e.preventDefault(),this.handleSelection(r);break;default:this.props.onKeyDown(e)}}else this.props.onKeyDown(e)}},{key:"handleResize",value:function(){this.setState({helperVisible:!1})}},{key:"handleSelection",value:function(e){var t=this.state,n=t.matchStart,r=t.matchLength,o=t.options,i=this.props.trigger,a=i.length,s=o[e],l=this.recentValue,u=l.substring(0,n-a),p=l.substring(n+r+a,l.length),f={target:(0,g.findDOMNode)(this.refInput)};f.target.value=""+u+i+s+" "+p,this.handleChange(f),this.resetHelper(),this.updateCaretPosition(u.length+s.length+a+1)}},{key:"updateCaretPosition",value:function(e){var t=this;this.setState({caret:e},function(){return(0,y.setCaretPosition)((0,g.findDOMNode)(t.refInput),e)})}},{key:"updateHelper",value:function(e,t,n){var r=(0,g.findDOMNode)(this.refInput),o=this.getMatch(e.toLowerCase(),t,n);if(o){var i=(0,b.default)(r,t),a=r.getBoundingClientRect(),s=i.top+r.offsetTop,u=Math.min(i.left+r.offsetLeft-k,r.offsetLeft+a.width-D);o.options.length>1||1===o.options.length&&o.options[0].length!==o.matchLength?this.setState(l({helperVisible:!0,top:s,left:u},o)):(this.props.requestOnlyIfNoOptions&&o.options.length||this.props.onRequestOptions(e.substr(o.matchStart,o.matchLength)),this.resetHelper())}else this.resetHelper()}},{key:"resetHelper",value:function(){this.setState({helperVisible:!1,selection:0})}},{key:"renderAutocompleteList",value:function(){var e=this;if(!this.state.helperVisible)return null;var t=this.state,n=t.left,r=t.matchLength,o=t.options,i=t.selection,a=t.top,s=0===this.props.maxOptions?o.length:this.props.maxOptions,l=o.slice(0,s).map(function(t,n){return h.default.createElement("li",{className:n===i?"active":null,key:t,onClick:function(){e.handleSelection(n)},onMouseEnter:function(){e.setState({selection:n})}},h.default.createElement("b",null,t.substr(0,r)),t.substr(r,t.length))});return h.default.createElement("ul",{className:"react-autocomplete-input",style:{left:n,top:a}},l)}},{key:"render",value:function(){var e=this,t=this.props,n=t.Component,r=t.defaultValue,i=t.disabled,a=t.value,s=o(t,["Component","defaultValue","disabled","value"]),u=Object.assign({},s);Object.keys(this.constructor.propTypes).forEach(function(e){delete u[e]});var p="";return"undefined"!=typeof a&&null!==a?p=a:this.state.value?p=this.state.value:r&&(p=r),h.default.createElement("span",null,h.default.createElement(n,l({disabled:i,onBlur:this.props.onBlur,onChange:this.handleChange,onKeyDown:this.handleKeyDown,ref:function(t){e.refInput=t},value:p},u)),this.renderAutocompleteList())}}]),t}(h.default.Component);M.propTypes=V,M.defaultProps=L,t.default=M},function(e,t){},function(e,t){e.exports=require("get-input-selection")},function(e,t){e.exports=require("prop-types")},function(e,t){e.exports=require("react")},function(e,t){e.exports=require("react-dom")},function(e,t){e.exports=require("textarea-caret")}]);
module.exports=function(e){function t(r){if(n[r])return n[r].exports;var o=n[r]={exports:{},id:r,loaded:!1};return e[r].call(o.exports,o,o.exports,t),o.loaded=!0,o.exports}var n={};return t.m=e,t.c=n,t.p="",t(0)}([function(e,t,n){e.exports=n(1)},function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{default:e}}function o(e,t){var n={};for(var r in e)t.indexOf(r)>=0||Object.prototype.hasOwnProperty.call(e,r)&&(n[r]=e[r]);return n}function i(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function a(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function s(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}Object.defineProperty(t,"__esModule",{value:!0});var l=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},u="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},f=function(){function e(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}return function(t,n,r){return n&&e(t.prototype,n),r&&e(t,r),t}}(),p=n(5),c=r(p),h=n(4),d=r(h),g=n(6),v=n(7),b=r(v),y=n(3),m=r(y);n(2);var O=38,S=40,x=13,w=14,C=27,k=10,R=100,D={Component:d.default.string,defaultValue:d.default.string,disabled:d.default.bool,maxOptions:d.default.number,onBlur:d.default.func,onChange:d.default.func,onKeyDown:d.default.func,onRequestOptions:d.default.func,options:d.default.array,regex:d.default.string,matchAny:d.default.bool,requestOnlyIfNoOptions:d.default.bool,spaceRemovers:d.default.array,trigger:d.default.string,value:d.default.any,offsetX:d.default.number,offsetY:d.default.number},V={Component:"textarea",defaultValue:"",disabled:!1,maxOptions:6,onBlur:function(){},onChange:function(){},onKeyDown:function(){},onRequestOptions:function(){},options:[],regex:"^[A-Za-z0-9\\-_]+$",matchAny:!1,requestOnlyIfNoOptions:!0,spaceRemovers:[",",".","!","?"],trigger:"@",offsetX:0,offsetY:0},L=function(e){function t(e){i(this,t);var n=a(this,(t.__proto__||Object.getPrototypeOf(t)).call(this,e));return n.isTrigger=n.isTrigger.bind(n),n.getMatch=n.getMatch.bind(n),n.handleChange=n.handleChange.bind(n),n.handleKeyDown=n.handleKeyDown.bind(n),n.handleResize=n.handleResize.bind(n),n.handleSelection=n.handleSelection.bind(n),n.updateCaretPosition=n.updateCaretPosition.bind(n),n.updateHelper=n.updateHelper.bind(n),n.resetHelper=n.resetHelper.bind(n),n.renderAutocompleteList=n.renderAutocompleteList.bind(n),n.state={helperVisible:!1,left:0,matchLength:0,matchStart:0,options:[],selection:0,top:0,value:null},n.recentValue=e.defaultValue,n.enableSpaceRemovers=!1,n}return s(t,e),f(t,[{key:"componentDidMount",value:function(){window.addEventListener("resize",this.handleResize)}},{key:"componentWillReceiveProps",value:function(e){e.options.length!==this.props.options.length&&this.updateHelper(this.recentValue,this.state.caret,e.options)}},{key:"componentWillUnmount",value:function(){window.removeEventListener("resize",this.handleResize)}},{key:"getMatch",value:function(e,t,n){for(var r=this.props,o=r.trigger,i=r.matchAny,a=new RegExp(this.props.regex),s=o.length,l=o.match(a),f=t-1;f>=0;--f){var p=e.substring(f,t),c=p.match(a),h=-1;if(s>0){var d=l?f:f-s+1;if(d<0)return null;if(this.isTrigger(e,d)&&(h=d+s),!c&&h<0)return null}else{if(c&&f>0)continue;if(h=0===f&&c?0:f+1,t-h===0)return null}if(h>=0){var g=function(){var r=e.substring(h,t),o=n.filter(function(e){var t=e.indexOf(r);return t!==-1&&(i||0===t)}),a=r.length;return{v:{matchStart:h,matchLength:a,options:o}}}();if("object"===("undefined"==typeof g?"undefined":u(g)))return g.v}}return null}},{key:"isTrigger",value:function(e,t){var n=this.props.trigger;return!n||!n.length||e.substr(t,n.length)===n}},{key:"handleChange",value:function(e){var t=this.props,n=t.onChange,r=t.options,o=t.spaceRemovers,i=this.recentValue,a=e.target.value,s=(0,m.default)(e.target).end;if(a.length||this.setState({helperVisible:!1}),this.recentValue=a,this.setState({caret:s,value:e.target.value}),!a.length||!s)return n(e.target.value);if(this.enableSpaceRemovers&&o.length&&a.length>2){for(var l=0;l<Math.max(i.length,a.length);++l)if(i[l]!==a[l]){if(l>=2&&" "===a[l-1]&&o.indexOf(a[l-2])===-1&&o.indexOf(a[l])!==-1&&this.getMatch(a.substring(0,l-2).toLowerCase(),s-3,r)){var u=""+a.slice(0,l-1)+a.slice(l,l+1)+a.slice(l-1,l)+a.slice(l+1);return this.updateCaretPosition(l+1),(0,g.findDOMNode)(this.refInput).value=u,this.props.value||this.setState({value:u}),n(u)}break}this.enableSpaceRemovers=!1}return this.updateHelper(a,s,r),this.props.value||this.setState({value:e.target.value}),n(e.target.value)}},{key:"handleKeyDown",value:function(e){if(this.state.helperVisible){var t=this.state,n=t.options,r=t.selection;switch(e.keyCode){case C:e.preventDefault(),this.resetHelper();break;case O:e.preventDefault(),this.setState({selection:(n.length+r-1)%n.length});break;case S:e.preventDefault(),this.setState({selection:(r+1)%n.length});break;case w:case x:e.preventDefault(),this.handleSelection(r);break;default:this.props.onKeyDown(e)}}else this.props.onKeyDown(e)}},{key:"handleResize",value:function(){this.setState({helperVisible:!1})}},{key:"handleSelection",value:function(e){var t=this.state,n=t.matchStart,r=t.matchLength,o=t.options,i=o[e],a=this.recentValue,s=a.substring(0,n),l=a.substring(n+r),u={target:(0,g.findDOMNode)(this.refInput)};u.target.value=""+s+i+" "+l,this.handleChange(u),this.resetHelper(),this.updateCaretPosition(s.length+i.length+1),this.enableSpaceRemovers=!0}},{key:"updateCaretPosition",value:function(e){var t=this;this.setState({caret:e},function(){return(0,y.setCaretPosition)((0,g.findDOMNode)(t.refInput),e)})}},{key:"updateHelper",value:function(e,t,n){var r=(0,g.findDOMNode)(this.refInput),o=this.getMatch(e.toLowerCase(),t,n);if(o){var i=(0,b.default)(r,t),a=r.getBoundingClientRect(),s=i.top+r.offsetTop,u=Math.min(i.left+r.offsetLeft-k,r.offsetLeft+a.width-R);o.options.length>1||1===o.options.length&&o.options[0].length!==o.matchLength?this.setState(l({helperVisible:!0,top:s,left:u},o)):(this.props.requestOnlyIfNoOptions&&o.options.length||this.props.onRequestOptions(e.substr(o.matchStart,o.matchLength)),this.resetHelper())}else this.resetHelper()}},{key:"resetHelper",value:function(){this.setState({helperVisible:!1,selection:0})}},{key:"renderAutocompleteList",value:function(){var e=this;if(!this.state.helperVisible)return null;var t=this.props,n=t.maxOptions,r=t.offsetX,o=t.offsetY,i=this.state,a=i.value,s=i.left,l=i.matchStart,u=i.matchLength,f=i.options,p=i.selection,h=i.top,d=0===this.props.maxOptions?f.length:n,g=f.slice(0,d).map(function(t,n){var r=t.indexOf(a.substr(l,u));return c.default.createElement("li",{className:n===p?"active":null,key:t,onClick:function(){e.handleSelection(n)},onMouseEnter:function(){e.setState({selection:n})}},t.slice(0,r),c.default.createElement("strong",null,t.substr(r,u)),t.slice(r+u))});return c.default.createElement("ul",{className:"react-autocomplete-input",style:{left:s+r,top:h+o}},g)}},{key:"render",value:function(){var e=this,t=this.props,n=t.Component,r=t.defaultValue,i=t.disabled,a=t.value,s=o(t,["Component","defaultValue","disabled","value"]),u=Object.assign({},s);Object.keys(this.constructor.propTypes).forEach(function(e){delete u[e]});var f="";return"undefined"!=typeof a&&null!==a?f=a:this.state.value?f=this.state.value:r&&(f=r),c.default.createElement("span",null,c.default.createElement(n,l({disabled:i,onBlur:this.props.onBlur,onChange:this.handleChange,onKeyDown:this.handleKeyDown,ref:function(t){e.refInput=t},value:f},u)),this.renderAutocompleteList())}}]),t}(c.default.Component);L.propTypes=D,L.defaultProps=V,t.default=L},function(e,t){},function(e,t){e.exports=require("get-input-selection")},function(e,t){e.exports=require("prop-types")},function(e,t){e.exports=require("react")},function(e,t){e.exports=require("react-dom")},function(e,t){e.exports=require("textarea-caret")}]);

2

package.json
{
"name": "react-autocomplete-input",
"version": "1.0.4",
"version": "1.0.5",
"description": "Autocomplete input field for React",

@@ -5,0 +5,0 @@ "main": "dist/bundle.js",

12

README.md

@@ -76,2 +76,14 @@ # react-autocomplete-input

## matchAny: boolean
#### Default value: false
If true, will match options in the middle of the word as well
## offsetX: number
#### Default value: 0
Popup horizontal offset
## offsetY: number
#### Default value: 0
Popup vertical offset
## options : array

@@ -78,0 +90,0 @@ #### Default value: `[]`

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc