From 8ff141eff98f8374eae30e30eec228b1d0391f7f Mon Sep 17 00:00:00 2001
From: mama <mael.thomas@data.gouv.fr>
Date: Thu, 19 Oct 2017 14:45:39 +0200
Subject: [PATCH] =?UTF-8?q?Ajout=20d'un=20flash=20au=20changement=20d'un?=
 =?UTF-8?q?=20r=C3=A9sultat?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                                  |  2 +
 source/components/rule/RuleValueVignette.js   | 75 +++++++++++--------
 source/components/rule/RuleValueVignette2.css | 25 +++++++
 3 files changed, 72 insertions(+), 30 deletions(-)

diff --git a/package.json b/package.json
index a62b70f93..2a50d6660 100644
--- a/package.json
+++ b/package.json
@@ -22,6 +22,7 @@
     "npm": "^5.3.0",
     "ramda": "0.24.1",
     "react": "^16.0.0",
+    "react-addons-css-transition-group": "^15.6.2",
     "react-dom": "^16.0.0",
     "react-helmet": "^5.2.0",
     "react-redux": "^5.0.6",
@@ -30,6 +31,7 @@
     "react-scroll": "^1.5.4",
     "react-select": "^1.0.0-rc.10",
     "react-select-fast-filter-options": "^0.2.3",
+    "react-transition-group": "^2.2.1",
     "react-virtualized": "^9.10.1",
     "react-virtualized-select": "^3.1.0",
     "reduce-reducers": "^0.1.2",
diff --git a/source/components/rule/RuleValueVignette.js b/source/components/rule/RuleValueVignette.js
index 1ee4969f0..b98145492 100644
--- a/source/components/rule/RuleValueVignette.js
+++ b/source/components/rule/RuleValueVignette.js
@@ -1,11 +1,13 @@
 import React from "react"
-import {Link} from 'react-router-dom'
-import {encodeRuleName} from 'Engine/rules'
-import classNames from 'classnames'
-import {capitalise0} from '../../utils'
-let fmt = new Intl.NumberFormat('fr-FR').format
-export let humanFigure = decimalDigits => value => fmt(value.toFixed(decimalDigits))
-import './RuleValueVignette2.css'
+import { Link } from "react-router-dom"
+import { encodeRuleName } from "Engine/rules"
+import classNames from "classnames"
+import { capitalise0 } from "../../utils"
+let fmt = new Intl.NumberFormat("fr-FR").format
+export let humanFigure = decimalDigits => value =>
+	fmt(value.toFixed(decimalDigits))
+import "./RuleValueVignette2.css"
+import ReactCSSTransitionGroup from "react-addons-css-transition-group"
 
 export default ({
 	name,
@@ -15,36 +17,49 @@ export default ({
 	nodeValue: ruleValue
 }) =>
 	do {
-		let
-			unsatisfied = ruleValue == null,
+		let unsatisfied = ruleValue == null,
 			irrelevant = ruleValue == 0,
-			number = typeof ruleValue == 'number' && ruleValue > 0
-
+			number = typeof ruleValue == "number" && ruleValue > 0
 		;<span
 			key={name}
-			className={classNames('RuleValueVignette', { unsatisfied, irrelevant, number })}
+			className={classNames("RuleValueVignette", {
+				unsatisfied,
+				irrelevant,
+				number
+			})}
 		>
 			<Link to={"/regle/" + encodeRuleName(name)}>
-				<div className="rule-type">
-					{type}
-				</div>
+				<div className="rule-type">{type}</div>
 				<div className="rule-box">
-					<span className="rule-name">
-						{titre || capitalise0(name)}
-					</span>
-					<span>{' '}
-						{conversationStarted &&
-							(irrelevant
-								? "Vous n'êtes pas concerné"
-								: unsatisfied
-									? <em>En attente de vos réponses...</em>
-									: <div><span className="figure">
-										<b>{humanFigure(2)(ruleValue) + " €"}</b>
-									</span>
-									{/*<p><i className="fa fa-lightbulb-o" aria-hidden="true"></i><em>Pourquoi ?</em></p> */}
-									</div>)}
-					</span>
+					<span className="rule-name">{titre || capitalise0(name)}</span>
+					<RuleValue
+						{...{ unsatisfied, irrelevant, conversationStarted, ruleValue }}
+					/>
 				</div>
 			</Link>
 		</span>
 	}
+
+let RuleValue = ({ unsatisfied, irrelevant, conversationStarted, ruleValue }) =>
+	do {
+		let [className, text] = irrelevant
+			? ["irrelevant", "Vous n'êtes pas concerné"]
+			: unsatisfied
+				? ["unsatisfied", "En attente de vos réponses..."]
+				: ["figure", humanFigure(2)(ruleValue) + " €"]
+
+		{
+			/*<p><i className="fa fa-lightbulb-o" aria-hidden="true"></i><em>Pourquoi ?</em></p> */
+		}
+
+		<ReactCSSTransitionGroup
+			transitionName="flash"
+			transitionEnterTimeout={100}
+			transitionLeaveTimeout={100}
+		>
+			<span key={text} className="rule-value">
+				{" "}
+				{conversationStarted && <span className={className}>{text}</span>}
+			</span>
+		</ReactCSSTransitionGroup>
+	}
diff --git a/source/components/rule/RuleValueVignette2.css b/source/components/rule/RuleValueVignette2.css
index 50fb0d760..879596583 100644
--- a/source/components/rule/RuleValueVignette2.css
+++ b/source/components/rule/RuleValueVignette2.css
@@ -23,3 +23,28 @@
 .RuleValueVignette .rule-box > span {
 	display: inline-block;
 }
+
+.RuleValueVignette .rule-value {
+	transition: background .8s;
+}
+.RuleValueVignette .rule-value .unsatisfied {
+	font-style: italic;
+}
+.RuleValueVignette .rule-value .irrelevant {
+	font-style: normal;
+}
+.RuleValueVignette .rule-value .figure {
+	font-weight: bold;
+}
+
+
+
+/* Animation of summary figures changes : flash ! */
+.flash-enter {
+		background: rgba(255, 255, 255, 1);
+}
+
+.flash-leave {
+		/* Completely hide the button while it's being animated and before it's removed from the DOM. */
+		display: none;
+}