@inseefr/lunatic 0.3.8-experimental → 0.3.8-v2

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));

package/src/components/declarations/component.js

@@ -1,46 +0,0 @@
-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,
-	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 }) => (
-				<div
-					key={`${idD}`}
-					className={`declaration-lunatic declaration-${declarationType.toLowerCase()}`}
-				>
-					{interpret(features, logFunction)(bindings)(label)}
-				</div>
-			))}
-		</div>
-	);
-};
-
-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/wrappers/index.js

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

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

@@ -1,324 +0,0 @@
-import React, { useState, useEffect, useRef } from 'react';
-import PropTypes from 'prop-types';
-import Declarations from '../';
-import { TooltipResponse } from '../../tooltip';
-import * as U from '../../../utils/lib';
-import * as C from '../../../constants';
-import { interpret } from '../../../utils/to-expose';
-
-const InputDeclarationsWrapper = ({
-	id,
-	label,
-	preferences,
-	response,
-	placeholder,
-	handleChange,
-	maxLength,
-	readOnly,
-	disabled,
-	autoComplete,
-	labelPosition,
-	mandatory,
-	declarations,
-	features,
-	bindings,
-	focused,
-	management,
-	style,
-	type,
-	roleType,
-	min,
-	max,
-	decimals,
-	unit,
-	unitPosition,
-	validators,
-	isInputNumber,
-	numberAsTextfield,
-	logFunction,
-	componentType,
-}) => {
-	const inputRef = useRef();
-	const createEventFocus = (focusIn = true) =>
-		U.createObjectEvent(
-			`${roleType}-${id}`,
-			C.INPUT_CATEGORY,
-			focusIn ? C.EVENT_FOCUS_IN : C.EVENT_FOCUS_OUT,
-			U.getResponseName(response),
-			value
-		);
-	const [value, setValue] = useState(() =>
-		U.getResponseByPreference(preferences)(response)
-	);
-
-	const [messagesError, setMessagesError] = useState(
-		validators
-			.map((v) => v({ min, max, value, preferences, componentType, id }))
-			.filter((m) => m)
-	);
-
-	useEffect(() => {
-		if (focused) inputRef.current.focus();
-	}, [focused]);
-
-	// Assume we only want to handle enable external updates
-	// Don't need to check all value changes
-	useEffect(() => {
-		if (U.getResponseByPreference(preferences)(response) !== value)
-			setValue(U.getResponseByPreference(preferences)(response));
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [response, preferences]);
-
-	const validate = (v) => {
-		setMessagesError(
-			validators
-				.map((v) => v({ min, max, value: v, preferences, componentType, id }))
-				.filter((m) => m)
-		);
-	};
-
-	useEffect(() => {
-		if (['InputNumber', 'Datepicker'].includes(componentType)) {
-			setMessagesError(
-				validators
-					.map((v) => v({ min, max, value, preferences, componentType, id }))
-					.filter((m) => m)
-			);
-		}
-	}, [
-		value,
-		min,
-		max,
-		validators,
-		isInputNumber,
-		id,
-		preferences,
-		componentType,
-	]);
-
-	const handleChangeOnBlur = () => {
-		const initValue = U.getResponseByPreference(preferences)(response);
-		if (value !== initValue) {
-			const finalValue =
-				value && value.endsWith('.') ? value.replace('.', '') : value;
-			handleChange({
-				[U.getResponseName(response)]: finalValue,
-			});
-			if (U.isFunction(logFunction)) logFunction(createEventFocus(false));
-			if (value !== finalValue) setValue(finalValue);
-		}
-	};
-
-	const handleFocusIn = () => {
-		if (U.isFunction(logFunction)) logFunction(createEventFocus());
-	};
-
-	const Component = roleType === 'textarea' ? 'textarea' : 'input';
-
-	return (
-		<>
-			<Declarations
-				id={id}
-				type={C.BEFORE_QUESTION_TEXT}
-				declarations={declarations}
-				features={features}
-				bindings={bindings}
-			/>
-			<div className={U.getLabelPositionClass(labelPosition)}>
-				{label && (
-					<label
-						htmlFor={`${roleType}-${id}`}
-						id={`${roleType}-label-${id}`}
-						className={`${mandatory ? 'mandatory' : ''}`}
-					>
-						{interpret(features, logFunction)(bindings)(label)}
-						{isInputNumber &&
-							unit &&
-							['DEFAULT', 'BEFORE'].includes(unitPosition) && (
-								<span className="unit">{` (${unit})`}</span>
-							)}
-					</label>
-				)}
-				<Declarations
-					id={id}
-					type={C.AFTER_QUESTION_TEXT}
-					declarations={declarations}
-					features={features}
-					bindings={bindings}
-				/>
-				<div className="field-container">
-					<div className={`${management ? 'field-with-tooltip' : 'field'}`}>
-						<Component
-							type={type}
-							id={`${roleType}-${id}`}
-							ref={inputRef}
-							value={value || ''}
-							min={min}
-							max={max}
-							step={decimals ? `${Math.pow(10, -decimals)}` : '0'}
-							placeholder={placeholder}
-							autoComplete={autoComplete ? 'on' : 'off'}
-							className={`${roleType}-lunatic ${
-								(isInputNumber || roleType === 'datepicker') &&
-								messagesError.length > 0
-									? 'warning'
-									: ''
-							}`}
-							style={U.buildStyleObject(style)}
-							readOnly={readOnly}
-							disabled={disabled}
-							maxLength={maxLength || 524288}
-							required={mandatory}
-							aria-required={mandatory}
-							onChange={(e) => {
-								const v = e.target.value;
-								const valueToFire = v === '' ? null : v;
-								const valueToFireForArrows =
-									Number.parseFloat(v).toFixed(decimals);
-								if (
-									decimals &&
-									v !== '' &&
-									!new RegExp(`^[0-9]+(.[0-9]{1,${decimals}})?$`).test(
-										valueToFireForArrows
-									)
-								) {
-									e.preventDefault();
-								} else if (
-									(([null, ''].includes(v) && value.length > 0) ||
-										([null, ''].includes(value) && v.length > 0)) &&
-									componentType !== 'Datepicker'
-								) {
-									setValue(valueToFire);
-									handleChange({
-										[U.getResponseName(response)]: valueToFire,
-									});
-								} else if (
-									// Chrome
-									(Object.getPrototypeOf(e.nativeEvent).constructor.name ===
-										'Event' &&
-										roleType !== 'datepicker') ||
-									// FF hack: impossible to handle arrow events
-									(Math.abs(v - value).toFixed(decimals) !==
-										Number.parseFloat(`${Math.pow(10, -decimals)}`).toFixed(
-											decimals
-										) &&
-										!Number.parseInt(v, 10) &&
-										isInputNumber)
-								) {
-									setValue(valueToFireForArrows);
-									handleChange({
-										[U.getResponseName(response)]: valueToFireForArrows,
-									});
-								} else {
-									if (isInputNumber) {
-										if (
-											numberAsTextfield &&
-											v !== '' &&
-											!U.isNumberValid(v, decimals)
-										) {
-											e.preventDefault();
-											e.stopPropagation();
-											return null;
-										} else validate(v);
-									}
-									if (management) setValue(valueToFire);
-									else setValue(valueToFire);
-								}
-							}}
-							onBlur={handleChangeOnBlur}
-							onFocus={handleFocusIn}
-							onKeyPress={(event) => {
-								if (decimals === 0 && !/[0-9]/.test(event.key)) {
-									event.preventDefault();
-								}
-							}}
-						/>
-						{isInputNumber && unit && unitPosition === 'AFTER' && (
-							<span className="unit">{unit}</span>
-						)}
-					</div>
-					{management && (
-						<div className="tooltip">
-							<TooltipResponse
-								id={id}
-								response={U.buildLocalResponse(response, value)}
-							/>
-						</div>
-					)}
-				</div>
-				{messagesError.length > 0 && (
-					<div className="lunatic-controls">
-						{messagesError.map(({ id, errorMessage }) => (
-							<div key={`control-${id}`} className="lunatic-control">
-								{errorMessage}
-							</div>
-						))}
-					</div>
-				)}
-			</div>
-			<Declarations
-				id={id}
-				type={C.DETACHABLE}
-				declarations={declarations}
-				features={features}
-				bindings={bindings}
-			/>
-		</>
-	);
-};
-
-InputDeclarationsWrapper.defaultProps = {
-	label: '',
-	preferences: ['COLLECTED'],
-	response: {},
-	placeholder: '',
-	readOnly: false,
-	disabled: false,
-	autoComplete: false,
-	labelPosition: 'DEFAULT',
-	mandatory: false,
-	focused: false,
-	declarations: [],
-	features: [],
-	bindings: {},
-	management: false,
-	style: {},
-	validators: [],
-	isInputNumber: false,
-};
-
-InputDeclarationsWrapper.propTypes = {
-	id: PropTypes.string.isRequired,
-	label: PropTypes.string,
-	preferences: PropTypes.arrayOf(U.valueTypePropTypes),
-	response: U.responsePropTypes,
-	min: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-	max: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-	decimals: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-	placeholder: PropTypes.string,
-	handleChange: PropTypes.func.isRequired,
-	readOnly: PropTypes.bool,
-	disabled: PropTypes.bool,
-	maxLength: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-	autoComplete: PropTypes.bool,
-	labelPosition: PropTypes.oneOf(['DEFAULT', 'TOP', 'BOTTOM', 'LEFT', 'RIGHT']),
-	unitPosition: PropTypes.oneOf(['DEFAULT', 'BEFORE', 'AFTER']),
-	mandatory: PropTypes.bool,
-	focused: PropTypes.bool,
-	declarations: U.declarationsPropTypes,
-	features: PropTypes.arrayOf(PropTypes.string),
-	bindings: PropTypes.object,
-	management: PropTypes.bool,
-	style: PropTypes.object,
-	type: PropTypes.oneOf(['text', 'date', 'number', null]),
-	roleType: PropTypes.oneOf([
-		'input',
-		'datepicker',
-		'input-number',
-		'textarea',
-	]),
-	validators: PropTypes.arrayOf(PropTypes.func),
-	isInputNumber: PropTypes.bool,
-};
-
-export default InputDeclarationsWrapper;