diff --git a/src/common/NavBar/SearchInput/SearchInput.js b/src/common/NavBar/SearchInput/SearchInput.js deleted file mode 100644 index 1ece5e91a..000000000 --- a/src/common/NavBar/SearchInput/SearchInput.js +++ /dev/null @@ -1,88 +0,0 @@ -import React, { Component } from 'react'; -import Icon from 'stremio-icons/dom'; -import classnames from 'classnames'; -import styles from './styles'; - -class SearchInput extends Component { - constructor(props) { - super(props); - - this.state = Object.assign({ - isActive: false, - query: '' - }, this.getStateFromProps(props)); - } - - componentWillReceiveProps(nextProps) { - if (nextProps.location !== this.props.location) { - const nextState = this.getStateFromProps(nextProps); - this.setState(nextState); - } - } - - shouldComponentUpdate(nextProps, nextState) { - return nextState.query !== this.state.query || - nextState.isActive !== this.state.isActive || - nextProps.className !== this.props.className; - } - - getStateFromProps = (props) => { - const nextState = { - isActive: !!matchPath(props.location.pathname, { path: '/search' }) - }; - - if (nextState.isActive) { - const queryParams = new URLSearchParams(props.location.search); - nextState.query = queryParams.get('query') || ''; - } - - return nextState; - } - - search = () => { - const queryParams = new URLSearchParams(); - queryParams.append('query', this.state.query); - this.props.history.replace(`/search?${queryParams.toString()}`); - } - - onFormSubmit = (event) => { - event.preventDefault(); - this.search(); - } - - onQueryInputChange = (event) => { - const query = event.target.value; - this.setState({ query }); - } - - onQueryInputFocus = () => { - if (!this.state.isActive) { - this.search(); - } - } - - render() { - return ( -
- ); - } -} - -export default SearchInput; diff --git a/src/common/NavBar/SearchInput/index.js b/src/common/NavBar/SearchInput/index.js deleted file mode 100644 index 8300e87d8..000000000 --- a/src/common/NavBar/SearchInput/index.js +++ /dev/null @@ -1,3 +0,0 @@ -import SearchInput from './SearchInput'; - -export default SearchInput; diff --git a/src/common/NavBar/SearchInput/styles.less b/src/common/NavBar/SearchInput/styles.less deleted file mode 100644 index 52f49ef8b..000000000 --- a/src/common/NavBar/SearchInput/styles.less +++ /dev/null @@ -1,60 +0,0 @@ - -@import 'constants'; -@label-vertical-padding: 8px; -.search-form { - display: flex; - justify-content: center; - .search-label { - padding: @label-vertical-padding 0; - height: @nav-bar-height; - display: flex; - transition: padding 0.200s; - .query-input { - padding: 0 6px; - width: 280px; - height: 100%; - outline: none; - appearance: none; - user-select: text; - background-color: var(--color-secondary80); - color: var(--color-surfacelighter80); - font-size: 14px; - &::placeholder { - color: var(--color-surfacelighter80); - } - } - .submit-button { - width: calc(@nav-bar-height - 2 * @label-vertical-padding); - height: 100%; - cursor: pointer; - outline: none; - background-color: var(--color-secondarylighter80); - .submit-icon { - width: 14px; - height: 100%; - fill: var(--color-surfacelighter80); - } - } - } - &.active { - .search-label { - padding: 0; - .query-input { - background-color: var(--color-backgrounddark); - color: var(--color-surfacelighter); - font-size: 16px; - &::placeholder { - color: var(--color-surfacelighter); - } - } - .submit-button { - width: @nav-bar-height; - background-color: var(--color-secondarylighter); - .submit-icon { - width: 16px; - fill: var(--color-surfacelighter); - } - } - } - } -} \ No newline at end of file