From d04d0ebe6920b80f4cecba1d3d8b0f06106a7f68 Mon Sep 17 00:00:00 2001
From: Mael <mael.thomas@data.gouv.fr>
Date: Fri, 27 Jul 2018 18:29:09 +0200
Subject: [PATCH] =?UTF-8?q?:sparkles:=20D=C3=A9placement=20de=20la=20vue?=
 =?UTF-8?q?=20Bar=C3=A8me=20dans=20un=20fichier?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 source/engine/mecanismViews/Barème.js | 77 +++++++++++++++++++++++++++
 source/engine/mecanisms.js            | 74 +------------------------
 2 files changed, 79 insertions(+), 72 deletions(-)
 create mode 100644 source/engine/mecanismViews/Barème.js

diff --git a/source/engine/mecanismViews/Barème.js b/source/engine/mecanismViews/Barème.js
new file mode 100644
index 000000000..25a451d4b
--- /dev/null
+++ b/source/engine/mecanismViews/Barème.js
@@ -0,0 +1,77 @@
+import React from 'react'
+import { Node } from './common'
+import { makeJsx } from '../evaluation'
+import { Trans } from 'react-i18next'
+
+export default function Barème(nodeValue, explanation) {
+	return (
+		<Node
+			classes="mecanism barème"
+			name="barème"
+			value={nodeValue}
+			child={
+				<ul className="properties">
+					<li key="assiette">
+						<span className="key">
+							<Trans>assiette</Trans>:{' '}
+						</span>
+						<span className="value">{makeJsx(explanation.assiette)}</span>
+					</li>
+					<li key="multiplicateur">
+						<span className="key">
+							<Trans>multiplicateur des tranches</Trans>:{' '}
+						</span>
+						<span className="value">
+							{makeJsx(explanation['multiplicateur des tranches'])}
+						</span>
+					</li>
+					<table className="tranches">
+						<thead>
+							<tr>
+								<th>
+									<Trans>Tranches de l&apos;assiette</Trans>
+								</th>
+								<th>
+									<Trans>Taux</Trans>
+								</th>
+							</tr>
+							{explanation.tranches.map(
+								({
+									'en-dessous de': maxOnly,
+									'au-dessus de': minOnly,
+									de: min,
+									à: max,
+									taux
+								}) => (
+									<tr
+										key={min || minOnly || 0}
+										style={{
+											fontWeight:
+												explanation.assiette.nodeValue >
+													explanation['multiplicateur des tranches'].nodeValue *
+														min &&
+												max &&
+												explanation.assiette.nodeValue <
+													explanation['multiplicateur des tranches'].nodeValue *
+														max
+													? ' bold'
+													: ''
+										}}>
+										<td key="tranche">
+											{maxOnly
+												? '< ' + maxOnly
+												: minOnly
+													? '> ' + minOnly
+													: `${min} - ${max}`}
+										</td>
+										<td key="taux"> {makeJsx(taux)} </td>
+									</tr>
+								)
+							)}
+						</thead>
+					</table>
+				</ul>
+			}
+		/>
+	)
+}
diff --git a/source/engine/mecanisms.js b/source/engine/mecanisms.js
index 2f9817f00..20dcbbc0e 100644
--- a/source/engine/mecanisms.js
+++ b/source/engine/mecanisms.js
@@ -51,6 +51,7 @@ import {
 import 'react-virtualized/styles.css'
 import Somme from './mecanismViews/Somme'
 import Allègement from './mecanismViews/Allègement'
+import Barème from './mecanismViews/Barème'
 import buildSelectionView from './mecanismViews/Selection'
 import uniroot from './uniroot'
 
@@ -762,80 +763,9 @@ export let mecanismScale = (recurse, k, v) => {
 		},
 		evaluate = evaluateObject(objectShape, effect)
 
-	let jsx = (nodeValue, explanation) => (
-		<Node
-			classes="mecanism barème"
-			name="barème"
-			value={nodeValue}
-			child={
-				<ul className="properties">
-					<li key="assiette">
-						<span className="key">
-							<Trans>assiette</Trans>:{' '}
-						</span>
-						<span className="value">{makeJsx(explanation.assiette)}</span>
-					</li>
-					<li key="multiplicateur">
-						<span className="key">
-							<Trans>multiplicateur des tranches</Trans>:{' '}
-						</span>
-						<span className="value">
-							{makeJsx(explanation['multiplicateur des tranches'])}
-						</span>
-					</li>
-					<table className="tranches">
-						<thead>
-							<tr>
-								<th>
-									<Trans>Tranches de l&apos;assiette</Trans>
-								</th>
-								<th>
-									<Trans>Taux</Trans>
-								</th>
-							</tr>
-							{explanation.tranches.map(
-								({
-									'en-dessous de': maxOnly,
-									'au-dessus de': minOnly,
-									de: min,
-									à: max,
-									taux
-								}) => (
-									<tr
-										key={min || minOnly || 0}
-										style={{
-											fontWeight:
-												explanation.assiette.nodeValue >
-													explanation['multiplicateur des tranches'].nodeValue *
-														min &&
-												max &&
-												explanation.assiette.nodeValue <
-													explanation['multiplicateur des tranches'].nodeValue *
-														max
-													? ' bold'
-													: ''
-										}}>
-										<td key="tranche">
-											{maxOnly
-												? '< ' + maxOnly
-												: minOnly
-													? '> ' + minOnly
-													: `${min} - ${max}`}
-										</td>
-										<td key="taux"> {makeJsx(taux)} </td>
-									</tr>
-								)
-							)}
-						</thead>
-					</table>
-				</ul>
-			}
-		/>
-	)
-
 	return {
 		evaluate,
-		jsx,
+		jsx: Barème,
 		explanation,
 		category: 'mecanism',
 		name: 'barème',