@inseefr/lunatic 0.2.0-experimental → 0.2.0-v2

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

@@ -1,102 +1,101 @@
-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;
+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/progress.js

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

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

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

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

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

@@ -1,35 +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);
+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

@@ -1,125 +1,123 @@
-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;
+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 '../commons/components/is-network';
+import WidgetContainer from './widget-container';
+import Dragger from '../commons/components/dragger';
+import { OnDragIcon } from 'components/commons/icons';
+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 = suggesters.reduce(function (current, storeInfo) {
+					const { name } = storeInfo;
+
+					return { ...current, [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;