Creepso/stremio-web
1
0
Fork 0
mirror of https://github.com/Stremio/stremio-web.git synced 2026-04-12 07:00:28 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

old search imput dropped

Browse source
This commit is contained in:
NikolaBorislavovHristov 2019-04-25 13:16:41 +03:00
parent f92cefe88a
commit e1b384b668
3 changed files with 0 additions and 151 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

88
src/common/NavBar/SearchInput/SearchInput.js
View file

@ -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 (
<form className={classnames(this.props.className, styles['search-form'], { [styles['active']]: this.state.isActive })} onSubmit={this.onFormSubmit}>
<label className={styles['search-label']}>
<input
className={styles['query-input']}
type={'text'}
placeholder={'Search'}
value={this.state.query}
onChange={this.onQueryInputChange}
onFocus={this.onQueryInputFocus}
autoCorrect={'off'}
autoCapitalize={'off'}
spellCheck={false}
/>
<button className={styles['submit-button']} type={'submit'}>
<Icon className={styles['submit-icon']} icon={'ic_search'} />
</button>
</label>
</form>
);
}
}
export default SearchInput;

3
src/common/NavBar/SearchInput/index.js
View file

@ -1,3 +0,0 @@
import SearchInput from './SearchInput';
export default SearchInput;

60
src/common/NavBar/SearchInput/styles.less
View file

@ -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);
}
}
}
}
}