@inseefr/lunatic 0.1.0-hackathon → 0.1.0-v2

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

@@ -1,232 +1,235 @@
-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, useCallback } 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 = useCallback(
+		function (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
+					)
+				);
+		},
+		[response]
+	);
+
+	// 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/actions.js

@@ -1,56 +1,65 @@
-export const SHOW_PANEL = "dropdown/show-panel";
+export const SHOW_PANEL = 'dropdown/show-panel';
 export const showPanel = () => ({ type: SHOW_PANEL });
 
-export const HIDE_PANEL = "dropdown/hide-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_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_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_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_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 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 RESET_SELECTION = 'dropdown/reset-selection';
+export const resetSelection = (option) => ({
+	type: RESET_SELECTION,
 });
 
 /* */
-export const ARROW_UP_PRESSED = "dropdown/arrow-up-ressed";
+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 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 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 } });
+export const SET_PREFIX = 'dropdown/set-prefix';
+export const setPrefix = (prefix) => ({
+	type: SET_PREFIX,
+	payload: { prefix },
+});