Nouveau composant saisie salaire (2)

source/components/Simulateur.js

@@ -32,7 +32,6 @@ import Explanation from 'Components/Explanation'
 		targetNames: state.targetNames,
 		done: state.done,
 		nextSteps: state.nextSteps,
-		inputInversions: formValueSelector('conversation')(state, 'inversions'),
 		analysis: state.analysis,
 		parsedRules: state.parsedRules
 	}),
@@ -81,7 +80,6 @@ export default class extends Component {
 				foldedSteps,
 				currentQuestion,
 				themeColours,
-				inputInversions,
 				done,
 				parsedRules
 			} = this.props,
@@ -111,14 +109,12 @@ export default class extends Component {
 							currentQuestion &&
 							getInputComponent({ unfolded: true })(
 								flatRules,
-								this.targetNames,
-								inputInversions
+								this.targetNames
 							)(currentQuestion),
 						foldedSteps: map(
 							getInputComponent({ unfolded: false })(
 								flatRules,
-								this.targetNames,
-								inputInversions
+								this.targetNames
 							),
 							foldedSteps
 						),
@@ -136,31 +132,4 @@ export default class extends Component {
 			</div>
 		)
 	}
-
-	buildStep = ({ unfolded, flatRules }) => (
-		situationGate,
-		targetNames,
-		inputInversions
-	) => question => {
-		let step = makeQuestion(flatRules, targetNames)(question)
-
-		let fieldName =
-				(inputInversions &&
-					path(step.dottedName.split('.'), inputInversions)) ||
-				step.dottedName,
-			fieldTitle = findRuleByDottedName(flatRules, fieldName).title
-
-		return (
-			<step.component
-				key={step.dottedName}
-				{...omit('component', step)}
-				unfolded={unfolded}
-				step={omit('component', step)}
-				situationGate={situationGate}
-				fieldName={fieldName}
-				fieldTitle={fieldTitle}
-				inverted={step.dottedName !== fieldName}
-			/>
-		)
-	}
 }

source/components/conversation/InversionInput.css

@@ -0,0 +1,6 @@
+.step.inversionInput #inversions label {
+	display: flex;
+	flex-wrap: wrap;
+	margin-bottom: 0.6em;
+	margin-left: 1em;
+}

source/components/conversation/InversionInput.js

@@ -3,7 +3,11 @@ import { FormDecorator } from './FormDecorator'
 import { answer, answered } from './userAnswerButtonStyle'
 import HoverDecorator from '../HoverDecorator'
 import Explicable from './Explicable'
-import { Field } from 'redux-form'
+import { Field, formValueSelector } from 'redux-form'
+import './InversionInput.css'
+import Input from './Input'
+import { connect } from 'react-redux'
+import { path } from 'ramda'
 
 @FormDecorator('inversionInput')
 export default class InversionInput extends Component {
@@ -36,7 +40,29 @@ export default class InversionInput extends Component {
 						{title || name}
 					</label>
 				))}
+				<InversionInputComponent />
 			</div>
 		)
 	}
 }
+
+@connect(state => ({
+	inputInversions: formValueSelector('conversation')(state, 'inversions')
+}))
+class InversionInputComponent extends Component {
+	render() {
+		let { inputInversions, dottedName } = this.props,
+			fieldName =
+				(inputInversions && path(dottedName.split('.'), inputInversions)) ||
+				dottedName
+		return (
+			<Input
+				{...{
+					fieldName
+				}}
+			/>
+		)
+	}
+}
+
+//TODO valueType: formValueTypes[rule.format],

source/engine/generateQuestions.js

@@ -102,8 +102,7 @@ let buildPossibleInversion = (rule, rules, targetNames) => {
 // That's not great, but we won't invest more time until we have more diverse input components and a better type system.
 export let getInputComponent = ({ unfolded }) => (
 	rules,
-	targetNames,
-	inputInversions
+	targetNames
 ) => dottedName => {
 	let rule = findRuleByDottedName(rules, dottedName)
 
@@ -162,10 +161,7 @@ export let getInputComponent = ({ unfolded }) => (
 	// Now the numeric input case
 
 	// Check for inversions
-	let fieldName =
-			(inputInversions && path(dottedName.split('.'), inputInversions)) ||
-			commonProps.fieldName,
-		inversion = buildPossibleInversion(rule, rules, targetNames)
+	let inversion = buildPossibleInversion(rule, rules, targetNames)
 
 	/* In the case of an inversion, display a RadioInput component.
 	On click on one of the radios, display the corresponding input.
@@ -178,12 +174,7 @@ export let getInputComponent = ({ unfolded }) => (
 			<InversionInput
 				{...{
 					...commonProps,
-					valueType: formValueTypes[rule.format],
-					suggestions: rule.suggestions,
-					inversion,
-					inverted: dottedName !== fieldName,
-					fieldTitle: findRuleByDottedName(rules, fieldName).title,
-					fieldName
+					inversion
 				}}
 			/>
 		)
@@ -193,8 +184,7 @@ export let getInputComponent = ({ unfolded }) => (
 			{...{
 				...commonProps,
 				valueType: formValueTypes[rule.format],
-				suggestions: rule.suggestions,
-				fieldName
+				suggestions: rule.suggestions
 			}}
 		/>
 	)