From e637f087668c5564088c521ecc1d984946118675 Mon Sep 17 00:00:00 2001
From: mama <mael.thomas@data.gouv.fr>
Date: Wed, 7 Feb 2018 15:09:42 +0100
Subject: [PATCH] =?UTF-8?q?Cr=C3=A9ation=20du=20RadioInpu?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 source/components/conversation/Question.js   |   2 +-
 source/components/conversation/RadioInput.js | 143 +++++++++++++++++++
 source/engine/generateQuestions.js           |  21 ++-
 3 files changed, 161 insertions(+), 5 deletions(-)
 create mode 100644 source/components/conversation/RadioInput.js

diff --git a/source/components/conversation/Question.js b/source/components/conversation/Question.js
index 450797569..f0d5c4175 100644
--- a/source/components/conversation/Question.js
+++ b/source/components/conversation/Question.js
@@ -4,7 +4,7 @@ import { FormDecorator } from './FormDecorator'
 import { answer, answered } from './userAnswerButtonStyle'
 import HoverDecorator from '../HoverDecorator'
 import Explicable from './Explicable'
-import { pipe, split, reverse, reduce, is } from 'ramda'
+import { is } from 'ramda'
 import SendButton from './SendButton'
 /* Ceci est une saisie de type "radio" : l'utilisateur choisit une réponse dans une liste, ou une liste de listes.
 	Les données @choices sont un arbre de type:
diff --git a/source/components/conversation/RadioInput.js b/source/components/conversation/RadioInput.js
new file mode 100644
index 000000000..0b63201a0
--- /dev/null
+++ b/source/components/conversation/RadioInput.js
@@ -0,0 +1,143 @@
+import React, { Component } from 'react'
+import { FormDecorator } from './FormDecorator'
+import { answer, answered } from './userAnswerButtonStyle'
+import HoverDecorator from '../HoverDecorator'
+import Explicable from './Explicable'
+import { is } from 'ramda'
+import SendButton from './SendButton'
+
+@FormDecorator('radioInput')
+export default class Question extends Component {
+	render() {
+		let { choices, submit, themeColours, meta: { pristine } } = this.props
+		let choiceElements = is(Array)(choices)
+			? this.renderBinaryQuestion()
+			: this.renderChildren(choices)
+		return (
+			<>
+				{choiceElements}
+				<SendButton
+					{...{
+						disabled: pristine,
+						themeColours,
+						error: false,
+						submit
+					}}
+				/>
+			</>
+		)
+	}
+	renderBinaryQuestion() {
+		let {
+			input, // vient de redux-form
+			submit,
+			choices,
+			setFormValue,
+			themeColours
+		} = this.props
+
+		return (
+			<ul>
+				{choices.map(({ value, label }) => (
+					<RadioLabel
+						key={value}
+						{...{ value, label, input, submit, themeColours, setFormValue }}
+					/>
+				))}
+			</ul>
+		)
+	}
+	renderChildren(choices) {
+		let {
+				input, // vient de redux-form
+				submit,
+				setFormValue,
+				themeColours
+			} = this.props,
+			{ name } = input,
+			// seront stockées ainsi dans le state :
+			// [parent object path]: dotted name relative to parent
+			relativeDottedName = radioDottedName =>
+				radioDottedName.split(name + ' . ')[1]
+
+		return (
+			<ul>
+				{choices.canGiveUp && (
+					<li key="aucun" className="variantLeaf aucun">
+						<RadioLabel
+							{...{
+								value: 'non',
+								label: 'Aucun',
+								input,
+								submit,
+								themeColours,
+								dottedName: null,
+								setFormValue
+							}}
+						/>
+					</li>
+				)}
+				{choices.children &&
+					choices.children.map(
+						({ name, title, dottedName, children }) =>
+							children ? (
+								<li key={name} className="variant">
+									<div>{title}</div>
+									{this.renderChildren({ children })}
+								</li>
+							) : (
+								<li key={name} className="variantLeaf">
+									<RadioLabel
+										{...{
+											value: relativeDottedName(dottedName),
+											label: title,
+											dottedName,
+											input,
+											submit,
+											themeColours,
+											setFormValue
+										}}
+									/>
+								</li>
+							)
+					)}
+			</ul>
+		)
+	}
+}
+
+let RadioLabel = props => (
+	<Explicable dottedName={props.dottedName}>
+		<RadioLabelContent {...props} />
+	</Explicable>
+)
+
+@HoverDecorator
+class RadioLabelContent extends Component {
+	click = value => () => {
+		if (this.props.input.value == value) this.props.submit('dblClick')
+	}
+	render() {
+		let { value, label, input, hover, themeColours } = this.props,
+			// value = when(is(Object), prop('value'))(choice),
+			labelStyle = Object.assign(
+				value === input.value || hover
+					? answered(themeColours)
+					: answer(themeColours),
+				value === '_' ? { fontWeight: 'bold' } : null
+			)
+
+		return (
+			<label key={value} style={labelStyle} className="radio">
+				{label}
+				<input
+					type="radio"
+					{...input}
+					onClick={this.click(value)}
+					value={value}
+					checked={value === input.value ? 'checked' : ''}
+				/>
+			</label>
+		)
+	}
+}
diff --git a/source/engine/generateQuestions.js b/source/engine/generateQuestions.js
index 696215076..64c8480fe 100644
--- a/source/engine/generateQuestions.js
+++ b/source/engine/generateQuestions.js
@@ -23,6 +23,7 @@ import Input from 'Components/conversation/Input'
 import Select from 'Components/conversation/select/Select'
 import SelectAtmp from 'Components/conversation/select/SelectTauxRisque'
 import formValueTypes from 'Components/conversation/formValueTypes'
+import RadioInput from '../components/conversation/RadioInput'
 
 import {
 	findRuleByDottedName,
@@ -172,16 +173,28 @@ export let getInputComponent = ({ unfolded }) => (
 	Else just display the Input component.
 	*/
 
+	if (inversion)
+		return (
+			<RadioInput
+				{...{
+					...commonProps,
+					valueType: formValueTypes[rule.format],
+					suggestions: rule.suggestions,
+					inversion,
+					inverted: dottedName !== fieldName,
+					fieldTitle: findRuleByDottedName(rules, fieldName).title,
+					fieldName
+				}}
+			/>
+		)
+
 	return (
 		<Input
 			{...{
 				...commonProps,
 				valueType: formValueTypes[rule.format],
 				suggestions: rule.suggestions,
-				inversion,
-				fieldTitle: findRuleByDottedName(rules, fieldName).title,
-				fieldName,
-				inverted: dottedName !== fieldName
+				fieldName
 			}}
 		/>
 	)