@inseefr/lunatic 3.11.2 → 3.12.0

package/src/components/PairwiseLinks/PairwiseLinks.tsx

@@ -1,34 +1,25 @@
 import type { LunaticComponentProps } from '../type';
-import { times } from '../../utils/array';
-import React, { Fragment } from 'react';
+import { Fragment } from 'react';
 import { LunaticComponents } from '../LunaticComponents';
-import { Declarations } from '../shared/Declarations/Declarations';
-import { Label } from '../shared/Label/Label';
+import { PairwiseMirror } from './PairwiseMirror';
+import { filterCombinations, getCombinations } from './combinations';
 
-export const PairwiseLinks = ({
-	declarations,
-	xAxisIterations,
-	yAxisIterations,
-	id,
-	getComponents,
-}: LunaticComponentProps<'PairwiseLinks'>) => {
-	const nbRows = xAxisIterations * yAxisIterations;
+export const PairwiseLinks = (
+	props: LunaticComponentProps<'PairwiseLinks'>
+) => {
+	const { iteration, size, getComponents } = props;
 
-	if (nbRows <= 1) {
-		return <div>Nothing to display!</div>;
+	// We only need to display a pairwise if there are at least 2 guys
+	if (size < 2) {
+		return;
 	}
 
-	const combinations = getCombinations(xAxisIterations, yAxisIterations);
+	const combinations = getCombinations(size);
 
 	return (
 		<>
-			<Declarations
-				type="AFTER_QUESTION_TEXT"
-				declarations={declarations}
-				id={id}
-			/>
 			{combinations
-				.filter(([x, y]) => y < x)
+				.filter((combination) => filterCombinations({ combination, iteration }))
 				.map(([x, y]) => (
 					<LunaticComponents
 						key={`${x}-${y}`}
@@ -40,14 +31,15 @@ export const PairwiseLinks = ({
 					/>
 				))}
 			{combinations
-				.filter(([x, y]) => x > y)
+				.filter((combination) =>
+					filterCombinations({ combination, iteration, isSymLink: true })
+				)
 				.map(([x, y]) => {
-					const components = getComponents(y, x);
+					const components = getComponents(x, y);
 					const firstComponent = components[0];
-					if (firstComponent === undefined || firstComponent === null) return;
-					if (firstComponent.componentType !== 'Dropdown') {
+					if (firstComponent?.componentType !== 'Dropdown') {
 						return (
-							<div>
+							<div key={'PairwiseLinksLoop-error'}>
 								First child component of a pairwise link must be a dropdown
 							</div>
 						);
@@ -55,40 +47,9 @@ export const PairwiseLinks = ({
 					return (
 						<Fragment key={`${x}-${y}`}>
 							<PairwiseMirror {...firstComponent} />
-							<LunaticComponents
-								components={components.slice(1)}
-								componentProps={(props) => ({
-									...props,
-									id: `${props.id}-${x + 1}-${y + 1} `,
-								})}
-							/>
 						</Fragment>
 					);
 				})}
 		</>
 	);
 };
-
-const PairwiseMirror = ({
-	value,
-	options,
-	label,
-}: LunaticComponentProps<'Dropdown'>) => {
-	const selectedOption = options?.find((o) => o.value === value);
-	if (!selectedOption) {
-		return null;
-	}
-	return (
-		<div className="lunatic lunatic-component lunatic-dropdown lunatic-combo-box-container default-style">
-			<Label>{label}</Label>
-			<div>{selectedOption?.label}</div>
-		</div>
-	);
-};
-
-const getCombinations = (
-	sizeX: number,
-	sizeY: number
-): (readonly [number, number])[] => {
-	return times(sizeY, (y) => times(sizeX, (x) => [x, y] as const)).flat(1);
-};

package/src/components/PairwiseLinks/PairwiseMirror.tsx

@@ -0,0 +1,19 @@
+import { Label } from '../shared/Label/Label';
+import { LunaticComponentProps } from '../type';
+
+export const PairwiseMirror = ({
+	value,
+	options,
+	label,
+}: LunaticComponentProps<'Dropdown'>) => {
+	const selectedOption = options?.find((o) => o.value === value);
+	if (!selectedOption) {
+		return null;
+	}
+	return (
+		<div className="lunatic lunatic-component lunatic-dropdown lunatic-combo-box-container default-style">
+			<Label>{label}</Label>
+			<div>{selectedOption?.label}</div>
+		</div>
+	);
+};

package/src/components/PairwiseLinks/combinations.test.ts

@@ -0,0 +1,103 @@
+import { describe, expect, it } from 'vitest';
+import { filterCombinations, getCombinations } from './combinations';
+
+describe('combinations utils', () => {
+	it('should create square combinations', () => {
+		expect(getCombinations(1)).toStrictEqual([[0, 0]]);
+		expect(getCombinations(2)).toStrictEqual([
+			[0, 0],
+			[1, 0],
+			[0, 1],
+			[1, 1],
+		]);
+		expect(getCombinations(3)).toStrictEqual([
+			[0, 0],
+			[1, 0],
+			[2, 0],
+			[0, 1],
+			[1, 1],
+			[2, 1],
+			[0, 2],
+			[1, 2],
+			[2, 2],
+		]);
+	});
+
+	it('should filter combinations paiwise link in Loop', () => {
+		const combinations = getCombinations(3);
+
+		expect(
+			combinations.filter((combination) =>
+				filterCombinations({ combination, iteration: 0, isSymLink: false })
+			)
+		).toStrictEqual([
+			[1, 0],
+			[2, 0],
+		]);
+
+		expect(
+			combinations.filter((combination) =>
+				filterCombinations({ combination, iteration: 1, isSymLink: false })
+			)
+		).toStrictEqual([[2, 1]]);
+	});
+
+	it('should filter combinations paiwise link not in Loop', () => {
+		const combinations = getCombinations(3);
+		expect(
+			combinations.filter((combination) =>
+				filterCombinations({
+					combination,
+					iteration: undefined,
+					isSymLink: false,
+				})
+			)
+		).toStrictEqual([
+			[1, 0],
+			[2, 0],
+			[2, 1],
+		]);
+	});
+
+	it('should filter combinations for readonly paiwise link in Loop', () => {
+		const combinations = getCombinations(3);
+
+		expect(
+			combinations.filter((combination) =>
+				filterCombinations({ combination, iteration: 0, isSymLink: true })
+			)
+		).toStrictEqual([]);
+
+		expect(
+			combinations.filter((combination) =>
+				filterCombinations({ combination, iteration: 1, isSymLink: true })
+			)
+		).toStrictEqual([[0, 1]]);
+
+		expect(
+			combinations.filter((combination) =>
+				filterCombinations({ combination, iteration: 2, isSymLink: true })
+			)
+		).toStrictEqual([
+			[0, 2],
+			[1, 2],
+		]);
+	});
+
+	it('should filter combinations for readonly paiwise link not in Loop', () => {
+		const combinations = getCombinations(3);
+		expect(
+			combinations.filter((combination) =>
+				filterCombinations({
+					combination,
+					iteration: undefined,
+					isSymLink: true,
+				})
+			)
+		).toStrictEqual([
+			[0, 1],
+			[0, 2],
+			[1, 2],
+		]);
+	});
+});

package/src/components/PairwiseLinks/combinations.ts

@@ -0,0 +1,34 @@
+import { times } from '../../utils/array';
+
+/**
+ * Create square of combination
+ * @param size
+ * @returns all coodornate of matrix in list exemple for 2x2 matrix, return [[0,0],[0,1],[1,0],[1,1]]
+ */
+export const getCombinations = (
+	size: number
+): (readonly [number, number])[] => {
+	return times(size, (y) => times(size, (x) => [x, y] as const)).flat(1);
+};
+
+/**
+ * Filter combination of pairwise for display only necessary ones
+ * depending on whether we want to only display symlinks,
+ * or if we display only selected iterations (because we display pairwise in a loop).
+ * @param param: combination, current iteration (if in loop), isSymLink: indicate if we want to display symLink (for pairwise miror -> "lien symétriques")
+ * @returns
+ */
+export const filterCombinations = ({
+	combination,
+	iteration,
+	isSymLink = false,
+}: {
+	combination: readonly [number, number];
+	iteration?: number;
+	isSymLink?: boolean;
+}): boolean => {
+	const [x, y] = combination;
+	const base = isSymLink ? y > x : y < x;
+	if (iteration === undefined) return base;
+	return y === iteration && base;
+};