@inseefr/lunatic 0.3.1-experimental → 0.3.5-experimental

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@inseefr/lunatic",
-	"version": "0.3.1-experimental",
+	"version": "0.3.5-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.12",
 		"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

@@ -172,13 +172,25 @@ const InputDeclarationsWrapper = ({
 							aria-required={mandatory}
 							onChange={(e) => {
 								const v = e.target.value;
+								const valueToFire = v === '' ? null : v;
+								const valueToFireForArrows =
+									Number.parseFloat(v).toFixed(decimals);
 								if (
-									([null, ''].includes(v) && value.length > 0) ||
-									([null, ''].includes(value) && v.length > 0)
+									decimals &&
+									v !== '' &&
+									!new RegExp(`^[0-9]+(.[0-9]{1,${decimals}})?$`).test(
+										valueToFireForArrows
+									)
 								) {
-									setValue(v);
+									e.preventDefault();
+								} else if (
+									(([null, ''].includes(v) && value.length > 0) ||
+										([null, ''].includes(value) && v.length > 0)) &&
+									componentType !== 'Datepicker'
+								) {
+									setValue(valueToFire);
 									handleChange({
-										[U.getResponseName(response)]: v,
+										[U.getResponseName(response)]: valueToFire,
 									});
 								} else if (
 									// Chrome
@@ -186,11 +198,16 @@ const InputDeclarationsWrapper = ({
 										'Event' &&
 										roleType !== 'datepicker') ||
 									// FF hack: impossible to handle arrow events
-									(Math.abs(v - value) === 1 && isInputNumber)
+									(Math.abs(v - value).toFixed(decimals) !==
+										Number.parseFloat(`${Math.pow(10, -decimals)}`).toFixed(
+											decimals
+										) &&
+										!Number.parseInt(v, 10) &&
+										isInputNumber)
 								) {
-									setValue(v);
+									setValue(valueToFireForArrows);
 									handleChange({
-										[U.getResponseName(response)]: v,
+										[U.getResponseName(response)]: valueToFireForArrows,
 									});
 								} else {
 									if (isInputNumber) {
@@ -204,12 +221,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>

package/src/components/dropdown/commons/components/dropdown.js

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import Label from './label';
 import * as U from '../../../../utils/lib';
+import * as C from '../../../../constants';
 import * as CLEAN from '../cleaner-callbacks';
 import * as actions from '../actions';
 import DropdownField from './dropdown-field';
@@ -65,9 +66,19 @@ function Dropdown({
 	state,
 	dispatch,
 	refs,
+	logFunction,
 }) {
 	const { visible, focused, id, disabled } = state;
 
+	const createEventFocus = (focusIn = true) =>
+		U.createObjectEvent(
+			id,
+			C.INPUT_CATEGORY,
+			focusIn ? C.EVENT_FOCUS_IN : C.EVENT_FOCUS_OUT,
+			U.getResponseName(response),
+			valueFromProps
+		);
+
 	CLEAN.add(id, function () {
 		dispatch(actions.hidePanel());
 		dispatch(actions.setFocused(false));
@@ -130,6 +141,16 @@ function Dropdown({
 		[state, dispatch, onSelect]
 	);
 
+	// log info when focus change
+	useEffect(() => {
+		if (id && focused && U.isFunction(logFunction))
+			logFunction(createEventFocus());
+		if (id && !focused && U.isFunction(logFunction))
+			logFunction(createEventFocus(false));
+
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [focused, id]);
+
 	return (
 		<DropdownContainer
 			className={classnames(className, U.getLabelPositionClass(labelPosition), {

package/src/components/dropdown/dropdown-edit/dropdown-edit.js

@@ -37,6 +37,7 @@ const createOnSelect = (_, dispatch, onSelect) => (option) => {
  * @param {props}
  */
 function Dropdown({
+	id: initId,
 	widthAuto,
 	options = [],
 	onSelect,
@@ -52,10 +53,11 @@ function Dropdown({
 	disabled,
 	focused: initFocused,
 	DeclarationAfterLabel,
+	logFunction,
 }) {
 	const [state, dispatch] = useReducer(reducer, {
 		...initial,
-		id: `dropdown-${new Date().getMilliseconds()}`,
+		id: `dropdown-${initId || new Date().getMilliseconds()}`,
 		disabled,
 		focused: initFocused,
 	});
@@ -98,6 +100,7 @@ function Dropdown({
 			value={valueFromProps}
 			zIndex={zIndex}
 			management={management}
+			logFunction={logFunction}
 		>
 			<DeclarationAfterLabel />
 			<span

package/src/components/dropdown/dropdown-simple/dropdown.js

@@ -26,11 +26,12 @@ const Dropdown = ({
 	className,
 	zIndex,
 	DeclarationAfterLabel,
+	logFunction,
 }) => {
 	const containerEl = useRef();
 	const [state, dispatch] = useReducer(reducer, {
 		...initial,
-		id: `dropdown-${initId}-${new Date().getMilliseconds()}`,
+		id: `dropdown-${initId || new Date().getMilliseconds()}`,
 		disabled,
 		focused: initFocused,
 	});
@@ -59,6 +60,7 @@ const Dropdown = ({
 			onSelect={onSelect_}
 			value={value}
 			zIndex={zIndex}
+			logFunction={logFunction}
 		>
 			<DeclarationAfterLabel />
 			<span className={classnames('lunatic-dropdown-input', { focused })}>

package/src/components/input/input-number.js

@@ -6,11 +6,12 @@ import { areEqual } from '../../utils/lib';
 import { getTypeControls } from '../component-wrapper/controls/validators';
 import './input.scss';
 
-const InputNumber = ({ numberAsTextfield, ...props }) => (
+const InputNumber = ({ numberAsTextfield, decimals, ...props }) => (
 	<InputDeclarationsWrapper
 		type={numberAsTextfield ? 'text' : 'number'}
 		roleType="input"
 		{...props}
+		decimals={decimals || 0}
 		isInputNumber
 		numberAsTextfield
 		validators={[getTypeControls]}

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/components/suggester-content.js

@@ -1,42 +1,42 @@
-import React, { useRef, useCallback } from 'react';
-import classnames from 'classnames';
-import useDocumentAddEventListener from '../../../utils/to-expose/hooks/use-document-add-event-listener';
-
-function SuggesterContent({
-	children,
-	id,
-	focused,
-	onFocus,
-	onBlur,
-	onKeyDown,
-}) {
-	const ref = useRef();
-	const onClick = useCallback(
-		function (e) {
-			const { current } = ref;
-			if (!current.contains(e.target)) {
-				onBlur();
-			}
-		},
-		[ref, onBlur]
-	);
-
-	useDocumentAddEventListener('mousedown', onClick);
-
-	return (
-		<div
-			className={classnames('lunatic-suggester', {
-				focused,
-			})}
-			onFocus={onFocus}
-			onKeyDown={onKeyDown}
-			ref={ref}
-		>
-			<div className={classnames('lunatic-suggester-content', { focused })}>
-				{children}
-			</div>
-		</div>
-	);
-}
-
-export default SuggesterContent;
+import React, { useRef, useCallback } from 'react';
+import classnames from 'classnames';
+import useDocumentAddEventListener from '../../../utils/to-expose/hooks/use-document-add-event-listener';
+
+function SuggesterContent({
+	children,
+	id,
+	focused,
+	onFocus,
+	onBlur,
+	onKeyDown,
+}) {
+	const ref = useRef();
+	const onClick = useCallback(
+		function (e) {
+			const { current } = ref;
+			if (!current.contains(e.target) && focused) {
+				onBlur();
+			}
+		},
+		[ref, focused, onBlur]
+	);
+
+	useDocumentAddEventListener('mousedown', onClick);
+
+	return (
+		<div
+			className={classnames('lunatic-suggester', {
+				focused,
+			})}
+			onFocus={onFocus}
+			onKeyDown={onKeyDown}
+			ref={ref}
+		>
+			<div className={classnames('lunatic-suggester-content', { focused })}>
+				{children}
+			</div>
+		</div>
+	);
+}
+
+export default SuggesterContent;

package/src/components/suggester/components/suggester.js

@@ -1,4 +1,11 @@
-import React, { useCallback, useContext, useRef, useMemo } from 'react';
+import React, {
+	useCallback,
+	useContext,
+	useRef,
+	useMemo,
+	useEffect,
+	useState,
+} from 'react';
 import classnames from 'classnames';
 import { actions, SuggesterContext } from '../state-management';
 import SuggesterContent from './suggester-content';
@@ -6,6 +13,8 @@ import Selection from './selection';
 import Panel from './panel';
 import createOnKeyDownCallback from './create-on-keydown-callback';
 import Delete from './selection/delete';
+import * as C from '../../../constants';
+import * as U from '../../../utils/lib';
 import './suggester.scss';
 
 function Suggester({
@@ -16,23 +25,54 @@ function Suggester({
 	labelRenderer,
 	onSelect,
 	value,
+	focused: initFocused,
+	response,
+	logFunction,
 }) {
 	const inputEl = useRef();
 	const [state, dispatch] = useContext(SuggesterContext);
 	const { focused, id, messageError, search, disabled } = state;
 
+	const [init, setInit] = useState(false);
+
+	const createEventFocus = (focusIn = true) =>
+		U.createObjectEvent(
+			`suggester-${id}`,
+			C.INPUT_CATEGORY,
+			focusIn ? C.EVENT_FOCUS_IN : C.EVENT_FOCUS_OUT,
+			U.getResponseName(response),
+			value
+		);
+
 	const onFocus = useCallback(
 		function () {
-			if (!disabled) {
+			if (!focused && !disabled) {
 				if (inputEl.current !== document.activeElement) {
 				}
 				inputEl.current.focus();
 				dispatch(actions.onFocus());
 			}
 		},
-		[dispatch, disabled]
+		[disabled, dispatch, focused]
 	);
 
+	// Handle focused props of Component
+	useEffect(() => {
+		if (!init && id) {
+			if (initFocused && !focused) onFocus();
+			setInit(true);
+		}
+	}, [focused, init, initFocused, onFocus, id]);
+
+	// log info when focus change
+	useEffect(() => {
+		if (init && id && focused && U.isFunction(logFunction))
+			logFunction(createEventFocus());
+		if (init && id && !focused && U.isFunction(logFunction))
+			logFunction(createEventFocus(false));
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [focused, id, init]);
+
 	const onDelete = useCallback(
 		function () {
 			dispatch(actions.onDeleteSearch());