@inseefr/lunatic 0.2.60 → 0.3.0-experimental

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

@@ -0,0 +1,302 @@
+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;
+								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 && isInputNumber)
+								) {
+									setValue(v);
+									handleChange({
+										[U.getResponseName(response)]: v,
+									});
+								} else {
+									if (isInputNumber) {
+										if (
+											numberAsTextfield &&
+											v !== '' &&
+											!U.isNumberValid(v, decimals)
+										) {
+											e.preventDefault();
+											e.stopPropagation();
+											return null;
+										} else validate(v);
+									}
+									if (management) setValue(v);
+									else setValue(v === '' ? null : v);
+								}
+							}}
+							onBlur={handleChangeOnBlur}
+							onFocus={handleFocusIn}
+						/>
+						{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;

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

@@ -0,0 +1,232 @@
+import React, { useState, useEffect, useRef } from 'react';
+import KeyboardEventHandler from 'react-keyboard-event-handler';
+import PropTypes from 'prop-types';
+import debounce from 'lodash.debounce';
+import Declarations from '../';
+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';
+
+const ListDeclarationsWrapper = ({
+	id,
+	label,
+	preferences,
+	response,
+	options,
+	handleChange: propsHandleChange,
+	disabled,
+	focused,
+	shortcut,
+	declarations,
+	features,
+	bindings,
+	management,
+	style,
+	positioning,
+	type,
+	hasSpecificHandler,
+	logFunction,
+}) => {
+	const inputRef = useRef();
+
+	const [value, setValue] = useState(() =>
+		U.getResponseByPreference(preferences)(response)
+	);
+
+	const filledOptions =
+		management && type === 'checkbox'
+			? [...options, { label: 'NR', value: '_N_R_' }]
+			: options;
+
+	const specificHandleChange = (e) => {
+		const { values } = response;
+		const [key, value] = Object.entries(e)[0];
+		const newValue =
+			values[preferences[preferences.length - 1]] === value ? null : value;
+		handleChange({ [key]: newValue });
+		if (management) {
+			setValue(
+				U.getResponseByPreference(preferences)(
+					U.buildLocalResponse(response, newValue)
+				)
+			);
+		} else setValue(newValue);
+	};
+
+	const handleChange = debounce((obj) => propsHandleChange(obj), 50);
+
+	const onChange = (v) => {
+		const update = {
+			[U.getResponseName(response)]: v,
+		};
+		if (hasSpecificHandler) specificHandleChange(update);
+		else {
+			setValue(v);
+			handleChange(update);
+		}
+		if (U.isFunction(logFunction))
+			logFunction(
+				U.createObjectEvent(
+					`${type}-${id}-${v}`,
+					C.INPUT_CATEGORY,
+					C.EVENT_SELECTION,
+					U.getResponseName(response),
+					v
+				)
+			);
+	};
+
+	// 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]);
+
+	useEffect(() => {
+		if (focused) inputRef.current.focus();
+	}, [focused]);
+
+	const { fieldsetStyle, modalityStyle } = style;
+	return (
+		<>
+			<Declarations
+				id={id}
+				type={C.BEFORE_QUESTION_TEXT}
+				declarations={declarations}
+				features={features}
+				bindings={bindings}
+			/>
+			<div className="field-container">
+				<div className={`${management ? 'field-with-tooltip' : 'field'}`}>
+					<fieldset
+						key={`${type}-${id}`}
+						className={`${type}-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}
+						/>
+						{filledOptions.map(
+							({ label: optionLabel, value: optionValue }, i) => {
+								const checked = value === optionValue;
+								const interpretedLabel = interpret(
+									features,
+									logFunction
+								)(bindings)(optionLabel);
+								const keyboardSelectionKey =
+									options.length < 10 ? `${i + 1}` : U.getAlphabet()[i];
+								return (
+									<div
+										key={`${type}-${id}-${optionValue}`}
+										className={`${type}-modality ${type}-modality-block ${U.getItemsPositioningClass(
+											positioning
+										)} ${checked ? 'content-checked' : ''} ${
+											optionValue === '_N_R_' ? 'modality_NR' : ''
+										}`}
+									>
+										<Icon type={type} checked={checked} disabled={disabled}>
+											<input
+												type={type}
+												name={`${type}-${id}`}
+												ref={i === 0 || checked ? inputRef : null}
+												id={`${type}-${id}-${optionValue}`}
+												aria-labelledby={`input-label-${id}-${optionValue}`}
+												className={`${type}-lunatic`}
+												style={U.buildStyleObject(style)}
+												checked={checked}
+												disabled={disabled}
+												onChange={(optionLabel) => onChange(optionValue)}
+											/>
+											<label
+												htmlFor={`${type}-${id}-${optionValue}`}
+												id={`input-label-${id}-${optionValue}`}
+												style={checked ? U.buildStyleObject(modalityStyle) : {}}
+												className="modality-label"
+											>
+												{shortcut && (
+													<span className="code-modality">
+														{keyboardSelectionKey.toUpperCase()}
+													</span>
+												)}
+												{interpretedLabel}
+											</label>
+										</Icon>
+										{shortcut && (
+											<KeyboardEventHandler
+												handleKeys={[keyboardSelectionKey.toLowerCase()]}
+												onKeyEvent={(key, e) => {
+													e.preventDefault();
+													onChange(optionValue);
+												}}
+												handleFocusableElements
+											/>
+										)}
+									</div>
+								);
+							}
+						)}
+					</fieldset>
+				</div>
+				{management && (
+					<div className="tooltip">
+						<TooltipResponse
+							id={id}
+							response={U.buildMultiTooltipResponse(filledOptions)(response)}
+						/>
+					</div>
+				)}
+			</div>
+			<Declarations
+				id={id}
+				type={C.DETACHABLE}
+				declarations={declarations}
+				features={features}
+				bindings={bindings}
+			/>
+		</>
+	);
+};
+
+ListDeclarationsWrapper.defaultProps = {
+	label: '',
+	preferences: ['COLLECTED'],
+	response: {},
+	options: [],
+	disabled: false,
+	focused: false,
+	positioning: 'DEFAULT',
+	declarations: [],
+	features: [],
+	bindings: {},
+	management: false,
+	style: { fieldsetStyle: {}, modalityStyle: {} },
+};
+
+ListDeclarationsWrapper.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,
+	positioning: PropTypes.oneOf(['DEFAULT', 'HORIZONTAL', 'VERTICAL']),
+	declarations: U.declarationsPropTypes,
+	features: PropTypes.arrayOf(PropTypes.string),
+	bindings: PropTypes.object,
+	management: PropTypes.bool,
+	style: PropTypes.object,
+	type: PropTypes.oneOf(['radio', 'checkbox']),
+};
+
+export default ListDeclarationsWrapper;

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

@@ -0,0 +1,54 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import Declarations from '../';
+import * as U from '../../../utils/lib';
+import * as C from '../../../constants';
+
+const SimpleDeclarationsWrapper = ({
+	id,
+	declarations,
+	features,
+	bindings,
+	children,
+}) => (
+	<>
+		<Declarations
+			id={id}
+			type={C.BEFORE_QUESTION_TEXT}
+			declarations={declarations}
+			features={features}
+			bindings={bindings}
+		/>
+		{children}
+		<Declarations
+			id={id}
+			type={C.AFTER_QUESTION_TEXT}
+			declarations={declarations}
+			features={features}
+			bindings={bindings}
+		/>
+		<Declarations
+			id={id}
+			type={C.DETACHABLE}
+			declarations={declarations}
+			features={features}
+			bindings={bindings}
+		/>
+	</>
+);
+
+SimpleDeclarationsWrapper.defaultProps = {
+	declarations: [],
+	features: [],
+	bindings: {},
+};
+
+SimpleDeclarationsWrapper.propTypes = {
+	id: PropTypes.string.isRequired,
+	declarations: U.declarationsPropTypes,
+	features: PropTypes.arrayOf(PropTypes.string),
+	bindings: PropTypes.object,
+	children: PropTypes.element.isRequired,
+};
+
+export default SimpleDeclarationsWrapper;

package/src/components/dropdown/commons/actions.js

@@ -0,0 +1,65 @@
+export const SHOW_PANEL = 'dropdown/show-panel';
+export const showPanel = () => ({ type: SHOW_PANEL });
+
+export const HIDE_PANEL = 'dropdown/hide-panel';
+export const hidePanel = () => ({ type: HIDE_PANEL });
+
+export const SET_ACTIVE_OPTION = 'dropdown/set-active-option';
+export const setActiveOption = (index) => ({
+	type: SET_ACTIVE_OPTION,
+	payload: { index },
+});
+
+export const SET_OPTIONS = 'dropdown/set-options';
+export const setOptions = (options) => ({
+	type: SET_OPTIONS,
+	payload: { options },
+});
+
+export const SET_VALUE = 'dropdown/set-value';
+export const setValue = (value) => ({ type: SET_VALUE, payload: { value } });
+
+export const SET_FOCUSED = 'dropdown/set-focused';
+export const setFocused = (focused) => ({
+	type: SET_FOCUSED,
+	payload: { focused },
+});
+
+export const SET_SELECTED_OPTION = 'dropdown/set-selectted-option';
+export const setSelectedOption = (option) => ({
+	type: SET_SELECTED_OPTION,
+	payload: { option },
+});
+
+export const RESET_SELECTION = 'dropdown/reset-selection';
+export const resetSelection = (option) => ({
+	type: RESET_SELECTION,
+});
+
+/* */
+export const ARROW_UP_PRESSED = 'dropdown/arrow-up-ressed';
+export const arrowUpPressed = () => ({ type: ARROW_UP_PRESSED });
+
+/* */
+export const ARROW_DOWN_PRESSED = 'dropdown/arrow-down-pressed';
+export const arrowDownPressed = () => ({ type: ARROW_DOWN_PRESSED });
+
+/* */
+export const ENTER_PRESSED = 'dropdown/enter-pressed';
+export const enterPressed = (callback) => ({
+	type: ENTER_PRESSED,
+	payload: { callback },
+});
+
+/* */
+export const INIT_ACTIVE_INDEX = 'dropdown/init-active-index';
+export const initActiveIndex = () => ({
+	type: INIT_ACTIVE_INDEX,
+});
+
+/*  */
+export const SET_PREFIX = 'dropdown/set-prefix';
+export const setPrefix = (prefix) => ({
+	type: SET_PREFIX,
+	payload: { prefix },
+});

package/src/components/dropdown/commons/children-to-option.js

@@ -0,0 +1,9 @@
+export default (children = []) =>
+  (Array.isArray(children) ? children : [children]).map(child => {
+    const { value } = child.props;
+    const label = child.props.children;
+    if (label === undefined || value === undefined) {
+      throw new Error("Ooops");
+    }
+    return { label, value };
+  });