@inseefr/lunatic 0.2.63 → 0.3.0-prisme

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,133 +1,173 @@
-import React, { useState } from 'react';
-import PropTypes from 'prop-types';
-import * as lunatic from '../components';
-import Declarations from '../declarations';
-import * as U from '../../utils/lib';
-import * as C from '../../utils/constants';
-import './table.scss';
-
-const Table = ({
-	id: tableId,
-	label: tableLabel,
-	preferences,
-	cells,
-	handleChange,
-	lines: initLines,
-	declarations,
-	tooltip,
-}) => {
-	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 (
-		<React.Fragment>
-			<Declarations
-				id={tableId}
-				type={C.BEFORE_QUESTION_TEXT}
-				declarations={declarations}
-			/>
-			{tableLabel && (
-				<label
-					htmlFor={`table-one-axis-${tableId}`}
-					id={`table-one-axis-label-${tableId}`}
-				>
-					{tableLabel}
-				</label>
-			)}
-			<Declarations
-				id={tableId}
-				type={C.AFTER_QUESTION_TEXT}
-				declarations={declarations}
-			/>
-			<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}
-													tooltip={tooltip}
-													{...componentProps}
-												/>
-											</td>
-										);
-									}
-									const cellOptions = {
-										key: `table-${tableId}-line${i}-cell-${j}`,
-										style: { width },
-										colSpan: colspan || 1,
-										rowSpan: rowspan || 1,
-									};
-									return headerCell ? (
-										<th {...cellOptions}>{label}</th>
-									) : (
-										<td {...cellOptions}>{label}</td>
-									);
-								})}
-							</tr>
-						)
-					)}
-				</tbody>
-			</table>
-			{Number.isInteger(minLines) && lines < maxLines && (
-				<Button
-					label="addLine"
-					value="Add a line"
-					onClick={() => setLines(lines + 1)}
-				/>
-			)}
-			<Declarations
-				id={tableId}
-				type={C.DETACHABLE}
-				declarations={declarations}
-			/>
-		</React.Fragment>
-	);
-};
-
-Table.defaultProps = {
-	label: '',
-	preferences: ['COLLECTED'],
-	cells: [],
-	lines: {},
-	declarations: [],
-	tooltip: 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,
-	declarations: U.declarationsPropTypes,
-	tooltip: PropTypes.bool,
-	style: PropTypes.object,
-};
-
-export default Table;
+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,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 './textarea.scss';
-
-const Textarea = ({
-	id,
-	label,
-	preferences,
-	response,
-	placeholder,
-	handleChange,
-	rows,
-	maxLength,
-	readOnly,
-	labelPosition,
-	required,
-	focused,
-	declarations,
-	tooltip,
-	style,
-}) => {
-	const inputRef = useRef();
-
-	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;
+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));

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';
-
-.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;
-	}
-}
+// see input.scss
+
+.lunatic-component {
+	.textarea-lunatic {
+		height: 3em;
+		width: 100%;
+	}
+}