@inseefr/lunatic 0.3.0-experimental → 0.3.0-prisme

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

@@ -1,183 +1,204 @@
-import React, { useEffect, useCallback, useMemo } from 'react';
-import PropTypes from 'prop-types';
-import classnames from 'classnames';
-import Label from './label';
-import * as U from '../../../../utils/lib';
-import * as CLEAN from '../cleaner-callbacks';
-import * as actions from '../actions';
-import DropdownField from './dropdown-field';
-import DropdownContainer from './dropdown-container';
-import {
-	createOnKeyDownCallback,
-	createOnMouseDownCallback,
-	BINDED_KEYS,
-} from '../event-callbacks';
-
-/** */
-function stopAndPrevent(e) {
-	e.preventDefault();
-	e.stopPropagation();
-}
-
-/** */
-function prepareOptions(options, valueFromProps) {
-	return options.reduce(
-		(a, o, i) =>
-			o.value === valueFromProps && a.index === -1
-				? { index: i, option: o }
-				: a,
-		{ index: -1, option: {} }
-	);
-}
-
-/** */
-function onKeyDownCallbackProxy(state, dispatch, onSelect) {
-	const callback = createOnKeyDownCallback(state, dispatch, onSelect);
-	return function (e) {
-		switch (e.key) {
-			case BINDED_KEYS.enter:
-			case BINDED_KEYS.arrowUp:
-			case BINDED_KEYS.arrowDown:
-				stopAndPrevent(e);
-				callback(e.key);
-				break;
-			case BINDED_KEYS.tab:
-				callback(e.key);
-				break;
-			default:
-				return;
-		}
-		return false;
-	};
-}
-
-function Dropdown({
-	options,
-	children,
-	onSelect,
-	response,
-	className,
-	label,
-	labelPosition,
-	mandatory,
-	value: valueFromProps,
-	management,
-	state,
-	dispatch,
-	refs,
-}) {
-	const { visible, focused, id, disabled } = state;
-
-	CLEAN.add(id, function () {
-		dispatch(actions.hidePanel());
-		dispatch(actions.setFocused(false));
-	});
-	useEffect(
-		function () {
-			const hook = function () {
-				dispatch(actions.hidePanel());
-				dispatch(actions.setFocused(false));
-			};
-			window.addEventListener('mousedown', hook);
-
-			return function () {
-				window.removeEventListener('mousedown', hook);
-				CLEAN.clear(id);
-			};
-		},
-		[id, dispatch]
-	);
-
-	useEffect(
-		function () {
-			dispatch(actions.setOptions(options));
-		},
-		[options, dispatch]
-	);
-
-	useEffect(
-		function () {
-			if (valueFromProps) {
-				const { option, index } = prepareOptions(options, valueFromProps);
-				dispatch(actions.setSelectedOption(option));
-				dispatch(actions.setActiveOption(index));
-			}
-		},
-		[valueFromProps, options, dispatch]
-	);
-
-	const onFocus = useCallback(
-		function () {
-			dispatch(actions.setFocused(true && !disabled));
-		},
-		[dispatch, disabled]
-	);
-
-	const onBlur = useCallback(
-		function () {
-			dispatch(actions.setFocused(false));
-		},
-		[dispatch]
-	);
-
-	const onMouseDownCallback = useMemo(
-		() => createOnMouseDownCallback(state, dispatch),
-		[state, dispatch]
-	);
-
-	const onKeyDownCallback = useMemo(
-		() => onKeyDownCallbackProxy(state, dispatch, onSelect),
-		[state, dispatch, onSelect]
-	);
-
-	return (
-		<DropdownContainer
-			className={classnames(className, U.getLabelPositionClass(labelPosition), {
-				focused,
-				disabled,
-			})}
-			id={id}
-			onMouseDown={onMouseDownCallback}
-			onKeyDown={onKeyDownCallback}
-			onFocus={onFocus}
-			onBlur={onBlur}
-			ref={refs}
-		>
-			<Label content={label} focused={focused} mandatory={mandatory} />
-			<DropdownField
-				id={id}
-				response={response}
-				options={options}
-				management={management}
-				focused={focused}
-				visible={visible}
-				disabled={disabled}
-			>
-				{children}
-			</DropdownField>
-		</DropdownContainer>
-	);
-}
-
-Dropdown.propTypes = {
-	zIndex: PropTypes.number,
-	className: PropTypes.string,
-	id: PropTypes.string,
-	options: PropTypes.array.isRequired,
-	onSelect: PropTypes.func,
-	value: PropTypes.oneOfType([
-		PropTypes.string,
-		PropTypes.number,
-		PropTypes.object,
-		PropTypes.bool,
-	]),
-};
-
-Dropdown.defaultProps = {
-	options: [],
-	onSelect: () => null,
-};
-
-export default React.forwardRef((props, ref) => (
-	<Dropdown {...props} refs={ref} />
-));
+import React, { useEffect, useCallback, useMemo } from 'react';
+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';
+import DropdownContainer from './dropdown-container';
+import {
+	createOnKeyDownCallback,
+	createOnMouseDownCallback,
+	BINDED_KEYS,
+} from '../event-callbacks';
+
+/** */
+function stopAndPrevent(e) {
+	e.preventDefault();
+	e.stopPropagation();
+}
+
+/** */
+function prepareOptions(options, valueFromProps) {
+	return options.reduce(
+		(a, o, i) =>
+			o.value === valueFromProps && a.index === -1
+				? { index: i, option: o }
+				: a,
+		{ index: -1, option: {} }
+	);
+}
+
+/** */
+function onKeyDownCallbackProxy(state, dispatch, onSelect) {
+	const callback = createOnKeyDownCallback(state, dispatch, onSelect);
+	return function (e) {
+		switch (e.key) {
+			case BINDED_KEYS.enter:
+			case BINDED_KEYS.arrowUp:
+			case BINDED_KEYS.arrowDown:
+				stopAndPrevent(e);
+				callback(e.key);
+				break;
+			case BINDED_KEYS.tab:
+				callback(e.key);
+				break;
+			default:
+				return;
+		}
+		return false;
+	};
+}
+
+function Dropdown({
+	options,
+	children,
+	onSelect,
+	response,
+	className,
+	label,
+	labelPosition,
+	mandatory,
+	value: valueFromProps,
+	management,
+	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));
+	});
+	useEffect(
+		function () {
+			const hook = function () {
+				dispatch(actions.hidePanel());
+				dispatch(actions.setFocused(false));
+			};
+			window.addEventListener('mousedown', hook);
+
+			return function () {
+				window.removeEventListener('mousedown', hook);
+				CLEAN.clear(id);
+			};
+		},
+		[id, dispatch]
+	);
+
+	useEffect(
+		function () {
+			dispatch(actions.setOptions(options));
+		},
+		[options, dispatch]
+	);
+
+	useEffect(
+		function () {
+			if (valueFromProps) {
+				const { option, index } = prepareOptions(options, valueFromProps);
+				dispatch(actions.setSelectedOption(option));
+				dispatch(actions.setActiveOption(index));
+			}
+		},
+		[valueFromProps, options, dispatch]
+	);
+
+	const onFocus = useCallback(
+		function () {
+			dispatch(actions.setFocused(true && !disabled));
+		},
+		[dispatch, disabled]
+	);
+
+	const onBlur = useCallback(
+		function () {
+			dispatch(actions.setFocused(false));
+		},
+		[dispatch]
+	);
+
+	const onMouseDownCallback = useMemo(
+		() => createOnMouseDownCallback(state, dispatch),
+		[state, dispatch]
+	);
+
+	const onKeyDownCallback = useMemo(
+		() => onKeyDownCallbackProxy(state, dispatch, onSelect),
+		[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), {
+				focused,
+				disabled,
+			})}
+			id={id}
+			onMouseDown={onMouseDownCallback}
+			onKeyDown={onKeyDownCallback}
+			onFocus={onFocus}
+			onBlur={onBlur}
+			ref={refs}
+		>
+			<Label content={label} focused={focused} mandatory={mandatory} />
+			<DropdownField
+				id={id}
+				response={response}
+				options={options}
+				management={management}
+				focused={focused}
+				visible={visible}
+				disabled={disabled}
+			>
+				{children}
+			</DropdownField>
+		</DropdownContainer>
+	);
+}
+
+Dropdown.propTypes = {
+	zIndex: PropTypes.number,
+	className: PropTypes.string,
+	id: PropTypes.string,
+	options: PropTypes.array.isRequired,
+	onSelect: PropTypes.func,
+	value: PropTypes.oneOfType([
+		PropTypes.string,
+		PropTypes.number,
+		PropTypes.object,
+		PropTypes.bool,
+	]),
+};
+
+Dropdown.defaultProps = {
+	options: [],
+	onSelect: () => null,
+};
+
+export default React.forwardRef((props, ref) => (
+	<Dropdown {...props} refs={ref} />
+));

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/on-mousedown-callback.js

@@ -1,15 +1,15 @@
-import * as CLEAN from '../cleaner-callbacks';
-import * as actions from '../actions';
-
-/** */
-const onMouseDownCallback =
-	({ visible, id, disabled }, dispatch) =>
-	(e) => {
-		e.stopPropagation();
-		if (!visible && !disabled) {
-			CLEAN.applyAll(id);
-			dispatch(actions.showPanel());
-		}
-	};
-
-export default onMouseDownCallback;
+import * as CLEAN from '../cleaner-callbacks';
+import * as actions from '../actions';
+
+/** */
+const onMouseDownCallback =
+	({ visible, id, disabled }, dispatch) =>
+	(e) => {
+		e.stopPropagation();
+		if (!visible && !disabled) {
+			CLEAN.applyAll(id);
+			dispatch(actions.showPanel());
+		}
+	};
+
+export default onMouseDownCallback;