@inseefr/lunatic 0.3.3-experimental → 0.3.4-v2

package/src/components/checkbox/group.js

@@ -1,231 +0,0 @@
-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 '../../constants';
-import { interpret } from '../../utils/to-expose';
-import './checkbox.scss';
-
-const CheckboxGroup = ({
-	id,
-	label,
-	preferences,
-	responses,
-	handleChange: propsHandleChange,
-	disabled,
-	focused,
-	shortcut,
-	positioning,
-	declarations,
-	features,
-	bindings,
-	management,
-	style,
-	logFunction,
-}) => {
-	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 (
-		<>
-			<Declarations
-				id={id}
-				type={C.BEFORE_QUESTION_TEXT}
-				declarations={declarations}
-				features={features}
-				bindings={bindings}
-			/>
-			<fieldset
-				key={`checkbox-${id}`}
-				className="checkbox-group-list"
-				style={U.buildStyleObject(fieldsetStyle)}
-			>
-				<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 = 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={`${U.getItemsPositioningClass(positioning)}`}
-							key={`checkbox-${id}-${modId}`}
-						>
-							<div className="field-container">
-								<div
-									className={`${management ? 'field-with-tooltip' : 'field'}`}
-								>
-									<div
-										className={`checkbox-modality ${
-											checked ? 'content-checked' : ''
-										}`}
-									>
-										<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>
-							{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}
-				features={features}
-				bindings={bindings}
-			/>
-		</>
-	);
-};
-
-CheckboxGroup.defaultProps = {
-	label: '',
-	preferences: ['COLLECTED'],
-	responses: [],
-	disabled: false,
-	focused: false,
-	positioning: 'DEFAULT',
-	declarations: [],
-	features: [],
-	bindings: {},
-	management: false,
-	style: { fieldsetStyle: {}, modalityStyle: {} },
-};
-
-CheckboxGroup.propTypes = {
-	id: PropTypes.string.isRequired,
-	label: PropTypes.string,
-	preferences: PropTypes.arrayOf(U.valueTypePropTypes),
-	response: U.responsePropTypes,
-	handleChange: PropTypes.func.isRequired,
-	disabled: PropTypes.bool,
-	focused: PropTypes.bool,
-	positioning: PropTypes.oneOf(['DEFAULT', 'HORIZONTAL', 'VERTICAL']),
-	declarations: U.declarationsPropTypes,
-	features: PropTypes.arrayOf(PropTypes.string),
-	bindings: PropTypes.object,
-	management: PropTypes.bool,
-	style: PropTypes.object,
-};
-
-export default componentWrapper(React.memo(CheckboxGroup, U.areEqual));

package/src/components/checkbox/one.js

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

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

@@ -1,70 +0,0 @@
-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

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

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

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

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

@@ -1,44 +0,0 @@
-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

@@ -1,16 +0,0 @@
-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

@@ -1,23 +0,0 @@
-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

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

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

@@ -1,200 +0,0 @@
-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

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

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

@@ -1,32 +0,0 @@
-.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

@@ -1,23 +0,0 @@
-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/datepicker/component.js

@@ -1,26 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-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 = (props) => (
-	<InputDeclarationsWrapper
-		type="date"
-		roleType="datepicker"
-		{...props}
-		validators={[getTypeControls]}
-	/>
-);
-
-Datepicker.defaultProps = {
-	validators: [],
-};
-
-Datepicker.propTypes = {
-	validators: PropTypes.arrayOf(PropTypes.func),
-};
-
-export default componentWrapper(React.memo(Datepicker, areEqual));