@inseefr/lunatic 0.3.2-experimental → 0.3.3-experimental

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@inseefr/lunatic",
-	"version": "0.3.2-experimental",
+	"version": "0.3.3-experimental",
 	"workersVersion": "0.2.1-experimental",
 	"description": "Library of questionnaire components",
 	"repository": {
@@ -50,7 +50,7 @@
 		"library"
 	],
 	"dependencies": {
-		"@inseefr/trevas": "^0.1.11",
+		"@inseefr/trevas": "^0.1.12",
 		"date-fns": "^2.25.0",
 		"lodash.camelcase": "^4.3.0",
 		"lodash.debounce": "^4.0.8",

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

@@ -172,6 +172,7 @@ const InputDeclarationsWrapper = ({
 							aria-required={mandatory}
 							onChange={(e) => {
 								const v = e.target.value;
+								const valueToFire = v === '' ? null : v;
 								if (
 									(([null, ''].includes(v) && value.length > 0) ||
 										([null, ''].includes(value) && v.length > 0)) &&
@@ -179,7 +180,7 @@ const InputDeclarationsWrapper = ({
 								) {
 									setValue(v);
 									handleChange({
-										[U.getResponseName(response)]: v,
+										[U.getResponseName(response)]: valueToFire,
 									});
 								} else if (
 									// Chrome
@@ -187,11 +188,11 @@ const InputDeclarationsWrapper = ({
 										'Event' &&
 										roleType !== 'datepicker') ||
 									// FF hack: impossible to handle arrow events
-									(Math.abs(v - value) === 1 && isInputNumber)
+									(Math.abs(v - value) !== 0 && isInputNumber)
 								) {
-									setValue(v);
+									setValue(valueToFire);
 									handleChange({
-										[U.getResponseName(response)]: v,
+										[U.getResponseName(response)]: valueToFire,
 									});
 								} else {
 									if (isInputNumber) {
@@ -205,8 +206,8 @@ const InputDeclarationsWrapper = ({
 											return null;
 										} else validate(v);
 									}
-									if (management) setValue(v);
-									else setValue(v === '' ? null : v);
+									if (management) setValue(valueToFire);
+									else setValue(valueToFire);
 								}
 							}}
 							onBlur={handleChangeOnBlur}

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/suggester/components/suggester-content.js

@@ -1,42 +1,42 @@
-import React, { useRef, useCallback } from 'react';
-import classnames from 'classnames';
-import useDocumentAddEventListener from '../../../utils/to-expose/hooks/use-document-add-event-listener';
-
-function SuggesterContent({
-	children,
-	id,
-	focused,
-	onFocus,
-	onBlur,
-	onKeyDown,
-}) {
-	const ref = useRef();
-	const onClick = useCallback(
-		function (e) {
-			const { current } = ref;
-			if (!current.contains(e.target)) {
-				onBlur();
-			}
-		},
-		[ref, onBlur]
-	);
-
-	useDocumentAddEventListener('mousedown', onClick);
-
-	return (
-		<div
-			className={classnames('lunatic-suggester', {
-				focused,
-			})}
-			onFocus={onFocus}
-			onKeyDown={onKeyDown}
-			ref={ref}
-		>
-			<div className={classnames('lunatic-suggester-content', { focused })}>
-				{children}
-			</div>
-		</div>
-	);
-}
-
-export default SuggesterContent;
+import React, { useRef, useCallback } from 'react';
+import classnames from 'classnames';
+import useDocumentAddEventListener from '../../../utils/to-expose/hooks/use-document-add-event-listener';
+
+function SuggesterContent({
+	children,
+	id,
+	focused,
+	onFocus,
+	onBlur,
+	onKeyDown,
+}) {
+	const ref = useRef();
+	const onClick = useCallback(
+		function (e) {
+			const { current } = ref;
+			if (!current.contains(e.target) && focused) {
+				onBlur();
+			}
+		},
+		[ref, focused, onBlur]
+	);
+
+	useDocumentAddEventListener('mousedown', onClick);
+
+	return (
+		<div
+			className={classnames('lunatic-suggester', {
+				focused,
+			})}
+			onFocus={onFocus}
+			onKeyDown={onKeyDown}
+			ref={ref}
+		>
+			<div className={classnames('lunatic-suggester-content', { focused })}>
+				{children}
+			</div>
+		</div>
+	);
+}
+
+export default SuggesterContent;

package/src/components/suggester/components/suggester.js

@@ -1,4 +1,11 @@
-import React, { useCallback, useContext, useRef, useMemo } from 'react';
+import React, {
+	useCallback,
+	useContext,
+	useRef,
+	useMemo,
+	useEffect,
+	useState,
+} from 'react';
 import classnames from 'classnames';
 import { actions, SuggesterContext } from '../state-management';
 import SuggesterContent from './suggester-content';
@@ -6,6 +13,8 @@ import Selection from './selection';
 import Panel from './panel';
 import createOnKeyDownCallback from './create-on-keydown-callback';
 import Delete from './selection/delete';
+import * as C from '../../../constants';
+import * as U from '../../../utils/lib';
 import './suggester.scss';
 
 function Suggester({
@@ -16,23 +25,54 @@ function Suggester({
 	labelRenderer,
 	onSelect,
 	value,
+	focused: initFocused,
+	response,
+	logFunction,
 }) {
 	const inputEl = useRef();
 	const [state, dispatch] = useContext(SuggesterContext);
 	const { focused, id, messageError, search, disabled } = state;
 
+	const [init, setInit] = useState(false);
+
+	const createEventFocus = (focusIn = true) =>
+		U.createObjectEvent(
+			`suggester-${id}`,
+			C.INPUT_CATEGORY,
+			focusIn ? C.EVENT_FOCUS_IN : C.EVENT_FOCUS_OUT,
+			U.getResponseName(response),
+			value
+		);
+
 	const onFocus = useCallback(
 		function () {
-			if (!disabled) {
+			if (!focused && !disabled) {
 				if (inputEl.current !== document.activeElement) {
 				}
 				inputEl.current.focus();
 				dispatch(actions.onFocus());
 			}
 		},
-		[dispatch, disabled]
+		[disabled, dispatch, focused]
 	);
 
+	// Handle focused props of Component
+	useEffect(() => {
+		if (!init && id) {
+			if (initFocused && !focused) onFocus();
+			setInit(true);
+		}
+	}, [focused, init, initFocused, onFocus, id]);
+
+	// log info when focus change
+	useEffect(() => {
+		if (init && id && focused && U.isFunction(logFunction))
+			logFunction(createEventFocus());
+		if (init && id && !focused && U.isFunction(logFunction))
+			logFunction(createEventFocus(false));
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [focused, id, init]);
+
 	const onDelete = useCallback(
 		function () {
 			dispatch(actions.onDeleteSearch());

package/src/components/suggester/idb-suggester.js

@@ -1,4 +1,4 @@
-import React, { useEffect, useMemo, useState } from 'react';
+import React, { useMemo, useState } from 'react';
 import PropTypes from 'prop-types';
 import SuggesterWrapper from './suggester-wrapper';
 import createSearching from './searching';
@@ -15,6 +15,9 @@ function IDBSuggester({
 	onSelect,
 	disabled,
 	value,
+	focused,
+	response,
+	logFunction,
 }) {
 	const [store, setStore] = useState(undefined);
 	const searching = useMemo(
@@ -44,6 +47,9 @@ function IDBSuggester({
 				storeName={storeName}
 				disabled={disabled}
 				value={value}
+				focused={focused}
+				response={response}
+				logFunction={logFunction}
 			/>
 		</CheckStore>
 	);

package/src/components/suggester/lunatic-suggester.js

@@ -89,6 +89,7 @@ function Suggester({
 						response={response}
 						id={id}
 						value={value}
+						logFunction={logFunction}
 					/>
 				</FieldWrapper>
 			</LabelWrapper>

package/src/components/suggester/suggester-wrapper.js

@@ -30,6 +30,9 @@ function SuggesterWrapper({
 	labelRenderer,
 	disabled,
 	value,
+	focused,
+	response,
+	logFunction,
 }) {
 	const [state, dispatch] = useReducer(reducer, INITIAL_STATE);
 	const { search, selectedIndex, options, expended } = state;
@@ -82,6 +85,9 @@ function SuggesterWrapper({
 				labelRenderer={labelRenderer}
 				onSelect={onSelect}
 				value={value}
+				focused={focused}
+				response={response}
+				logFunction={logFunction}
 			/>
 		</SuggesterContext.Provider>
 	);