src/app/js/components/search/TextBar.js
/**
* TextBar
*
* Renders the input field of the searchbar
*
* @property {Boolean} connected true if the corresponding socket.io connection is connected
* @property {String} originalUrl the current url of the socket.io connection
* @property {String} url the current state of the input field
* @property {Function} changeUrl handle inputchange
* @property {Function} setNamespaceAndUrl confirm namespace and url and save in redux store
*/
import React from 'react'
import SearchIcon from '../../icons/Search'
import ConnectionIcon from '../../icons/Connection'
const TextBar = ({url, originalUrl, changeUrl, setNamespaceAndUrl, connected}) =>
<span className="search-text">
<span className="search-text-icon" onClick={setNamespaceAndUrl}>
{getIcon(originalUrl, connected)}
</span>
<form className="search-text-form" onSubmit={setNamespaceAndUrl}>
<input onChange={changeUrl} className="search-text-input" type="text" value={url} placeholder="http://www.example.com/socket.io" />
</form>
</span>
/**
* Get the appropriate icon to display based on connection status
*
* @param {String} url
* @param {Boolean} connected
*
* @return {Object} react component
*/
function getIcon (url, connected) {
let result
const customStyle = {transform: 'rotate(45deg)', transformOrigin: 'bottom', left: -7, position: 'relative'}
if ( connected )
result = <ConnectionIcon size={20} color={'green'} customStyle={customStyle} />
else if ( !connected && url )
result = <ConnectionIcon size={20} color={'red'} customStyle={customStyle} />
else
result = <SearchIcon size={20} color={'#333'} />
return result
}
export default TextBar