@inseefr/lunatic 0.2.2-experimental → 0.2.2-prisme

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/commons/components/label.js

@@ -1,28 +1,28 @@
-import React from 'react';
-import classnames from 'classnames';
-import PropTypes from 'prop-types';
-
-function Label({ content, focused, mandatory }) {
-	if (!content) {
-		return null;
-	}
-	return (
-		<div
-			className={classnames('lunatic-dropdown-label', { focused, mandatory })}
-		>
-			{content}
-		</div>
-	);
-}
-
-Label.defaultProps = {
-	mandatory: false,
-};
-
-Label.propTypes = {
-	content: PropTypes.string,
-	focused: PropTypes.bool.isRequired,
-	mandatory: PropTypes.bool,
-};
-
-export default Label;
+import React from 'react';
+import classnames from 'classnames';
+import PropTypes from 'prop-types';
+
+function Label({ content, focused, mandatory }) {
+	if (!content) {
+		return null;
+	}
+	return (
+		<div
+			className={classnames('lunatic-dropdown-label', { focused, mandatory })}
+		>
+			{content}
+		</div>
+	);
+}
+
+Label.defaultProps = {
+	mandatory: false,
+};
+
+Label.propTypes = {
+	content: PropTypes.string,
+	focused: PropTypes.bool.isRequired,
+	mandatory: PropTypes.bool,
+};
+
+export default Label;

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

@@ -1,78 +1,78 @@
-import React, { useRef } from 'react';
-import PropTypes from 'prop-types';
-
-/**
- *
- */
-function Panel({
-	options = [],
-	display,
-	handleActive,
-	prefix,
-	activeIndex,
-	selectedOption,
-	onSelect,
-	idDropdown,
-	optionComponent: Option,
-}) {
-	const ulRef = useRef();
-
-	return display ? (
-		<div className="lunatic-dropdown-panel-container">
-			<ul className="lunatic-dropdown-panel" ref={ulRef} tabIndex="-1">
-				{options.map(({ label, value }, index) => (
-					<li
-						key={value}
-						id={`${idDropdown}-option-${value}`}
-						onMouseEnter={() => handleActive(index)}
-						onMouseDown={(e) => {
-							e.stopPropagation();
-							e.preventDefault();
-							if (e.button === 0) {
-								onSelect({ label, value });
-							}
-						}}
-					>
-						<Option
-							label={label}
-							value={value}
-							prefix={prefix}
-							active={activeIndex === index}
-							selected={selectedOption && selectedOption.value === value}
-						/>
-					</li>
-				))}
-			</ul>
-		</div>
-	) : null;
-}
-
-const propTypesOption = PropTypes.shape({
-	label: PropTypes.string,
-	value: PropTypes.oneOfType([
-		PropTypes.string,
-		PropTypes.object,
-		PropTypes.number,
-		PropTypes.symbol,
-		PropTypes.bool,
-	]),
-});
-
-Panel.propTypes = {
-	idDropdown: PropTypes.string.isRequired,
-	prefix: PropTypes.string,
-	onSelect: PropTypes.func,
-	handleActive: PropTypes.func.isRequired,
-	activeIndex: PropTypes.number,
-	selectedOption: propTypesOption,
-	display: PropTypes.bool.isRequired,
-	options: PropTypes.arrayOf(propTypesOption),
-};
-
-Panel.defaultProps = {
-	options: [],
-	onSelect: () => null,
-	selectedOption: undefined,
-};
-
-export default Panel;
+import React, { useRef } from 'react';
+import PropTypes from 'prop-types';
+
+/**
+ *
+ */
+function Panel({
+	options = [],
+	display,
+	handleActive,
+	prefix,
+	activeIndex,
+	selectedOption,
+	onSelect,
+	idDropdown,
+	optionComponent: Option,
+}) {
+	const ulRef = useRef();
+
+	return display ? (
+		<div className="lunatic-dropdown-panel-container">
+			<ul className="lunatic-dropdown-panel" ref={ulRef} tabIndex="-1">
+				{options.map(({ label, value }, index) => (
+					<li
+						key={value}
+						id={`${idDropdown}-option-${value}`}
+						onMouseEnter={() => handleActive(index)}
+						onMouseDown={(e) => {
+							e.stopPropagation();
+							e.preventDefault();
+							if (e.button === 0) {
+								onSelect({ label, value });
+							}
+						}}
+					>
+						<Option
+							label={label}
+							value={value}
+							prefix={prefix}
+							active={activeIndex === index}
+							selected={selectedOption && selectedOption.value === value}
+						/>
+					</li>
+				))}
+			</ul>
+		</div>
+	) : null;
+}
+
+const propTypesOption = PropTypes.shape({
+	label: PropTypes.string,
+	value: PropTypes.oneOfType([
+		PropTypes.string,
+		PropTypes.object,
+		PropTypes.number,
+		PropTypes.symbol,
+		PropTypes.bool,
+	]),
+});
+
+Panel.propTypes = {
+	idDropdown: PropTypes.string.isRequired,
+	prefix: PropTypes.string,
+	onSelect: PropTypes.func,
+	handleActive: PropTypes.func.isRequired,
+	activeIndex: PropTypes.number,
+	selectedOption: propTypesOption,
+	display: PropTypes.bool.isRequired,
+	options: PropTypes.arrayOf(propTypesOption),
+};
+
+Panel.defaultProps = {
+	options: [],
+	onSelect: () => null,
+	selectedOption: undefined,
+};
+
+export default Panel;

package/src/components/dropdown/commons/event-callbacks/index.js

@@ -1,5 +1,5 @@
-export {
-	default as createOnKeyDownCallback,
-	BINDED_KEYS,
-} from './on-keydown-callback';
-export { default as createOnMouseDownCallback } from './on-mousedown-callback';
+export {
+	default as createOnKeyDownCallback,
+	BINDED_KEYS,
+} from './on-keydown-callback';
+export { default as createOnMouseDownCallback } from './on-mousedown-callback';

package/src/components/dropdown/commons/event-callbacks/on-keydown-callback.js

@@ -1,29 +1,29 @@
-import * as actions from '../actions';
-
-export const BINDED_KEYS = {
-	arrowUp: 'ArrowUp',
-	arrowDown: 'ArrowDown',
-	enter: 'Enter',
-	tab: 'Tab',
-};
-
-/** */
-export default (_, dispatch, onSelect) => (key) => {
-	switch (key) {
-		case BINDED_KEYS.arrowUp:
-			dispatch(actions.arrowUpPressed());
-			break;
-		case BINDED_KEYS.arrowDown:
-			dispatch(actions.arrowDownPressed());
-			dispatch(actions.showPanel());
-			break;
-		case BINDED_KEYS.enter:
-			dispatch(actions.enterPressed(onSelect));
-			break;
-		case BINDED_KEYS.tab:
-			dispatch(actions.setFocused(false));
-			dispatch(actions.hidePanel());
-			break;
-		default:
-	}
-};
+import * as actions from '../actions';
+
+export const BINDED_KEYS = {
+	arrowUp: 'ArrowUp',
+	arrowDown: 'ArrowDown',
+	enter: 'Enter',
+	tab: 'Tab',
+};
+
+/** */
+export default (_, dispatch, onSelect) => (key) => {
+	switch (key) {
+		case BINDED_KEYS.arrowUp:
+			dispatch(actions.arrowUpPressed());
+			break;
+		case BINDED_KEYS.arrowDown:
+			dispatch(actions.arrowDownPressed());
+			dispatch(actions.showPanel());
+			break;
+		case BINDED_KEYS.enter:
+			dispatch(actions.enterPressed(onSelect));
+			break;
+		case BINDED_KEYS.tab:
+			dispatch(actions.setFocused(false));
+			dispatch(actions.hidePanel());
+			break;
+		default:
+	}
+};

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

@@ -1,149 +1,152 @@
-import * as actions from './actions';
-import { scrollTo } from './tools';
-import { filterOption } from '../dropdown-edit/prefix-tools';
-import { preparePrefix } from '../dropdown-edit/prefix-tools';
-
-export const initial = {
-	prefix: undefined,
-	options: [],
-	visibleOptions: [],
-	visible: false,
-	activeIndex: undefined,
-	selectedOption: undefined,
-	focused: false,
-	value: '',
-};
-
-/** */
-const isPrefix = (prefix) => prefix !== undefined && prefix.length > 0;
-
-/** */
-const reduceArrowDownPressed = (state) => {
-	const { visibleOptions, activeIndex } = state;
-	const next = visibleOptions.length
-		? Math.min(
-				visibleOptions.length - 1,
-				activeIndex === undefined ? 0 : activeIndex + 1
-		  )
-		: undefined;
-	if (next !== undefined) {
-		scrollTo(`${state.id}-option-${visibleOptions[next].value}`);
-	}
-	return { ...state, activeIndex: next };
-};
-
-/** */
-const reduceArrowUpPressed = (state) => {
-	const { visibleOptions, activeIndex } = state;
-	const next = visibleOptions.length
-		? Math.max(0, activeIndex === undefined ? 0 : activeIndex - 1)
-		: undefined;
-
-	if (next !== undefined) {
-		scrollTo(`${state.id}-option-${visibleOptions[next].value}`);
-	}
-	return { ...state, activeIndex: next };
-};
-
-/** */
-const reduceEnterPressed = (state, callback) => {
-	const { activeIndex, visibleOptions, visible } = state;
-	if (!visible) {
-		return { ...state, visible: true };
-	}
-	if (activeIndex !== undefined) {
-		const option = visibleOptions[activeIndex];
-		callback(option);
-		return {
-			...state,
-			selectedOption: option,
-			value: option.label,
-			prefix: preparePrefix(option.label),
-			visible: false,
-		};
-	}
-	return state;
-};
-
-/**  */
-const reducer = (state, action) => {
-	const { type, payload } = action;
-	switch (type) {
-		case actions.SHOW_PANEL: {
-			return { ...state, visible: true };
-		}
-		case actions.HIDE_PANEL: {
-			return { ...state, visible: false };
-		}
-		case actions.SET_ACTIVE_OPTION: {
-			const { index } = payload;
-			return {
-				...state,
-				activeIndex: index,
-			};
-		}
-		case actions.SET_OPTIONS: {
-			const { options } = payload;
-			const { prefix } = state;
-			return {
-				...state,
-				options,
-				visibleOptions: isPrefix(prefix) ? filterOption(options) : options,
-			};
-		}
-		case actions.SET_PREFIX: {
-			const { prefix } = payload;
-			const { options } = state;
-			return {
-				...state,
-				prefix,
-				activeIndex: undefined,
-				visibleOptions: isPrefix(prefix)
-					? filterOption(options, prefix)
-					: options,
-			};
-		}
-		case actions.SET_VALUE: {
-			const { value } = payload;
-			return { ...state, value };
-		}
-		case actions.SET_SELECTED_OPTION: {
-			const { option } = payload;
-			return {
-				...state,
-				value: option.label,
-				selectedOption: option,
-				prefix: preparePrefix(option.label),
-			};
-		}
-		case actions.SET_FOCUSED: {
-			const { focused } = payload;
-			return { ...state, focused };
-		}
-		case actions.RESET_SELECTION: {
-			return {
-				...state,
-				prefix: undefined,
-				value: '',
-				selectedOption: undefined,
-				activeIndex: undefined,
-				activeOption: undefined,
-				visibleOptions: state.options,
-			};
-		}
-		case actions.ARROW_UP_PRESSED: {
-			return reduceArrowUpPressed(state);
-		}
-		case actions.ARROW_DOWN_PRESSED: {
-			return reduceArrowDownPressed(state);
-		}
-		case actions.ENTER_PRESSED: {
-			const { callback } = payload;
-			return reduceEnterPressed(state, callback);
-		}
-		default:
-			return state;
-	}
-};
-
-export default reducer;
+import * as actions from './actions';
+import { scrollTo } from './tools';
+import { filterOption } from '../dropdown-edit/prefix-tools';
+import { preparePrefix } from '../dropdown-edit/prefix-tools';
+
+export const initial = {
+	prefix: undefined,
+	options: [],
+	visibleOptions: [],
+	visible: false,
+	activeIndex: undefined,
+	selectedOption: undefined,
+	focused: false,
+	value: '',
+};
+
+/** */
+const isPrefix = (prefix) => prefix !== undefined && prefix.length > 0;
+
+/** */
+const reduceArrowDownPressed = (state) => {
+	const { visibleOptions, activeIndex } = state;
+	const next = visibleOptions.length
+		? Math.min(
+				visibleOptions.length - 1,
+				activeIndex === undefined ? 0 : activeIndex + 1
+		  )
+		: undefined;
+	if (next !== undefined) {
+		scrollTo(`${state.id}-option-${visibleOptions[next].value}`);
+	}
+	return { ...state, activeIndex: next };
+};
+
+/** */
+const reduceArrowUpPressed = (state) => {
+	const { visibleOptions, activeIndex } = state;
+	const next = visibleOptions.length
+		? Math.max(0, activeIndex === undefined ? 0 : activeIndex - 1)
+		: undefined;
+
+	if (next !== undefined) {
+		scrollTo(`${state.id}-option-${visibleOptions[next].value}`);
+	}
+	return { ...state, activeIndex: next };
+};
+
+/** */
+const reduceEnterPressed = (state, callback) => {
+	const { activeIndex, visibleOptions, visible } = state;
+	if (!visible) {
+		return { ...state, visible: true };
+	}
+	if (activeIndex !== undefined) {
+		const option = visibleOptions[activeIndex];
+		callback(option);
+		return {
+			...state,
+			selectedOption: option,
+			value: option.label,
+			prefix: preparePrefix(option.label),
+			visible: false,
+		};
+	}
+	return state;
+};
+
+/**  */
+const reducer = (state, action) => {
+	const { type, payload } = action;
+	switch (type) {
+		case actions.SHOW_PANEL: {
+			return { ...state, visible: true };
+		}
+		case actions.HIDE_PANEL: {
+			return { ...state, visible: false };
+		}
+		case actions.SET_ACTIVE_OPTION: {
+			const { index } = payload;
+			return {
+				...state,
+				activeIndex: index,
+			};
+		}
+		case actions.SET_OPTIONS: {
+			const { options } = payload;
+			const { prefix } = state;
+			return {
+				...state,
+				options,
+				visibleOptions: isPrefix(prefix) ? filterOption(options) : options,
+			};
+		}
+		case actions.SET_PREFIX: {
+			const { prefix } = payload;
+			const { options } = state;
+			return {
+				...state,
+				prefix,
+				activeIndex: undefined,
+				visibleOptions: isPrefix(prefix)
+					? filterOption(options, prefix)
+					: options,
+			};
+		}
+		case actions.SET_VALUE: {
+			const { value } = payload;
+			return { ...state, value };
+		}
+		case actions.SET_SELECTED_OPTION: {
+			const { option } = payload;
+			return {
+				...state,
+				value: option.label,
+				selectedOption: option,
+				prefix: preparePrefix(option.label),
+			};
+		}
+		case actions.SET_FOCUSED: {
+			const { focused } = payload;
+			return { ...state, focused };
+		}
+		case actions.RESET_SELECTION: {
+			return {
+				...state,
+				prefix: undefined,
+				value: '',
+				selectedOption: undefined,
+				activeIndex: undefined,
+				activeOption: undefined,
+				visibleOptions: state.options,
+			};
+		}
+		case actions.ARROW_UP_PRESSED: {
+			return reduceArrowUpPressed(state);
+		}
+		case actions.ARROW_DOWN_PRESSED: {
+			return reduceArrowDownPressed(state);
+		}
+		case actions.ENTER_PRESSED: {
+			const { callback } = payload;
+			return reduceEnterPressed(state, callback);
+		}
+		case actions.INIT_ACTIVE_INDEX: {
+			return { ...state, activeIndex: 0 };
+		}
+		default:
+			return state;
+	}
+};
+
+export default reducer;

package/src/components/dropdown/component.js

@@ -1,6 +1,6 @@
 import React, { useState, useEffect, useMemo } from 'react';
 import PropTypes from 'prop-types';
-import missingWrapper from '../missing-wrapper';
+import componentWrapper from '../component-wrapper';
 import DropdownSimple from './dropdown-simple';
 import DropdownEdit from './dropdown-edit';
 import Declarations from '../declarations';
@@ -132,4 +132,4 @@ Dropdown.defaultProps = {
 	freezeOptions: false,
 };
 
-export default missingWrapper(React.memo(Dropdown), U.areEqual);
+export default componentWrapper(React.memo(Dropdown, U.areEqual));

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,
 	});
@@ -67,6 +69,12 @@ function Dropdown({
 
 	const selectedOption = options.find((o) => o.label === value);
 
+	useEffect(() => {
+		if (visible && !activeIndex) {
+			dispatch(actions.initActiveIndex());
+		}
+	}, [activeIndex, visible]);
+
 	useEffect(
 		function () {
 			const { current } = inputEl;
@@ -92,6 +100,7 @@ function Dropdown({
 			value={valueFromProps}
 			zIndex={zIndex}
 			management={management}
+			logFunction={logFunction}
 		>
 			<DeclarationAfterLabel />
 			<span