@inseefr/lunatic 0.2.0-v2 → 0.2.1-prisme

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

@@ -1,45 +1,112 @@
-import React from 'react';
+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 { createLunaticComponent } from '../commons';
-import * as commonPropTypes from '../commons/prop-types';
-import { COLLECTED } from 'utils/constants';
+import LabelWrapper from '../../utils/components/label-wrapper';
+import FieldWrapper from '../../utils/components/field-wrapper';
 
-function LunaticSuggester(props) {
-	const {
-		id,
-		storeName,
-		optionRenderer,
-		labelRenderer,
-		idbVersion,
-		focused,
-		value,
-		onChange,
-		disabled,
-		labelId,
-		custom,
-	} = props;
+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 (
-		<IDBSuggester
-			storeName={storeName}
-			optionRenderer={optionRenderer}
-			labelRenderer={labelRenderer}
-			labelledBy={labelId}
-			idbVersion={idbVersion}
-			onSelect={onChange}
-			focused={focused}
-			disabled={disabled}
-			id={id}
-			value={value}
-			custom={custom}
-		/>
+		<>
+			<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}
+			/>
+		</>
 	);
 }
 
-LunaticSuggester.defaultProps = {
+Suggester.defaultProps = {
 	label: '',
-	preferences: [COLLECTED],
+	preferences: ['COLLECTED'],
 	response: {},
 	disabled: false,
 	focused: false,
@@ -52,15 +119,15 @@ LunaticSuggester.defaultProps = {
 	getStoreInfo: undefined,
 };
 
-LunaticSuggester.propTypes = {
+Suggester.propTypes = {
 	id: PropTypes.string.isRequired,
 	label: PropTypes.string,
-	preferences: PropTypes.arrayOf(commonPropTypes.valueTypePropTypes),
-	response: commonPropTypes.responsePropTypes,
+	preferences: PropTypes.arrayOf(U.valueTypePropTypes),
+	response: U.responsePropTypes,
 	handleChange: PropTypes.func.isRequired,
 	disabled: PropTypes.bool,
 	focused: PropTypes.bool,
-	declarations: commonPropTypes.declarationsPropTypes,
+	declarations: U.declarationsPropTypes,
 	features: PropTypes.arrayOf(PropTypes.string),
 	bindings: PropTypes.object,
 	management: PropTypes.bool,
@@ -70,4 +137,4 @@ LunaticSuggester.propTypes = {
 	getStoreInfo: PropTypes.func,
 };
 
-export default createLunaticComponent(LunaticSuggester);
+export default componentWrapper(React.memo(Suggester, U.areEqual));

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/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;

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

@@ -0,0 +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,
+	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-row.js

@@ -5,7 +5,8 @@ import {
 	getStoreCount,
 	clearStoreData,
 } from '../../utils/store-tools';
-import { CrossIcon, LoadIcon } from 'components/commons/icons';
+import CrossIcon from '../../utils/icons/cross.icon';
+import LoadIcon from '../../utils/icons/load.icon';
 import Loader from './loader';
 
 function LoaderRow({

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

@@ -3,10 +3,10 @@ import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import LoaderRow from './loader-row';
 import { Tools, ActionTool } from './tools';
-import { IsNetwork } from '../commons/components/is-network';
+import { IsNetwork } from '../../utils/components/is-network';
 import WidgetContainer from './widget-container';
-import Dragger from '../commons/components/dragger';
-import { OnDragIcon } from 'components/commons/icons';
+import Dragger from '../../utils/components/dragger';
+import OnDragIcon from '../../utils/icons/on-drag.icon';
 import './widget.scss';
 
 function empty() {}

package/src/components/table/index.js

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