From 9ab3641dfa03cc095bb947a89e8c8197ad52c747 Mon Sep 17 00:00:00 2001 From: Maxime Quandalle Date: Wed, 6 May 2020 05:40:51 +0200 Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20Fusionne=20les=20boutons=20"Pass?= =?UTF-8?q?er=20=E2=86=92"=20et=20"Suivant=20=E2=86=92"?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/conversation/Conversation.tsx | 75 ++++++++++++++----- .../components/conversation/DateInput.tsx | 2 - .../source/components/conversation/Input.js | 64 ---------------- .../source/components/conversation/Input.tsx | 58 ++++++++++++++ .../components/conversation/Question.tsx | 2 - .../components/conversation/RuleInput.tsx | 10 +-- .../components/conversation/SendButton.tsx | 38 ---------- 7 files changed, 120 insertions(+), 129 deletions(-) delete mode 100644 mon-entreprise/source/components/conversation/Input.js create mode 100644 mon-entreprise/source/components/conversation/Input.tsx delete mode 100644 mon-entreprise/source/components/conversation/SendButton.tsx diff --git a/mon-entreprise/source/components/conversation/Conversation.tsx b/mon-entreprise/source/components/conversation/Conversation.tsx index 280c2c467..4d3ff229b 100644 --- a/mon-entreprise/source/components/conversation/Conversation.tsx +++ b/mon-entreprise/source/components/conversation/Conversation.tsx @@ -1,22 +1,20 @@ import { goToQuestion, validateStepWithValue } from 'Actions/actions' -import QuickLinks from 'Components/QuickLinks' import RuleInput from 'Components/conversation/RuleInput' -import React, { useContext, useEffect } from 'react' +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 emoji from 'react-easy-emoji' import { Trans } from 'react-i18next' import { useDispatch, useSelector } from 'react-redux' -import { RootState } from 'Reducers/rootReducer' -import * as Animate from 'Components/ui/animate' +import { + answeredQuestionsSelector, + situationSelector +} from 'Selectors/simulationSelectors' import Aide from './Aide' import './conversation.css' import FormDecorator from './FormDecorator' -import { useNextQuestions } from 'Components/utils/useNextQuestion' -import { EngineContext } from 'Components/utils/EngineContext' -import PreviousAnswers from 'sites/mon-entreprise.fr/pages/Créer/GuideStatut/PreviousAnswers' -import { - answeredQuestionsSelector, - currentQuestionSelector -} from 'Selectors/simulationSelectors' export type ConversationProps = { customEndMessages?: React.ReactNode @@ -26,6 +24,8 @@ export default function Conversation({ customEndMessages }: ConversationProps) { const dispatch = useDispatch() const rules = useContext(EngineContext).getParsedRules() const currentQuestion = useNextQuestions()[0] + const situation = useSelector(situationSelector) + const currentQuestionIsAnswered = !!situation[currentQuestion] const previousAnswers = useSelector(answeredQuestionsSelector) const setDefault = () => @@ -42,6 +42,13 @@ export default function Conversation({ customEndMessages }: ConversationProps) { setDefault() } } + const submit = source => + dispatch({ + type: 'STEP_ACTION', + name: 'fold', + step: currentQuestion, + source + }) const DecoratedInputComponent = FormDecorator(RuleInput) return currentQuestion ? ( @@ -62,12 +69,16 @@ export default function Conversation({ customEndMessages }: ConversationProps) { )} - + {currentQuestionIsAnswered ? ( + + ) : ( + + )} @@ -92,3 +103,33 @@ export default function Conversation({ customEndMessages }: ConversationProps) { ) } + +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/DateInput.tsx b/mon-entreprise/source/components/conversation/DateInput.tsx index 0cab419cc..97a65d6f9 100644 --- a/mon-entreprise/source/components/conversation/DateInput.tsx +++ b/mon-entreprise/source/components/conversation/DateInput.tsx @@ -3,7 +3,6 @@ import { Rule } from 'publicodes' import React, { useCallback, useMemo } from 'react' import styled from 'styled-components' import InputSuggestions from './InputSuggestions' -import SendButton from './SendButton' type DateInputProps = { onChange: RuleInputProps['onChange'] @@ -57,7 +56,6 @@ export default function DateInput({ onChange={handleDateChange} /> - {onSubmit && } ) } diff --git a/mon-entreprise/source/components/conversation/Input.js b/mon-entreprise/source/components/conversation/Input.js deleted file mode 100644 index b3d1099b0..000000000 --- a/mon-entreprise/source/components/conversation/Input.js +++ /dev/null @@ -1,64 +0,0 @@ -import { ThemeColorsContext } from 'Components/utils/colors' -import React, { useCallback, useContext } from 'react' -import { useTranslation } from 'react-i18next' -import NumberFormat from 'react-number-format' -import { debounce, currencyFormat } from '../../utils' -import InputSuggestions from './InputSuggestions' -import SendButton from './SendButton' -import { formatValue } from 'publicodes' - -// TODO: fusionner Input.js et CurrencyInput.js -export default function Input({ - suggestions, - onChange, - onSubmit, - dottedName, - value, - defaultValue, - autoFocus, - unit -}) { - const colors = useContext(ThemeColorsContext) - const debouncedOnChange = useCallback(debounce(750, onChange), []) - const { language } = useTranslation().i18n - const { thousandSeparator, decimalSeparator } = currencyFormat(language) - - return ( -
-
- { - onChange(value) - }} - onSecondClick={() => onSubmit && onSubmit('suggestion')} - unit={unit} - /> - { - debouncedOnChange(floatValue) - }} - value={value} - autoComplete="off" - /> - - {formatValue({ nodeValue: value ?? 0, unit }, { language }).replace( - /[\d,.]*/g, - '' - )} - -
- {onSubmit && ( - - )} -
- ) -} diff --git a/mon-entreprise/source/components/conversation/Input.tsx b/mon-entreprise/source/components/conversation/Input.tsx new file mode 100644 index 000000000..65a5da8ab --- /dev/null +++ b/mon-entreprise/source/components/conversation/Input.tsx @@ -0,0 +1,58 @@ +import { ThemeColorsContext } from 'Components/utils/colors' +import React, { useCallback, useContext } from 'react' +import { useTranslation } from 'react-i18next' +import NumberFormat from 'react-number-format' +import { debounce, currencyFormat } from '../../utils' +import InputSuggestions from './InputSuggestions' +import { formatValue } from 'publicodes' + +// TODO: fusionner Input.js et CurrencyInput.js +export default function Input({ + suggestions, + onChange, + onSubmit, + dottedName, + value, + defaultValue, + autoFocus, + unit +}) { + const colors = useContext(ThemeColorsContext) + const debouncedOnChange = useCallback(debounce(750, onChange), []) + const { language } = useTranslation().i18n + const { thousandSeparator, decimalSeparator } = currencyFormat(language) + + return ( +
+ { + 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/Question.tsx b/mon-entreprise/source/components/conversation/Question.tsx index 80d0d9eb7..f22affe80 100644 --- a/mon-entreprise/source/components/conversation/Question.tsx +++ b/mon-entreprise/source/components/conversation/Question.tsx @@ -5,7 +5,6 @@ import React, { useCallback, useContext } from 'react' import emoji from 'react-easy-emoji' import { Trans } from 'react-i18next' import { ExplicableRule } from './Explicable' -import SendButton from './SendButton' /* 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: @@ -115,7 +114,6 @@ export default function Question({ css="margin-top: 0.6rem; display: flex; align-items: center; flex-wrap: wrap;" > {choiceElements} - {onSubmit && } ) } diff --git a/mon-entreprise/source/components/conversation/RuleInput.tsx b/mon-entreprise/source/components/conversation/RuleInput.tsx index 589aa01ee..eb4fbb819 100644 --- a/mon-entreprise/source/components/conversation/RuleInput.tsx +++ b/mon-entreprise/source/components/conversation/RuleInput.tsx @@ -1,3 +1,7 @@ +import Input from 'Components/conversation/Input' +import Question from 'Components/conversation/Question' +import SelectGéo from 'Components/conversation/select/SelectGeo' +import SelectAtmp from 'Components/conversation/select/SelectTauxRisque' import CurrencyInput from 'Components/CurrencyInput/CurrencyInput' import PercentageField from 'Components/PercentageField' import ToggleSwitch from 'Components/ui/ToggleSwitch' @@ -7,11 +11,6 @@ import React, { useContext } from 'react' import { useTranslation } from 'react-i18next' import { DottedName } from 'Rules' import DateInput from './DateInput' -import Input from './Input' -import Question from './Question' -import SelectGéo from './select/SelectGeo' -import SelectAtmp from './select/SelectTauxRisque' -import SendButton from './SendButton' export const binaryOptionChoices = [ { value: 'non', label: 'Non' }, @@ -119,7 +118,6 @@ export default function RuleInput({ className="targetInput" onChange={evt => onChange(evt.target.value)} /> - {onSubmit && } ) } diff --git a/mon-entreprise/source/components/conversation/SendButton.tsx b/mon-entreprise/source/components/conversation/SendButton.tsx deleted file mode 100644 index e2c3cf6bc..000000000 --- a/mon-entreprise/source/components/conversation/SendButton.tsx +++ /dev/null @@ -1,38 +0,0 @@ -import React, { useCallback, useEffect } from 'react' -import { Trans } from 'react-i18next' - -type SendButtonProps = { - disabled: boolean - onSubmit: (cause: string) => void -} - -export default function SendButton({ disabled, onSubmit }: SendButtonProps) { - const getAction = useCallback(cause => (!disabled ? onSubmit(cause) : null), [ - disabled, - onSubmit - ]) - useEffect(() => { - const handleKeyDown = ({ key }: KeyboardEvent) => { - if (key !== 'Enter') return - getAction('enter') - } - - window.addEventListener('keydown', handleKeyDown) - return () => { - window.removeEventListener('keydown', handleKeyDown) - } - }, [getAction]) - - return ( - - ) -}