From a6d848e01daea0282a89052ddd83d449d003624a Mon Sep 17 00:00:00 2001 From: Maxime Quandalle Date: Wed, 6 May 2020 05:56:53 +0200 Subject: [PATCH] =?UTF-8?q?=F0=9F=94=A5=20Supprime=20FormDecorator?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../CurrencyInput/CurrencyInput.tsx | 1 - .../components/conversation/Conversation.tsx | 92 ++++++++++--------- .../source/components/conversation/Input.tsx | 60 ++++++------ .../components/conversation/RuleInput.tsx | 24 ++--- .../components/conversation/conversation.css | 2 +- 5 files changed, 94 insertions(+), 85 deletions(-) diff --git a/mon-entreprise/source/components/CurrencyInput/CurrencyInput.tsx b/mon-entreprise/source/components/CurrencyInput/CurrencyInput.tsx index 5ce7050e6..92b3c62cb 100644 --- a/mon-entreprise/source/components/CurrencyInput/CurrencyInput.tsx +++ b/mon-entreprise/source/components/CurrencyInput/CurrencyInput.tsx @@ -17,7 +17,6 @@ export default function CurrencyInput({ debounce: debounceTimeout, currencySymbol = '€', onChange, - onSubmit, language, className, ...forwardedProps diff --git a/mon-entreprise/source/components/conversation/Conversation.tsx b/mon-entreprise/source/components/conversation/Conversation.tsx index 4d3ff229b..3442774a5 100644 --- a/mon-entreprise/source/components/conversation/Conversation.tsx +++ b/mon-entreprise/source/components/conversation/Conversation.tsx @@ -1,10 +1,14 @@ -import { goToQuestion, validateStepWithValue } from 'Actions/actions' +import { + goToQuestion, + updateSituation, + validateStepWithValue +} from 'Actions/actions' import RuleInput from 'Components/conversation/RuleInput' import QuickLinks from 'Components/QuickLinks' import * as Animate from 'Components/ui/animate' import { EngineContext } from 'Components/utils/EngineContext' import { useNextQuestions } from 'Components/utils/useNextQuestion' -import { default as React, useContext, useEffect } from 'react' +import React, { useContext } from 'react' import emoji from 'react-easy-emoji' import { Trans } from 'react-i18next' import { useDispatch, useSelector } from 'react-redux' @@ -14,7 +18,7 @@ import { } from 'Selectors/simulationSelectors' import Aide from './Aide' import './conversation.css' -import FormDecorator from './FormDecorator' +import { ExplicableRule } from './Explicable' export type ConversationProps = { customEndMessages?: React.ReactNode @@ -37,26 +41,50 @@ export default function Conversation({ customEndMessages }: ConversationProps) { ) const goToPrevious = () => dispatch(goToQuestion(previousAnswers.slice(-1)[0])) - const handleKeyDown = ({ key }: React.KeyboardEvent) => { - if (['Escape'].includes(key)) { - setDefault() - } - } - const submit = source => + + const submit = (source: string) => { dispatch({ type: 'STEP_ACTION', name: 'fold', step: currentQuestion, source }) - const DecoratedInputComponent = FormDecorator(RuleInput) + } + + const setFormValue = value => { + dispatch(goToQuestion(currentQuestion)) + dispatch(updateSituation(currentQuestion, value)) + } + + const handleKeyDown = ({ key }: React.KeyboardEvent) => { + if (key === 'Escape') { + setDefault() + } else if (key === 'Enter') { + submit('enter') + } + } return currentQuestion ? ( <>
- +
+

+ {rules[currentQuestion].question}{' '} + +

+ +
+ +
+
{previousAnswers.length > 0 && ( @@ -70,7 +98,15 @@ export default function Conversation({ customEndMessages }: ConversationProps) { )} {currentQuestionIsAnswered ? ( - + ) : (
) } - -type SendButtonProps = { - onSubmit: (cause: string) => void -} - -function SendButton({ onSubmit }: SendButtonProps) { - useEffect(() => { - const handleKeyDown = ({ key }: KeyboardEvent) => { - if (key !== 'Enter') return - onSubmit('enter') - } - - window.addEventListener('keydown', handleKeyDown) - return () => { - window.removeEventListener('keydown', handleKeyDown) - } - }, [onSubmit]) - - return ( - - ) -} diff --git a/mon-entreprise/source/components/conversation/Input.tsx b/mon-entreprise/source/components/conversation/Input.tsx index 65a5da8ab..fa2c49b20 100644 --- a/mon-entreprise/source/components/conversation/Input.tsx +++ b/mon-entreprise/source/components/conversation/Input.tsx @@ -24,35 +24,37 @@ export default function Input({ return (
- { - onChange(value) - }} - onSecondClick={() => onSubmit?.('suggestion')} - unit={unit} - /> - { - debouncedOnChange(floatValue) - }} - value={value} - autoComplete="off" - /> - - {formatValue({ nodeValue: value ?? 0, unit }, { language }).replace( - /[\d,.]*/g, - '' - )} - +
+ { + onChange(value) + }} + onSecondClick={() => onSubmit?.('suggestion')} + unit={unit} + /> + { + debouncedOnChange(floatValue) + }} + value={value} + autoComplete="off" + /> + + {formatValue({ nodeValue: value ?? 0, unit }, { language }).replace( + /[\d,.]*/g, + '' + )} + +
) } diff --git a/mon-entreprise/source/components/conversation/RuleInput.tsx b/mon-entreprise/source/components/conversation/RuleInput.tsx index eb4fbb819..59b9cc31b 100644 --- a/mon-entreprise/source/components/conversation/RuleInput.tsx +++ b/mon-entreprise/source/components/conversation/RuleInput.tsx @@ -12,11 +12,6 @@ import { useTranslation } from 'react-i18next' import { DottedName } from 'Rules' import DateInput from './DateInput' -export const binaryOptionChoices = [ - { value: 'non', label: 'Non' }, - { value: 'oui', label: 'Oui' } -] - type Value = string | number | object | boolean | null export type RuleInputProps = { rules: ParsedRules @@ -27,7 +22,7 @@ export type RuleInputProps = { autoFocus?: boolean value?: Value className?: string - onSubmit?: (value: Value) => void + onSubmit?: (source: string) => void } // This function takes the unknown rule and finds which React component should @@ -55,7 +50,6 @@ export default function RuleInput({ dottedName, value, onChange, - onSubmit, autoFocus, className, title: rule.title, @@ -67,12 +61,13 @@ export default function RuleInput({ return ( ) } if (rule.API && rule.API === 'géo') - return + return if (rule.API) throw new Error("Le seul API implémenté est l'API géo") if (rule.dottedName == 'contrat salarié . ATMP . taux collectif ATMP') @@ -83,7 +78,7 @@ export default function RuleInput({ ) @@ -98,7 +93,14 @@ export default function RuleInput({ } /> ) : ( - + ) } @@ -125,7 +127,7 @@ export default function RuleInput({ return } - return + return } const getVariant = (rule: ParsedRule) => diff --git a/mon-entreprise/source/components/conversation/conversation.css b/mon-entreprise/source/components/conversation/conversation.css index ae8fca41a..e481e6ff4 100644 --- a/mon-entreprise/source/components/conversation/conversation.css +++ b/mon-entreprise/source/components/conversation/conversation.css @@ -71,7 +71,7 @@ display: flex; flex-wrap: wrap; justify-content: flex-end; - align-items: flex-end; + align-items: baseline; } .step .input > :first-child { text-align: right;