2019-07-15 12:53:12 +00:00
|
|
|
import React from "react";
|
|
|
|
import PropTypes from "prop-types";
|
|
|
|
import styled from 'styled-components';
|
|
|
|
import InputBlock from '../input-block';
|
|
|
|
|
2019-08-23 07:16:18 +00:00
|
|
|
import isEqual from 'lodash/isEqual';
|
2019-08-27 08:54:38 +00:00
|
|
|
|
2019-07-17 12:36:13 +00:00
|
|
|
const StyledSearchInput = styled.div`
|
|
|
|
min-width: 200px;
|
2019-07-19 09:48:19 +00:00
|
|
|
font-family: Open Sans;
|
|
|
|
font-style: normal;
|
2019-07-17 12:36:13 +00:00
|
|
|
`;
|
2019-08-08 09:45:00 +00:00
|
|
|
|
2019-08-23 07:16:18 +00:00
|
|
|
class SearchInput extends React.Component {
|
2019-07-15 12:53:12 +00:00
|
|
|
constructor(props) {
|
|
|
|
super(props);
|
|
|
|
|
2019-08-13 08:07:35 +00:00
|
|
|
this.input = React.createRef();
|
|
|
|
|
2019-07-15 12:53:12 +00:00
|
|
|
this.state = {
|
2019-08-22 08:58:18 +00:00
|
|
|
inputValue: props.value,
|
2019-07-15 12:53:12 +00:00
|
|
|
};
|
2019-07-17 12:36:13 +00:00
|
|
|
|
2019-08-27 08:54:38 +00:00
|
|
|
this.clearSearch = this.clearSearch.bind(this);
|
2019-08-13 08:07:35 +00:00
|
|
|
this.onInputChange = this.onInputChange.bind(this);
|
2019-08-23 07:16:18 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
|
2019-08-27 08:54:38 +00:00
|
|
|
clearSearch(){
|
2019-08-23 07:16:18 +00:00
|
|
|
if (this.input.current) this.input.current.clearInput();
|
2019-08-13 08:07:35 +00:00
|
|
|
this.setState({
|
2019-08-27 08:54:38 +00:00
|
|
|
inputValue: ''
|
2019-08-13 08:07:35 +00:00
|
|
|
});
|
2019-08-27 08:54:38 +00:00
|
|
|
if(typeof this.props.onClearSearch === 'function') this.props.onClearSearch();
|
|
|
|
this.props.onChange('')
|
|
|
|
};
|
2019-08-23 07:16:18 +00:00
|
|
|
onInputChange(e) {
|
2019-08-13 08:07:35 +00:00
|
|
|
this.setState({
|
|
|
|
inputValue: e.target.value
|
|
|
|
});
|
2019-08-27 08:54:38 +00:00
|
|
|
this.props.onChange(e.target.value)
|
2019-07-15 14:24:17 +00:00
|
|
|
}
|
2019-08-23 07:16:18 +00:00
|
|
|
shouldComponentUpdate(nextProps, nextState) {
|
2019-08-27 08:54:38 +00:00
|
|
|
if (this.props.value != nextProps.value) {
|
|
|
|
this.setState({ inputValue: nextProps.value });
|
2019-08-23 07:16:18 +00:00
|
|
|
return true;
|
|
|
|
}
|
2019-08-27 08:54:38 +00:00
|
|
|
|
|
|
|
return (!isEqual(this.state, nextState) || !isEqual(this.props, nextProps));
|
2019-08-08 09:45:00 +00:00
|
|
|
}
|
2019-07-15 14:24:17 +00:00
|
|
|
|
2019-07-15 12:53:12 +00:00
|
|
|
render() {
|
2019-08-08 09:45:00 +00:00
|
|
|
//console.log("Search input render");
|
2019-08-13 08:07:35 +00:00
|
|
|
let clearButtonSize = 15;
|
2019-07-15 14:24:17 +00:00
|
|
|
switch (this.props.size) {
|
|
|
|
case 'base':
|
2019-08-27 08:54:38 +00:00
|
|
|
clearButtonSize = !!this.state.inputValue || this.props.showClearButton > 0 ? 12 : 15;
|
2019-07-15 14:24:17 +00:00
|
|
|
break;
|
|
|
|
case 'middle':
|
2019-08-27 08:54:38 +00:00
|
|
|
clearButtonSize = !!this.state.inputValue || this.props.showClearButton > 0 ? 16 : 18;
|
2019-08-13 08:07:35 +00:00
|
|
|
break;
|
2019-07-15 14:24:17 +00:00
|
|
|
case 'big':
|
2019-08-27 08:54:38 +00:00
|
|
|
clearButtonSize = !!this.state.inputValue || this.props.showClearButton > 0 ? 19 : 21;
|
2019-08-13 08:07:35 +00:00
|
|
|
break;
|
2019-07-15 14:24:17 +00:00
|
|
|
case 'huge':
|
2019-08-27 08:54:38 +00:00
|
|
|
clearButtonSize = !!this.state.inputValue || this.props.showClearButton > 0 ? 22 : 24;
|
2019-07-15 14:24:17 +00:00
|
|
|
break;
|
|
|
|
default:
|
|
|
|
break;
|
|
|
|
}
|
2019-08-27 08:54:38 +00:00
|
|
|
|
2019-07-15 12:53:12 +00:00
|
|
|
return (
|
2019-08-27 08:54:38 +00:00
|
|
|
<StyledSearchInput className={this.props.className}>
|
2019-08-23 07:16:18 +00:00
|
|
|
<InputBlock
|
2019-08-13 08:07:35 +00:00
|
|
|
ref={this.input}
|
2019-07-15 12:53:12 +00:00
|
|
|
id={this.props.id}
|
2019-08-27 08:54:38 +00:00
|
|
|
name={this.props.name}
|
2019-07-15 12:53:12 +00:00
|
|
|
isDisabled={this.props.isDisabled}
|
2019-08-27 08:54:38 +00:00
|
|
|
iconName={!!this.state.inputValue || this.props.showClearButton > 0 ? "CrossIcon" : "SearchIcon"}
|
2019-07-15 12:53:12 +00:00
|
|
|
isIconFill={true}
|
2019-08-13 08:07:35 +00:00
|
|
|
iconSize={clearButtonSize}
|
2019-07-15 12:53:12 +00:00
|
|
|
iconColor={"#A3A9AE"}
|
2019-08-27 08:54:38 +00:00
|
|
|
onIconClick={!!this.state.inputValue || this.props.showClearButton ? this.clearSearch : undefined}
|
2019-07-15 12:53:12 +00:00
|
|
|
size={this.props.size}
|
|
|
|
scale={true}
|
2019-08-13 08:07:35 +00:00
|
|
|
value={this.state.inputValue}
|
2019-07-15 12:53:12 +00:00
|
|
|
placeholder={this.props.placeholder}
|
2019-08-13 08:07:35 +00:00
|
|
|
onChange={this.onInputChange}
|
2019-07-17 12:36:13 +00:00
|
|
|
>
|
2019-08-27 08:54:38 +00:00
|
|
|
{this.props.children}
|
2019-08-23 07:16:18 +00:00
|
|
|
|
2019-07-17 12:36:13 +00:00
|
|
|
</InputBlock>
|
|
|
|
</StyledSearchInput>
|
2019-07-15 12:53:12 +00:00
|
|
|
);
|
|
|
|
}
|
|
|
|
};
|
|
|
|
|
|
|
|
SearchInput.propTypes = {
|
2019-08-23 07:16:18 +00:00
|
|
|
id: PropTypes.string,
|
|
|
|
size: PropTypes.oneOf(['base', 'middle', 'big', 'huge']),
|
|
|
|
value: PropTypes.string,
|
|
|
|
scale: PropTypes.bool,
|
|
|
|
placeholder: PropTypes.string,
|
|
|
|
onChange: PropTypes.func,
|
|
|
|
isDisabled: PropTypes.bool,
|
2019-08-27 08:54:38 +00:00
|
|
|
showClearButton: PropTypes.bool
|
2019-07-15 12:53:12 +00:00
|
|
|
};
|
|
|
|
|
|
|
|
SearchInput.defaultProps = {
|
2019-08-23 07:16:18 +00:00
|
|
|
size: 'base',
|
|
|
|
value: '',
|
|
|
|
scale: false,
|
|
|
|
isDisabled: false,
|
2019-08-27 08:54:38 +00:00
|
|
|
showClearButton: false
|
2019-07-15 12:53:12 +00:00
|
|
|
};
|
|
|
|
|
|
|
|
export default SearchInput;
|