@inseefr/lunatic 0.3.0-experimental → 0.3.0-prisme

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

@@ -1,38 +1,38 @@
-export const ON_INIT = 'lunatic-suggester/on-init';
-export const onInit = ({ id, disabled, value }) => ({
-	type: ON_INIT,
-	payload: { id, disabled, value },
-});
-
-export const ON_CHANGE_SEARCH = 'lunatic-suggester/on-change-search';
-export const onChangeSearch = (search) => ({
-	type: ON_CHANGE_SEARCH,
-	payload: { search },
-});
-
-export const ON_UPDATE_OPTIONS = 'lunatic-suggester/on-update-options';
-export const onUpdateOptions = (options, search) => ({
-	type: ON_UPDATE_OPTIONS,
-	payload: { options, search },
-});
-
-export const ON_FOCUS = 'lunatic-suggester/on-focus';
-export const onFocus = () => ({ type: ON_FOCUS });
-
-export const ON_BLUR = 'lunatic-suggester/on-blur';
-export const onBlur = () => ({ type: ON_BLUR });
-
-export const ON_CLICK_OPTION = 'lunatic-suggester/on-click-option';
-export const onClickOption = (index) => ({
-	type: ON_CLICK_OPTION,
-	payload: { index },
-});
-
-export const ON_KEY_DOWN = 'lunatic-suggester/on-key-down';
-export const onKeyDown = (key) => ({ type: ON_KEY_DOWN, payload: { key } });
-
-export const ON_ERROR = 'lunatic-suggester/on-error';
-export const onError = (message) => ({ type: ON_ERROR, payload: { message } });
-
-export const ON_DELETE_SEARCH = 'lunatic-suggester/on-delete-search';
-export const onDeleteSearch = () => ({ type: ON_DELETE_SEARCH });
+export const ON_INIT = 'lunatic-suggester/on-init';
+export const onInit = ({ id, disabled, value }) => ({
+	type: ON_INIT,
+	payload: { id, disabled, value },
+});
+
+export const ON_CHANGE_SEARCH = 'lunatic-suggester/on-change-search';
+export const onChangeSearch = (search) => ({
+	type: ON_CHANGE_SEARCH,
+	payload: { search },
+});
+
+export const ON_UPDATE_OPTIONS = 'lunatic-suggester/on-update-options';
+export const onUpdateOptions = (options, search) => ({
+	type: ON_UPDATE_OPTIONS,
+	payload: { options, search },
+});
+
+export const ON_FOCUS = 'lunatic-suggester/on-focus';
+export const onFocus = () => ({ type: ON_FOCUS });
+
+export const ON_BLUR = 'lunatic-suggester/on-blur';
+export const onBlur = () => ({ type: ON_BLUR });
+
+export const ON_CLICK_OPTION = 'lunatic-suggester/on-click-option';
+export const onClickOption = (index) => ({
+	type: ON_CLICK_OPTION,
+	payload: { index },
+});
+
+export const ON_KEY_DOWN = 'lunatic-suggester/on-key-down';
+export const onKeyDown = (key) => ({ type: ON_KEY_DOWN, payload: { key } });
+
+export const ON_ERROR = 'lunatic-suggester/on-error';
+export const onError = (message) => ({ type: ON_ERROR, payload: { message } });
+
+export const ON_DELETE_SEARCH = 'lunatic-suggester/on-delete-search';
+export const onDeleteSearch = () => ({ type: ON_DELETE_SEARCH });

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

@@ -1,11 +1,11 @@
-function reduce(state) {
-	return {
-		...state,
-		search: '',
-		selectedIndex: undefined,
-		options: [],
-		expanded: false,
-	};
-}
-
-export default reduce;
+function reduce(state) {
+	return {
+		...state,
+		search: '',
+		selectedIndex: undefined,
+		options: [],
+		expanded: false,
+	};
+}
+
+export default reduce;

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

@@ -1,29 +1,29 @@
-function getStringValue(value) {
-	if (value) {
-		return `${value}`;
-	}
-	return '';
-}
-
-function getId() {
-	return `lunatic-suggester-${new Date().getTime()}`;
-}
-
-function reduce(state, action) {
-	const { payload } = action;
-	const { id, disabled, value } = payload;
-	const { search } = state;
-
-	if (value && search.length === 0) {
-		return {
-			...state,
-			id: id || getId(),
-			disabled,
-			search: getStringValue(value),
-		};
-	}
-
-	return { ...state, id: id || getId(), disabled };
-}
-
-export default reduce;
+function getStringValue(value) {
+	if (value) {
+		return `${value}`;
+	}
+	return '';
+}
+
+function getId() {
+	return `lunatic-suggester-${new Date().getTime()}`;
+}
+
+function reduce(state, action) {
+	const { payload } = action;
+	const { id, disabled, value } = payload;
+	const { search } = state;
+
+	if (value && search.length === 0) {
+		return {
+			...state,
+			id: id || getId(),
+			disabled,
+			search: getStringValue(value),
+		};
+	}
+
+	return { ...state, id: id || getId(), disabled };
+}
+
+export default reduce;

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

@@ -1,38 +1,38 @@
-import * as actions from '../actions';
-import reduceOnChangeSearch from './reduce-on-change-search';
-import reduceOnUpdateOptions from './reduce-on-update-options';
-import reduceOnFocus from './reduce-on-focus';
-import reduceOnBlur from './reduce-on-blur';
-import reduceOnClickOption from './reduce-on-click-option';
-import reduceOnKeyDown from './reduce-on-key-down';
-import reduceOnInit from './reduce-on-init';
-import reduceOnError from './reduce-on-error';
-import reduceOnDeleteSearch from './reduce-on-delete-search';
-
-function reduce(state, action) {
-	const { type } = action;
-	switch (type) {
-		case actions.ON_CHANGE_SEARCH:
-			return reduceOnChangeSearch(state, action);
-		case actions.ON_UPDATE_OPTIONS:
-			return reduceOnUpdateOptions(state, action);
-		case actions.ON_FOCUS:
-			return reduceOnFocus(state, action);
-		case actions.ON_BLUR:
-			return reduceOnBlur(state, action);
-		case actions.ON_CLICK_OPTION:
-			return reduceOnClickOption(state, action);
-		case actions.ON_KEY_DOWN:
-			return reduceOnKeyDown(state, action);
-		case actions.ON_INIT:
-			return reduceOnInit(state, action);
-		case actions.ON_ERROR:
-			return reduceOnError(state, action);
-		case actions.ON_DELETE_SEARCH:
-			return reduceOnDeleteSearch(state, action);
-		default:
-			return state;
-	}
-}
-
-export default reduce;
+import * as actions from '../actions';
+import reduceOnChangeSearch from './reduce-on-change-search';
+import reduceOnUpdateOptions from './reduce-on-update-options';
+import reduceOnFocus from './reduce-on-focus';
+import reduceOnBlur from './reduce-on-blur';
+import reduceOnClickOption from './reduce-on-click-option';
+import reduceOnKeyDown from './reduce-on-key-down';
+import reduceOnInit from './reduce-on-init';
+import reduceOnError from './reduce-on-error';
+import reduceOnDeleteSearch from './reduce-on-delete-search';
+
+function reduce(state, action) {
+	const { type } = action;
+	switch (type) {
+		case actions.ON_CHANGE_SEARCH:
+			return reduceOnChangeSearch(state, action);
+		case actions.ON_UPDATE_OPTIONS:
+			return reduceOnUpdateOptions(state, action);
+		case actions.ON_FOCUS:
+			return reduceOnFocus(state, action);
+		case actions.ON_BLUR:
+			return reduceOnBlur(state, action);
+		case actions.ON_CLICK_OPTION:
+			return reduceOnClickOption(state, action);
+		case actions.ON_KEY_DOWN:
+			return reduceOnKeyDown(state, action);
+		case actions.ON_INIT:
+			return reduceOnInit(state, action);
+		case actions.ON_ERROR:
+			return reduceOnError(state, action);
+		case actions.ON_DELETE_SEARCH:
+			return reduceOnDeleteSearch(state, action);
+		default:
+			return state;
+	}
+}
+
+export default reduce;

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

@@ -1,121 +1,127 @@
-import React, { useReducer, useEffect } from 'react';
-import PropTypes from 'prop-types';
-import {
-	reducer,
-	INITIAL_STATE,
-	SuggesterContext,
-	actions,
-} from './state-management';
-import { Suggester } from './components';
-import DefaultLabelRenderer from './components/selection/default-label-renderer';
-import { DefaultOptionRenderer } from './components';
-import './default-style.scss';
-
-function getSearch(search, value) {
-	if (search && search.length) {
-		return search;
-	}
-	return value;
-}
-
-function SuggesterWrapper({
-	id,
-	className,
-	version,
-	labelledBy,
-	placeholderList,
-	optionRenderer,
-	onSelect,
-	searching,
-	labelRenderer,
-	disabled,
-	value,
-}) {
-	const [state, dispatch] = useReducer(reducer, INITIAL_STATE);
-	const { search, selectedIndex, options } = state;
-
-	useEffect(
-		function () {
-			async function doIt() {
-				try {
-					const what = getSearch(search, value);
-					if (what && typeof searching === 'function') {
-						const { results, search: old } = await searching(what);
-						dispatch(actions.onUpdateOptions(results, old));
-					} else {
-						dispatch(actions.onDeleteSearch());
-					}
-				} catch (e) {
-					console.error(e);
-					dispatch(actions.onError('Une erreur est survenue.'));
-				}
-			}
-			doIt();
-		},
-		[search, searching, value]
-	);
-
-	useEffect(
-		function () {
-			if (selectedIndex !== undefined) {
-				onSelect(options[selectedIndex], selectedIndex);
-			}
-		},
-		[selectedIndex, onSelect, options]
-	);
-
-	useEffect(
-		function () {
-			dispatch(actions.onInit({ id, disabled, value }));
-		},
-		[id, disabled, value]
-	);
-
-	return (
-		<SuggesterContext.Provider value={[state, dispatch]}>
-			<Suggester
-				className={className}
-				placeholderList={placeholderList}
-				version={version}
-				labelledBy={labelledBy}
-				optionRenderer={optionRenderer}
-				labelRenderer={labelRenderer}
-				onSelect={onSelect}
-				value={value}
-			/>
-		</SuggesterContext.Provider>
-	);
-}
-
-SuggesterWrapper.propTypes = {
-	id: PropTypes.string,
-	className: PropTypes.string,
-	placeholderList: PropTypes.string,
-	labelledBy: PropTypes.string,
-	optionRenderer: PropTypes.func,
-	labelRenderer: PropTypes.func,
-	onSelect: PropTypes.func,
-	storeInfo: PropTypes.object,
-	value: PropTypes.oneOfType([
-		PropTypes.string,
-		PropTypes.number,
-		PropTypes.bool,
-		PropTypes.object,
-	]),
-	searching: PropTypes.func,
-};
-
-SuggesterWrapper.defaultProps = {
-	id: undefined,
-	className: 'lunatic-suggester-default-style',
-	labelledBy: undefined,
-	placeholderList: 'Veuillez...',
-	optionRenderer: DefaultOptionRenderer,
-	labelRenderer: DefaultLabelRenderer,
-	language: 'French',
-	onSelect: () => null,
-	value: undefined,
-	searching: undefined,
-};
-
-export default SuggesterWrapper;
+import React, { useReducer, useEffect } from 'react';
+import PropTypes from 'prop-types';
+import {
+	reducer,
+	INITIAL_STATE,
+	SuggesterContext,
+	actions,
+} from './state-management';
+import { Suggester } from './components';
+import DefaultLabelRenderer from './components/selection/default-label-renderer';
+import { DefaultOptionRenderer } from './components';
+import './default-style.scss';
+
+function getSearch(search, value) {
+	if (search && search.length) {
+		return search;
+	}
+	return value;
+}
+
+function SuggesterWrapper({
+	id,
+	className,
+	version,
+	labelledBy,
+	placeholderList,
+	optionRenderer,
+	onSelect,
+	searching,
+	labelRenderer,
+	disabled,
+	value,
+	focused,
+	response,
+	logFunction,
+}) {
+	const [state, dispatch] = useReducer(reducer, INITIAL_STATE);
+	const { search, selectedIndex, options, expended } = state;
+
+	useEffect(
+		function () {
+			async function doIt() {
+				try {
+					const what = getSearch(search, value);
+					if (what && typeof searching === 'function') {
+						const { results, search: old } = await searching(what);
+						dispatch(actions.onUpdateOptions(results, old));
+					} else {
+						dispatch(actions.onDeleteSearch());
+					}
+				} catch (e) {
+					console.error(e);
+					dispatch(actions.onError('Une erreur est survenue.'));
+				}
+			}
+			doIt();
+		},
+		[search, searching, value]
+	);
+
+	useEffect(
+		function () {
+			if (selectedIndex !== undefined && !expended) {
+				onSelect(options[selectedIndex], selectedIndex);
+			}
+		},
+		[selectedIndex, onSelect, options, expended]
+	);
+
+	useEffect(
+		function () {
+			dispatch(actions.onInit({ id, disabled, value }));
+		},
+		[id, disabled, value]
+	);
+
+	return (
+		<SuggesterContext.Provider value={[state, dispatch]}>
+			<Suggester
+				className={className}
+				placeholderList={placeholderList}
+				version={version}
+				labelledBy={labelledBy}
+				optionRenderer={optionRenderer}
+				labelRenderer={labelRenderer}
+				onSelect={onSelect}
+				value={value}
+				focused={focused}
+				response={response}
+				logFunction={logFunction}
+			/>
+		</SuggesterContext.Provider>
+	);
+}
+
+SuggesterWrapper.propTypes = {
+	id: PropTypes.string,
+	className: PropTypes.string,
+	placeholderList: PropTypes.string,
+	labelledBy: PropTypes.string,
+	optionRenderer: PropTypes.func,
+	labelRenderer: PropTypes.func,
+	onSelect: PropTypes.func,
+	storeInfo: PropTypes.object,
+	value: PropTypes.oneOfType([
+		PropTypes.string,
+		PropTypes.number,
+		PropTypes.bool,
+		PropTypes.object,
+	]),
+	searching: PropTypes.func,
+};
+
+SuggesterWrapper.defaultProps = {
+	id: undefined,
+	className: 'lunatic-suggester-default-style',
+	labelledBy: undefined,
+	placeholderList: 'Veuillez...',
+	optionRenderer: DefaultOptionRenderer,
+	labelRenderer: DefaultLabelRenderer,
+	language: 'French',
+	onSelect: () => null,
+	value: undefined,
+	searching: undefined,
+};
+
+export default SuggesterWrapper;

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

@@ -1,67 +1,67 @@
-import React, { useEffect, useState } from 'react';
-import { createAppendTask } from '../../utils/suggester-workers/append-to-index';
-import Progress from './progress';
-import { clearStoreData } from '../../utils/store-tools';
-
-function empty() {}
-
-function Loader({ start, db, store, idbVersion, fetch, post, handleClick }) {
-	const [progress, setProgress] = useState(0);
-	const [entities, setEntities] = useState(undefined);
-
-	useEffect(
-		function () {
-			async function load() {
-				if (typeof fetch === 'function' && start) {
-					const e = await fetch();
-					setEntities(e);
-				}
-			}
-			load();
-		},
-		[fetch, start]
-	);
-
-	function log({ message }) {
-		const { type, percent } = message;
-		if (type === 'bulk-insert/complete') {
-			setProgress(percent);
-		}
-	}
-
-	useEffect(
-		function () {
-			let abort;
-			async function go() {
-				try {
-					if (entities && db && idbVersion && store) {
-						const [startT, abort_] = createAppendTask(store, idbVersion, log);
-						abort = abort_;
-						clearStoreData(db);
-						await startT(entities);
-						post(store.name, entities.length);
-					}
-				} catch (e) {
-					console.warn(e);
-				}
-			}
-
-			go();
-
-			return function () {
-				if (abort) {
-					abort();
-				}
-			};
-		},
-		[store, db, entities, idbVersion, post]
-	);
-
-	return (
-		<Progress percent={progress} display={true} handleClick={handleClick} />
-	);
-}
-
-Loader.defaultProps = { idbVersion: '1', post: empty, handleClick: empty };
-
-export default Loader;
+import React, { useEffect, useState } from 'react';
+import { createAppendTask } from '../../utils/suggester-workers/append-to-index';
+import Progress from './progress';
+import { clearStoreData } from '../../utils/store-tools';
+
+function empty() {}
+
+function Loader({ start, db, store, idbVersion, fetch, post, handleClick }) {
+	const [progress, setProgress] = useState(0);
+	const [entities, setEntities] = useState(undefined);
+
+	useEffect(
+		function () {
+			async function load() {
+				if (typeof fetch === 'function' && start) {
+					const e = await fetch();
+					setEntities(e);
+				}
+			}
+			load();
+		},
+		[fetch, start]
+	);
+
+	function log({ message }) {
+		const { type, percent } = message;
+		if (type === 'bulk-insert/complete') {
+			setProgress(percent);
+		}
+	}
+
+	useEffect(
+		function () {
+			let abort;
+			async function go() {
+				try {
+					if (entities && db && idbVersion && store) {
+						const [startT, abort_] = createAppendTask(store, idbVersion, log);
+						abort = abort_;
+						clearStoreData(db);
+						await startT(entities);
+						post(store.name, entities.length);
+					}
+				} catch (e) {
+					console.warn(e);
+				}
+			}
+
+			go();
+
+			return function () {
+				if (abort) {
+					abort();
+				}
+			};
+		},
+		[store, db, entities, idbVersion, post]
+	);
+
+	return (
+		<Progress percent={progress} display={true} handleClick={handleClick} />
+	);
+}
+
+Loader.defaultProps = { idbVersion: '1', post: empty, handleClick: empty };
+
+export default Loader;