@inseefr/lunatic 0.2.62 → 0.3.0-v2

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

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

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

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

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

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

@@ -0,0 +1,69 @@
+import React, { useMemo, useState, useCallback } from 'react';
+import PropTypes from 'prop-types';
+import Suggester from './suggester';
+import createSearching from './searching';
+import CheckStore from './check-store';
+
+function IDBSuggester({
+	storeName,
+	idbVersion,
+	id,
+	className,
+	labelledBy,
+	optionRenderer,
+	labelRenderer,
+	onSelect,
+	disabled,
+	value,
+	custom,
+}) {
+	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}
+		>
+			<Suggester
+				id={id}
+				className={className}
+				labelledBy={labelledBy}
+				optionRenderer={optionRenderer}
+				labelRenderer={labelRenderer}
+				onSelect={onSelect}
+				searching={searching}
+				disabled={disabled}
+				value={value}
+				custom={custom}
+			/>
+		</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;

package/src/components/suggester/index.js

@@ -0,0 +1 @@
+export { default } from './lunatic-suggester';

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

@@ -0,0 +1,73 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import IDBSuggester from './idb-suggester';
+import { createLunaticComponent } from '../commons';
+import * as commonPropTypes from '../commons/prop-types';
+import { COLLECTED } from 'utils/constants';
+
+function LunaticSuggester(props) {
+	const {
+		id,
+		storeName,
+		optionRenderer,
+		labelRenderer,
+		idbVersion,
+		focused,
+		value,
+		onChange,
+		disabled,
+		labelId,
+		custom,
+	} = props;
+
+	return (
+		<IDBSuggester
+			storeName={storeName}
+			optionRenderer={optionRenderer}
+			labelRenderer={labelRenderer}
+			labelledBy={labelId}
+			idbVersion={idbVersion}
+			onSelect={onChange}
+			focused={focused}
+			disabled={disabled}
+			id={id}
+			value={value}
+			custom={custom}
+		/>
+	);
+}
+
+LunaticSuggester.defaultProps = {
+	label: '',
+	preferences: [COLLECTED],
+	response: {},
+	disabled: false,
+	focused: false,
+	declarations: [],
+	features: [],
+	bindings: {},
+	management: false,
+	labelPosition: 'DEFAULT',
+	style: {},
+	getStoreInfo: undefined,
+};
+
+LunaticSuggester.propTypes = {
+	id: PropTypes.string.isRequired,
+	label: PropTypes.string,
+	preferences: PropTypes.arrayOf(commonPropTypes.valueTypePropTypes),
+	response: commonPropTypes.responsePropTypes,
+	handleChange: PropTypes.func.isRequired,
+	disabled: PropTypes.bool,
+	focused: PropTypes.bool,
+	declarations: commonPropTypes.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 createLunaticComponent(LunaticSuggester);

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

@@ -0,0 +1,49 @@
+import { createWorker } from '../../../utils/suggester-workers/create-worker';
+
+const WORKER_PATH =
+	process.env.LUNATIC_SEARCH_WORKER_PATH ||
+	process.env.REACT_APP_LUNATIC_SEARCH_WORKER_PATH;
+
+export function isWorkerCompatible() {
+	if (window.Worker) {
+		return true;
+	}
+	return false;
+}
+
+const searching = (worker) => (search, name, version) => {
+	if (!WORKER_PATH) {
+		throw new Error("Worker path is required for suggester's searches.");
+	}
+	if (isWorkerCompatible()) {
+		return new Promise(function (resolve) {
+			try {
+				if (worker) {
+					worker.terminate();
+				}
+				worker = createWorker(WORKER_PATH);
+				worker.postMessage({ search, name, version });
+				worker.addEventListener('message', function (e) {
+					const { data } = e;
+					resolve(data);
+					worker.terminate();
+					worker = undefined;
+				});
+			} catch (e) {
+				//TODO
+			}
+		});
+	} else {
+		// TODO
+	}
+};
+
+function createSearching(name, version) {
+	let worker = undefined;
+	const searching_ = searching(worker);
+	return async function (search) {
+		return searching_(search, name, version);
+	};
+}
+
+export default createSearching;

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

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

package/src/components/suggester/suggester.js

@@ -0,0 +1,117 @@
+import React, { useCallback, useState, useEffect } from 'react';
+import PropTypes from 'prop-types';
+
+import {
+	ComboBox,
+	DefaultOptionRenderer,
+	DefaultLabelRenderer,
+	createCustomizableLunaticField,
+} from '../commons';
+import './default-style.scss';
+
+function getSearch(search, value) {
+	if (!search.length) {
+		if (value) {
+			return value;
+		}
+	}
+
+	return '';
+}
+
+function Suggester({
+	className,
+	labelledBy,
+	placeholder,
+	onSelect,
+	labelRenderer,
+	optionRenderer,
+	value,
+	custom,
+	disabled,
+	id,
+	searching,
+}) {
+	const htmlFor = `lunatic-suggester-${id}`;
+	const [search, setSearch] = useState('');
+	const [options, setOptions] = useState([]);
+
+	const handleSelect = useCallback(
+		function (id) {
+			if (id) {
+				onSelect(id);
+			} else {
+				onSelect(null);
+			}
+		},
+		[onSelect]
+	);
+
+	const handleChange = useCallback(
+		async function (search) {
+			if (search && typeof searching === 'function') {
+				const { results, search: old } = await searching(search);
+				setOptions(results);
+				setSearch(search);
+			} else {
+				setOptions([]);
+				onSelect(null);
+				setSearch('');
+			}
+		},
+		[searching, onSelect]
+	);
+
+	const defaultSearch = getSearch(search, value);
+
+	return (
+		<ComboBox
+			id={id}
+			htmlFor={htmlFor}
+			className={className}
+			labelledBy={labelledBy}
+			onChange={handleChange}
+			disabled={disabled}
+			options={options}
+			editable={true}
+			onSelect={handleSelect}
+			value={value}
+			search={defaultSearch}
+			custom={custom}
+			optionRenderer={optionRenderer}
+			labelRenderer={labelRenderer}
+			placeholder={placeholder}
+		/>
+	);
+}
+
+Suggester.propTypes = {
+	id: PropTypes.string.isRequired,
+	className: PropTypes.string,
+	placeholder: PropTypes.string,
+	labelledBy: PropTypes.string,
+	optionRenderer: PropTypes.elementType,
+	labelRenderer: PropTypes.elementType,
+	onSelect: PropTypes.func,
+	value: PropTypes.oneOfType([
+		PropTypes.string,
+		PropTypes.number,
+		PropTypes.bool,
+		PropTypes.object,
+	]),
+	searching: PropTypes.func,
+};
+
+Suggester.defaultProps = {
+	className: 'lunatic-suggester-default-style',
+	labelledBy: undefined,
+	placeholder: 'Veuillez...',
+	optionRenderer: DefaultOptionRenderer,
+	labelRenderer: DefaultLabelRenderer,
+	language: 'French',
+	onSelect: () => null,
+	value: undefined,
+	searching: undefined,
+};
+
+export default createCustomizableLunaticField(Suggester);

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

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

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

@@ -0,0 +1,101 @@
+import React, { useEffect, useState, useCallback } from 'react';
+import classnames from 'classnames';
+import {
+	useStoreIndex,
+	getStoreCount,
+	clearStoreData,
+} from '../../utils/store-tools';
+import { CrossIcon, LoadIcon } from 'components/commons/icons';
+import Loader from './loader';
+
+function LoaderRow({
+	storeInfo,
+	idbVersion,
+	fetchStore,
+	onRefresh,
+	disabled = false,
+}) {
+	const { name } = storeInfo;
+	const db = useStoreIndex(storeInfo, idbVersion);
+	const [nbEntities, setNbEntities] = useState(undefined);
+	const [start, setStart] = useState(false);
+
+	const post = useCallback(
+		function (_, count) {
+			setNbEntities(count);
+			onRefresh(`Store ${name} loaded.`);
+		},
+		[onRefresh, name]
+	);
+	const clear = useCallback(
+		function () {
+			if (db) {
+				clearStoreData(db);
+				setNbEntities(0);
+			}
+		},
+		[db]
+	);
+
+	useEffect(
+		function () {
+			async function count() {
+				const c = await getStoreCount(db);
+				setNbEntities(c);
+			}
+
+			if (db) {
+				count();
+			}
+		},
+		[db]
+	);
+
+	const handleClick = useCallback(function (p) {
+		if (p === 100) {
+			setStart(false);
+		}
+	}, []);
+
+	return (
+		<div className="widget-row">
+			<div className="store-name">{name}</div>
+			{start ? (
+				<Loader
+					start={true}
+					db={db}
+					store={storeInfo}
+					idVersion={idbVersion}
+					fetch={fetchStore}
+					post={post}
+					handleClick={handleClick}
+				/>
+			) : (
+				<>
+					<div className="stats">
+						{nbEntities > 0 ? `${nbEntities} entities.` : 'Empty store.'}
+					</div>
+
+					<button
+						className={classnames('widget-button', { disabled })}
+						disabled={disabled}
+						onClick={() => setStart(true)}
+						title="Load"
+					>
+						<LoadIcon className="lunatic-suggester-icon" />
+					</button>
+					<button
+						className={classnames('widget-button', { disabled })}
+						disabled={disabled}
+						onClick={clear}
+						title="Clear"
+					>
+						<CrossIcon className="lunatic-suggester-icon" />
+					</button>
+				</>
+			)}
+		</div>
+	);
+}
+
+export default LoaderRow;

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

@@ -0,0 +1,67 @@
+import React, { useEffect, useState } from 'react';
+import { createAppendTask } from '../../utils/suggester-workers/append-to-index';
+import Progress from './progress';
+import { clearStoreData } from '../../utils/store-tools';
+
+function empty() {}
+
+function Loader({ start, db, store, idbVersion, fetch, post, handleClick }) {
+	const [progress, setProgress] = useState(0);
+	const [entities, setEntities] = useState(undefined);
+
+	useEffect(
+		function () {
+			async function load() {
+				if (typeof fetch === 'function' && start) {
+					const e = await fetch();
+					setEntities(e);
+				}
+			}
+			load();
+		},
+		[fetch, start]
+	);
+
+	function log({ message }) {
+		const { type, percent } = message;
+		if (type === 'bulk-insert/complete') {
+			setProgress(percent);
+		}
+	}
+
+	useEffect(
+		function () {
+			let abort;
+			async function go() {
+				try {
+					if (entities && db && idbVersion && store) {
+						const [startT, abort_] = createAppendTask(store, idbVersion, log);
+						abort = abort_;
+						clearStoreData(db);
+						await startT(entities);
+						post(store.name, entities.length);
+					}
+				} catch (e) {
+					console.warn(e);
+				}
+			}
+
+			go();
+
+			return function () {
+				if (abort) {
+					abort();
+				}
+			};
+		},
+		[store, db, entities, idbVersion, post]
+	);
+
+	return (
+		<Progress percent={progress} display={true} handleClick={handleClick} />
+	);
+}
+
+Loader.defaultProps = { idbVersion: '1', post: empty, handleClick: empty };
+
+export default Loader;

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

@@ -0,0 +1,25 @@
+import React from 'react';
+import classnames from 'classnames';
+
+function Progress({ display, percent = 0, handleClick = () => null }) {
+	if (display) {
+		return (
+			<div
+				className={classnames('lunatic-suggester-loader-progress', {
+					done: percent === 100,
+				})}
+				onClick={() => handleClick(percent)}
+			>
+				<div className="content">
+					<div
+						className="progress"
+						style={{ width: `${Math.round(percent)}%` }}
+					></div>
+				</div>
+			</div>
+		);
+	}
+	return null;
+}
+
+export default Progress;

package/src/components/suggester-loader-widget/tools/action-tool.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import classnames from 'classnames';
+
+function ActionTool({ children, ariaLabel, className, title, display = true }) {
+	if (display) {
+		return (
+			<div
+				aria-label={ariaLabel}
+				role="button"
+				className={classnames('lunatic-action-tool', className)}
+				title={title}
+			>
+				{children}
+			</div>
+		);
+	}
+	return null;
+}
+
+export default ActionTool;