@inseefr/lunatic 0.2.0-v2 → 0.2.1-prisme

package/src/components/commons/components/html-table/tr.js

@@ -1,27 +0,0 @@
-import React from 'react';
-import classnames from 'classnames';
-import PropTypes from 'prop-types';
-import createCustomizableLunaticField from '../../create-customizable-field';
-
-function Tr({ id, children, className, row }) {
-	return (
-		<tr
-			id={`lunatic-table-tr-${id}-${row}`}
-			className={classnames('lunatic-table-tr', className)}
-		>
-			{children}
-		</tr>
-	);
-}
-
-Tr.propTypes = {
-	id: PropTypes.string.isRequired,
-	row: PropTypes.number.isRequired,
-	className: PropTypes.string,
-};
-
-Tr.defaultProps = {
-	className: undefined,
-};
-
-export default createCustomizableLunaticField(Tr);

package/src/components/commons/components/is-network/is-network.js

@@ -1,39 +0,0 @@
-import React, { useCallback, useState } from 'react';
-import classnames from 'classnames';
-import useOnlineStatus from './use-online-status';
-import { NetworkIcon } from 'components/commons/icons';
-
-function getTitle(online) {
-	return `Network ${online ? 'on' : 'off'}`;
-}
-
-function IsNetwork({ notify = () => null, className }) {
-	const [online, setOnline] = useState(window.navigator.onLine);
-	const onlineCallback = useCallback(
-		function () {
-			setOnline(true);
-			notify(true);
-		},
-		[notify]
-	);
-	const offlineCallback = useCallback(
-		function () {
-			setOnline(false);
-			notify(false);
-		},
-		[notify]
-	);
-
-	useOnlineStatus(onlineCallback, offlineCallback);
-
-	return (
-		<div
-			className={classnames('is-network', className, { online })}
-			title={getTitle(online)}
-		>
-			<NetworkIcon />
-		</div>
-	);
-}
-
-export default IsNetwork;

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

@@ -1,15 +0,0 @@
-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

@@ -1,55 +0,0 @@
-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,
-	} = props;
-
-	return (
-		<VariableStatus>
-			<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} />}
-		</VariableStatus>
-	);
-}
-
-export default LunaticComponent;

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

@@ -1,45 +0,0 @@
-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,
-	} = props;
-
-	return (
-		<VariableStatus>
-			<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} />}
-		</VariableStatus>
-	);
-}
-
-export default LunaticFieldsetComponent;

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

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

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

@@ -1,54 +0,0 @@
-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

@@ -1,21 +0,0 @@
-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

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

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

@@ -1,81 +0,0 @@
-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/nothing-to-display.js

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

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

@@ -1,57 +0,0 @@
-import React, { useState, useEffect } 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,
-	executeExpression,
-	custom,
-}) {
-	const { componentType } = component;
-	const [componentFilled, setComponentFilled] = useState(component);
-	const Component = lunatic[componentType];
-	const [filled, setFilled] = useState(false);
-
-	useEffect(
-		function () {
-			setComponentFilled(
-				fillComponentExpressions(component, {
-					executeExpression,
-					pager: { iteration },
-				})
-			);
-			setFilled(true);
-		},
-		[component, executeExpression, iteration]
-	);
-
-	if (componentType in lunatic && filled) {
-		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/commons/components/variable-status/index.js

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

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

@@ -1,54 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import PropTypes from 'prop-types';
-import ReactTooltip from 'react-tooltip';
-import * as img from './img';
-import './variable-status.scss';
-
-const VariableResponse = ({ id, response, children }) => {
-	const [tooltipElements, setTooltipElements] = useState(() => ({
-		imgName: 'editedImg',
-		content: [{ key: 'bla bla', value: 'toto' }],
-	}));
-
-	// 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>
-	);
-};
-
-VariableResponse.defaultProps = {
-	response: {},
-};
-
-VariableResponse.propTypes = {
-	id: PropTypes.string,
-};
-
-export default VariableResponse;

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

@@ -1,39 +0,0 @@
-// Import index once for bundle
-@import 'src/components/index.scss';
-
-.lunatic-component-container-test {
-	display: flex;
-
-	.lunatic-component-body {
-		width: 80%;
-	}
-
-	/* Tooltip container */
-	.tooltip-lunatic {
-		margin: auto;
-		width: 20%;
-		position: relative;
-		display: block;
-		margin-left: auto;
-		margin-right: auto;
-	}
-
-	/* Tooltip text */
-	.tooltip-lunatic .tooltip-text {
-		min-width: 10em;
-		max-width: 20em;
-		background-color: var(--color-primary-dark);
-		color: #fff;
-		padding: 0.5em;
-		border-radius: 6px;
-		font-size: 1em;
-		&.place-left {
-			&::before {
-				border-left: 10px solid var(--color-primary-dark);
-			}
-			&::after {
-				content: none;
-			}
-		}
-	}
-}

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

@@ -1,18 +0,0 @@
-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

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

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

@@ -1,25 +0,0 @@
-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;

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

@@ -1,25 +0,0 @@
-import React from 'react';
-import LunaticIcon from './lunatic-icon';
-
-function CheckboxUncheckedIcon({ 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="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z" />
-				<path d="M0 0h24v24H0z" fill="none" />
-			</svg>
-		</LunaticIcon>
-	);
-}
-
-export default CheckboxUncheckedIcon;

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

@@ -1,10 +0,0 @@
-export { default as CrossIcon } from './cross.icon';
-export { default as ClosedIcon } from './closed.icon';
-export { default as OpenedIcon } from './opened.icon';
-export { default as LoadIcon } from './load.icon';
-export { default as NetworkIcon } from './network.icon';
-export { default as OnDragIcon } from './on-drag.icon';
-export { default as RadioChecked } from './radio-checked.icon';
-export { default as RadioUnchecked } from './radio-unchecked.icon';
-export { default as CheckboxChecked } from './checkbox-checked.icon';
-export { default as CheckboxUnchecked } from './checkbox-unchecked.icon';

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

@@ -1,25 +0,0 @@
-import React from 'react';
-import LunaticIcon from './lunatic-icon';
-
-function RadioCheckedIcon({ 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="M12 7c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5zm0-5C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z" />
-				<path d="M0 0h24v24H0z" fill="none" />
-			</svg>
-		</LunaticIcon>
-	);
-}
-
-export default RadioCheckedIcon;