@inseefr/lunatic 0.1.13-hackathon → 0.2.0-v2

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

@@ -1,88 +0,0 @@
-import React, { useCallback, useContext, useRef, useMemo } from 'react';
-import classnames from 'classnames';
-import { actions, SuggesterContext } from '../state-management';
-import SuggesterContent from './suggester-content';
-import Selection from './selection';
-import Panel from './panel';
-import createOnKeyDownCallback from './create-on-keydown-callback';
-import Delete from './selection/delete';
-import './suggester.scss';
-
-function Suggester({
-	className,
-	placeholderList,
-	labelledBy,
-	optionRenderer,
-	labelRenderer,
-	onSelect,
-	value,
-}) {
-	const inputEl = useRef();
-	const [state, dispatch] = useContext(SuggesterContext);
-	const { focused, id, messageError, search, disabled } = state;
-
-	const onFocus = useCallback(
-		function () {
-			if (!disabled) {
-				if (inputEl.current !== document.activeElement) {
-				}
-				inputEl.current.focus();
-				dispatch(actions.onFocus());
-			}
-		},
-		[dispatch, disabled]
-	);
-
-	const onDelete = useCallback(
-		function () {
-			dispatch(actions.onDeleteSearch());
-			onSelect(undefined);
-		},
-		[dispatch, onSelect]
-	);
-
-	const onBlur = useCallback(
-		function () {
-			if (focused) {
-				dispatch(actions.onBlur());
-			}
-		},
-		[dispatch, focused]
-	);
-	const onKeyDown = useMemo(
-		() => createOnKeyDownCallback(dispatch),
-		[dispatch]
-	);
-
-	if (messageError) {
-		return (
-			<div className="lunatic-suggester-message-error">{messageError}</div>
-		);
-	}
-	return (
-		<div className={classnames('lunatic-suggester-container', className)}>
-			<SuggesterContent
-				id={id}
-				focused={focused}
-				onFocus={onFocus}
-				onBlur={onBlur}
-				onKeyDown={onKeyDown}
-			>
-				<Selection
-					labelRenderer={labelRenderer}
-					placeholderList={placeholderList}
-					labelledBy={labelledBy}
-					ref={inputEl}
-				/>
-				<Panel optionRenderer={optionRenderer} value={value} />
-			</SuggesterContent>
-			<Delete
-				className={classnames({ focused })}
-				search={search}
-				onClick={onDelete}
-			/>
-		</div>
-	);
-}
-
-export default Suggester;

package/src/components/suggester/components/suggester.scss

@@ -1,101 +0,0 @@
-@mixin preventSelect() {
-	-moz-user-select: -moz-none;
-	-khtml-user-select: none;
-	-webkit-user-select: none;
-}
-
-.lunatic-suggester-container {
-	position: relative;
-	width: 100%;
-
-	.lunatic-suggester-fab {
-		position: absolute;
-		right: 4px;
-		top: 8px;
-		z-index: 0;
-		&.focused {
-			z-index: 1;
-		}
-
-		.lunatic-icon {
-			svg {
-				fill: white;
-				width: 16px;
-				height: 16px;
-			}
-		}
-	}
-
-	.lunatic-suggester {
-		position: relative;
-		z-index: 0;
-
-		&:focus {
-			outline: none;
-		}
-
-		&.focused {
-			z-index: 1;
-		}
-
-		.lunatic-suggester-content {
-			position: absolute;
-			width: 100%;
-
-			.lunatic-suggester-selection {
-				position: relative;
-				.lunatic-suggester-input {
-					border: none;
-					margin: 0;
-					padding: 0;
-					background-color: transparent;
-					&:focus {
-						outline: none;
-					}
-
-					width: 100%;
-					/* */
-				}
-
-				.lunatic-suggester-selected {
-					position: absolute;
-					top: 0;
-					white-space: nowrap;
-					overflow-x: hidden;
-					width: 100%;
-					height: 100%;
-					display: none;
-					&.displayed {
-						display: block;
-					}
-
-					.placeholderList {
-					}
-					.selection {
-					}
-				}
-			}
-
-			ul,
-			li,
-			div,
-			span {
-				margin: 0;
-				padding: 0;
-				border: none;
-				line-height: 1em;
-				list-style: none;
-			}
-
-			.lunatic-suggester-panel {
-				&:focus {
-					outline: none;
-				}
-				.lunatic-suggester-option {
-					white-space: nowrap;
-					@include preventSelect();
-				}
-			}
-		}
-	}
-}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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