@inseefr/lunatic 0.1.0-hackathon → 0.1.0-v2

package/src/components/subsequence/index.js

@@ -1 +1 @@
-export { default } from './component';
+export { default } from './subsequence';

package/src/components/subsequence/subsequence.js

@@ -0,0 +1,73 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { SimpleDeclarationsWrapper } from '../declarations/wrappers';
+import * as U from '../../utils/lib';
+import { interpret } from '../../utils/to-expose';
+import {
+	DeclarationsBeforeText,
+	DeclarationsAfterText,
+	DeclarationsDetachable,
+} from '../declarations';
+
+// const Subsequence = ({
+// 	id,
+// 	label,
+// 	declarations,
+// 	features,
+// 	bindings,
+// 	style,
+// 	logFunction,
+// }) => (
+// 	<SimpleDeclarationsWrapper
+// 		id={id}
+// 		declarations={declarations}
+// 		features={features}
+// 		bindings={bindings}
+// 	>
+// 		<div
+// 			aria-label={`subsequence-${id}`}
+// 			className="subsequence-lunatic"
+// 			style={U.buildStyleObject(style)}
+// 			aria-label={`subsequence-${id}`}
+// 		>
+// 			{interpret(features, logFunction)(bindings)(label)}
+// 		</div>
+// 	</SimpleDeclarationsWrapper>
+// );
+
+// Subsequence.defaultProps = {
+// 	declarations: [],
+// 	features: [],
+// 	bindings: {},
+// 	style: {},
+// };
+
+// Subsequence.propTypes = {
+// 	id: PropTypes.string.isRequired,
+// 	label: PropTypes.string.isRequired,
+// 	declarations: U.declarationsPropTypes,
+// 	features: PropTypes.arrayOf(PropTypes.string),
+// 	bindings: PropTypes.object,
+// 	style: PropTypes.object,
+// };
+
+// export default React.memo(Subsequence, U.areEqual);
+function Subsequence({ id, declarations, label }) {
+	return (
+		<>
+			<DeclarationsBeforeText declarations={declarations} />
+			<div
+				aria-label={`sequence-${id}`}
+				className="sequence-lunatic"
+				// style={{}}
+				id={`sequence-${id}`}
+			>
+				{label}
+			</div>
+			<DeclarationsAfterText declarations={declarations} />
+			<DeclarationsDetachable declarations={declarations} />
+		</>
+	);
+}
+
+export default Subsequence;

package/src/components/suggester/check-store.js

@@ -1,70 +1,70 @@
-import React, { useEffect, useState, useCallback } from 'react';
-import { openDb, getEntity } from '../../utils/idb-tools';
-import { CONSTANTES } from '../../utils/store-tools';
-
-function CheckStore({ storeName, version, setStore, children }) {
-	const [ready, setReady] = useState(0);
-	const [refresh, setRefresh] = useState(false);
-	const [disabled, setDisabled] = useState(false);
-
-	const checkStore = useCallback(
-		async function () {
-			try {
-				const db = await openDb(storeName, version);
-				const info = await getEntity(db, CONSTANTES.STORE_INFO_NAME, storeName);
-
-				if (db && info) {
-					setReady(200);
-					setStore(info);
-				}
-			} catch (e) {
-				setReady(400);
-			}
-		},
-		[storeName, version, setStore]
-	);
-
-	useEffect(
-		function () {
-			checkStore();
-		},
-		[checkStore]
-	);
-
-	useEffect(
-		function () {
-			if (refresh) {
-				setRefresh(false);
-				setDisabled(true);
-				async function go() {
-					await checkStore();
-					setDisabled(false);
-				}
-
-				go();
-			}
-		},
-		[refresh]
-	);
-
-	if (ready === 0) {
-		return (
-			<div className="lunatic-suggester-in-progress">
-				Le store {storeName} est en cour de chargement.
-			</div>
-		);
-	}
-	if (ready === 200) {
-		return children;
-	}
-	return (
-		<div className="lunatic-suggester-unvailable">
-			Le store {storeName} n'est pas disponible.
-			<button disabled={disabled} onClick={() => setRefresh(true)}>
-				Refresh
-			</button>
-		</div>
-	);
-}
-
-export default CheckStore;
+import React, { useEffect, useState, useCallback } from 'react';
+import { openDb, getEntity } from '../../utils/idb-tools';
+import { CONSTANTES } from '../../utils/store-tools';
+
+function CheckStore({ storeName, version, setStore, children }) {
+	const [ready, setReady] = useState(0);
+	const [refresh, setRefresh] = useState(false);
+	const [disabled, setDisabled] = useState(false);
+
+	const checkStore = useCallback(
+		async function () {
+			try {
+				const db = await openDb(storeName, version);
+				const info = await getEntity(db, CONSTANTES.STORE_INFO_NAME, storeName);
+
+				if (db && info) {
+					setReady(200);
+					setStore(info);
+				}
+			} catch (e) {
+				setReady(400);
+			}
+		},
+		[storeName, version, setStore]
+	);
+
+	useEffect(
+		function () {
+			checkStore();
+		},
+		[checkStore]
+	);
+
+	useEffect(
+		function () {
+			if (refresh) {
+				setRefresh(false);
+				setDisabled(true);
+				async function go() {
+					await checkStore();
+					setDisabled(false);
+				}
+
+				go();
+			}
+		},
+		[refresh, checkStore]
+	);
+
+	if (ready === 0) {
+		return (
+			<div className="lunatic-suggester-in-progress">
+				Le store {storeName} est en cour de chargement.
+			</div>
+		);
+	}
+	if (ready === 200) {
+		return children;
+	}
+	return (
+		<div className="lunatic-suggester-unvailable">
+			Le store {storeName} n'est pas disponible.
+			<button disabled={disabled} onClick={() => setRefresh(true)}>
+				Refresh
+			</button>
+		</div>
+	);
+}
+
+export default CheckStore;

package/src/components/suggester/components/panel/option-container.js

@@ -1,6 +1,5 @@
-import React, { useRef, useEffect } from 'react';
+import React, { useRef, useEffect, useCallback } from 'react';
 import classnames from 'classnames';
-import { actions, SuggesterContext, useDispatch } from '../../state-management';
 
 function getMin(rect) {
 	const { top } = rect;
@@ -21,15 +20,17 @@ function isVisible(optionRect, parentRect) {
 	return false;
 }
 
-function OptionContainer({ children, index, selected }) {
+function OptionContainer({ children, index, selected, onClickOption }) {
 	const ref = useRef();
-	const dispatch = useDispatch(SuggesterContext);
 
-	function onClick(e) {
-		e.stopPropagation();
-		e.preventDefault();
-		dispatch(actions.onClickOption(index));
-	}
+	const onClickOptionEx = useCallback(
+		function (e) {
+			e.stopPropagation();
+			e.preventDefault();
+			onClickOption(index);
+		},
+		[onClickOption, index]
+	);
 
 	useEffect(
 		function () {
@@ -50,7 +51,7 @@ function OptionContainer({ children, index, selected }) {
 			className={classnames('lunatic-suggester-option', { selected })}
 			role="option"
 			aria-selected={selected}
-			onClick={onClick}
+			onClick={onClickOptionEx}
 			ref={ref}
 		>
 			{children}

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

@@ -1,5 +1,4 @@
-import React, { useContext } from 'react';
-import { SuggesterContext } from '../../state-management';
+import React from 'react';
 import PanelContainer from './panel-container';
 import OptionContainer from './option-container';
 
@@ -10,13 +9,19 @@ function getContent({
 	expended,
 	value,
 	search,
+	onClickOption,
 }) {
 	if (expended) {
 		return options.map(function (option, index) {
 			const { id } = option;
 			const selected = selectedIndex === index;
 			return (
-				<OptionContainer key={id} index={index} selected={id === value}>
+				<OptionContainer
+					key={id}
+					index={index}
+					selected={id === value}
+					onClickOption={onClickOption}
+				>
 					<OptionRender option={option} selected={selected} search={search} />
 				</OptionContainer>
 			);
@@ -25,9 +30,17 @@ function getContent({
 	return undefined;
 }
 
-function Panel({ optionRenderer: OptionRender, value }) {
-	const [state] = useContext(SuggesterContext);
-	const { options, focused, selectedIndex, expended, id, search } = state;
+function Panel({
+	optionRenderer: OptionRender,
+	value,
+	options,
+	focused,
+	selectedIndex,
+	expended,
+	id,
+	search,
+	onClickOption,
+}) {
 	const content = getContent({
 		options,
 		OptionRender,
@@ -35,6 +48,7 @@ function Panel({ optionRenderer: OptionRender, value }) {
 		expended,
 		value,
 		search,
+		onClickOption,
 	});
 
 	return (

package/src/components/suggester/components/selection/label.js

@@ -1,17 +1,18 @@
-import React, { useContext } from 'react';
+import React from 'react';
 import classnames from 'classnames';
-import { SuggesterContext } from '../../state-management';
 import DefaultLabelRenderer from './default-label-renderer';
 
 function Label({
 	labelRenderer: Renderer = DefaultLabelRenderer,
 	placeholderList,
+	displayLabel,
+	expended,
+	selectedIndex,
+	options,
+	search,
+	disabled,
 }) {
-	const [state] = useContext(SuggesterContext);
-	const { displayLabel, expended, selectedIndex, options, search, disabled } =
-		state;
 	const displayed = displayLabel || !expended;
-
 	const option =
 		selectedIndex !== undefined ? options[selectedIndex] : undefined;
 

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

@@ -1,15 +1,30 @@
-import React, { useContext } from 'react';
-import { SuggesterContext, actions } from '../../state-management';
+import React, { useCallback } from 'react';
 import classnames from 'classnames';
 import Label from './label';
 
-function Selection({ labelRenderer, placeholderList, labelledBy }, inputEl) {
-	const [state, dispatch] = useContext(SuggesterContext);
-	const { search, expended, id, disabled, focused } = state;
-
-	function onChange(e) {
-		dispatch(actions.onChangeSearch(e.target.value));
-	}
+function Selection(
+	{
+		labelRenderer,
+		placeholderList,
+		labelledBy,
+		search,
+		expended,
+		id,
+		disabled,
+		focused,
+		onChange,
+		displayLabel,
+		selectedIndex,
+		options,
+	},
+	inputEl
+) {
+	const onChangeEx = useCallback(
+		function (e) {
+			onChange(e.target.value);
+		},
+		[onChange]
+	);
 
 	return (
 		<div
@@ -19,6 +34,7 @@ function Selection({ labelRenderer, placeholderList, labelledBy }, inputEl) {
 				disabled,
 			})}
 			role="combobox"
+			aria-controls={'todo'}
 			aria-haspopup="listbox"
 			aria-labelledby={labelledBy}
 			aria-expanded={expended}
@@ -31,7 +47,7 @@ function Selection({ labelRenderer, placeholderList, labelledBy }, inputEl) {
 				tabIndex="0"
 				className="lunatic-suggester-input"
 				type="text"
-				onChange={onChange}
+				onChange={onChangeEx}
 				value={search}
 				aria-label="lunatic-suggester"
 				title="suggester"
@@ -39,10 +55,19 @@ function Selection({ labelRenderer, placeholderList, labelledBy }, inputEl) {
 				autoCapitalize="off"
 				autoCorrect="off"
 				spellCheck="false"
+				placeholderlist={placeholderList}
+				disabled={disabled}
+			/>
+			<Label
+				labelRenderer={labelRenderer}
 				placeholderList={placeholderList}
+				displayLabel={displayLabel}
+				expended={expended}
+				selectedIndex={selectedIndex}
+				options={options}
+				search={search}
 				disabled={disabled}
 			/>
-			<Label labelRenderer={labelRenderer} placeholderList={placeholderList} />
 		</div>
 	);
 }

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

@@ -1,42 +1,35 @@
-import React, { useRef, useCallback } from 'react';
-import classnames from 'classnames';
-import useDocumentAddEventListener from '../../../utils/to-expose/hooks/use-document-add-event-listener';
-
-function SuggesterContent({
-	children,
-	id,
-	focused,
-	onFocus,
-	onBlur,
-	onKeyDown,
-}) {
-	const ref = useRef();
-	const onClick = useCallback(
-		function (e) {
-			const { current } = ref;
-			if (!current.contains(e.target)) {
-				onBlur();
-			}
-		},
-		[ref, onBlur]
-	);
-
-	useDocumentAddEventListener('mousedown', onClick);
-
-	return (
-		<div
-			className={classnames('lunatic-suggester', {
-				focused,
-			})}
-			onFocus={onFocus}
-			onKeyDown={onKeyDown}
-			ref={ref}
-		>
-			<div className={classnames('lunatic-suggester-content', { focused })}>
-				{children}
-			</div>
-		</div>
-	);
-}
-
-export default SuggesterContent;
+import React, { useRef, useCallback } from 'react';
+import classnames from 'classnames';
+import useDocumentAddEventListener from '../../../utils/to-expose/hooks/use-document-add-event-listener';
+
+function SuggesterContent({ children, focused, onFocus, onBlur, onKeyDown }) {
+	const ref = useRef();
+	const onClick = useCallback(
+		function (e) {
+			const { current } = ref;
+			if (!current.contains(e.target)) {
+				onBlur();
+			}
+		},
+		[ref, onBlur]
+	);
+
+	useDocumentAddEventListener('mousedown', onClick);
+
+	return (
+		<div
+			className={classnames('lunatic-suggester', {
+				focused,
+			})}
+			onFocus={onFocus}
+			onKeyDown={onKeyDown}
+			ref={ref}
+		>
+			<div className={classnames('lunatic-suggester-content', { focused })}>
+				{children}
+			</div>
+		</div>
+	);
+}
+
+export default SuggesterContent;

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

@@ -1,11 +1,10 @@
 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 { createCustomizableLunaticField } from '../../commons';
 import './suggester.scss';
 
 function Suggester({
@@ -15,43 +14,44 @@ function Suggester({
 	optionRenderer,
 	labelRenderer,
 	onSelect,
+	onBlur,
+	onDelete,
+	onKeyDown,
+	onChange,
+	onClickOption,
 	value,
+	onFocus,
+	disabled,
+	id,
+	messageError,
+	search,
+	focused,
+	options,
+	expended,
+	selectedIndex,
+	displayLabel,
 }) {
 	const inputEl = useRef();
-	const [state, dispatch] = useContext(SuggesterContext);
-	const { focused, id, messageError, search, disabled } = state;
 
-	const onFocus = useCallback(
+	const onFocusEx = useCallback(
 		function () {
 			if (!disabled) {
 				if (inputEl.current !== document.activeElement) {
 				}
 				inputEl.current.focus();
-				dispatch(actions.onFocus());
+				onFocus();
 			}
 		},
-		[dispatch, disabled]
+		[disabled, onFocus]
 	);
 
-	const onDelete = useCallback(
-		function () {
-			dispatch(actions.onDeleteSearch());
-			onSelect(undefined);
-		},
-		[dispatch, onSelect]
-	);
-
-	const onBlur = useCallback(
+	const onBlurEx = useCallback(
 		function () {
 			if (focused) {
-				dispatch(actions.onBlur());
+				onBlur();
 			}
 		},
-		[dispatch, focused]
-	);
-	const onKeyDown = useMemo(
-		() => createOnKeyDownCallback(dispatch),
-		[dispatch]
+		[focused, onBlur]
 	);
 
 	if (messageError) {
@@ -64,8 +64,8 @@ function Suggester({
 			<SuggesterContent
 				id={id}
 				focused={focused}
-				onFocus={onFocus}
-				onBlur={onBlur}
+				onFocus={onFocusEx}
+				onBlur={onBlurEx}
 				onKeyDown={onKeyDown}
 			>
 				<Selection
@@ -73,8 +73,27 @@ function Suggester({
 					placeholderList={placeholderList}
 					labelledBy={labelledBy}
 					ref={inputEl}
+					search={search}
+					expended={expended}
+					id={id}
+					disabled={disabled}
+					focused={focused}
+					displayLabel={displayLabel}
+					selectedIndex={selectedIndex}
+					options={options}
+					onChange={onChange}
+				/>
+				<Panel
+					optionRenderer={optionRenderer}
+					value={value}
+					options={options}
+					focused={focused}
+					selectedIndex={selectedIndex}
+					expended={expended}
+					id={id}
+					search={search}
+					onClickOption={onClickOption}
 				/>
-				<Panel optionRenderer={optionRenderer} value={value} />
 			</SuggesterContent>
 			<Delete
 				className={classnames({ focused })}
@@ -85,4 +104,4 @@ function Suggester({
 	);
 }
 
-export default Suggester;
+export default createCustomizableLunaticField(React.memo(Suggester));

package/src/components/suggester/{components/create-on-keydown-callback.js → create-on-keydown-callback.js}

@@ -1,28 +1,28 @@
-import { actions } from '../state-management';
-import { BINDED_KEYS } from '../commons-tools';
-
-function create(dispatch) {
-	return function (e) {
-		const { key } = e;
-		switch (key) {
-			case BINDED_KEYS.Tab:
-				e.stopPropagation();
-				// e.preventDefault();
-				dispatch(actions.onKeyDown(key));
-				break;
-			case BINDED_KEYS.ArrowDown:
-			case BINDED_KEYS.ArrowUp:
-			case BINDED_KEYS.Home:
-			case BINDED_KEYS.End:
-			case BINDED_KEYS.Enter:
-			case BINDED_KEYS.Escape:
-				e.preventDefault();
-				e.stopPropagation();
-				dispatch(actions.onKeyDown(key));
-				break;
-			default:
-		}
-	};
-}
-
-export default create;
+import { actions } from './state-management';
+import { BINDED_KEYS } from './commons-tools';
+
+function create(dispatch) {
+	return function (e) {
+		const { key } = e;
+		switch (key) {
+			case BINDED_KEYS.Tab:
+				e.stopPropagation();
+				// e.preventDefault();
+				dispatch(actions.onKeyDown(key));
+				break;
+			case BINDED_KEYS.ArrowDown:
+			case BINDED_KEYS.ArrowUp:
+			case BINDED_KEYS.Home:
+			case BINDED_KEYS.End:
+			case BINDED_KEYS.Enter:
+			case BINDED_KEYS.Escape:
+				e.preventDefault();
+				e.stopPropagation();
+				dispatch(actions.onKeyDown(key));
+				break;
+			default:
+		}
+	};
+}
+
+export default create;

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

@@ -1,3 +1,5 @@
+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;
@@ -15,7 +17,7 @@ function getIdTask() {
 
 function getWorker() {
 	if (!WORKER) {
-		WORKER = new Worker(WORKER_PATH);
+		WORKER = createWorker(WORKER_PATH);
 		WORKER.addEventListener('message', function (e) {
 			const { data } = e;
 			const { response, idTask } = data;