@inseefr/lunatic 0.1.0-hackathon → 0.1.0-prisme

package/src/components/suggester/check-store.js

@@ -1,70 +1,68 @@
-import React, { useEffect, useState, useCallback } from 'react';
-import { openDb, getEntity } from '../../utils/idb-tools';
-import { CONSTANTES } from '../../utils/store-tools';
-
-function CheckStore({ storeName, version, setStore, children }) {
-	const [ready, setReady] = useState(0);
-	const [refresh, setRefresh] = useState(false);
-	const [disabled, setDisabled] = useState(false);
-
-	const checkStore = useCallback(
-		async function () {
-			try {
-				const db = await openDb(storeName, version);
-				const info = await getEntity(db, CONSTANTES.STORE_INFO_NAME, storeName);
-
-				if (db && info) {
-					setReady(200);
-					setStore(info);
-				}
-			} catch (e) {
-				setReady(400);
-			}
-		},
-		[storeName, version, setStore]
-	);
-
-	useEffect(
-		function () {
-			checkStore();
-		},
-		[checkStore]
-	);
-
-	useEffect(
-		function () {
-			if (refresh) {
-				setRefresh(false);
-				setDisabled(true);
-				async function go() {
-					await checkStore();
-					setDisabled(false);
-				}
-
-				go();
-			}
-		},
-		[refresh]
-	);
-
-	if (ready === 0) {
-		return (
-			<div className="lunatic-suggester-in-progress">
-				Le store {storeName} est en cour de chargement.
-			</div>
-		);
-	}
-	if (ready === 200) {
-		return children;
-	}
-	return (
-		<div className="lunatic-suggester-unvailable">
-			Le store {storeName} n'est pas disponible.
-			<button disabled={disabled} onClick={() => setRefresh(true)}>
-				Refresh
-			</button>
-		</div>
-	);
-}
-
-export default CheckStore;
+import React, { useEffect, useState, useCallback } from 'react';
+import { openDb, getEntity } from '../../utils/idb-tools';
+import { CONSTANTES } from '../../utils/store-tools';
+
+function CheckStore({ storeName, version, setStore, children }) {
+	const [ready, setReady] = useState(0);
+	const [refresh, setRefresh] = useState(false);
+	const [disabled, setDisabled] = useState(false);
+
+	const checkStore = useCallback(
+		async function () {
+			try {
+				const db = await openDb(storeName, version);
+				const info = await getEntity(db, CONSTANTES.STORE_INFO_NAME, storeName);
+
+				if (db && info) {
+					setReady(200);
+					setStore(info);
+				}
+			} catch (e) {
+				setReady(400);
+			}
+		},
+		[storeName, version, setStore]
+	);
+
+	useEffect(
+		function () {
+			checkStore();
+		},
+		[checkStore]
+	);
+
+	useEffect(
+		function () {
+			if (refresh) {
+				setRefresh(false);
+				setDisabled(true);
+				async function go() {
+					await checkStore();
+					setDisabled(false);
+				}
+
+				go();
+			}
+		},
+		[refresh]
+	);
+
+	if (ready === 0) {
+		return (
+			<div className="lunatic-suggester-in-progress">
+				Le store {storeName} est en cour de chargement.
+			</div>
+		);
+	}
+	if (ready === 200) {
+		return children;
+	}
+	return (
+		<div className="lunatic-suggester-unvailable">
+			La suggestion sur liste n'est pas possible sur votre navigateur, vous
+			pouvez passer la question en appuyant sur Enregistrer et Continuer
+		</div>
+	);
+}
+
+export default CheckStore;

package/src/components/suggester/commons-tools/binded-keys.js

@@ -1,11 +1,11 @@
-export const BINDED_KEYS = {
-	ArrowUp: 'ArrowUp',
-	ArrowDown: 'ArrowDown',
-	Home: 'Home',
-	End: 'End',
-	Enter: 'Enter',
-	Escape: 'Escape',
-	Tab: 'Tab',
-};
-
-export default BINDED_KEYS;
+export const BINDED_KEYS = {
+	ArrowUp: 'ArrowUp',
+	ArrowDown: 'ArrowDown',
+	Home: 'Home',
+	End: 'End',
+	Enter: 'Enter',
+	Escape: 'Escape',
+	Tab: 'Tab',
+};
+
+export default BINDED_KEYS;

package/src/components/suggester/commons-tools/index.js

@@ -1 +1 @@
-export { default as BINDED_KEYS } from './binded-keys';
+export { default as BINDED_KEYS } from './binded-keys';

package/src/components/suggester/components/create-on-keydown-callback.js

@@ -1,28 +1,28 @@
-import { actions } from '../state-management';
-import { BINDED_KEYS } from '../commons-tools';
-
-function create(dispatch) {
-	return function (e) {
-		const { key } = e;
-		switch (key) {
-			case BINDED_KEYS.Tab:
-				e.stopPropagation();
-				// e.preventDefault();
-				dispatch(actions.onKeyDown(key));
-				break;
-			case BINDED_KEYS.ArrowDown:
-			case BINDED_KEYS.ArrowUp:
-			case BINDED_KEYS.Home:
-			case BINDED_KEYS.End:
-			case BINDED_KEYS.Enter:
-			case BINDED_KEYS.Escape:
-				e.preventDefault();
-				e.stopPropagation();
-				dispatch(actions.onKeyDown(key));
-				break;
-			default:
-		}
-	};
-}
-
-export default create;
+import { actions } from '../state-management';
+import { BINDED_KEYS } from '../commons-tools';
+
+function create(dispatch) {
+	return function (e) {
+		const { key } = e;
+		switch (key) {
+			case BINDED_KEYS.Tab:
+				e.stopPropagation();
+				// e.preventDefault();
+				dispatch(actions.onKeyDown(key));
+				break;
+			case BINDED_KEYS.ArrowDown:
+			case BINDED_KEYS.ArrowUp:
+			case BINDED_KEYS.Home:
+			case BINDED_KEYS.End:
+			case BINDED_KEYS.Enter:
+			case BINDED_KEYS.Escape:
+				e.preventDefault();
+				e.stopPropagation();
+				dispatch(actions.onKeyDown(key));
+				break;
+			default:
+		}
+	};
+}
+
+export default create;

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

@@ -1,2 +1,2 @@
-export { default as Suggester } from './suggester';
-export { DefaultOptionRenderer } from './panel';
+export { default as Suggester } from './suggester';
+export { DefaultOptionRenderer } from './panel';

package/src/components/suggester/components/panel/index.js

@@ -1,2 +1,2 @@
-export { default } from './panel';
-export { default as DefaultOptionRenderer } from './default-option-renderer';
+export { default } from './panel';
+export { default as DefaultOptionRenderer } from './default-option-renderer';

package/src/components/suggester/components/panel/option-container.js

@@ -50,7 +50,7 @@ function OptionContainer({ children, index, selected }) {
 			className={classnames('lunatic-suggester-option', { selected })}
 			role="option"
 			aria-selected={selected}
-			onClick={onClick}
+			onMouseDown={onClick}
 			ref={ref}
 		>
 			{children}

package/src/components/suggester/components/panel/panel-container.js

@@ -1,21 +1,21 @@
-import React from 'react';
-import classnames from 'classnames';
-
-function PanelContainer({ children, focused, expended, id }) {
-	return (
-		<ul
-			id={id}
-			tabIndex="-1"
-			aria-label="suggestions"
-			className={classnames('lunatic-suggester-panel', {
-				focused,
-				expended,
-			})}
-			role="listbox"
-		>
-			{children}
-		</ul>
-	);
-}
-
-export default PanelContainer;
+import React from 'react';
+import classnames from 'classnames';
+
+function PanelContainer({ children, focused, expended, id }) {
+	return (
+		<ul
+			id={id}
+			tabIndex="-1"
+			aria-label="suggestions"
+			className={classnames('lunatic-suggester-panel', {
+				focused,
+				expended,
+			})}
+			role="listbox"
+		>
+			{children}
+		</ul>
+	);
+}
+
+export default PanelContainer;

package/src/components/suggester/components/selection/delete.js

@@ -1,38 +1,38 @@
-import React, { useMemo } from 'react';
-import classnames from 'classnames';
-import { Fab } from '../../../../utils/components/fab';
-import CrossIcon from '../../../../utils/icons/cross.icon';
-
-function isDisabled(search) {
-	return !search || search.trim().length === 0;
-}
-
-function createOnKeyDown(onClick) {
-	if (typeof onClick === 'function') {
-		return function onKeyDown(e) {
-			const { key } = e;
-			if (key === 'Enter') {
-				onClick();
-			}
-		};
-	}
-	return () => null;
-}
-
-function Delete({ className, search, onClick }) {
-	const onKeyDown = useMemo(() => createOnKeyDown(onClick), [onClick]);
-	return (
-		<Fab
-			className={classnames('mini', 'lunatic-suggester-fab', className)}
-			tabIndex="0"
-			title="delete"
-			onClick={onClick}
-			disabled={isDisabled(search)}
-			onKeyDown={onKeyDown}
-		>
-			<CrossIcon className="lunatic-suggester-icon" />
-		</Fab>
-	);
-}
-
-export default Delete;
+import React, { useMemo } from 'react';
+import classnames from 'classnames';
+import { Fab } from '../../../../utils/components/fab';
+import CrossIcon from '../../../../utils/icons/cross.icon';
+
+function isDisabled(search) {
+	return !search || search.trim().length === 0;
+}
+
+function createOnKeyDown(onClick) {
+	if (typeof onClick === 'function') {
+		return function onKeyDown(e) {
+			const { key } = e;
+			if (key === 'Enter') {
+				onClick();
+			}
+		};
+	}
+	return () => null;
+}
+
+function Delete({ className, search, onClick }) {
+	const onKeyDown = useMemo(() => createOnKeyDown(onClick), [onClick]);
+	return (
+		<Fab
+			className={classnames('mini', 'lunatic-suggester-fab', className)}
+			tabIndex="0"
+			title="delete"
+			onClick={onClick}
+			disabled={isDisabled(search)}
+			onKeyDown={onKeyDown}
+		>
+			<CrossIcon className="lunatic-suggester-icon" />
+		</Fab>
+	);
+}
+
+export default Delete;

package/src/components/suggester/components/selection/index.js

@@ -1 +1 @@
-export { default } from './selection';
+export { default } from './selection';

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

@@ -39,7 +39,7 @@ function Selection({ labelRenderer, placeholderList, labelledBy }, inputEl) {
 				autoCapitalize="off"
 				autoCorrect="off"
 				spellCheck="false"
-				placeholderList={placeholderList}
+				placeholderlist={placeholderList}
 				disabled={disabled}
 			/>
 			<Label labelRenderer={labelRenderer} placeholderList={placeholderList} />

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/find-best-label/find-best-label.js

@@ -1,3 +1,5 @@
+import { createWorker } from '../../../utils/suggester-workers/create-worker';
+
 const WORKER_PATH =
 	process.env.LUNATIC_LABEL_WORKER_PATH ||
 	process.env.REACT_APP_LUNATIC_LABEL_WORKER_PATH;
@@ -15,7 +17,7 @@ function getIdTask() {
 
 function getWorker() {
 	if (!WORKER) {
-		WORKER = new Worker(WORKER_PATH);
+		WORKER = createWorker(WORKER_PATH);
 		WORKER.addEventListener('message', function (e) {
 			const { data } = e;
 			const { response, idTask } = data;

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/index.js

@@ -1 +1 @@
-export { default } from './lunatic-suggester';
+export { default } from './lunatic-suggester';

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

@@ -1,5 +1,6 @@
-import React, { useCallback, useState, useEffect } from 'react';
+import React, { useCallback, useState } from 'react';
 import PropTypes from 'prop-types';
+import componentWrapper from '../component-wrapper';
 import Declarations from '../declarations';
 import * as U from '../../utils/lib';
 import * as C from '../../constants';
@@ -41,8 +42,9 @@ function Suggester({
 	const onSelect = useCallback(
 		function (suggestion) {
 			const ids = getSuggestionId(suggestion);
+			// Delete: null --> empty to handle controls
 			handleChange({
-				[U.getResponseName(response)]: ids,
+				[U.getResponseName(response)]: ids || '',
 			});
 			setValue(ids);
 		},
@@ -87,6 +89,7 @@ function Suggester({
 						response={response}
 						id={id}
 						value={value}
+						logFunction={logFunction}
 					/>
 				</FieldWrapper>
 			</LabelWrapper>
@@ -134,4 +137,4 @@ Suggester.propTypes = {
 	getStoreInfo: PropTypes.func,
 };
 
-export default React.memo(Suggester, U.areEqual);
+export default componentWrapper(React.memo(Suggester, U.areEqual));

package/src/components/suggester/searching/create-searching.js

@@ -1,3 +1,5 @@
+import { createWorker } from '../../../utils/suggester-workers/create-worker';
+
 const WORKER_PATH =
 	process.env.LUNATIC_SEARCH_WORKER_PATH ||
 	process.env.REACT_APP_LUNATIC_SEARCH_WORKER_PATH;
@@ -19,7 +21,7 @@ const searching = (worker) => (search, name, version) => {
 				if (worker) {
 					worker.terminate();
 				}
-				worker = new Worker(WORKER_PATH);
+				worker = createWorker(WORKER_PATH);
 				worker.postMessage({ search, name, version });
 				worker.addEventListener('message', function (e) {
 					const { data } = e;

package/src/components/suggester/state-management/index.js

@@ -1,6 +1,6 @@
-import * as actions from './actions';
-export { default as reducer } from './reducer';
-export { default as SuggesterContext } from './suggester-context';
-export { default as INITIAL_STATE } from './intial-state';
-export { default as useDispatch } from './use-dispatch';
-export { actions };
+import * as actions from './actions';
+export { default as reducer } from './reducer';
+export { default as SuggesterContext } from './suggester-context';
+export { default as INITIAL_STATE } from './intial-state';
+export { default as useDispatch } from './use-dispatch';
+export { actions };