@inseefr/lunatic 0.1.0-hackathon → 0.1.0-v2

package/src/components/loop/{component.js → _old/component.js}

@@ -146,6 +146,7 @@ const Loop = ({
 							setTodos((t) => [...t, { up, rowNumber }]);
 						}}
 						bindings={loopBindings}
+						fullBindings={bindings}
 						bindingDependencies={bindingDependencies}
 						componentType={componentType}
 						pagination={pagination}

package/src/components/loop/{wrapper.js → _old/wrapper.js}

@@ -1,15 +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 missingWrapper?
-
-export default LoopWrapper;
+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/block-for-loop/block-for-loop-ochestrator.js

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

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

@@ -0,0 +1,91 @@
+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,
+}) {
+	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} />
+				<DeclarationsAfterText declarations={declarations} />
+				<BlockForLoopOrchestrator
+					components={components}
+					handleChange={handleChangeLoop}
+					nbRows={nbRows}
+					valueMap={valueMap}
+					management={management}
+					missing={missing}
+					shortcut={shortcut}
+					features={features}
+					preferences={preferences}
+					executeExpression={executeExpression}
+				/>
+				<DeclarationsDetachable declarations={declarations} />
+			</>
+		);
+	}
+	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,52 @@
+import React, { useCallback } from 'react';
+import { RowComponent } from '../commons';
+
+function Row({
+	components,
+	valueMap = {},
+	handleChange,
+	features,
+	missing,
+	shortcut,
+	management,
+	preferences,
+	rowIndex,
+	executeExpression,
+}) {
+	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;
+			if (name in valueMap) value = valueMap[name][rowIndex] || '';
+		}
+
+		return [
+			...row,
+			<RowComponent
+				component={component}
+				key={id}
+				handleChange={handleChangeRow}
+				features={features}
+				missing={missing}
+				shortcut={shortcut}
+				management={management}
+				value={value}
+				id={idComponent}
+				preferences={preferences}
+				iteration={rowIndex}
+				executeExpression={executeExpression}
+			/>,
+		];
+	}, []);
+}
+
+export default Row;

package/src/components/loop/commons/create-loop-orchestrator.js

@@ -0,0 +1,36 @@
+import React from 'react';
+
+function createOchestrator(Row) {
+	return function LoopOrchestrator({
+		components,
+		nbRows,
+		valueMap,
+		handleChange,
+		features,
+		missing,
+		shortcut,
+		management,
+		preferences,
+		executeExpression,
+	}) {
+		return new Array(nbRows).fill(null).map(function (_, index) {
+			return (
+				<Row
+					key={index}
+					rowIndex={index}
+					components={components}
+					valueMap={valueMap}
+					handleChange={handleChange}
+					features={features}
+					shortcut={shortcut}
+					preferences={preferences}
+					management={management}
+					missing={missing}
+					executeExpression={executeExpression}
+				/>
+			);
+		});
+	};
+}
+
+export default createOchestrator;

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 '../../../utils/to-expose/hooks/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,78 @@
+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,
+	} = 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}
+				/>
+			);
+		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}
+				/>
+			);
+		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,44 @@
+import React, { useCallback } from 'react';
+import TBody from './html-table/tbody';
+import RosterForLoopOrchestrator from './roster-for-loop-orchestrator';
+
+function Body({
+	id,
+	components,
+	nbRows,
+	executeExpression,
+	handleChange,
+	valueMap,
+	missing,
+	management,
+	features,
+	preferences,
+}) {
+	const handleChangeRow = useCallback(
+		function (response, value, args) {
+			handleChange(response, value, { ...args, loop: true, length: nbRows });
+		},
+		[nbRows, handleChange]
+	);
+
+	if (nbRows > 0) {
+		return (
+			<TBody id={id}>
+				<RosterForLoopOrchestrator
+					components={components}
+					nbRows={nbRows}
+					handleChange={handleChangeRow}
+					executeExpression={executeExpression}
+					valueMap={valueMap}
+					missing={missing}
+					management={management}
+					features={features}
+					preferences={preferences}
+				/>
+			</TBody>
+		);
+	}
+	return null;
+}
+
+export default Body;

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

@@ -0,0 +1,25 @@
+import React from 'react';
+import THead from './html-table/thead';
+import Tr from './html-table/tr';
+import Th from './html-table/th';
+
+function Header({ header, id }) {
+	if (Array.isArray(header)) {
+		return (
+			<THead id={id}>
+				<Tr id={`${id}`}>
+					{header.map(function ({ label }, index) {
+						return (
+							<Th id={id} index={index} key={`${label}-${index}`}>
+								{label}
+							</Th>
+						);
+					})}
+				</Tr>
+			</THead>
+		);
+	}
+	return null;
+}
+
+export default Header;

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

@@ -0,0 +1,11 @@
+import React from 'react';
+
+function Table({ id, children }) {
+	return (
+		<table id={`table-${id}`} className="lunatic-table">
+			{children}
+		</table>
+	);
+}
+
+export default Table;

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

@@ -0,0 +1,11 @@
+import React from 'react';
+
+function TBody({ id, children }) {
+	return (
+		<tbody id={`lunatic-table-tbody-${id}`} className="lunatic-table-tbody">
+			{children}
+		</tbody>
+	);
+}
+
+export default TBody;

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

@@ -0,0 +1,14 @@
+import React from 'react';
+
+function Td({ id, children, row, index }) {
+	return (
+		<td
+			id={`lunatic-table-td-${id}-${row}-${index}`}
+			className="lunatic-table-td"
+		>
+			{children}
+		</td>
+	);
+}
+
+export default Td;

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

@@ -0,0 +1,11 @@
+import React from 'react';
+
+function Th({ id, index, children }) {
+	return (
+		<th id={`lunatic-table-th-${id}-${index}`} className="lunatic-table-th">
+			{children}
+		</th>
+	);
+}
+
+export default Th;

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

@@ -0,0 +1,11 @@
+import React from 'react';
+
+function THead({ id, children }) {
+	return (
+		<thead id={`lunatic-table-thead-${id}`} className="lunatic-table-thead">
+			{children}
+		</thead>
+	);
+}
+
+export default THead;

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

@@ -0,0 +1,11 @@
+import React from 'react';
+
+function Tr({ id, children }) {
+	return (
+		<tr id={`lunatic-table-tr-${id}`} className="lunatic-table-tr">
+			{children}
+		</tr>
+	);
+}
+
+export default Tr;

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 { createLoopOrchestrator } from '../commons';
+import Row from './row';
+
+const RosterForLoopOrchestrator = createLoopOrchestrator(Row);
+
+export default RosterForLoopOrchestrator;

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

@@ -0,0 +1,90 @@
+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 * as lunatic from 'components';
+
+const DEFAULT_MAX_ROWS = 12;
+
+function getTableLength(value) {
+	return Object.entries(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,
+}) {
+	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} />
+				<lunatic.Sequence label={label} />
+				<DeclarationsAfterText declarations={declarations} />
+				<RosterTable
+					id={id}
+					components={components}
+					nbRows={nbRows}
+					executeExpression={executeExpression}
+					header={headers}
+					handleChange={handleChange}
+					valueMap={valueMap}
+					management={management}
+					missing={missing}
+					shortcut={shortcut}
+				/>
+				<DeclarationsDetachable declarations={declarations} />
+				<AddRowButton onClick={addRow} disabled={disabled}>
+					Add Row!
+				</AddRowButton>
+			</>
+		);
+	}
+	return null;
+}
+
+export default RosterforLoop;

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

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