@inseefr/lunatic 0.2.63 → 0.3.3-experimental

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

@@ -0,0 +1,176 @@
+$colorA: #e9d0d0;
+$colorB: darkred;
+$colorC: #320000;
+$colorD: goldenrod;
+
+@mixin preventSelect() {
+	-moz-user-select: -moz-none;
+	-khtml-user-select: none;
+	-webkit-user-select: none;
+}
+
+@mixin onDrag() {
+	&.drag {
+		box-shadow: $colorD 0px 3px 8px;
+		transition: box-shadow 0.5s;
+	}
+}
+
+.lunatic-suggester-widget-container {
+	&.absolute {
+		position: fixed;
+		z-index: 1;
+	}
+	.lunatic-suggester-widget {
+		position: relative;
+		border: solid $colorB 2px;
+		background-color: $colorA;
+		padding: 4px 4px;
+		border: 2px 2px;
+		width: 400px;
+		box-shadow: $colorC 0px 3px 8px;
+
+		@include onDrag();
+
+		.widget-row {
+			height: 22px;
+			display: flex;
+			flex-direction: row;
+			margin-bottom: 1px;
+			.store-name {
+				width: 60%;
+				color: $colorB;
+				font-size: 18px;
+				white-space: nowrap;
+				overflow-x: hidden;
+			}
+			.stats {
+				color: $colorB;
+				font-size: 18px;
+				white-space: nowrap;
+				overflow-x: hidden;
+				width: 40%;
+			}
+			.widget-button {
+				margin: 0 1px 0 0;
+				padding: 0;
+				border: none;
+				width: 18px;
+				height: 18px;
+				background-color: $colorB;
+
+				&.disabled {
+					background-color: gray;
+					cursor: default;
+				}
+
+				&:hover {
+					background-color: $colorC;
+					transition: background-color 1s;
+					cursor: pointer;
+				}
+
+				.lunatic-suggester-icon {
+					svg {
+						width: 18px;
+						height: 18px;
+						fill: $colorA;
+					}
+				}
+			}
+
+			.lunatic-suggester-loader-progress {
+				height: inherit;
+				border: solid 1px $colorB;
+				border-radius: 2px;
+				width: 70%;
+
+				&.done {
+					&:hover {
+						border-color: $colorC;
+						transition: border-color 1s;
+						.progress {
+							background-color: $colorC;
+							transition: background-color 1s;
+						}
+
+						cursor: pointer;
+					}
+				}
+
+				.content {
+					padding: 2px 2px;
+					height: calc(100%);
+					width: 100%;
+					.progress {
+						background-color: $colorB;
+						height: 100%;
+					}
+				}
+			}
+		}
+
+		.suggester-widget-network {
+			position: absolute;
+			border: solid $colorB 2px;
+			left: 6px;
+			background-color: $colorA;
+			border-radius: 50%;
+			padding: 2px 2px;
+			left: -22px;
+			top: -22px;
+			box-shadow: $colorC 0px 3px 8px;
+
+			&.online {
+				svg {
+					fill: forestgreen;
+				}
+			}
+
+			svg {
+				width: 24px;
+				height: 24px;
+				fill: $colorB;
+			}
+
+			@include onDrag();
+		}
+
+		.lunatic-widget-tools {
+			position: absolute;
+			right: 0;
+			top: -18px;
+			margin-top: -4px;
+
+			.lunatic-action-tool {
+				display: inline-block;
+				height: 18px;
+				width: 18px;
+				background-color: $colorB;
+				border-radius: 50%;
+				margin-left: 2px;
+
+				&:hover {
+					box-shadow: $colorC 0px 3px 8px;
+				}
+
+				&.drag {
+					background-color: $colorD;
+					transition: background-color 0.5s;
+				}
+
+				.on-drag-icon {
+					cursor: grab;
+					&.drag {
+						cursor: grabbing;
+					}
+					svg {
+						width: 16px;
+						height: 16px;
+						fill: $colorA;
+					}
+				}
+			}
+		}
+	}
+}

package/src/components/table/index.js

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

package/src/components/table/table.js

@@ -1,9 +1,11 @@
 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 '../../utils/constants';
+import * as C from '../../constants';
+import { interpret } from '../../utils/to-expose';
 import './table.scss';
 
 const Table = ({
@@ -13,8 +15,16 @@ const Table = ({
 	cells,
 	handleChange,
 	lines: initLines,
+	positioning,
 	declarations,
-	tooltip,
+	features,
+	bindings,
+	addBtnLabel,
+	hideBtn,
+	management,
+	numberAsTextfield,
+	logFunction,
+	...rest
 }) => {
 	const minLines = initLines
 		? Math.max(initLines.min, U.getRosterInitLines(cells))
@@ -22,27 +32,31 @@ const Table = ({
 	const maxLines = initLines ? initLines.max : undefined;
 	const [lines, setLines] = useState(minLines);
 
-	const width = `${100 / Math.max(...cells.map(line => line.length))}%`;
+	const width = `${100 / Math.max(...cells.map((line) => line.length))}%`;
 	const Button = lunatic.Button;
 	return (
-		<React.Fragment>
+		<>
 			<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}`}
 				>
-					{tableLabel}
+					{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>
@@ -66,11 +80,19 @@ const Table = ({
 												style={{ width }}
 											>
 												<Component
-													label={label}
+													{...rest}
+													label={label || ' '}
 													handleChange={handleChange}
 													preferences={preferences}
-													tooltip={tooltip}
+													positioning={positioning}
+													management={management}
+													features={features}
+													bindings={bindings}
 													{...componentProps}
+													zIndex={cells.length - i || 0}
+													numberAsTextfield={numberAsTextfield}
+													logFunction={logFunction}
+													shortcut={false}
 												/>
 											</td>
 										);
@@ -81,10 +103,14 @@ const Table = ({
 										colSpan: colspan || 1,
 										rowSpan: rowspan || 1,
 									};
+									const interpretedLabel = interpret(
+										features,
+										logFunction
+									)(bindings)(label);
 									return headerCell ? (
-										<th {...cellOptions}>{label}</th>
+										<th {...cellOptions}>{interpretedLabel}</th>
 									) : (
-										<td {...cellOptions}>{label}</td>
+										<td {...cellOptions}>{interpretedLabel}</td>
 									);
 								})}
 							</tr>
@@ -92,19 +118,23 @@ const Table = ({
 					)}
 				</tbody>
 			</table>
-			{Number.isInteger(minLines) && lines < maxLines && (
+			{Number.isInteger(minLines) && lines < maxLines && !hideBtn && (
 				<Button
 					label="addLine"
-					value="Add a line"
+					value={addBtnLabel}
 					onClick={() => setLines(lines + 1)}
+					id={tableId}
+					logFunction={logFunction}
 				/>
 			)}
 			<Declarations
 				id={tableId}
 				type={C.DETACHABLE}
 				declarations={declarations}
+				features={features}
+				bindings={bindings}
 			/>
-		</React.Fragment>
+		</>
 	);
 };
 
@@ -113,8 +143,13 @@ Table.defaultProps = {
 	preferences: ['COLLECTED'],
 	cells: [],
 	lines: {},
+	positioning: 'DEFAULT',
 	declarations: [],
-	tooltip: false,
+	features: [],
+	bindings: {},
+	addBtnLabel: 'Add a line',
+	management: false,
+	hideBtn: false,
 	style: {},
 };
 
@@ -125,9 +160,14 @@ Table.propTypes = {
 	cells: PropTypes.array,
 	handleChange: PropTypes.func.isRequired,
 	lines: U.linesPropTypes,
+	positioning: PropTypes.oneOf(['DEFAULT', 'HORIZONTAL', 'VERTICAL']),
 	declarations: U.declarationsPropTypes,
-	tooltip: PropTypes.bool,
+	features: PropTypes.arrayOf(PropTypes.string),
+	bindings: PropTypes.object,
+	addBtnLabel: PropTypes.string,
+	hideBtn: PropTypes.bool,
+	management: PropTypes.bool,
 	style: PropTypes.object,
 };
 
-export default Table;
+export default componentWrapper(React.memo(Table, U.areEqual));

package/src/components/table/table.scss

@@ -1,23 +1,26 @@
-@import 'src/components/index.scss';
-
-.table-lunatic {
-	table-layout: fixed;
-	border-collapse: collapse;
-	margin-top: 0.3em;
-	margin-bottom: 0.3em;
-	& td,
-	th {
-		border: 0.15em solid $main_color;
-		padding: 0.2em;
-		fieldset {
-			margin: none;
-			border: none;
-			.radio-modality {
-				margin-top: 0;
-			}
-			.checkbox-modality {
-				margin-top: 0;
+.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,117 +1,11 @@
-import React, { useEffect, useRef } from 'react';
-import PropTypes from 'prop-types';
-import Declarations from '../declarations';
-import { TooltipResponse } from '../tooltip';
-import * as U from '../../utils/lib';
-import * as C from '../../utils/constants';
+import React from 'react';
+import componentWrapper from '../component-wrapper';
+import { InputDeclarationsWrapper } from '../declarations/wrappers';
+import { areEqual } from '../../utils/lib';
 import './textarea.scss';
 
-const Textarea = ({
-	id,
-	label,
-	preferences,
-	response,
-	placeholder,
-	handleChange,
-	rows,
-	maxLength,
-	readOnly,
-	labelPosition,
-	required,
-	focused,
-	declarations,
-	tooltip,
-	style,
-}) => {
-	const inputRef = useRef();
+const Textarea = (props) => (
+	<InputDeclarationsWrapper type={null} roleType="textarea" {...props} />
+);
 
-	useEffect(() => {
-		if (focused) inputRef.current.focus();
-	}, [focused]);
-
-	return (
-		<div className={U.getLabelPositionClass(labelPosition)}>
-			<Declarations
-				id={id}
-				type={C.BEFORE_QUESTION_TEXT}
-				declarations={declarations}
-			/>
-			{label && (
-				<label
-					htmlFor={`textarea-${id}`}
-					id={`textarea-label-${id}`}
-					className={`${required ? 'required' : ''}`}
-				>
-					{label}
-				</label>
-			)}
-			<Declarations
-				id={id}
-				type={C.AFTER_QUESTION_TEXT}
-				declarations={declarations}
-			/>
-			<div className="field-container">
-				<div className={`${tooltip ? 'field-with-tooltip' : 'field'}`}>
-					<textarea
-						id={`textarea-${id}`}
-						ref={inputRef}
-						placeholder={placeholder}
-						value={U.getResponseByPreference(preferences)(response)}
-						className="textarea-lunatic"
-						style={U.buildStyleObject(style)}
-						rows={rows}
-						maxLength={maxLength}
-						readOnly={readOnly}
-						required={required}
-						aria-required={required}
-						onChange={e =>
-							handleChange({
-								[U.getResponseName(response)]: e.target.value,
-							})
-						}
-					/>
-				</div>
-				{tooltip && (
-					<div className="tooltip">
-						<TooltipResponse id={id} response={response} />
-					</div>
-				)}
-			</div>
-			<Declarations id={id} type={C.DETACHABLE} declarations={declarations} />
-		</div>
-	);
-};
-
-Textarea.defaultProps = {
-	preferences: ['COLLECTED'],
-	response: {},
-	placeholder: '',
-	rows: 5,
-	readOnly: false,
-	labelPosition: 'DEFAULT',
-	required: false,
-	focused: false,
-	declarations: [],
-	tooltip: false,
-	style: {},
-};
-
-Textarea.propTypes = {
-	id: PropTypes.string,
-	label: PropTypes.string,
-	preferences: PropTypes.arrayOf(U.valueTypePropTypes),
-	response: U.responsePropTypes,
-	placeholder: PropTypes.string,
-	handleChange: PropTypes.func.isRequired,
-	rows: PropTypes.number.isRequired,
-	maxLength: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-	readOnly: PropTypes.bool,
-	labelPosition: PropTypes.oneOf(['DEFAULT', 'TOP', 'BOTTOM', 'LEFT', 'RIGHT']),
-	required: PropTypes.bool,
-	focused: PropTypes.bool,
-	declarations: U.declarationsPropTypes,
-	tooltip: PropTypes.bool,
-	style: PropTypes.object,
-};
-
-export default Textarea;
+export default componentWrapper(React.memo(Textarea, areEqual));

package/src/components/textarea/index.js

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

package/src/components/textarea/textarea.scss

@@ -1,16 +1,8 @@
-@import 'src/components/index.scss';
+// see input.scss
 
-.textarea-lunatic {
-	width: 100%;
-	box-sizing: border-box;
-	border: solid 2px $main_color;
-	border-radius: 10px;
-	padding: 5px;
-	&:focus {
-		outline: none;
-		box-shadow: 0 0 10px $main_color;
-	}
-	&:read-only {
-		background-color: $disabled;
+.lunatic-component {
+	.textarea-lunatic {
+		height: 3em;
+		width: 100%;
 	}
 }

package/src/components/tooltip/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/tooltip/index.js

@@ -1 +1 @@
-export { default as TooltipResponse } from './response';
+export { default as TooltipResponse } from './response';

package/src/components/tooltip/response.js

@@ -1,42 +1,52 @@
-import React, { useState, useEffect } from 'react';
-import PropTypes from 'prop-types';
-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;
-	return (
-		<div className="tooltip-lunatic">
-			<img id={id} alt="img-tooltip" src={img[imgName].src || img[imgName]} />
-			<span className="tooltip-text">
-				<ul>
-					{content.map(({ key, value }) => (
-						<li key={`tooltip-${id}-content-${key}`}>{`${key} : ${value}`}</li>
-					))}
-				</ul>
-			</span>
-		</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;