Décomposition du composant Somme

source/engine/mecanismViews/Somme.js

@@ -4,47 +4,46 @@ import {path} from 'ramda'
 import {Node, NodeValue} from './common'
 
 
-export default class Somme extends Component {
-	render() {
-		let {explanation, nodeValue} = this.props
-		return <Node
+export default ({explanation, nodeValue}) =>
+		<Node
 			classes="mecanism somme"
 			name="somme"
 			value={nodeValue}
-			child={
-				this.renderTable(explanation)
-			}
+			child={<Table explanation={explanation}/>}
 		/>
-	}
-	renderTable = explanation => (
-		<table>
-			<caption />
-			<tbody>
-				{explanation.map((v, i) => {
-					let rowFormula = path(["explanation", "formule", "explanation"], v),
-						isSomme = rowFormula && rowFormula.name == "somme"
 
-					return [
-						<tr key={v.name} className={isSomme ? "" : "noNest"}>
-							<td className="operator blank">{i != 0 && "+"}</td>
-							<td className="element">{makeJsx(v)}</td>
-							<td className="situationValue value">
-								<NodeValue data={v.nodeValue} />
-							</td>
-						</tr>,
-						...(isSomme
-							? [
-								<tr className="nested">
-									<td className="blank" />
-									<td className="nested">
-										{this.renderTable(rowFormula.explanation)}
-									</td>
-								</tr>
-							]
-							: [])
-					]
-				})}
-			</tbody>
-		</table>
-	)
+let Table = ({explanation}) => <table>
+	<caption />
+	<tbody>
+		{explanation.map((v, i) => <Row {...{v, i}}/>)}
+	</tbody>
+</table>
+
+
+class Row extends Component {
+	render() {
+		let {v, i} = this.props,
+			rowFormula = path(["explanation", "formule", "explanation"], v),
+			isSomme = rowFormula && rowFormula.name == "somme"
+
+		return [
+			<tr key={v.name} className={isSomme ? "" : "noNest"}>
+				<td className="operator blank">{i != 0 && "+"}</td>
+				<td className="element">{makeJsx(v)}</td>
+				<td className="situationValue value">
+					<NodeValue data={v.nodeValue} />
+				</td>
+			</tr>,
+			...(isSomme
+				? [
+					<tr className="nested">
+						<td className="blank" />
+						<td className="nested">
+							<Table explanation={rowFormula.explanation}/>
+						</td>
+					</tr>
+				]
+				: [])
+		]
+	}
 }