@inseefr/lunatic 0.3.0-experimental → 0.3.0-prisme

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

@@ -1,33 +1,44 @@
-import compareAsc from 'date-fns/compareAsc';
-import format from 'date-fns/format';
-
-export const minMaxValidatorDatepicker =
-	({ min, max, id }) =>
-	(value) => {
-		const errorMessage = getMessage(min, max, value);
-		if (errorMessage) return { id: `control-${id}`, errorMessage };
-		return null;
-	};
-
-const getMessage = (min, max, value) => {
-	if (!value) {
-		return undefined;
-	}
-	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}`;
-	return undefined;
-};
-
-const isDef = (d) => d;
+import compareAsc from 'date-fns/compareAsc';
+import format from 'date-fns/format';
+
+export const minMaxValidatorDatepicker =
+	({ min, max, id }) =>
+	(value) => {
+		const errorMessage = getMessage(min, max, value);
+		if (errorMessage) return { id: `control-${id}`, errorMessage };
+		return null;
+	};
+
+const getMessage = (min, max, value) => {
+	if (!value) {
+		return undefined;
+	}
+	const dateFormat = 'dd-MM-yyyy';
+	const date = new Date(value);
+	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) => !isNaN(Date.parse(d));

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

@@ -1,16 +1,16 @@
-import { minMaxValidatorInputNumber } from './input-number';
-import { minMaxValidatorDatepicker } from './datepicker';
-import * as U from '../../../../utils/lib';
-
-export const getTypeControls = (props) => {
-	const { min, max, value, response, preferences, componentType, id } = props;
-	const v =
-		value || value === null
-			? value
-			: U.getResponseByPreference(preferences)(response);
-	if (componentType === 'InputNumber')
-		return minMaxValidatorInputNumber({ id, min, max })(v);
-	if (componentType === 'Datepicker')
-		return minMaxValidatorDatepicker({ id, min, max })(v);
-	return null;
-};
+import { minMaxValidatorInputNumber } from './input-number';
+import { minMaxValidatorDatepicker } from './datepicker';
+import * as U from '../../../../utils/lib';
+
+export const getTypeControls = (props) => {
+	const { min, max, value, response, preferences, componentType, id } = props;
+	const v =
+		value || value === null
+			? value
+			: U.getResponseByPreference(preferences)(response);
+	if (componentType === 'InputNumber')
+		return minMaxValidatorInputNumber({ id, min, max })(v);
+	if (componentType === 'Datepicker')
+		return minMaxValidatorDatepicker({ id, min, max })(v);
+	return null;
+};

package/src/components/component-wrapper/controls/validators/input-number.js

@@ -1,23 +1,23 @@
-export const minMaxValidatorInputNumber =
-	({ min, max, id }) =>
-	(value) => {
-		const errorMessage = getMessage(min, max, value);
-		if (errorMessage) return { id: `control-${id}`, errorMessage };
-		return null;
-	};
-
-const getMessage = (min, max, value) => {
-	if (!value) {
-		return undefined;
-	}
-	const valueNumber = Number(value);
-	if (!min && isDef(max) && valueNumber > max)
-		return `La valeur doit être inférieure à ${max}`;
-	else if (isDef(min) && !max && valueNumber < min)
-		return `La valeur doit être supérieure à ${min}`;
-	else if (isDef(min) && isDef(max) && (valueNumber < min || valueNumber > max))
-		return `La valeur doit être comprise entre ${min} et ${max}`;
-	return undefined;
-};
-
-const isDef = (number) => number || number === 0;
+export const minMaxValidatorInputNumber =
+	({ min, max, id }) =>
+	(value) => {
+		const errorMessage = getMessage(min, max, value);
+		if (errorMessage) return { id: `control-${id}`, errorMessage };
+		return null;
+	};
+
+const getMessage = (min, max, value) => {
+	if (!value) {
+		return undefined;
+	}
+	const valueNumber = Number(value);
+	if (!min && isDef(max) && valueNumber > max)
+		return `La valeur doit être inférieure à ${max}`;
+	else if (isDef(min) && !max && valueNumber < min)
+		return `La valeur doit être supérieure à ${min}`;
+	else if (isDef(min) && isDef(max) && (valueNumber < min || valueNumber > max))
+		return `La valeur doit être comprise entre ${min} et ${max}`;
+	return undefined;
+};
+
+const isDef = (number) => number || number === 0;

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

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

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

@@ -1,180 +1,200 @@
-import React, { useEffect } from 'react';
-import KeyboardEventHandler from 'react-keyboard-event-handler';
-import Button from '../../button';
-import * as U from '../../../utils/lib';
-import './missing.scss';
-
-const Missing = ({ Component, props }) => {
-	const {
-		dontKnowButton = "Don't know",
-		refusedButton = 'Refused',
-		missingResponse,
-		handleChange,
-		preferences,
-		missingStrategy,
-		missingShortcut = { dontKnow: '', refused: '' },
-		response,
-		responses,
-		cells,
-		components,
-		savingType,
-		bindings,
-		shortcut,
-		componentType,
-		missingLoopIteration,
-	} = props;
-
-	const buttonState = U.getResponseByPreference(preferences)(missingResponse);
-
-	useEffect(() => {
-		if (
-			buttonState !== null &&
-			U.hasToCleanMissing(savingType)({
-				response,
-				responses,
-				cells,
-				components,
-			})
-		) {
-			handleChange({ [U.getResponseName(missingResponse)]: null });
-		}
-	}, [
-		buttonState,
-		handleChange,
-		savingType,
-		response,
-		responses,
-		cells,
-		components,
-		missingResponse,
-	]);
-
-	const getVarsToClean = () =>
-		U.getToClean(savingType)({
-			response,
-			responses,
-			cells,
-			components,
-		});
-
-	const onClick = (value) => () => {
-		const isSameValue = buttonState === value;
-		if (!isSameValue) {
-			const toClean = getVarsToClean();
-			if (Object.keys(toClean)) {
-				const { missingLoopIteration, currentPage } = props;
-				const currentIterationIndex = getCurrentIterationIndex({
-					currentPage,
-					missingLoopIteration,
-				});
-				handleChange(toClean);
-				if (U.isFunction(missingStrategy)) {
-					const { fullBindings } = props;
-					const toHandle = getVarsToHandle({
-						toClean,
-						fullBindings,
-						currentIterationIndex,
-					});
-					const missingBindings = getMissingBindings({
-						currentIterationIndex,
-						bindings,
-						fullBindings,
-						toHandle,
-					});
-					missingStrategy(missingBindings);
-				}
-			} else {
-				if (U.isFunction(missingStrategy)) missingStrategy(bindings);
-			}
-			handleChange({ [U.getResponseName(missingResponse)]: value });
-		}
-	};
-
-	if (
-		componentType === 'Loop' ||
-		missingLoopIteration ||
-		missingLoopIteration === 0
-	)
-		return <Component {...props} />;
-
-	return (
-		<div className="missing-wrapper">
-			<div className="missing-component">
-				<Component {...props} />
-			</div>
-			<div className="missing-buttons">
-				<span
-					className={`missing-button${
-						buttonState === U.DK ? '-active' : ''
-					} missing-button-dk${buttonState === U.DK ? '-active' : ''}`}
-				>
-					<Button
-						label="dont-know-button"
-						value={dontKnowButton}
-						onClick={onClick(U.DK)}
-					/>
-				</span>
-				<span
-					className={`missing-button${
-						buttonState === U.RF ? '-active' : ''
-					} missing-button-rf${buttonState === U.RF ? '-active' : ''}`}
-				>
-					<Button
-						label="refused-button"
-						value={refusedButton}
-						onClick={onClick(U.RF)}
-					/>
-				</span>
-			</div>
-			{shortcut &&
-				missingShortcut &&
-				missingShortcut.dontKnow &&
-				missingShortcut.refused && (
-					<KeyboardEventHandler
-						handleKeys={Object.values(missingShortcut)}
-						onKeyEvent={(key, e) => {
-							e.preventDefault();
-							if (key === missingShortcut.dontKnow) onClick(U.DK)();
-							if (key === missingShortcut.refused) onClick(U.RF)();
-						}}
-						handleFocusableElements
-					/>
-				)}
-		</div>
-	);
-};
-
-export default Missing;
-
-// TODO: make it recursive for Loop into Loop
-const getCurrentIterationIndex = ({ currentPage, missingLoopIteration }) => {
-	const { currentIteration } = U.splitPage(currentPage, 1);
-	if (currentIteration) return currentIteration - 1;
-	if (missingLoopIteration || missingLoopIteration === 0)
-		return missingLoopIteration;
-	return null;
-};
-
-// TODO: make it recursive for Loop into Loop
-const getVarsToHandle = ({ toClean, fullBindings, currentIterationIndex }) => {
-	if (currentIterationIndex || currentIterationIndex === 0) {
-		return Object.entries(toClean).reduce((acc, [name, value]) => {
-			const newValue = fullBindings[name].map((v, i) =>
-				i === currentIterationIndex ? value : v
-			);
-			return { ...acc, [name]: newValue };
-		}, {});
-	}
-	return toClean;
-};
-
-const getMissingBindings = ({
-	bindings,
-	fullBindings,
-	currentIterationIndex,
-	toHandle,
-}) => {
-	if (currentIterationIndex || currentIterationIndex === 0)
-		return { ...fullBindings, ...toHandle };
-	return { ...bindings, ...toHandle };
-};
+import React, { useEffect, useState } from 'react';
+import KeyboardEventHandler from 'react-keyboard-event-handler';
+import Button from '../../button';
+import * as U from '../../../utils/lib';
+import './missing.scss';
+
+const Missing = ({ Component, props }) => {
+	const {
+		dontKnowButton = "Don't know",
+		refusedButton = 'Refused',
+		missingResponse,
+		handleChange,
+		preferences,
+		missingStrategy,
+		missingShortcut = { dontKnow: '', refused: '' },
+		response,
+		responses,
+		cells,
+		components,
+		savingType,
+		bindings,
+		shortcut,
+		componentType,
+		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 (
+			buttonState !== null &&
+			U.hasToCleanMissing(savingType)({
+				response,
+				responses,
+				cells,
+				components,
+			})
+		) {
+			handleChange({ [missingResponseName]: null });
+		}
+	}, [
+		buttonState,
+		handleChange,
+		savingType,
+		response,
+		responses,
+		cells,
+		components,
+		missingResponseName,
+	]);
+
+	const getVarsToClean = () =>
+		U.getToClean(savingType)({
+			response,
+			responses,
+			cells,
+			components,
+		});
+
+	const onClick = (value) => () => {
+		const isSameValue = buttonState === value;
+		if (!isSameValue) {
+			const toClean = getVarsToClean();
+			if (Object.keys(toClean)) {
+				const { currentPage } = props;
+				const currentIterationIndex = getCurrentIterationIndex({
+					currentPage,
+				});
+				handleChange(toClean);
+				if (U.isFunction(missingStrategy)) {
+					const { fullBindings } = props;
+					const toHandle = getVarsToHandle({
+						toClean,
+						fullBindings,
+						currentIterationIndex,
+					});
+					const missingBindings = getMissingBindings({
+						currentIterationIndex,
+						bindings,
+						fullBindings,
+						toHandle,
+					});
+					setBindingsForMissingStrategy(missingBindings);
+				}
+			} else {
+				if (U.isFunction(missingStrategy))
+					setBindingsForMissingStrategy(bindings);
+			}
+			handleChange({ [missingResponseName]: value });
+		}
+	};
+
+	if ((componentType === 'Loop' && paginatedLoop) || !missingResponse)
+		return <Component {...props} />;
+
+	return (
+		<div className="missing-wrapper">
+			<div className="missing-component">
+				<Component {...props} />
+			</div>
+			<div className="missing-buttons">
+				<span
+					className={`missing-button${
+						buttonState === U.DK ? '-active' : ''
+					} missing-button-dk${buttonState === U.DK ? '-active' : ''}`}
+				>
+					<Button
+						label="dont-know-button"
+						value={dontKnowButton}
+						disabled={!missingResponseName || missingResponseName?.length === 0}
+						onClick={onClick(U.DK)}
+					/>
+				</span>
+				<span
+					className={`missing-button${
+						buttonState === U.RF ? '-active' : ''
+					} missing-button-rf${buttonState === U.RF ? '-active' : ''}`}
+				>
+					<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 && (
+					<KeyboardEventHandler
+						handleKeys={Object.values(missingShortcut)}
+						onKeyEvent={(key, e) => {
+							e.preventDefault();
+							if (key === missingShortcut.dontKnow) onClick(U.DK)();
+							if (key === missingShortcut.refused) onClick(U.RF)();
+						}}
+						handleFocusableElements
+					/>
+				)}
+		</div>
+	);
+};
+
+export default Missing;
+
+// TODO: make it recursive for Loop into Loop
+const getCurrentIterationIndex = ({ currentPage }) => {
+	const { currentIteration } = U.splitPage(currentPage, 1);
+	if (currentIteration) return currentIteration - 1;
+	return null;
+};
+
+// TODO: make it recursive for Loop into Loop
+const getVarsToHandle = ({ toClean, fullBindings, currentIterationIndex }) => {
+	if (currentIterationIndex || currentIterationIndex === 0) {
+		return Object.entries(toClean).reduce((acc, [name, value]) => {
+			const newValue = fullBindings[name].map((v, i) =>
+				i === currentIterationIndex ? value : v
+			);
+			return { ...acc, [name]: newValue };
+		}, {});
+	}
+	return toClean;
+};
+
+const getMissingBindings = ({
+	bindings,
+	fullBindings,
+	currentIterationIndex,
+	toHandle,
+}) => {
+	if (currentIterationIndex || currentIterationIndex === 0)
+		return { ...fullBindings, ...toHandle };
+	return { ...bindings, ...toHandle };
+};

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

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

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

@@ -1,32 +1,32 @@
-.lunatic-component {
-	.missing-wrapper {
-		.missing-buttons {
-			margin-top: 1em;
-			.button-lunatic {
-				width: 4em;
-				font-size: 1em;
-				font-weight: normal;
-			}
-			.missing-button {
-				.button-lunatic {
-					background-color: var(--color-very-very-light);
-					color: var(--color-primary-dark);
-					&:hover {
-						background-color: white;
-						color: var(--color-primary-main);
-					}
-				}
-			}
-			.missing-button-active {
-				.button-lunatic {
-					background-color: var(--color-primary-dark);
-					color: var(--color-very-very-light);
-					&:hover {
-						background-color: var(--color-primary-main);
-						color: white;
-					}
-				}
-			}
-		}
-	}
-}
+.lunatic-component {
+	.missing-wrapper {
+		.missing-buttons {
+			margin-top: 1em;
+			.button-lunatic {
+				width: 4em;
+				font-size: 1em;
+				font-weight: normal;
+			}
+			.missing-button {
+				.button-lunatic {
+					background-color: var(--color-very-very-light);
+					color: var(--color-primary-dark);
+					&:hover {
+						background-color: white;
+						color: var(--color-primary-main);
+					}
+				}
+			}
+			.missing-button-active {
+				.button-lunatic {
+					background-color: var(--color-primary-dark);
+					color: var(--color-very-very-light);
+					&:hover {
+						background-color: var(--color-primary-main);
+						color: white;
+					}
+				}
+			}
+		}
+	}
+}

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

@@ -1,23 +1,23 @@
-import React from 'react';
-import Missing from './missing';
-import Controls from './controls';
-
-const componentWrapper = (Component) => (props) => {
-	const { missing, controls, componentType } = props;
-	const hasC = hasControls(controls, componentType);
-	if (missing && !hasC) return <Missing Component={Component} props={props} />;
-	if (!missing && hasC) return <Controls Component={Component} props={props} />;
-	if (missing && hasC) {
-		const ControlComponent = () => (
-			<Controls Component={Component} props={props} />
-		);
-		return <Missing Component={ControlComponent} props={props} />;
-	}
-	return <Component {...props} />;
-};
-
-const hasControls = (controls, componentType) =>
-	(Array.isArray(controls) && controls.length > 0) ||
-	['InputNumber', 'Datepicker'].includes(componentType);
-
-export default componentWrapper;
+import React from 'react';
+import Missing from './missing';
+import Controls from './controls';
+
+const componentWrapper = (Component) => (props) => {
+	const { missing, controls, componentType } = props;
+	const hasC = hasControls(controls, componentType);
+	if (missing && !hasC) return <Missing Component={Component} props={props} />;
+	if (!missing && hasC) return <Controls Component={Component} props={props} />;
+	if (missing && hasC) {
+		const ControlComponent = () => (
+			<Controls Component={Component} props={props} />
+		);
+		return <Missing Component={ControlComponent} props={props} />;
+	}
+	return <Component {...props} />;
+};
+
+const hasControls = (controls, componentType) =>
+	(Array.isArray(controls) && controls.length > 0) ||
+	['InputNumber', 'Datepicker'].includes(componentType);
+
+export default componentWrapper;