@inseefr/lunatic 0.2.3-experimental → 0.2.3-prisme

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

@@ -0,0 +1,200 @@
+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

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

package/src/components/{missing-wrapper → 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

@@ -0,0 +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;

package/src/components/components.js

@@ -6,6 +6,7 @@ export { default as Declarations } from './declarations';
 export { default as Dropdown } from './dropdown';
 export * from './input';
 export { default as FilterDescription } from './filter-description';
+export { default as Modal } from './modal';
 export { default as ProgressBar } from './progress-bar';
 export { default as Radio } from './radio';
 export { default as Loop } from './loop';

package/src/components/datepicker/component.js

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

package/src/components/declarations/component.js

@@ -1,46 +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);
-	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;
+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,40 +1,40 @@
-.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: '→ ';
-		}
-	}
-}
+.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: '→ ';
+		}
+	}
+}