From fd0ef4b2d8be59bd0d180cd82163ddd149ca5de2 Mon Sep 17 00:00:00 2001
From: mama <mael.thomas@data.gouv.fr>
Date: Tue, 28 Nov 2017 18:08:21 +0100
Subject: [PATCH] Ajout de raccourcis clavier

---
 .../components/conversation/FormDecorator.js  |  3 +-
 .../conversation/IgnoreStepButton.css         | 17 ++-----
 .../conversation/IgnoreStepButton.js          |  6 +--
 source/components/conversation/Input.js       | 46 ++++++++-----------
 source/components/conversation/SendButton.js  | 35 ++++++++++++++
 .../components/conversation/conversation.css  | 19 ++++++++
 6 files changed, 82 insertions(+), 44 deletions(-)
 create mode 100644 source/components/conversation/SendButton.js

diff --git a/source/components/conversation/FormDecorator.js b/source/components/conversation/FormDecorator.js
index f20b926ba..57a73c2c8 100644
--- a/source/components/conversation/FormDecorator.js
+++ b/source/components/conversation/FormDecorator.js
@@ -24,8 +24,7 @@ export var FormDecorator = formType => RenderField =>
 		}),
 		dispatch => ({
 			stepAction: (name, step) => dispatch(stepAction(name, step)),
-			setFormValue: (field, value) => console.log(field, value) ||
-				dispatch(change('conversation', field, value))
+			setFormValue: (field, value) => dispatch(change('conversation', field, value))
 		})
 	)
 	class extends Component {
diff --git a/source/components/conversation/IgnoreStepButton.css b/source/components/conversation/IgnoreStepButton.css
index 90963ea23..76873ae8a 100644
--- a/source/components/conversation/IgnoreStepButton.css
+++ b/source/components/conversation/IgnoreStepButton.css
@@ -1,5 +1,9 @@
 
-#ignore, #ignore:visited {
+#ignore {
+	position: relative;
+}
+
+#ignoreButton, #ignoreButton:visited {
 	cursor: pointer;
 	color: #444;
 	font-weight: 200;
@@ -9,14 +13,3 @@
 	line-height: 1.2em;
 	font-style: italic;
 }
-
-#ignoreIcon {
-	font-size: 80%;
-	font-weight: bold;
-	background: #ddd;
-	color: white;
-	margin-right: .6em;
-	padding: .5em .4em;
-	border-radius: .2em;
-	transition: .2s opacity;
-}
diff --git a/source/components/conversation/IgnoreStepButton.js b/source/components/conversation/IgnoreStepButton.js
index 36574b514..233a8cc56 100644
--- a/source/components/conversation/IgnoreStepButton.js
+++ b/source/components/conversation/IgnoreStepButton.js
@@ -19,11 +19,11 @@ export default class IgnoreStepButton extends Component {
 	}
 	render() {
 		return (
-			<div>
-				<span id="ignoreIcon" style={{opacity: this.props.hover ? 1 : 0}}>Échap</span>
-				<a id="ignore" onClick={this.props.action}>
+			<div id="ignore">
+				<a id="ignoreButton" onClick={this.props.action}>
 					passer
 				</a>
+				<span className="keyIcon" style={{opacity: this.props.hover ? 1 : 0}}>Échap</span>
 			</div>
 		)
 	}
diff --git a/source/components/conversation/Input.js b/source/components/conversation/Input.js
index 3ae4149fe..6f73bef62 100644
--- a/source/components/conversation/Input.js
+++ b/source/components/conversation/Input.js
@@ -2,8 +2,8 @@ import React, { Component } from 'react'
 import { FormDecorator } from './FormDecorator'
 import classnames from 'classnames'
 import R from 'ramda'
-import {Field} from 'redux-form'
-
+import { Field } from 'redux-form'
+import SendButton from './SendButton'
 
 @FormDecorator('input')
 export default class Input extends Component {
@@ -28,8 +28,8 @@ export default class Input extends Component {
 			<span>
 				<div className="inputPrefix">{this.renderInversions()}</div>
 				<div className="answer">
-
 					<input
+						ref={el => { this.inputElement = el }}
 						type="text"
 						{...input}
 						value={hoverSuggestion != null ? hoverSuggestion : input.value}
@@ -46,6 +46,7 @@ export default class Input extends Component {
 								key == 'Enter' &&
 								input.value &&
 								(!error ? submit() : input.onBlur())
+
 							// blur will trigger the error
 						}
 					/>
@@ -58,18 +59,9 @@ export default class Input extends Component {
 							{answerSuffix}
 						</label>
 					)}
-					<button
-						className="send"
-						disabled={sendButtonDisabled}
-						style={{
-							color: themeColours.textColour,
-							background: themeColours.colour
-						}}
-						onClick={() => (!sendButtonDisabled && !error ? submit() : null)}
-					>
-						<span className="text">valider</span>
-						<span className="icon">&#10003;</span>
-					</button>
+					<SendButton
+						{...{ sendButtonDisabled, themeColours, error, submit }}
+					/>
 				</div>
 
 				{this.renderSuggestions(themeColours)}
@@ -79,25 +71,27 @@ export default class Input extends Component {
 		)
 	}
 
-	componentDidMount(){
-		let { stepProps: { dottedName, inversion, setFormValue} } = this.props
+	componentDidMount() {
+		this.inputElement.focus()
+
+		let { stepProps: { dottedName, inversion, setFormValue } } = this.props
 		if (!inversion) return null
 		// initialize the form field in renderinversions
 		setFormValue(inversion.inversions[0].dottedName, 'inversions.' + dottedName)
 	}
 	renderInversions() {
-		let { stepProps: { dottedName, inversion} } = this.props
+		let { stepProps: { dottedName, inversion } } = this.props
 		if (!inversion) return null
 
-		if (inversion.inversions.length === 1) return (
-			<span>{inversion.inversions[0].title || inversion.inversions[0].dottedName}</span>
-		)
+		if (inversion.inversions.length === 1)
+			return (
+				<span>
+					{inversion.inversions[0].title || inversion.inversions[0].dottedName}
+				</span>
+			)
 
 		return (
-			<Field
-				component="select"
-				name={'inversions.' + dottedName}
-			>
+			<Field component="select" name={'inversions.' + dottedName}>
 				{inversion.inversions.map(({ name, title, dottedName }) => (
 					<option key={dottedName} value={dottedName}>
 						{title || name}
@@ -109,8 +103,6 @@ export default class Input extends Component {
 	renderSuggestions(themeColours) {
 		let { setFormValue, submit, suggestions, inverted } = this.props.stepProps
 
-
-
 		if (!suggestions || inverted) return null
 		return (
 			<div className="inputSuggestions">
diff --git a/source/components/conversation/SendButton.js b/source/components/conversation/SendButton.js
new file mode 100644
index 000000000..cc12d665a
--- /dev/null
+++ b/source/components/conversation/SendButton.js
@@ -0,0 +1,35 @@
+import React, {Component} from 'react'
+import HoverDecorator from 'Components/HoverDecorator'
+
+@HoverDecorator
+export default class SendButton extends Component {
+	getAction(){
+		let {sendButtonDisabled, error, submit } = this.props
+		return () => (!sendButtonDisabled && !error ? submit() : null)
+	}
+	render() {
+		let { sendButtonDisabled, themeColours, hover } = this.props
+		return (
+			<span className="sendWrapper">
+				<button
+					className="send"
+					disabled={sendButtonDisabled}
+					style={{
+						color: themeColours.textColour,
+						background: themeColours.colour
+					}}
+					onClick={this.getAction()}
+				>
+					<span className="text">valider</span>
+					<span className="icon">&#10003;</span>
+				</button>
+				<span
+					className="keyIcon"
+					style={{ opacity: hover && !sendButtonDisabled ? 1 : 0 }}
+				>
+					Entrée{' '}↵
+				</span>
+			</span>
+		)
+	}
+}
diff --git a/source/components/conversation/conversation.css b/source/components/conversation/conversation.css
index 0e80acfa5..3d18fe1f3 100644
--- a/source/components/conversation/conversation.css
+++ b/source/components/conversation/conversation.css
@@ -385,6 +385,9 @@
 	vertical-align: middle;
 }
 
+.sendWrapper {
+	position: relative;
+}
 
 .step .send {
 	padding: 0 .1em 0 .5em;
@@ -529,3 +532,19 @@ for the appearing element to appear without stacking up below the first one */
 	width: calc(100% - 6em);
 	border-bottom: 1px solid #eee
 }
+
+
+
+
+.keyIcon {
+	position: absolute;
+	font-size: 80%;
+	text-align: center;
+	font-weight: bold;
+	background: #ddd;
+	color: white;
+	margin-left: .6em;
+	padding: .5em .4em;
+	border-radius: .2em;
+	transition: .2s opacity;
+}