-
-
- {' '}
- {this.props.question}{' '}
- {!inversion && }
-
-
+ return (
+
+
+
+
+ {' '}
+ {this.props.question}{' '}
+ {!inversion && }
+
+
+
+ {defaultValue != null && (
+
{
+ setFormValue(
+ fieldName,
+ typeof defaultValue == 'object'
+ ? JSON.stringify(defaultValue)
+ : '' + defaultValue
+ )
+ submit('ignore')
+ }}
+ />
+ )}
+
- {defaultValue != null && (
-
{
- setFormValue(
- fieldName,
- typeof defaultValue == 'object'
- ? JSON.stringify(defaultValue)
- : '' + defaultValue
- )
- submit('ignore')
- }}
- />
- )}
-
-
- )
+ )
+ }
}
- }
+ )
diff --git a/source/components/conversation/IgnoreStepButton.js b/source/components/conversation/IgnoreStepButton.js
index fc0a4b134..74219ceb3 100644
--- a/source/components/conversation/IgnoreStepButton.js
+++ b/source/components/conversation/IgnoreStepButton.js
@@ -1,35 +1,41 @@
import HoverDecorator from 'Components/utils/HoverDecorator'
+import { compose } from 'ramda'
import React, { Component } from 'react'
-import { Trans, translate } from 'react-i18next'
+import { Trans, withI18n } from 'react-i18next'
import './IgnoreStepButton.css'
-@HoverDecorator
-@translate()
-export default class IgnoreStepButton extends Component {
- componentDidMount() {
- // removeEventListener will need the exact same function instance
- this.boundHandleKeyDown = this.handleKeyDown.bind(this)
+export default compose(
+ HoverDecorator,
+ withI18n()
+)(
+ class IgnoreStepButton extends Component {
+ componentDidMount() {
+ // removeEventListener will need the exact same function instance
+ this.boundHandleKeyDown = this.handleKeyDown.bind(this)
- window.addEventListener('keydown', this.boundHandleKeyDown)
+ window.addEventListener('keydown', this.boundHandleKeyDown)
+ }
+ handleKeyDown({ key }) {
+ if (key !== 'Escape') return
+ document.activeElement.blur()
+ this.props.action()
+ }
+ componentWillUnmount() {
+ window.removeEventListener('keydown', this.boundHandleKeyDown)
+ }
+ render() {
+ return (
+
+ )
+ }
}
- handleKeyDown({ key }) {
- if (key !== 'Escape') return
- document.activeElement.blur()
- this.props.action()
- }
- componentWillUnmount() {
- window.removeEventListener('keydown', this.boundHandleKeyDown)
- }
- render() {
- return (
-
- )
- }
-}
+)
diff --git a/source/components/conversation/Input.js b/source/components/conversation/Input.js
index b7ed80d53..7eb714355 100644
--- a/source/components/conversation/Input.js
+++ b/source/components/conversation/Input.js
@@ -1,66 +1,70 @@
import classnames from 'classnames'
import withColours from 'Components/utils/withColours'
+import { compose } from 'ramda'
import React, { Component } from 'react'
-import { translate } from 'react-i18next'
+import { withI18n } from 'react-i18next'
import { FormDecorator } from './FormDecorator'
import InputSuggestions from './InputSuggestions'
import SendButton from './SendButton'
-@FormDecorator('input')
-@translate()
-@withColours
-export default class Input extends Component {
- render() {
- let {
- input,
- dottedName,
- submit,
- valueType,
- meta: { dirty, error, active },
- t,
- colours
- } = this.props,
- answerSuffix = valueType.suffix,
- suffixed = answerSuffix != null,
- inputError = dirty && error,
- submitDisabled = !dirty || inputError
+export default compose(
+ FormDecorator('input'),
+ withI18n(),
+ withColours
+)(
+ class Input extends Component {
+ render() {
+ let {
+ input,
+ dottedName,
+ submit,
+ valueType,
+ meta: { dirty, error, active },
+ t,
+ colours
+ } = this.props,
+ answerSuffix = valueType.suffix,
+ suffixed = answerSuffix != null,
+ inputError = dirty && error,
+ submitDisabled = !dirty || inputError
- return (
-
-
- this.props.setFormValue('' + value)}
- onSecondClick={() => this.props.submit('suggestion')}
- />
- {inputError && {error}}
-
- )
+ {inputError &&
{error}}
+
+ )
+ }
}
-}
+)
diff --git a/source/components/conversation/InputSuggestions.js b/source/components/conversation/InputSuggestions.js
index 33c79acc8..774f1259d 100644
--- a/source/components/conversation/InputSuggestions.js
+++ b/source/components/conversation/InputSuggestions.js
@@ -1,49 +1,52 @@
import withColours from 'Components/utils/withColours'
-import { toPairs } from 'ramda'
+import { compose, toPairs } from 'ramda'
import React, { Component } from 'react'
-import { translate } from 'react-i18next'
+import { withI18n } from 'react-i18next'
import './InputSuggestions.css'
-@withColours
-@translate()
-export default class InputSuggestions extends Component {
- state = { suggestion: null }
- render() {
- let {
- suggestions,
- onSecondClick,
- onFirstClick,
- colouredBackground,
- colours,
- t
- } = this.props
+export default compose(
+ withColours,
+ withI18n()
+)(
+ class InputSuggestions extends Component {
+ state = { suggestion: null }
+ render() {
+ let {
+ suggestions,
+ onSecondClick,
+ onFirstClick,
+ colouredBackground,
+ colours,
+ t
+ } = this.props
- if (!suggestions) return null
- return (
-
- suggestions:
-
- {toPairs(suggestions).map(([text, value]) => (
- - {
- onFirstClick(value)
- if (this.state.suggestion !== value)
- this.setState({ suggestion: value })
- else onSecondClick && onSecondClick(value)
- }}
- style={{
- color: colouredBackground
- ? colours.textColour
- : colours.textColourOnWhite
- }}>
-
- {text}
-
-
- ))}
-
-
- )
+ if (!suggestions) return null
+ return (
+
+ suggestions:
+
+ {toPairs(suggestions).map(([text, value]) => (
+ - {
+ onFirstClick(value)
+ if (this.state.suggestion !== value)
+ this.setState({ suggestion: value })
+ else onSecondClick && onSecondClick(value)
+ }}
+ style={{
+ color: colouredBackground
+ ? colours.textColour
+ : colours.textColourOnWhite
+ }}>
+
+ {text}
+
+
+ ))}
+
+
+ )
+ }
}
-}
+)
diff --git a/source/components/conversation/Question.js b/source/components/conversation/Question.js
index 4fe52c87d..5d6b30f2f 100644
--- a/source/components/conversation/Question.js
+++ b/source/components/conversation/Question.js
@@ -1,13 +1,14 @@
import HoverDecorator from 'Components/utils/HoverDecorator'
import withColours from 'Components/utils/withColours'
-import { is } from 'ramda'
+import { compose, is } from 'ramda'
import React, { Component } from 'react'
-import { Trans, translate } from 'react-i18next'
+import { Trans, withI18n } from 'react-i18next'
import Explicable from './Explicable'
import { FormDecorator } from './FormDecorator'
import './Question.css'
import SendButton from './SendButton'
import { answer, answered } from './userAnswerButtonStyle'
+
/* Ceci est une saisie de type "radio" : l'utilisateur choisit une réponse dans une liste, ou une liste de listes.
Les données @choices sont un arbre de type:
- nom: motif CDD # La racine, unique, qui formera la Question. Ses enfants sont les choix possibles
@@ -26,87 +27,88 @@ import { answer, answered } from './userAnswerButtonStyle'
// FormDecorator permet de factoriser du code partagé par les différents types de saisie,
// dont Question est un example
-@FormDecorator('question')
-@translate()
-@withColours
-export default class Question extends Component {
- render() {
- let {
- choices,
- submit,
- colours,
- meta: { pristine }
- } = this.props
- let choiceElements = is(Array)(choices)
- ? this.renderBinaryQuestion()
- : this.renderChildren(choices)
- return (
- <>
- {choiceElements}
-
-
- )
- }
- renderBinaryQuestion() {
- let {
- input, // vient de redux-form
- submit,
- choices,
- setFormValue,
- colours
- } = this.props
-
- return (
-
- {choices.map(({ value, label }) => (
-
+ {choiceElements}
+
- ))}
-
- )
- }
- renderChildren(choices) {
- let {
+
+ )
+ }
+ renderBinaryQuestion() {
+ let {
input, // vient de redux-form
submit,
+ choices,
setFormValue,
colours
- } = this.props,
- { name } = input,
- // seront stockées ainsi dans le state :
- // [parent object path]: dotted name relative to parent
- relativeDottedName = radioDottedName =>
- radioDottedName.split(name + ' . ')[1]
+ } = this.props
- return (
-
- {choices.canGiveUp && (
- -
+ return (
+
+ {choices.map(({ value, label }) => (
-
- )}
- {choices.children &&
- choices.children.map(
- ({ name, title, dottedName, children }) =>
+ ))}
+
+ )
+ }
+ renderChildren(choices) {
+ let {
+ input, // vient de redux-form
+ submit,
+ setFormValue,
+ colours
+ } = this.props,
+ { name } = input,
+ // seront stockées ainsi dans le state :
+ // [parent object path]: dotted name relative to parent
+ relativeDottedName = radioDottedName =>
+ radioDottedName.split(name + ' . ')[1]
+
+ return (
+
+ {choices.canGiveUp && (
+ -
+
+
+ )}
+ {choices.children &&
+ choices.children.map(({ name, title, dottedName, children }) =>
children ? (
-
{title}
@@ -127,11 +129,12 @@ export default class Question extends Component {
/>
)
- )}
-
- )
+ )}
+
+ )
+ }
}
-}
+)
let RadioLabel = props => (
<>
@@ -140,32 +143,35 @@ let RadioLabel = props => (
)
-@HoverDecorator
-@translate()
-@withColours
-class RadioLabelContent extends Component {
- click = value => () => {
- if (this.props.input.value == value) this.props.submit('dblClick')
- }
- render() {
- let { value, label, input, hover, colours } = this.props,
- // value = when(is(Object), prop('value'))(choice),
- labelStyle = Object.assign(
- value === input.value || hover ? answered(colours) : answer(colours),
- value === '_' ? { fontWeight: 'bold' } : null
- )
+const RadioLabelContent = compose(
+ HoverDecorator,
+ withI18n(),
+ withColours
+)(
+ class RadioLabelContent extends Component {
+ click = value => () => {
+ if (this.props.input.value == value) this.props.submit('dblClick')
+ }
+ render() {
+ let { value, label, input, hover, colours } = this.props,
+ // value = when(is(Object), prop('value'))(choice),
+ labelStyle = Object.assign(
+ value === input.value || hover ? answered(colours) : answer(colours),
+ value === '_' ? { fontWeight: 'bold' } : null
+ )
- return (
-
- )
+ return (
+
+ )
+ }
}
-}
+)
diff --git a/source/components/conversation/RhetoricalQuestion.js b/source/components/conversation/RhetoricalQuestion.js
index fc4856100..a9322ff37 100644
--- a/source/components/conversation/RhetoricalQuestion.js
+++ b/source/components/conversation/RhetoricalQuestion.js
@@ -1,23 +1,24 @@
+import FormDecorator from 'Components/conversation/FormDecorator'
import React, { Component } from 'react'
-import { FormDecorator } from './FormDecorator'
import { answer } from './userAnswerButtonStyle'
-@FormDecorator('rhetorical-question')
-export default class RhetoricalQuestion extends Component {
- render() {
- let { input, submit, possibleChoice, themeColours } = this.props
+export default FormDecorator('rhetorical-question')(
+ class RhetoricalQuestion extends Component {
+ render() {
+ let { input, submit, possibleChoice, themeColours } = this.props
- if (!possibleChoice) return null // No action possible, don't render an answer
+ if (!possibleChoice) return null // No action possible, don't render an answer
- let { text, value } = possibleChoice
+ let { text, value } = possibleChoice
- return (
-
-
-
- )
+ return (
+
+
+
+ )
+ }
}
-}
+)
diff --git a/source/components/conversation/SendButton.js b/source/components/conversation/SendButton.js
index 9678c4663..2777cd890 100644
--- a/source/components/conversation/SendButton.js
+++ b/source/components/conversation/SendButton.js
@@ -1,51 +1,55 @@
import HoverDecorator from 'Components/utils/HoverDecorator'
import withColours from 'Components/utils/withColours'
+import { compose } from 'ramda'
import React, { Component } from 'react'
-import { Trans, translate } from 'react-i18next'
+import { Trans, withI18n } from 'react-i18next'
-@HoverDecorator
-@translate()
-@withColours
-export default class SendButton extends Component {
- getAction() {
- let { disabled, submit } = this.props
- return cause => (!disabled ? submit(cause) : null)
- }
- componentDidMount() {
- // removeEventListener will need the exact same function instance
- this.boundHandleKeyDown = this.handleKeyDown.bind(this)
+export default compose(
+ HoverDecorator,
+ withI18n(),
+ withColours
+)(
+ class SendButton extends Component {
+ getAction() {
+ let { disabled, submit } = this.props
+ return cause => (!disabled ? submit(cause) : null)
+ }
+ componentDidMount() {
+ // removeEventListener will need the exact same function instance
+ this.boundHandleKeyDown = this.handleKeyDown.bind(this)
- window.addEventListener('keydown', this.boundHandleKeyDown)
- }
- componentWillUnmount() {
- window.removeEventListener('keydown', this.boundHandleKeyDown)
- }
- handleKeyDown({ key }) {
- if (key !== 'Enter') return
- this.getAction()('enter')
- }
- render() {
- let { disabled, colours, hover } = this.props
- return (
-
-
-
- Entrée ↵
-
- )
+ )
+ }
}
-}
+)
diff --git a/source/components/conversation/TextArea.js b/source/components/conversation/TextArea.js
index b01903399..0b4acc8da 100644
--- a/source/components/conversation/TextArea.js
+++ b/source/components/conversation/TextArea.js
@@ -1,52 +1,57 @@
+import { compose } from 'ramda'
import React, { Component } from 'react'
-import { Trans, translate } from 'react-i18next'
+import { Trans, withI18n } from 'react-i18next'
import { FormDecorator } from './FormDecorator'
-@FormDecorator('text-area')
-@translate()
-export default class Input extends Component {
- render() {
- let {
- name,
- input,
- submit,
- attributes,
- meta: { touched, error },
- themeColours
- } = this.props,
- inputError = touched && error,
- sendButtonDisabled = !input.value || inputError
+export default compose(
+ FormDecorator('text-area'),
+ withI18n()
+)(
+ class Input extends Component {
+ render() {
+ let {
+ name,
+ input,
+ submit,
+ attributes,
+ meta: { touched, error },
+ themeColours
+ } = this.props,
+ inputError = touched && error,
+ sendButtonDisabled = !input.value || inputError
- return (
-
-
-