diff --git a/src/components/autosuggest.js b/src/components/autosuggest.js
index be0657b..efd5576 100644
--- a/src/components/autosuggest.js
+++ b/src/components/autosuggest.js
@@ -7,12 +7,12 @@ import "../styles/autosuggestion.css"
// Teach Autosuggest how to calculate suggestions for any given input value.
const getSuggestions = (list, value) => {
- const inputValue = value.trim().toLowerCase();
- const inputLength = inputValue.length;
+ const inputValue = value.trim().toLowerCase();
+ const inputLength = inputValue.length;
- return inputLength === 0 ? [] : list.filter(lang =>
- lang.name.toLowerCase().slice(0, inputLength) === inputValue
- );
+ return inputLength === 0 ? [] : list.filter(lang => lang.name.toLowerCase()
+ .trim().split(' ').filter(name => name.slice(0, inputLength) === inputValue).length > 0
+ );
};
// When suggestion is clicked, Autosuggest needs to populate the input
@@ -22,69 +22,76 @@ const getSuggestionValue = suggestion => suggestion.name;
// Use your imagination to render suggestions.
const renderSuggestion = suggestion => (
-
- {suggestion.name}
-
+
+ {suggestion.name}
+
);
class AutosuggestComp extends React.Component {
- constructor(props) {
- super(props);
+ constructor(props) {
+ super(props);
- // Autosuggest is a controlled component.
- // This means that you need to provide an input value
- // and an onChange handler that updates this value (see below).
- // Suggestions also need to be provided to the Autosuggest,
- // and they are initially empty because the Autosuggest is closed.
- this.state = {
- value: props.value,
- suggestions: []
- };
- }
+ // Autosuggest is a controlled component.
+ // This means that you need to provide an input value
+ // and an onChange handler that updates this value (see below).
+ // Suggestions also need to be provided to the Autosuggest,
+ // and they are initially empty because the Autosuggest is closed.
+ this.state = {
+ value: props.value,
+ suggestions: []
+ };
+ }
+ componentWillReceiveProps(nextProps) {
+ this.setState(() => ({
+ value: nextProps.value
+ }))
+ }
- onChange = (event, { newValue }) => {
- this.props.onChange(newValue);
- this.setState({
- value: newValue
- });
- };
+ onChange = (event, { newValue }) => {
+ this.props.onChange(newValue);
+ this.setState({
+ value: newValue
+ });
+ };
- // Autosuggest will call this function every time you need to update suggestions.
- // You already implemented this logic above, so just use it.
- onSuggestionsFetchRequested = ({ value }) => {
- this.setState({
- suggestions: getSuggestions(this.props.list, value)
- });
- };
+ // Autosuggest will call this function every time you need to update suggestions.
+ // You already implemented this logic above, so just use it.
+ onSuggestionsFetchRequested = ({ value }) => {
+ this.setState({
+ suggestions: getSuggestions(this.props.list, value)
+ });
+ };
- // Autosuggest will call this function every time you need to clear suggestions.
- onSuggestionsClearRequested = () => {
- this.setState({
- suggestions: []
- });
- };
+ // Autosuggest will call this function every time you need to clear suggestions.
+ onSuggestionsClearRequested = () => {
+ this.setState({
+ suggestions: []
+ });
+ };
- render() {
- const { value, suggestions } = this.state;
+ render() {
+ const { value, suggestions } = this.state;
- // Autosuggest will pass through all these props to the input.
- const inputProps = {
- placeholder: 'Player name',
- value,
- onChange: this.onChange
- };
+ // Autosuggest will pass through all these props to the input.
+ const inputProps = {
+ placeholder: 'Player name',
+ value,
+ autoFocus: true,
+ disabled: this.props.isDisabled,
+ onChange: this.onChange
+ };
- // Finally, render it!
- return (
-
- );
- }
+ // Finally, render it!
+ return (
+
+ );
+ }
}
export default AutosuggestComp
\ No newline at end of file
diff --git a/src/components/template.js b/src/components/template.js
index 738972e..57b0fe8 100644
--- a/src/components/template.js
+++ b/src/components/template.js
@@ -32,7 +32,8 @@ const renderTime = value => {
class Template extends Component {
state = {
currentQuestion: 0,
- currentAnswer: ""
+ currentAnswer: "",
+ isDisabled: false
}
renderPage = () => (
@@ -58,14 +59,14 @@ class Template extends Component {
}
{
- this.input.disabled = true
+ this.setIsDisabled(true)
setTimeout(() => this.goToNextQuestion(), Constants.TIME_INTERVAL_BETWEEN_QUESTIONS)
return [false, Constants.TIME_INTERVAL_BETWEEN_QUESTIONS]
}}
@@ -77,6 +78,8 @@ class Template extends Component {
value={this.state.currentAnswer}
onChange={(value) => this.saveInput(value)}
list={list.map(({ player_name }) => ({ name: player_name }))}
+ isDisabled={this.state.isDisabled}
+ submit={this.goToNextQuestion}
/>
{/* {
const { currentAnswer, currentQuestion } = this.state
data[currentQuestion].answer = currentAnswer
- this.input.disabled = false
+ this.setIsDisabled(false)
this.setState((prevState) => {
return {
currentQuestion: prevState.currentQuestion + 1,
@@ -127,6 +130,10 @@ class Template extends Component {
})
}
+ setIsDisabled = (value) => this.setState(() => ({
+ isDisabled: value
+ }))
+
saveInput = (value) => {
this.setState(() => {
return {
diff --git a/src/styles/autosuggestion.css b/src/styles/autosuggestion.css
index 57ed849..bf64c99 100644
--- a/src/styles/autosuggestion.css
+++ b/src/styles/autosuggestion.css
@@ -4,14 +4,12 @@
}
.react-autosuggest__input {
- width: 240px;
- height: 30px;
- padding: 10px 20px;
- font-family: Helvetica, sans-serif;
- font-weight: 300;
- font-size: 16px;
- border: 1px solid #aaa;
- border-radius: 4px;
+ outline: none;
+ border: 0;
+ border-bottom: 2px solid #2b8a9d;
+ border-radius: 2px;
+ margin-left: 5px;
+ text-transform: capitalize;
}
.react-autosuggest__input--focused {
@@ -29,16 +27,16 @@
.react-autosuggest__suggestions-container--open {
display: block;
+ padding: 0;
+ width: 189px;
position: absolute;
- top: 51px;
- width: 280px;
- border: 1px solid #aaa;
- background-color: #fff;
- font-family: Helvetica, sans-serif;
+ transform: translate(-50%);
+ left: 50%;
+ background: #fff;
+ box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
font-weight: 300;
font-size: 16px;
- border-bottom-left-radius: 4px;
- border-bottom-right-radius: 4px;
+ border-radius: 5px;
z-index: 2;
}
@@ -50,9 +48,18 @@
.react-autosuggest__suggestion {
cursor: pointer;
- padding: 10px 20px;
+ padding: 5px 10px;
+ text-transform: capitalize;
+ margin: 0;
}
.react-autosuggest__suggestion--highlighted {
- background-color: #ddd;
+ background-color: #2b8a9d;
+ color: #fff;
+ }
+
+ @media only screen and (max-width: 480px){
+ .react-autosuggest__suggestions-container--open{
+ width: 168px;
+ }
}
\ No newline at end of file