@inseefr/lunatic 0.1.0-hackathon → 0.1.0-v2

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

@@ -15,6 +15,7 @@ function IDBSuggester({
 	onSelect,
 	disabled,
 	value,
+	custom,
 }) {
 	const [store, setStore] = useState(undefined);
 	const searching = useMemo(
@@ -41,9 +42,9 @@ function IDBSuggester({
 				labelRenderer={labelRenderer}
 				onSelect={onSelect}
 				searching={searching}
-				storeName={storeName}
 				disabled={disabled}
 				value={value}
+				custom={custom}
 			/>
 		</CheckStore>
 	);

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

@@ -1,107 +1,59 @@
-import React, { useCallback, useState, useEffect } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
-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 { useOnHandleChange, LunaticField } from '../commons';
+import * as U from '../../utils/lib';
 
-function getSuggestionId(suggestion) {
-	if (suggestion) {
-		return suggestion.id;
-	}
-	return null;
-}
+function LunaticSuggester(props) {
+	const {
+		storeName,
+		optionRenderer,
+		labelRenderer,
+		idbVersion,
+		id,
+		focused,
+		value,
+		disabled,
+		label,
+		declarations,
+		handleChange,
+		response,
+		custom,
+	} = props;
 
-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);
-			handleChange({
-				[U.getResponseName(response)]: ids,
-			});
-			setValue(ids);
-		},
-		[handleChange, response]
-	);
+	const contentId = `lunatic-suggester-${id}`;
+	const labelId = `lunatic-suggester-label-${id}`;
+
+	const onSelect = useOnHandleChange({ handleChange, response, value });
 
 	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}
+		<LunaticField
+			label={label}
+			contentId={contentId}
+			labelId={labelId}
+			declarations={declarations}
+			id={id}
+			value={value}
+			className="lunatic-suggester-label"
+		>
+			<IDBSuggester
+				storeName={storeName}
+				optionRenderer={optionRenderer}
+				labelRenderer={labelRenderer}
+				labelledBy={labelId}
+				idbVersion={idbVersion}
+				onSelect={onSelect}
+				focused={focused}
+				disabled={disabled}
+				id={contentId}
+				value={value}
+				custom={custom}
 			/>
-		</>
+		</LunaticField>
 	);
 }
 
-Suggester.defaultProps = {
+LunaticSuggester.defaultProps = {
 	label: '',
 	preferences: ['COLLECTED'],
 	response: {},
@@ -116,7 +68,7 @@ Suggester.defaultProps = {
 	getStoreInfo: undefined,
 };
 
-Suggester.propTypes = {
+LunaticSuggester.propTypes = {
 	id: PropTypes.string.isRequired,
 	label: PropTypes.string,
 	preferences: PropTypes.arrayOf(U.valueTypePropTypes),
@@ -134,4 +86,4 @@ Suggester.propTypes = {
 	getStoreInfo: PropTypes.func,
 };
 
-export default React.memo(Suggester, U.areEqual);
+export default React.memo(LunaticSuggester);

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

@@ -1,3 +1,5 @@
+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;
@@ -19,7 +21,7 @@ const searching = (worker) => (search, name, version) => {
 				if (worker) {
 					worker.terminate();
 				}
-				worker = new Worker(WORKER_PATH);
+				worker = createWorker(WORKER_PATH);
 				worker.postMessage({ search, name, version });
 				worker.addEventListener('message', function (e) {
 					const { data } = e;

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

@@ -1,4 +1,4 @@
-import React, { useReducer, useEffect } from 'react';
+import React, { useReducer, useEffect, useCallback, useMemo } from 'react';
 import PropTypes from 'prop-types';
 import {
 	reducer,
@@ -8,7 +8,9 @@ import {
 } from './state-management';
 import { Suggester } from './components';
 import DefaultLabelRenderer from './components/selection/default-label-renderer';
+import createOnKeyDownCallback from './create-on-keydown-callback';
 import { DefaultOptionRenderer } from './components';
+import { usePrevious } from '../commons';
 import './default-style.scss';
 
 function getSearch(search, value) {
@@ -19,7 +21,6 @@ function getSearch(search, value) {
 }
 
 function SuggesterWrapper({
-	id,
 	className,
 	version,
 	labelledBy,
@@ -28,11 +29,21 @@ function SuggesterWrapper({
 	onSelect,
 	searching,
 	labelRenderer,
-	disabled,
 	value,
+	custom,
+	disabled,
 }) {
 	const [state, dispatch] = useReducer(reducer, INITIAL_STATE);
-	const { search, selectedIndex, options } = state;
+	const {
+		search,
+		selectedIndex,
+		options,
+		focused,
+		id,
+
+		messageError,
+	} = state;
+	const prevSelectedIndex = usePrevious(selectedIndex);
 
 	useEffect(
 		function () {
@@ -47,7 +58,9 @@ function SuggesterWrapper({
 					}
 				} catch (e) {
 					console.error(e);
-					dispatch(actions.onError('Une erreur est survenue.'));
+					dispatch(
+						actions.onError('Une erreur est survenue durant une recherche.')
+					);
 				}
 			}
 			doIt();
@@ -57,11 +70,16 @@ function SuggesterWrapper({
 
 	useEffect(
 		function () {
-			if (selectedIndex !== undefined) {
-				onSelect(options[selectedIndex], selectedIndex);
+			if (selectedIndex !== prevSelectedIndex) {
+				if (selectedIndex in options) {
+					const { id } = options[selectedIndex];
+					onSelect(id);
+				} else {
+					onSelect(null);
+				}
 			}
 		},
-		[selectedIndex, onSelect, options]
+		[selectedIndex, onSelect, options, prevSelectedIndex]
 	);
 
 	useEffect(
@@ -71,6 +89,47 @@ function SuggesterWrapper({
 		[id, disabled, value]
 	);
 
+	const onFocus = useCallback(
+		function () {
+			dispatch(actions.onFocus());
+		},
+		[dispatch, disabled]
+	);
+
+	const onDelete = useCallback(
+		function () {
+			dispatch(actions.onDeleteSearch());
+			onSelect(undefined);
+		},
+		[dispatch, onSelect]
+	);
+
+	const onBlur = useCallback(
+		function () {
+			dispatch(actions.onBlur());
+		},
+		[dispatch]
+	);
+
+	const onKeyDown = useMemo(
+		() => createOnKeyDownCallback(dispatch),
+		[dispatch]
+	);
+
+	const onChange = useCallback(
+		function (value) {
+			dispatch(actions.onChangeSearch(value));
+		},
+		[dispatch]
+	);
+
+	const onClickOption = useCallback(
+		function (index) {
+			dispatch(actions.onClickOption(index));
+		},
+		[dispatch]
+	);
+
 	return (
 		<SuggesterContext.Provider value={[state, dispatch]}>
 			<Suggester
@@ -82,6 +141,14 @@ function SuggesterWrapper({
 				labelRenderer={labelRenderer}
 				onSelect={onSelect}
 				value={value}
+				custom={custom}
+				onFocus={onFocus}
+				onDelete={onDelete}
+				onBlur={onBlur}
+				onKeyDown={onKeyDown}
+				onChange={onChange}
+				onClickOption={onClickOption}
+				{...state}
 			/>
 		</SuggesterContext.Provider>
 	);
@@ -95,7 +162,6 @@ SuggesterWrapper.propTypes = {
 	optionRenderer: PropTypes.func,
 	labelRenderer: PropTypes.func,
 	onSelect: PropTypes.func,
-	storeInfo: PropTypes.object,
 	value: PropTypes.oneOfType([
 		PropTypes.string,
 		PropTypes.number,

package/src/components/switch/index.js

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

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

@@ -0,0 +1,49 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { LunaticField, useOnHandleChange } from '../commons';
+import Switch from './switch';
+
+function LunaticSwitch({
+	label,
+	declarations,
+	id,
+	handleChange,
+	response,
+	value,
+	statusLabel,
+	custom,
+}) {
+	const inputId = `lunatic-switch-${id}`;
+	const labelId = `lunatic-switch-label-${id}`;
+	const booleanValue = value === true ? value : false;
+
+	const onClick = useOnHandleChange({ handleChange, response, value });
+
+	return (
+		<LunaticField
+			label={label}
+			contentId={inputId}
+			labelId={labelId}
+			declarations={declarations}
+			id={id}
+			value={value}
+			className="lunatic-switch"
+		>
+			<Switch
+				checked={booleanValue}
+				handleChange={onClick}
+				statusLabel={statusLabel}
+				labelId={labelId}
+				custom={custom}
+			/>
+		</LunaticField>
+	);
+}
+
+LunaticSwitch.propTypes = {
+	value: PropTypes.oneOf([null, true, false]),
+};
+
+LunaticSwitch.defaultProps = { statusLabel: { true: 'True', false: 'False' } };
+
+export default LunaticSwitch;

package/src/components/switch/switch.js

@@ -0,0 +1,72 @@
+import React, { useCallback } from 'react';
+import PropTypes from 'prop-types';
+import classnames from 'classnames';
+import { createCustomizableLunaticField } from '../commons';
+import './switch.scss';
+
+function Switch({ checked, disabled, handleChange, statusLabel, labelId }) {
+	const onClick = useCallback(
+		function () {
+			handleChange(!checked);
+		},
+		[checked, handleChange]
+	);
+
+	const handleKeyDown = useCallback(
+		function (e) {
+			const { code } = e;
+			if (code === 'Space') {
+				onClick();
+			}
+		},
+		[onClick]
+	);
+	const { true: labelTrue, false: labelFalse } = statusLabel;
+
+	return (
+		<div className="lunatic-switch">
+			<div
+				className={classnames('lunatic-switch-label', { checked: !checked })}
+			>
+				{labelFalse}
+			</div>
+			<div
+				role="switch"
+				aria-checked={checked}
+				tabIndex="0"
+				className={classnames('lunatic-switch-container', {
+					disabled,
+					checked,
+				})}
+				onClick={onClick}
+				onKeyDown={handleKeyDown}
+				labelledBy={labelId}
+			>
+				<div className="lunatic-switch-button"></div>
+			</div>
+			<div className={classnames('lunatic-switch-label', { checked })}>
+				{labelTrue}
+			</div>
+		</div>
+	);
+}
+Switch.propTypes = {
+	checked: PropTypes.bool.isRequired,
+	disabled: PropTypes.bool,
+	handleChange: PropTypes.func.isRequired,
+	statusLabel: PropTypes.shape({
+		true: PropTypes.string,
+		false: PropTypes.string,
+	}),
+	labelId: PropTypes.string.isRequired,
+};
+
+Switch.defaultProps = {
+	disabled: false,
+	statusLabel: {
+		true: 'True',
+		false: 'False',
+	},
+};
+
+export default createCustomizableLunaticField(Switch);

package/src/components/switch/switch.scss

@@ -0,0 +1,47 @@
+.lunatic-switch {
+	display: flex;
+	flex-direction: row;
+
+	.lunatic-switch-label {
+		height: 100%;
+		line-height: 26px;
+		&.checked {
+			font-weight: bold;
+		}
+	}
+
+	.lunatic-switch-container {
+		display: inline-block;
+		height: 26px;
+		width: 52px;
+		background-color: lightgrey;
+		border-radius: 13px;
+		position: relative;
+		margin: 2px;
+
+		cursor: pointer;
+
+		.lunatic-switch-button {
+			position: absolute;
+			height: 22px;
+			width: 22px;
+			background-color: white;
+			border-radius: 11px;
+			margin: 2px;
+
+			-webkit-transition: 0.3s;
+			transition: 0.3s;
+		}
+
+		&.disabled {
+		}
+		&.checked {
+			background-color: royalblue;
+			.lunatic-switch-button {
+				-webkit-transform: translateX(26px);
+				-ms-transform: translateX(26px);
+				transform: translateX(26px);
+			}
+		}
+	}
+}