@inseefr/lunatic 0.2.2-experimental → 0.2.2-prisme

package/src/components/breadcrumb/component.js

@@ -1,29 +1,29 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { buildStyleObject } from '../../utils/lib';
-import './breadcrumb.scss';
-
-const Breadcrumb = ({ elements, style }) => (
-	<div
-		aria-label={`breadcrumb`}
-		className="breadcrumb-lunatic"
-		style={buildStyleObject(style)}
-	>
-		{elements.map((e, i) => (
-			<React.Fragment key={`breadcrumb-${e.toLowerCase()}`}>
-				{e && (
-					<span className={i !== 0 ? 'breadcrumb-element-lunatic' : undefined}>
-						{e}
-					</span>
-				)}
-			</React.Fragment>
-		))}
-	</div>
-);
-
-Breadcrumb.propTypes = {
-	elements: PropTypes.arrayOf(PropTypes.string).isRequired,
-	style: PropTypes.object,
-};
-
-export default Breadcrumb;
+import React from 'react';
+import PropTypes from 'prop-types';
+import { buildStyleObject } from '../../utils/lib';
+import './breadcrumb.scss';
+
+const Breadcrumb = ({ elements, style }) => (
+	<div
+		aria-label={`breadcrumb`}
+		className="breadcrumb-lunatic"
+		style={buildStyleObject(style)}
+	>
+		{elements.map((e, i) => (
+			<React.Fragment key={`breadcrumb-${e.toLowerCase()}`}>
+				{e && (
+					<span className={i !== 0 ? 'breadcrumb-element-lunatic' : undefined}>
+						{e}
+					</span>
+				)}
+			</React.Fragment>
+		))}
+	</div>
+);
+
+Breadcrumb.propTypes = {
+	elements: PropTypes.arrayOf(PropTypes.string).isRequired,
+	style: PropTypes.object,
+};
+
+export default Breadcrumb;

package/src/components/breadcrumb/index.js

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

package/src/components/button/button.scss

@@ -1,24 +1,24 @@
-.button-lunatic {
-	min-width: 20%;
-	color: white;
-	border-color: var(--color-primary-dark);
-	background-color: var(--color-primary-dark);
-	font-size: 1.5em;
-	font-weight: bold;
-	padding: 0.4em;
-	&:hover,
-	&:focus:hover {
-		color: var(--color-primary-dark);
-		background-color: white;
-		border-color: var(--color-primary-dark);
-	}
-	&:focus {
-		outline: none;
-		background-color: var(--color-primary-light);
-		border-color: var(--color-primary-light);
-	}
-	&:disabled {
-		background: var(--color-disabled);
-		color: var(--color-primary-dark);
-	}
-}
+.button-lunatic {
+	min-width: 20%;
+	color: white;
+	border-color: var(--color-primary-dark);
+	background-color: var(--color-primary-dark);
+	font-size: 1.5em;
+	font-weight: bold;
+	padding: 0.4em;
+	&:hover,
+	&:focus:hover {
+		color: var(--color-primary-dark);
+		background-color: white;
+		border-color: var(--color-primary-dark);
+	}
+	&:focus {
+		outline: none;
+		background-color: var(--color-primary-light);
+		border-color: var(--color-primary-light);
+	}
+	&:disabled {
+		background: var(--color-disabled);
+		color: var(--color-primary-dark);
+	}
+}

package/src/components/button/component.js

@@ -1,53 +1,53 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import {
-	buildStyleObject,
-	createObjectEvent,
-	isFunction,
-} from '../../utils/lib';
-import './button.scss';
-import { BUTTON_CATEGORY, EVENT_CLICK } from '../../constants';
-
-const Button = ({
-	label,
-	value,
-	onClick,
-	disabled,
-	style,
-	logFunction,
-	id,
-}) => {
-	const handleClick = (e) => {
-		onClick(e);
-		if (isFunction(logFunction))
-			logFunction(
-				createObjectEvent(
-					`button-lunatic-${id}`,
-					BUTTON_CATEGORY,
-					EVENT_CLICK,
-					null,
-					label
-				)
-			);
-	};
-	return (
-		<button
-			type="button"
-			aria-label={label || 'button'}
-			className="button-lunatic"
-			style={buildStyleObject(style)}
-			disabled={disabled}
-			onClick={handleClick}
-		>
-			{value}
-		</button>
-	);
-};
-
-Button.propTypes = {
-	value: PropTypes.oneOfType([PropTypes.string, PropTypes.element]).isRequired,
-	disabled: PropTypes.bool,
-	onClick: PropTypes.func.isRequired,
-};
-
-export default Button;
+import React from 'react';
+import PropTypes from 'prop-types';
+import {
+	buildStyleObject,
+	createObjectEvent,
+	isFunction,
+} from '../../utils/lib';
+import './button.scss';
+import { BUTTON_CATEGORY, EVENT_CLICK } from '../../constants';
+
+const Button = ({
+	label,
+	value,
+	onClick,
+	disabled,
+	style,
+	logFunction,
+	id,
+}) => {
+	const handleClick = (e) => {
+		onClick(e);
+		if (isFunction(logFunction))
+			logFunction(
+				createObjectEvent(
+					`button-lunatic-${id}`,
+					BUTTON_CATEGORY,
+					EVENT_CLICK,
+					null,
+					label
+				)
+			);
+	};
+	return (
+		<button
+			type="button"
+			aria-label={label || 'button'}
+			className="button-lunatic"
+			style={buildStyleObject(style)}
+			disabled={disabled}
+			onClick={handleClick}
+		>
+			{value}
+		</button>
+	);
+};
+
+Button.propTypes = {
+	value: PropTypes.oneOfType([PropTypes.string, PropTypes.element]).isRequired,
+	disabled: PropTypes.bool,
+	onClick: PropTypes.func.isRequired,
+};
+
+export default Button;

package/src/components/button/index.js

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

package/src/components/checkbox/boolean.js

@@ -1,6 +1,6 @@
 import React, { useState, useEffect, useRef } from 'react';
 import PropTypes from 'prop-types';
-import missingWrapper from '../missing-wrapper';
+import componentWrapper from '../component-wrapper';
 import debounce from 'lodash.debounce';
 import Declarations from '../declarations';
 import Icon from '../icon';
@@ -169,4 +169,4 @@ CheckboxBoolean.propTypes = {
 	style: PropTypes.object,
 };
 
-export default missingWrapper(React.memo(CheckboxBoolean, U.areEqual));
+export default componentWrapper(React.memo(CheckboxBoolean, U.areEqual));

package/src/components/checkbox/group.js

@@ -1,7 +1,7 @@
 import React, { useState, useRef, useEffect } from 'react';
 import KeyboardEventHandler from 'react-keyboard-event-handler';
 import PropTypes from 'prop-types';
-import missingWrapper from '../missing-wrapper';
+import componentWrapper from '../component-wrapper';
 import debounce from 'lodash.debounce';
 import Declarations from '../declarations';
 import Icon from '../icon';
@@ -228,4 +228,4 @@ CheckboxGroup.propTypes = {
 	style: PropTypes.object,
 };
 
-export default missingWrapper(React.memo(CheckboxGroup), U.areEqual);
+export default componentWrapper(React.memo(CheckboxGroup, U.areEqual));

package/src/components/checkbox/index.js

@@ -1,3 +1,3 @@
-export { default as CheckboxGroup } from './group';
-export { default as CheckboxBoolean } from './boolean';
-export { default as CheckboxOne } from './one';
+export { default as CheckboxGroup } from './group';
+export { default as CheckboxBoolean } from './boolean';
+export { default as CheckboxOne } from './one';

package/src/components/checkbox/one.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import missingWrapper from '../missing-wrapper';
+import componentWrapper from '../component-wrapper';
 import { ListDeclarationsWrapper } from '../declarations/wrappers';
 import { areEqual } from '../../utils/lib';
 import './checkbox.scss';
@@ -8,4 +8,4 @@ const CheckboxOne = (props) => (
 	<ListDeclarationsWrapper type="checkbox" {...props} hasSpecificHandler />
 );
 
-export default missingWrapper(React.memo(CheckboxOne, areEqual));
+export default componentWrapper(React.memo(CheckboxOne, areEqual));

package/src/components/component-wrapper/controls/component.js

@@ -0,0 +1,70 @@
+import React, { useState, useEffect } from 'react';
+import * as U from '../../../utils/lib';
+import { interpret } from '../../../utils/to-expose/interpret';
+import './controls.scss';
+
+const Controls = ({ Component, props }) => {
+	// handle responses & cells
+	const {
+		response,
+		responses,
+		cells,
+		components,
+		preferences,
+		missingResponse,
+		savingType,
+	} = props;
+	// savingType or preferences[preferences.length-1]?
+	const [applyControls, setApplyControls] = useState(() =>
+		U.hasToCleanMissing(savingType)({ response, responses, cells, components })
+	);
+
+	useEffect(() => {
+		if (!applyControls) {
+			if (
+				U.hasToCleanMissing(savingType)({
+					response,
+					responses,
+					cells,
+					components,
+				})
+			) {
+				setApplyControls(true);
+			}
+		}
+	}, [response, responses, cells, components, applyControls, savingType]);
+
+	const hasMissingResponse =
+		U.getResponseByPreference(preferences)(missingResponse) !== null;
+
+	const { controls, features, bindings } = props;
+	const featuresWithoutMD = features.filter((f) => f !== 'MD');
+	const filteredControls =
+		(!applyControls && !hasMissingResponse) || !controls
+			? []
+			: controls.filter((control) => {
+					const { bindingDependencies, control: formula } = control;
+					const reducedBindings = (bindingDependencies || []).reduce(
+						(acc, bD) => ({ ...acc, [bD]: bindings[bD] }),
+						{}
+					);
+					const vectorialBindings = U.buildVectorialBindings(reducedBindings);
+					return (
+						interpret(featuresWithoutMD)(vectorialBindings)(formula) !== true
+					);
+			  }, []);
+	return (
+		<>
+			<Component {...props} />
+			<div className="lunatic-controls">
+				{filteredControls.map(({ id, errorMessage }) => (
+					<div key={`control-${id}`} className="lunatic-control">
+						{errorMessage}
+					</div>
+				))}
+			</div>
+		</>
+	);
+};
+
+export default Controls;

package/src/components/component-wrapper/controls/controls.scss

@@ -0,0 +1,6 @@
+.lunatic-controls {
+	.lunatic-control {
+		margin-top: 1em;
+		color: red;
+	}
+}

package/src/components/component-wrapper/controls/index.js

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

package/src/components/component-wrapper/controls/validators/datepicker.js

@@ -0,0 +1,44 @@
+import compareAsc from 'date-fns/compareAsc';
+import format from 'date-fns/format';
+
+export const minMaxValidatorDatepicker =
+	({ min, max, id }) =>
+	(value) => {
+		const errorMessage = getMessage(min, max, value);
+		if (errorMessage) return { id: `control-${id}`, errorMessage };
+		return null;
+	};
+
+const getMessage = (min, max, value) => {
+	if (!value) {
+		return undefined;
+	}
+	const dateFormat = 'dd-MM-yyyy';
+	const date = new Date(value);
+	if (isDef(min) && isDef(max)) {
+		const minDate = new Date(min);
+		const maxDate = new Date(max);
+		if (date < minDate || date > maxDate) {
+			const minDateAsString = minDate ? format(minDate, dateFormat) : '';
+			const maxDateAsString = maxDate ? format(maxDate, dateFormat) : '';
+			return `La date doit être comprise entre le ${minDateAsString} et le ${maxDateAsString}`;
+		}
+	}
+	if (isDef(min)) {
+		const minDate = new Date(min);
+		if (compareAsc(date, minDate) < 0) {
+			const minDateAsString = minDate ? format(minDate, dateFormat) : '';
+			return `La date doit être supérieure au ${minDateAsString}`;
+		}
+	}
+	if (isDef(max)) {
+		const maxDate = new Date(max);
+		if (compareAsc(date, maxDate) > 0) {
+			const maxDateAsString = maxDate ? format(maxDate, dateFormat) : '';
+			return `La date doit être inférieure au ${maxDateAsString}`;
+		}
+	}
+	return undefined;
+};
+
+const isDef = (d) => !isNaN(Date.parse(d));

package/src/components/component-wrapper/controls/validators/index.js

@@ -0,0 +1,16 @@
+import { minMaxValidatorInputNumber } from './input-number';
+import { minMaxValidatorDatepicker } from './datepicker';
+import * as U from '../../../../utils/lib';
+
+export const getTypeControls = (props) => {
+	const { min, max, value, response, preferences, componentType, id } = props;
+	const v =
+		value || value === null
+			? value
+			: U.getResponseByPreference(preferences)(response);
+	if (componentType === 'InputNumber')
+		return minMaxValidatorInputNumber({ id, min, max })(v);
+	if (componentType === 'Datepicker')
+		return minMaxValidatorDatepicker({ id, min, max })(v);
+	return null;
+};

package/src/components/component-wrapper/controls/validators/input-number.js

@@ -0,0 +1,23 @@
+export const minMaxValidatorInputNumber =
+	({ min, max, id }) =>
+	(value) => {
+		const errorMessage = getMessage(min, max, value);
+		if (errorMessage) return { id: `control-${id}`, errorMessage };
+		return null;
+	};
+
+const getMessage = (min, max, value) => {
+	if (!value) {
+		return undefined;
+	}
+	const valueNumber = Number(value);
+	if (!min && isDef(max) && valueNumber > max)
+		return `La valeur doit être inférieure à ${max}`;
+	else if (isDef(min) && !max && valueNumber < min)
+		return `La valeur doit être supérieure à ${min}`;
+	else if (isDef(min) && isDef(max) && (valueNumber < min || valueNumber > max))
+		return `La valeur doit être comprise entre ${min} et ${max}`;
+	return undefined;
+};
+
+const isDef = (number) => number || number === 0;

package/src/components/{missing-wrapper → component-wrapper}/index.js

@@ -1 +1 @@
-export { default } from './wrapper';
+export { default } from './wrapper';

package/src/components/component-wrapper/missing/component.js

@@ -0,0 +1,200 @@
+import React, { useEffect, useState } from 'react';
+import KeyboardEventHandler from 'react-keyboard-event-handler';
+import Button from '../../button';
+import * as U from '../../../utils/lib';
+import './missing.scss';
+
+const Missing = ({ Component, props }) => {
+	const {
+		dontKnowButton = "Don't know",
+		refusedButton = 'Refused',
+		missingResponse,
+		handleChange,
+		preferences,
+		missingStrategy,
+		missingShortcut = { dontKnow: '', refused: '' },
+		response,
+		responses,
+		cells,
+		components,
+		savingType,
+		bindings,
+		shortcut,
+		componentType,
+		paginatedLoop,
+	} = props;
+
+	const missingResponseName = U.getResponseName(missingResponse);
+	const buttonState = U.getResponseByPreference(preferences)(missingResponse);
+	const [oldMissingValue] = useState(() => buttonState);
+
+	const [bindingsForMissingStrategy, setBindingsForMissingStrategy] =
+		useState(null);
+
+	/**
+	 * Sources split: use MissingStragy only if missingResponse has been updated
+	 * Ensures that missingResponse is persisted when the source has to be changed
+	 */
+	useEffect(() => {
+		const isSameValue = buttonState === oldMissingValue;
+		if (bindingsForMissingStrategy && !isSameValue) {
+			if (U.isFunction(missingStrategy))
+				missingStrategy(bindingsForMissingStrategy);
+			setBindingsForMissingStrategy(null);
+		}
+	}, [
+		bindingsForMissingStrategy,
+		missingStrategy,
+		buttonState,
+		oldMissingValue,
+	]);
+
+	useEffect(() => {
+		if (
+			buttonState !== null &&
+			U.hasToCleanMissing(savingType)({
+				response,
+				responses,
+				cells,
+				components,
+			})
+		) {
+			handleChange({ [missingResponseName]: null });
+		}
+	}, [
+		buttonState,
+		handleChange,
+		savingType,
+		response,
+		responses,
+		cells,
+		components,
+		missingResponseName,
+	]);
+
+	const getVarsToClean = () =>
+		U.getToClean(savingType)({
+			response,
+			responses,
+			cells,
+			components,
+		});
+
+	const onClick = (value) => () => {
+		const isSameValue = buttonState === value;
+		if (!isSameValue) {
+			const toClean = getVarsToClean();
+			if (Object.keys(toClean)) {
+				const { currentPage } = props;
+				const currentIterationIndex = getCurrentIterationIndex({
+					currentPage,
+				});
+				handleChange(toClean);
+				if (U.isFunction(missingStrategy)) {
+					const { fullBindings } = props;
+					const toHandle = getVarsToHandle({
+						toClean,
+						fullBindings,
+						currentIterationIndex,
+					});
+					const missingBindings = getMissingBindings({
+						currentIterationIndex,
+						bindings,
+						fullBindings,
+						toHandle,
+					});
+					setBindingsForMissingStrategy(missingBindings);
+				}
+			} else {
+				if (U.isFunction(missingStrategy))
+					setBindingsForMissingStrategy(bindings);
+			}
+			handleChange({ [missingResponseName]: value });
+		}
+	};
+
+	if ((componentType === 'Loop' && paginatedLoop) || !missingResponse)
+		return <Component {...props} />;
+
+	return (
+		<div className="missing-wrapper">
+			<div className="missing-component">
+				<Component {...props} />
+			</div>
+			<div className="missing-buttons">
+				<span
+					className={`missing-button${
+						buttonState === U.DK ? '-active' : ''
+					} missing-button-dk${buttonState === U.DK ? '-active' : ''}`}
+				>
+					<Button
+						label="dont-know-button"
+						value={dontKnowButton}
+						disabled={!missingResponseName || missingResponseName?.length === 0}
+						onClick={onClick(U.DK)}
+					/>
+				</span>
+				<span
+					className={`missing-button${
+						buttonState === U.RF ? '-active' : ''
+					} missing-button-rf${buttonState === U.RF ? '-active' : ''}`}
+				>
+					<Button
+						label="refused-button"
+						value={refusedButton}
+						disabled={!missingResponseName || missingResponseName?.length === 0}
+						onClick={onClick(U.RF)}
+					/>
+				</span>
+			</div>
+			{shortcut &&
+				missingResponseName?.length > 0 &&
+				missingShortcut &&
+				missingShortcut.dontKnow &&
+				missingShortcut.refused && (
+					<KeyboardEventHandler
+						handleKeys={Object.values(missingShortcut)}
+						onKeyEvent={(key, e) => {
+							e.preventDefault();
+							if (key === missingShortcut.dontKnow) onClick(U.DK)();
+							if (key === missingShortcut.refused) onClick(U.RF)();
+						}}
+						handleFocusableElements
+					/>
+				)}
+		</div>
+	);
+};
+
+export default Missing;
+
+// TODO: make it recursive for Loop into Loop
+const getCurrentIterationIndex = ({ currentPage }) => {
+	const { currentIteration } = U.splitPage(currentPage, 1);
+	if (currentIteration) return currentIteration - 1;
+	return null;
+};
+
+// TODO: make it recursive for Loop into Loop
+const getVarsToHandle = ({ toClean, fullBindings, currentIterationIndex }) => {
+	if (currentIterationIndex || currentIterationIndex === 0) {
+		return Object.entries(toClean).reduce((acc, [name, value]) => {
+			const newValue = fullBindings[name].map((v, i) =>
+				i === currentIterationIndex ? value : v
+			);
+			return { ...acc, [name]: newValue };
+		}, {});
+	}
+	return toClean;
+};
+
+const getMissingBindings = ({
+	bindings,
+	fullBindings,
+	currentIterationIndex,
+	toHandle,
+}) => {
+	if (currentIterationIndex || currentIterationIndex === 0)
+		return { ...fullBindings, ...toHandle };
+	return { ...bindings, ...toHandle };
+};

package/src/components/component-wrapper/missing/index.js

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

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

@@ -0,0 +1,23 @@
+import React from 'react';
+import Missing from './missing';
+import Controls from './controls';
+
+const componentWrapper = (Component) => (props) => {
+	const { missing, controls, componentType } = props;
+	const hasC = hasControls(controls, componentType);
+	if (missing && !hasC) return <Missing Component={Component} props={props} />;
+	if (!missing && hasC) return <Controls Component={Component} props={props} />;
+	if (missing && hasC) {
+		const ControlComponent = () => (
+			<Controls Component={Component} props={props} />
+		);
+		return <Missing Component={ControlComponent} props={props} />;
+	}
+	return <Component {...props} />;
+};
+
+const hasControls = (controls, componentType) =>
+	(Array.isArray(controls) && controls.length > 0) ||
+	['InputNumber', 'Datepicker'].includes(componentType);
+
+export default componentWrapper;