@inseefr/lunatic 0.2.60 → 0.3.0-experimental

package/src/components/suggester/find-best-label/find-best-label.js

@@ -0,0 +1,51 @@
+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;
+
+let WORKER;
+const TASKS = new Map();
+
+function getIdTask() {
+	const id = `${Date.now()}`;
+	if (id in TASKS) {
+		return getIdTask();
+	}
+	return id;
+}
+
+function getWorker() {
+	if (!WORKER) {
+		WORKER = createWorker(WORKER_PATH);
+		WORKER.addEventListener('message', function (e) {
+			const { data } = e;
+			const { response, idTask } = data;
+			if (idTask in TASKS) {
+				TASKS[idTask](response);
+			}
+		});
+	}
+	return WORKER;
+}
+
+/**
+ *
+ * @param {*} option
+ * @param {*} search
+ * @returns
+ */
+function findBestLabel(option, search) {
+	return new Promise(function (resolve) {
+		const idTask = getIdTask();
+		const worker = getWorker();
+
+		TASKS[idTask] = function (response) {
+			resolve(response);
+			delete TASKS[idTask];
+		};
+		worker.postMessage({ option, search, idTask });
+	});
+}
+
+export default findBestLabel;

package/src/components/suggester/find-best-label/index.js

@@ -0,0 +1 @@
+export { default } from './find-best-label';

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

@@ -0,0 +1,67 @@
+import React, { useEffect, useMemo, useState } from 'react';
+import PropTypes from 'prop-types';
+import SuggesterWrapper from './suggester-wrapper';
+import createSearching from './searching';
+import CheckStore from './check-store';
+
+function IDBSuggester({
+	storeName,
+	idbVersion,
+	id,
+	className,
+	labelledBy,
+	optionRenderer,
+	labelRenderer,
+	onSelect,
+	disabled,
+	value,
+}) {
+	const [store, setStore] = useState(undefined);
+	const searching = useMemo(
+		function () {
+			if (store) {
+				return createSearching(storeName, idbVersion);
+			}
+			return undefined;
+		},
+		[storeName, idbVersion, store]
+	);
+
+	return (
+		<CheckStore
+			storeName={storeName}
+			idbVersion={idbVersion}
+			setStore={setStore}
+		>
+			<SuggesterWrapper
+				id={id}
+				className={className}
+				labelledBy={labelledBy}
+				optionRenderer={optionRenderer}
+				labelRenderer={labelRenderer}
+				onSelect={onSelect}
+				searching={searching}
+				storeName={storeName}
+				disabled={disabled}
+				value={value}
+			/>
+		</CheckStore>
+	);
+}
+
+IDBSuggester.defaultProps = {
+	idbVersion: '1',
+};
+
+IDBSuggester.propTypes = {
+	storeName: PropTypes.string.isRequired,
+	idbVersion: PropTypes.string,
+	id: PropTypes.string,
+	className: PropTypes.string,
+	labelledBy: PropTypes.string,
+	optionRenderer: PropTypes.func,
+	labelRenderer: PropTypes.func,
+	onSelect: PropTypes.func,
+};
+
+export default IDBSuggester;

package/src/components/suggester/index.js

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

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

@@ -0,0 +1,139 @@
+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}
+					/>
+				</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

@@ -0,0 +1,49 @@
+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

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

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

@@ -0,0 +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 });

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

@@ -0,0 +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 };

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

@@ -0,0 +1,13 @@
+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

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

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

@@ -0,0 +1,5 @@
+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

@@ -0,0 +1,8 @@
+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

@@ -0,0 +1,8 @@
+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-delete-search.js

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

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

@@ -0,0 +1,8 @@
+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

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

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

@@ -0,0 +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;

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

@@ -0,0 +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;

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

@@ -0,0 +1,7 @@
+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

@@ -0,0 +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;

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

@@ -0,0 +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;

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

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

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

@@ -0,0 +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;