@inseefr/lunatic 0.3.2-experimental → 0.3.6-experimental

package/src/components/icon/component.js

@@ -1,33 +1,33 @@
-import React from 'react';
-import {
-	CheckboxChecked,
-	CheckboxUnchecked,
-	RadioChecked,
-	RadioUnchecked,
-} from './assets';
-import './icon.scss';
-
-const Content = ({ type, checked }) => {
-	if (type === 'radio') {
-		if (checked) return <RadioChecked />;
-		return <RadioUnchecked />;
-	}
-	if (type === 'checkbox') {
-		if (checked) return <CheckboxChecked />;
-		return <CheckboxUnchecked />;
-	}
-	return null;
-};
-
-const Icon = ({ type, checked, disabled, children }) => (
-	<>
-		<span className={`list-icon-wrapper`}>
-			<span className={`list-icon ${disabled ? 'list-icon-disabled' : ''}`}>
-				<Content type={type} checked={checked} />
-			</span>
-			{children}
-		</span>
-	</>
-);
-
-export default Icon;
+import React from 'react';
+import {
+	CheckboxChecked,
+	CheckboxUnchecked,
+	RadioChecked,
+	RadioUnchecked,
+} from './assets';
+import './icon.scss';
+
+const Content = ({ type, checked }) => {
+	if (type === 'radio') {
+		if (checked) return <RadioChecked />;
+		return <RadioUnchecked />;
+	}
+	if (type === 'checkbox') {
+		if (checked) return <CheckboxChecked />;
+		return <CheckboxUnchecked />;
+	}
+	return null;
+};
+
+const Icon = ({ type, checked, disabled, children }) => (
+	<>
+		<span className={`list-icon-wrapper`}>
+			<span className={`list-icon ${disabled ? 'list-icon-disabled' : ''}`}>
+				<Content type={type} checked={checked} />
+			</span>
+			{children}
+		</span>
+	</>
+);
+
+export default Icon;

package/src/components/input/index.js

@@ -1,2 +1,2 @@
-export { default as Input } from './input';
-export { default as InputNumber } from './input-number';
+export { default as Input } from './input';
+export { default as InputNumber } from './input-number';

package/src/components/input/input-number.js

@@ -6,11 +6,12 @@ import { areEqual } from '../../utils/lib';
 import { getTypeControls } from '../component-wrapper/controls/validators';
 import './input.scss';
 
-const InputNumber = ({ numberAsTextfield, ...props }) => (
+const InputNumber = ({ numberAsTextfield, decimals, ...props }) => (
 	<InputDeclarationsWrapper
 		type={numberAsTextfield ? 'text' : 'number'}
 		roleType="input"
 		{...props}
+		decimals={decimals || 0}
 		isInputNumber
 		numberAsTextfield
 		validators={[getTypeControls]}

package/src/components/loop/index.js

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

package/src/components/loop-constructor/wrapper/body-component.js

@@ -23,6 +23,7 @@ const BodyComponent = ({
 		components,
 		headers,
 	});
+	const featuresWithoutMD = features.filter((f) => f !== 'MD');
 	if (componentType === 'RosterForLoop')
 		return (
 			<table id={`table-${mainId}`} className="table-lunatic">
@@ -38,10 +39,16 @@ const BodyComponent = ({
 									componentType,
 									id,
 									rowNumber,
+									conditionFilter,
 									...componentProps
 								} = component;
 								const localBindings =
 									U.buildBindingsForDeeperComponents(rowNumber)(bindings);
+								if (conditionFilter) {
+									const { value = '' } = conditionFilter;
+									if (!interpret(featuresWithoutMD)(localBindings)(value))
+										return null;
+								}
 								if (componentType) {
 									const Component = lunatic[componentType];
 									return (
@@ -101,7 +108,12 @@ const BodyComponent = ({
 						const localBindings =
 							U.buildBindingsForDeeperComponents(i)(bindings);
 						// ensure to have only N-1 missingResponse
-						const { missingResponse } = componentProps;
+						const { missingResponse, conditionFilter } = componentProps;
+						if (conditionFilter) {
+							const { value = '' } = conditionFilter;
+							if (!interpret(featuresWithoutMD)(localBindings)(value))
+								return null;
+						}
 						return (
 							<div className="block-component" key={`${id}-row-${i}`}>
 								<Component

package/src/components/radio/index.js

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

package/src/components/sequence/index.js

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

package/src/components/subsequence/index.js

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

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]
+	);
+
+	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/components/suggester-content.js

@@ -1,42 +1,42 @@
-import React, { useRef, useCallback } from 'react';
-import classnames from 'classnames';
-import useDocumentAddEventListener from '../../../utils/to-expose/hooks/use-document-add-event-listener';
-
-function SuggesterContent({
-	children,
-	id,
-	focused,
-	onFocus,
-	onBlur,
-	onKeyDown,
-}) {
-	const ref = useRef();
-	const onClick = useCallback(
-		function (e) {
-			const { current } = ref;
-			if (!current.contains(e.target)) {
-				onBlur();
-			}
-		},
-		[ref, onBlur]
-	);
-
-	useDocumentAddEventListener('mousedown', onClick);
-
-	return (
-		<div
-			className={classnames('lunatic-suggester', {
-				focused,
-			})}
-			onFocus={onFocus}
-			onKeyDown={onKeyDown}
-			ref={ref}
-		>
-			<div className={classnames('lunatic-suggester-content', { focused })}>
-				{children}
-			</div>
-		</div>
-	);
-}
-
-export default SuggesterContent;
+import React, { useRef, useCallback } from 'react';
+import classnames from 'classnames';
+import useDocumentAddEventListener from '../../../utils/to-expose/hooks/use-document-add-event-listener';
+
+function SuggesterContent({
+	children,
+	id,
+	focused,
+	onFocus,
+	onBlur,
+	onKeyDown,
+}) {
+	const ref = useRef();
+	const onClick = useCallback(
+		function (e) {
+			const { current } = ref;
+			if (!current.contains(e.target) && focused) {
+				onBlur();
+			}
+		},
+		[ref, focused, onBlur]
+	);
+
+	useDocumentAddEventListener('mousedown', onClick);
+
+	return (
+		<div
+			className={classnames('lunatic-suggester', {
+				focused,
+			})}
+			onFocus={onFocus}
+			onKeyDown={onKeyDown}
+			ref={ref}
+		>
+			<div className={classnames('lunatic-suggester-content', { focused })}>
+				{children}
+			</div>
+		</div>
+	);
+}
+
+export default SuggesterContent;

package/src/components/suggester/components/suggester.js

@@ -1,4 +1,11 @@
-import React, { useCallback, useContext, useRef, useMemo } from 'react';
+import React, {
+	useCallback,
+	useContext,
+	useRef,
+	useMemo,
+	useEffect,
+	useState,
+} from 'react';
 import classnames from 'classnames';
 import { actions, SuggesterContext } from '../state-management';
 import SuggesterContent from './suggester-content';
@@ -6,6 +13,8 @@ import Selection from './selection';
 import Panel from './panel';
 import createOnKeyDownCallback from './create-on-keydown-callback';
 import Delete from './selection/delete';
+import * as C from '../../../constants';
+import * as U from '../../../utils/lib';
 import './suggester.scss';
 
 function Suggester({
@@ -16,23 +25,54 @@ function Suggester({
 	labelRenderer,
 	onSelect,
 	value,
+	focused: initFocused,
+	response,
+	logFunction,
 }) {
 	const inputEl = useRef();
 	const [state, dispatch] = useContext(SuggesterContext);
 	const { focused, id, messageError, search, disabled } = state;
 
+	const [init, setInit] = useState(false);
+
+	const createEventFocus = (focusIn = true) =>
+		U.createObjectEvent(
+			`suggester-${id}`,
+			C.INPUT_CATEGORY,
+			focusIn ? C.EVENT_FOCUS_IN : C.EVENT_FOCUS_OUT,
+			U.getResponseName(response),
+			value
+		);
+
 	const onFocus = useCallback(
 		function () {
-			if (!disabled) {
+			if (!focused && !disabled) {
 				if (inputEl.current !== document.activeElement) {
 				}
 				inputEl.current.focus();
 				dispatch(actions.onFocus());
 			}
 		},
-		[dispatch, disabled]
+		[disabled, dispatch, focused]
 	);
 
+	// Handle focused props of Component
+	useEffect(() => {
+		if (!init && id) {
+			if (initFocused && !focused) onFocus();
+			setInit(true);
+		}
+	}, [focused, init, initFocused, onFocus, id]);
+
+	// log info when focus change
+	useEffect(() => {
+		if (init && id && focused && U.isFunction(logFunction))
+			logFunction(createEventFocus());
+		if (init && id && !focused && U.isFunction(logFunction))
+			logFunction(createEventFocus(false));
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [focused, id, init]);
+
 	const onDelete = useCallback(
 		function () {
 			dispatch(actions.onDeleteSearch());

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

@@ -1,4 +1,4 @@
-import React, { useEffect, useMemo, useState } from 'react';
+import React, { useMemo, useState } from 'react';
 import PropTypes from 'prop-types';
 import SuggesterWrapper from './suggester-wrapper';
 import createSearching from './searching';
@@ -15,6 +15,9 @@ function IDBSuggester({
 	onSelect,
 	disabled,
 	value,
+	focused,
+	response,
+	logFunction,
 }) {
 	const [store, setStore] = useState(undefined);
 	const searching = useMemo(
@@ -44,6 +47,9 @@ function IDBSuggester({
 				storeName={storeName}
 				disabled={disabled}
 				value={value}
+				focused={focused}
+				response={response}
+				logFunction={logFunction}
 			/>
 		</CheckStore>
 	);

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

@@ -89,6 +89,7 @@ function Suggester({
 						response={response}
 						id={id}
 						value={value}
+						logFunction={logFunction}
 					/>
 				</FieldWrapper>
 			</LabelWrapper>

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

@@ -30,6 +30,9 @@ function SuggesterWrapper({
 	labelRenderer,
 	disabled,
 	value,
+	focused,
+	response,
+	logFunction,
 }) {
 	const [state, dispatch] = useReducer(reducer, INITIAL_STATE);
 	const { search, selectedIndex, options, expended } = state;
@@ -82,6 +85,9 @@ function SuggesterWrapper({
 				labelRenderer={labelRenderer}
 				onSelect={onSelect}
 				value={value}
+				focused={focused}
+				response={response}
+				logFunction={logFunction}
 			/>
 		</SuggesterContext.Provider>
 	);

package/src/components/tooltip/response.js

@@ -1,52 +1,52 @@
-import React, { useState, useEffect } from 'react';
-import PropTypes from 'prop-types';
-import ReactTooltip from 'react-tooltip';
-import * as U from '../../utils/lib';
-import * as img from './img';
-import './tooltip.scss';
-
-const TooltipResponse = ({ id, response }) => {
-	const [tooltipElements, setTooltipElements] = useState(() =>
-		U.buildTooltip(response)
-	);
-
-	useEffect(() => {
-		setTooltipElements(U.buildTooltip(response));
-	}, [response]);
-
-	const { content, imgName } = tooltipElements;
-
-	if (!content) return null;
-
-	const text = content
-		.map(({ key, value }) => `${key} : ${value}<br />`)
-		.join('');
-
-	return (
-		<div className="tooltip-lunatic">
-			<span
-				data-for={`${id}-management-tooltip`}
-				data-tip={text}
-				data-multiline
-			>
-				<img id={id} alt="img-tooltip" src={img[imgName].src || img[imgName]} />
-			</span>
-			<ReactTooltip
-				id={`${id}-management-tooltip`}
-				className="tooltip-text"
-				place="left"
-			/>
-		</div>
-	);
-};
-
-TooltipResponse.defaultProps = {
-	response: {},
-};
-
-TooltipResponse.propTypes = {
-	id: PropTypes.string,
-	response: U.responsePropTypes,
-};
-
-export default TooltipResponse;
+import React, { useState, useEffect } from 'react';
+import PropTypes from 'prop-types';
+import ReactTooltip from 'react-tooltip';
+import * as U from '../../utils/lib';
+import * as img from './img';
+import './tooltip.scss';
+
+const TooltipResponse = ({ id, response }) => {
+	const [tooltipElements, setTooltipElements] = useState(() =>
+		U.buildTooltip(response)
+	);
+
+	useEffect(() => {
+		setTooltipElements(U.buildTooltip(response));
+	}, [response]);
+
+	const { content, imgName } = tooltipElements;
+
+	if (!content) return null;
+
+	const text = content
+		.map(({ key, value }) => `${key} : ${value}<br />`)
+		.join('');
+
+	return (
+		<div className="tooltip-lunatic">
+			<span
+				data-for={`${id}-management-tooltip`}
+				data-tip={text}
+				data-multiline
+			>
+				<img id={id} alt="img-tooltip" src={img[imgName].src || img[imgName]} />
+			</span>
+			<ReactTooltip
+				id={`${id}-management-tooltip`}
+				className="tooltip-text"
+				place="left"
+			/>
+		</div>
+	);
+};
+
+TooltipResponse.defaultProps = {
+	response: {},
+};
+
+TooltipResponse.propTypes = {
+	id: PropTypes.string,
+	response: U.responsePropTypes,
+};
+
+export default TooltipResponse;