Chargement à la demande de la vue de gros tableaux

source/engine/mecanismViews/Selection.js

@@ -0,0 +1,69 @@
+import React, { Component } from 'react'
+import { findIndex, path, values } from 'ramda'
+import taux_versement_transport from 'Règles/taux-versement-transport.json'
+import { Node } from './common'
+
+let indexOf = explanation =>
+	explanation.nodeValue
+		? findIndex(
+				x => x['nomLaposte'] == explanation.nodeValue,
+				taux_versement_transport
+			)
+		: 0
+let indexOffset = 8
+
+export default dataTargetName => ({ nodeValue, explanation }) => (
+	<Node
+		classes="mecanism"
+		name="sélection"
+		value={nodeValue}
+		child={
+			<BigTable explanation={explanation} dataTargetName={dataTargetName} />
+		}
+	/>
+)
+
+class BigTable extends Component {
+	state = {
+		ready: false
+	}
+	componentDidMount() {
+		import('react-virtualized').then(module => {
+			this.rv = module
+			this.setState({ ready: true })
+		})
+	}
+	render() {
+		if (!this.state.ready) return null
+		let { explanation, dataTargetName } = this.props
+		let { Table, Column } = this.rv
+		return (
+			<Table
+				width={300}
+				height={300}
+				headerHeight={20}
+				rowHeight={30}
+				rowCount={taux_versement_transport.length}
+				scrollToIndex={indexOf(explanation) + indexOffset}
+				rowStyle={({ index }) =>
+					index == indexOf(explanation) ? { fontWeight: 'bold' } : {}
+				}
+				rowGetter={({ index }) => {
+					// transformation de données un peu crade du fichier taux.json qui gagnerait à être un CSV
+					let line = taux_versement_transport[index],
+						getLastTaux = dataTargetName => {
+							let lastTaux = values(path([dataTargetName, 'taux'], line))
+							return (lastTaux && lastTaux.length && lastTaux[0]) || 0
+						}
+					return {
+						nom: line['nomLaposte'],
+						taux: getLastTaux(dataTargetName)
+					}
+				}}
+			>
+				<Column label="Nom de commune" dataKey="nom" width={200} />
+				<Column width={100} label={'Taux ' + dataTargetName} dataKey="taux" />
+			</Table>
+		)
+	}
+}

source/engine/mecanisms.js

@@ -27,9 +27,7 @@ import {
 	subtract,
 	values,
 	sortBy,
-	last,
-	findIndex,
-	path
+	last
 } from 'ramda'
 import React from 'react'
 import { anyNull, val } from './traverse-common-functions'
@@ -51,9 +49,8 @@ import {
 } from './rules'
 
 import 'react-virtualized/styles.css'
-import { Table, Column } from 'react-virtualized'
-import taux_versement_transport from 'Règles/taux-versement-transport.json'
 import Somme from './mecanismViews/Somme'
+import buildSelectionView from './mecanismViews/Selection'
 import uniroot from './uniroot'
 
 let constantNode = constant => ({
@@ -912,55 +909,14 @@ export let mecanismSelection = (recurse, k, v) => {
 		return rewriteNode(node, nodeValue, explanation, collectMissing)
 	}
 
-	let indexOf = explanation =>
-		explanation.nodeValue
-			? findIndex(
-					x => x['nomLaposte'] == explanation.nodeValue,
-					taux_versement_transport
-				)
-			: 0
-	let indexOffset = 8
-
-	let jsx = (nodeValue, explanation) => (
-		<Node
-			classes="mecanism"
-			name="sélection"
-			value={nodeValue}
-			child={
-				<Table
-					width={300}
-					height={300}
-					headerHeight={20}
-					rowHeight={30}
-					rowCount={taux_versement_transport.length}
-					scrollToIndex={indexOf(explanation) + indexOffset}
-					rowStyle={({ index }) =>
-						index == indexOf(explanation) ? { fontWeight: 'bold' } : {}
-					}
-					rowGetter={({ index }) => {
-						// transformation de données un peu crade du fichier taux.json qui gagnerait à être un CSV
-						let line = taux_versement_transport[index],
-							getLastTaux = dataTargetName => {
-								let lastTaux = values(path([dataTargetName, 'taux'], line))
-								return (lastTaux && lastTaux.length && lastTaux[0]) || 0
-							}
-						return {
-							nom: line['nomLaposte'],
-							taux: getLastTaux(dataTargetName)
-						}
-					}}
-				>
-					<Column label="Nom de commune" dataKey="nom" width={200} />
-					<Column width={100} label={'Taux ' + dataTargetName} dataKey="taux" />
-				</Table>
-			}
-		/>
-	)
+	let SelectionView = buildSelectionView(dataTargetName)
 
 	return {
 		evaluate,
 		explanation,
-		jsx
+		jsx: (nodeValue, explanation) => (
+			<SelectionView nodeValue={nodeValue} explanation={explanation} />
+		)
 	}
 }