@inseefr/lunatic 0.2.60 → 0.3.0-experimental

package/src/components/checkbox/checkbox.scss

@@ -1,39 +1,73 @@
-@import 'src/components/index.scss';
+.lunatic-component {
+	.checkbox-group,
+	.checkbox-group-list {
+		border: 0;
+		outline: 0;
+		padding: 0;
+	}
 
-.checkbox-group {
-	border: 0.1em solid $main_color;
-}
+	.checkbox-lunatic,
+	.checkbox-boolean-lunatic {
+		position: absolute;
+		opacity: 0;
+		margin-bottom: 0;
+		margin-top: 0.15rem;
+		margin-left: 0.2rem;
+		height: 18px;
+		width: 18px;
+		+ label {
+			margin-left: 2rem;
+		}
+		&:focus {
+			+ label {
+				background-color: rgba(0, 0, 0, 0.05);
+			}
+		}
+	}
 
-@mixin box-margin($margin: false) {
-	margin: 0;
-	margin-right: 1em;
-	margin-left: if($margin, 1em, 0);
-	margin-top: 0.5em;
-	&:focus {
-		outline: none;
-	}
-	&:checked + label {
-		border: 0.1em solid $main_color;
-		padding: 0.3em;
+	.checkbox-boolean-lunatic + label::before {
+		margin-right: -0.3rem;
 	}
-}
 
-.checkbox-lunatic {
-	@include box-margin(true);
-	&:focus {
-		box-shadow: 0 0 0.3em 0.3em $main_color;
+	.checkbox-modality,
+	.checkbox-boolean-modality {
+		margin-bottom: 0.6rem;
 	}
-}
 
-.checkbox-lunatic-no-margin {
-	@include box-margin(false);
-}
+	.field,
+	.field-with-tooltip {
+		.checkbox-group-list .checkbox-modality {
+			height: 1.375em;
+		}
+	}
 
-.checkbox-modality {
-	margin-top: 1em;
-}
+	.checkbox-group,
+	.checkbox-group-list {
+		.modality_NR {
+			margin-top: 1.5em;
+		}
+		.horizontal-options.modality_NR {
+			margin-top: 0;
+		}
+		.checkbox-modality {
+			label {
+				display: flex;
+			}
+		}
+		.checkbox-modality.checkbox-modality-block label {
+			padding-top: 0.325em;
+		}
+		.checkbox-modality.checkbox-modality-block.horizontal-options label {
+			padding-top: 0;
+		}
+	}
 
-.checkbox-alone {
-	margin-left: 0;
-	margin-top: 0.5em;
+	.checkbox-lunatic + label {
+		margin-top: 0.325em;
+	}
+
+	.checkbox-alone {
+		margin-left: 0;
+		margin-top: 0.5em;
+	}
 }

package/src/components/checkbox/group.js

@@ -1,9 +1,14 @@
-import React, { useRef, useEffect } from 'react';
+import React, { useState, useRef, useEffect } from 'react';
+import KeyboardEventHandler from 'react-keyboard-event-handler';
 import PropTypes from 'prop-types';
+import componentWrapper from '../component-wrapper';
+import debounce from 'lodash.debounce';
 import Declarations from '../declarations';
+import Icon from '../icon';
 import { TooltipResponse } from '../tooltip';
 import * as U from '../../utils/lib';
-import * as C from '../../utils/constants';
+import * as C from '../../constants';
+import { interpret } from '../../utils/to-expose';
 import './checkbox.scss';
 
 const CheckboxGroup = ({
@@ -11,89 +16,185 @@ const CheckboxGroup = ({
 	label,
 	preferences,
 	responses,
-	handleChange,
+	handleChange: propsHandleChange,
 	disabled,
 	focused,
-	keyboardSelection,
+	shortcut,
 	positioning,
 	declarations,
-	tooltip,
+	features,
+	bindings,
+	management,
 	style,
+	logFunction,
 }) => {
-	const { fieldsetStyle, checkboxStyle } = style;
+	const { fieldsetStyle, modalityStyle } = style;
 	const inputRef = useRef();
 
+	const [values, setValues] = useState(() =>
+		responses.map(({ response }) =>
+			U.getResponseByPreference(preferences)(response)
+		)
+	);
+
+	const handleChange = debounce((obj) => propsHandleChange(obj), 50);
+
+	const specificHandleChange = (e) => {
+		const [key, value] = Object.entries(e)[0];
+		if (value === false && U.responsesToClean(responses)(preferences)(key))
+			handleChange({ [key]: null });
+		else handleChange(e);
+	};
+
+	// Assume we only want to handle enable external updates
+	// Don't need to check all value changes
+	useEffect(() => {
+		const newValues = responses.map(({ response }) =>
+			U.getResponseByPreference(preferences)(response)
+		);
+		if (newValues.join('|') !== values.join('|')) setValues(newValues);
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [responses, preferences]);
+
 	useEffect(() => {
 		if (focused) inputRef.current.focus();
 	}, [focused]);
 
+	const checkedArray = [];
+
 	return (
-		<React.Fragment>
+		<>
 			<Declarations
 				id={id}
 				type={C.BEFORE_QUESTION_TEXT}
 				declarations={declarations}
+				features={features}
+				bindings={bindings}
 			/>
-
 			<fieldset
 				key={`checkbox-${id}`}
-				className="checkbox-group"
+				className="checkbox-group-list"
 				style={U.buildStyleObject(fieldsetStyle)}
 			>
-				<legend>{label}</legend>
+				<legend>{interpret(features, logFunction)(bindings)(label)}</legend>
 				<Declarations
 					id={id}
 					type={C.AFTER_QUESTION_TEXT}
 					declarations={declarations}
+					features={features}
+					bindings={bindings}
 				/>
 				{responses.map(({ id: modId, label: modLabel, response }, i) => {
-					const checked = U.getResponseByPreference(preferences)(response);
+					const checked = values[i];
+					if (checked) checkedArray.push(modId);
+					const toRef =
+						i === 0 || (checkedArray[0] && checkedArray[0] === modId);
+					const interpretedLabel = interpret(features)(bindings)(modLabel);
+					const keyboardSelectionKey =
+						responses.length < 10 ? `${i + 1}` : U.getAlphabet()[i];
 					return (
-						<div className="field-container" key={`checkbox-${id}-${modId}`}>
-							<div className={`${tooltip ? 'field-with-tooltip' : 'field'}`}>
+						<div
+							className={`${U.getItemsPositioningClass(positioning)}`}
+							key={`checkbox-${id}-${modId}`}
+						>
+							<div className="field-container">
 								<div
-									className={`checkbox-modality ${U.getItemsPositioningClass(
-										positioning
-									)}`}
+									className={`${management ? 'field-with-tooltip' : 'field'}`}
 								>
-									<input
-										type="checkbox"
-										id={`checkbox-${id}-${modId}`}
-										ref={inputRef}
-										key={`checkbox-${id}-${modId}`}
-										aria-labelledby={`input-label-${id}-${modId}`}
-										className="checkbox-lunatic"
-										checked={checked}
-										disabled={disabled}
-										onChange={e => {
-											handleChange({
-												[U.getResponseName(response)]: e.target.checked,
-											});
-										}}
-									/>
-									<label
-										htmlFor={`checkbox-${id}-${modId}`}
-										id={`input-label-${id}-${modId}`}
-										style={checked ? U.buildStyleObject(checkboxStyle) : {}}
+									<div
+										className={`checkbox-modality ${
+											checked ? 'content-checked' : ''
+										}`}
 									>
-										{keyboardSelection
-											? `${U.getAlphabet()[i].toUpperCase()} - ${modLabel}`
-											: modLabel}
-									</label>
+										<Icon type="checkbox" checked={checked} disabled={disabled}>
+											<input
+												type="checkbox"
+												id={`checkbox-${id}-${modId}`}
+												ref={toRef ? inputRef : null}
+												key={`checkbox-${id}-${modId}`}
+												aria-labelledby={`input-label-${id}-${modId}`}
+												className="checkbox-lunatic"
+												checked={checked || false}
+												disabled={disabled}
+												onChange={({ target: { checked } }) => {
+													setValues(
+														values.map((v, j) => (i === j ? checked : v))
+													);
+													specificHandleChange({
+														[U.getResponseName(response)]: checked,
+													});
+													if (U.isFunction(logFunction))
+														logFunction(
+															U.createObjectEvent(
+																`checkbox-${id}-${modId}`,
+																C.INPUT_CATEGORY,
+																C.EVENT_SELECTION,
+																U.getResponseName(response),
+																checked
+															)
+														);
+												}}
+											/>
+											<label
+												htmlFor={`checkbox-${id}-${modId}`}
+												id={`input-label-${id}-${modId}`}
+												style={checked ? U.buildStyleObject(modalityStyle) : {}}
+												className="modality-label"
+											>
+												{shortcut && (
+													<span className="code-modality">
+														{keyboardSelectionKey.toUpperCase()}
+													</span>
+												)}
+												{interpretedLabel}
+											</label>
+										</Icon>
+									</div>
 								</div>
+								{management && (
+									<div className="tooltip">
+										<TooltipResponse
+											id={id}
+											response={U.buildBooleanTooltipResponse(response)}
+										/>
+									</div>
+								)}
 							</div>
-							{tooltip && (
-								<div className="tooltip">
-									<TooltipResponse id={id} response={response} />
-								</div>
+							{shortcut && (
+								<KeyboardEventHandler
+									handleKeys={[keyboardSelectionKey.toLowerCase()]}
+									onKeyEvent={(key, e) => {
+										e.preventDefault();
+										setValues(values.map((v, j) => (i === j ? !checked : v)));
+										specificHandleChange({
+											[U.getResponseName(response)]: !checked,
+										});
+										if (U.isFunction(logFunction))
+											logFunction(
+												U.createObjectEvent(
+													`checkbox-${id}-${modId}`,
+													C.INPUT_CATEGORY,
+													C.EVENT_SELECTION,
+													U.getResponseName(response),
+													!checked
+												)
+											);
+									}}
+									handleFocusableElements
+								/>
 							)}
 						</div>
 					);
 				})}
 			</fieldset>
-
-			<Declarations id={id} type={C.DETACHABLE} declarations={declarations} />
-		</React.Fragment>
+			<Declarations
+				id={id}
+				type={C.DETACHABLE}
+				declarations={declarations}
+				features={features}
+				bindings={bindings}
+			/>
+		</>
 	);
 };
 
@@ -103,11 +204,12 @@ CheckboxGroup.defaultProps = {
 	responses: [],
 	disabled: false,
 	focused: false,
-	keyboardSelection: false,
 	positioning: 'DEFAULT',
 	declarations: [],
-	tooltip: false,
-	style: { fieldsetStyle: {}, checkboxStyle: {} },
+	features: [],
+	bindings: {},
+	management: false,
+	style: { fieldsetStyle: {}, modalityStyle: {} },
 };
 
 CheckboxGroup.propTypes = {
@@ -118,11 +220,12 @@ CheckboxGroup.propTypes = {
 	handleChange: PropTypes.func.isRequired,
 	disabled: PropTypes.bool,
 	focused: PropTypes.bool,
-	keyboardSelection: PropTypes.bool,
 	positioning: PropTypes.oneOf(['DEFAULT', 'HORIZONTAL', 'VERTICAL']),
 	declarations: U.declarationsPropTypes,
-	tooltip: PropTypes.bool,
+	features: PropTypes.arrayOf(PropTypes.string),
+	bindings: PropTypes.object,
+	management: PropTypes.bool,
 	style: PropTypes.object,
 };
 
-export default CheckboxGroup;
+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,132 +1,11 @@
-import React, { useEffect, useRef } from 'react';
-import PropTypes from 'prop-types';
-import Declarations from '../declarations';
-import { TooltipResponse } from '../tooltip';
-import * as U from '../../utils/lib';
-import * as C from '../../utils/constants';
+import React from 'react';
+import componentWrapper from '../component-wrapper';
+import { ListDeclarationsWrapper } from '../declarations/wrappers';
+import { areEqual } from '../../utils/lib';
 import './checkbox.scss';
 
-const CheckboxOne = ({
-	id,
-	label,
-	preferences,
-	response,
-	options,
-	handleChange,
-	positioning,
-	disabled,
-	keyboardSelection,
-	focused,
-	declarations,
-	tooltip,
-	style,
-}) => {
-	const inputRef = useRef();
+const CheckboxOne = (props) => (
+	<ListDeclarationsWrapper type="checkbox" {...props} hasSpecificHandler />
+);
 
-	useEffect(() => {
-		if (focused) inputRef.current.focus();
-	}, [focused]);
-
-	const { fieldsetStyle, checkboxStyle } = style;
-
-	return (
-		<React.Fragment>
-			<Declarations
-				id={id}
-				type={C.BEFORE_QUESTION_TEXT}
-				declarations={declarations}
-			/>
-			<div className="field-container">
-				<div className={`${tooltip ? 'field-with-tooltip' : 'field'}`}>
-					<fieldset
-						key={`checkbox-one-${id}`}
-						className="checkbox-group"
-						style={U.buildStyleObject(fieldsetStyle)}
-					>
-						<legend>{label}</legend>
-						<Declarations
-							id={id}
-							type={C.AFTER_QUESTION_TEXT}
-							declarations={declarations}
-						/>
-						{options.map(({ label: optionLabel, value: optionValue }, i) => {
-							const checked =
-								U.getResponseByPreference(preferences)(response) ===
-								optionValue;
-							return (
-								<div
-									key={`checkbox-one-${id}-${optionValue}`}
-									className={`checkbox-modality ${U.getItemsPositioningClass(
-										positioning
-									)}`}
-								>
-									<input
-										type="checkbox"
-										id={`checkbox-one-${id}-${optionValue}`}
-										ref={inputRef}
-										key={`checkbox-one-${id}-${optionValue}`}
-										aria-labelledby={`input-label-${id}-${optionValue}`}
-										className="checkbox-lunatic"
-										checked={checked}
-										disabled={disabled}
-										onChange={() =>
-											handleChange({
-												[U.getResponseName(response)]: optionValue,
-											})
-										}
-									/>
-									<label
-										htmlFor={`checkbox-one-${id}-${optionValue}`}
-										id={`input-label-${id}-${optionValue}`}
-										style={checked ? U.buildStyleObject(checkboxStyle) : {}}
-									>
-										{keyboardSelection
-											? `${U.getAlphabet()[i].toUpperCase()} - ${optionLabel}`
-											: optionLabel}
-									</label>
-								</div>
-							);
-						})}
-					</fieldset>
-				</div>
-				{tooltip && (
-					<div className="tooltip">
-						<TooltipResponse id={id} response={U.buildResponse(options)(response)} />
-					</div>
-				)}
-			</div>
-			<Declarations id={id} type={C.DETACHABLE} declarations={declarations} />
-		</React.Fragment>
-	);
-};
-
-CheckboxOne.defaultProps = {
-	label: '',
-	preferences: ['COLLECTED'],
-	response: {},
-	disabled: false,
-	focused: false,
-	keyboardSelection: false,
-	positioning: 'DEFAULT',
-	declarations: [],
-	tooltip: false,
-	style: { fieldsetStyle: {}, checkboxStyle: {} },
-};
-
-CheckboxOne.propTypes = {
-	id: PropTypes.string.isRequired,
-	label: PropTypes.string,
-	preferences: PropTypes.arrayOf(U.valueTypePropTypes),
-	response: U.responsePropTypes,
-	options: U.optionsPropTypes,
-	handleChange: PropTypes.func.isRequired,
-	disabled: PropTypes.bool,
-	focused: PropTypes.bool,
-	keyboardSelection: PropTypes.bool,
-	positioning: PropTypes.oneOf(['DEFAULT', 'HORIZONTAL', 'VERTICAL']),
-	declarations: U.declarationsPropTypes,
-	tooltip: PropTypes.bool,
-	style: PropTypes.object,
-};
-
-export default CheckboxOne;
+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,33 @@
+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 (isNaN(Date.parse(min))) return undefined;
+	if (isNaN(Date.parse(max))) return undefined;
+	const minDate = new Date(min);
+	const maxDate = new Date(max);
+	const minDateAsString = minDate ? format(minDate, dateFormat) : '';
+	const maxDateAsString = maxDate ? format(maxDate, dateFormat) : '';
+	if (!min && isDef(max) && compareAsc(date, maxDate) > 0)
+		return `La date doit être inférieure au ${maxDateAsString}`;
+	else if (isDef(min) && !max && compareAsc(date, minDate) > 0)
+		return `La date doit être supérieure au ${minDateAsString}`;
+	else if (isDef(min) && isDef(max) && (date < minDate || date > maxDate))
+		return `La date doit être comprise entre le ${minDateAsString} et le ${maxDateAsString}`;
+	return undefined;
+};
+
+const isDef = (d) => 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/component-wrapper/index.js

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