@inseefr/lunatic 2.3.0 → 2.4.0

package/src/components/loop/paginated-component.js

@@ -1,205 +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 PaginatedLoop = ({
-	id,
-	label,
-	iterations,
-	components,
-	bindings,
-	handleChange,
-	loopDependencies,
-	maxPage,
-	pagination,
-	paginatedLoop,
-	currentPage,
-	setPage,
-	flow,
-	depth: loopDepth,
-	...orchetratorProps
-}) => {
-	const [todo, setTodo] = 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] && iterationNb > bindings[iv].length)
-				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 (Object.keys(todo).length !== 0) {
-			const { up, rowNumber } = todo;
-			const todos = Object.entries(up).reduce((acc, [k, value], i) => {
-				const previousValue = bindings[k];
-				const newValue = previousValue.map((v, i) =>
-					i === rowNumber ? value : v
-				);
-				return { ...acc, [k]: newValue };
-			}, {});
-			handleChange(todos);
-			setTodo({});
-		}
-	}, [bindings, todo, handleChange]);
-
-	/**
-	 * Handle init page
-	 */
-
-	if (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);
-
-	// if (!U.displayLoop(loopDependencies)(bindings)) {
-	// 	return <div>Pas de questionnaire individuel, passez à la suite</div>;
-	// }
-
-	const {
-		currentRootPage,
-		currentComponentIndex,
-		currentIteration,
-		currentPageWithoutAnyIteration,
-	} = U.splitPage(currentPage, loopDepth);
-
-	if (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 loopComponents = flattenComponents.reduce(
-		(
-			acc,
-			{ componentType, id: idC, rowNumber, conditionFilter, page, ...rest }
-		) => {
-			const loopBindings = U.buildBindingsForDeeperComponents(rowNumber)(
-				bindings
-			);
-			if (!U.displayLoopQuestion(loopDependencies)(loopBindings)) return acc;
-			const Component = lunatic[componentType];
-
-			if (
-				interpret(featuresWithoutMD)(loopBindings, true)(conditionFilter) !==
-					'normal' ||
-				(pagination && !currentPageWithoutAnyIteration.startsWith(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) => setTodo({ up, rowNumber })}
-						bindings={loopBindings}
-						componentType={componentType}
-						pagination={pagination}
-						currentPage={currentPage}
-						setPage={setPage}
-						flow={flow}
-					/>
-				</div>,
-			];
-		},
-		[]
-	);
-
-	if (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(PaginatedLoop, U.areEqual);

package/src/components/loop/wrapper.js

@@ -1,15 +0,0 @@
-import React from 'react';
-import Loop from '../loop/component';
-import PaginatedLoop from '../loop/paginated-component';
-import BlockForLoop from '../loop-constructor/block';
-
-const LoopWrapper = (props) => {
-	const { iterations, pagination } = props;
-	if (iterations) {
-		if (pagination) return <PaginatedLoop {...props} />;
-		return <Loop {...props} />;
-	}
-	return <BlockForLoop {...props} />;
-};
-
-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,8 +0,0 @@
-import React from 'react';
-import LoopConstructorWrapper from '../wrapper';
-import * as U from '../../../utils/lib';
-import './block.scss';
-
-const BlockForLoop = (props) => <LoopConstructorWrapper {...props} />;
-
-export default 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,7 +0,0 @@
-import React from 'react';
-import LoopConstructorWrapper from '../wrapper';
-import * as U from '../../../utils/lib';
-
-const RosterForLoop = (props) => <LoopConstructorWrapper {...props} />;
-
-export default 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,118 +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,
-}) => {
-	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}
-											/>
-										</td>
-									);
-								}
-								const cellOptions = {
-									key: `table-${mainId}-row-${i}-cell-${j}`,
-									style: { width },
-									colSpan: colspan || 1,
-									rowSpan: rowspan || 1,
-								};
-								const interpretedLabel = interpret(features)(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}
-								/>
-							</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;
-};

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

@@ -1,154 +0,0 @@
-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 minLines = Math.max(
-		lines.min || 0,
-		U.getLoopConstructorInitLines(components)
-	);
-	const maxLines = lines ? lines.max : undefined;
-
-	const width = `${100 / Math.max(...components.map((row) => row.length))}%`;
-	const Button = lunatic.Button;
-	const involvedVariables = U.getInvolvedVariables(components);
-
-	useEffect(() => {
-		if (Object.keys(todo).length !== 0) {
-			const { up, rowNumber } = todo;
-			const [key, value] = Object.entries(up)[0];
-			const previousValue = bindings[key];
-			const newValue = previousValue.map((v, i) =>
-				i === rowNumber ? value : v
-			);
-			handleChange({ [key]: newValue });
-			setTodo({});
-		}
-	}, [bindings, todo, handleChange]);
-
-	const addLine = () => {
-		const toHandle = involvedVariables.reduce(
-			(acc, { name: iv, depth }) => ({
-				...acc,
-				[iv]: [...bindings[iv], null],
-			}),
-			{}
-		);
-		handleChange(toHandle);
-	};
-
-	const customBtnLabel =
-		(componentType === 'Loop' && interpret(features)(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)(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 && (
-				<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}
-				/>
-			)}
-			<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

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

package/src/components/progress-bar/component.js

@@ -1,28 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { buildStyleObject } from '../../utils/lib';
-import './progress-bar.scss';
-
-const ProgressBar = ({ id, value, style }) => {
-	let controledValue = value;
-	if (value < 0) controledValue = 0;
-	if (value > 100) controledValue = 100;
-	return (
-		<div
-			id={`progress-${id}`}
-			className="progress-lunatic"
-			style={buildStyleObject(style)}
-		>
-			{`${controledValue.toFixed(0)} %`}
-			<span style={{ width: `${controledValue}%` }} />
-		</div>
-	);
-};
-
-ProgressBar.propTypes = {
-	id: PropTypes.string.isRequired,
-	value: PropTypes.number.isRequired,
-	style: PropTypes.object,
-};
-
-export default ProgressBar;

package/src/components/progress-bar/index.js

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

package/src/components/progress-bar/progress-bar.scss

@@ -1,52 +0,0 @@
-.progress-lunatic {
-	height: 30px;
-	position: relative;
-	background: var(--color-disabled);
-	-moz-border-radius: 20px;
-	-webkit-border-radius: 20px;
-	border-radius: 20px;
-	padding: 5px;
-	box-shadow: inset 0 -1px 1px rgba(255, 255, 255, 0.3);
-	text-align: center;
-	font-weight: bold;
-}
-
-.progress-lunatic > span {
-	display: block;
-	height: 100%;
-	border-radius: 20px;
-	background-color: var(--color-primary-light);
-	opacity: 0.6;
-	box-shadow: inset 0 2px 9px rgba(255, 255, 255, 0.3),
-		inset 0 -2px 6px rgba(0, 0, 0, 0.4);
-	position: relative;
-	top: -18px;
-	overflow: hidden;
-}
-
-.progress-lunatic > span:after {
-	content: '';
-	position: absolute;
-	top: 0;
-	left: 0;
-	bottom: 0;
-	right: 0;
-	background-image: linear-gradient(
-		-45deg,
-		rgba(255, 255, 255, 0.2) 25%,
-		transparent 25%,
-		transparent 50%,
-		rgba(255, 255, 255, 0.2) 50%,
-		rgba(255, 255, 255, 0.2) 75%,
-		transparent 75%,
-		transparent
-	);
-	z-index: 1;
-	background-size: 50px 50px;
-	animation: move 2s linear infinite;
-	border-top-right-radius: 8px;
-	border-bottom-right-radius: 8px;
-	border-top-left-radius: 20px;
-	border-bottom-left-radius: 20px;
-	overflow: hidden;
-}

package/src/components/radio/component.js

@@ -1,8 +0,0 @@
-import React from 'react';
-import { ListDeclarationsWrapper } from '../declarations/wrappers';
-import { areEqual } from '../../utils/lib';
-import './radio.scss';
-
-const Radio = (props) => <ListDeclarationsWrapper type="radio" {...props} />;
-
-export default React.memo(Radio, areEqual);

package/src/components/radio/index.js

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