gab-social/app/javascript/gabsocial/components/search.js

178 lines
4.3 KiB
JavaScript
Raw Normal View History

import React from 'react'
import PropTypes from 'prop-types'
import { connect } from 'react-redux'
2020-04-24 04:17:27 +01:00
import { withRouter } from 'react-router-dom'
import queryString from 'query-string'
2020-05-09 03:17:19 +01:00
import { me } from '../initial_state'
2020-04-29 23:32:49 +01:00
import { CX } from '../constants'
2020-02-21 00:57:29 +00:00
import {
changeSearch,
clearSearch,
submitSearch,
showSearch,
} from '../actions/search'
2020-04-29 23:32:49 +01:00
import Button from './button'
2020-02-21 00:57:29 +00:00
class Search extends React.PureComponent {
2020-02-21 00:57:29 +00:00
static contextTypes = {
router: PropTypes.object.isRequired,
}
state = {
2020-04-29 23:32:49 +01:00
focused: false,
2020-02-21 00:57:29 +00:00
}
2020-03-14 17:31:29 +00:00
textbox = React.createRef()
2020-04-24 04:17:27 +01:00
componentDidUpdate(prevProps) {
// If user navigates to different page, ensure tab bar item
// with this.props.to that is on location is set to active.
if (this.props.location !== prevProps.location) {
const isCurrent = this.props.to === this.props.location.pathname
if (this.state.isCurrent !== isCurrent) {
this.setState({ isCurrent })
}
}
}
2020-04-29 23:32:49 +01:00
handleOnChange = (e) => {
this.props.onChange(e.target.value)
2020-02-21 00:57:29 +00:00
}
2020-04-29 23:32:49 +01:00
handleOnFocus = () => {
this.setState({ focused: true })
2020-02-21 00:57:29 +00:00
this.props.onShow()
}
2020-04-29 23:32:49 +01:00
handleOnBlur = () => {
this.setState({ focused: false })
2020-02-21 00:57:29 +00:00
}
2020-03-14 17:31:29 +00:00
handleKeyUp = (e) => {
const { value } = this.props
if (e.key === 'Enter') {
2020-05-01 06:50:27 +01:00
e.preventDefault()
2020-03-14 17:31:29 +00:00
2020-05-01 06:50:27 +01:00
this.props.onSubmit()
this.context.router.history.push(`/search?q=${value}`)
2020-03-14 17:31:29 +00:00
} else if (e.key === 'Escape') {
this.textbox.blur()
}
}
setTextbox = n => {
this.textbox = n
}
2020-04-29 23:32:49 +01:00
handleSubmit = () => {
this.props.onSubmit()
}
2020-02-21 00:57:29 +00:00
render() {
2020-03-14 17:31:29 +00:00
const {
value,
submitted,
2020-04-23 07:13:29 +01:00
onClear,
2020-05-14 07:03:22 +01:00
isInNav,
theme,
2020-03-14 17:31:29 +00:00
} = this.props
2020-04-29 23:32:49 +01:00
const { focused } = this.state
const highlighted = focused || `${value}`.length > 0
const inputClasses = CX({
d: 1,
2020-04-29 23:32:49 +01:00
text: 1,
outlineNone: 1,
lineHeight125: 1,
displayBlock: 1,
py7: 1,
2020-05-14 07:03:22 +01:00
bgTransparent: 1,
cPrimary: 1,
2020-04-29 23:32:49 +01:00
fs14PX: 1,
flexGrow1: 1,
radiusSmall: 1,
pl15: 1,
searchInput: 1,
})
const containerClasses = CX({
d: 1,
2020-05-14 07:03:22 +01:00
searchNavigation: (!highlighted && isInNav && theme === 'light') || (isInNav && theme !== 'light'),
bgWhite: (highlighted && isInNav && theme === 'light'),
2020-05-14 21:45:39 +01:00
bgPrimary: !isInNav,
2020-04-29 23:32:49 +01:00
flexRow: 1,
radiusSmall: 1,
aiCenter: 1,
2020-04-29 23:32:49 +01:00
})
2020-05-14 21:45:39 +01:00
const prependIconColor = (highlighted || !isInNav) ? 'brand' : 'white'
const placeholder = !me ? 'Search Gab' : 'Search for people, groups or gabs'
2020-04-29 23:32:49 +01:00
const id = 'nav-search'
2020-02-21 00:57:29 +00:00
return (
<div className={[_s.d, _s.jcCenter, _s.h53PX].join(' ')}>
2020-04-29 23:32:49 +01:00
<div className={containerClasses}>
<label className={_s.visiblyHidden} htmlFor={id}>Search</label>
<input
id={id}
className={inputClasses}
type='search'
2020-05-09 03:17:19 +01:00
placeholder={placeholder}
2020-04-29 23:32:49 +01:00
ref={this.setTextbox}
value={value}
onKeyUp={this.handleKeyUp}
onChange={this.handleOnChange}
onFocus={this.handleOnFocus}
onBlur={this.handleOnBlur}
2020-05-03 06:22:49 +01:00
autoComplete='off'
2020-04-29 23:32:49 +01:00
/>
<Button
className={[_s.px10, _s.mr5].join(' ')}
tabIndex='0'
title='...'
backgroundColor='none'
color={prependIconColor}
onClick={this.handleSubmit}
icon='search'
2020-05-14 07:03:22 +01:00
iconClassName={_s.fillInherit}
2020-04-29 23:32:49 +01:00
iconSize='16px'
/>
</div>
2020-02-21 00:57:29 +00:00
</div>
)
}
}
const mapStateToProps = (state) => ({
value: state.getIn(['search', 'value']),
submitted: state.getIn(['search', 'submitted']),
theme: state.getIn(['settings', 'displayOptions', 'theme']),
})
const mapDispatchToProps = (dispatch) => ({
onChange: (value) => dispatch(changeSearch(value)),
onClear: () => dispatch(clearSearch()),
onSubmit: () => dispatch(submitSearch()),
onShow: () => dispatch(showSearch()),
})
Search.propTypes = {
value: PropTypes.string.isRequired,
submitted: PropTypes.bool,
onShow: PropTypes.func.isRequired,
onChange: PropTypes.func.isRequired,
withOverlay: PropTypes.bool,
onClear: PropTypes.func.isRequired,
onSubmit: PropTypes.func.isRequired,
isInNav: PropTypes.bool.isRequired,
theme: PropTypes.string,
}
export default withRouter(connect(mapStateToProps, mapDispatchToProps)(Search))