@inseefr/lunatic 0.1.0-hackathon → 0.1.0-v2

package/src/components/commons/use-on-handle-change.js

@@ -0,0 +1,16 @@
+import { useCallback } from 'react';
+
+function useOnHandleChange({ handleChange, response, value }) {
+	const onHandlechange = useCallback(
+		function (valueOption) {
+			if (value !== valueOption) {
+				handleChange(response, valueOption);
+			}
+		},
+		[handleChange, response, value]
+	);
+
+	return onHandlechange;
+}
+
+export default useOnHandleChange;

package/src/components/commons/use-options-keydown.js

@@ -0,0 +1,22 @@
+import { useCallback } from 'react';
+
+function useOptionsKeydown(options, onClick) {
+	const onKeyDown = useCallback(
+		function ({ key, index }) {
+			const { length } = options;
+
+			if (key === 'ArrowRight' || key === 'ArrowDown') {
+				const next = index === length - 1 ? 0 : index + 1;
+				onClick(options[next].value);
+			} else if (key === 'ArrowLeft' || key === 'ArrowUp') {
+				const next = index === 0 ? length - 1 : index - 1;
+				onClick(options[next].value);
+			}
+		},
+		[onClick, options]
+	);
+
+	return onKeyDown;
+}
+
+export default useOptionsKeydown;

package/src/components/commons/use-previous.js

@@ -0,0 +1,11 @@
+import { useEffect, useRef } from 'react';
+
+function usePrevious(value) {
+	const ref = useRef();
+	useEffect(() => {
+		ref.current = value;
+	}, [value]);
+	return ref.current;
+}
+
+export default usePrevious;

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/{missing-wrapper → component-wrapper}/index.js

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

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

@@ -1,7 +1,7 @@
 import React, { useEffect } from 'react';
 import KeyboardEventHandler from 'react-keyboard-event-handler';
-import Button from '../button';
-import * as U from '../../utils/lib';
+import Button from '../../button';
+import * as U from '../../../utils/lib';
 import './missing.scss';
 
 const Missing = ({ Component, props }) => {
@@ -20,6 +20,8 @@ const Missing = ({ Component, props }) => {
 		savingType,
 		bindings,
 		shortcut,
+		componentType,
+		missingLoopIteration,
 	} = props;
 
 	const buttonState = U.getResponseByPreference(preferences)(missingResponse);
@@ -57,19 +59,44 @@ const Missing = ({ Component, props }) => {
 
 	const onClick = (value) => () => {
 		const isSameValue = buttonState === value;
-		const newValue = isSameValue ? null : value;
-		const toClean = getVarsToClean();
-		if (Object.keys(toClean)) {
-			handleChange(toClean);
-			if (U.isFunction(missingStrategy) && !isSameValue)
-				missingStrategy({ ...bindings, ...toClean });
-		} else {
-			if (U.isFunction(missingStrategy) && !isSameValue)
-				missingStrategy(bindings);
+		if (!isSameValue) {
+			const toClean = getVarsToClean();
+			if (Object.keys(toClean)) {
+				const { missingLoopIteration, currentPage } = props;
+				const currentIterationIndex = getCurrentIterationIndex({
+					currentPage,
+					missingLoopIteration,
+				});
+				handleChange(toClean);
+				if (U.isFunction(missingStrategy)) {
+					const { fullBindings } = props;
+					const toHandle = getVarsToHandle({
+						toClean,
+						fullBindings,
+						currentIterationIndex,
+					});
+					const missingBindings = getMissingBindings({
+						currentIterationIndex,
+						bindings,
+						fullBindings,
+						toHandle,
+					});
+					missingStrategy(missingBindings);
+				}
+			} else {
+				if (U.isFunction(missingStrategy)) missingStrategy(bindings);
+			}
+			handleChange({ [U.getResponseName(missingResponse)]: value });
 		}
-		handleChange({ [U.getResponseName(missingResponse)]: newValue });
 	};
 
+	if (
+		componentType === 'Loop' ||
+		missingLoopIteration ||
+		missingLoopIteration === 0
+	)
+		return <Component {...props} />;
+
 	return (
 		<div className="missing-wrapper">
 			<div className="missing-component">
@@ -118,3 +145,36 @@ const Missing = ({ Component, props }) => {
 };
 
 export default Missing;
+
+// TODO: make it recursive for Loop into Loop
+const getCurrentIterationIndex = ({ currentPage, missingLoopIteration }) => {
+	const { currentIteration } = U.splitPage(currentPage, 1);
+	if (currentIteration) return currentIteration - 1;
+	if (missingLoopIteration || missingLoopIteration === 0)
+		return missingLoopIteration;
+	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 hasControls = (controls, componentType) =>
+	(Array.isArray(controls) && controls.length > 0) ||
+	['InputNumber', 'Datepicker'].includes(componentType);
+
+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} />;
+};
+
+export default componentWrapper;

package/src/components/components.js

@@ -1,18 +1,22 @@
-export { default as Breadcrumb } from './breadcrumb';
-export { default as Button } from './button';
-export * from './checkbox';
-export { default as Datepicker } from './datepicker';
-export { default as Declarations } from './declarations';
-export { default as Dropdown } from './dropdown';
-export * from './input';
-export { default as FilterDescription } from './filter-description';
-export { default as ProgressBar } from './progress-bar';
-export { default as Radio } from './radio';
-export { default as Loop } from './loop';
-export * from './loop-constructor';
-export { default as Sequence } from './sequence';
-export { default as Subsequence } from './subsequence';
-export { default as Suggester } from './suggester';
-export { default as Textarea } from './textarea';
-export { default as SuggesterLoaderWidget } from './suggester-loader-widget';
-export { TooltipResponse } from './tooltip';
+export { default as Breadcrumb } from './breadcrumb';
+export { default as Button } from './button';
+export * from './checkbox';
+export { default as Datepicker } from './datepicker';
+export { default as Switch } from './switch';
+export { default as Declarations } from './declarations';
+export { default as Dropdown } from './dropdown';
+export { default as Input } from './input';
+export { default as InputNumber } from './input-number';
+export { default as FilterDescription } from './filter-description';
+export { default as Modal } from './modal';
+export { default as ProgressBar } from './progress-bar';
+export { default as Radio } from './radio';
+export { default as Loop } from './loop';
+export { default as RosterForLoop } from './loop';
+export * from './loop-constructor';
+export { default as Sequence } from './sequence';
+export { default as Subsequence } from './subsequence';
+export { default as Suggester } from './suggester';
+export { default as Textarea } from './textarea';
+export { default as SuggesterLoaderWidget } from './suggester-loader-widget';
+export { TooltipResponse } from './tooltip';

package/src/components/datepicker/datepicker.js

@@ -0,0 +1,25 @@
+import React, { useCallback } from 'react';
+import classnames from 'classnames';
+import './datepicker.scss';
+
+function Datepicker({ disabled, readOnly, value, onChange, labelId }) {
+	const handleChange = useCallback(
+		function (e) {
+			const value = e.target.value;
+			onChange(value);
+		},
+		[onChange]
+	);
+	return (
+		<input
+			className={classnames('datepicker-lunatic', { disabled, readOnly })}
+			type="date"
+			labelledby={labelId}
+			readOnly={readOnly}
+			disabled={disabled}
+			value={value}
+			onChange={handleChange}
+		/>
+	);
+}
+export default Datepicker;

package/src/components/datepicker/index.js

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

package/src/components/datepicker/lunatic-datepicker.js

@@ -0,0 +1,50 @@
+import React from 'react';
+import { InputContainer } from '../commons';
+import Datepicker from './datepicker';
+import { useOnHandleChange } from '../commons';
+import './datepicker.scss';
+
+function LunaticDatepicker({
+	declarations,
+	executeExpression,
+	label,
+	id,
+	response,
+	value,
+	handleChange,
+	disabled,
+	readOnly,
+	iteration,
+	bindingDependencies,
+}) {
+	const onChange = useOnHandleChange({ handleChange, response, value });
+
+	const inputId = `lunatic-datepicker-${id}`;
+	const labelId = `lunatic-datepicker-label-${id}`;
+
+	return (
+		<InputContainer
+			declarations={declarations}
+			executeExpression={executeExpression}
+			label={label}
+			id={id}
+			value={value}
+			inputId={inputId}
+			labelId={labelId}
+			labelClassName="todo"
+			iteration={iteration}
+			bindingDependencies={bindingDependencies}
+		>
+			<Datepicker
+				id={inputId}
+				labelledBy={labelId}
+				value={value}
+				onChange={onChange}
+				disabled={disabled}
+				readOnly={readOnly}
+			/>
+		</InputContainer>
+	);
+}
+
+export default LunaticDatepicker;

package/src/components/declarations/declaration.js

@@ -0,0 +1,11 @@
+import React from 'react';
+
+function Declaration({ children, type }) {
+	return (
+		<div className={`declaration-lunatic declaration-${type.toLowerCase()}`}>
+			{children}
+		</div>
+	);
+}
+
+export default Declaration;

package/src/components/declarations/declarations-after-text.js

@@ -0,0 +1,8 @@
+import React from 'react';
+import Declarations, { DECLARATION_POSITIONS } from './declarations';
+
+function DeclarationsAfterText(props) {
+	return <Declarations type={DECLARATION_POSITIONS.after} {...props} />;
+}
+
+export default DeclarationsAfterText;

package/src/components/declarations/declarations-before-text.js

@@ -0,0 +1,8 @@
+import React from 'react';
+import Declarations, { DECLARATION_POSITIONS } from './declarations';
+
+function DeclarationsBeforeText(props) {
+	return <Declarations type={DECLARATION_POSITIONS.before} {...props} />;
+}
+
+export default DeclarationsBeforeText;

package/src/components/declarations/declarations-detachable.js

@@ -0,0 +1,8 @@
+import React from 'react';
+import Declarations, { DECLARATION_POSITIONS } from './declarations';
+
+function DeclarationsDetachable(props) {
+	return <Declarations type={DECLARATION_POSITIONS.detachable} {...props} />;
+}
+
+export default DeclarationsDetachable;

package/src/components/declarations/declarations.js

@@ -0,0 +1,35 @@
+import React from 'react';
+import './declarations.scss';
+import Declaration from './declaration';
+
+export const DECLARATION_POSITIONS = {
+	after: 'AFTER_QUESTION_TEXT',
+	before: 'BEFORE_QUESTION_TEXT',
+	detachable: 'DETACHABLE',
+};
+
+function Declarations({ id, type, declarations, logFunction }) {
+	const filtered = declarations.filter(({ position }) => position === type);
+	if (filtered.length === 0) return null;
+
+	return (
+		<div id={`declarations-${id}-${type}`} className="declarations-lunatic">
+			{filtered.map(({ id: idD, label, declarationType }) => (
+				<Declaration key={`${idD}`} type={declarationType.toLowerCase()}>
+					{label}
+				</Declaration>
+			))}
+		</div>
+	);
+}
+
+Declarations.defaultProps = {
+	type: 'AFTER_QUESTION_TEXT',
+	declarations: [],
+	features: [],
+	bindings: {},
+};
+
+Declarations.propTypes = {};
+
+export default Declarations;

package/src/components/declarations/index.js

@@ -1 +1,4 @@
-export { default } from './component';
+export { default, DECLARATION_POSITIONS } from './declarations';
+export { default as DeclarationsBeforeText } from './declarations-before-text';
+export { default as DeclarationsAfterText } from './declarations-after-text';
+export { default as DeclarationsDetachable } from './declarations-detachable';

package/src/components/declarations/wrappers/input-declarations-wrapper.js

@@ -36,6 +36,7 @@ const InputDeclarationsWrapper = ({
 	isInputNumber,
 	numberAsTextfield,
 	logFunction,
+	componentType,
 }) => {
 	const inputRef = useRef();
 	const createEventFocus = (focusIn = true) =>
@@ -46,12 +47,15 @@ const InputDeclarationsWrapper = ({
 			U.getResponseName(response),
 			value
 		);
+
 	const [value, setValue] = useState(() =>
 		U.getResponseByPreference(preferences)(response)
 	);
 
 	const [messagesError, setMessagesError] = useState(
-		validators.map((v) => v(value)).filter((m) => m !== undefined)
+		validators
+			.map((v) => v({ min, max, value, preferences, componentType, id }))
+			.filter((m) => m)
 	);
 
 	useEffect(() => {
@@ -68,17 +72,30 @@ const InputDeclarationsWrapper = ({
 
 	const validate = (v) => {
 		setMessagesError(
-			validators.map((f) => f(v)).filter((m) => m !== undefined)
+			validators
+				.map((v) => v({ min, max, value: v, preferences, componentType, id }))
+				.filter((m) => m)
 		);
 	};
 
 	useEffect(() => {
-		if (isInputNumber) {
+		if (['InputNumber', 'Datepicker'].includes(componentType)) {
 			setMessagesError(
-				validators.map((v) => v(value)).filter((m) => m !== undefined)
+				validators
+					.map((v) => v({ min, max, value, preferences, componentType, id }))
+					.filter((m) => m)
 			);
 		}
-	}, [value, min, max, validators, isInputNumber]);
+	}, [
+		value,
+		min,
+		max,
+		validators,
+		isInputNumber,
+		id,
+		preferences,
+		componentType,
+	]);
 
 	const handleChangeOnBlur = () => {
 		const initValue = U.getResponseByPreference(preferences)(response);
@@ -143,7 +160,10 @@ const InputDeclarationsWrapper = ({
 							placeholder={placeholder}
 							autoComplete={autoComplete ? 'on' : 'off'}
 							className={`${roleType}-lunatic ${
-								isInputNumber && messagesError.length > 0 ? 'warning' : ''
+								(isInputNumber || roleType === 'datepicker') &&
+								messagesError.length > 0
+									? 'warning'
+									: ''
 							}`}
 							style={U.buildStyleObject(style)}
 							readOnly={readOnly}
@@ -154,12 +174,20 @@ const InputDeclarationsWrapper = ({
 							onChange={(e) => {
 								const v = e.target.value;
 								if (
+									([null, ''].includes(v) && value.length > 0) ||
+									([null, ''].includes(value) && v.length > 0)
+								) {
+									setValue(v);
+									handleChange({
+										[U.getResponseName(response)]: v,
+									});
+								} else if (
 									// Chrome
 									(Object.getPrototypeOf(e.nativeEvent).constructor.name ===
 										'Event' &&
 										roleType !== 'datepicker') ||
 									// FF hack: impossible to handle arrow events
-									Math.abs(v - value) === 1
+									(Math.abs(v - value) === 1 && isInputNumber)
 								) {
 									setValue(v);
 									handleChange({
@@ -197,11 +225,11 @@ const InputDeclarationsWrapper = ({
 						</div>
 					)}
 				</div>
-				{isInputNumber && (
-					<div className="lunatic-input-number-errors">
-						{messagesError.map((m, i) => (
-							<div key={i} className="error">
-								{m}
+				{messagesError.length > 0 && (
+					<div className="lunatic-controls">
+						{messagesError.map(({ id, errorMessage }) => (
+							<div key={`control-${id}`} className="lunatic-control">
+								{errorMessage}
 							</div>
 						))}
 					</div>