@inseefr/lunatic 0.1.7 → 0.1.8-experimental

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

@@ -0,0 +1,101 @@
+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 SuggesterWrapper({
+	id,
+	className,
+	storeName,
+	version,
+	labelledBy,
+	placeholder,
+	optionRenderer,
+	onSelect,
+	searching,
+	labelRenderer,
+	disabled,
+	max,
+}) {
+	const [state, dispatch] = useReducer(reducer, INITIAL_STATE);
+	const { search, selectedIndex, options } = state;
+
+	useEffect(
+		function () {
+			async function doIt() {
+				try {
+					const { results, search: old } = await searching(search, max);
+					dispatch(actions.onUpdateOptions(results, old));
+				} catch (e) {
+					dispatch(actions.onError('Une erreur est survenue.'));
+				}
+			}
+			doIt();
+		},
+		[search, searching, max]
+	);
+
+	useEffect(
+		function () {
+			if (selectedIndex !== undefined) {
+				onSelect(options[selectedIndex], selectedIndex);
+			}
+		},
+		[selectedIndex, onSelect, options]
+	);
+
+	useEffect(
+		function () {
+			dispatch(actions.onInit({ id, disabled }));
+		},
+		[id, disabled]
+	);
+	return (
+		<SuggesterContext.Provider value={[state, dispatch]}>
+			<Suggester
+				className={className}
+				placeholder={placeholder}
+				storeName={storeName}
+				version={version}
+				labelledBy={labelledBy}
+				optionRenderer={optionRenderer}
+				labelRenderer={labelRenderer}
+				onSelect={onSelect}
+			/>
+		</SuggesterContext.Provider>
+	);
+}
+
+SuggesterWrapper.propTypes = {
+	id: PropTypes.string,
+	className: PropTypes.string,
+	placeholder: PropTypes.string,
+	labelledBy: PropTypes.string,
+	optionRenderer: PropTypes.func,
+	labelRenderer: PropTypes.func,
+	onSelect: PropTypes.func,
+	storeInfo: PropTypes.object,
+	max: PropTypes.number,
+};
+
+SuggesterWrapper.defaultProps = {
+	id: undefined,
+	max: 30,
+	className: 'lunatic-suggester-default-style',
+	labelledBy: undefined,
+	placeholder: 'Veuillez...',
+	optionRenderer: DefaultOptionRenderer,
+	labelRenderer: DefaultLabelRenderer,
+	language: 'French',
+	onSelect: () => null,
+};
+
+export default SuggesterWrapper;

package/src/components/suggester-loader-widget/create-append-task.js

@@ -0,0 +1,43 @@
+const workerPath =
+	process.env.LUNATIC_LOADER_WORKER_PATH ||
+	process.env.REACT_APP_LUNATIC_LOADER_WORKER_PATH ||
+	'workers/lunatic-loader-worker-0.1.0.js';
+
+/**
+ * Only with Worker
+ */
+function task(info, version, log = () => null) {
+	const { name, fields, stopWords } = info;
+	const worker = new Worker(workerPath);
+	let start = false;
+	let stop = false;
+
+	function launch(entities, post = () => null) {
+		return new Promise(function (resolve) {
+			start = true;
+			worker.postMessage({ name, version, fields, stopWords, entities });
+			worker.addEventListener('message', function (e) {
+				const { data } = e;
+				if (data === 'success') {
+					if (!stop) {
+						post();
+					}
+					resolve(data);
+				} else {
+					log(data);
+				}
+			});
+		});
+	}
+
+	function terminate() {
+		if (start) {
+			stop = true;
+			worker.terminate();
+		}
+	}
+
+	return [launch, terminate];
+}
+
+export default task;

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,102 @@
+import React, { useEffect, useState, useCallback } from 'react';
+import classnames from 'classnames';
+import {
+	useStoreIndex,
+	getStoreCount,
+	clearStoreData,
+} from '../../utils/store-tools';
+import CrossIcon from '../../utils/icons/cross.icon';
+import LoadIcon from '../../utils/icons/load.icon';
+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 './create-append-task';
+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;

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

@@ -0,0 +1,2 @@
+export { default as ActionTool } from './action-tool';
+export { default as Tools } from './tools';

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

@@ -0,0 +1,7 @@
+import React from 'react';
+
+function Tools({ children }) {
+	return <div className="lunatic-widget-tools">{children}</div>;
+}
+
+export default Tools;

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

@@ -0,0 +1,35 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import classnames from 'classnames';
+
+function WidgetContainer({ children, drag, absolute }, containerEl) {
+	if (absolute) {
+		return ReactDOM.createPortal(
+			<div
+				className={classnames('lunatic-suggester-widget-container', {
+					absolute,
+				})}
+				ref={containerEl}
+			>
+				<div className={classnames('lunatic-suggester-widget', { drag })}>
+					{children}
+				</div>
+			</div>,
+			document.body
+		);
+	}
+	return (
+		<div
+			className={classnames('lunatic-suggester-widget-container', {
+				absolute,
+			})}
+			ref={containerEl}
+		>
+			<div className={classnames('lunatic-suggester-widget', { drag })}>
+				{children}
+			</div>
+		</div>
+	);
+}
+
+export default React.forwardRef(WidgetContainer);

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

@@ -0,0 +1,125 @@
+import React, { useEffect, useState, useCallback, useRef } from 'react';
+import PropTypes from 'prop-types';
+import classnames from 'classnames';
+import LoaderRow from './loader-row';
+import { Tools, ActionTool } from './tools';
+import { IsNetwork } from '../../utils/components/is-network';
+import WidgetContainer from './widget-container';
+import Dragger from '../../utils/components/dragger';
+import OnDragIcon from '../../utils/icons/on-drag.icon';
+import './widget.scss';
+
+function empty() {}
+
+function SuggesterLoaderWidget({ source, getStoreInfo, onRefresh, absolute }) {
+	const { suggesters } = source;
+	const containerEl = useRef();
+	const { current } = containerEl;
+	const [stores, setStores] = useState(undefined);
+	const [rows, setRows] = useState([]);
+	const [disabled, setDisabled] = useState(false);
+	const [drag, setDrag] = useState(false);
+
+	useEffect(
+		function () {
+			if (suggesters) {
+				const str = Object.entries(suggesters).reduce(function (
+					a,
+					[name, storeInfo]
+				) {
+					return { ...a, [name]: { storeInfo, ...getStoreInfo(name) } };
+				},
+				{});
+
+				setStores(str);
+			}
+		},
+		[suggesters, getStoreInfo]
+	);
+
+	const notify = useCallback(function (online) {
+		setDisabled(!online);
+	}, []);
+
+	const onDrag = useCallback(
+		function (status) {
+			if (!drag && status) {
+				setDrag(true);
+			} else if (drag && !status) {
+				setDrag(false);
+			}
+		},
+		[drag]
+	);
+
+	useEffect(
+		function () {
+			if (stores) {
+				setRows(
+					Object.entries(stores).map(function ([
+						name,
+						{ storeInfo, idbVersion, fetch: fetchStore },
+					]) {
+						return (
+							<LoaderRow
+								key={name}
+								storeInfo={storeInfo}
+								idbVersion={idbVersion}
+								fetchStore={fetchStore}
+								onRefresh={onRefresh}
+								disabled={disabled}
+							/>
+						);
+					})
+				);
+			}
+		},
+		[stores, disabled, onRefresh]
+	);
+
+	useEffect(
+		function () {
+			if (current && absolute) {
+				current.style.top = '30px';
+				current.style.left = '30px';
+			}
+		},
+		[current, absolute]
+	);
+
+	return (
+		<WidgetContainer ref={containerEl} drag={drag} absolute={absolute}>
+			<Tools>
+				<ActionTool
+					className={classnames('', { drag })}
+					ariaLabel="drag"
+					display={absolute}
+					title="drag"
+				>
+					<Dragger el={current} onDrag={onDrag}>
+						<OnDragIcon className={classnames('on-drag-icon', { drag })} />
+					</Dragger>
+				</ActionTool>
+			</Tools>
+			<IsNetwork
+				className={classnames('suggester-widget-network', { drag })}
+				notify={notify}
+			/>
+			{rows}
+		</WidgetContainer>
+	);
+}
+
+SuggesterLoaderWidget.propTypes = {
+	absolute: PropTypes.bool,
+	source: PropTypes.object.isRequired,
+	getStoreInfo: PropTypes.func.isRequired,
+	onRefresh: PropTypes.func,
+};
+
+SuggesterLoaderWidget.defaultProps = {
+	onRefresh: empty,
+	absolute: false,
+};
+
+export default SuggesterLoaderWidget;

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

@@ -0,0 +1,176 @@
+$colorA: #e9d0d0;
+$colorB: darkred;
+$colorC: #320000;
+$colorD: goldenrod;
+
+@mixin preventSelect() {
+	-moz-user-select: -moz-none;
+	-khtml-user-select: none;
+	-webkit-user-select: none;
+}
+
+@mixin onDrag() {
+	&.drag {
+		box-shadow: $colorD 0px 3px 8px;
+		transition: box-shadow 0.5s;
+	}
+}
+
+.lunatic-suggester-widget-container {
+	&.absolute {
+		position: fixed;
+		z-index: 1;
+	}
+	.lunatic-suggester-widget {
+		position: relative;
+		border: solid $colorB 2px;
+		background-color: $colorA;
+		padding: 4px 4px;
+		border: 2px 2px;
+		width: 400px;
+		box-shadow: $colorC 0px 3px 8px;
+
+		@include onDrag();
+
+		.widget-row {
+			height: 22px;
+			display: flex;
+			flex-direction: row;
+			margin-bottom: 1px;
+			.store-name {
+				width: 60%;
+				color: $colorB;
+				font-size: 18px;
+				white-space: nowrap;
+				overflow-x: hidden;
+			}
+			.stats {
+				color: $colorB;
+				font-size: 18px;
+				white-space: nowrap;
+				overflow-x: hidden;
+				width: 40%;
+			}
+			.widget-button {
+				margin: 0 1px 0 0;
+				padding: 0;
+				border: none;
+				width: 18px;
+				height: 18px;
+				background-color: $colorB;
+
+				&.disabled {
+					background-color: gray;
+					cursor: default;
+				}
+
+				&:hover {
+					background-color: $colorC;
+					transition: background-color 1s;
+					cursor: pointer;
+				}
+
+				.lunatic-suggester-icon {
+					svg {
+						width: 18px;
+						height: 18px;
+						fill: $colorA;
+					}
+				}
+			}
+
+			.lunatic-suggester-loader-progress {
+				height: inherit;
+				border: solid 1px $colorB;
+				border-radius: 2px;
+				width: 70%;
+
+				&.done {
+					&:hover {
+						border-color: $colorC;
+						transition: border-color 1s;
+						.progress {
+							background-color: $colorC;
+							transition: background-color 1s;
+						}
+
+						cursor: pointer;
+					}
+				}
+
+				.content {
+					padding: 2px 2px;
+					height: calc(100%);
+					width: 100%;
+					.progress {
+						background-color: $colorB;
+						height: 100%;
+					}
+				}
+			}
+		}
+
+		.suggester-widget-network {
+			position: absolute;
+			border: solid $colorB 2px;
+			left: 6px;
+			background-color: $colorA;
+			border-radius: 50%;
+			padding: 2px 2px;
+			left: -22px;
+			top: -22px;
+			box-shadow: $colorC 0px 3px 8px;
+
+			&.online {
+				svg {
+					fill: forestgreen;
+				}
+			}
+
+			svg {
+				width: 24px;
+				height: 24px;
+				fill: $colorB;
+			}
+
+			@include onDrag();
+		}
+
+		.lunatic-widget-tools {
+			position: absolute;
+			right: 0;
+			top: -18px;
+			margin-top: -4px;
+
+			.lunatic-action-tool {
+				display: inline-block;
+				height: 18px;
+				width: 18px;
+				background-color: $colorB;
+				border-radius: 50%;
+				margin-left: 2px;
+
+				&:hover {
+					box-shadow: $colorC 0px 3px 8px;
+				}
+
+				&.drag {
+					background-color: $colorD;
+					transition: background-color 0.5s;
+				}
+
+				.on-drag-icon {
+					cursor: grab;
+					&.drag {
+						cursor: grabbing;
+					}
+					svg {
+						width: 16px;
+						height: 16px;
+						fill: $colorA;
+					}
+				}
+			}
+		}
+	}
+}

package/src/components/table/index.js

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