@inseefr/lunatic 0.2.3-experimental → 0.2.3-prisme

package/src/components/checkbox/boolean.js

@@ -1,172 +1,172 @@
-import React, { useState, useEffect, useRef } from 'react';
-import PropTypes from 'prop-types';
-import missingWrapper from '../missing-wrapper';
-import debounce from 'lodash.debounce';
-import Declarations from '../declarations';
-import Icon from '../icon';
-import { TooltipResponse } from '../tooltip';
-import * as U from '../../utils/lib';
-import * as C from '../../constants';
-import { interpret } from '../../utils/to-expose';
-import './checkbox.scss';
-
-const CheckboxBoolean = ({
-	id,
-	label,
-	preferences,
-	response,
-	handleChange: propsHandleChange,
-	disabled,
-	positioning,
-	focused,
-	declarations,
-	features,
-	bindings,
-	management,
-	style,
-	logFunction,
-}) => {
-	const inputRef = useRef();
-
-	const [value, setValue] = useState(() =>
-		U.getResponseByPreference(preferences)(response)
-	);
-
-	const handleChange = debounce((obj) => propsHandleChange(obj), 50);
-
-	const specificHandleChange = (e) => {
-		const [key, value] = Object.entries(e)[0];
-		if (value === false && U.responseToClean(response)(preferences))
-			handleChange({ [key]: null });
-		else handleChange(e);
-	};
-
-	// Assume we only want to handle enable external updates
-	// Don't need to check all value changes
-	useEffect(() => {
-		if (U.getResponseByPreference(preferences)(response) !== value)
-			setValue(U.getResponseByPreference(preferences)(response));
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [response, preferences]);
-
-	useEffect(() => {
-		if (focused) inputRef.current.focus();
-	}, [focused]);
-
-	const interpretedLabel = interpret(features, logFunction)(bindings)(label);
-
-	const isVertical = positioning === 'VERTICAL';
-	const isHorizontal = positioning === 'HORIZONTAL';
-	const input = (
-		<>
-			<Icon type="checkbox" checked={value} disabled={disabled}>
-				<input
-					type="checkbox"
-					id={`checkbox-boolean-${id}`}
-					ref={inputRef}
-					title={interpretedLabel ? interpretedLabel : 'empty-label'}
-					className={`checkbox-boolean-lunatic`}
-					style={U.buildStyleObject(style)}
-					checked={value || false}
-					disabled={disabled}
-					onChange={({ target: { checked } }) => {
-						setValue(checked);
-						specificHandleChange({
-							[U.getResponseName(response)]: checked,
-						});
-						if (U.isFunction(logFunction))
-							logFunction(
-								U.createObjectEvent(
-									`checkbox-boolean-${id}`,
-									C.INPUT_CATEGORY,
-									C.EVENT_SELECTION,
-									U.getResponseName(response),
-									checked
-								)
-							);
-					}}
-				/>
-				{interpretedLabel && (
-					<label htmlFor={`checkbox-boolean-${id}`}>
-						{isHorizontal ? interpretedLabel : ''}
-					</label>
-				)}
-			</Icon>
-		</>
-	);
-	return (
-		<div key={`checkbox-boolean-${id}`} className={`checkbox-boolean-modality`}>
-			<Declarations
-				id={id}
-				type={C.BEFORE_QUESTION_TEXT}
-				declarations={declarations}
-				features={features}
-				bindings={bindings}
-			/>
-			{label && !isHorizontal && (
-				<label htmlFor={`checkbox-boolean-${id}`}>
-					{interpret(features, logFunction)(bindings)(label)}
-				</label>
-			)}
-			<Declarations
-				id={id}
-				type={C.AFTER_QUESTION_TEXT}
-				declarations={declarations}
-				features={features}
-				bindings={bindings}
-			/>
-			<div className="field-container">
-				<div className={`${management ? 'field-with-tooltip' : 'field'}`}>
-					{isVertical ? <div>{input}</div> : input}
-				</div>
-				{management && (
-					<div className="tooltip">
-						<TooltipResponse
-							id={id}
-							response={U.buildBooleanTooltipResponse(response)}
-						/>
-					</div>
-				)}
-			</div>
-			<Declarations
-				id={id}
-				type={C.DETACHABLE}
-				declarations={declarations}
-				features={features}
-				bindings={bindings}
-			/>
-		</div>
-	);
-};
-
-CheckboxBoolean.defaultProps = {
-	label: '',
-	preferences: ['COLLECTED'],
-	response: {},
-	disabled: false,
-	positioning: 'DEFAULT',
-	focused: false,
-	declarations: [],
-	features: [],
-	bindings: {},
-	management: false,
-	style: {},
-};
-
-CheckboxBoolean.propTypes = {
-	id: PropTypes.string.isRequired,
-	label: PropTypes.string,
-	preferences: PropTypes.arrayOf(U.valueTypePropTypes),
-	response: U.responsePropTypes,
-	handleChange: PropTypes.func.isRequired,
-	disabled: PropTypes.bool,
-	positioning: PropTypes.oneOf(['DEFAULT', 'HORIZONTAL', 'VERTICAL']),
-	focused: PropTypes.bool,
-	declarations: U.declarationsPropTypes,
-	features: PropTypes.arrayOf(PropTypes.string),
-	bindings: PropTypes.object,
-	management: PropTypes.bool,
-	style: PropTypes.object,
-};
-
-export default missingWrapper(React.memo(CheckboxBoolean, U.areEqual));
+import React, { useState, useEffect, useRef } from 'react';
+import PropTypes from 'prop-types';
+import componentWrapper from '../component-wrapper';
+import debounce from 'lodash.debounce';
+import Declarations from '../declarations';
+import Icon from '../icon';
+import { TooltipResponse } from '../tooltip';
+import * as U from '../../utils/lib';
+import * as C from '../../constants';
+import { interpret } from '../../utils/to-expose';
+import './checkbox.scss';
+
+const CheckboxBoolean = ({
+	id,
+	label,
+	preferences,
+	response,
+	handleChange: propsHandleChange,
+	disabled,
+	positioning,
+	focused,
+	declarations,
+	features,
+	bindings,
+	management,
+	style,
+	logFunction,
+}) => {
+	const inputRef = useRef();
+
+	const [value, setValue] = useState(() =>
+		U.getResponseByPreference(preferences)(response)
+	);
+
+	const handleChange = debounce((obj) => propsHandleChange(obj), 50);
+
+	const specificHandleChange = (e) => {
+		const [key, value] = Object.entries(e)[0];
+		if (value === false && U.responseToClean(response)(preferences))
+			handleChange({ [key]: null });
+		else handleChange(e);
+	};
+
+	// Assume we only want to handle enable external updates
+	// Don't need to check all value changes
+	useEffect(() => {
+		if (U.getResponseByPreference(preferences)(response) !== value)
+			setValue(U.getResponseByPreference(preferences)(response));
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [response, preferences]);
+
+	useEffect(() => {
+		if (focused) inputRef.current.focus();
+	}, [focused]);
+
+	const interpretedLabel = interpret(features, logFunction)(bindings)(label);
+
+	const isVertical = positioning === 'VERTICAL';
+	const isHorizontal = positioning === 'HORIZONTAL';
+	const input = (
+		<>
+			<Icon type="checkbox" checked={value} disabled={disabled}>
+				<input
+					type="checkbox"
+					id={`checkbox-boolean-${id}`}
+					ref={inputRef}
+					title={interpretedLabel ? interpretedLabel : 'empty-label'}
+					className={`checkbox-boolean-lunatic`}
+					style={U.buildStyleObject(style)}
+					checked={value || false}
+					disabled={disabled}
+					onChange={({ target: { checked } }) => {
+						setValue(checked);
+						specificHandleChange({
+							[U.getResponseName(response)]: checked,
+						});
+						if (U.isFunction(logFunction))
+							logFunction(
+								U.createObjectEvent(
+									`checkbox-boolean-${id}`,
+									C.INPUT_CATEGORY,
+									C.EVENT_SELECTION,
+									U.getResponseName(response),
+									checked
+								)
+							);
+					}}
+				/>
+				{interpretedLabel && (
+					<label htmlFor={`checkbox-boolean-${id}`}>
+						{isHorizontal ? interpretedLabel : ''}
+					</label>
+				)}
+			</Icon>
+		</>
+	);
+	return (
+		<div key={`checkbox-boolean-${id}`} className={`checkbox-boolean-modality`}>
+			<Declarations
+				id={id}
+				type={C.BEFORE_QUESTION_TEXT}
+				declarations={declarations}
+				features={features}
+				bindings={bindings}
+			/>
+			{label && !isHorizontal && (
+				<label htmlFor={`checkbox-boolean-${id}`}>
+					{interpret(features, logFunction)(bindings)(label)}
+				</label>
+			)}
+			<Declarations
+				id={id}
+				type={C.AFTER_QUESTION_TEXT}
+				declarations={declarations}
+				features={features}
+				bindings={bindings}
+			/>
+			<div className="field-container">
+				<div className={`${management ? 'field-with-tooltip' : 'field'}`}>
+					{isVertical ? <div>{input}</div> : input}
+				</div>
+				{management && (
+					<div className="tooltip">
+						<TooltipResponse
+							id={id}
+							response={U.buildBooleanTooltipResponse(response)}
+						/>
+					</div>
+				)}
+			</div>
+			<Declarations
+				id={id}
+				type={C.DETACHABLE}
+				declarations={declarations}
+				features={features}
+				bindings={bindings}
+			/>
+		</div>
+	);
+};
+
+CheckboxBoolean.defaultProps = {
+	label: '',
+	preferences: ['COLLECTED'],
+	response: {},
+	disabled: false,
+	positioning: 'DEFAULT',
+	focused: false,
+	declarations: [],
+	features: [],
+	bindings: {},
+	management: false,
+	style: {},
+};
+
+CheckboxBoolean.propTypes = {
+	id: PropTypes.string.isRequired,
+	label: PropTypes.string,
+	preferences: PropTypes.arrayOf(U.valueTypePropTypes),
+	response: U.responsePropTypes,
+	handleChange: PropTypes.func.isRequired,
+	disabled: PropTypes.bool,
+	positioning: PropTypes.oneOf(['DEFAULT', 'HORIZONTAL', 'VERTICAL']),
+	focused: PropTypes.bool,
+	declarations: U.declarationsPropTypes,
+	features: PropTypes.arrayOf(PropTypes.string),
+	bindings: PropTypes.object,
+	management: PropTypes.bool,
+	style: PropTypes.object,
+};
+
+export default componentWrapper(React.memo(CheckboxBoolean, U.areEqual));

package/src/components/checkbox/checkbox.scss

@@ -1,73 +1,73 @@
-.lunatic-component {
-	.checkbox-group,
-	.checkbox-group-list {
-		border: 0;
-		outline: 0;
-		padding: 0;
-	}
-
-	.checkbox-lunatic,
-	.checkbox-boolean-lunatic {
-		position: absolute;
-		opacity: 0;
-		margin-bottom: 0;
-		margin-top: 0.15rem;
-		margin-left: 0.2rem;
-		height: 18px;
-		width: 18px;
-		+ label {
-			margin-left: 2rem;
-		}
-		&:focus {
-			+ label {
-				background-color: rgba(0, 0, 0, 0.05);
-			}
-		}
-	}
-
-	.checkbox-boolean-lunatic + label::before {
-		margin-right: -0.3rem;
-	}
-
-	.checkbox-modality,
-	.checkbox-boolean-modality {
-		margin-bottom: 0.6rem;
-	}
-
-	.field,
-	.field-with-tooltip {
-		.checkbox-group-list .checkbox-modality {
-			height: 1.375em;
-		}
-	}
-
-	.checkbox-group,
-	.checkbox-group-list {
-		.modality_NR {
-			margin-top: 1.5em;
-		}
-		.horizontal-options.modality_NR {
-			margin-top: 0;
-		}
-		.checkbox-modality {
-			label {
-				display: flex;
-			}
-		}
-		.checkbox-modality.checkbox-modality-block label {
-			padding-top: 0.325em;
-		}
-		.checkbox-modality.checkbox-modality-block.horizontal-options label {
-			padding-top: 0;
-		}
-	}
-
-	.checkbox-lunatic + label {
-		margin-top: 0.325em;
-	}
-
-	.checkbox-alone {
-		margin-left: 0;
-		margin-top: 0.5em;
-	}
-}
+.lunatic-component {
+	.checkbox-group,
+	.checkbox-group-list {
+		border: 0;
+		outline: 0;
+		padding: 0;
+	}
+
+	.checkbox-lunatic,
+	.checkbox-boolean-lunatic {
+		position: absolute;
+		opacity: 0;
+		margin-bottom: 0;
+		margin-top: 0.15rem;
+		margin-left: 0.2rem;
+		height: 18px;
+		width: 18px;
+		+ label {
+			margin-left: 2rem;
+		}
+		&:focus {
+			+ label {
+				background-color: rgba(0, 0, 0, 0.05);
+			}
+		}
+	}
+
+	.checkbox-boolean-lunatic + label::before {
+		margin-right: -0.3rem;
+	}
+
+	.checkbox-modality,
+	.checkbox-boolean-modality {
+		margin-bottom: 0.6rem;
+	}
+
+	.field,
+	.field-with-tooltip {
+		.checkbox-group-list .checkbox-modality {
+			height: 1.375em;
+		}
+	}
+
+	.checkbox-group,
+	.checkbox-group-list {
+		.modality_NR {
+			margin-top: 1.5em;
+		}
+		.horizontal-options.modality_NR {
+			margin-top: 0;
+		}
+		.checkbox-modality {
+			label {
+				display: flex;
+			}
+		}
+		.checkbox-modality.checkbox-modality-block label {
+			padding-top: 0.325em;
+		}
+		.checkbox-modality.checkbox-modality-block.horizontal-options label {
+			padding-top: 0;
+		}
+	}
+
+	.checkbox-lunatic + label {
+		margin-top: 0.325em;
+	}
+
+	.checkbox-alone {
+		margin-left: 0;
+		margin-top: 0.5em;
+	}
+}