@inseefr/lunatic 0.2.2-experimental → 0.2.3-prisme

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

@@ -1,125 +1,125 @@
-@mixin defaultFont {
-	font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
-}
-
-@mixin selection() {
-	@include defaultFont();
-}
-
-@mixin placeholderList {
-	color: gray;
-	@include defaultFont();
-	font-size: 15px;
-	line-height: 34px;
-	vertical-align: middle;
-	font-weight: normal;
-}
-
-.lunatic-component {
-	.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: 260px;
-				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();
-
-							&::placeholderlist {
-								@include placeholderList();
-							}
-						}
-
-						.lunatic-suggester-selected {
-							height: 34px;
-							line-height: 34px;
-							background-color: white;
-							border-radius: 5px;
-							padding-left: 4px;
-							@include selection();
-
-							.placeholderList {
-								display: block;
-								@include placeholderList();
-							}
-							.selection {
-								display: block;
-								line-height: 34px;
-								font-size: 15px;
-							}
-
-							&.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;
-							}
-						}
-					}
-				}
-			}
-		}
-	}
-}
+@mixin defaultFont {
+	font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
+}
+
+@mixin selection() {
+	@include defaultFont();
+}
+
+@mixin placeholderList {
+	color: gray;
+	@include defaultFont();
+	font-size: 15px;
+	line-height: 34px;
+	vertical-align: middle;
+	font-weight: normal;
+}
+
+.lunatic-component {
+	.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: 260px;
+				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();
+
+							&::placeholderlist {
+								@include placeholderList();
+							}
+						}
+
+						.lunatic-suggester-selected {
+							height: 34px;
+							line-height: 34px;
+							background-color: white;
+							border-radius: 5px;
+							padding-left: 4px;
+							@include selection();
+
+							.placeholderList {
+								display: block;
+								@include placeholderList();
+							}
+							.selection {
+								display: block;
+								line-height: 34px;
+								font-size: 15px;
+							}
+
+							&.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/find-best-label/find-best-label.js

@@ -1,49 +1,51 @@
-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 = new Worker(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;
+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

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

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

@@ -1,67 +1,73 @@
-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;
+import React, { 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,
+	focused,
+	response,
+	logFunction,
+}) {
+	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}
+				focused={focused}
+				response={response}
+				logFunction={logFunction}
+			/>
+		</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;