@inseefr/lunatic 0.3.1-experimental → 0.3.2-experimental

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@inseefr/lunatic",
-	"version": "0.3.1-experimental",
+	"version": "0.3.2-experimental",
 	"workersVersion": "0.2.1-experimental",
 	"description": "Library of questionnaire components",
 	"repository": {
@@ -50,7 +50,7 @@
 		"library"
 	],
 	"dependencies": {
-		"@inseefr/trevas": "^0.1.10",
+		"@inseefr/trevas": "^0.1.11",
 		"date-fns": "^2.25.0",
 		"lodash.camelcase": "^4.3.0",
 		"lodash.debounce": "^4.0.8",

package/src/components/component-wrapper/controls/validators/datepicker.js

@@ -13,21 +13,32 @@ const getMessage = (min, max, value) => {
 	if (!value) {
 		return undefined;
 	}
-	const dateFormat = 'dd/MM/yyyy';
+	const dateFormat = 'dd-MM-yyyy';
 	const date = new Date(value);
-	if (isNaN(Date.parse(min))) return undefined;
-	if (isNaN(Date.parse(max))) return undefined;
-	const minDate = new Date(min);
-	const maxDate = new Date(max);
-	const minDateAsString = minDate ? format(minDate, dateFormat) : '';
-	const maxDateAsString = maxDate ? format(maxDate, dateFormat) : '';
-	if (!min && isDef(max) && compareAsc(date, maxDate) > 0)
-		return `La date doit être inférieure au ${maxDateAsString}`;
-	else if (isDef(min) && !max && compareAsc(date, minDate) > 0)
-		return `La date doit être supérieure au ${minDateAsString}`;
-	else if (isDef(min) && isDef(max) && (date < minDate || date > maxDate))
-		return `La date doit être comprise entre le ${minDateAsString} et le ${maxDateAsString}`;
+	if (isDef(min) && isDef(max)) {
+		const minDate = new Date(min);
+		const maxDate = new Date(max);
+		if (date < minDate || date > maxDate) {
+			const minDateAsString = minDate ? format(minDate, dateFormat) : '';
+			const maxDateAsString = maxDate ? format(maxDate, dateFormat) : '';
+			return `La date doit être comprise entre le ${minDateAsString} et le ${maxDateAsString}`;
+		}
+	}
+	if (isDef(min)) {
+		const minDate = new Date(min);
+		if (compareAsc(date, minDate) < 0) {
+			const minDateAsString = minDate ? format(minDate, dateFormat) : '';
+			return `La date doit être supérieure au ${minDateAsString}`;
+		}
+	}
+	if (isDef(max)) {
+		const maxDate = new Date(max);
+		if (compareAsc(date, maxDate) > 0) {
+			const maxDateAsString = maxDate ? format(maxDate, dateFormat) : '';
+			return `La date doit être inférieure au ${maxDateAsString}`;
+		}
+	}
 	return undefined;
 };
 
-const isDef = (d) => d;
+const isDef = (d) => !isNaN(Date.parse(d));

package/src/components/component-wrapper/missing/component.js

@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import React, { useEffect, useState } from 'react';
 import KeyboardEventHandler from 'react-keyboard-event-handler';
 import Button from '../../button';
 import * as U from '../../../utils/lib';
@@ -21,10 +21,33 @@ const Missing = ({ Component, props }) => {
 		bindings,
 		shortcut,
 		componentType,
-		missingLoopIteration,
+		paginatedLoop,
 	} = props;
 
+	const missingResponseName = U.getResponseName(missingResponse);
 	const buttonState = U.getResponseByPreference(preferences)(missingResponse);
+	const [oldMissingValue] = useState(() => buttonState);
+
+	const [bindingsForMissingStrategy, setBindingsForMissingStrategy] =
+		useState(null);
+
+	/**
+	 * Sources split: use MissingStragy only if missingResponse has been updated
+	 * Ensures that missingResponse is persisted when the source has to be changed
+	 */
+	useEffect(() => {
+		const isSameValue = buttonState === oldMissingValue;
+		if (bindingsForMissingStrategy && !isSameValue) {
+			if (U.isFunction(missingStrategy))
+				missingStrategy(bindingsForMissingStrategy);
+			setBindingsForMissingStrategy(null);
+		}
+	}, [
+		bindingsForMissingStrategy,
+		missingStrategy,
+		buttonState,
+		oldMissingValue,
+	]);
 
 	useEffect(() => {
 		if (
@@ -36,7 +59,7 @@ const Missing = ({ Component, props }) => {
 				components,
 			})
 		) {
-			handleChange({ [U.getResponseName(missingResponse)]: null });
+			handleChange({ [missingResponseName]: null });
 		}
 	}, [
 		buttonState,
@@ -46,7 +69,7 @@ const Missing = ({ Component, props }) => {
 		responses,
 		cells,
 		components,
-		missingResponse,
+		missingResponseName,
 	]);
 
 	const getVarsToClean = () =>
@@ -62,10 +85,9 @@ const Missing = ({ Component, props }) => {
 		if (!isSameValue) {
 			const toClean = getVarsToClean();
 			if (Object.keys(toClean)) {
-				const { missingLoopIteration, currentPage } = props;
+				const { currentPage } = props;
 				const currentIterationIndex = getCurrentIterationIndex({
 					currentPage,
-					missingLoopIteration,
 				});
 				handleChange(toClean);
 				if (U.isFunction(missingStrategy)) {
@@ -81,20 +103,17 @@ const Missing = ({ Component, props }) => {
 						fullBindings,
 						toHandle,
 					});
-					missingStrategy(missingBindings);
+					setBindingsForMissingStrategy(missingBindings);
 				}
 			} else {
-				if (U.isFunction(missingStrategy)) missingStrategy(bindings);
+				if (U.isFunction(missingStrategy))
+					setBindingsForMissingStrategy(bindings);
 			}
-			handleChange({ [U.getResponseName(missingResponse)]: value });
+			handleChange({ [missingResponseName]: value });
 		}
 	};
 
-	if (
-		componentType === 'Loop' ||
-		missingLoopIteration ||
-		missingLoopIteration === 0
-	)
+	if ((componentType === 'Loop' && paginatedLoop) || !missingResponse)
 		return <Component {...props} />;
 
 	return (
@@ -111,6 +130,7 @@ const Missing = ({ Component, props }) => {
 					<Button
 						label="dont-know-button"
 						value={dontKnowButton}
+						disabled={!missingResponseName || missingResponseName?.length === 0}
 						onClick={onClick(U.DK)}
 					/>
 				</span>
@@ -122,11 +142,13 @@ const Missing = ({ Component, props }) => {
 					<Button
 						label="refused-button"
 						value={refusedButton}
+						disabled={!missingResponseName || missingResponseName?.length === 0}
 						onClick={onClick(U.RF)}
 					/>
 				</span>
 			</div>
 			{shortcut &&
+				missingResponseName?.length > 0 &&
 				missingShortcut &&
 				missingShortcut.dontKnow &&
 				missingShortcut.refused && (
@@ -147,11 +169,9 @@ const Missing = ({ Component, props }) => {
 export default Missing;
 
 // TODO: make it recursive for Loop into Loop
-const getCurrentIterationIndex = ({ currentPage, missingLoopIteration }) => {
+const getCurrentIterationIndex = ({ currentPage }) => {
 	const { currentIteration } = U.splitPage(currentPage, 1);
 	if (currentIteration) return currentIteration - 1;
-	if (missingLoopIteration || missingLoopIteration === 0)
-		return missingLoopIteration;
 	return null;
 };
 

package/src/components/datepicker/component.js

@@ -6,18 +6,14 @@ import { areEqual } from '../../utils/lib';
 import { getTypeControls } from '../component-wrapper/controls/validators';
 import './datepicker.scss';
 
-const Datepicker = (props) => {
-	const { max } = props;
-	return (
-		<InputDeclarationsWrapper
-			type="date"
-			roleType="datepicker"
-			{...props}
-			validators={[getTypeControls]}
-			max={max || '1979-12-31'}
-		/>
-	);
-};
+const Datepicker = (props) => (
+	<InputDeclarationsWrapper
+		type="date"
+		roleType="datepicker"
+		{...props}
+		validators={[getTypeControls]}
+	/>
+);
 
 Datepicker.defaultProps = {
 	validators: [],

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

@@ -173,8 +173,9 @@ const InputDeclarationsWrapper = ({
 							onChange={(e) => {
 								const v = e.target.value;
 								if (
-									([null, ''].includes(v) && value.length > 0) ||
-									([null, ''].includes(value) && v.length > 0)
+									(([null, ''].includes(v) && value.length > 0) ||
+										([null, ''].includes(value) && v.length > 0)) &&
+									componentType !== 'Datepicker'
 								) {
 									setValue(v);
 									handleChange({

package/src/components/loop-constructor/block/index.js

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

package/src/components/loop-constructor/index.js

@@ -1 +1 @@
-export { default as RosterForLoop } from './roster';
+export { default as RosterForLoop } from './roster';

package/src/components/loop-constructor/roster/index.js

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

package/src/components/loop-constructor/wrapper/body-component.js

@@ -100,11 +100,14 @@ const BodyComponent = ({
 						const Component = lunatic[componentType];
 						const localBindings =
 							U.buildBindingsForDeeperComponents(i)(bindings);
+						// ensure to have only N-1 missingResponse
+						const { missingResponse } = componentProps;
 						return (
 							<div className="block-component" key={`${id}-row-${i}`}>
 								<Component
 									{...otherProps}
 									{...componentProps}
+									missingResponse={missingResponse}
 									id={`${id}-row-${i}`}
 									label={label}
 									handleChange={(up) => {

package/src/components/loop-constructor/wrapper/build-components.js

@@ -1,33 +1,33 @@
-import * as C from '../../../constants';
-
-export const buildContentForLoopConstructor = ({ components, headers }) => {
-	// Start hack to find interation number
-	// Refactor if we have to handle complex components (vector, matrix)
-	const iterations =
-		components.find((c) => c.response).response.values[C.COLLECTED].length || 1;
-	// End
-	const initialArray = [...Array(iterations).keys()];
-	const uiComponents = components.map((comp) => {
-		const { response, ...other } = comp;
-		if (!response) return initialArray.map(() => comp);
-		// Handle reponses & cells components ?
-		const { name, values } = response;
-		return initialArray.map((rowNumber) => {
-			const newValues = Object.entries(values).reduce(
-				(acc, [key, value]) => ({
-					...acc,
-					[key]: value ? value[rowNumber] : null,
-				}),
-				{}
-			);
-			return {
-				...other,
-				response: { name, values: newValues },
-				rowNumber,
-			};
-		});
-	}, []);
-	const transpose = (m) => m[0].map((_, i) => m.map((x) => x[i]));
-	const rows = transpose(uiComponents);
-	return headers ? [headers, ...rows] : rows;
-};
+import * as C from '../../../constants';
+
+export const buildContentForLoopConstructor = ({ components, headers }) => {
+	// Start hack to find interation number
+	// Refactor if we have to handle complex components (vector, matrix)
+	const iterations =
+		components.find((c) => c.response).response.values[C.COLLECTED].length || 1;
+	// End
+	const initialArray = [...Array(iterations).keys()];
+	const uiComponents = components.map((comp) => {
+		const { response, ...other } = comp;
+		if (!response) return initialArray.map(() => comp);
+		// Handle reponses & cells components ?
+		const { name, values } = response;
+		return initialArray.map((rowNumber) => {
+			const newValues = Object.entries(values).reduce(
+				(acc, [key, value]) => ({
+					...acc,
+					[key]: value ? value[rowNumber] : null,
+				}),
+				{}
+			);
+			return {
+				...other,
+				response: { name, values: newValues },
+				rowNumber,
+			};
+		});
+	}, []);
+	const transpose = (m) => m[0].map((_, i) => m.map((x) => x[i]));
+	const rows = transpose(uiComponents);
+	return headers ? [headers, ...rows] : rows;
+};

package/src/components/loop-constructor/wrapper/index.js

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

package/src/components/suggester/components/panel/option-container.js

@@ -50,7 +50,7 @@ function OptionContainer({ children, index, selected }) {
 			className={classnames('lunatic-suggester-option', { selected })}
 			role="option"
 			aria-selected={selected}
-			onClick={onClick}
+			onMouseDown={onClick}
 			ref={ref}
 		>
 			{children}

package/src/components/suggester/suggester-wrapper.js

@@ -32,7 +32,7 @@ function SuggesterWrapper({
 	value,
 }) {
 	const [state, dispatch] = useReducer(reducer, INITIAL_STATE);
-	const { search, selectedIndex, options } = state;
+	const { search, selectedIndex, options, expended } = state;
 
 	useEffect(
 		function () {
@@ -57,11 +57,11 @@ function SuggesterWrapper({
 
 	useEffect(
 		function () {
-			if (selectedIndex !== undefined) {
+			if (selectedIndex !== undefined && !expended) {
 				onSelect(options[selectedIndex], selectedIndex);
 			}
 		},
-		[selectedIndex, onSelect, options]
+		[selectedIndex, onSelect, options, expended]
 	);
 
 	useEffect(

package/src/components/table/table.js

@@ -24,6 +24,7 @@ const Table = ({
 	management,
 	numberAsTextfield,
 	logFunction,
+	...rest
 }) => {
 	const minLines = initLines
 		? Math.max(initLines.min, U.getRosterInitLines(cells))
@@ -79,6 +80,7 @@ const Table = ({
 												style={{ width }}
 											>
 												<Component
+													{...rest}
 													label={label || ' '}
 													handleChange={handleChange}
 													preferences={preferences}
@@ -88,7 +90,7 @@ const Table = ({
 													bindings={bindings}
 													{...componentProps}
 													zIndex={cells.length - i || 0}
-													numberAsTextfield
+													numberAsTextfield={numberAsTextfield}
 													logFunction={logFunction}
 													shortcut={false}
 												/>

package/src/stories/loop-constructor/README.md

@@ -1,27 +1,27 @@
-# LoopConstructor component
-
-`RosterForLoop` is a LoopConstructor component.
-
-## Props
-
-|      Props      |  Type  | Default value | Required | Description                           |
-| :-------------: | :----: | :-----------: | :------: | ------------------------------------- |
-|       id        | string |       -       |    ✓     | Id of the table                       |
-|      label      | string |      ""       |          | Label of the table                    |
-| preferences \*  | array  | ["COLLECTED"] |          | Preferences to manage table response  |
-|    cells \*     | array  |      []       |          | Table cells                           |
-|  handleChange   |  func  |       -       |    ✓     | Handler of the table                  |
-|      lines      | object |      {}       |          | Min and max lines for evolutive table |
-| declarations \* | array  |      []       |          | Declarations of the table             |
-|    features     | array  |      [ ]      |          | Component features for labels         |
-|    bindings     | object |      [ ]      |          | Questionnaire bindings                |
-| positioning \*  | string |   "DEFAULT"   |          | Cell options positioning              |
-|   addBtnLabel   | string | "Add a line"  |          | Label of the button to add lines      |
-|     hideBtn     |  bool  |     false     |          | Hide the add button                   |
-|   management    |  bool  |     false     |          | Management mode of the table          |
-|      style      | object |      {}       |          | Style of the table                    |
-
-- `preferences` props has to be an ordered array of `COLLECTED`, `FORCED` or `EDITED`
-- `cells` props has to be an array of array's components
-- `positioning` props has to be one of `DEFAULT`, `HORIZONTAL` or `VERTICAL`
-- `declarations` are documented in the `Declarations` component
+# LoopConstructor component
+
+`RosterForLoop` is a LoopConstructor component.
+
+## Props
+
+|      Props      |  Type  | Default value | Required | Description                           |
+| :-------------: | :----: | :-----------: | :------: | ------------------------------------- |
+|       id        | string |       -       |    ✓     | Id of the table                       |
+|      label      | string |      ""       |          | Label of the table                    |
+| preferences \*  | array  | ["COLLECTED"] |          | Preferences to manage table response  |
+|    cells \*     | array  |      []       |          | Table cells                           |
+|  handleChange   |  func  |       -       |    ✓     | Handler of the table                  |
+|      lines      | object |      {}       |          | Min and max lines for evolutive table |
+| declarations \* | array  |      []       |          | Declarations of the table             |
+|    features     | array  |      [ ]      |          | Component features for labels         |
+|    bindings     | object |      [ ]      |          | Questionnaire bindings                |
+| positioning \*  | string |   "DEFAULT"   |          | Cell options positioning              |
+|   addBtnLabel   | string | "Add a line"  |          | Label of the button to add lines      |
+|     hideBtn     |  bool  |     false     |          | Hide the add button                   |
+|   management    |  bool  |     false     |          | Management mode of the table          |
+|      style      | object |      {}       |          | Style of the table                    |
+
+- `preferences` props has to be an ordered array of `COLLECTED`, `FORCED` or `EDITED`
+- `cells` props has to be an array of array's components
+- `positioning` props has to be one of `DEFAULT`, `HORIZONTAL` or `VERTICAL`
+- `declarations` are documented in the `Declarations` component

package/src/stories/loop-constructor/data-input-forced.json

@@ -1,64 +1,64 @@
-{
-	"components": [
-		{
-			"id": "nn",
-			"componentType": "InputNumber",
-			"mandatory": false,
-			"min": 1,
-			"max": 4,
-			"decimals": 0,
-			"label": "Loop Num",
-			"response": {
-				"name": "NUM"
-			}
-		},
-		{
-			"id": "idLoop",
-			"label": "boucle individu",
-			"componentType": "Loop",
-			"iterations": "NUM",
-			"conditionFilter": { "value": "true" },
-			"loopDependencies": ["NUM"],
-			"bindingDependencies": ["PRENOM", "NUM"],
-			"components": [
-				{
-					"id": "k3ym6x16",
-					"label": "Prénom :",
-					"componentType": "Input",
-					"conditionFilter": { "value": "true" },
-					"mandatory": false,
-					"bindingDependencies": ["PRENOM"],
-					"response": {
-						"name": "PRENOM"
-					}
-				}
-			]
-		}
-	],
-	"variables": [
-		{
-			"variableType": "COLLECTED",
-			"name": "NUM",
-			"componentRef": "nn",
-			"values": {
-				"PREVIOUS": null,
-				"COLLECTED": "2",
-				"FORCED": null,
-				"EDITED": null,
-				"INPUTED": null
-			}
-		},
-		{
-			"variableType": "COLLECTED",
-			"name": "PRENOM",
-			"componentRef": "idLoop",
-			"values": {
-				"PREVIOUS": [null],
-				"COLLECTED": ["Mauro", "Marco"],
-				"FORCED": [null],
-				"EDITED": [null],
-				"INPUTED": [null]
-			}
-		}
-	]
-}
+{
+	"components": [
+		{
+			"id": "nn",
+			"componentType": "InputNumber",
+			"mandatory": false,
+			"min": 1,
+			"max": 4,
+			"decimals": 0,
+			"label": "Loop Num",
+			"response": {
+				"name": "NUM"
+			}
+		},
+		{
+			"id": "idLoop",
+			"label": "boucle individu",
+			"componentType": "Loop",
+			"iterations": "NUM",
+			"conditionFilter": { "value": "true" },
+			"loopDependencies": ["NUM"],
+			"bindingDependencies": ["PRENOM", "NUM"],
+			"components": [
+				{
+					"id": "k3ym6x16",
+					"label": "Prénom :",
+					"componentType": "Input",
+					"conditionFilter": { "value": "true" },
+					"mandatory": false,
+					"bindingDependencies": ["PRENOM"],
+					"response": {
+						"name": "PRENOM"
+					}
+				}
+			]
+		}
+	],
+	"variables": [
+		{
+			"variableType": "COLLECTED",
+			"name": "NUM",
+			"componentRef": "nn",
+			"values": {
+				"PREVIOUS": null,
+				"COLLECTED": "2",
+				"FORCED": null,
+				"EDITED": null,
+				"INPUTED": null
+			}
+		},
+		{
+			"variableType": "COLLECTED",
+			"name": "PRENOM",
+			"componentRef": "idLoop",
+			"values": {
+				"PREVIOUS": [null],
+				"COLLECTED": ["Mauro", "Marco"],
+				"FORCED": [null],
+				"EDITED": [null],
+				"INPUTED": [null]
+			}
+		}
+	]
+}