From 7d098d5bc3fb8e0d4f8e7446ee604e90d541e036 Mon Sep 17 00:00:00 2001
From: Maxime Quandalle <maxime@quandalle.com>
Date: Tue, 3 Mar 2020 15:37:55 +0100
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20Affichage=20des=20ic=C3=B4nes=20?=
 =?UTF-8?q?dans=20les=20questions=20=C3=A0=20choix=20multiples?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Cherry-picked from https://github.com/laem/futureco/pull/62

Co-authored-by: Mael <mael.thomas@data.gouv.fr>
---
 .../conversation/{Question.js => Question.tsx}       | 12 ++++++++----
 1 file changed, 8 insertions(+), 4 deletions(-)
 rename source/components/conversation/{Question.js => Question.tsx} (91%)

diff --git a/source/components/conversation/Question.js b/source/components/conversation/Question.tsx
similarity index 91%
rename from source/components/conversation/Question.js
rename to source/components/conversation/Question.tsx
index 5e7425d35..fc4441552 100644
--- a/source/components/conversation/Question.js
+++ b/source/components/conversation/Question.tsx
@@ -2,6 +2,7 @@ import classnames from 'classnames'
 import { ThemeColorsContext } from 'Components/utils/colors'
 import { is } from 'ramda'
 import React, { useCallback, useContext } from 'react'
+import emoji from 'react-easy-emoji'
 import { Trans } from 'react-i18next'
 import Explicable from './Explicable'
 import SendButton from './SendButton'
@@ -77,7 +78,7 @@ export default function Question({
 					</li>
 				)}
 				{choices.children &&
-					choices.children.map(({ title, dottedName, children }) =>
+					choices.children.map(({ title, dottedName, children, icons }) =>
 						children ? (
 							<li key={dottedName} className="variant">
 								<div>{title}</div>
@@ -91,6 +92,7 @@ export default function Question({
 										label: title,
 										dottedName,
 										currentValue,
+										icons,
 										onSubmit,
 										colors,
 										onChange: handleChange
@@ -129,12 +131,13 @@ function RadioLabelContent({
 	value,
 	label,
 	currentValue,
+	icons,
 	onChange,
 	onSubmit,
 	css
 }) {
-	let labelStyle = value === '_' ? { fontWeight: 'bold' } : null,
-		selected = value === currentValue
+	const labelStyle = value === '_' ? ({ fontWeight: 'bold' } as const) : {}
+	const selected = value === currentValue
 
 	const click = value => () => {
 		if (currentValue == value && onSubmit) onSubmit('dblClick')
@@ -149,13 +152,14 @@ function RadioLabelContent({
 				selected
 			})}
 		>
+			{icons && <>{emoji(icons)}&nbsp;</>}
 			<Trans>{label}</Trans>
 			<input
 				type="radio"
 				onClick={click(value)}
 				value={value}
 				onChange={evt => onChange(evt.target.value)}
-				checked={value === currentValue ? 'checked' : ''}
+				checked={selected}
 			/>
 		</label>
 	)