@inseefr/lunatic 0.2.2-experimental → 0.2.3-prisme

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

@@ -1,137 +1,140 @@
-import React, { useCallback, useState, useEffect } from 'react';
-import PropTypes from 'prop-types';
-import Declarations from '../declarations';
-import * as U from '../../utils/lib';
-import * as C from '../../constants';
-import IDBSuggester from './idb-suggester';
-import LabelWrapper from '../../utils/components/label-wrapper';
-import FieldWrapper from '../../utils/components/field-wrapper';
-
-function getSuggestionId(suggestion) {
-	if (suggestion) {
-		return suggestion.id;
-	}
-	return null;
-}
-
-function Suggester({
-	id,
-	label,
-	preferences,
-	response,
-	handleChange,
-	disabled,
-	focused,
-	declarations,
-	features,
-	bindings,
-	management,
-	labelPosition,
-	style,
-	logFunction,
-	storeName,
-	optionRenderer,
-	labelRenderer,
-	idbVersion,
-}) {
-	const [value, setValue] = useState(() =>
-		U.getResponseByPreference(preferences)(response)
-	);
-	const labelId = `suggester-label-${id}`;
-	const onSelect = useCallback(
-		function (suggestion) {
-			const ids = getSuggestionId(suggestion);
-			handleChange({
-				[U.getResponseName(response)]: ids,
-			});
-			setValue(ids);
-		},
-		[handleChange, response]
-	);
-
-	return (
-		<>
-			<Declarations
-				id={id}
-				type={C.BEFORE_QUESTION_TEXT}
-				declarations={declarations}
-				features={features}
-				bindings={bindings}
-			/>
-			<LabelWrapper
-				id={labelId}
-				htmlFor={id}
-				labelPosition={labelPosition}
-				bindings={bindings}
-				label={label}
-				features={features}
-				logFunction={logFunction}
-			>
-				<Declarations
-					id={id}
-					type={C.AFTER_QUESTION_TEXT}
-					declarations={declarations}
-					features={features}
-					bindings={bindings}
-				/>
-				<FieldWrapper id={id} management={management} response={response}>
-					<IDBSuggester
-						storeName={storeName}
-						optionRenderer={optionRenderer}
-						labelRenderer={labelRenderer}
-						labelledBy={labelId}
-						idbVersion={idbVersion}
-						onSelect={onSelect}
-						focused={focused}
-						disabled={disabled}
-						response={response}
-						id={id}
-						value={value}
-					/>
-				</FieldWrapper>
-			</LabelWrapper>
-			<Declarations
-				id={id}
-				type={C.DETACHABLE}
-				declarations={declarations}
-				features={features}
-				bindings={bindings}
-			/>
-		</>
-	);
-}
-
-Suggester.defaultProps = {
-	label: '',
-	preferences: ['COLLECTED'],
-	response: {},
-	disabled: false,
-	focused: false,
-	declarations: [],
-	features: [],
-	bindings: {},
-	management: false,
-	labelPosition: 'DEFAULT',
-	style: {},
-	getStoreInfo: undefined,
-};
-
-Suggester.propTypes = {
-	id: PropTypes.string.isRequired,
-	label: PropTypes.string,
-	preferences: PropTypes.arrayOf(U.valueTypePropTypes),
-	response: U.responsePropTypes,
-	handleChange: PropTypes.func.isRequired,
-	disabled: PropTypes.bool,
-	focused: PropTypes.bool,
-	declarations: U.declarationsPropTypes,
-	features: PropTypes.arrayOf(PropTypes.string),
-	bindings: PropTypes.object,
-	management: PropTypes.bool,
-	labelPosition: PropTypes.oneOf(['DEFAULT', 'TOP', 'BOTTOM', 'LEFT', 'RIGHT']),
-	style: PropTypes.object,
-	storeInfo: PropTypes.object, //TODO
-	getStoreInfo: PropTypes.func,
-};
-
-export default React.memo(Suggester, U.areEqual);
+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';
+import IDBSuggester from './idb-suggester';
+import LabelWrapper from '../../utils/components/label-wrapper';
+import FieldWrapper from '../../utils/components/field-wrapper';
+
+function getSuggestionId(suggestion) {
+	if (suggestion) {
+		return suggestion.id;
+	}
+	return null;
+}
+
+function Suggester({
+	id,
+	label,
+	preferences,
+	response,
+	handleChange,
+	disabled,
+	focused,
+	declarations,
+	features,
+	bindings,
+	management,
+	labelPosition,
+	style,
+	logFunction,
+	storeName,
+	optionRenderer,
+	labelRenderer,
+	idbVersion,
+}) {
+	const [value, setValue] = useState(() =>
+		U.getResponseByPreference(preferences)(response)
+	);
+	const labelId = `suggester-label-${id}`;
+	const onSelect = useCallback(
+		function (suggestion) {
+			const ids = getSuggestionId(suggestion);
+			// Delete: null --> empty to handle controls
+			handleChange({
+				[U.getResponseName(response)]: ids || '',
+			});
+			setValue(ids);
+		},
+		[handleChange, response]
+	);
+
+	return (
+		<>
+			<Declarations
+				id={id}
+				type={C.BEFORE_QUESTION_TEXT}
+				declarations={declarations}
+				features={features}
+				bindings={bindings}
+			/>
+			<LabelWrapper
+				id={labelId}
+				htmlFor={id}
+				labelPosition={labelPosition}
+				bindings={bindings}
+				label={label}
+				features={features}
+				logFunction={logFunction}
+			>
+				<Declarations
+					id={id}
+					type={C.AFTER_QUESTION_TEXT}
+					declarations={declarations}
+					features={features}
+					bindings={bindings}
+				/>
+				<FieldWrapper id={id} management={management} response={response}>
+					<IDBSuggester
+						storeName={storeName}
+						optionRenderer={optionRenderer}
+						labelRenderer={labelRenderer}
+						labelledBy={labelId}
+						idbVersion={idbVersion}
+						onSelect={onSelect}
+						focused={focused}
+						disabled={disabled}
+						response={response}
+						id={id}
+						value={value}
+						logFunction={logFunction}
+					/>
+				</FieldWrapper>
+			</LabelWrapper>
+			<Declarations
+				id={id}
+				type={C.DETACHABLE}
+				declarations={declarations}
+				features={features}
+				bindings={bindings}
+			/>
+		</>
+	);
+}
+
+Suggester.defaultProps = {
+	label: '',
+	preferences: ['COLLECTED'],
+	response: {},
+	disabled: false,
+	focused: false,
+	declarations: [],
+	features: [],
+	bindings: {},
+	management: false,
+	labelPosition: 'DEFAULT',
+	style: {},
+	getStoreInfo: undefined,
+};
+
+Suggester.propTypes = {
+	id: PropTypes.string.isRequired,
+	label: PropTypes.string,
+	preferences: PropTypes.arrayOf(U.valueTypePropTypes),
+	response: U.responsePropTypes,
+	handleChange: PropTypes.func.isRequired,
+	disabled: PropTypes.bool,
+	focused: PropTypes.bool,
+	declarations: U.declarationsPropTypes,
+	features: PropTypes.arrayOf(PropTypes.string),
+	bindings: PropTypes.object,
+	management: PropTypes.bool,
+	labelPosition: PropTypes.oneOf(['DEFAULT', 'TOP', 'BOTTOM', 'LEFT', 'RIGHT']),
+	style: PropTypes.object,
+	storeInfo: PropTypes.object, //TODO
+	getStoreInfo: PropTypes.func,
+};
+
+export default componentWrapper(React.memo(Suggester, U.areEqual));

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

@@ -1,47 +1,49 @@
-const WORKER_PATH =
-	process.env.LUNATIC_SEARCH_WORKER_PATH ||
-	process.env.REACT_APP_LUNATIC_SEARCH_WORKER_PATH;
-
-export function isWorkerCompatible() {
-	if (window.Worker) {
-		return true;
-	}
-	return false;
-}
-
-const searching = (worker) => (search, name, version) => {
-	if (!WORKER_PATH) {
-		throw new Error("Worker path is required for suggester's searches.");
-	}
-	if (isWorkerCompatible()) {
-		return new Promise(function (resolve) {
-			try {
-				if (worker) {
-					worker.terminate();
-				}
-				worker = new Worker(WORKER_PATH);
-				worker.postMessage({ search, name, version });
-				worker.addEventListener('message', function (e) {
-					const { data } = e;
-					resolve(data);
-					worker.terminate();
-					worker = undefined;
-				});
-			} catch (e) {
-				//TODO
-			}
-		});
-	} else {
-		// TODO
-	}
-};
-
-function createSearching(name, version) {
-	let worker = undefined;
-	const searching_ = searching(worker);
-	return async function (search) {
-		return searching_(search, name, version);
-	};
-}
-
-export default createSearching;
+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;
+
+export function isWorkerCompatible() {
+	if (window.Worker) {
+		return true;
+	}
+	return false;
+}
+
+const searching = (worker) => (search, name, version) => {
+	if (!WORKER_PATH) {
+		throw new Error("Worker path is required for suggester's searches.");
+	}
+	if (isWorkerCompatible()) {
+		return new Promise(function (resolve) {
+			try {
+				if (worker) {
+					worker.terminate();
+				}
+				worker = createWorker(WORKER_PATH);
+				worker.postMessage({ search, name, version });
+				worker.addEventListener('message', function (e) {
+					const { data } = e;
+					resolve(data);
+					worker.terminate();
+					worker = undefined;
+				});
+			} catch (e) {
+				//TODO
+			}
+		});
+	} else {
+		// TODO
+	}
+};
+
+function createSearching(name, version) {
+	let worker = undefined;
+	const searching_ = searching(worker);
+	return async function (search) {
+		return searching_(search, name, version);
+	};
+}
+
+export default createSearching;

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

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

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;