@inseefr/lunatic 0.2.61 → 0.3.1-experimental

package/src/components/loop/component.js

@@ -0,0 +1,170 @@
+import React, { useState, useEffect } from 'react';
+import * as lunatic from '../components';
+import { interpret } from '../../utils/to-expose';
+import * as U from '../../utils/lib';
+import './loop.scss';
+
+const Loop = ({
+	id,
+	label,
+	iterations,
+	components,
+	bindings,
+	handleChange,
+	loopDependencies,
+	maxPage,
+	pagination,
+	paginatedLoop,
+	currentPage,
+	depth: loopDepth,
+	...orchetratorProps
+}) => {
+	const [todos, setTodos] = useState([]);
+	const vectorialBindings = U.buildVectorialBindings(bindings);
+	const { features } = orchetratorProps;
+	const featuresWithoutMD = features.filter((f) => f !== 'MD');
+	const iterationNb =
+		parseInt(interpret(featuresWithoutMD)(vectorialBindings)(iterations), 10) ||
+		0;
+	const involvedVariables = U.getInvolvedVariables(components);
+
+	/**
+	 * Handle the increase in the number of iterations
+	 * Assume we only want to update if iterationNb changes
+	 */
+	useEffect(() => {
+		const toUpdate = involvedVariables.reduce((acc, { name: iv, depth }) => {
+			if (bindings[iv]) {
+				if (iterationNb === bindings[iv].length) return acc;
+				if (iterationNb <= bindings[iv].length)
+					return {
+						...acc,
+						[iv]: [...bindings[iv].splice(0, iterationNb)],
+					};
+				return {
+					...acc,
+					[iv]: [
+						...bindings[iv],
+						...new Array(iterationNb - bindings[iv].length).fill(
+							U.buildEmptyValue(depth)
+						),
+					],
+				};
+			}
+			return acc;
+		}, {});
+		if (Object.keys(toUpdate).length !== 0) handleChange(toUpdate);
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [iterationNb]);
+
+	useEffect(() => {
+		if (todos.length !== 0) {
+			const todosObj = todos.reduce((acc, { up, rowNumber }) => {
+				const entries = Object.entries(up);
+				if (entries.length === 0) return acc;
+				const toUpdate = entries.reduce((_, [key, value]) => {
+					const previousValue = bindings[key];
+					const newValue = previousValue.map((v, i) =>
+						i === rowNumber ? value : v
+					);
+					return { ..._, [key]: newValue };
+				}, {});
+
+				return { ...acc, ...toUpdate };
+			}, {});
+			handleChange(todosObj);
+			setTodos([]);
+		}
+	}, [bindings, todos, handleChange]);
+
+	const flattenComponents = U.buildLoopComponents(iterationNb)(components);
+
+	const { currentIteration, currentPageWithoutAnyIteration } = U.splitPage(
+		currentPage,
+		loopDepth
+	);
+
+	const localCache = {};
+
+	const loopComponents = flattenComponents.reduce(
+		(
+			acc,
+			{
+				componentType,
+				id: idC,
+				rowNumber,
+				conditionFilter,
+				page,
+				bindingDependencies = [],
+				missingResponse,
+				...rest
+			}
+		) => {
+			const loopVars = bindingDependencies.map((b) => {
+				if (bindings[b]) return [b, bindings[b]];
+				return [b, null];
+			});
+			const loopBindings = U.buildLoopBindings(rowNumber)(loopVars);
+
+			const loopMissingResponse =
+				U.buildLoopMissingResponse(rowNumber)(missingResponse);
+
+			if (!U.displayLoopQuestion(bindingDependencies)(loopBindings)) return acc;
+			const Component = lunatic[componentType];
+
+			const { bindingDependencies: filterDependencies = [], value = '' } =
+				conditionFilter;
+
+			const filterVars = filterDependencies.map((b) => {
+				if (bindings[b]) return [b, bindings[b]];
+				return [b, null];
+			});
+			const filterBindings = U.buildLoopBindings(rowNumber)(filterVars);
+			const set = () => {
+				const v = interpret(featuresWithoutMD)(filterBindings)(value);
+				localCache[`${value}-row-${rowNumber}`] = v;
+				return v;
+			};
+
+			const filterResult = localCache[value] || set();
+
+			if (
+				!filterResult ||
+				(pagination &&
+					(currentPageWithoutAnyIteration !== page ||
+						(paginatedLoop && rowNumber + 1 !== currentIteration)))
+			)
+				return acc;
+			return [
+				...acc,
+				<div key={`${idC}-loop-${rowNumber}`} className="loop-component">
+					<Component
+						{...orchetratorProps}
+						{...rest}
+						id={`${idC}-loop-${rowNumber}`}
+						handleChange={(up) => {
+							setTodos((t) => [...t, { up, rowNumber }]);
+						}}
+						bindings={loopBindings}
+						fullBindings={bindings}
+						bindingDependencies={bindingDependencies}
+						componentType={componentType}
+						pagination={pagination}
+						currentPage={currentPage}
+						conditionFilter={conditionFilter}
+						missingResponse={loopMissingResponse}
+					/>
+				</div>,
+			];
+		},
+		[]
+	);
+
+	return (
+		<div id={`loop-${id}`} className="lunatic-loop">
+			{loopComponents}
+		</div>
+	);
+};
+
+export default React.memo(Loop, U.areEqual);

package/src/components/loop/index.js

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

package/src/components/loop/loop.scss

@@ -0,0 +1,13 @@
+.lunatic-component {
+	.lunatic-loop {
+		.loop-label {
+			text-align: center;
+			font-weight: bold;
+			font-size: 2em;
+		}
+		.loop-component {
+			margin-top: 0.4em;
+			margin-bottom: 0.4em;
+		}
+	}
+}

package/src/components/loop/wrapper.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import Loop from './component';
+import BlockForLoop from '../loop-constructor/block';
+
+const LoopWrapper = (props) => {
+	const { iterations } = props;
+	if (iterations) {
+		return <Loop {...props} />;
+	}
+	return <BlockForLoop {...props} />;
+};
+
+// TODO: need componentWrapper?
+
+export default LoopWrapper;

package/src/components/loop-constructor/block/block.scss

@@ -0,0 +1,10 @@
+.lunatic-component {
+	.block-for-loop {
+		margin-top: 1em;
+		margin-bottom: 1em;
+		.block-component {
+			margin-top: 0.4em;
+			margin-bottom: 0.4em;
+		}
+	}
+}

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

@@ -0,0 +1,9 @@
+import React from 'react';
+import componentWrapper from '../../component-wrapper';
+import LoopConstructorWrapper from '../wrapper';
+import * as U from '../../../utils/lib';
+import './block.scss';
+
+const BlockForLoop = (props) => <LoopConstructorWrapper {...props} />;
+
+export default componentWrapper(React.memo(BlockForLoop), U.areEqual);

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

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

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

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

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

@@ -0,0 +1,8 @@
+import React from 'react';
+import componentWrapper from '../../component-wrapper';
+import LoopConstructorWrapper from '../wrapper';
+import * as U from '../../../utils/lib';
+
+const RosterForLoop = (props) => <LoopConstructorWrapper {...props} />;
+
+export default componentWrapper(React.memo(RosterForLoop), U.areEqual);

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

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

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

@@ -0,0 +1,131 @@
+import React from 'react';
+import * as lunatic from '../../components';
+import * as U from '../../../utils/lib';
+import { interpret } from '../../../utils/to-expose';
+import { buildContentForLoopConstructor } from './build-components';
+
+const BodyComponent = ({
+	componentType,
+	mainId,
+	headers,
+	components,
+	bindings,
+	width,
+	preferences,
+	positioning,
+	management,
+	features,
+	setTodo,
+	logFunction,
+	...otherProps
+}) => {
+	const uiComponents = buildContentForLoopConstructor({
+		components,
+		headers,
+	});
+	if (componentType === 'RosterForLoop')
+		return (
+			<table id={`table-${mainId}`} className="table-lunatic">
+				<tbody>
+					{uiComponents.map((row, i) => (
+						<tr key={`table-${mainId}-row${i}`}>
+							{row.map((component, j) => {
+								const {
+									label,
+									headerCell,
+									colspan,
+									rowspan,
+									componentType,
+									id,
+									rowNumber,
+									...componentProps
+								} = component;
+								const localBindings =
+									U.buildBindingsForDeeperComponents(rowNumber)(bindings);
+								if (componentType) {
+									const Component = lunatic[componentType];
+									return (
+										<td
+											key={`table-${mainId}-row-${i}-cell-${j}`}
+											style={{ width }}
+										>
+											<Component
+												{...otherProps}
+												{...componentProps}
+												id={`${id}-row-${i}`}
+												label={label}
+												handleChange={(up) => {
+													setTodo({ up, rowNumber });
+												}}
+												preferences={preferences}
+												positioning={positioning}
+												management={management}
+												features={features}
+												bindings={localBindings}
+												fullBindings={bindings}
+												missingLoopIteration={i}
+												zIndex={uiComponents.length - i || 0}
+												logFunction={logFunction}
+												focused={i === 0 && j === 0}
+											/>
+										</td>
+									);
+								}
+								const cellOptions = {
+									key: `table-${mainId}-row-${i}-cell-${j}`,
+									style: { width },
+									colSpan: colspan || 1,
+									rowSpan: rowspan || 1,
+								};
+								const interpretedLabel = interpret(
+									features,
+									logFunction
+								)(bindings)(label);
+								return headerCell ? (
+									<th {...cellOptions}>{interpretedLabel}</th>
+								) : (
+									<td {...cellOptions}>{interpretedLabel}</td>
+								);
+							})}
+						</tr>
+					))}
+				</tbody>
+			</table>
+		);
+	else
+		return (
+			<div className="block-for-loop">
+				{uiComponents.map((row, i) =>
+					row.map(({ componentType, id, label, ...componentProps }) => {
+						const Component = lunatic[componentType];
+						const localBindings =
+							U.buildBindingsForDeeperComponents(i)(bindings);
+						return (
+							<div className="block-component" key={`${id}-row-${i}`}>
+								<Component
+									{...otherProps}
+									{...componentProps}
+									id={`${id}-row-${i}`}
+									label={label}
+									handleChange={(up) => {
+										setTodo({ up, rowNumber: i });
+									}}
+									preferences={preferences}
+									positioning={positioning}
+									management={management}
+									features={features}
+									bindings={localBindings}
+									fullBindings={bindings}
+									missingLoopIteration={i}
+									logFunction={logFunction}
+									focused={i === 0}
+								/>
+							</div>
+						);
+					})
+				)}
+			</div>
+		);
+};
+
+export default BodyComponent;

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

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

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

@@ -0,0 +1,190 @@
+import React, { useState, useEffect } from 'react';
+import PropTypes from 'prop-types';
+import * as lunatic from '../../components';
+import BodyComponent from './body-component';
+import Declarations from '../../declarations';
+import * as U from '../../../utils/lib';
+import * as C from '../../../constants';
+import { interpret } from '../../../utils/to-expose';
+
+const LoopConstructorWrapper = ({
+	id: mainId,
+	label: mainLabel,
+	components,
+	handleChange,
+	lines,
+	declarations,
+	features,
+	bindings,
+	addBtnLabel,
+	hideBtn,
+	componentType,
+	...otherProps
+}) => {
+	const [todo, setTodo] = useState({});
+
+	const featuresWithoutMD = features.filter((f) => f !== 'MD');
+
+	const minLines = Math.max(
+		parseInt(interpret(featuresWithoutMD)(bindings)(lines.min), 10) || 1,
+		U.getLoopConstructorInitLines(components)
+	);
+	const maxLines = lines
+		? parseInt(interpret(featuresWithoutMD)(bindings)(lines.max), 10)
+		: undefined;
+
+	const width = `${100 / Math.max(...components.map((row) => row.length))}%`;
+	const Button = lunatic.Button;
+	const involvedVariables = U.getInvolvedVariables(components);
+
+	const values = components.reduce(
+		(acc, c) => `${acc}|${Object.values(c.response?.values || {}).join('|')}`,
+		''
+	);
+
+	// TEMP: Set static number of occurence if min = max
+	useEffect(() => {
+		if (lines.min && lines.min === lines.max) {
+			const min =
+				parseInt(interpret(featuresWithoutMD)(bindings)(lines.min), 10) || 1;
+			const up = involvedVariables.reduce((acc, { name }) => {
+				if (min === bindings[name].length) return acc;
+				if (min < bindings[name].length)
+					return { ...acc, [name]: [...bindings[name].slice(0, min)] };
+				const toAdd = [...Array(min - bindings[name].length).keys()].map(
+					() => null
+				);
+				return { ...acc, [name]: [...bindings[name], ...toAdd] };
+			}, {});
+			if (Object.keys(up).length !== 0) handleChange(up);
+		}
+		// Assume to only execute this side effect at mount
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [values]);
+
+	useEffect(() => {
+		if (Object.keys(todo).length !== 0) {
+			const { up, rowNumber } = todo;
+			const entries = Object.entries(up);
+			const toUpdate = entries.reduce((_, [key, value]) => {
+				const previousValue = bindings[key];
+				const newValue = previousValue.map((v, i) =>
+					i === rowNumber ? value : v
+				);
+				return { ..._, [key]: newValue };
+			}, {});
+			handleChange(toUpdate);
+			setTodo({});
+		}
+	}, [bindings, todo, handleChange]);
+
+	const addLine = () => {
+		const toHandle = involvedVariables.reduce(
+			(acc, { name: iv }) => ({
+				...acc,
+				[iv]: [...bindings[iv], null],
+			}),
+			{}
+		);
+		handleChange(toHandle);
+	};
+
+	const customBtnLabel =
+		(componentType === 'Loop' &&
+			interpret(features, otherProps?.logFunction)(bindings)(mainLabel)) ||
+		addBtnLabel;
+
+	return (
+		<>
+			<Declarations
+				id={mainId}
+				type={C.BEFORE_QUESTION_TEXT}
+				declarations={declarations}
+				features={features}
+				bindings={bindings}
+			/>
+			{componentType === 'RosterForLoop' && mainLabel && (
+				<label
+					htmlFor={`loops-constructor-${mainId}`}
+					id={`loops-constructor-label-${mainId}`}
+				>
+					{interpret(features, otherProps?.logFunction)(bindings)(mainLabel)}
+				</label>
+			)}
+			<Declarations
+				id={mainId}
+				type={C.AFTER_QUESTION_TEXT}
+				declarations={declarations}
+				features={features}
+				bindings={bindings}
+			/>
+			<BodyComponent
+				mainId={mainId}
+				componentType={componentType}
+				components={components}
+				bindings={bindings}
+				width={width}
+				features={features}
+				setTodo={setTodo}
+				{...otherProps}
+			/>
+			{!hideBtn && Number.isInteger(minLines) && minLines !== maxLines && (
+				<Button
+					label="addLine"
+					value={customBtnLabel}
+					// disabled={
+					// Number.isInteger(minLines) && minLines === maxLines
+					//||
+					// Want to enable addition depsite of empty lines?
+					// 	U.lastLoopChildLineIsEmpty(bindings)(involvedVariables)
+					// }
+					onClick={addLine}
+					id={mainId}
+					logFunction={otherProps?.logFunction}
+				/>
+			)}
+			<Declarations
+				id={mainId}
+				type={C.DETACHABLE}
+				declarations={declarations}
+				features={features}
+				bindings={bindings}
+			/>
+		</>
+	);
+};
+
+LoopConstructorWrapper.defaultProps = {
+	label: '',
+	preferences: ['COLLECTED'],
+	components: [],
+	lines: {},
+	positioning: 'DEFAULT',
+	declarations: [],
+	features: [],
+	bindings: {},
+	addBtnLabel: 'Add a line',
+	management: false,
+	hideBtn: false,
+	style: {},
+};
+
+LoopConstructorWrapper.propTypes = {
+	componentType: PropTypes.string.isRequired,
+	id: PropTypes.string.isRequired,
+	label: PropTypes.string,
+	preferences: PropTypes.arrayOf(U.valueTypePropTypes),
+	components: PropTypes.array,
+	handleChange: PropTypes.func.isRequired,
+	lines: U.linesPropTypes,
+	positioning: PropTypes.oneOf(['DEFAULT', 'HORIZONTAL', 'VERTICAL']),
+	declarations: U.declarationsPropTypes,
+	features: PropTypes.arrayOf(PropTypes.string),
+	bindings: PropTypes.object,
+	addBtnLabel: PropTypes.string,
+	hideBtn: PropTypes.bool,
+	management: PropTypes.bool,
+	style: PropTypes.object,
+};
+
+export default React.memo(LoopConstructorWrapper, U.areEqual);

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

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

package/src/components/modal/component.js

@@ -0,0 +1,36 @@
+import React from 'react';
+import Button from '../button';
+import './modal.scss';
+
+const Modal = ({ controls, cancelModal, validateModal }) => {
+	const disableValidation = controls
+		.map(({ criticality }) => criticality)
+		.includes('LOCK');
+	return (
+		<div className="lunatic-modal">
+			<div className="lunatic-modal-content">
+				<div className="lunatic-modal-text">
+					<ul>
+						{controls.map(({ id, errorMessage }) => (
+							<li key={id}>{errorMessage}</li>
+						))}
+					</ul>
+				</div>
+				<div className="lunatic-modal-buttons">
+					<div className="lunatic-modal-button">
+						<Button value="Corriger ma réponse" onClick={cancelModal} />
+					</div>
+					<div className="lunatic-modal-button">
+						<Button
+							value="Continuer"
+							onClick={validateModal}
+							disabled={disableValidation}
+						/>
+					</div>
+				</div>
+			</div>
+		</div>
+	);
+};
+
+export default Modal;

package/src/components/modal/index.js

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

package/src/components/modal/modal.scss

@@ -0,0 +1,33 @@
+.lunatic-modal {
+	position: fixed;
+	padding-top: 50px;
+	left: 0;
+	top: 0;
+	width: 100%;
+	height: 100%;
+	background-color: rgb(0, 0, 0);
+	background-color: rgba(0, 0, 0, 0.7);
+	z-index: 1000;
+	.lunatic-modal-content {
+		position: relative;
+		background-color: white;
+		padding: 20px;
+		margin: auto;
+		width: 50%;
+		-webkit-animation-name: animatetop;
+		-webkit-animation-duration: 0.4s;
+		animation-name: animatetop;
+		animation-duration: 0.4s;
+		.lunatic-modal-text {
+			font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
+			font-size: 1em;
+		}
+		.lunatic-modal-buttons {
+			display: flex;
+			justify-content: space-around;
+			.lunatic-modal-button {
+				font-size: 0.8em;
+			}
+		}
+	}
+}