@inseefr/lunatic 0.3.2-experimental → 0.3.3-v2

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/idb-suggester.js

@@ -1,6 +1,6 @@
-import React, { useEffect, useMemo, useState } from 'react';
+import React, { useMemo, useState, useCallback } from 'react';
 import PropTypes from 'prop-types';
-import SuggesterWrapper from './suggester-wrapper';
+import Suggester from './suggester';
 import createSearching from './searching';
 import CheckStore from './check-store';
 
@@ -15,8 +15,10 @@ function IDBSuggester({
 	onSelect,
 	disabled,
 	value,
+	custom,
 }) {
 	const [store, setStore] = useState(undefined);
+
 	const searching = useMemo(
 		function () {
 			if (store) {
@@ -33,7 +35,7 @@ function IDBSuggester({
 			idbVersion={idbVersion}
 			setStore={setStore}
 		>
-			<SuggesterWrapper
+			<Suggester
 				id={id}
 				className={className}
 				labelledBy={labelledBy}
@@ -41,9 +43,9 @@ function IDBSuggester({
 				labelRenderer={labelRenderer}
 				onSelect={onSelect}
 				searching={searching}
-				storeName={storeName}
 				disabled={disabled}
 				value={value}
+				custom={custom}
 			/>
 		</CheckStore>
 	);

package/src/components/suggester/index.js

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

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

@@ -1,111 +1,45 @@
-import React, { useCallback, useState } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
-import componentWrapper from '../component-wrapper';
-import Declarations from '../declarations';
-import * as U from '../../utils/lib';
-import * as C from '../../constants';
 import IDBSuggester from './idb-suggester';
-import LabelWrapper from '../../utils/components/label-wrapper';
-import FieldWrapper from '../../utils/components/field-wrapper';
+import { createLunaticComponent } from '../commons';
+import * as commonPropTypes from '../commons/prop-types';
+import { COLLECTED } from 'utils/constants';
 
-function getSuggestionId(suggestion) {
-	if (suggestion) {
-		return suggestion.id;
-	}
-	return null;
-}
-
-function Suggester({
-	id,
-	label,
-	preferences,
-	response,
-	handleChange,
-	disabled,
-	focused,
-	declarations,
-	features,
-	bindings,
-	management,
-	labelPosition,
-	style,
-	logFunction,
-	storeName,
-	optionRenderer,
-	labelRenderer,
-	idbVersion,
-}) {
-	const [value, setValue] = useState(() =>
-		U.getResponseByPreference(preferences)(response)
-	);
-	const labelId = `suggester-label-${id}`;
-	const onSelect = useCallback(
-		function (suggestion) {
-			const ids = getSuggestionId(suggestion);
-			// Delete: null --> empty to handle controls
-			handleChange({
-				[U.getResponseName(response)]: ids || '',
-			});
-			setValue(ids);
-		},
-		[handleChange, response]
-	);
+function LunaticSuggester(props) {
+	const {
+		id,
+		storeName,
+		optionRenderer,
+		labelRenderer,
+		idbVersion,
+		focused,
+		value,
+		onChange,
+		disabled,
+		labelId,
+		custom,
+	} = props;
 
 	return (
-		<>
-			<Declarations
-				id={id}
-				type={C.BEFORE_QUESTION_TEXT}
-				declarations={declarations}
-				features={features}
-				bindings={bindings}
-			/>
-			<LabelWrapper
-				id={labelId}
-				htmlFor={id}
-				labelPosition={labelPosition}
-				bindings={bindings}
-				label={label}
-				features={features}
-				logFunction={logFunction}
-			>
-				<Declarations
-					id={id}
-					type={C.AFTER_QUESTION_TEXT}
-					declarations={declarations}
-					features={features}
-					bindings={bindings}
-				/>
-				<FieldWrapper id={id} management={management} response={response}>
-					<IDBSuggester
-						storeName={storeName}
-						optionRenderer={optionRenderer}
-						labelRenderer={labelRenderer}
-						labelledBy={labelId}
-						idbVersion={idbVersion}
-						onSelect={onSelect}
-						focused={focused}
-						disabled={disabled}
-						response={response}
-						id={id}
-						value={value}
-					/>
-				</FieldWrapper>
-			</LabelWrapper>
-			<Declarations
-				id={id}
-				type={C.DETACHABLE}
-				declarations={declarations}
-				features={features}
-				bindings={bindings}
-			/>
-		</>
+		<IDBSuggester
+			storeName={storeName}
+			optionRenderer={optionRenderer}
+			labelRenderer={labelRenderer}
+			labelledBy={labelId}
+			idbVersion={idbVersion}
+			onSelect={onChange}
+			focused={focused}
+			disabled={disabled}
+			id={id}
+			value={value}
+			custom={custom}
+		/>
 	);
 }
 
-Suggester.defaultProps = {
+LunaticSuggester.defaultProps = {
 	label: '',
-	preferences: ['COLLECTED'],
+	preferences: [COLLECTED],
 	response: {},
 	disabled: false,
 	focused: false,
@@ -118,15 +52,15 @@ Suggester.defaultProps = {
 	getStoreInfo: undefined,
 };
 
-Suggester.propTypes = {
+LunaticSuggester.propTypes = {
 	id: PropTypes.string.isRequired,
 	label: PropTypes.string,
-	preferences: PropTypes.arrayOf(U.valueTypePropTypes),
-	response: U.responsePropTypes,
+	preferences: PropTypes.arrayOf(commonPropTypes.valueTypePropTypes),
+	response: commonPropTypes.responsePropTypes,
 	handleChange: PropTypes.func.isRequired,
 	disabled: PropTypes.bool,
 	focused: PropTypes.bool,
-	declarations: U.declarationsPropTypes,
+	declarations: commonPropTypes.declarationsPropTypes,
 	features: PropTypes.arrayOf(PropTypes.string),
 	bindings: PropTypes.object,
 	management: PropTypes.bool,
@@ -136,4 +70,4 @@ Suggester.propTypes = {
 	getStoreInfo: PropTypes.func,
 };
 
-export default componentWrapper(React.memo(Suggester, U.areEqual));
+export default createLunaticComponent(LunaticSuggester);

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

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

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 '../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;