Nouveau composant saisie salaire (3)

source/components/conversation/Input.js

@@ -4,7 +4,6 @@ import PropTypes from 'prop-types'
 import { FormDecorator } from './FormDecorator'
 import classnames from 'classnames'
 import { toPairs } from 'ramda'
-import { Field } from 'redux-form'
 import SendButton from './SendButton'
 
 @FormDecorator('input')
@@ -33,7 +32,6 @@ export default class Input extends Component {
 
 		return (
 			<span>
-				<div className="inputPrefix">{this.renderInversions()}</div>
 				<div className="answer">
 					<input
 						ref={el => {

source/components/conversation/InversionInput.js

@@ -5,20 +5,43 @@ import HoverDecorator from '../HoverDecorator'
 import Explicable from './Explicable'
 import { Field, formValueSelector } from 'redux-form'
 import './InversionInput.css'
-import Input from './Input'
+import { Input } from './Input'
 import { connect } from 'react-redux'
 import { path } from 'ramda'
+import { change } from 'redux-form'
 
-@FormDecorator('inversionInput')
+@connect(
+	state => ({
+		inputInversions: formValueSelector('conversation')(state, 'inversions')
+	}),
+	dispatch => ({
+		clearPreviousInversionValue: field =>
+			dispatch(change('conversation', field, ''))
+	})
+)
 export default class InversionInput extends Component {
-	componentDidMount() {
-		let { dottedName, inversion, setFormValue } = this.props
-		// initialize the form field of renderinversions
-		setFormValue(inversion.inversions[0].dottedName, 'inversions.' + dottedName)
+	componentWillReceiveProps(newProps) {
+		let newInversion = getActiveInversion(newProps),
+			inversion = getActiveInversion(this.props)
+
+		if (newInversion !== inversion)
+			this.props.clearPreviousInversionValue(inversion)
 	}
 	render() {
-		let { dottedName, inversion, setFormValue } = this.props
+		let fieldName = getActiveInversion(this.props)
 
+		return <Fields {...{ ...this.props, fieldName }} />
+	}
+}
+
+let getActiveInversion = ({ inputInversions, dottedName }) =>
+	(inputInversions && path(dottedName.split('.'), inputInversions)) ||
+	dottedName
+
+@FormDecorator('inversionInput')
+class Fields extends Component {
+	render() {
+		let { dottedName, inversion, fieldName } = this.props
 		if (inversion.inversions.length === 1)
 			return (
 				<span>
@@ -40,29 +63,13 @@ export default class InversionInput extends Component {
 						{title || name}
 					</label>
 				))}
-				<InversionInputComponent />
+				<Input
+					{...{
+						...this.props,
+						suggestions: dottedName === fieldName && this.props.suggestions
+					}}
+				/>
 			</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/components/conversation/conversation.css

@@ -303,18 +303,6 @@
 	outline: none;
 }
 
-.step .inputPrefix {
-	margin: 0 1em;
-	font-weight: 600;
-	margin-bottom: 1em;
-	display: flex;
-	justify-content: flex-end;
-}
-
-.inputPrefix select {
-	font-size: 120%;
-}
-
 .step .inputSuggestions {
 	font-style: italic;
 	float: right;

source/engine/generateQuestions.js

@@ -174,6 +174,8 @@ export let getInputComponent = ({ unfolded }) => (
 			<InversionInput
 				{...{
 					...commonProps,
+					valueType: formValueTypes[rule.format],
+					suggestions: rule.suggestions,
 					inversion
 				}}
 			/>