Press n or j to go to the next uncovered block, b, p or k for the previous block.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 | import React from 'react' import Icon from 'components/Common/Icon' import Emitter from '../../emitter' interface Props { onSearchFormChanged: Function isShown: Function isSearchPage: boolean pollInterval?: number keyword: string focused: boolean } interface State { keyword: string searchedKeyword: string } // Header.SearchForm export default class SearchForm extends React.Component<Props, State> { static defaultProps = { pollInterval: 1000 } ticker: number | undefined constructor(props: Props) { super(props) this.state = { keyword: props.keyword, searchedKeyword: '', } this.handleSubmit = this.handleSubmit.bind(this) this.handleChange = this.handleChange.bind(this) this.handleFocus = this.handleFocus.bind(this) this.clearForm = this.clearForm.bind(this) } componentDidMount() { this.ticker = window.setInterval(this.searchFieldTicker.bind(this), this.props.pollInterval) } componentWillUnmount() { window.clearInterval(this.ticker) } search() { const { keyword, searchedKeyword } = this.state if (keyword !== searchedKeyword) { this.props.onSearchFormChanged({ keyword }) this.setState({ searchedKeyword: keyword }) } } renderClearForm() { return ( <a className="search-top-clear" onClick={this.clearForm}> <Icon name="closeCircle" /> </a> ) } clearForm() { this.setState({ keyword: '' }) this.search() } searchFieldTicker() { this.search() } handleFocus(event: React.FocusEvent<HTMLInputElement>) { this.props.isShown(true) } handleChange(event: React.ChangeEvent<HTMLInputElement>) { const keyword = event.target.value this.setState({ keyword }) } handleSubmit(e: React.FormEvent<HTMLFormElement>) { const { keyword } = this.state const { isSearchPage } = this.props if (isSearchPage) { e.preventDefault() Emitter.emit('search', { keyword }) } } render() { const showClearForm = this.props.focused && this.state.keyword !== '' const focusedStyles = this.props.focused ? { maxWidth: 'none' } : {} const formClearStyles = showClearForm ? { paddingRight: 40 } : {} return ( <form action="/_search" className="search-form search-top-input-group" onSubmit={this.handleSubmit}> <div className="search-top-icon"> <Icon name="magnify" /> </div> {showClearForm && this.renderClearForm()} <input autoComplete="off" type="text" className="search-top-input form-control" placeholder="Search ... Page title and content" name="q" value={this.state.keyword} onFocus={this.handleFocus} onChange={this.handleChange} style={{ ...focusedStyles, ...formClearStyles }} /> </form> ) } } |