@inseefr/lunatic 0.2.62 → 0.3.0-v2

package/src/components/commons/components/dragger/dragger.scss

@@ -0,0 +1,8 @@
+.lunatic-dragger {
+    display: inline-block;;
+    width: 100%;
+    height: 100%;
+    -moz-user-select: -moz-none;
+	-khtml-user-select: none;
+	-webkit-user-select: none;
+}

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

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

package/src/components/commons/components/fab/fab.js

@@ -0,0 +1,50 @@
+import React from 'react';
+import classnames from 'classnames';
+import PropTypes from 'prop-types';
+import './fab.scss';
+
+function empty() {}
+
+function Fab({
+	className,
+	children,
+	tabIndex,
+	title,
+	onClick,
+	onKeyDown,
+	disabled,
+}) {
+	return (
+		<button
+			className={classnames('lunatic-fab', className)}
+			tabIndex={tabIndex}
+			title={title}
+			onClick={onClick}
+			onKeyDown={onKeyDown}
+			disabled={disabled}
+			aria-label={title}
+		>
+			{children}
+		</button>
+	);
+}
+
+Fab.propTypes = {
+	className: PropTypes.string,
+	tabIndex: PropTypes.string,
+	onClick: PropTypes.func,
+	onKeyDown: PropTypes.func,
+	title: PropTypes.string,
+	disabled: PropTypes.bool,
+};
+
+Fab.defaultProps = {
+	className: undefined,
+	tabIndex: undefined,
+	title: 'Fab',
+	onClick: empty,
+	disabled: false,
+	onKeyDown: empty,
+};
+
+export default Fab;

package/src/components/commons/components/fab/fab.scss

@@ -0,0 +1,32 @@
+.lunatic-fab {
+	width: 32px;
+	height: 32px;
+	border-radius: 50%;
+	margin: 0;
+	padding: 0;
+	outline: inherit;
+	border: none;
+	background-color: royalblue;
+	box-shadow: 0px 3px 5px -1px rgb(0 0 0 / 20%),
+		0px 6px 10px 0px rgb(0 0 0 / 14%), 0px 1px 18px 0px rgb(0 0 0 / 12%);
+
+	&:hover {
+		cursor: pointer;
+		background-color: navy;
+		transition: background-color 1s;
+	}
+
+	&.mini {
+		width: 18px;
+		height: 18px;
+	}
+
+	&:focus {
+		border: solid 1px black;
+	}
+
+	&:disabled {
+		cursor: default;
+		background-color: darkgray;
+	}
+}

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

@@ -0,0 +1 @@
+export { default as Fab } from './fab';

package/src/components/commons/components/field-container/field-container.js

@@ -0,0 +1,28 @@
+import React from 'react';
+import classnames from 'classnames';
+import './field-container.scss';
+
+function Tooltip({ management }) {
+	if (management) {
+		return <div className="tooltip"></div>;
+	}
+	return null;
+}
+
+function FieldContainer({ children, management, value, id }) {
+	return (
+		<div className="field-container">
+			<div
+				className={classnames({
+					'field-with-tooltip': management,
+					field: !management,
+				})}
+			>
+				{children}
+			</div>
+			<Tooltip management={management} value={value} id={id} />
+		</div>
+	);
+}
+
+export default FieldContainer;

package/src/components/commons/components/field-container/index.js

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

package/src/components/commons/components/fieldset.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import createCustomizableLunaticField from '../../commons/create-customizable-field';
+import safetyLabel from '../safety-label';
+
+function Fieldset({ children, legend }) {
+	return (
+		<fieldset>
+			<legend>{safetyLabel(legend)}</legend>
+			{children}
+		</fieldset>
+	);
+}
+
+export default createCustomizableLunaticField(Fieldset);

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

@@ -0,0 +1,6 @@
+export { default as Table } from './table.js';
+export { default as Tbody } from './tbody.js';
+export { default as Td } from './td.js';
+export { default as Th } from './th.js';
+export { default as Thead } from './thead.js';
+export { default as Tr } from './tr.js';

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

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,27 @@
+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/index.js

@@ -0,0 +1 @@
+export { default as IsNetwork } from './is-network';

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

@@ -0,0 +1,39 @@
+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/is-network/use-online-status.js

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

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

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

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