@inseefr/lunatic 0.2.0-experimental → 0.2.0-v2

package/src/components/input/input-number.js

@@ -1,54 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import missingWrapper from '../missing-wrapper';
-import { InputDeclarationsWrapper } from '../declarations/wrappers';
-import { areEqual } from '../../utils/lib';
-import './input.scss';
-
-const InputNumber = ({ numberAsTextfield, ...props }) => {
-	const { min, max, validators } = props;
-	return (
-		<InputDeclarationsWrapper
-			type={numberAsTextfield ? 'text' : 'number'}
-			roleType="input"
-			{...props}
-			validators={[minMaxValidator({ min, max }), ...validators]}
-			isInputNumber
-			numberAsTextfield
-		/>
-	);
-};
-
-const minMaxValidator =
-	({ min, max }) =>
-	(value) => {
-		if (!value) {
-			return undefined;
-		}
-		const valueNumber = Number(value);
-		if (!min && isDef(max) && valueNumber > max)
-			return <span>{`La valeur doit être inférieure à ${max}`}</span>;
-		else if (isDef(min) && !max && valueNumber < min)
-			return <span>{`La valeur doit être supérieure à ${min}`}</span>;
-		else if (
-			isDef(min) &&
-			isDef(max) &&
-			(valueNumber < min || valueNumber > max)
-		)
-			return (
-				<span>{`La valeur doit être comprise entre ${min} et ${max}`}</span>
-			);
-		return undefined;
-	};
-
-const isDef = (number) => number || number === 0;
-
-InputNumber.defaultProps = {
-	validators: [],
-};
-
-InputNumber.propTypes = {
-	validators: PropTypes.arrayOf(PropTypes.func),
-};
-
-export default missingWrapper(React.memo(InputNumber, areEqual));

package/src/components/loop/component.js

@@ -1,259 +0,0 @@
-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,
-	setPage,
-	flow,
-	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]);
-
-	/**
-	 * Handle init page
-	 */
-
-	if (
-		pagination &&
-		paginatedLoop &&
-		loopDepth > currentPage.split('.').length - 1
-	) {
-		if (flow === U.FLOW_NEXT) {
-			setPage(`${currentPage}.1#1`);
-		} else if (flow === U.FLOW_PREVIOUS) {
-			setPage(`${currentPage}.${maxPage}#${iterationNb}`);
-		}
-		return null;
-	}
-
-	const flattenComponents = U.buildLoopComponents(iterationNb)(components);
-
-	const {
-		currentRootPage,
-		currentComponentIndex,
-		currentIteration,
-		currentPageWithoutAnyIteration,
-	} = U.splitPage(currentPage, loopDepth);
-
-	if (
-		pagination &&
-		paginatedLoop &&
-		loopDepth === currentPage.split('.').length - 1
-	) {
-		// Previous at first component
-		if (currentComponentIndex < 1) {
-			setPage(`${currentRootPage}.${maxPage}#${currentIteration - 1}`);
-			return null;
-		}
-
-		// Next at last component
-		if (currentComponentIndex > maxPage) {
-			setPage(`${currentRootPage}.1#${currentIteration + 1}`);
-			return null;
-		}
-
-		// Previous at first iteration
-		if (currentIteration < 1) {
-			const splitRoot = currentRootPage.split('.');
-			if (splitRoot.length === 1) setPage(`${parseInt(splitRoot[0], 10) - 1}`);
-			else {
-				const subPagesToUpdate = splitRoot.slice().pop().split('#');
-				const newSubPage = `${parseInt(subPagesToUpdate[0], 10) - 1}#${
-					subPagesToUpdate[1]
-				}`;
-				const newPage = [
-					...splitRoot.slice(0, splitRoot.length - 1),
-					newSubPage,
-				].join('.');
-				setPage(`${newPage}`);
-			}
-			return null;
-		}
-
-		// Next at last iteration
-		if (currentIteration > iterationNb) {
-			const splitRoot = currentRootPage.split('#');
-			const newRootPage =
-				splitRoot.length === 1
-					? parseInt(splitRoot[0], 10) + 1
-					: splitRoot.slice(0, -1).join('#');
-			if (splitRoot.length === 1) setPage(`${newRootPage}`);
-			else {
-				const {
-					currentRootPage: newCurrentRootPage,
-					currentIteration: newCurrentIteration,
-				} = U.splitPage(currentRootPage, loopDepth);
-				setPage(`${newCurrentRootPage}.1#${newCurrentIteration + 1}`);
-			}
-			return null;
-		}
-	}
-
-	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}
-						bindingDependencies={bindingDependencies}
-						componentType={componentType}
-						pagination={pagination}
-						currentPage={currentPage}
-						setPage={setPage}
-						flow={flow}
-						conditionFilter={conditionFilter}
-						missingResponse={loopMissingResponse}
-					/>
-				</div>,
-			];
-		},
-		[]
-	);
-
-	if (pagination && paginatedLoop && loopComponents.length === 0) {
-		if (flow === U.FLOW_NEXT) {
-			setPage(
-				`${currentRootPage}.${currentComponentIndex + 1}#${currentIteration}`
-			);
-		} else if (flow === U.FLOW_PREVIOUS) {
-			setPage(
-				`${currentRootPage}.${currentComponentIndex - 1}#${currentIteration}`
-			);
-		}
-		return null;
-	}
-
-	return (
-		<div id={`loop-${id}`} className="lunatic-loop">
-			{loopComponents}
-		</div>
-	);
-};
-
-export default React.memo(Loop, U.areEqual);

package/src/components/loop/loop.scss

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -1,122 +0,0 @@
-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,
-}) => {
-	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
-												{...componentProps}
-												id={`${id}-row-${i}`}
-												label={label}
-												handleChange={(up) => {
-													setTodo({ up, rowNumber });
-												}}
-												preferences={preferences}
-												positioning={positioning}
-												management={management}
-												features={features}
-												bindings={localBindings}
-												zIndex={uiComponents.length - i || 0}
-												logFunction={logFunction}
-											/>
-										</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
-									{...componentProps}
-									id={`${id}-row-${i}`}
-									label={label}
-									handleChange={(up) => {
-										setTodo({ up, rowNumber: i });
-									}}
-									preferences={preferences}
-									positioning={positioning}
-									management={management}
-									features={features}
-									bindings={localBindings}
-									logFunction={logFunction}
-								/>
-							</div>
-						);
-					})
-				)}
-			</div>
-		);
-};
-
-export default BodyComponent;

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

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