@inseefr/lunatic 0.1.13-hackathon → 0.2.0-v2

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 '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);