@inseefr/lunatic 0.3.2-experimental → 0.3.6-experimental

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

@@ -1,232 +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;
+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/dropdown/commons/components/dropdown.js

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import Label from './label';
 import * as U from '../../../../utils/lib';
+import * as C from '../../../../constants';
 import * as CLEAN from '../cleaner-callbacks';
 import * as actions from '../actions';
 import DropdownField from './dropdown-field';
@@ -65,9 +66,19 @@ function Dropdown({
 	state,
 	dispatch,
 	refs,
+	logFunction,
 }) {
 	const { visible, focused, id, disabled } = state;
 
+	const createEventFocus = (focusIn = true) =>
+		U.createObjectEvent(
+			id,
+			C.INPUT_CATEGORY,
+			focusIn ? C.EVENT_FOCUS_IN : C.EVENT_FOCUS_OUT,
+			U.getResponseName(response),
+			valueFromProps
+		);
+
 	CLEAN.add(id, function () {
 		dispatch(actions.hidePanel());
 		dispatch(actions.setFocused(false));
@@ -130,6 +141,16 @@ function Dropdown({
 		[state, dispatch, onSelect]
 	);
 
+	// log info when focus change
+	useEffect(() => {
+		if (id && focused && U.isFunction(logFunction))
+			logFunction(createEventFocus());
+		if (id && !focused && U.isFunction(logFunction))
+			logFunction(createEventFocus(false));
+
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [focused, id]);
+
 	return (
 		<DropdownContainer
 			className={classnames(className, U.getLabelPositionClass(labelPosition), {

package/src/components/dropdown/dropdown-edit/dropdown-edit.js

@@ -37,6 +37,7 @@ const createOnSelect = (_, dispatch, onSelect) => (option) => {
  * @param {props}
  */
 function Dropdown({
+	id: initId,
 	widthAuto,
 	options = [],
 	onSelect,
@@ -52,10 +53,11 @@ function Dropdown({
 	disabled,
 	focused: initFocused,
 	DeclarationAfterLabel,
+	logFunction,
 }) {
 	const [state, dispatch] = useReducer(reducer, {
 		...initial,
-		id: `dropdown-${new Date().getMilliseconds()}`,
+		id: `dropdown-${initId || new Date().getMilliseconds()}`,
 		disabled,
 		focused: initFocused,
 	});
@@ -98,6 +100,7 @@ function Dropdown({
 			value={valueFromProps}
 			zIndex={zIndex}
 			management={management}
+			logFunction={logFunction}
 		>
 			<DeclarationAfterLabel />
 			<span

package/src/components/dropdown/dropdown-simple/dropdown.js

@@ -26,11 +26,12 @@ const Dropdown = ({
 	className,
 	zIndex,
 	DeclarationAfterLabel,
+	logFunction,
 }) => {
 	const containerEl = useRef();
 	const [state, dispatch] = useReducer(reducer, {
 		...initial,
-		id: `dropdown-${initId}-${new Date().getMilliseconds()}`,
+		id: `dropdown-${initId || new Date().getMilliseconds()}`,
 		disabled,
 		focused: initFocused,
 	});
@@ -59,6 +60,7 @@ const Dropdown = ({
 			onSelect={onSelect_}
 			value={value}
 			zIndex={zIndex}
+			logFunction={logFunction}
 		>
 			<DeclarationAfterLabel />
 			<span className={classnames('lunatic-dropdown-input', { focused })}>

package/src/components/filter-description/component.js

@@ -1,42 +1,42 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { interpret } from '../../utils/to-expose';
-import { buildStyleObject } from '../../utils/lib';
-
-const FilterDescription = ({
-	id,
-	label,
-	filterDescription,
-	features,
-	bindings,
-	style,
-	logFunction,
-}) =>
-	filterDescription ? (
-		<div
-			id={`filter-description-${id}`}
-			aria-label={`filter-description`}
-			className="filter-description-lunatic"
-			style={buildStyleObject(style)}
-		>
-			{interpret(features, logFunction)(bindings)(label)}
-		</div>
-	) : null;
-
-FilterDescription.defaultProps = {
-	filterDescription: false,
-	features: [],
-	bindings: {},
-	style: {},
-};
-
-FilterDescription.propTypes = {
-	id: PropTypes.string.isRequired,
-	label: PropTypes.string.isRequired,
-	filterDescription: PropTypes.bool,
-	features: PropTypes.arrayOf(PropTypes.string),
-	bindings: PropTypes.object,
-	style: PropTypes.object,
-};
-
-export default FilterDescription;
+import React from 'react';
+import PropTypes from 'prop-types';
+import { interpret } from '../../utils/to-expose';
+import { buildStyleObject } from '../../utils/lib';
+
+const FilterDescription = ({
+	id,
+	label,
+	filterDescription,
+	features,
+	bindings,
+	style,
+	logFunction,
+}) =>
+	filterDescription ? (
+		<div
+			id={`filter-description-${id}`}
+			aria-label={`filter-description`}
+			className="filter-description-lunatic"
+			style={buildStyleObject(style)}
+		>
+			{interpret(features, logFunction)(bindings)(label)}
+		</div>
+	) : null;
+
+FilterDescription.defaultProps = {
+	filterDescription: false,
+	features: [],
+	bindings: {},
+	style: {},
+};
+
+FilterDescription.propTypes = {
+	id: PropTypes.string.isRequired,
+	label: PropTypes.string.isRequired,
+	filterDescription: PropTypes.bool,
+	features: PropTypes.arrayOf(PropTypes.string),
+	bindings: PropTypes.object,
+	style: PropTypes.object,
+};
+
+export default FilterDescription;