@inseefr/lunatic 0.2.0-experimental → 0.2.0-prisme

package/src/components/datepicker/component.js

@@ -1,11 +1,26 @@
 import React from 'react';
-import missingWrapper from '../missing-wrapper';
+import PropTypes from 'prop-types';
+import componentWrapper from '../component-wrapper';
 import { InputDeclarationsWrapper } from '../declarations/wrappers';
 import { areEqual } from '../../utils/lib';
+import { getTypeControls } from '../component-wrapper/controls/validators';
 import './datepicker.scss';
 
 const Datepicker = (props) => (
-	<InputDeclarationsWrapper type="date" roleType="datepicker" {...props} />
+	<InputDeclarationsWrapper
+		type="date"
+		roleType="datepicker"
+		{...props}
+		validators={[getTypeControls]}
+	/>
 );
 
-export default missingWrapper(React.memo(Datepicker, areEqual));
+Datepicker.defaultProps = {
+	validators: [],
+};
+
+Datepicker.propTypes = {
+	validators: PropTypes.arrayOf(PropTypes.func),
+};
+
+export default componentWrapper(React.memo(Datepicker, areEqual));

package/src/components/datepicker/datepicker.scss

@@ -1 +1 @@
-// see input.scss
+// see input.scss

package/src/components/datepicker/index.js

@@ -1 +1 @@
-export { default } from './component';
+export { default } from './component';

package/src/components/declarations/component.js

@@ -1,45 +1,46 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import * as U from '../../utils/lib';
-import { interpret } from '../../utils/to-expose';
-import './declarations.scss';
-
-const Declarations = ({
-	id,
-	type,
-	declarations,
-	features,
-	bindings,
-	logFunction,
-}) => {
-	const filtered = declarations.filter(({ position }) => position === type);
-	return (
-		<div id={`declarations-${id}-${type}`} className="declarations-lunatic">
-			{filtered.map(({ id: idD, label, declarationType }) => (
-				<div
-					key={`${idD}`}
-					className={`declaration-lunatic declaration-${declarationType.toLowerCase()}`}
-				>
-					{interpret(features, logFunction)(bindings)(label)}
-				</div>
-			))}
-		</div>
-	);
-};
-
-Declarations.defaultProps = {
-	type: 'AFTER_QUESTION_TEXT',
-	declarations: [],
-	features: [],
-	bindings: {},
-};
-
-Declarations.propTypes = {
-	id: PropTypes.string.isRequired,
-	type: PropTypes.string,
-	declarations: U.declarationsPropTypes,
-	features: PropTypes.arrayOf(PropTypes.string),
-	bindings: PropTypes.object,
-};
-
-export default Declarations;
+import React from 'react';
+import PropTypes from 'prop-types';
+import * as U from '../../utils/lib';
+import { interpret } from '../../utils/to-expose';
+import './declarations.scss';
+
+const Declarations = ({
+	id,
+	type,
+	declarations,
+	features,
+	bindings,
+	logFunction,
+}) => {
+	const filtered = declarations.filter(({ position }) => position === type);
+	if (filtered.length === 0) return null;
+	return (
+		<div id={`declarations-${id}-${type}`} className="declarations-lunatic">
+			{filtered.map(({ id: idD, label, declarationType }) => (
+				<div
+					key={`${idD}`}
+					className={`declaration-lunatic declaration-${declarationType.toLowerCase()}`}
+				>
+					{interpret(features, logFunction)(bindings)(label)}
+				</div>
+			))}
+		</div>
+	);
+};
+
+Declarations.defaultProps = {
+	type: 'AFTER_QUESTION_TEXT',
+	declarations: [],
+	features: [],
+	bindings: {},
+};
+
+Declarations.propTypes = {
+	id: PropTypes.string.isRequired,
+	type: PropTypes.string,
+	declarations: U.declarationsPropTypes,
+	features: PropTypes.arrayOf(PropTypes.string),
+	bindings: PropTypes.object,
+};
+
+export default Declarations;

package/src/components/declarations/declarations.scss

@@ -1,38 +1,40 @@
-.declarations-lunatic {
-	margin-bottom: 0.4rem;
-}
-
-.declaration-instruction {
-	font-style: italic;
-	font-size: 80%;
-}
-
-.declaration-comment {
-	font-size: 80%;
-}
-
-.declaration-statement {
-	font-style: italic;
-	font-size: 80%;
-	color: blue;
-}
-
-.declaration-help {
-	font-style: italic;
-	font-size: 80%;
-	color: green;
-}
-
-.declaration-warning {
-	font-style: bold;
-	font-size: 80%;
-	color: red;
-}
-
-.declaration-message_filter {
-	font-size: 100%;
-	color: rgb(73, 66, 66);
-	&:before {
-		content: '→ ';
-	}
-}
+.lunatic-component {
+	.declarations-lunatic {
+		margin-bottom: 0.4rem;
+	}
+
+	.declaration-instruction {
+		font-style: italic;
+		font-size: 80%;
+	}
+
+	.declaration-comment {
+		font-size: 80%;
+	}
+
+	.declaration-statement {
+		font-style: italic;
+		font-size: 80%;
+		color: blue;
+	}
+
+	.declaration-help {
+		font-style: italic;
+		font-size: 80%;
+		color: green;
+	}
+
+	.declaration-warning {
+		font-style: bold;
+		font-size: 80%;
+		color: red;
+	}
+
+	.declaration-message_filter {
+		font-size: 100%;
+		color: rgb(73, 66, 66);
+		&:before {
+			content: '→ ';
+		}
+	}
+}

package/src/components/declarations/index.js

@@ -1 +1 @@
-export { default } from './component';
+export { default } from './component';

package/src/components/declarations/wrappers/index.js

@@ -1,3 +1,3 @@
-export { default as InputDeclarationsWrapper } from './input-declarations-wrapper';
-export { default as ListDeclarationsWrapper } from './list-declarations-wrapper';
-export { default as SimpleDeclarationsWrapper } from './simple-declarations-wrapper';
+export { default as InputDeclarationsWrapper } from './input-declarations-wrapper';
+export { default as ListDeclarationsWrapper } from './list-declarations-wrapper';
+export { default as SimpleDeclarationsWrapper } from './simple-declarations-wrapper';

package/src/components/declarations/wrappers/input-declarations-wrapper.js

@@ -36,6 +36,8 @@ const InputDeclarationsWrapper = ({
 	isInputNumber,
 	numberAsTextfield,
 	logFunction,
+	componentType,
+	inputMode,
 }) => {
 	const inputRef = useRef();
 	const createEventFocus = (focusIn = true) =>
@@ -51,7 +53,9 @@ const InputDeclarationsWrapper = ({
 	);
 
 	const [messagesError, setMessagesError] = useState(
-		validators.map((v) => v(value)).filter((m) => m !== undefined)
+		validators
+			.map((v) => v({ min, max, value, preferences, componentType, id }))
+			.filter((m) => m)
 	);
 
 	useEffect(() => {
@@ -68,26 +72,42 @@ const InputDeclarationsWrapper = ({
 
 	const validate = (v) => {
 		setMessagesError(
-			validators.map((f) => f(v)).filter((m) => m !== undefined)
+			validators
+				.map((v) => v({ min, max, value: v, preferences, componentType, id }))
+				.filter((m) => m)
 		);
 	};
 
 	useEffect(() => {
-		if (isInputNumber) {
+		if (['InputNumber', 'Datepicker'].includes(componentType)) {
 			setMessagesError(
-				validators.map((v) => v(value)).filter((m) => m !== undefined)
+				validators
+					.map((v) => v({ min, max, value, preferences, componentType, id }))
+					.filter((m) => m)
 			);
 		}
-	}, [value, min, max, validators, isInputNumber]);
+	}, [
+		value,
+		min,
+		max,
+		validators,
+		isInputNumber,
+		id,
+		preferences,
+		componentType,
+	]);
 
 	const handleChangeOnBlur = () => {
-		const finalValue =
-			value && value.endsWith('.') ? value.replace('.', '') : value;
-		handleChange({
-			[U.getResponseName(response)]: finalValue,
-		});
-		if (U.isFunction(logFunction)) logFunction(createEventFocus(false));
-		if (value !== finalValue) setValue(finalValue);
+		const initValue = U.getResponseByPreference(preferences)(response);
+		if (value !== initValue) {
+			const finalValue =
+				value && value.endsWith('.') ? value.replace('.', '') : value;
+			handleChange({
+				[U.getResponseName(response)]: finalValue,
+			});
+			if (U.isFunction(logFunction)) logFunction(createEventFocus(false));
+			if (value !== finalValue) setValue(finalValue);
+		}
 	};
 
 	const handleFocusIn = () => {
@@ -140,7 +160,10 @@ const InputDeclarationsWrapper = ({
 							placeholder={placeholder}
 							autoComplete={autoComplete ? 'on' : 'off'}
 							className={`${roleType}-lunatic ${
-								isInputNumber && messagesError.length > 0 ? 'warning' : ''
+								(isInputNumber || roleType === 'datepicker') &&
+								messagesError.length > 0
+									? 'warning'
+									: ''
 							}`}
 							style={U.buildStyleObject(style)}
 							readOnly={readOnly}
@@ -148,18 +171,45 @@ const InputDeclarationsWrapper = ({
 							maxLength={maxLength || 524288}
 							required={mandatory}
 							aria-required={mandatory}
+							inputMode={numberAsTextfield ? inputMode : 'text'}
 							onChange={(e) => {
 								const v = e.target.value;
+								const valueToFire = v === '' ? null : v;
+								const valueToFireForArrows =
+									Number.parseFloat(v).toFixed(decimals);
 								if (
+									decimals &&
+									v !== '' &&
+									!new RegExp(`^[0-9]+(.[0-9]{1,${decimals}})?$`).test(
+										valueToFireForArrows
+									)
+								) {
+									e.preventDefault();
+								} else if (
+									(([null, ''].includes(v) && value.length > 0) ||
+										([null, ''].includes(value) && v.length > 0)) &&
+									componentType !== 'Datepicker'
+								) {
+									setValue(valueToFire);
+									handleChange({
+										[U.getResponseName(response)]: valueToFire,
+									});
+								} else if (
 									// Chrome
-									Object.getPrototypeOf(e.nativeEvent).constructor.name ===
-										'Event' ||
+									(Object.getPrototypeOf(e.nativeEvent).constructor.name ===
+										'Event' &&
+										roleType !== 'datepicker') ||
 									// FF hack: impossible to handle arrow events
-									Math.abs(v - value) === 1
+									(Math.abs(v - value).toFixed(decimals) !==
+										Number.parseFloat(`${Math.pow(10, -decimals)}`).toFixed(
+											decimals
+										) &&
+										isNaN(Number.parseInt(v, 10)) &&
+										isInputNumber)
 								) {
-									setValue(v);
+									setValue(valueToFireForArrows);
 									handleChange({
-										[U.getResponseName(response)]: v,
+										[U.getResponseName(response)]: valueToFireForArrows,
 									});
 								} else {
 									if (isInputNumber) {
@@ -173,12 +223,17 @@ const InputDeclarationsWrapper = ({
 											return null;
 										} else validate(v);
 									}
-									if (management) setValue(v);
-									else setValue(v === '' ? null : v);
+									if (management) setValue(valueToFire);
+									else setValue(valueToFire);
 								}
 							}}
 							onBlur={handleChangeOnBlur}
 							onFocus={handleFocusIn}
+							onKeyPress={(event) => {
+								if (decimals === 0 && !/[0-9]/.test(event.key)) {
+									event.preventDefault();
+								}
+							}}
 						/>
 						{isInputNumber && unit && unitPosition === 'AFTER' && (
 							<span className="unit">{unit}</span>
@@ -193,11 +248,11 @@ const InputDeclarationsWrapper = ({
 						</div>
 					)}
 				</div>
-				{isInputNumber && (
-					<div className="lunatic-input-number-errors">
-						{messagesError.map((m, i) => (
-							<div key={i} className="error">
-								{m}
+				{messagesError.length > 0 && (
+					<div className="lunatic-controls">
+						{messagesError.map(({ id, errorMessage }) => (
+							<div key={`control-${id}`} className="lunatic-control">
+								{errorMessage}
 							</div>
 						))}
 					</div>
@@ -232,6 +287,7 @@ InputDeclarationsWrapper.defaultProps = {
 	style: {},
 	validators: [],
 	isInputNumber: false,
+	inputMode: 'text',
 };
 
 InputDeclarationsWrapper.propTypes = {
@@ -266,6 +322,7 @@ InputDeclarationsWrapper.propTypes = {
 	]),
 	validators: PropTypes.arrayOf(PropTypes.func),
 	isInputNumber: PropTypes.bool,
+	inputMode: PropTypes.oneOf(['none', 'text', 'decimal', 'numeric']),
 };
 
 export default InputDeclarationsWrapper;