@inseefr/lunatic 0.1.13-hackathon → 0.2.0-v2

package/src/components/loop/block-for-loop/block-for-loop.js

@@ -0,0 +1,93 @@
+import React, { useState, useCallback, useEffect } from 'react';
+import {
+	DeclarationsBeforeText,
+	DeclarationsAfterText,
+	DeclarationsDetachable,
+} from '../../declarations';
+import BlockForLoopOrchestrator from './block-for-loop-ochestrator';
+
+function BlockForLoop({
+	declarations,
+	lines,
+	components,
+	handleChange,
+	valueMap,
+	missing,
+	shortcut,
+	features,
+	preferences,
+	management,
+	executeExpression,
+	iterations,
+	custom,
+}) {
+	const [nbRows, setNbRows] = useState(-1);
+	const [min, setMin] = useState(undefined);
+	const [max, setMax] = useState(undefined);
+
+	useEffect(
+		function () {
+			if (lines) {
+				const { min, max } = lines;
+				if (min !== undefined && max !== undefined) {
+					setMin(min);
+					setMax(max);
+				}
+			}
+		},
+		[lines]
+	);
+
+	useEffect(
+		function () {
+			if (Number.parseInt(iterations)) {
+				setNbRows(iterations);
+			} else if (min && max) {
+				setNbRows(min);
+			}
+		},
+		[min, max, iterations]
+	);
+
+	const handleChangeLoop = useCallback(
+		function (response, value, args) {
+			handleChange(response, value, { ...args, loop: true, length: nbRows });
+		},
+		[handleChange, nbRows]
+	);
+
+	if (nbRows > 0) {
+		return (
+			<>
+				<DeclarationsBeforeText declarations={declarations} custom={custom} />
+				<DeclarationsAfterText declarations={declarations} custom={custom} />
+				<BlockForLoopOrchestrator
+					components={components}
+					handleChange={handleChangeLoop}
+					nbRows={nbRows}
+					valueMap={valueMap}
+					management={management}
+					missing={missing}
+					shortcut={shortcut}
+					features={features}
+					preferences={preferences}
+					executeExpression={executeExpression}
+					custom={custom}
+				/>
+				<DeclarationsDetachable declarations={declarations} custom={custom} />
+			</>
+		);
+	}
+	return null;
+}
+
+export default BlockForLoop;
+
+// handleChange={handleChange}
+// preferences={preferences}
+// savingType={savingType}
+// management={management}
+// features={features}
+// bindings={bindings}
+// missing={missing}
+// shortcut={shortcut}

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

@@ -0,0 +1 @@
+export { default } from './block-for-loop';

package/src/components/loop/block-for-loop/row.js

@@ -0,0 +1,62 @@
+import React, { useCallback } from 'react';
+import { OrchestratedComponent } from '../../commons';
+
+function RestValue() {
+	return <></>;
+}
+
+function Row({
+	components,
+	valueMap = {},
+	handleChange,
+	features,
+	missing,
+	shortcut,
+	management,
+	preferences,
+	rowIndex,
+	executeExpression,
+	custom,
+}) {
+	const handleChangeRow = useCallback(
+		function (response, value) {
+			handleChange(response, value, { index: rowIndex });
+		},
+		[handleChange, rowIndex]
+	);
+
+	return components.reduce(function (row, component) {
+		const { response, id } = component;
+		const idComponent = `${id}-${rowIndex + 1} `;
+
+		let value = undefined;
+		if (response) {
+			const { name } = response;
+			const valueArray = valueMap[name];
+			if (Array.isArray(valueArray)) {
+				value = valueArray[rowIndex] || '';
+			}
+		}
+
+		return [
+			...row,
+			<OrchestratedComponent
+				component={component}
+				key={idComponent}
+				handleChange={handleChangeRow}
+				features={features}
+				missing={missing}
+				shortcut={shortcut}
+				management={management}
+				value={value}
+				id={idComponent}
+				preferences={preferences}
+				iteration={rowIndex}
+				executeExpression={executeExpression}
+				custom={custom}
+			/>,
+		];
+	}, []);
+}
+
+export default Row;

package/src/components/loop/commons/index.js

@@ -0,0 +1,2 @@
+export { default as RowComponent } from './row-component';
+// export { default as createLoopOrchestrator } from './create-loop-orchestrator';

package/src/components/loop/commons/row-component.js

@@ -0,0 +1,52 @@
+import React, { useState, useEffect } from 'react';
+import * as lunatic from 'components';
+import { fillComponentExpressions } from '../../../use-lunatic/commons';
+
+function RowComponent({
+	id,
+	component,
+	handleChange,
+	features,
+	missing,
+	shortcut,
+	management,
+	preferences,
+	value,
+	iteration,
+	executeExpression,
+}) {
+	const { componentType } = component;
+	const [componentFilled, setComponentFilled] = useState(component);
+	const Component = lunatic[componentType];
+	const [filled, setFilled] = useState(false);
+
+	useEffect(
+		function () {
+			setComponentFilled(
+				fillComponentExpressions(component, { executeExpression, iteration })
+			);
+			setFilled(true);
+		},
+		[component, executeExpression, iteration]
+	);
+
+	if (componentType in lunatic && filled) {
+		return (
+			<Component
+				{...componentFilled}
+				id={id}
+				handleChange={handleChange}
+				preferences={preferences}
+				management={management}
+				features={features}
+				missing={missing}
+				shortcut={shortcut}
+				value={value}
+				executeExpression={executeExpression}
+			/>
+		);
+	}
+	return null;
+}
+
+export default RowComponent;

package/src/components/loop/index.js

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

package/src/components/loop/loop.js

@@ -0,0 +1,81 @@
+import React from 'react';
+import BlockForLoop from './block-for-loop';
+import RosterForLoop from './roster-for-loop';
+
+const LoopTypes = {
+	rosterForLoop: 'RosterForLoop',
+	blockForLoop: 'Loop',
+};
+
+function Loop(props) {
+	const {
+		declarations,
+		label,
+		lines,
+		iterations,
+		id,
+		components,
+		handleChange,
+		value,
+		executeExpression,
+		loopDependencies,
+		componentType,
+		headers,
+		shortcut,
+		management,
+		missing,
+		features,
+		preferences,
+		custom,
+	} = props;
+
+	switch (componentType) {
+		case LoopTypes.blockForLoop:
+			return (
+				<BlockForLoop
+					declarations={declarations}
+					label={label}
+					lines={lines}
+					iterations={iterations}
+					id={id}
+					components={components}
+					handleChange={handleChange}
+					valueMap={value}
+					management={management}
+					executeExpression={executeExpression}
+					loopDependencies={loopDependencies}
+					missing={missing}
+					shortcut={shortcut}
+					features={features}
+					preferences={preferences}
+					custom={custom}
+				/>
+			);
+		case LoopTypes.rosterForLoop:
+			return (
+				<RosterForLoop
+					declarations={declarations}
+					label={label}
+					lines={lines}
+					iterations={iterations}
+					id={id}
+					components={components}
+					handleChange={handleChange}
+					valueMap={value}
+					management={management}
+					executeExpression={executeExpression}
+					loopDependencies={loopDependencies}
+					missing={missing}
+					shortcut={shortcut}
+					features={features}
+					preferences={preferences}
+					headers={headers}
+					custom={custom}
+				/>
+			);
+		default:
+			return null;
+	}
+}
+
+export default Loop;

package/src/components/loop/roster-for-loop/add-row-button.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import { Button } from '../../../components';
+
+function AddRowButton({ onClick, disabled, children }) {
+	return (
+		<Button onClick={onClick} disabled={disabled}>
+			{children}
+		</Button>
+	);
+}
+
+export default AddRowButton;

package/src/components/loop/roster-for-loop/body.js

@@ -0,0 +1,46 @@
+import React, { useCallback } from 'react';
+import { Tbody } from '../../commons/components/html-table';
+import RosterForLoopOrchestrator from './roster-for-loop-orchestrator';
+
+function Body({
+	id,
+	components,
+	nbRows,
+	executeExpression,
+	handleChange,
+	valueMap,
+	missing,
+	management,
+	features,
+	preferences,
+	custom,
+}) {
+	const handleChangeRow = useCallback(
+		function (response, value, args) {
+			handleChange(response, value, { ...args, loop: true, length: nbRows });
+		},
+		[nbRows, handleChange]
+	);
+
+	if (nbRows > 0) {
+		return (
+			<Tbody id={id} custom={custom}>
+				<RosterForLoopOrchestrator
+					components={components}
+					nbRows={nbRows}
+					handleChange={handleChangeRow}
+					executeExpression={executeExpression}
+					valueMap={valueMap}
+					missing={missing}
+					management={management}
+					features={features}
+					preferences={preferences}
+					custom={custom}
+				/>
+			</Tbody>
+		);
+	}
+	return null;
+}
+
+export default Body;

package/src/components/loop/roster-for-loop/header.js

@@ -0,0 +1,28 @@
+import React from 'react';
+import { Tr, Th, Thead } from '../../commons/components/html-table';
+
+function Header({ header, id, custom }) {
+	if (Array.isArray(header)) {
+		return (
+			<Thead id={id} custom={custom}>
+				<Tr id={id} custom={custom} row={0}>
+					{header.map(function ({ label }, index) {
+						return (
+							<Th
+								id={id}
+								index={index}
+								key={`${label}-${index}`}
+								custom={custom}
+							>
+								{label}
+							</Th>
+						);
+					})}
+				</Tr>
+			</Thead>
+		);
+	}
+	return null;
+}
+
+export default Header;

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

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

package/src/components/loop/roster-for-loop/roster-for-loop-orchestrator.js

@@ -0,0 +1,6 @@
+import { createRowOrchestrator } from '../../commons';
+import Row from './row';
+
+const RosterForLoopOrchestrator = createRowOrchestrator(Row);
+
+export default RosterForLoopOrchestrator;

package/src/components/loop/roster-for-loop/roster-for-loop.js

@@ -0,0 +1,92 @@
+import React, { useEffect, useState, useCallback } from 'react';
+import {
+	DeclarationsBeforeText,
+	DeclarationsAfterText,
+	DeclarationsDetachable,
+} from '../../declarations';
+import RosterTable from './roster-table';
+import AddRowButton from './add-row-button';
+import D from 'i18n';
+
+const DEFAULT_MAX_ROWS = 12;
+
+function getTableLength(value) {
+	return Object.values(value).reduce(function (length, variable) {
+		if (Array.isArray(variable)) {
+			return Math.max(length, variable.length);
+		}
+		return length;
+	}, 1);
+}
+
+function RosterforLoop({
+	valueMap,
+	loopDependencies,
+	lines,
+	handleChange,
+	declarations,
+	label,
+	components,
+	executeExpression,
+	headers,
+	missing,
+	shortcut,
+	id,
+	management,
+	iteration,
+	custom,
+}) {
+	const max = lines?.max || DEFAULT_MAX_ROWS;
+	const [init, setInit] = useState(false);
+	const [nbRows, setNbRows] = useState(-1);
+
+	useEffect(
+		function () {
+			if (!init && valueMap) {
+				setNbRows(getTableLength(valueMap));
+				setInit(true);
+			}
+		},
+		[init, valueMap]
+	);
+
+	const disabled = nbRows === max;
+
+	const addRow = useCallback(
+		function () {
+			if (nbRows < max) {
+				setNbRows(nbRows + 1);
+			}
+		},
+		[max, nbRows]
+	);
+
+	if (nbRows > 0) {
+		return (
+			<>
+				<DeclarationsBeforeText declarations={declarations} custom={custom} />
+				<DeclarationsAfterText declarations={declarations} custom={custom} />
+				<RosterTable
+					id={id}
+					components={components}
+					nbRows={nbRows}
+					executeExpression={executeExpression}
+					header={headers}
+					handleChange={handleChange}
+					valueMap={valueMap}
+					management={management}
+					missing={missing}
+					shortcut={shortcut}
+					custom={custom}
+				/>
+				<DeclarationsDetachable declarations={declarations} custom={custom} />
+				<AddRowButton onClick={addRow} disabled={disabled} custom={custom}>
+					{label || D.DEFAULT_BUTTON_ADD}
+				</AddRowButton>
+			</>
+		);
+	}
+	return null;
+}
+
+export default RosterforLoop;

package/src/components/loop/roster-for-loop/roster-table.js

@@ -0,0 +1,43 @@
+import React from 'react';
+import { Table } from '../../commons/components/html-table';
+import Header from './header';
+import Body from './body';
+import './roster.scss';
+import { NothingToDisplay } from '../../commons';
+
+function RosterTable({
+	components,
+	nbRows,
+	executeExpression,
+	id,
+	header,
+	valueMap,
+	shortcut,
+	missing,
+	management,
+	handleChange,
+	custom,
+}) {
+	if (nbRows > 0) {
+		return (
+			<Table id={id} custom={custom}>
+				<Header header={header} id={id} custom={custom} />
+				<Body
+					id={id}
+					components={components}
+					handleChange={handleChange}
+					nbRows={nbRows}
+					valueMap={valueMap}
+					management={management}
+					missing={missing}
+					shortcut={shortcut}
+					executeExpression={executeExpression}
+					custom={custom}
+				/>
+			</Table>
+		);
+	}
+	return <NothingToDisplay />;
+}
+
+export default RosterTable;

package/src/components/loop/roster-for-loop/roster.scss

@@ -0,0 +1,42 @@
+// .lunatic-component {
+// 	.table-lunatic {
+// 		table-layout: fixed;
+// 		border-collapse: collapse;
+// 		margin-top: 0.3em;
+// 		margin-bottom: 0.3em;
+// 		& td,
+// 		th {
+// 			border: 0.15em solid var(--color-primary-dark);
+// 			padding: 0.2em;
+// 		}
+// 		& td {
+// 			.field,
+// 			.field-with-tooltip {
+// 				display: flex;
+// 				justify-content: center;
+// 				align-items: center;
+// 			}
+// 		}
+// 	}
+
+// 	.table-lunatic .tooltip-lunatic img {
+// 		height: 20px;
+// 		width: 20px;
+// 	}
+// }
+
+.lunatic-table {
+	table-layout: fixed;
+	border-collapse: collapse;
+	margin-top: 0.3em;
+	margin-bottom: 0.3em;
+	.lunatic-table-thead {
+		.lunatic-table-th {
+			border: 0.15em solid var(--color-primary-dark);
+			padding: 0.2em;
+		}
+	}
+
+	.lunatic-table-tbody {
+	}
+}

package/src/components/loop/roster-for-loop/row.js

@@ -0,0 +1,67 @@
+import React, { useCallback } from 'react';
+import { Tr, Td } from '../../commons/components/html-table';
+
+import { OrchestratedComponent } from '../../commons';
+
+function Row({
+	id,
+	components,
+	valueMap,
+	rowIndex,
+	handleChange,
+	features,
+	missing,
+	shortcut,
+	management,
+	preferences,
+	executeExpression,
+	custom,
+}) {
+	const handleChangeRow = useCallback(
+		function (response, value) {
+			handleChange(response, value, { index: rowIndex });
+		},
+		[handleChange, rowIndex]
+	);
+
+	if (Array.isArray(components)) {
+		return (
+			<Tr id={id} custom={custom} row={rowIndex}>
+				{components.map(function (component) {
+					const { response, id } = component;
+					const idComponent = `${id}-${rowIndex + 1} `;
+					let value = undefined;
+					const key = `${id}-${rowIndex}`;
+					if (response) {
+						const { name } = response;
+						if (name in valueMap) {
+							value = valueMap[name][rowIndex] || '';
+						}
+					}
+
+					return (
+						<Td id={idComponent} key={key} custom={custom}>
+							<OrchestratedComponent
+								component={component}
+								handleChange={handleChangeRow}
+								features={features}
+								missing={missing}
+								shortcut={shortcut}
+								management={management}
+								value={value}
+								id={idComponent}
+								preferences={preferences}
+								iteration={rowIndex}
+								executeExpression={executeExpression}
+								custom={custom}
+							/>
+						</Td>
+					);
+				})}
+			</Tr>
+		);
+	}
+	return <Tr id={id}></Tr>;
+}
+
+export default Row;

package/src/components/modal-controls/close-or-skip.js

@@ -0,0 +1,25 @@
+import React from 'react';
+import Button from '../button';
+
+function CloseOrSkip({ errors, onClose, onSkip }) {
+	const bloc = Object.values(errors)
+		.flat()
+		.reduce(function (status, { criticality }) {
+			return status || criticality === 'WARN';
+		}, false);
+
+	if (bloc) {
+		return (
+			<Button className="modal-button" onClick={onClose}>
+				Close
+			</Button>
+		);
+	}
+	return (
+		<Button className="modal-button" onClick={onSkip}>
+			Next
+		</Button>
+	);
+}
+
+export default CloseOrSkip;

package/src/components/modal-controls/index.js

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

package/src/components/modal-controls/modal-container.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+
+function ModalContainer({ children }) {
+	return ReactDOM.createPortal(
+		<div className="lunatic-modal-controls">
+			<div className="modal">{children}</div>
+		</div>,
+		document.body
+	);
+}
+
+export default ModalContainer;