diff --git a/CHANGELOG.md b/CHANGELOG.md index a8c4f40..293f4ed 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,11 @@ +### 2.16.1 (2023-10-02) + + +#### Bug Fixes + +* **blur-callback:** call onBlur only if input loses focus (#510) ([8c804649](https://github.com/ubilabs/react-geosuggest/commit/8c804649727e3555a643e1193b0d1ea63142adf4)) + + ## 2.16.0 (2023-08-08) diff --git a/dist/react-geosuggest.js b/dist/react-geosuggest.js index b1f55e2..2fad202 100644 --- a/dist/react-geosuggest.js +++ b/dist/react-geosuggest.js @@ -771,8 +771,8 @@ var Geosuggest = (function (React) { /** * Makes a text bold */ - SuggestItem.prototype.makeBold = function (element, key) { - return (React__namespace.createElement("b", { className: "geosuggest__item__matched-text", key: key }, element)); + SuggestItem.prototype.makeBold = function (element) { + return React__namespace.createElement("b", { className: "geosuggest__item__matched-text" }, element); }; /** * Replace matched text with the same in bold @@ -781,22 +781,25 @@ var Geosuggest = (function (React) { if (!userInput || !suggest.matchedSubstrings) { return suggest.label; } - var start = suggest.matchedSubstrings.offset; - var length = suggest.matchedSubstrings.length; - var end = start + length; - var boldPart = this.makeBold(suggest.label.substring(start, end), suggest.label); - var pre = ''; - var post = ''; - if (start > 0) { - pre = suggest.label.slice(0, start); + var parts = []; + var previousEnd = 0; + for (var _i = 0, _a = suggest.matchedSubstrings; _i < _a.length; _i++) { + var _b = _a[_i], start = _b.offset, length_1 = _b.length; + // Add non-matching substring before and between matches + if (start > previousEnd) { + parts.push(suggest.label.substring(previousEnd, start)); + } + // Add matching substring as bold text + var end = start + length_1; + var match = this.makeBold(suggest.label.substring(start, end)); + parts.push(match); + previousEnd = end; } - if (end < suggest.label.length) { - post = suggest.label.slice(end); + // Add non-matching substring after matches + if (previousEnd < suggest.label.length) { + parts.push(suggest.label.substring(previousEnd)); } - return (React__namespace.createElement("span", null, - pre, - boldPart, - post)); + return React__namespace.createElement("span", null, parts); }; /** * Checking if item just became active and scrolling if needed. @@ -1052,6 +1055,9 @@ var Geosuggest = (function (React) { if (!this.state.ignoreBlur) { this.hideSuggests(); } + if (this.props.onBlur) { + this.props.onBlur(this.state.userInput); + } }; GeoSuggest.prototype.onNext = function () { this.activateSuggest('next'); @@ -1178,10 +1184,12 @@ var Geosuggest = (function (React) { !skipSuggest(fixture) && fixture.label.match(regex)) { fixturesSearched++; - suggests.push(__assign(__assign({}, fixture), { isFixture: true, matchedSubstrings: { - length: userInput.length, - offset: fixture.label.indexOf(userInput) - }, placeId: fixture.placeId || fixture.label })); + suggests.push(__assign(__assign({}, fixture), { isFixture: true, matchedSubstrings: [ + { + length: userInput.length, + offset: fixture.label.search(regex) + } + ], placeId: fixture.placeId || fixture.label })); } }); } @@ -1193,7 +1201,7 @@ var Geosuggest = (function (React) { label: _this.props.getSuggestLabel ? _this.props.getSuggestLabel(suggest) : '', - matchedSubstrings: suggest.matched_substrings[0], + matchedSubstrings: suggest.matched_substrings, placeId: suggest.place_id }); } @@ -1232,9 +1240,6 @@ var Geosuggest = (function (React) { */ GeoSuggest.prototype.hideSuggests = function () { var _this = this; - if (this.props.onBlur) { - this.props.onBlur(this.state.userInput); - } this.timer = window.setTimeout(function () { _this.setState({ activeSuggest: null, diff --git a/dist/react-geosuggest.min.js b/dist/react-geosuggest.min.js index 7603c52..380681e 100644 --- a/dist/react-geosuggest.min.js +++ b/dist/react-geosuggest.min.js @@ -3,4 +3,4 @@ var Geosuggest=function(t){"use strict";function e(t){var e=Object.create(null); Copyright (c) 2018 Jed Watson. Licensed under the MIT License (MIT), see http://jedwatson.github.io/classnames - */p=a,function(){var t={}.hasOwnProperty;function e(){for(var s=[],o=0;o=e||s<0||g&&t-a>=i}function f(){var t=N();if(d(t))return S(t);u=setTimeout(f,function(t){var s=e-(t-p);return g?C(s,i-(t-a)):s}(t))}function S(t){return u=void 0,c&&o?h(t):(o=n=void 0,r)}function y(){var t=N(),s=d(t);if(o=arguments,n=this,p=t,s){if(void 0===u)return function(t){return a=t,u=setTimeout(f,e),l?h(t):r}(p);if(g)return u=setTimeout(f,e),h(p)}return void 0===u&&(u=setTimeout(f,e)),r}return e=M(e)||0,x(s)&&(l=!!s.leading,i=(g="maxWait"in s)?w(M(s.maxWait)||0,e):i,c="trailing"in s?!!s.trailing:c),y.cancel=function(){void 0!==u&&clearTimeout(u),a=0,o=p=n=u=void 0},y.flush=function(){return void 0===u?r:S(N())},y},T=u(O),D={autoActivateFirstSuggest:!1,disabled:!1,fixtures:[],getSuggestLabel:function(t){return t.description},highlightMatch:!0,ignoreEnter:!1,ignoreTab:!1,initialValue:"",maxFixtures:10,minLength:1,onKeyDown:function(){},onKeyPress:function(){},placeholder:"Search places",queryDelay:250,skipSuggest:function(){return!1},style:{},inputType:"text"},E=["autoCapitalize","autoComplete","autoCorrect","autoFocus","disabled","form","formAction","formEncType","formMethod","formNoValidate","formTarget","height","inputMode","maxLength","name","onClick","onContextMenu","onCopy","onCut","onDoubleClick","onMouseDown","onMouseEnter","onMouseLeave","onMouseMove","onMouseOut","onMouseOver","onMouseUp","onPaste","pattern","placeholder","readOnly","required","size","spellCheck","tabIndex","title","aria-atomic","aria-busy","aria-controls","aria-current","aria-describedby","aria-details","aria-disabled","aria-dropeffect","aria-errormessage","aria-flowto","aria-grabbed","aria-haspopup","aria-hidden","aria-invalid","aria-keyshortcuts","aria-label","aria-labelledby","aria-live","aria-owns","aria-relevant","aria-roledescription","aria-activedescendant","aria-autocomplete","aria-multiline","aria-placeholder","aria-readonly","aria-required"];function _(t){var e={};return Object.keys(t).forEach((function(s){var o=s.startsWith("data-");(E.includes(s)||o)&&(e[s]=t[s])})),e}var P=function(t){function e(e){var s=t.call(this,e)||this;return s.input=null,s.onChange=s.onChange.bind(s),s.onInputKeyDown=s.onInputKeyDown.bind(s),s}return n(e,t),e.prototype.onChange=function(){this.input&&this.props.onChange(this.input.value)},e.prototype.onInputKeyDown=function(t){switch(this.props.onKeyDown&&this.props.onKeyDown(t),t.which){case 40:t.shiftKey||(t.preventDefault(),this.props.onNext());break;case 38:t.shiftKey||(t.preventDefault(),this.props.onPrev());break;case 13:this.props.doNotSubmitOnEnter&&t.preventDefault(),this.props.ignoreEnter||this.props.onSelect();break;case 9:this.props.ignoreTab||this.props.onSelect();break;case 27:this.props.onEscape()}},e.prototype.focus=function(){this.input&&this.input.focus()},e.prototype.blur=function(){this.input&&this.input.blur()},e.prototype.render=function(){var t=this,e=_(this.props),o=l("geosuggest__input",this.props.className),n=this.props.label&&this.props.id;return e.tabIndex||(e.tabIndex=0),s.createElement(s.Fragment,null,n&&s.createElement("label",{className:"geosuggest__label",htmlFor:this.props.id},this.props.label),s.createElement("input",i({className:o,id:"geosuggest__input".concat(this.props.id?"--".concat(this.props.id):""),ref:function(e){return t.input=e},type:this.props.inputType},e,{value:this.props.value,style:this.props.style,onKeyDown:this.onInputKeyDown,onChange:this.onChange,onKeyPress:this.props.onKeyPress,onFocus:this.props.onFocus,onBlur:this.props.onBlur,role:"combobox","aria-expanded":!this.props.isSuggestsHidden,"aria-activedescendant":this.props.activeSuggest?this.props.activeSuggest.placeId:void 0,"aria-owns":this.props.listId})))},e.defaultProps={activeSuggest:null,autoComplete:"off",className:"",isSuggestsHidden:!0,listId:"",inputType:"text",onBlur:function(){},onChange:function(){},onEscape:function(){},onFocus:function(){},onKeyDown:function(){},onKeyPress:function(){},onNext:function(){},onPrev:function(){},onSelect:function(){},value:""},e}(s.PureComponent),k=function(t){function e(e){var s=t.call(this,e)||this;return s.ref=null,s.onClick=s.onClick.bind(s),s}return n(e,t),e.prototype.makeBold=function(t,e){return s.createElement("b",{className:"geosuggest__item__matched-text",key:e},t)},e.prototype.formatMatchedText=function(t,e){if(!t||!e.matchedSubstrings)return e.label;var o=e.matchedSubstrings.offset,n=o+e.matchedSubstrings.length,i=this.makeBold(e.label.substring(o,n),e.label),r="",u="";return o>0&&(r=e.label.slice(0,o)),ne.scrollTop+e.clientHeight;(s||o)&&(e.scrollTop=t.offsetTop-e.offsetTop-e.clientHeight/2+t.clientHeight/2)}},e.prototype.onClick=function(t){t.preventDefault(),this.props.onSelect(this.props.suggest)},e.prototype.render=function(){var t,e=this,o=this.props.suggest,n=l("geosuggest__item",this.props.className,this.props.suggestItemClassName,{"geosuggest__item--active":this.props.isActive},((t={})[this.props.activeClassName||""]=this.props.activeClassName?this.props.isActive:null,t)),i=o.label;return this.props.renderSuggestItem?i=this.props.renderSuggestItem(o,this.props.userInput):this.props.isHighlightMatch&&(i=this.formatMatchedText(this.props.userInput,o)),s.createElement("li",{className:n,ref:function(t){return e.ref=t},style:this.props.style,onMouseDown:this.props.onMouseDown,onMouseOut:this.props.onMouseOut,onClick:this.onClick,role:"option","aria-selected":this.props.isActive,id:o.placeId},i)},e}(s.PureComponent),A=function(t){function e(){return null!==t&&t.apply(this,arguments)||this}return n(e,t),e.prototype.isHidden=function(){return this.props.isHidden||0===this.props.suggests.length},e.prototype.componentDidUpdate=function(t){t.suggests!==this.props.suggests&&0===this.props.suggests.length&&this.props.onSuggestNoResults()},e.prototype.render=function(){var t,e=this,o=l("geosuggest__suggests",this.props.suggestsClassName,{"geosuggest__suggests--hidden":this.isHidden()},((t={})[this.props.hiddenClassName||""]=this.props.hiddenClassName?this.isHidden():null,t));return s.createElement("ul",{className:o,style:this.props.style,role:"listbox","aria-label":this.props.listLabel,id:this.props.listId},this.props.suggests.map((function(t){var o=e.props.activeSuggest&&t.placeId===e.props.activeSuggest.placeId||!1;return s.createElement(k,{key:t.placeId,className:t.className||"",userInput:e.props.userInput,isHighlightMatch:e.props.isHighlightMatch,suggest:t,style:e.props.suggestItemStyle,suggestItemClassName:e.props.suggestItemClassName,isActive:o,activeClassName:e.props.suggestItemActiveClassName,onMouseDown:e.props.onSuggestMouseDown,onMouseOut:e.props.onSuggestMouseOut,onSelect:e.props.onSuggestSelect,renderSuggestItem:e.props.renderSuggestItem})})))},e}(s.PureComponent);return function(t){function e(e){var s=t.call(this,e)||this;return s.googleMaps=null,s.autocompleteService=null,s.placesService=null,s.sessionToken=void 0,s.geocoder=null,s.input=null,s.state={activeSuggest:null,ignoreBlur:!1,isLoading:!1,isSuggestsHidden:!0,suggests:[],userInput:e.initialValue||""},s.onInputChange=s.onInputChange.bind(s),s.onAfterInputChange=s.onAfterInputChange.bind(s),s.onInputFocus=s.onInputFocus.bind(s),s.onInputBlur=s.onInputBlur.bind(s),s.onNext=s.onNext.bind(s),s.onPrev=s.onPrev.bind(s),s.onSelect=s.onSelect.bind(s),s.onSuggestMouseDown=s.onSuggestMouseDown.bind(s),s.onSuggestMouseOut=s.onSuggestMouseOut.bind(s),s.onSuggestNoResults=s.onSuggestNoResults.bind(s),s.hideSuggests=s.hideSuggests.bind(s),s.selectSuggest=s.selectSuggest.bind(s),s.listId="geosuggest__list".concat(e.id?"--".concat(e.id):""),s.listLabel=e.label?"".concat(e.label," options"):"options",e.queryDelay&&(s.onAfterInputChange=T(s.onAfterInputChange,e.queryDelay)),s}return n(e,t),e.prototype.componentDidUpdate=function(t){t.initialValue!==this.props.initialValue&&this.setState({userInput:this.props.initialValue||""}),JSON.stringify(t.fixtures)!==JSON.stringify(this.props.fixtures)&&this.searchSuggests()},e.prototype.componentDidMount=function(){if("undefined"!=typeof window){var t=this.props.googleMaps||window.google&&window.google.maps||this.googleMaps;t?(this.googleMaps=t,this.autocompleteService=new t.places.AutocompleteService,this.placesService=new t.places.PlacesService(document.createElement("div")),this.sessionToken=new t.places.AutocompleteSessionToken,this.geocoder=new t.Geocoder):console&&console.error("Google maps API was not found in the page.")}},e.prototype.componentWillUnmount=function(){clearTimeout(this.timer)},e.prototype.onInputChange=function(t){t||this.props.onSuggestSelect&&this.props.onSuggestSelect(),this.setState({userInput:t},this.onAfterInputChange)},e.prototype.onAfterInputChange=function(){this.showSuggests(),this.props.onChange&&this.props.onChange(this.state.userInput)},e.prototype.onInputFocus=function(){this.props.onFocus&&this.props.onFocus(),this.showSuggests()},e.prototype.onInputBlur=function(){this.state.ignoreBlur||this.hideSuggests()},e.prototype.onNext=function(){this.activateSuggest("next")},e.prototype.onPrev=function(){this.activateSuggest("prev")},e.prototype.onSelect=function(){this.selectSuggest(this.state.activeSuggest)},e.prototype.onSuggestMouseDown=function(){this.setState({ignoreBlur:!0})},e.prototype.onSuggestMouseOut=function(){this.setState({ignoreBlur:!1})},e.prototype.onSuggestNoResults=function(){this.props.onSuggestNoResults&&this.props.onSuggestNoResults(this.state.userInput)},e.prototype.focus=function(){this.input&&this.input.focus()},e.prototype.blur=function(){this.input&&this.input.blur()},e.prototype.update=function(t){this.setState({userInput:t}),this.props.onChange&&this.props.onChange(t)},e.prototype.clear=function(){this.setState({userInput:""},this.hideSuggests)},e.prototype.searchSuggests=function(){var t=this;if(this.state.userInput){var e={input:this.state.userInput,sessionToken:this.sessionToken},s=this.state.userInput.length;if(this.props.minLength&&s=a||p&&!p(t)&&t.label.match(g)&&(c++,n.push(i(i({},t),{isFixture:!0,matchedSubstrings:{length:r.length,offset:t.label.indexOf(r)},placeId:t.placeId||t.label})))})),t.forEach((function(t){p&&!p(t)&&n.push({description:t.description,isFixture:!1,label:s.props.getSuggestLabel?s.props.getSuggestLabel(t):"",matchedSubstrings:t.matched_substrings[0],placeId:t.place_id})})),o=this.updateActiveSuggest(n),this.props.onUpdateSuggests&&this.props.onUpdateSuggests(n,o),this.setState({suggests:n,activeSuggest:o},e)},e.prototype.updateActiveSuggest=function(t){void 0===t&&(t=[]);var e=this.state.activeSuggest;if(e){var s=t.filter((function(t){return e&&e.placeId===t.placeId&&e.isFixture===t.isFixture}))[0];e=s||null}return e},e.prototype.showSuggests=function(){this.searchSuggests(),this.setState({isSuggestsHidden:!1})},e.prototype.hideSuggests=function(){var t=this;this.props.onBlur&&this.props.onBlur(this.state.userInput),this.timer=window.setTimeout((function(){t.setState({activeSuggest:null,isSuggestsHidden:!0})}),100)},e.prototype.activateSuggest=function(t){if(this.state.isSuggestsHidden)this.showSuggests();else{for(var e=this.state.suggests.length-1,s="next"===t,o=null,n=0,i=0;i<=e;i++)this.state.suggests[i]===this.state.activeSuggest&&(n=s?i+1:i-1);this.state.activeSuggest||(n=s?0:e),n>=0&&n<=e&&(o=this.state.suggests[n]),this.props.onActivateSuggest&&this.props.onActivateSuggest(o),this.setState({activeSuggest:o})}},e.prototype.selectSuggest=function(t){var e=t||{isFixture:!0,label:this.state.userInput,placeId:this.state.userInput};if(!t&&this.props.autoActivateFirstSuggest&&this.state.suggests.length>0&&(e=this.state.suggests[0]),this.setState({isSuggestsHidden:!0,userInput:"object"!=typeof e.label?e.label:e.description||""}),e.location)return this.setState({ignoreBlur:!1}),void(this.props.onSuggestSelect&&this.props.onSuggestSelect(e));this.geocodeSuggest(e)},e.prototype.geocodeSuggest=function(t){var e=this;if(this.geocoder)if(t.placeId&&!t.isFixture&&this.placesService){var s={placeId:t.placeId,sessionToken:this.sessionToken};this.props.placeDetailFields&&(s.fields=this.props.placeDetailFields,s.fields.unshift("geometry")),this.placesService.getDetails(s,(function(s,o){if(o===e.googleMaps.places.PlacesServiceStatus.OK){var n=s,r=n.geometry&&n.geometry.location,u=i(i({},t),{gmaps:n,location:{lat:r.lat(),lng:r.lng()}});e.sessionToken=new google.maps.places.AutocompleteSessionToken,e.props.onSuggestSelect&&e.props.onSuggestSelect(u)}}))}else{s={address:t.label,bounds:this.props.bounds,componentRestrictions:this.props.country?{country:this.props.country}:void 0,location:this.props.location};this.geocoder.geocode(s,(function(s,o){if(o===e.googleMaps.GeocoderStatus.OK){var n=s[0],r=n.geometry&&n.geometry.location,u=i(i({},t),{gmaps:n,location:{lat:r.lat(),lng:r.lng()}});e.props.onSuggestSelect&&e.props.onSuggestSelect(u)}}))}},e.prototype.render=function(){var t=this,e=_(this.props),o=l("geosuggest",this.props.className,{"geosuggest--loading":this.state.isLoading}),n=s.createElement(P,i({className:this.props.inputClassName,ref:function(e){return t.input=e},value:this.state.userInput,doNotSubmitOnEnter:!this.state.isSuggestsHidden,ignoreTab:this.props.ignoreTab,ignoreEnter:this.props.ignoreEnter,style:this.props.style&&this.props.style.input,onChange:this.onInputChange,onFocus:this.onInputFocus,onBlur:this.onInputBlur,onKeyDown:this.props.onKeyDown,onKeyPress:this.props.onKeyPress,inputType:this.props.inputType,onNext:this.onNext,onPrev:this.onPrev,onSelect:this.onSelect,onEscape:this.hideSuggests,isSuggestsHidden:this.state.isSuggestsHidden,activeSuggest:this.state.activeSuggest,label:this.props.label,id:this.props.id,listId:this.listId},e)),r=s.createElement(A,{isHidden:this.state.isSuggestsHidden,style:this.props.style&&this.props.style.suggests,suggestItemStyle:this.props.style&&this.props.style.suggestItem,userInput:this.state.userInput,isHighlightMatch:Boolean(this.props.highlightMatch),suggestsClassName:this.props.suggestsClassName,suggestItemClassName:this.props.suggestItemClassName,suggests:this.state.suggests,hiddenClassName:this.props.suggestsHiddenClassName,suggestItemActiveClassName:this.props.suggestItemActiveClassName,activeSuggest:this.state.activeSuggest,onSuggestNoResults:this.onSuggestNoResults,onSuggestMouseDown:this.onSuggestMouseDown,onSuggestMouseOut:this.onSuggestMouseOut,onSuggestSelect:this.selectSuggest,renderSuggestItem:this.props.renderSuggestItem,listId:this.listId,listLabel:this.listLabel});return s.createElement("div",{className:o,id:this.props.id},s.createElement("div",{className:"geosuggest__input-wrapper"},n),s.createElement("div",{className:"geosuggest__suggests-wrapper"},r))},e.defaultProps=D,e}(s.Component)}(React); + */p=a,function(){var t={}.hasOwnProperty;function e(){for(var s=[],o=0;o=e||s<0||l&&t-a>=i}function f(){var t=N();if(d(t))return S(t);u=setTimeout(f,function(t){var s=e-(t-p);return l?C(s,i-(t-a)):s}(t))}function S(t){return u=void 0,c&&o?h(t):(o=n=void 0,r)}function v(){var t=N(),s=d(t);if(o=arguments,n=this,p=t,s){if(void 0===u)return function(t){return a=t,u=setTimeout(f,e),g?h(t):r}(p);if(l)return u=setTimeout(f,e),h(p)}return void 0===u&&(u=setTimeout(f,e)),r}return e=M(e)||0,x(s)&&(g=!!s.leading,i=(l="maxWait"in s)?w(M(s.maxWait)||0,e):i,c="trailing"in s?!!s.trailing:c),v.cancel=function(){void 0!==u&&clearTimeout(u),a=0,o=p=n=u=void 0},v.flush=function(){return void 0===u?r:S(N())},v},T=u(O),D={autoActivateFirstSuggest:!1,disabled:!1,fixtures:[],getSuggestLabel:function(t){return t.description},highlightMatch:!0,ignoreEnter:!1,ignoreTab:!1,initialValue:"",maxFixtures:10,minLength:1,onKeyDown:function(){},onKeyPress:function(){},placeholder:"Search places",queryDelay:250,skipSuggest:function(){return!1},style:{},inputType:"text"},E=["autoCapitalize","autoComplete","autoCorrect","autoFocus","disabled","form","formAction","formEncType","formMethod","formNoValidate","formTarget","height","inputMode","maxLength","name","onClick","onContextMenu","onCopy","onCut","onDoubleClick","onMouseDown","onMouseEnter","onMouseLeave","onMouseMove","onMouseOut","onMouseOver","onMouseUp","onPaste","pattern","placeholder","readOnly","required","size","spellCheck","tabIndex","title","aria-atomic","aria-busy","aria-controls","aria-current","aria-describedby","aria-details","aria-disabled","aria-dropeffect","aria-errormessage","aria-flowto","aria-grabbed","aria-haspopup","aria-hidden","aria-invalid","aria-keyshortcuts","aria-label","aria-labelledby","aria-live","aria-owns","aria-relevant","aria-roledescription","aria-activedescendant","aria-autocomplete","aria-multiline","aria-placeholder","aria-readonly","aria-required"];function _(t){var e={};return Object.keys(t).forEach((function(s){var o=s.startsWith("data-");(E.includes(s)||o)&&(e[s]=t[s])})),e}var P=function(t){function e(e){var s=t.call(this,e)||this;return s.input=null,s.onChange=s.onChange.bind(s),s.onInputKeyDown=s.onInputKeyDown.bind(s),s}return n(e,t),e.prototype.onChange=function(){this.input&&this.props.onChange(this.input.value)},e.prototype.onInputKeyDown=function(t){switch(this.props.onKeyDown&&this.props.onKeyDown(t),t.which){case 40:t.shiftKey||(t.preventDefault(),this.props.onNext());break;case 38:t.shiftKey||(t.preventDefault(),this.props.onPrev());break;case 13:this.props.doNotSubmitOnEnter&&t.preventDefault(),this.props.ignoreEnter||this.props.onSelect();break;case 9:this.props.ignoreTab||this.props.onSelect();break;case 27:this.props.onEscape()}},e.prototype.focus=function(){this.input&&this.input.focus()},e.prototype.blur=function(){this.input&&this.input.blur()},e.prototype.render=function(){var t=this,e=_(this.props),o=g("geosuggest__input",this.props.className),n=this.props.label&&this.props.id;return e.tabIndex||(e.tabIndex=0),s.createElement(s.Fragment,null,n&&s.createElement("label",{className:"geosuggest__label",htmlFor:this.props.id},this.props.label),s.createElement("input",i({className:o,id:"geosuggest__input".concat(this.props.id?"--".concat(this.props.id):""),ref:function(e){return t.input=e},type:this.props.inputType},e,{value:this.props.value,style:this.props.style,onKeyDown:this.onInputKeyDown,onChange:this.onChange,onKeyPress:this.props.onKeyPress,onFocus:this.props.onFocus,onBlur:this.props.onBlur,role:"combobox","aria-expanded":!this.props.isSuggestsHidden,"aria-activedescendant":this.props.activeSuggest?this.props.activeSuggest.placeId:void 0,"aria-owns":this.props.listId})))},e.defaultProps={activeSuggest:null,autoComplete:"off",className:"",isSuggestsHidden:!0,listId:"",inputType:"text",onBlur:function(){},onChange:function(){},onEscape:function(){},onFocus:function(){},onKeyDown:function(){},onKeyPress:function(){},onNext:function(){},onPrev:function(){},onSelect:function(){},value:""},e}(s.PureComponent),A=function(t){function e(e){var s=t.call(this,e)||this;return s.ref=null,s.onClick=s.onClick.bind(s),s}return n(e,t),e.prototype.makeBold=function(t){return s.createElement("b",{className:"geosuggest__item__matched-text"},t)},e.prototype.formatMatchedText=function(t,e){if(!t||!e.matchedSubstrings)return e.label;for(var o=[],n=0,i=0,r=e.matchedSubstrings;in&&o.push(e.label.substring(n,p));var g=p+a,l=this.makeBold(e.label.substring(p,g));o.push(l),n=g}return ne.scrollTop+e.clientHeight;(s||o)&&(e.scrollTop=t.offsetTop-e.offsetTop-e.clientHeight/2+t.clientHeight/2)}},e.prototype.onClick=function(t){t.preventDefault(),this.props.onSelect(this.props.suggest)},e.prototype.render=function(){var t,e=this,o=this.props.suggest,n=g("geosuggest__item",this.props.className,this.props.suggestItemClassName,{"geosuggest__item--active":this.props.isActive},((t={})[this.props.activeClassName||""]=this.props.activeClassName?this.props.isActive:null,t)),i=o.label;return this.props.renderSuggestItem?i=this.props.renderSuggestItem(o,this.props.userInput):this.props.isHighlightMatch&&(i=this.formatMatchedText(this.props.userInput,o)),s.createElement("li",{className:n,ref:function(t){return e.ref=t},style:this.props.style,onMouseDown:this.props.onMouseDown,onMouseOut:this.props.onMouseOut,onClick:this.onClick,role:"option","aria-selected":this.props.isActive,id:o.placeId},i)},e}(s.PureComponent),k=function(t){function e(){return null!==t&&t.apply(this,arguments)||this}return n(e,t),e.prototype.isHidden=function(){return this.props.isHidden||0===this.props.suggests.length},e.prototype.componentDidUpdate=function(t){t.suggests!==this.props.suggests&&0===this.props.suggests.length&&this.props.onSuggestNoResults()},e.prototype.render=function(){var t,e=this,o=g("geosuggest__suggests",this.props.suggestsClassName,{"geosuggest__suggests--hidden":this.isHidden()},((t={})[this.props.hiddenClassName||""]=this.props.hiddenClassName?this.isHidden():null,t));return s.createElement("ul",{className:o,style:this.props.style,role:"listbox","aria-label":this.props.listLabel,id:this.props.listId},this.props.suggests.map((function(t){var o=e.props.activeSuggest&&t.placeId===e.props.activeSuggest.placeId||!1;return s.createElement(A,{key:t.placeId,className:t.className||"",userInput:e.props.userInput,isHighlightMatch:e.props.isHighlightMatch,suggest:t,style:e.props.suggestItemStyle,suggestItemClassName:e.props.suggestItemClassName,isActive:o,activeClassName:e.props.suggestItemActiveClassName,onMouseDown:e.props.onSuggestMouseDown,onMouseOut:e.props.onSuggestMouseOut,onSelect:e.props.onSuggestSelect,renderSuggestItem:e.props.renderSuggestItem})})))},e}(s.PureComponent);return function(t){function e(e){var s=t.call(this,e)||this;return s.googleMaps=null,s.autocompleteService=null,s.placesService=null,s.sessionToken=void 0,s.geocoder=null,s.input=null,s.state={activeSuggest:null,ignoreBlur:!1,isLoading:!1,isSuggestsHidden:!0,suggests:[],userInput:e.initialValue||""},s.onInputChange=s.onInputChange.bind(s),s.onAfterInputChange=s.onAfterInputChange.bind(s),s.onInputFocus=s.onInputFocus.bind(s),s.onInputBlur=s.onInputBlur.bind(s),s.onNext=s.onNext.bind(s),s.onPrev=s.onPrev.bind(s),s.onSelect=s.onSelect.bind(s),s.onSuggestMouseDown=s.onSuggestMouseDown.bind(s),s.onSuggestMouseOut=s.onSuggestMouseOut.bind(s),s.onSuggestNoResults=s.onSuggestNoResults.bind(s),s.hideSuggests=s.hideSuggests.bind(s),s.selectSuggest=s.selectSuggest.bind(s),s.listId="geosuggest__list".concat(e.id?"--".concat(e.id):""),s.listLabel=e.label?"".concat(e.label," options"):"options",e.queryDelay&&(s.onAfterInputChange=T(s.onAfterInputChange,e.queryDelay)),s}return n(e,t),e.prototype.componentDidUpdate=function(t){t.initialValue!==this.props.initialValue&&this.setState({userInput:this.props.initialValue||""}),JSON.stringify(t.fixtures)!==JSON.stringify(this.props.fixtures)&&this.searchSuggests()},e.prototype.componentDidMount=function(){if("undefined"!=typeof window){var t=this.props.googleMaps||window.google&&window.google.maps||this.googleMaps;t?(this.googleMaps=t,this.autocompleteService=new t.places.AutocompleteService,this.placesService=new t.places.PlacesService(document.createElement("div")),this.sessionToken=new t.places.AutocompleteSessionToken,this.geocoder=new t.Geocoder):console&&console.error("Google maps API was not found in the page.")}},e.prototype.componentWillUnmount=function(){clearTimeout(this.timer)},e.prototype.onInputChange=function(t){t||this.props.onSuggestSelect&&this.props.onSuggestSelect(),this.setState({userInput:t},this.onAfterInputChange)},e.prototype.onAfterInputChange=function(){this.showSuggests(),this.props.onChange&&this.props.onChange(this.state.userInput)},e.prototype.onInputFocus=function(){this.props.onFocus&&this.props.onFocus(),this.showSuggests()},e.prototype.onInputBlur=function(){this.state.ignoreBlur||this.hideSuggests(),this.props.onBlur&&this.props.onBlur(this.state.userInput)},e.prototype.onNext=function(){this.activateSuggest("next")},e.prototype.onPrev=function(){this.activateSuggest("prev")},e.prototype.onSelect=function(){this.selectSuggest(this.state.activeSuggest)},e.prototype.onSuggestMouseDown=function(){this.setState({ignoreBlur:!0})},e.prototype.onSuggestMouseOut=function(){this.setState({ignoreBlur:!1})},e.prototype.onSuggestNoResults=function(){this.props.onSuggestNoResults&&this.props.onSuggestNoResults(this.state.userInput)},e.prototype.focus=function(){this.input&&this.input.focus()},e.prototype.blur=function(){this.input&&this.input.blur()},e.prototype.update=function(t){this.setState({userInput:t}),this.props.onChange&&this.props.onChange(t)},e.prototype.clear=function(){this.setState({userInput:""},this.hideSuggests)},e.prototype.searchSuggests=function(){var t=this;if(this.state.userInput){var e={input:this.state.userInput,sessionToken:this.sessionToken},s=this.state.userInput.length;if(this.props.minLength&&s=a||p&&!p(t)&&t.label.match(l)&&(c++,n.push(i(i({},t),{isFixture:!0,matchedSubstrings:[{length:r.length,offset:t.label.search(l)}],placeId:t.placeId||t.label})))})),t.forEach((function(t){p&&!p(t)&&n.push({description:t.description,isFixture:!1,label:s.props.getSuggestLabel?s.props.getSuggestLabel(t):"",matchedSubstrings:t.matched_substrings,placeId:t.place_id})})),o=this.updateActiveSuggest(n),this.props.onUpdateSuggests&&this.props.onUpdateSuggests(n,o),this.setState({suggests:n,activeSuggest:o},e)},e.prototype.updateActiveSuggest=function(t){void 0===t&&(t=[]);var e=this.state.activeSuggest;if(e){var s=t.filter((function(t){return e&&e.placeId===t.placeId&&e.isFixture===t.isFixture}))[0];e=s||null}return e},e.prototype.showSuggests=function(){this.searchSuggests(),this.setState({isSuggestsHidden:!1})},e.prototype.hideSuggests=function(){var t=this;this.timer=window.setTimeout((function(){t.setState({activeSuggest:null,isSuggestsHidden:!0})}),100)},e.prototype.activateSuggest=function(t){if(this.state.isSuggestsHidden)this.showSuggests();else{for(var e=this.state.suggests.length-1,s="next"===t,o=null,n=0,i=0;i<=e;i++)this.state.suggests[i]===this.state.activeSuggest&&(n=s?i+1:i-1);this.state.activeSuggest||(n=s?0:e),n>=0&&n<=e&&(o=this.state.suggests[n]),this.props.onActivateSuggest&&this.props.onActivateSuggest(o),this.setState({activeSuggest:o})}},e.prototype.selectSuggest=function(t){var e=t||{isFixture:!0,label:this.state.userInput,placeId:this.state.userInput};if(!t&&this.props.autoActivateFirstSuggest&&this.state.suggests.length>0&&(e=this.state.suggests[0]),this.setState({isSuggestsHidden:!0,userInput:"object"!=typeof e.label?e.label:e.description||""}),e.location)return this.setState({ignoreBlur:!1}),void(this.props.onSuggestSelect&&this.props.onSuggestSelect(e));this.geocodeSuggest(e)},e.prototype.geocodeSuggest=function(t){var e=this;if(this.geocoder)if(t.placeId&&!t.isFixture&&this.placesService){var s={placeId:t.placeId,sessionToken:this.sessionToken};this.props.placeDetailFields&&(s.fields=this.props.placeDetailFields,s.fields.unshift("geometry")),this.placesService.getDetails(s,(function(s,o){if(o===e.googleMaps.places.PlacesServiceStatus.OK){var n=s,r=n.geometry&&n.geometry.location,u=i(i({},t),{gmaps:n,location:{lat:r.lat(),lng:r.lng()}});e.sessionToken=new google.maps.places.AutocompleteSessionToken,e.props.onSuggestSelect&&e.props.onSuggestSelect(u)}}))}else{s={address:t.label,bounds:this.props.bounds,componentRestrictions:this.props.country?{country:this.props.country}:void 0,location:this.props.location};this.geocoder.geocode(s,(function(s,o){if(o===e.googleMaps.GeocoderStatus.OK){var n=s[0],r=n.geometry&&n.geometry.location,u=i(i({},t),{gmaps:n,location:{lat:r.lat(),lng:r.lng()}});e.props.onSuggestSelect&&e.props.onSuggestSelect(u)}}))}},e.prototype.render=function(){var t=this,e=_(this.props),o=g("geosuggest",this.props.className,{"geosuggest--loading":this.state.isLoading}),n=s.createElement(P,i({className:this.props.inputClassName,ref:function(e){return t.input=e},value:this.state.userInput,doNotSubmitOnEnter:!this.state.isSuggestsHidden,ignoreTab:this.props.ignoreTab,ignoreEnter:this.props.ignoreEnter,style:this.props.style&&this.props.style.input,onChange:this.onInputChange,onFocus:this.onInputFocus,onBlur:this.onInputBlur,onKeyDown:this.props.onKeyDown,onKeyPress:this.props.onKeyPress,inputType:this.props.inputType,onNext:this.onNext,onPrev:this.onPrev,onSelect:this.onSelect,onEscape:this.hideSuggests,isSuggestsHidden:this.state.isSuggestsHidden,activeSuggest:this.state.activeSuggest,label:this.props.label,id:this.props.id,listId:this.listId},e)),r=s.createElement(k,{isHidden:this.state.isSuggestsHidden,style:this.props.style&&this.props.style.suggests,suggestItemStyle:this.props.style&&this.props.style.suggestItem,userInput:this.state.userInput,isHighlightMatch:Boolean(this.props.highlightMatch),suggestsClassName:this.props.suggestsClassName,suggestItemClassName:this.props.suggestItemClassName,suggests:this.state.suggests,hiddenClassName:this.props.suggestsHiddenClassName,suggestItemActiveClassName:this.props.suggestItemActiveClassName,activeSuggest:this.state.activeSuggest,onSuggestNoResults:this.onSuggestNoResults,onSuggestMouseDown:this.onSuggestMouseDown,onSuggestMouseOut:this.onSuggestMouseOut,onSuggestSelect:this.selectSuggest,renderSuggestItem:this.props.renderSuggestItem,listId:this.listId,listLabel:this.listLabel});return s.createElement("div",{className:o,id:this.props.id},s.createElement("div",{className:"geosuggest__input-wrapper"},n),s.createElement("div",{className:"geosuggest__suggests-wrapper"},r))},e.defaultProps=D,e}(s.Component)}(React); diff --git a/package-lock.json b/package-lock.json index 75a44a1..15807ad 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "@ubilabs/react-geosuggest", - "version": "2.16.0", + "version": "2.16.1", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "@ubilabs/react-geosuggest", - "version": "2.16.0", + "version": "2.16.1", "license": "MIT", "dependencies": { "classnames": "^2.3.2", diff --git a/package.json b/package.json index d634437..c2a92fc 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@ubilabs/react-geosuggest", - "version": "2.16.0", + "version": "2.16.1", "description": "A React autosuggest for the Google Maps Places API.", "main": "module/Geosuggest.umd.js", "module": "module/Geosuggest.esm.js",