Input permanent pour les objectifs du simulateur

Nous alternions avant entre un <span /> et un <input /> selon le contexte Fixes #558
betagouv · Sep 17, 2019 · 8c9a401 · 8c9a401
1 parent dbbb67e
commit 8c9a401
Show file tree

Hide file tree

Showing 7 changed files with 143 additions and 109 deletions.
diff --git a/source/components/CurrencyInput/CurrencyInput.js b/source/components/CurrencyInput/CurrencyInput.js
@@ -24,6 +24,7 @@ let currencyFormat = language => ({
 export default function CurrencyInput({
 	value: valueProp = '',
 	debounce: debounceTimeout,
+	currencySymbol = '€',
 	onChange,
 	language,
 	className,
@@ -76,14 +77,17 @@ export default function CurrencyInput({
 		<div
 			className={classnames(className, 'currencyInput__container')}
 			{...(valueLength > 5 ? { style: { width } } : {})}>
-			{isCurrencyPrefixed && '€'}
+			{!currentValue && isCurrencyPrefixed && currencySymbol}
 			<NumberFormat
 				{...forwardedProps}
 				thousandSeparator={thousandSeparator}
 				decimalSeparator={decimalSeparator}
 				allowNegative={!valueHasChanged}
 				className="currencyInput__input"
 				inputMode="numeric"
+				prefix={
+					isCurrencyPrefixed && currencySymbol ? `${currencySymbol} ` : ''
+				}
 				onValueChange={({ value }) => {
 					setCurrentValue(value)
 					nextValue.current = value.toString().replace(/^-/, '')

diff --git a/source/components/CurrencyInput/CurrencyInput.test.js b/source/components/CurrencyInput/CurrencyInput.test.js
@@ -24,10 +24,18 @@ describe('CurrencyInput', () => {
 	})
 
 	it('should separate thousand groups', () => {
-		const input1 = getInput(<CurrencyInput value={1000} language="fr" />)
-		const input2 = getInput(<CurrencyInput value={1000} language="en" />)
-		const input3 = getInput(<CurrencyInput value={1000.5} language="en" />)
-		const input4 = getInput(<CurrencyInput value={1000000} language="en" />)
+		const input1 = getInput(
+			<CurrencyInput value={1000} language="fr" currencySymbol={''} />
+		)
+		const input2 = getInput(
+			<CurrencyInput value={1000} language="en" currencySymbol={''} />
+		)
+		const input3 = getInput(
+			<CurrencyInput value={1000.5} language="en" currencySymbol={''} />
+		)
+		const input4 = getInput(
+			<CurrencyInput value={1000000} language="en" currencySymbol={''} />
+		)
 		expect(input1.instance().value).to.equal('1 000')
 		expect(input2.instance().value).to.equal('1,000')
 		expect(input3.instance().value).to.equal('1,000.5')
@@ -90,7 +98,7 @@ describe('CurrencyInput', () => {
 		const clock = useFakeTimers()
 		let onChange = spy()
 		const input = getInput(
-			<CurrencyInput onChange={onChange} debounce={1000} />
+			<CurrencyInput onChange={onChange} debounce={1000} currencySymbol={''} />
 		)
 		input.simulate('change', { target: { value: '1', focus: () => {} } })
 		expect(onChange).not.to.have.been.called
@@ -106,12 +114,12 @@ describe('CurrencyInput', () => {
 	})
 
 	it('should initialize with value of the value prop', () => {
-		const input = getInput(<CurrencyInput value={1} />)
+		const input = getInput(<CurrencyInput value={1} language="fr" />)
 		expect(input.instance().value).to.equal('1')
 	})
 
 	it('should update its value if the value prop changes', () => {
-		const component = mount(<CurrencyInput value={1} />)
+		const component = mount(<CurrencyInput value={1} language="fr" />)
 		component.setProps({ value: 2 })
 		expect(component.find('input').instance().value).to.equal('2')
 	})

diff --git a/source/components/PeriodSwitch.js b/source/components/PeriodSwitch.js
@@ -29,7 +29,10 @@ export default function PeriodSwitch() {
 		},
 		[dispatch, rules, situation]
 	)
-	const periods = ['mois', 'année']
+	let periods = ['mois', 'année']
+	if (initialPeriod === 'année') {
+		periods.reverse()
+	}
 
 	return (
 		<span id="PeriodSwitch">

diff --git a/source/components/TargetSelection.css b/source/components/TargetSelection.css
@@ -106,35 +106,47 @@
 	text-decoration: none;
 }
 
-#targetSelection .editable:not(.attractClick) {
-	border: 2px solid rgba(0, 0, 0, 0);
-	border-bottom: 1px dashed #ffffff91;
-	min-width: 2.5em;
-	display: inline-block;
-}
 #targetSelection .targetInputOrValue > :not(.targetInput):not(.attractClick) {
 	margin: 0.2rem 0.6rem;
 }
 
-#targetSelection .attractClick.editable::before {
-	content: '€';
+#targetSelection input {
+	margin: 2.7px 0;
 }
 
-#targetSelection .attractClick,
 #targetSelection .targetInput {
 	width: 5.5em;
 	max-width: 7.5em;
-	display: inline-block;
 	text-align: right;
 	background: rgba(255, 255, 255, 0.2);
-	cursor: text;
 	padding: 0;
 	padding: 0.2rem 0.6rem;
 	border-radius: 0.3rem;
 	border: 2px solid;
 	font-size: inherit;
 }
 
+#targetSelection .editableTarget {
+	max-width: 7.5em;
+	display: inline-block;
+	text-align: right;
+	padding: 0 2px;
+	font-size: inherit;
+}
+
+#targetSelection .targetInputBottomBorder {
+	margin: 0;
+	padding: 0;
+	height: 0;
+	overflow: hidden;
+	position: relative;
+	top: -6px;
+}
+
+#targetSelection .editableTarget + .targetInputBottomBorder {
+	border-bottom: 1px dashed #ffffff91;
+}
+
 #targetSelection .unit {
 	margin-left: 0.4em;
 	font-size: 110%;