{"version":3,"file":"Search.bundle.js","sources":["../../../Static/src/react/components/search/Input/Input.jsx","../../../Static/src/react/components/search/Button/Button.jsx","../../../Static/src/react/components/search/Suggestions/SuggestionsItem/SuggestionsItem.jsx","../../../Static/src/react/components/search/Suggestions/Suggestions.jsx","../../../Static/src/react/components/search/Search.jsx"],"sourcesContent":["import React, {Component} from 'react';\r\n\r\nexport default class Input extends Component {\r\n constructor(props) {\r\n super(props);\r\n }\r\n\r\n render() {\r\n return (\r\n this.props.handleFocus(\"focus\")}\r\n onBlur={() => this.props.handleFocus(\"blur\")}\r\n onChange={this.props.handleInput} />\r\n )\r\n }\r\n}\r\n","import React, {Component} from 'react';\r\n\r\nexport default class Button extends Component {\r\n constructor(props) {\r\n super(props);\r\n }\r\n\r\n render() {\r\n return (\r\n \r\n )\r\n }\r\n}\r\n","import React, {Component} from 'react';\r\nimport * as settings from \"../../settings\";\r\n\r\nexport default class SuggestionsItem extends Component {\r\n constructor(props) {\r\n super(props);\r\n this.onLinkMouseDown = this.onLinkMouseDown.bind(this);\r\n this.getMarkup = this.getMarkup.bind(this);\r\n this.escapeRegExp = this.escapeRegExp.bind(this);\r\n this.handleMouseDown = this.handleMouseDown.bind(this);\r\n }\r\n\r\n onLinkMouseDown(e) {\r\n e.preventDefault();\r\n e.target.click();\r\n }\r\n\r\n escapeRegExp(string) {\r\n return string.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\$&');\r\n }\r\n\r\n getMarkup(text) {\r\n let query = this.props.query.toLowerCase();\r\n let regExp = new RegExp(`(${this.escapeRegExp(query)})`, 'gi');\r\n let parts = text.split(regExp);\r\n\r\n return (\r\n \r\n {parts.map((part, i) => part.toLowerCase() === query ?\r\n {part} : part\r\n )}\r\n \r\n );\r\n }\r\n\r\n handleMouseDown(event) {\r\n event.stopPropagation();\r\n\r\n let target = event.target.classList.contains(\"search-component__suggestions-text\") ?\r\n event.target : event.target.closest(\".search-component__suggestions-text\");\r\n\r\n this.props.matchInputToSuggestionPick(target.childNodes[0].textContent);\r\n this.props.handleSuggestionClick(target);\r\n }\r\n\r\n render() {\r\n let itemContent;\r\n let searchableLabel;\r\n let nonSearchableLabel;\r\n\r\n if(this.props.searchableLabel) {\r\n searchableLabel = (\r\n \r\n {this.getMarkup(this.props.searchableLabel)}\r\n \r\n );\r\n }\r\n\r\n if(this.props.nonSearchableLabel) {\r\n nonSearchableLabel = (\r\n \r\n {this.props.nonSearchableLabel}\r\n \r\n );\r\n }\r\n\r\n if(this.props.url && !this.props.handleSuggestionClick) {\r\n itemContent = \r\n \r\n {this.getMarkup(this.props.content)}\r\n \r\n {nonSearchableLabel}\r\n {searchableLabel}\r\n \r\n } else {\r\n itemContent = \r\n \r\n {this.getMarkup(this.props.content)}\r\n \r\n {nonSearchableLabel}\r\n {searchableLabel}\r\n \r\n }\r\n\r\n return (\r\n
  • \r\n {itemContent}\r\n
  • \r\n )\r\n }\r\n}\r\n","import React, {Component, createRef} from 'react';\r\nimport uniqueId from 'lodash.uniqueid';\r\nimport axios from 'axios';\r\nimport * as settings from \"../settings\";\r\nimport SuggestionsItem from './SuggestionsItem/SuggestionsItem';\r\n\r\nexport default class Suggestions extends Component {\r\n constructor(props) {\r\n super(props);\r\n\r\n this.suggestionsRef = createRef();\r\n this.allLocations = this.props.locations;\r\n\r\n this.state = {\r\n data: null,\r\n message: settings.suggestionMessages.start,\r\n };\r\n\r\n this.handleKeyDown = this.handleKeyDown.bind(this);\r\n this.getSuggestionData = this.getSuggestionData.bind(this);\r\n this.getActiveSuggestion = this.getActiveSuggestion.bind(this);\r\n this.updateScrollbar = this.updateScrollbar.bind(this);\r\n }\r\n\r\n componentDidMount() {\r\n // Add a custom scrollbar for suggestion list\r\n this.scrollbar = new PerfectScrollbar(\r\n this.suggestionsRef.current,\r\n settings.scrollbarOptions\r\n );\r\n\r\n if(this.props.query === \"\" && this.props.useEmptySearch) {\r\n this.getSuggestionData(this.props.query);\r\n }\r\n }\r\n\r\n componentDidUpdate(prevProps) {\r\n // updated query\r\n if(prevProps.query !== this.props.query) {\r\n if(this.props.type !== \"map\") {\r\n if(this.props.query || (this.props.query === \"\" && this.props.useEmptySearch)) {\r\n clearTimeout(this.timeout);\r\n this.timeout = setTimeout(() => {\r\n this.getSuggestionData(this.props.query);\r\n }, settings.delay);\r\n } else {\r\n this.setState({\r\n data: null,\r\n message: settings.suggestionMessages.start\r\n });\r\n }\r\n }\r\n }\r\n\r\n // updated locations - only for type of \"map\"\r\n if(prevProps.locations !== this.props.locations) {\r\n if(this.props.locations) {\r\n if(this.props.locations.length) {\r\n this.setState({\r\n data: this.props.locations\r\n });\r\n } else {\r\n this.setState({\r\n data: null,\r\n message: settings.suggestionMessages.noResults\r\n });\r\n }\r\n } else {\r\n this.setState({\r\n data: null,\r\n message: settings.suggestionMessages.start\r\n });\r\n }\r\n }\r\n\r\n this.updateScrollbar();\r\n }\r\n\r\n handleKeyDown(event) {\r\n let newActiveElement = null;\r\n let currentlyActiveElement = document.activeElement;\r\n\r\n if(currentlyActiveElement.parentElement.parentElement ===\r\n this.suggestionsRef.current) {\r\n if(event.keyCode === 40) {\r\n // Arrow down\r\n newActiveElement = currentlyActiveElement.parentElement.nextElementSibling;\r\n } else if(event.keyCode === 38) {\r\n // Arrow up\r\n newActiveElement = currentlyActiveElement.parentElement.previousElementSibling;\r\n\r\n if(newActiveElement.nodeName !== \"LI\") {\r\n newActiveElement = null;\r\n }\r\n }\r\n }\r\n\r\n if(newActiveElement) {\r\n newActiveElement.firstChild.focus();\r\n }\r\n }\r\n\r\n getSuggestionData(query) {\r\n axios.get(settings.apiUrls[this.props.type], {\r\n params: {\r\n query: query\r\n }\r\n })\r\n .catch(function (error) {\r\n if (error.response) {\r\n console.log(error.response.data);\r\n console.log(error.response.status);\r\n console.log(error.response.headers);\r\n } else if (error.request) {\r\n console.log(error.request);\r\n } else {\r\n console.log('Error', error.message);\r\n }\r\n console.log(error.config);\r\n })\r\n .then(response => {\r\n if(response.data) {\r\n if(response.data.length) {\r\n this.setState({\r\n data: response.data,\r\n });\r\n } else {\r\n this.setState({\r\n data: null,\r\n message: settings.suggestionMessages.noResults,\r\n });\r\n }\r\n\r\n this.updateScrollbar();\r\n }\r\n });\r\n }\r\n\r\n getActiveSuggestion() {\r\n let currentlyActiveElement = document.activeElement;\r\n\r\n if(currentlyActiveElement.parentElement.parentElement ===\r\n this.suggestionsRef.current) {\r\n return currentlyActiveElement;\r\n } else {\r\n return this.suggestionsRef.current.querySelector(\".search-component__suggestions-item\");\r\n }\r\n }\r\n\r\n updateScrollbar() {\r\n // Update scrollbar to get the right position\r\n this.scrollbar.update();\r\n this.suggestionsRef.current.scrollTop = 0;\r\n }\r\n\r\n render() {\r\n let suggestions;\r\n\r\n if(this.state.data) {\r\n suggestions = (\r\n this.state.data.map(item => {\r\n item.id = uniqueId();\r\n item.label = item.Description ? item.Description : item.Type;\r\n\r\n return \r\n }));\r\n } else {\r\n suggestions = (\r\n
  • \r\n \r\n {this.state.message}\r\n \r\n
  • \r\n );\r\n }\r\n\r\n\r\n return (\r\n \r\n )\r\n }\r\n}\r\n","import React, { Component, createRef } from 'react';\r\nimport Input from './Input/Input';\r\nimport Button from './Button/Button';\r\nimport Suggestions from './Suggestions/Suggestions';\r\nimport { triggerMouseEvent } from '../../utils';\r\n\r\nexport default class Search extends Component {\r\n constructor(props) {\r\n super(props);\r\n\r\n this.state = {\r\n isButtonFocused: false,\r\n isInputFocused: false,\r\n isSuggestionFocused: false,\r\n inputValue: ''\r\n };\r\n\r\n this.suggestionsComponentRef = createRef();\r\n\r\n this.handleInput = this.handleInput.bind(this);\r\n this.handleSubmit = this.handleSubmit.bind(this);\r\n this.matchInputToSuggestionPick = this.matchInputToSuggestionPick.bind(this);\r\n\r\n // Handling subcomponent focus\r\n this.handleButtonFocus = this.handleButtonFocus.bind(this);\r\n this.handleInputFocus = this.handleInputFocus.bind(this);\r\n this.handleSuggestionFocus = this.handleSuggestionFocus.bind(this);\r\n }\r\n\r\n handleInput(event) {\r\n this.setState({\r\n inputValue: event.target.value\r\n });\r\n\r\n if (this.props.searchType === \"map\") {\r\n this.props.handleFilterQueryChange(event.target.value);\r\n }\r\n }\r\n\r\n handleSubmit(event) {\r\n event.preventDefault();\r\n let suggestionItem = this.suggestionsComponentRef.current.getActiveSuggestion();\r\n if (suggestionItem && suggestionItem.firstElementChild) {\r\n triggerMouseEvent(suggestionItem.firstElementChild, \"mousedown\");\r\n event.stopPropagation();\r\n }\r\n }\r\n\r\n handleInputFocus(event) {\r\n this.setState({\r\n isInputFocused: event === \"focus\"\r\n });\r\n }\r\n\r\n handleButtonFocus(event) {\r\n this.setState({\r\n isButtonFocused: event === \"focus\"\r\n });\r\n }\r\n\r\n // TODO\r\n handleSuggestionFocus(state) { }\r\n\r\n matchInputToSuggestionPick(value) {\r\n if (this.props.searchType === \"map\") {\r\n this.setState({\r\n inputValue: value\r\n }, this.props.handleFilterQueryChange(value));\r\n } else {\r\n this.setState({\r\n inputValue: value\r\n });\r\n }\r\n }\r\n\r\n render() {\r\n let isActive = this.state.isInputFocused ||\r\n this.state.isButtonFocused ||\r\n this.state.isSuggestionFocused;\r\n\r\n return (\r\n
    \r\n \r\n