@inseefr/lunatic 0.1.7 → 0.1.8-experimental

package/src/components/suggester/default-style.scss

@@ -0,0 +1,122 @@
+@mixin defaultFont {
+	font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
+}
+
+@mixin selection() {
+	@include defaultFont();
+}
+
+@mixin placeholder {
+	color: gray;
+	@include defaultFont();
+	font-size: 15px;
+	line-height: 34px;
+	vertical-align: middle;
+	font-weight: normal;
+}
+
+.lunatic-suggester-message-error {
+	border: solid 1px darkred;
+	color: darkred;
+	background-color: tomato;
+	display: inline-block;
+	border-radius: 3px;
+	padding: 4px 8px;
+	margin: 4px 4px;
+}
+
+.lunatic-suggester-default-style {
+	&.lunatic-suggester-container {
+		margin-bottom: 10px;
+		.lunatic-suggester {
+			min-height: 30px;
+			min-width: 500px;
+			width: 100%;
+			.lunatic-suggester-content {
+				/* */
+
+				&.focused {
+					.lunatic-suggester-selection {
+					}
+				}
+
+				/* */
+				.lunatic-suggester-selection {
+					border-radius: 5px;
+					border: 2px solid var(--color-primary-dark);
+					background-color: white;
+					&:hover {
+						border-color: var(--color-primary-main);
+					}
+					.lunatic-suggester-input {
+						height: 34;
+						line-height: 34px;
+						font-size: 15px;
+						padding-left: 4px;
+						@include selection();
+
+						&::placeholder {
+							@include placeholder();
+						}
+					}
+
+					.lunatic-suggester-selected {
+						height: 34px;
+						line-height: 34px;
+						background-color: white;
+						border-radius: 5px;
+						padding-left: 4px;
+						@include selection();
+
+						.placeholder {
+							display: block;
+							@include placeholder();
+						}
+						.selection {
+							display: block;
+							line-height: 34px;
+						}
+
+						&.disabled {
+							background-color: var(--color-disabled);
+						}
+					}
+				}
+
+				/* */
+				.lunatic-suggester-panel {
+					@include defaultFont();
+					height: 0;
+					opacity: 0;
+					background-color: white;
+					transition: opacity 267ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
+						transform 178ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+					&.expended {
+						border: solid 1px var(--color-primary-light);
+						opacity: 1;
+						min-height: 30px;
+						height: max-content;
+						box-shadow: 0 2px 2px grey;
+						border-radius: 4px;
+					}
+					.lunatic-suggester-option {
+						text-overflow: ellipsis;
+						white-space: nowrap;
+						overflow: hidden;
+						margin-bottom: 0.1em;
+						line-height: 2rem;
+						display: block;
+						&.selected {
+							color: var(--color-primary-dark);
+							background-color: var(--color-dropdown-selected);
+						}
+						&:hover {
+							background-color: var(--color-primary-main);
+							color: white;
+						}
+					}
+				}
+			}
+		}
+	}
+}

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

@@ -0,0 +1,74 @@
+import React, { useMemo, useState } from 'react';
+import PropTypes from 'prop-types';
+import SuggesterWrapper from './suggester-wrapper';
+import { searching } from './searching';
+import CheckStore from './check-store';
+
+function createSearching(storeName, version) {
+	return async function (search, max) {
+		return searching(search, storeName, version, max);
+	};
+}
+
+function IDBSuggester({
+	storeName,
+	idbVersion,
+	id,
+	className,
+	labelledBy,
+	optionRenderer,
+	labelRenderer,
+	onSelect,
+	disabled,
+	max,
+}) {
+	const [store, setStore] = useState(undefined);
+	const search = useMemo(
+		function () {
+			if (store) {
+				return createSearching(storeName, idbVersion);
+			}
+			return () => [];
+		},
+		[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={search}
+				storeName={storeName}
+				disabled={disabled}
+				max={max}
+			/>
+		</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,
+	max: PropTypes.number,
+};
+
+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,148 @@
+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 Suggester({
+	id,
+	label,
+	preferences,
+	response,
+	handleChange,
+	disabled,
+	focused,
+	declarations,
+	features,
+	bindings,
+	management,
+	labelPosition,
+	style,
+	logFunction,
+	storeName,
+	optionRenderer,
+	labelRenderer,
+	max,
+	idbVersion,
+}) {
+	const [value, setValue] = useState(() =>
+		U.getResponseByPreference(preferences)(response)
+	);
+
+	const labelId = `suggester-label-${id}`;
+
+	const onSelect = useCallback(
+		function (suggestion) {
+			if (suggestion === null) {
+				setValue(null);
+				handleChange({
+					[U.getResponseName(response)]: null,
+				});
+			} else {
+				const { id } = suggestion;
+				setValue(id);
+				handleChange({
+					[U.getResponseName(response)]: id,
+				});
+			}
+		},
+		[handleChange, response]
+	);
+
+	// Assume we only want to handle enable external updates
+	// Don't need to check all value changes
+	useEffect(() => {
+		if (U.getResponseByPreference(preferences)(response) !== value)
+			setValue(U.getResponseByPreference(preferences)(response));
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [response, preferences]);
+
+	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}
+						max={max}
+						labelledBy={labelId}
+						idbVersion={idbVersion}
+						onSelect={onSelect}
+						focused={focused}
+						disabled={disabled}
+						response={response}
+						id={id}
+					/>
+				</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);

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

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

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

@@ -0,0 +1,39 @@
+const WORKER_PATH =
+	process.env.LUNATIC_SEARCH_WORKER_PATH ||
+	process.env.REACT_APP_LUNATIC_SEARCH_WORKER_PATH;
+
+let WORKER = undefined;
+
+export function isWorkerCompatible() {
+	if (window.Worker) {
+		return true;
+	}
+	return false;
+}
+
+function create(search, name, version, max) {
+	if (!WORKER_PATH) {
+		throw new Error("Worker path is required for suggester's searchs.");
+	}
+	if (isWorkerCompatible()) {
+		return new Promise(function (resolve) {
+			try {
+				if (WORKER) {
+					WORKER.terminate();
+				}
+				WORKER = new Worker(WORKER_PATH);
+				WORKER.postMessage({ search, name, version, max });
+				WORKER.addEventListener('message', function (e) {
+					const { data } = e;
+					resolve(data);
+				});
+			} catch (e) {
+				//TODO
+			}
+		});
+	} else {
+		// TODO
+	}
+}
+
+export default create;

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

@@ -0,0 +1,35 @@
+export const ON_INIT = 'lunatic-suggester/on-init';
+export const onInit = ({ id, disabled }) => ({
+	type: ON_INIT,
+	payload: { id, disabled },
+});
+
+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 } });

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-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,11 @@
+function getId() {
+	return `lunatic-suggester-${new Date().getTime()}`;
+}
+
+function reduce(state, action) {
+	const { payload } = action;
+	const { id, disabled } = payload;
+	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,35 @@
+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';
+
+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);
+		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;