@inseefr/lunatic 0.3.1-experimental → 0.3.2-v2

package/src/{utils → components/commons}/components/is-network/use-online-status.js

@@ -1,51 +1,51 @@
-import { useEffect } from 'react';
-
-function useOnlineStatus(online, offline) {
-	useEffect(
-		function () {
-			if (window.navigator.onLine && typeof online === 'function') {
-				online();
-			} else if (typeof offline === 'function') {
-				offline();
-			}
-		},
-		[online, offline]
-	);
-	useEffect(
-		function () {
-			let callback;
-			if (typeof online === 'function') {
-				callback = function (e) {
-					online();
-				};
-				window.addEventListener('online', callback);
-			}
-			return function () {
-				if (callback) {
-					window.removeEventListener('online', callback);
-				}
-			};
-		},
-		[online]
-	);
-
-	useEffect(
-		function () {
-			let callback;
-			if (typeof offline === 'function') {
-				callback = function (e) {
-					offline();
-				};
-				window.addEventListener('offline', callback);
-			}
-			return function () {
-				if (callback) {
-					window.removeEventListener('offline', callback);
-				}
-			};
-		},
-		[offline]
-	);
-}
-
-export default useOnlineStatus;
+import { useEffect } from 'react';
+
+function useOnlineStatus(online, offline) {
+	useEffect(
+		function () {
+			if (window.navigator.onLine && typeof online === 'function') {
+				online();
+			} else if (typeof offline === 'function') {
+				offline();
+			}
+		},
+		[online, offline]
+	);
+	useEffect(
+		function () {
+			let callback;
+			if (typeof online === 'function') {
+				callback = function (e) {
+					online();
+				};
+				window.addEventListener('online', callback);
+			}
+			return function () {
+				if (callback) {
+					window.removeEventListener('online', callback);
+				}
+			};
+		},
+		[online]
+	);
+
+	useEffect(
+		function () {
+			let callback;
+			if (typeof offline === 'function') {
+				callback = function (e) {
+					offline();
+				};
+				window.addEventListener('offline', callback);
+			}
+			return function () {
+				if (callback) {
+					window.removeEventListener('offline', callback);
+				}
+			};
+		},
+		[offline]
+	);
+}
+
+export default useOnlineStatus;

package/src/components/commons/components/label.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import createCustomizableLunaticField from '../create-customizable-field';
+
+function Label({ children, id, htmlFor, className, style }) {
+	if (children) {
+		return (
+			<label htmlFor={htmlFor} id={id} className={className} style={style}>
+				{children}
+			</label>
+		);
+	}
+	return null;
+}
+
+export default createCustomizableLunaticField(Label);

package/src/components/commons/components/lunatic-component.js

@@ -0,0 +1,56 @@
+import React from 'react';
+import Label from './label';
+import FieldContainer from './field-container';
+import VariableStatus from './variable-status';
+import {
+	DeclarationsBeforeText,
+	DeclarationsAfterText,
+	DeclarationsDetachable,
+} from '../../declarations';
+import Missing from './missing';
+import safetyLabel from '../safety-label';
+
+function LunaticComponent(props) {
+	const {
+		id,
+		labelId,
+		inputId,
+		label,
+		custom,
+		preferences,
+		declarations,
+		className,
+		value,
+		children,
+		missing,
+		missingResponse,
+		management,
+	} = props;
+	const content = (
+		<>
+			<DeclarationsBeforeText declarations={declarations} custom={custom} />
+			<Label
+				id={labelId}
+				htmlFor={inputId}
+				className={className}
+				custom={custom}
+			>
+				{safetyLabel(label, id)}
+			</Label>
+			<DeclarationsAfterText declarations={declarations} custom={custom} />
+			<FieldContainer
+				value={value}
+				id={id}
+				custom={custom}
+				preferences={preferences}
+			>
+				{children}
+			</FieldContainer>
+			<DeclarationsDetachable declarations={declarations} custom={custom} />
+			{missing && missingResponse && <Missing {...props} />}
+		</>
+	);
+	return management ? <VariableStatus>{content}</VariableStatus> : content;
+}
+
+export default LunaticComponent;

package/src/components/commons/components/lunatic-fieldset-component.js

@@ -0,0 +1,46 @@
+import React from 'react';
+import FieldContainer from './field-container';
+import Fieldset from './fieldset';
+import VariableStatus from './variable-status';
+import Missing from './missing';
+import {
+	DeclarationsBeforeText,
+	DeclarationsAfterText,
+	DeclarationsDetachable,
+} from '../../declarations';
+
+function LunaticFieldsetComponent(props) {
+	const {
+		id,
+		label,
+		custom,
+		preferences,
+		declarations,
+		value,
+		children,
+		missingResponse,
+		missing,
+		management,
+	} = props;
+	const content = (
+		<>
+			<DeclarationsBeforeText declarations={declarations} custom={custom} />
+			<FieldContainer
+				value={value}
+				id={id}
+				custom={custom}
+				preferences={preferences}
+			>
+				<Fieldset legend={label} custom={custom}>
+					<DeclarationsAfterText declarations={declarations} custom={custom} />
+					{children}
+				</Fieldset>
+			</FieldContainer>
+			<DeclarationsDetachable declarations={declarations} custom={custom} />
+			{missing && missingResponse && <Missing {...props} />}
+		</>
+	);
+	return management ? <VariableStatus>{content}</VariableStatus> : content;
+}
+
+export default LunaticFieldsetComponent;

package/src/components/commons/components/md-label/index.js

@@ -0,0 +1 @@
+export { default } from './md-label';

package/src/components/commons/components/md-label/link.js

@@ -0,0 +1,54 @@
+import React from 'react';
+import ReactTooltip from 'react-tooltip';
+
+const Link = (props) => {
+	const {
+		href,
+		children,
+		title,
+		// logFunction
+	} = props;
+	// TODO: reactivate
+	const listener = (/* link = true */) => () => {
+		// if (isFunction(logFunction))
+		// 	logFunction(
+		// 		createObjectEvent(
+		// 			link ? `link-${href}` : `tooltip-${title}`,
+		// 			link ? LINK_CATEGORY : TOOLTIP_CATEGORY,
+		// 			EVENT_CLICK
+		// 		)
+		// 	);
+	};
+	if (href.trim().startsWith('http'))
+		return (
+			<a
+				href={href}
+				target="_blank"
+				rel="noreferrer noopener"
+				onClick={listener()}
+			>
+				{children}
+			</a>
+		);
+	return (
+		<span className="link-md" onPointerUp={listener(false)}>
+			<span
+				data-for={`${title}-tooltip`}
+				data-tip={title}
+				data-multiline
+				className="field-md"
+			>
+				{children}
+			</span>
+			<ReactTooltip
+				id={`${title}-tooltip`}
+				className="tooltip-content"
+				place="bottom"
+				effect="solid"
+				globalEventOff="click"
+			/>
+		</span>
+	);
+};
+
+export default Link;

package/src/components/commons/components/md-label/md-label.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import ReactMarkdown from 'react-markdown';
+import Link from './link';
+
+const renderers = (otherProps) => {
+	return {
+		paragraph: (props) => <p style={{ margin: '0' }}>{props.children}</p>,
+		a: (props) => Link({ ...otherProps, ...props }),
+	};
+};
+
+const DEFAULT_LOG_FUNCTION = () => {};
+
+const MdLabel = ({ expression, logFunction = DEFAULT_LOG_FUNCTION }) => (
+	<ReactMarkdown
+		children={expression}
+		components={renderers({ logFunction })}
+	/>
+);
+
+export default MdLabel;

package/src/components/commons/components/missing/index.js

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

package/src/components/commons/components/missing/missing.js

@@ -0,0 +1,81 @@
+import React, { useCallback } from 'react';
+import useOnHandleChange from '../../use-on-handle-change';
+import KeyboardEventHandler from 'react-keyboard-event-handler';
+import Button from '../../../button';
+import { DK, RF } from 'utils/constants';
+import D from 'i18n';
+import './missing.scss';
+
+const DEFAULT_SHORTCUT = { dontKnow: '', refused: '' };
+
+const Missing = (props) => {
+	const {
+		dontKnowButton = D.DK,
+		refusedButton = D.RF,
+		missingResponse,
+		handleChange,
+		missingStrategy,
+		missingShortcut = DEFAULT_SHORTCUT,
+		shortcut,
+		componentType,
+		paginatedLoop,
+	} = props;
+
+	const { value } = missingResponse;
+	const onClick = useOnHandleChange({
+		handleChange,
+		response: missingResponse,
+		value,
+	});
+
+	const handleMissingStrategy = useCallback(() => {
+		if (missingStrategy) missingStrategy();
+	}, [missingStrategy]);
+
+	const onClickDK = useCallback(() => {
+		onClick(DK);
+		handleMissingStrategy();
+	}, [onClick, handleMissingStrategy]);
+	const onClickRF = useCallback(() => {
+		onClick(RF);
+		handleMissingStrategy();
+	}, [onClick, handleMissingStrategy]);
+
+	if ((componentType === 'Loop' && paginatedLoop) || !missingResponse)
+		return null;
+
+	return (
+		<div className="missing-buttons">
+			<span
+				className={`missing-button${
+					value === DK ? '-active' : ''
+				} missing-button-dk${value === DK ? '-active' : ''}`}
+			>
+				<Button label={dontKnowButton} onClick={onClickDK} />
+			</span>
+			<span
+				className={`missing-button${
+					value === RF ? '-active' : ''
+				} missing-button-rf${value === RF ? '-active' : ''}`}
+			>
+				<Button label={refusedButton} onClick={onClickRF} />
+			</span>
+			{shortcut &&
+				missingShortcut &&
+				missingShortcut.dontKnow &&
+				missingShortcut.refused && (
+					<KeyboardEventHandler
+						handleKeys={Object.values(missingShortcut)}
+						onKeyEvent={(key, e) => {
+							e.preventDefault();
+							if (key === missingShortcut.dontKnow) onClick(DK)();
+							if (key === missingShortcut.refused) onClick(RF)();
+						}}
+						handleFocusableElements
+					/>
+				)}
+		</div>
+	);
+};
+
+export default Missing;

package/src/components/commons/components/missing/missing.scss

@@ -0,0 +1,30 @@
+.lunatic-component {
+	.missing-buttons {
+		margin-top: 1em;
+		.button-lunatic {
+			width: 4em;
+			font-size: 1em;
+			font-weight: normal;
+		}
+		.missing-button {
+			.button-lunatic {
+				background-color: var(--color-very-very-light);
+				color: var(--color-primary-dark);
+				&:hover {
+					background-color: white;
+					color: var(--color-primary-main);
+				}
+			}
+		}
+		.missing-button-active {
+			.button-lunatic {
+				background-color: var(--color-primary-dark);
+				color: var(--color-very-very-light);
+				&:hover {
+					background-color: var(--color-primary-main);
+					color: white;
+				}
+			}
+		}
+	}
+}

package/src/components/commons/components/nothing-to-display.js

@@ -0,0 +1,7 @@
+import React from 'react';
+
+function NothingToDisplay() {
+	return <div>Nothing to display!</div>;
+}
+
+export default NothingToDisplay;

package/src/components/commons/components/orchestrated-component.js

@@ -0,0 +1,49 @@
+import React from 'react';
+import * as lunatic from '../../../components';
+import { fillComponentExpressions } from '../../../use-lunatic/commons';
+
+function OrchestratedComponent({
+	id,
+	component,
+	handleChange,
+	features,
+	missing,
+	shortcut,
+	management,
+	preferences,
+	value,
+	iteration,
+	linksIterations,
+	executeExpression,
+	custom,
+}) {
+	const { componentType } = component;
+	const componentFilled = fillComponentExpressions(component, {
+		executeExpression,
+		pager: { iteration, linksIterations },
+	});
+	const Component = lunatic[componentType];
+
+	const isFiltered = componentFilled?.conditionFilter;
+
+	if (componentType in lunatic && isFiltered) {
+		return (
+			<Component
+				{...componentFilled}
+				id={id}
+				handleChange={handleChange}
+				preferences={preferences}
+				management={management}
+				features={features}
+				missing={missing}
+				shortcut={shortcut}
+				value={value}
+				executeExpression={executeExpression}
+				custom={custom}
+			/>
+		);
+	}
+	return null;
+}
+
+export default OrchestratedComponent;

package/src/components/{tooltip → commons/components/variable-status}/img/index.js

@@ -1,4 +1,4 @@
-import editedImg from './edited.png';
-import forcedImg from './forced.png';
-
-export { editedImg, forcedImg };
+import editedImg from './edited.png';
+import forcedImg from './forced.png';
+
+export { editedImg, forcedImg };

package/src/components/commons/components/variable-status/index.js

@@ -0,0 +1 @@
+export { default } from './variable-status';

package/src/components/commons/components/variable-status/variable-status.js

@@ -0,0 +1,54 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import ReactTooltip from 'react-tooltip';
+import * as img from './img';
+import './variable-status.scss';
+
+const VariableStatus = ({ id = '', children }) => {
+	const [tooltipElements, setTooltipElements] = useState(() => ({
+		imgName: 'editedImg',
+		content: [{ key: 'TODO', value: ' coming soon' }],
+	}));
+
+	// useEffect(() => {
+	// 	setTooltipElements({ imgName: 'edited', content: 'toto' });
+	// }, [response]);
+
+	const { content, imgName } = tooltipElements;
+
+	if (!content) return null;
+
+	const text = content
+		.map(({ key, value }) => `${key} : ${value}<br />`)
+		.join('');
+
+	return (
+		<div className="lunatic-component-container-test">
+			<div className="lunatic-component-body">{children}</div>
+			<div className="tooltip-lunatic">
+				<span
+					data-for={`${id}-management-tooltip`}
+					data-tip={text}
+					data-multiline
+				>
+					<img id={id} alt="img-tooltip" src={img[imgName]} />
+				</span>
+				<ReactTooltip
+					id={`${id}-management-tooltip`}
+					className="tooltip-text"
+					place="left"
+				/>
+			</div>
+		</div>
+	);
+};
+
+VariableStatus.defaultProps = {
+	response: {},
+};
+
+VariableStatus.propTypes = {
+	id: PropTypes.string,
+};
+
+export default VariableStatus;

package/src/components/{tooltip/tooltip.scss → commons/components/variable-status/variable-status.scss}

@@ -1,12 +1,21 @@
 // Import index once for bundle
 @import 'src/components/index.scss';
 
-.lunatic-component {
+.lunatic-component-container-test {
+	display: flex;
+
+	.lunatic-component-body {
+		width: 80%;
+	}
+
 	/* Tooltip container */
 	.tooltip-lunatic {
+		margin: auto;
+		width: 20%;
 		position: relative;
-		display: inline-block;
-		align-items: center;
+		display: block;
+		margin-left: auto;
+		margin-right: auto;
 	}
 
 	/* Tooltip text */

package/src/components/commons/create-customizable-field.js

@@ -0,0 +1,18 @@
+import React from 'react';
+
+function createCustomizableLunaticField(LunaticField) {
+	const Memoized = React.memo(LunaticField);
+	const { name } = LunaticField;
+
+	return function OverlayField(props) {
+		const { custom, ...rest } = props;
+		if (typeof custom === 'object' && name in custom) {
+			const CustomComponent = custom[name];
+			return <CustomComponent {...rest} />;
+		}
+
+		return <Memoized {...props} />;
+	};
+}
+
+export default createCustomizableLunaticField;

package/src/components/commons/create-row-orchestrator.js

@@ -0,0 +1,48 @@
+import React from 'react';
+
+function createRowOrchestrator(Row) {
+	return function RowOrchestrator({
+		id,
+		components,
+		nbRows,
+		valueMap,
+		handleChange,
+		features,
+		missing,
+		shortcut,
+		preferences,
+		executeExpression,
+		iteration,
+		xAxisIterations,
+		custom,
+	}) {
+		if (nbRows > 0) {
+			return new Array(nbRows).fill(null).map(function (_, index) {
+				const i = Math.trunc(index / xAxisIterations);
+				const j = index % xAxisIterations;
+				return (
+					<Row
+						key={index}
+						id={id}
+						rowIndex={index}
+						components={components}
+						valueMap={valueMap}
+						handleChange={handleChange}
+						executeExpression={executeExpression}
+						iteration={iteration}
+						linksIterations={[i, j]}
+						custom={custom}
+						/** */
+						features={features}
+						shortcut={shortcut}
+						preferences={preferences}
+						missing={missing}
+					/>
+				);
+			});
+		}
+		return null;
+	};
+}
+
+export default createRowOrchestrator;

package/src/components/commons/icons/checkbox-checked.icon.js

@@ -0,0 +1,25 @@
+import React from 'react';
+import LunaticIcon from './lunatic-icon';
+
+function CheckboxCheckedIcon({ className, width = 32, height = 32 }) {
+	return (
+		<LunaticIcon className={className}>
+			<svg
+				xmlns="http://www.w3.org/2000/svg"
+				width={width}
+				height={height}
+				x="0"
+				y="0"
+				enableBackground="new 0 0 32 32"
+				version="1.1"
+				viewBox="0 0 32 32"
+				xmlSpace="preserve"
+			>
+				<path d="M0 0h24v24H0z" fill="none" />
+				<path d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z" />
+			</svg>
+		</LunaticIcon>
+	);
+}
+
+export default CheckboxCheckedIcon;