@inseefr/lunatic 0.2.3-experimental → 0.2.3-prisme

package/src/components/suggester-loader-widget/widget.js

@@ -1,123 +1,123 @@
-import React, { useEffect, useState, useCallback, useRef } from 'react';
-import PropTypes from 'prop-types';
-import classnames from 'classnames';
-import LoaderRow from './loader-row';
-import { Tools, ActionTool } from './tools';
-import { IsNetwork } from '../../utils/components/is-network';
-import WidgetContainer from './widget-container';
-import Dragger from '../../utils/components/dragger';
-import OnDragIcon from '../../utils/icons/on-drag.icon';
-import './widget.scss';
-
-function empty() {}
-
-function SuggesterLoaderWidget({ source, getStoreInfo, onRefresh, absolute }) {
-	const { suggesters } = source;
-	const containerEl = useRef();
-	const { current } = containerEl;
-	const [stores, setStores] = useState(undefined);
-	const [rows, setRows] = useState([]);
-	const [disabled, setDisabled] = useState(false);
-	const [drag, setDrag] = useState(false);
-
-	useEffect(
-		function () {
-			if (suggesters) {
-				const str = suggesters.reduce(function (current, storeInfo) {
-					const { name } = storeInfo;
-
-					return { ...current, [name]: { storeInfo, ...getStoreInfo(name) } };
-				}, {});
-
-				setStores(str);
-			}
-		},
-		[suggesters, getStoreInfo]
-	);
-
-	const notify = useCallback(function (online) {
-		setDisabled(!online);
-	}, []);
-
-	const onDrag = useCallback(
-		function (status) {
-			if (!drag && status) {
-				setDrag(true);
-			} else if (drag && !status) {
-				setDrag(false);
-			}
-		},
-		[drag]
-	);
-
-	useEffect(
-		function () {
-			if (stores) {
-				setRows(
-					Object.entries(stores).map(function ([
-						name,
-						{ storeInfo, idbVersion, fetch: fetchStore },
-					]) {
-						return (
-							<LoaderRow
-								key={name}
-								storeInfo={storeInfo}
-								idbVersion={idbVersion}
-								fetchStore={fetchStore}
-								onRefresh={onRefresh}
-								disabled={disabled}
-							/>
-						);
-					})
-				);
-			}
-		},
-		[stores, disabled, onRefresh]
-	);
-
-	useEffect(
-		function () {
-			if (current && absolute) {
-				current.style.top = '30px';
-				current.style.left = '30px';
-			}
-		},
-		[current, absolute]
-	);
-
-	return (
-		<WidgetContainer ref={containerEl} drag={drag} absolute={absolute}>
-			<Tools>
-				<ActionTool
-					className={classnames('', { drag })}
-					ariaLabel="drag"
-					display={absolute}
-					title="drag"
-				>
-					<Dragger el={current} onDrag={onDrag}>
-						<OnDragIcon className={classnames('on-drag-icon', { drag })} />
-					</Dragger>
-				</ActionTool>
-			</Tools>
-			<IsNetwork
-				className={classnames('suggester-widget-network', { drag })}
-				notify={notify}
-			/>
-			{rows}
-		</WidgetContainer>
-	);
-}
-
-SuggesterLoaderWidget.propTypes = {
-	absolute: PropTypes.bool,
-	source: PropTypes.object.isRequired,
-	getStoreInfo: PropTypes.func.isRequired,
-	onRefresh: PropTypes.func,
-};
-
-SuggesterLoaderWidget.defaultProps = {
-	onRefresh: empty,
-	absolute: false,
-};
-
-export default SuggesterLoaderWidget;
+import React, { useEffect, useState, useCallback, useRef } from 'react';
+import PropTypes from 'prop-types';
+import classnames from 'classnames';
+import LoaderRow from './loader-row';
+import { Tools, ActionTool } from './tools';
+import { IsNetwork } from '../../utils/components/is-network';
+import WidgetContainer from './widget-container';
+import Dragger from '../../utils/components/dragger';
+import OnDragIcon from '../../utils/icons/on-drag.icon';
+import './widget.scss';
+
+function empty() {}
+
+function SuggesterLoaderWidget({ source, getStoreInfo, onRefresh, absolute }) {
+	const { suggesters } = source;
+	const containerEl = useRef();
+	const { current } = containerEl;
+	const [stores, setStores] = useState(undefined);
+	const [rows, setRows] = useState([]);
+	const [disabled, setDisabled] = useState(false);
+	const [drag, setDrag] = useState(false);
+
+	useEffect(
+		function () {
+			if (suggesters) {
+				const str = suggesters.reduce(function (current, storeInfo) {
+					const { name } = storeInfo;
+
+					return { ...current, [name]: { storeInfo, ...getStoreInfo(name) } };
+				}, {});
+
+				setStores(str);
+			}
+		},
+		[suggesters, getStoreInfo]
+	);
+
+	const notify = useCallback(function (online) {
+		setDisabled(!online);
+	}, []);
+
+	const onDrag = useCallback(
+		function (status) {
+			if (!drag && status) {
+				setDrag(true);
+			} else if (drag && !status) {
+				setDrag(false);
+			}
+		},
+		[drag]
+	);
+
+	useEffect(
+		function () {
+			if (stores) {
+				setRows(
+					Object.entries(stores).map(function ([
+						name,
+						{ storeInfo, idbVersion, fetch: fetchStore },
+					]) {
+						return (
+							<LoaderRow
+								key={name}
+								storeInfo={storeInfo}
+								idbVersion={idbVersion}
+								fetchStore={fetchStore}
+								onRefresh={onRefresh}
+								disabled={disabled}
+							/>
+						);
+					})
+				);
+			}
+		},
+		[stores, disabled, onRefresh]
+	);
+
+	useEffect(
+		function () {
+			if (current && absolute) {
+				current.style.top = '30px';
+				current.style.left = '30px';
+			}
+		},
+		[current, absolute]
+	);
+
+	return (
+		<WidgetContainer ref={containerEl} drag={drag} absolute={absolute}>
+			<Tools>
+				<ActionTool
+					className={classnames('', { drag })}
+					ariaLabel="drag"
+					display={absolute}
+					title="drag"
+				>
+					<Dragger el={current} onDrag={onDrag}>
+						<OnDragIcon className={classnames('on-drag-icon', { drag })} />
+					</Dragger>
+				</ActionTool>
+			</Tools>
+			<IsNetwork
+				className={classnames('suggester-widget-network', { drag })}
+				notify={notify}
+			/>
+			{rows}
+		</WidgetContainer>
+	);
+}
+
+SuggesterLoaderWidget.propTypes = {
+	absolute: PropTypes.bool,
+	source: PropTypes.object.isRequired,
+	getStoreInfo: PropTypes.func.isRequired,
+	onRefresh: PropTypes.func,
+};
+
+SuggesterLoaderWidget.defaultProps = {
+	onRefresh: empty,
+	absolute: false,
+};
+
+export default SuggesterLoaderWidget;

package/src/components/table/table.js

@@ -1,171 +1,173 @@
-import React, { useState } from 'react';
-import PropTypes from 'prop-types';
-import missingWrapper from '../missing-wrapper';
-import * as lunatic from '../components';
-import Declarations from '../declarations';
-import * as U from '../../utils/lib';
-import * as C from '../../constants';
-import { interpret } from '../../utils/to-expose';
-import './table.scss';
-
-const Table = ({
-	id: tableId,
-	label: tableLabel,
-	preferences,
-	cells,
-	handleChange,
-	lines: initLines,
-	positioning,
-	declarations,
-	features,
-	bindings,
-	addBtnLabel,
-	hideBtn,
-	management,
-	numberAsTextfield,
-	logFunction,
-}) => {
-	const minLines = initLines
-		? Math.max(initLines.min, U.getRosterInitLines(cells))
-		: undefined;
-	const maxLines = initLines ? initLines.max : undefined;
-	const [lines, setLines] = useState(minLines);
-
-	const width = `${100 / Math.max(...cells.map((line) => line.length))}%`;
-	const Button = lunatic.Button;
-	return (
-		<>
-			<Declarations
-				id={tableId}
-				type={C.BEFORE_QUESTION_TEXT}
-				declarations={declarations}
-				features={features}
-				bindings={bindings}
-			/>
-			{tableLabel && (
-				<label
-					htmlFor={`table-one-axis-${tableId}`}
-					id={`table-one-axis-label-${tableId}`}
-				>
-					{interpret(features, logFunction)(bindings)(tableLabel)}
-				</label>
-			)}
-			<Declarations
-				id={tableId}
-				type={C.AFTER_QUESTION_TEXT}
-				declarations={declarations}
-				features={features}
-				bindings={bindings}
-			/>
-			<table id={`table-${tableId}`} className="table-lunatic">
-				<tbody>
-					{(minLines || minLines === 0 ? cells.slice(0, lines + 1) : cells).map(
-						(line, i) => (
-							<tr key={`table-${tableId}-line${i}`}>
-								{line.map((component, j) => {
-									const {
-										label,
-										headerCell,
-										colspan,
-										rowspan,
-										componentType,
-										...componentProps
-									} = component;
-									if (componentType) {
-										const Component = lunatic[componentType];
-										return (
-											<td
-												key={`table-${tableId}-line${i}-cell-${j}`}
-												style={{ width }}
-											>
-												<Component
-													label={label || ' '}
-													handleChange={handleChange}
-													preferences={preferences}
-													positioning={positioning}
-													management={management}
-													features={features}
-													bindings={bindings}
-													{...componentProps}
-													zIndex={cells.length - i || 0}
-													numberAsTextfield
-													logFunction={logFunction}
-													shortcut={false}
-												/>
-											</td>
-										);
-									}
-									const cellOptions = {
-										key: `table-${tableId}-line${i}-cell-${j}`,
-										style: { width },
-										colSpan: colspan || 1,
-										rowSpan: rowspan || 1,
-									};
-									const interpretedLabel = interpret(
-										features,
-										logFunction
-									)(bindings)(label);
-									return headerCell ? (
-										<th {...cellOptions}>{interpretedLabel}</th>
-									) : (
-										<td {...cellOptions}>{interpretedLabel}</td>
-									);
-								})}
-							</tr>
-						)
-					)}
-				</tbody>
-			</table>
-			{Number.isInteger(minLines) && lines < maxLines && !hideBtn && (
-				<Button
-					label="addLine"
-					value={addBtnLabel}
-					onClick={() => setLines(lines + 1)}
-					id={tableId}
-					logFunction={logFunction}
-				/>
-			)}
-			<Declarations
-				id={tableId}
-				type={C.DETACHABLE}
-				declarations={declarations}
-				features={features}
-				bindings={bindings}
-			/>
-		</>
-	);
-};
-
-Table.defaultProps = {
-	label: '',
-	preferences: ['COLLECTED'],
-	cells: [],
-	lines: {},
-	positioning: 'DEFAULT',
-	declarations: [],
-	features: [],
-	bindings: {},
-	addBtnLabel: 'Add a line',
-	management: false,
-	hideBtn: false,
-	style: {},
-};
-
-Table.propTypes = {
-	id: PropTypes.string.isRequired,
-	label: PropTypes.string,
-	preferences: PropTypes.arrayOf(U.valueTypePropTypes),
-	cells: PropTypes.array,
-	handleChange: PropTypes.func.isRequired,
-	lines: U.linesPropTypes,
-	positioning: PropTypes.oneOf(['DEFAULT', 'HORIZONTAL', 'VERTICAL']),
-	declarations: U.declarationsPropTypes,
-	features: PropTypes.arrayOf(PropTypes.string),
-	bindings: PropTypes.object,
-	addBtnLabel: PropTypes.string,
-	hideBtn: PropTypes.bool,
-	management: PropTypes.bool,
-	style: PropTypes.object,
-};
-
-export default missingWrapper(React.memo(Table), U.areEqual);
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import componentWrapper from '../component-wrapper';
+import * as lunatic from '../components';
+import Declarations from '../declarations';
+import * as U from '../../utils/lib';
+import * as C from '../../constants';
+import { interpret } from '../../utils/to-expose';
+import './table.scss';
+
+const Table = ({
+	id: tableId,
+	label: tableLabel,
+	preferences,
+	cells,
+	handleChange,
+	lines: initLines,
+	positioning,
+	declarations,
+	features,
+	bindings,
+	addBtnLabel,
+	hideBtn,
+	management,
+	numberAsTextfield,
+	logFunction,
+	...rest
+}) => {
+	const minLines = initLines
+		? Math.max(initLines.min, U.getRosterInitLines(cells))
+		: undefined;
+	const maxLines = initLines ? initLines.max : undefined;
+	const [lines, setLines] = useState(minLines);
+
+	const width = `${100 / Math.max(...cells.map((line) => line.length))}%`;
+	const Button = lunatic.Button;
+	return (
+		<>
+			<Declarations
+				id={tableId}
+				type={C.BEFORE_QUESTION_TEXT}
+				declarations={declarations}
+				features={features}
+				bindings={bindings}
+			/>
+			{tableLabel && (
+				<label
+					htmlFor={`table-one-axis-${tableId}`}
+					id={`table-one-axis-label-${tableId}`}
+				>
+					{interpret(features, logFunction)(bindings)(tableLabel)}
+				</label>
+			)}
+			<Declarations
+				id={tableId}
+				type={C.AFTER_QUESTION_TEXT}
+				declarations={declarations}
+				features={features}
+				bindings={bindings}
+			/>
+			<table id={`table-${tableId}`} className="table-lunatic">
+				<tbody>
+					{(minLines || minLines === 0 ? cells.slice(0, lines + 1) : cells).map(
+						(line, i) => (
+							<tr key={`table-${tableId}-line${i}`}>
+								{line.map((component, j) => {
+									const {
+										label,
+										headerCell,
+										colspan,
+										rowspan,
+										componentType,
+										...componentProps
+									} = component;
+									if (componentType) {
+										const Component = lunatic[componentType];
+										return (
+											<td
+												key={`table-${tableId}-line${i}-cell-${j}`}
+												style={{ width }}
+											>
+												<Component
+													{...rest}
+													label={label || ' '}
+													handleChange={handleChange}
+													preferences={preferences}
+													positioning={positioning}
+													management={management}
+													features={features}
+													bindings={bindings}
+													{...componentProps}
+													zIndex={cells.length - i || 0}
+													numberAsTextfield={numberAsTextfield}
+													logFunction={logFunction}
+													shortcut={false}
+												/>
+											</td>
+										);
+									}
+									const cellOptions = {
+										key: `table-${tableId}-line${i}-cell-${j}`,
+										style: { width },
+										colSpan: colspan || 1,
+										rowSpan: rowspan || 1,
+									};
+									const interpretedLabel = interpret(
+										features,
+										logFunction
+									)(bindings)(label);
+									return headerCell ? (
+										<th {...cellOptions}>{interpretedLabel}</th>
+									) : (
+										<td {...cellOptions}>{interpretedLabel}</td>
+									);
+								})}
+							</tr>
+						)
+					)}
+				</tbody>
+			</table>
+			{Number.isInteger(minLines) && lines < maxLines && !hideBtn && (
+				<Button
+					label="addLine"
+					value={addBtnLabel}
+					onClick={() => setLines(lines + 1)}
+					id={tableId}
+					logFunction={logFunction}
+				/>
+			)}
+			<Declarations
+				id={tableId}
+				type={C.DETACHABLE}
+				declarations={declarations}
+				features={features}
+				bindings={bindings}
+			/>
+		</>
+	);
+};
+
+Table.defaultProps = {
+	label: '',
+	preferences: ['COLLECTED'],
+	cells: [],
+	lines: {},
+	positioning: 'DEFAULT',
+	declarations: [],
+	features: [],
+	bindings: {},
+	addBtnLabel: 'Add a line',
+	management: false,
+	hideBtn: false,
+	style: {},
+};
+
+Table.propTypes = {
+	id: PropTypes.string.isRequired,
+	label: PropTypes.string,
+	preferences: PropTypes.arrayOf(U.valueTypePropTypes),
+	cells: PropTypes.array,
+	handleChange: PropTypes.func.isRequired,
+	lines: U.linesPropTypes,
+	positioning: PropTypes.oneOf(['DEFAULT', 'HORIZONTAL', 'VERTICAL']),
+	declarations: U.declarationsPropTypes,
+	features: PropTypes.arrayOf(PropTypes.string),
+	bindings: PropTypes.object,
+	addBtnLabel: PropTypes.string,
+	hideBtn: PropTypes.bool,
+	management: PropTypes.bool,
+	style: PropTypes.object,
+};
+
+export default componentWrapper(React.memo(Table, U.areEqual));

package/src/components/table/table.scss

@@ -1,26 +1,26 @@
-.lunatic-component {
-	.table-lunatic {
-		table-layout: fixed;
-		border-collapse: collapse;
-		margin-top: 0.3em;
-		margin-bottom: 0.3em;
-		& td,
-		th {
-			border: 0.15em solid var(--color-primary-dark);
-			padding: 0.2em;
-		}
-		& td {
-			.field,
-			.field-with-tooltip {
-				display: flex;
-				justify-content: center;
-				align-items: center;
-			}
-		}
-	}
-
-	.table-lunatic .tooltip-lunatic img {
-		height: 20px;
-		width: 20px;
-	}
-}
+.lunatic-component {
+	.table-lunatic {
+		table-layout: fixed;
+		border-collapse: collapse;
+		margin-top: 0.3em;
+		margin-bottom: 0.3em;
+		& td,
+		th {
+			border: 0.15em solid var(--color-primary-dark);
+			padding: 0.2em;
+		}
+		& td {
+			.field,
+			.field-with-tooltip {
+				display: flex;
+				justify-content: center;
+				align-items: center;
+			}
+		}
+	}
+
+	.table-lunatic .tooltip-lunatic img {
+		height: 20px;
+		width: 20px;
+	}
+}

package/src/components/textarea/component.js

@@ -1,11 +1,11 @@
-import React from 'react';
-import missingWrapper from '../missing-wrapper';
-import { InputDeclarationsWrapper } from '../declarations/wrappers';
-import { areEqual } from '../../utils/lib';
-import './textarea.scss';
-
-const Textarea = (props) => (
-	<InputDeclarationsWrapper type={null} roleType="textarea" {...props} />
-);
-
-export default missingWrapper(React.memo(Textarea, areEqual));
+import React from 'react';
+import componentWrapper from '../component-wrapper';
+import { InputDeclarationsWrapper } from '../declarations/wrappers';
+import { areEqual } from '../../utils/lib';
+import './textarea.scss';
+
+const Textarea = (props) => (
+	<InputDeclarationsWrapper type={null} roleType="textarea" {...props} />
+);
+
+export default componentWrapper(React.memo(Textarea, areEqual));