@inseefr/lunatic 0.2.63 → 0.3.3-experimental

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

@@ -0,0 +1 @@
+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/missing/missing.scss

@@ -0,0 +1,32 @@
+.lunatic-component {
+	.missing-wrapper {
+		.missing-buttons {
+			margin-top: 1em;
+			.button-lunatic {
+				width: 4em;
+				font-size: 1em;
+				font-weight: normal;
+			}
+			.missing-button {
+				.button-lunatic {
+					background-color: var(--color-very-very-light);
+					color: var(--color-primary-dark);
+					&:hover {
+						background-color: white;
+						color: var(--color-primary-main);
+					}
+				}
+			}
+			.missing-button-active {
+				.button-lunatic {
+					background-color: var(--color-primary-dark);
+					color: var(--color-very-very-light);
+					&:hover {
+						background-color: var(--color-primary-main);
+						color: white;
+					}
+				}
+			}
+		}
+	}
+}

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;

package/src/components/components.js

@@ -1,13 +1,19 @@
 export { default as Breadcrumb } from './breadcrumb';
 export { default as Button } from './button';
-export { CheckboxGroup, CheckboxOne, CheckboxBoolean } from './checkbox';
+export * from './checkbox';
 export { default as Datepicker } from './datepicker';
 export { default as Declarations } from './declarations';
 export { default as Dropdown } from './dropdown';
-export { Input, InputNumber } from './input';
+export * from './input';
+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 * 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/component.js

@@ -1,113 +1,26 @@
-import React, { useEffect, useRef } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
-import { TooltipResponse } from '../tooltip';
-import Declarations from '../declarations';
-import * as U from '../../utils/lib';
-import * as C from '../../utils/constants';
+import componentWrapper from '../component-wrapper';
+import { InputDeclarationsWrapper } from '../declarations/wrappers';
+import { areEqual } from '../../utils/lib';
+import { getTypeControls } from '../component-wrapper/controls/validators';
 import './datepicker.scss';
 
-const Datepicker = ({
-	id,
-	label,
-	preferences,
-	response,
-	placeholder,
-	handleChange,
-	readOnly,
-	labelPosition,
-	required,
-	focused,
-	declarations,
-	tooltip,
-	style,
-}) => {
-	const inputRef = useRef();
-
-	useEffect(() => {
-		if (focused) inputRef.current.focus();
-	}, [focused]);
-
-	return (
-		<React.Fragment>
-			<Declarations
-				id={id}
-				type={C.BEFORE_QUESTION_TEXT}
-				declarations={declarations}
-			/>
-			<div className={U.getLabelPositionClass(labelPosition)}>
-				{label && (
-					<label
-						htmlFor={`datepicker-${id}`}
-						id={`input-label-${id}`}
-						className={`${required ? 'required' : ''}`}
-					>
-						{label}
-					</label>
-				)}
-				<Declarations
-					id={id}
-					type={C.AFTER_QUESTION_TEXT}
-					declarations={declarations}
-				/>
-				<div className="field-container">
-					<div className={`${tooltip ? 'field-with-tooltip' : 'field'}`}>
-						<input
-							type="date"
-							id={`datepicker-${id}`}
-							ref={inputRef}
-							value={U.getResponseByPreference(preferences)(response)}
-							placeholder={placeholder || ''}
-							className="datepicker-lunatic"
-							style={U.buildStyleObject(style)}
-							readOnly={readOnly}
-							required={required}
-							aria-required={required}
-							onChange={e =>
-								handleChange({
-									[U.getResponseName(response)]: e.target.value,
-								})
-							}
-						/>
-					</div>
-					{tooltip && (
-						<div className="tooltip">
-							<TooltipResponse id={id} response={response} />
-						</div>
-					)}
-				</div>
-			</div>
-			<Declarations id={id} type={C.DETACHABLE} declarations={declarations} />
-		</React.Fragment>
-	);
-};
+const Datepicker = (props) => (
+	<InputDeclarationsWrapper
+		type="date"
+		roleType="datepicker"
+		{...props}
+		validators={[getTypeControls]}
+	/>
+);
 
 Datepicker.defaultProps = {
-	preferences: ['COLLECTED'],
-	placeholder: '',
-	readOnly: false,
-	labelPosition: 'DEFAULT',
-	required: false,
-	focused: false,
-	response: {},
-	declarations: [],
-	tooltip: false,
-	style: {},
+	validators: [],
 };
 
 Datepicker.propTypes = {
-	id: PropTypes.string,
-	label: PropTypes.string,
-	preferences: PropTypes.arrayOf(U.valueTypePropTypes),
-	response: U.responsePropTypes,
-	placeholder: PropTypes.string,
-	handleChange: PropTypes.func.isRequired,
-	readOnly: PropTypes.bool,
-	labelPosition: PropTypes.oneOf(['DEFAULT', 'TOP', 'BOTTOM', 'LEFT', 'RIGHT']),
-	required: PropTypes.bool,
-	focused: PropTypes.bool,
-	declarations: U.declarationsPropTypes,
-	tooltip: PropTypes.bool,
-	style: PropTypes.object,
+	validators: PropTypes.arrayOf(PropTypes.func),
 };
 
-export default Datepicker;
+export default componentWrapper(React.memo(Datepicker, areEqual));

package/src/components/datepicker/datepicker.scss

@@ -1,16 +1 @@
-@import 'src/components/index.scss';
-
-.datepicker-lunatic {
-	width: 100%;
-	box-sizing: border-box;
-	border: solid 2px $main_color;
-	border-radius: 10px;
-	padding: 5px;
-	&:focus {
-		outline: none;
-		box-shadow: 0 0 10px $main_color;
-	}
-	&:read-only {
-		background-color: $disabled;
-	}
-}
+// see input.scss

package/src/components/datepicker/index.js

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

package/src/components/declarations/component.js

@@ -1,10 +1,19 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import * as U from '../../utils/lib';
+import { interpret } from '../../utils/to-expose';
 import './declarations.scss';
 
-const Declarations = ({ id, type, declarations }) => {
+const Declarations = ({
+	id,
+	type,
+	declarations,
+	features,
+	bindings,
+	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 }) => (
@@ -12,7 +21,7 @@ const Declarations = ({ id, type, declarations }) => {
 					key={`${idD}`}
 					className={`declaration-lunatic declaration-${declarationType.toLowerCase()}`}
 				>
-					{label}
+					{interpret(features, logFunction)(bindings)(label)}
 				</div>
 			))}
 		</div>
@@ -22,12 +31,16 @@ const Declarations = ({ id, type, declarations }) => {
 Declarations.defaultProps = {
 	type: 'AFTER_QUESTION_TEXT',
 	declarations: [],
+	features: [],
+	bindings: {},
 };
 
 Declarations.propTypes = {
 	id: PropTypes.string.isRequired,
 	type: PropTypes.string,
 	declarations: U.declarationsPropTypes,
+	features: PropTypes.arrayOf(PropTypes.string),
+	bindings: PropTypes.object,
 };
 
 export default Declarations;

package/src/components/declarations/declarations.scss

@@ -1,34 +1,40 @@
-.declaration-instruction {
-	font-style: italic;
-	font-size: 80%;
-}
+.lunatic-component {
+	.declarations-lunatic {
+		margin-bottom: 0.4rem;
+	}
 
-.declaration-comment {
-	font-size: 80%;
-}
+	.declaration-instruction {
+		font-style: italic;
+		font-size: 80%;
+	}
 
-.declaration-statement {
-	font-style: italic;
-	font-size: 80%;
-	color: blue;
-}
+	.declaration-comment {
+		font-size: 80%;
+	}
 
-.declaration-help {
-	font-style: italic;
-	font-size: 80%;
-	color: green;
-}
+	.declaration-statement {
+		font-style: italic;
+		font-size: 80%;
+		color: blue;
+	}
 
-.declaration-warning {
-	font-style: bold;
-	font-size: 80%;
-	color: red;
-}
+	.declaration-help {
+		font-style: italic;
+		font-size: 80%;
+		color: green;
+	}
+
+	.declaration-warning {
+		font-style: bold;
+		font-size: 80%;
+		color: red;
+	}
 
-.declaration-message_filter {
-	font-size: 100%;
-	color: rgb(73, 66, 66);
-	&:before {
-		content: '→ ';
+	.declaration-message_filter {
+		font-size: 100%;
+		color: rgb(73, 66, 66);
+		&:before {
+			content: '→ ';
+		}
 	}
 }

package/src/components/declarations/index.js

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

package/src/components/declarations/wrappers/index.js

@@ -0,0 +1,3 @@
+export { default as InputDeclarationsWrapper } from './input-declarations-wrapper';
+export { default as ListDeclarationsWrapper } from './list-declarations-wrapper';
+export { default as SimpleDeclarationsWrapper } from './simple-declarations-wrapper';