✨ Externalisation des suggestions

source/components/conversation/Input.js

@@ -1,10 +1,10 @@
 import React, { Component } from 'react'
-import { Trans, translate } from 'react-i18next'
+import { translate } from 'react-i18next'
 import PropTypes from 'prop-types'
 import { FormDecorator } from './FormDecorator'
 import classnames from 'classnames'
-import { toPairs } from 'ramda'
 import SendButton from './SendButton'
+import InputSuggestions from './InputSuggestions'
 
 @FormDecorator('input')
 @translate()
@@ -12,9 +12,6 @@ export default class Input extends Component {
 	static contextTypes = {
 		i18n: PropTypes.object.isRequired
 	}
-	state = {
-		suggestion: null
-	}
 	render() {
 		let {
 				input,
@@ -61,39 +58,13 @@ export default class Input extends Component {
 						{...{ disabled: submitDisabled, themeColours, error, submit }}
 					/>
 				</div>
-
-				{this.renderSuggestions(themeColours)}
+				<InputSuggestions
+					suggestions={this.props.suggestions}
+					onFirstClick={value => this.props.setFormValue('' + value)}
+					onSecondClick={() => this.props.submit('suggestion')}
+				/>
 				{inputError && <span className="step-input-error">{error}</span>}
 			</span>
 		)
 	}
-
-	renderSuggestions(themeColours) {
-		let { setFormValue, suggestions, inverted } = this.props,
-			{ i18n } = this.context
-
-		if (!suggestions || inverted) return null
-		return (
-			<div className="inputSuggestions">
-				suggestions:
-				<ul>
-					{toPairs(suggestions).map(([text, value]) => (
-						<li
-							key={value}
-							onClick={() => {
-								setFormValue('' + value)
-								if (this.state.suggestion !== value)
-									this.setState({ suggestion: value })
-								else this.props.submit('suggestion')
-							}}
-							style={{ color: themeColours.textColourOnWhite }}>
-							<span title={i18n.t('cliquez pour insérer cette suggestion')}>
-								{text}
-							</span>
-						</li>
-					))}
-				</ul>
-			</div>
-		)
-	}
 }

source/components/conversation/InputSuggestions.css

@@ -0,0 +1,24 @@
+
+.inputSuggestions {
+	font-style: italic;
+	float: right;
+	clear: right;
+	font-size: 90%;
+	color: #222;
+}
+.inputSuggestions ul {
+	padding-left: 0;
+	list-style: none;
+	display: inline-flex;
+	align-items: flex-end;
+}
+.inputSuggestions li {
+}
+.inputSuggestions span {
+	padding: 0.1em 0.9em;
+	font-weight: 600;
+	cursor: pointer;
+}
+.inputSuggestions span:hover {
+	text-decoration: none;
+}

source/components/conversation/InputSuggestions.js

@@ -0,0 +1,43 @@
+import React, { Component } from 'react'
+import './InputSuggestions.css'
+import withColours from '../withColours'
+import { toPairs } from 'ramda'
+import { translate } from 'react-i18next'
+import PropTypes from 'prop-types'
+
+@withColours
+@translate()
+export default class extends Component {
+	static contextTypes = {
+		i18n: PropTypes.object.isRequired
+	}
+	state = { suggestion: null }
+	render() {
+		let { suggestions, onSecondClick, onFirstClick } = this.props,
+			{ i18n } = this.context
+
+		if (!suggestions) return null
+		return (
+			<div className="inputSuggestions">
+				suggestions:
+				<ul>
+					{toPairs(suggestions).map(([text, value]) => (
+						<li
+							key={value}
+							onClick={() => {
+								onFirstClick(value)
+								if (this.state.suggestion !== value)
+									this.setState({ suggestion: value })
+								else onSecondClick(value)
+							}}
+							style={{ color: this.props.colours.textColourOnWhite }}>
+							<span title={i18n.t('cliquez pour insérer cette suggestion')}>
+								{text}
+							</span>
+						</li>
+					))}
+				</ul>
+			</div>
+		)
+	}
+}

source/components/conversation/conversation.css

@@ -247,29 +247,6 @@
 	outline: none;
 }
 
-.step .inputSuggestions {
-	font-style: italic;
-	float: right;
-	clear: right;
-	font-size: 90%;
-	color: #222;
-}
-.step .inputSuggestions ul {
-	padding-left: 0;
-	list-style: none;
-	display: inline-flex;
-	align-items: flex-end;
-}
-.step .inputSuggestions li {
-}
-.step .inputSuggestions span {
-	padding: 0.1em 0.9em;
-	font-weight: 600;
-	cursor: pointer;
-}
-.step .inputSuggestions span:hover {
-	text-decoration: none;
-}
 
 .help-box {
 	position: absolute;