@inseefr/lunatic 0.2.2-experimental → 0.2.2-prisme

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

@@ -1,13 +1,13 @@
-const INITIAL = {
-	id: '',
-	search: '',
-	options: [],
-	focused: false,
-	expended: false,
-	disabled: false,
-	displayLabel: true,
-	selectedIndex: undefined,
-	messageError: undefined,
-};
-
-export default INITIAL;
+const INITIAL = {
+	id: '',
+	search: '',
+	options: [],
+	focused: false,
+	expended: false,
+	disabled: false,
+	displayLabel: true,
+	selectedIndex: undefined,
+	messageError: undefined,
+};
+
+export default INITIAL;

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

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

package/src/components/suggester/state-management/reducer/reduce-on-blur.js

@@ -1,5 +1,5 @@
-function reduce(state) {
-	return { ...state, focused: false, expended: false, displayLabel: true };
-}
-
-export default reduce;
+function reduce(state) {
+	return { ...state, focused: false, expended: false, displayLabel: true };
+}
+
+export default reduce;

package/src/components/suggester/state-management/reducer/reduce-on-change-search.js

@@ -1,8 +1,8 @@
-function reduce(state, action) {
-	const { payload } = action;
-	const { search } = payload;
-
-	return { ...state, search, selectedIndex: undefined };
-}
-
-export default reduce;
+function reduce(state, action) {
+	const { payload } = action;
+	const { search } = payload;
+
+	return { ...state, search, selectedIndex: undefined };
+}
+
+export default reduce;

package/src/components/suggester/state-management/reducer/reduce-on-click-option.js

@@ -1,8 +1,8 @@
-function reduce(state, action) {
-	const { payload } = action;
-	const { index: selectedIndex } = payload;
-
-	return { ...state, selectedIndex, expended: false };
-}
-
-export default reduce;
+function reduce(state, action) {
+	const { payload } = action;
+	const { index: selectedIndex } = payload;
+
+	return { ...state, selectedIndex, expended: false };
+}
+
+export default reduce;

package/src/components/suggester/state-management/reducer/reduce-on-error.js

@@ -1,8 +1,8 @@
-function reduce(state, action) {
-	const { payload } = action;
-	const { message } = payload;
-
-	return { ...state, messageError: message };
-}
-
-export default reduce;
+function reduce(state, action) {
+	const { payload } = action;
+	const { message } = payload;
+
+	return { ...state, messageError: message };
+}
+
+export default reduce;

package/src/components/suggester/state-management/reducer/reduce-on-focus.js

@@ -1,5 +1,5 @@
-function reduce(state) {
-	return { ...state, focused: true, expended: true, displayLabel: false };
-}
-
-export default reduce;
+function reduce(state) {
+	return { ...state, focused: true, expended: true, displayLabel: false };
+}
+
+export default reduce;

package/src/components/suggester/state-management/reducer/reduce-on-key-down.js

@@ -1,73 +1,73 @@
-import { BINDED_KEYS } from '../../commons-tools';
-
-function reduceArrowDown(state) {
-	const { options, selectedIndex: prec } = state;
-	if (options.length) {
-		const selectedIndex = Math.min(prec + 1 || 0, options.length - 1);
-		return { ...state, selectedIndex, expended: true, displayLabel: true };
-	}
-	return state;
-}
-
-function reduceArrowUp(state) {
-	const { selectedIndex: prec, options } = state;
-	if (options.length) {
-		const selectedIndex = Math.max(prec - 1 || 0, 0);
-		return { ...state, selectedIndex, expended: true, displayLabel: true };
-	}
-	return state;
-}
-
-function reduceHome(state) {
-	const { options } = state;
-	if (options.length) {
-		return { ...state, selectedIndex: 0, expended: true };
-	}
-	return state;
-}
-
-function reduceEnd(state) {
-	const { options } = state;
-	if (options.length) {
-		return { ...state, selectedIndex: options.length - 1, expended: true };
-	}
-	return state;
-}
-
-function reduceTab(state) {
-	return { ...state, focused: false, expended: false };
-}
-
-function reduceEnter(state) {
-	const { expended } = state;
-	return { ...state, expended: !expended };
-}
-
-function reduceEscape(state) {
-	return { ...state, expended: false };
-}
-
-function reduce(state, action) {
-	const { payload } = action;
-	const { key } = payload;
-	switch (key) {
-		case BINDED_KEYS.ArrowDown:
-			return reduceArrowDown(state);
-		case BINDED_KEYS.ArrowUp:
-			return reduceArrowUp(state);
-		case BINDED_KEYS.Home:
-			return reduceHome(state);
-		case BINDED_KEYS.End:
-			return reduceEnd(state);
-		case BINDED_KEYS.Tab:
-			return reduceTab(state);
-		case BINDED_KEYS.Enter:
-			return reduceEnter(state);
-		case BINDED_KEYS.Escape:
-			return reduceEscape(state);
-		default:
-			return state;
-	}
-}
-
-export default reduce;
+import { BINDED_KEYS } from '../../commons-tools';
+
+function reduceArrowDown(state) {
+	const { options, selectedIndex: prec } = state;
+	if (options.length) {
+		const selectedIndex = Math.min(prec + 1 || 0, options.length - 1);
+		return { ...state, selectedIndex, expended: true, displayLabel: true };
+	}
+	return state;
+}
+
+function reduceArrowUp(state) {
+	const { selectedIndex: prec, options } = state;
+	if (options.length) {
+		const selectedIndex = Math.max(prec - 1 || 0, 0);
+		return { ...state, selectedIndex, expended: true, displayLabel: true };
+	}
+	return state;
+}
+
+function reduceHome(state) {
+	const { options } = state;
+	if (options.length) {
+		return { ...state, selectedIndex: 0, expended: true };
+	}
+	return state;
+}
+
+function reduceEnd(state) {
+	const { options } = state;
+	if (options.length) {
+		return { ...state, selectedIndex: options.length - 1, expended: true };
+	}
+	return state;
+}
+
+function reduceTab(state) {
+	return { ...state, focused: false, expended: false };
+}
+
+function reduceEnter(state) {
+	const { expended } = state;
+	return { ...state, expended: !expended };
+}
+
+function reduceEscape(state) {
+	return { ...state, expended: false };
+}
+
+function reduce(state, action) {
+	const { payload } = action;
+	const { key } = payload;
+	switch (key) {
+		case BINDED_KEYS.ArrowDown:
+			return reduceArrowDown(state);
+		case BINDED_KEYS.ArrowUp:
+			return reduceArrowUp(state);
+		case BINDED_KEYS.Home:
+			return reduceHome(state);
+		case BINDED_KEYS.End:
+			return reduceEnd(state);
+		case BINDED_KEYS.Tab:
+			return reduceTab(state);
+		case BINDED_KEYS.Enter:
+			return reduceEnter(state);
+		case BINDED_KEYS.Escape:
+			return reduceEscape(state);
+		default:
+			return state;
+	}
+}
+
+export default reduce;

package/src/components/suggester/state-management/reducer/reduce-on-unexpected-error.js

@@ -1,7 +1,7 @@
-function reduce(state, action) {
-	const { payload } = action;
-	const { error } = payload;
-	return { ...state, unexpectedError: error };
-}
-
-export default reduce;
+function reduce(state, action) {
+	const { payload } = action;
+	const { error } = payload;
+	return { ...state, unexpectedError: error };
+}
+
+export default reduce;

package/src/components/suggester/state-management/reducer/reduce-on-update-options.js

@@ -1,11 +1,11 @@
-function reduce(state, action) {
-	const { payload } = action;
-	const { options, search: old } = payload;
-	const { search } = state;
-	if (search === old) {
-		return { ...state, options };
-	}
-	return { ...state, options: [] };
-}
-
-export default reduce;
+function reduce(state, action) {
+	const { payload } = action;
+	const { options, search: old } = payload;
+	const { search } = state;
+	if (search === old) {
+		return { ...state, options };
+	}
+	return { ...state, options: [] };
+}
+
+export default reduce;

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

@@ -1,4 +1,4 @@
-import React from 'react';
-const context = React.createContext([undefined, undefined]);
-
-export default context;
+import React from 'react';
+const context = React.createContext([undefined, undefined]);
+
+export default context;

package/src/components/suggester/state-management/use-dispatch.js

@@ -1,11 +1,11 @@
-import { useContext } from 'react';
-import SuggesterContext from './suggester-context';
-
-function useDispatch() {
-	const context = useContext(SuggesterContext);
-	const dispatch = context[1];
-
-	return dispatch;
-}
-
-export default useDispatch;
+import { useContext } from 'react';
+import SuggesterContext from './suggester-context';
+
+function useDispatch() {
+	const context = useContext(SuggesterContext);
+	const dispatch = context[1];
+
+	return dispatch;
+}
+
+export default useDispatch;

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

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

package/src/components/suggester-loader-widget/index.js

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

package/src/components/suggester-loader-widget/loader-row.js

@@ -1,102 +1,102 @@
-import React, { useEffect, useState, useCallback } from 'react';
-import classnames from 'classnames';
-import {
-	useStoreIndex,
-	getStoreCount,
-	clearStoreData,
-} from '../../utils/store-tools';
-import CrossIcon from '../../utils/icons/cross.icon';
-import LoadIcon from '../../utils/icons/load.icon';
-import Loader from './loader';
-
-function LoaderRow({
-	storeInfo,
-	idbVersion,
-	fetchStore,
-	onRefresh,
-	disabled = false,
-}) {
-	const { name } = storeInfo;
-	const db = useStoreIndex(storeInfo, idbVersion);
-	const [nbEntities, setNbEntities] = useState(undefined);
-	const [start, setStart] = useState(false);
-
-	const post = useCallback(
-		function (_, count) {
-			setNbEntities(count);
-			onRefresh(`Store ${name} loaded.`);
-		},
-		[onRefresh, name]
-	);
-	const clear = useCallback(
-		function () {
-			if (db) {
-				clearStoreData(db);
-				setNbEntities(0);
-			}
-		},
-		[db]
-	);
-
-	useEffect(
-		function () {
-			async function count() {
-				const c = await getStoreCount(db);
-				setNbEntities(c);
-			}
-
-			if (db) {
-				count();
-			}
-		},
-		[db]
-	);
-
-	const handleClick = useCallback(function (p) {
-		if (p === 100) {
-			setStart(false);
-		}
-	}, []);
-
-	return (
-		<div className="widget-row">
-			<div className="store-name">{name}</div>
-			{start ? (
-				<Loader
-					start={true}
-					db={db}
-					store={storeInfo}
-					idVersion={idbVersion}
-					fetch={fetchStore}
-					post={post}
-					handleClick={handleClick}
-				/>
-			) : (
-				<>
-					<div className="stats">
-						{nbEntities > 0 ? `${nbEntities} entities.` : 'Empty store.'}
-					</div>
-
-					<button
-						className={classnames('widget-button', { disabled })}
-						disabled={disabled}
-						onClick={() => setStart(true)}
-						title="Load"
-					>
-						<LoadIcon className="lunatic-suggester-icon" />
-					</button>
-					<button
-						className={classnames('widget-button', { disabled })}
-						disabled={disabled}
-						onClick={clear}
-						title="Clear"
-					>
-						<CrossIcon className="lunatic-suggester-icon" />
-					</button>
-				</>
-			)}
-		</div>
-	);
-}
-
-export default LoaderRow;
+import React, { useEffect, useState, useCallback } from 'react';
+import classnames from 'classnames';
+import {
+	useStoreIndex,
+	getStoreCount,
+	clearStoreData,
+} from '../../utils/store-tools';
+import CrossIcon from '../../utils/icons/cross.icon';
+import LoadIcon from '../../utils/icons/load.icon';
+import Loader from './loader';
+
+function LoaderRow({
+	storeInfo,
+	idbVersion,
+	fetchStore,
+	onRefresh,
+	disabled = false,
+}) {
+	const { name } = storeInfo;
+	const db = useStoreIndex(storeInfo, idbVersion);
+	const [nbEntities, setNbEntities] = useState(undefined);
+	const [start, setStart] = useState(false);
+
+	const post = useCallback(
+		function (_, count) {
+			setNbEntities(count);
+			onRefresh(`Store ${name} loaded.`);
+		},
+		[onRefresh, name]
+	);
+	const clear = useCallback(
+		function () {
+			if (db) {
+				clearStoreData(db);
+				setNbEntities(0);
+			}
+		},
+		[db]
+	);
+
+	useEffect(
+		function () {
+			async function count() {
+				const c = await getStoreCount(db);
+				setNbEntities(c);
+			}
+
+			if (db) {
+				count();
+			}
+		},
+		[db]
+	);
+
+	const handleClick = useCallback(function (p) {
+		if (p === 100) {
+			setStart(false);
+		}
+	}, []);
+
+	return (
+		<div className="widget-row">
+			<div className="store-name">{name}</div>
+			{start ? (
+				<Loader
+					start={true}
+					db={db}
+					store={storeInfo}
+					idVersion={idbVersion}
+					fetch={fetchStore}
+					post={post}
+					handleClick={handleClick}
+				/>
+			) : (
+				<>
+					<div className="stats">
+						{nbEntities > 0 ? `${nbEntities} entities.` : 'Empty store.'}
+					</div>
+
+					<button
+						className={classnames('widget-button', { disabled })}
+						disabled={disabled}
+						onClick={() => setStart(true)}
+						title="Load"
+					>
+						<LoadIcon className="lunatic-suggester-icon" />
+					</button>
+					<button
+						className={classnames('widget-button', { disabled })}
+						disabled={disabled}
+						onClick={clear}
+						title="Clear"
+					>
+						<CrossIcon className="lunatic-suggester-icon" />
+					</button>
+				</>
+			)}
+		</div>
+	);
+}
+
+export default LoaderRow;

package/src/components/suggester-loader-widget/progress.js

@@ -1,25 +1,25 @@
-import React from 'react';
-import classnames from 'classnames';
-
-function Progress({ display, percent = 0, handleClick = () => null }) {
-	if (display) {
-		return (
-			<div
-				className={classnames('lunatic-suggester-loader-progress', {
-					done: percent === 100,
-				})}
-				onClick={() => handleClick(percent)}
-			>
-				<div className="content">
-					<div
-						className="progress"
-						style={{ width: `${Math.round(percent)}%` }}
-					></div>
-				</div>
-			</div>
-		);
-	}
-	return null;
-}
-
-export default Progress;
+import React from 'react';
+import classnames from 'classnames';
+
+function Progress({ display, percent = 0, handleClick = () => null }) {
+	if (display) {
+		return (
+			<div
+				className={classnames('lunatic-suggester-loader-progress', {
+					done: percent === 100,
+				})}
+				onClick={() => handleClick(percent)}
+			>
+				<div className="content">
+					<div
+						className="progress"
+						style={{ width: `${Math.round(percent)}%` }}
+					></div>
+				</div>
+			</div>
+		);
+	}
+	return null;
+}
+
+export default Progress;

package/src/components/suggester-loader-widget/tools/action-tool.js

@@ -1,20 +1,20 @@
-import React from 'react';
-import classnames from 'classnames';
-
-function ActionTool({ children, ariaLabel, className, title, display = true }) {
-	if (display) {
-		return (
-			<div
-				aria-label={ariaLabel}
-				role="button"
-				className={classnames('lunatic-action-tool', className)}
-				title={title}
-			>
-				{children}
-			</div>
-		);
-	}
-	return null;
-}
-
-export default ActionTool;
+import React from 'react';
+import classnames from 'classnames';
+
+function ActionTool({ children, ariaLabel, className, title, display = true }) {
+	if (display) {
+		return (
+			<div
+				aria-label={ariaLabel}
+				role="button"
+				className={classnames('lunatic-action-tool', className)}
+				title={title}
+			>
+				{children}
+			</div>
+		);
+	}
+	return null;
+}
+
+export default ActionTool;

package/src/components/suggester-loader-widget/tools/index.js

@@ -1,2 +1,2 @@
-export { default as ActionTool } from './action-tool';
-export { default as Tools } from './tools';
+export { default as ActionTool } from './action-tool';
+export { default as Tools } from './tools';