feat: interate autosugesst with css fix

anmol5varma · May 10, 2020 · 58423f2 · 58423f2
1 parent e9e2928
commit 58423f2
Show file tree

Hide file tree

Showing 3 changed files with 101 additions and 80 deletions.
diff --git 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 => (
-  <div>
-    {suggestion.name}
-  </div>
+    <div>
+        {suggestion.name}
+    </div>
 );
 
 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 (
-      <Autosuggest
-        suggestions={suggestions}
-        onSuggestionsFetchRequested={this.onSuggestionsFetchRequested}
-        onSuggestionsClearRequested={this.onSuggestionsClearRequested}
-        getSuggestionValue={getSuggestionValue}
-        renderSuggestion={renderSuggestion}
-        inputProps={inputProps}
-      />
-    );
-  }
+        // Finally, render it!
+        return (
+            <Autosuggest
+                suggestions={suggestions}
+                onSuggestionsFetchRequested={this.onSuggestionsFetchRequested}
+                onSuggestionsClearRequested={this.onSuggestionsClearRequested}
+                getSuggestionValue={getSuggestionValue}
+                renderSuggestion={renderSuggestion}
+                inputProps={inputProps}
+            />
+        );
+    }
 }
 export default AutosuggestComp
diff --git 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 {
 								}
 							</div>
 							<CountdownCircleTimer
-								// isPlaying
+								isPlaying
 								durationSeconds={Constants.TIME_FOR_EACH_QUESTION}
 								colors={[["#00AA00", 0.5], ["#A30000"]]}
 								renderTime={renderTime}
 								strokeWidth={5}
 								size={140}
 								onComplete={() => {
-									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}
 								/>
 								{/* <input
 									list="players"
@@ -118,7 +121,7 @@ class Template extends Component {
 	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
@@ -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;
+    }
   }