@inseefr/lunatic 0.2.2-experimental → 0.2.3-prisme

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

@@ -1,125 +1,146 @@
-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,
-	...otherProps
-}) => {
-	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
-												{...otherProps}
-												{...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
-									{...otherProps}
-									{...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;
+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,
+	...otherProps
+}) => {
+	const uiComponents = buildContentForLoopConstructor({
+		components,
+		headers,
+	});
+	const featuresWithoutMD = features.filter((f) => f !== 'MD');
+	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,
+									conditionFilter,
+									...componentProps
+								} = component;
+								const localBindings =
+									U.buildBindingsForDeeperComponents(rowNumber)(bindings);
+								if (conditionFilter) {
+									const { value = '' } = conditionFilter;
+									if (!interpret(featuresWithoutMD)(localBindings)(value))
+										return null;
+								}
+								if (componentType) {
+									const Component = lunatic[componentType];
+									return (
+										<td
+											key={`table-${mainId}-row-${i}-cell-${j}`}
+											style={{ width }}
+										>
+											<Component
+												{...otherProps}
+												{...componentProps}
+												id={`${id}-row-${i}`}
+												label={label}
+												handleChange={(up) => {
+													setTodo({ up, rowNumber });
+												}}
+												preferences={preferences}
+												positioning={positioning}
+												management={management}
+												features={features}
+												bindings={localBindings}
+												fullBindings={bindings}
+												missingLoopIteration={i}
+												zIndex={uiComponents.length - i || 0}
+												logFunction={logFunction}
+												focused={i === 0 && j === 0}
+											/>
+										</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);
+						// ensure to have only N-1 missingResponse
+						const { missingResponse, conditionFilter } = componentProps;
+						if (conditionFilter) {
+							const { value = '' } = conditionFilter;
+							if (!interpret(featuresWithoutMD)(localBindings)(value))
+								return null;
+						}
+						return (
+							<div className="block-component" key={`${id}-row-${i}`}>
+								<Component
+									{...otherProps}
+									{...componentProps}
+									missingResponse={missingResponse}
+									id={`${id}-row-${i}`}
+									label={label}
+									handleChange={(up) => {
+										setTodo({ up, rowNumber: i });
+									}}
+									preferences={preferences}
+									positioning={positioning}
+									management={management}
+									features={features}
+									bindings={localBindings}
+									fullBindings={bindings}
+									missingLoopIteration={i}
+									logFunction={logFunction}
+									focused={i === 0}
+								/>
+							</div>
+						);
+					})
+				)}
+			</div>
+		);
+};
+
+export default BodyComponent;

package/src/components/modal/component.js

@@ -0,0 +1,36 @@
+import React from 'react';
+import Button from '../button';
+import './modal.scss';
+
+const Modal = ({ controls, cancelModal, validateModal }) => {
+	const disableValidation = controls
+		.map(({ criticality }) => criticality)
+		.includes('LOCK');
+	return (
+		<div className="lunatic-modal">
+			<div className="lunatic-modal-content">
+				<div className="lunatic-modal-text">
+					<ul>
+						{controls.map(({ id, errorMessage }) => (
+							<li key={id}>{errorMessage}</li>
+						))}
+					</ul>
+				</div>
+				<div className="lunatic-modal-buttons">
+					<div className="lunatic-modal-button">
+						<Button value="Corriger ma réponse" onClick={cancelModal} />
+					</div>
+					<div className="lunatic-modal-button">
+						<Button
+							value="Continuer"
+							onClick={validateModal}
+							disabled={disableValidation}
+						/>
+					</div>
+				</div>
+			</div>
+		</div>
+	);
+};
+
+export default Modal;

package/src/components/modal/index.js

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

package/src/components/modal/modal.scss

@@ -0,0 +1,33 @@
+.lunatic-modal {
+	position: fixed;
+	padding-top: 50px;
+	left: 0;
+	top: 0;
+	width: 100%;
+	height: 100%;
+	background-color: rgb(0, 0, 0);
+	background-color: rgba(0, 0, 0, 0.7);
+	z-index: 1000;
+	.lunatic-modal-content {
+		position: relative;
+		background-color: white;
+		padding: 20px;
+		margin: auto;
+		width: 50%;
+		-webkit-animation-name: animatetop;
+		-webkit-animation-duration: 0.4s;
+		animation-name: animatetop;
+		animation-duration: 0.4s;
+		.lunatic-modal-text {
+			font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
+			font-size: 1em;
+		}
+		.lunatic-modal-buttons {
+			display: flex;
+			justify-content: space-around;
+			.lunatic-modal-button {
+				font-size: 0.8em;
+			}
+		}
+	}
+}

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

@@ -1,54 +1,54 @@
-.lunatic-component {
-	.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;
-	}
-}
+.lunatic-component {
+	.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,9 +1,9 @@
-import React from 'react';
-import missingWrapper from '../missing-wrapper';
-import { ListDeclarationsWrapper } from '../declarations/wrappers';
-import { areEqual } from '../../utils/lib';
-import './radio.scss';
-
-const Radio = (props) => <ListDeclarationsWrapper type="radio" {...props} />;
-
-export default missingWrapper(React.memo(Radio, areEqual));
+import React from 'react';
+import componentWrapper from '../component-wrapper';
+import { ListDeclarationsWrapper } from '../declarations/wrappers';
+import { areEqual } from '../../utils/lib';
+import './radio.scss';
+
+const Radio = (props) => <ListDeclarationsWrapper type="radio" {...props} />;
+
+export default componentWrapper(React.memo(Radio, areEqual));

package/src/components/radio/radio.scss

@@ -1,59 +1,59 @@
-.lunatic-component {
-	.radio-group-list {
-		border: 0;
-		outline: 0;
-		padding: 0;
-		margin-top: 0.9375rem;
-	}
-
-	.radio-lunatic {
-		position: absolute;
-		opacity: 0;
-		margin-bottom: 0;
-		margin-top: 0.05rem;
-		margin-left: 0.2rem;
-		height: 20px;
-		width: 20px;
-		+ label {
-			margin-left: 2rem;
-		}
-		&:focus {
-			+ label {
-				background-color: rgba(0, 0, 0, 0.05);
-			}
-		}
-		+ label::before {
-			float: left;
-			line-height: 2rem;
-		}
-	}
-
-	.field,
-	.field-with-tooltip {
-		.radio-group-list .radio-modality {
-			height: 1.375em;
-		}
-	}
-
-	.radio-group-list {
-		.radio-modality {
-			label {
-				display: flex;
-			}
-		}
-		.radio-modality.radio-modality-block label {
-			padding-top: 0.325em;
-		}
-		.radio-modality.radio-modality-block.horizontal-options label {
-			padding-top: 0;
-		}
-	}
-
-	.radio-modality {
-		margin-bottom: 0.8em;
-	}
-
-	.radio-lunatic + label {
-		margin-top: 0.325em;
-	}
-}
+.lunatic-component {
+	.radio-group-list {
+		border: 0;
+		outline: 0;
+		padding: 0;
+		margin-top: 0.9375rem;
+	}
+
+	.radio-lunatic {
+		position: absolute;
+		opacity: 0;
+		margin-bottom: 0;
+		margin-top: 0.05rem;
+		margin-left: 0.2rem;
+		height: 20px;
+		width: 20px;
+		+ label {
+			margin-left: 2rem;
+		}
+		&:focus {
+			+ label {
+				background-color: rgba(0, 0, 0, 0.05);
+			}
+		}
+		+ label::before {
+			float: left;
+			line-height: 2rem;
+		}
+	}
+
+	.field,
+	.field-with-tooltip {
+		.radio-group-list .radio-modality {
+			height: 1.375em;
+		}
+	}
+
+	.radio-group-list {
+		.radio-modality {
+			label {
+				display: flex;
+			}
+		}
+		.radio-modality.radio-modality-block label {
+			padding-top: 0.325em;
+		}
+		.radio-modality.radio-modality-block.horizontal-options label {
+			padding-top: 0;
+		}
+	}
+
+	.radio-modality {
+		margin-bottom: 0.8em;
+	}
+
+	.radio-lunatic + label {
+		margin-top: 0.325em;
+	}
+}