@inseefr/lunatic 0.3.4-experimental → 0.3.7-experimental

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@inseefr/lunatic",
-	"version": "0.3.4-experimental",
+	"version": "0.3.7-experimental",
 	"workersVersion": "0.2.1-experimental",
 	"description": "Library of questionnaire components",
 	"repository": {
@@ -51,6 +51,7 @@
 	],
 	"dependencies": {
 		"@inseefr/trevas": "^0.1.12",
+		"array-flat-polyfill": "^1.0.1",
 		"date-fns": "^2.25.0",
 		"lodash.camelcase": "^4.3.0",
 		"lodash.debounce": "^4.0.8",

package/src/components/breadcrumb/component.js

@@ -1,29 +1,29 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { buildStyleObject } from '../../utils/lib';
-import './breadcrumb.scss';
-
-const Breadcrumb = ({ elements, style }) => (
-	<div
-		aria-label={`breadcrumb`}
-		className="breadcrumb-lunatic"
-		style={buildStyleObject(style)}
-	>
-		{elements.map((e, i) => (
-			<React.Fragment key={`breadcrumb-${e.toLowerCase()}`}>
-				{e && (
-					<span className={i !== 0 ? 'breadcrumb-element-lunatic' : undefined}>
-						{e}
-					</span>
-				)}
-			</React.Fragment>
-		))}
-	</div>
-);
-
-Breadcrumb.propTypes = {
-	elements: PropTypes.arrayOf(PropTypes.string).isRequired,
-	style: PropTypes.object,
-};
-
-export default Breadcrumb;
+import React from 'react';
+import PropTypes from 'prop-types';
+import { buildStyleObject } from '../../utils/lib';
+import './breadcrumb.scss';
+
+const Breadcrumb = ({ elements, style }) => (
+	<div
+		aria-label={`breadcrumb`}
+		className="breadcrumb-lunatic"
+		style={buildStyleObject(style)}
+	>
+		{elements.map((e, i) => (
+			<React.Fragment key={`breadcrumb-${e.toLowerCase()}`}>
+				{e && (
+					<span className={i !== 0 ? 'breadcrumb-element-lunatic' : undefined}>
+						{e}
+					</span>
+				)}
+			</React.Fragment>
+		))}
+	</div>
+);
+
+Breadcrumb.propTypes = {
+	elements: PropTypes.arrayOf(PropTypes.string).isRequired,
+	style: PropTypes.object,
+};
+
+export default Breadcrumb;

package/src/components/button/component.js

@@ -1,53 +1,53 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import {
-	buildStyleObject,
-	createObjectEvent,
-	isFunction,
-} from '../../utils/lib';
-import './button.scss';
-import { BUTTON_CATEGORY, EVENT_CLICK } from '../../constants';
-
-const Button = ({
-	label,
-	value,
-	onClick,
-	disabled,
-	style,
-	logFunction,
-	id,
-}) => {
-	const handleClick = (e) => {
-		onClick(e);
-		if (isFunction(logFunction))
-			logFunction(
-				createObjectEvent(
-					`button-lunatic-${id}`,
-					BUTTON_CATEGORY,
-					EVENT_CLICK,
-					null,
-					label
-				)
-			);
-	};
-	return (
-		<button
-			type="button"
-			aria-label={label || 'button'}
-			className="button-lunatic"
-			style={buildStyleObject(style)}
-			disabled={disabled}
-			onClick={handleClick}
-		>
-			{value}
-		</button>
-	);
-};
-
-Button.propTypes = {
-	value: PropTypes.oneOfType([PropTypes.string, PropTypes.element]).isRequired,
-	disabled: PropTypes.bool,
-	onClick: PropTypes.func.isRequired,
-};
-
-export default Button;
+import React from 'react';
+import PropTypes from 'prop-types';
+import {
+	buildStyleObject,
+	createObjectEvent,
+	isFunction,
+} from '../../utils/lib';
+import './button.scss';
+import { BUTTON_CATEGORY, EVENT_CLICK } from '../../constants';
+
+const Button = ({
+	label,
+	value,
+	onClick,
+	disabled,
+	style,
+	logFunction,
+	id,
+}) => {
+	const handleClick = (e) => {
+		onClick(e);
+		if (isFunction(logFunction))
+			logFunction(
+				createObjectEvent(
+					`button-lunatic-${id}`,
+					BUTTON_CATEGORY,
+					EVENT_CLICK,
+					null,
+					label
+				)
+			);
+	};
+	return (
+		<button
+			type="button"
+			aria-label={label || 'button'}
+			className="button-lunatic"
+			style={buildStyleObject(style)}
+			disabled={disabled}
+			onClick={handleClick}
+		>
+			{value}
+		</button>
+	);
+};
+
+Button.propTypes = {
+	value: PropTypes.oneOfType([PropTypes.string, PropTypes.element]).isRequired,
+	disabled: PropTypes.bool,
+	onClick: PropTypes.func.isRequired,
+};
+
+export default Button;

package/src/components/button/index.js

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

package/src/components/checkbox/index.js

@@ -1,3 +1,3 @@
-export { default as CheckboxGroup } from './group';
-export { default as CheckboxBoolean } from './boolean';
-export { default as CheckboxOne } from './one';
+export { default as CheckboxGroup } from './group';
+export { default as CheckboxBoolean } from './boolean';
+export { default as CheckboxOne } from './one';

package/src/components/datepicker/index.js

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

package/src/components/declarations/index.js

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

package/src/components/declarations/wrappers/list-declarations-wrapper.js

@@ -1,232 +1,232 @@
-import React, { useState, useEffect, useRef } from 'react';
-import KeyboardEventHandler from 'react-keyboard-event-handler';
-import PropTypes from 'prop-types';
-import debounce from 'lodash.debounce';
-import Declarations from '../';
-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';
-
-const ListDeclarationsWrapper = ({
-	id,
-	label,
-	preferences,
-	response,
-	options,
-	handleChange: propsHandleChange,
-	disabled,
-	focused,
-	shortcut,
-	declarations,
-	features,
-	bindings,
-	management,
-	style,
-	positioning,
-	type,
-	hasSpecificHandler,
-	logFunction,
-}) => {
-	const inputRef = useRef();
-
-	const [value, setValue] = useState(() =>
-		U.getResponseByPreference(preferences)(response)
-	);
-
-	const filledOptions =
-		management && type === 'checkbox'
-			? [...options, { label: 'NR', value: '_N_R_' }]
-			: options;
-
-	const specificHandleChange = (e) => {
-		const { values } = response;
-		const [key, value] = Object.entries(e)[0];
-		const newValue =
-			values[preferences[preferences.length - 1]] === value ? null : value;
-		handleChange({ [key]: newValue });
-		if (management) {
-			setValue(
-				U.getResponseByPreference(preferences)(
-					U.buildLocalResponse(response, newValue)
-				)
-			);
-		} else setValue(newValue);
-	};
-
-	const handleChange = debounce((obj) => propsHandleChange(obj), 50);
-
-	const onChange = (v) => {
-		const update = {
-			[U.getResponseName(response)]: v,
-		};
-		if (hasSpecificHandler) specificHandleChange(update);
-		else {
-			setValue(v);
-			handleChange(update);
-		}
-		if (U.isFunction(logFunction))
-			logFunction(
-				U.createObjectEvent(
-					`${type}-${id}-${v}`,
-					C.INPUT_CATEGORY,
-					C.EVENT_SELECTION,
-					U.getResponseName(response),
-					v
-				)
-			);
-	};
-
-	// 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 { fieldsetStyle, modalityStyle } = style;
-	return (
-		<>
-			<Declarations
-				id={id}
-				type={C.BEFORE_QUESTION_TEXT}
-				declarations={declarations}
-				features={features}
-				bindings={bindings}
-			/>
-			<div className="field-container">
-				<div className={`${management ? 'field-with-tooltip' : 'field'}`}>
-					<fieldset
-						key={`${type}-${id}`}
-						className={`${type}-group-list`}
-						style={U.buildStyleObject(fieldsetStyle)}
-					>
-						<legend>{interpret(features, logFunction)(bindings)(label)}</legend>
-						<Declarations
-							id={id}
-							type={C.AFTER_QUESTION_TEXT}
-							declarations={declarations}
-							features={features}
-							bindings={bindings}
-						/>
-						{filledOptions.map(
-							({ label: optionLabel, value: optionValue }, i) => {
-								const checked = value === optionValue;
-								const interpretedLabel = interpret(
-									features,
-									logFunction
-								)(bindings)(optionLabel);
-								const keyboardSelectionKey =
-									options.length < 10 ? `${i + 1}` : U.getAlphabet()[i];
-								return (
-									<div
-										key={`${type}-${id}-${optionValue}`}
-										className={`${type}-modality ${type}-modality-block ${U.getItemsPositioningClass(
-											positioning
-										)} ${checked ? 'content-checked' : ''} ${
-											optionValue === '_N_R_' ? 'modality_NR' : ''
-										}`}
-									>
-										<Icon type={type} checked={checked} disabled={disabled}>
-											<input
-												type={type}
-												name={`${type}-${id}`}
-												ref={i === 0 || checked ? inputRef : null}
-												id={`${type}-${id}-${optionValue}`}
-												aria-labelledby={`input-label-${id}-${optionValue}`}
-												className={`${type}-lunatic`}
-												style={U.buildStyleObject(style)}
-												checked={checked}
-												disabled={disabled}
-												onChange={(optionLabel) => onChange(optionValue)}
-											/>
-											<label
-												htmlFor={`${type}-${id}-${optionValue}`}
-												id={`input-label-${id}-${optionValue}`}
-												style={checked ? U.buildStyleObject(modalityStyle) : {}}
-												className="modality-label"
-											>
-												{shortcut && (
-													<span className="code-modality">
-														{keyboardSelectionKey.toUpperCase()}
-													</span>
-												)}
-												{interpretedLabel}
-											</label>
-										</Icon>
-										{shortcut && (
-											<KeyboardEventHandler
-												handleKeys={[keyboardSelectionKey.toLowerCase()]}
-												onKeyEvent={(key, e) => {
-													e.preventDefault();
-													onChange(optionValue);
-												}}
-												handleFocusableElements
-											/>
-										)}
-									</div>
-								);
-							}
-						)}
-					</fieldset>
-				</div>
-				{management && (
-					<div className="tooltip">
-						<TooltipResponse
-							id={id}
-							response={U.buildMultiTooltipResponse(filledOptions)(response)}
-						/>
-					</div>
-				)}
-			</div>
-			<Declarations
-				id={id}
-				type={C.DETACHABLE}
-				declarations={declarations}
-				features={features}
-				bindings={bindings}
-			/>
-		</>
-	);
-};
-
-ListDeclarationsWrapper.defaultProps = {
-	label: '',
-	preferences: ['COLLECTED'],
-	response: {},
-	options: [],
-	disabled: false,
-	focused: false,
-	positioning: 'DEFAULT',
-	declarations: [],
-	features: [],
-	bindings: {},
-	management: false,
-	style: { fieldsetStyle: {}, modalityStyle: {} },
-};
-
-ListDeclarationsWrapper.propTypes = {
-	id: PropTypes.string.isRequired,
-	label: PropTypes.string,
-	preferences: PropTypes.arrayOf(U.valueTypePropTypes),
-	response: U.responsePropTypes,
-	options: U.optionsPropTypes,
-	handleChange: PropTypes.func.isRequired,
-	disabled: PropTypes.bool,
-	focused: PropTypes.bool,
-	positioning: PropTypes.oneOf(['DEFAULT', 'HORIZONTAL', 'VERTICAL']),
-	declarations: U.declarationsPropTypes,
-	features: PropTypes.arrayOf(PropTypes.string),
-	bindings: PropTypes.object,
-	management: PropTypes.bool,
-	style: PropTypes.object,
-	type: PropTypes.oneOf(['radio', 'checkbox']),
-};
-
-export default ListDeclarationsWrapper;
+import React, { useState, useEffect, useRef } from 'react';
+import KeyboardEventHandler from 'react-keyboard-event-handler';
+import PropTypes from 'prop-types';
+import debounce from 'lodash.debounce';
+import Declarations from '../';
+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';
+
+const ListDeclarationsWrapper = ({
+	id,
+	label,
+	preferences,
+	response,
+	options,
+	handleChange: propsHandleChange,
+	disabled,
+	focused,
+	shortcut,
+	declarations,
+	features,
+	bindings,
+	management,
+	style,
+	positioning,
+	type,
+	hasSpecificHandler,
+	logFunction,
+}) => {
+	const inputRef = useRef();
+
+	const [value, setValue] = useState(() =>
+		U.getResponseByPreference(preferences)(response)
+	);
+
+	const filledOptions =
+		management && type === 'checkbox'
+			? [...options, { label: 'NR', value: '_N_R_' }]
+			: options;
+
+	const specificHandleChange = (e) => {
+		const { values } = response;
+		const [key, value] = Object.entries(e)[0];
+		const newValue =
+			values[preferences[preferences.length - 1]] === value ? null : value;
+		handleChange({ [key]: newValue });
+		if (management) {
+			setValue(
+				U.getResponseByPreference(preferences)(
+					U.buildLocalResponse(response, newValue)
+				)
+			);
+		} else setValue(newValue);
+	};
+
+	const handleChange = debounce((obj) => propsHandleChange(obj), 50);
+
+	const onChange = (v) => {
+		const update = {
+			[U.getResponseName(response)]: v,
+		};
+		if (hasSpecificHandler) specificHandleChange(update);
+		else {
+			setValue(v);
+			handleChange(update);
+		}
+		if (U.isFunction(logFunction))
+			logFunction(
+				U.createObjectEvent(
+					`${type}-${id}-${v}`,
+					C.INPUT_CATEGORY,
+					C.EVENT_SELECTION,
+					U.getResponseName(response),
+					v
+				)
+			);
+	};
+
+	// 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 { fieldsetStyle, modalityStyle } = style;
+	return (
+		<>
+			<Declarations
+				id={id}
+				type={C.BEFORE_QUESTION_TEXT}
+				declarations={declarations}
+				features={features}
+				bindings={bindings}
+			/>
+			<div className="field-container">
+				<div className={`${management ? 'field-with-tooltip' : 'field'}`}>
+					<fieldset
+						key={`${type}-${id}`}
+						className={`${type}-group-list`}
+						style={U.buildStyleObject(fieldsetStyle)}
+					>
+						<legend>{interpret(features, logFunction)(bindings)(label)}</legend>
+						<Declarations
+							id={id}
+							type={C.AFTER_QUESTION_TEXT}
+							declarations={declarations}
+							features={features}
+							bindings={bindings}
+						/>
+						{filledOptions.map(
+							({ label: optionLabel, value: optionValue }, i) => {
+								const checked = value === optionValue;
+								const interpretedLabel = interpret(
+									features,
+									logFunction
+								)(bindings)(optionLabel);
+								const keyboardSelectionKey =
+									options.length < 10 ? `${i + 1}` : U.getAlphabet()[i];
+								return (
+									<div
+										key={`${type}-${id}-${optionValue}`}
+										className={`${type}-modality ${type}-modality-block ${U.getItemsPositioningClass(
+											positioning
+										)} ${checked ? 'content-checked' : ''} ${
+											optionValue === '_N_R_' ? 'modality_NR' : ''
+										}`}
+									>
+										<Icon type={type} checked={checked} disabled={disabled}>
+											<input
+												type={type}
+												name={`${type}-${id}`}
+												ref={i === 0 || checked ? inputRef : null}
+												id={`${type}-${id}-${optionValue}`}
+												aria-labelledby={`input-label-${id}-${optionValue}`}
+												className={`${type}-lunatic`}
+												style={U.buildStyleObject(style)}
+												checked={checked}
+												disabled={disabled}
+												onChange={(optionLabel) => onChange(optionValue)}
+											/>
+											<label
+												htmlFor={`${type}-${id}-${optionValue}`}
+												id={`input-label-${id}-${optionValue}`}
+												style={checked ? U.buildStyleObject(modalityStyle) : {}}
+												className="modality-label"
+											>
+												{shortcut && (
+													<span className="code-modality">
+														{keyboardSelectionKey.toUpperCase()}
+													</span>
+												)}
+												{interpretedLabel}
+											</label>
+										</Icon>
+										{shortcut && (
+											<KeyboardEventHandler
+												handleKeys={[keyboardSelectionKey.toLowerCase()]}
+												onKeyEvent={(key, e) => {
+													e.preventDefault();
+													onChange(optionValue);
+												}}
+												handleFocusableElements
+											/>
+										)}
+									</div>
+								);
+							}
+						)}
+					</fieldset>
+				</div>
+				{management && (
+					<div className="tooltip">
+						<TooltipResponse
+							id={id}
+							response={U.buildMultiTooltipResponse(filledOptions)(response)}
+						/>
+					</div>
+				)}
+			</div>
+			<Declarations
+				id={id}
+				type={C.DETACHABLE}
+				declarations={declarations}
+				features={features}
+				bindings={bindings}
+			/>
+		</>
+	);
+};
+
+ListDeclarationsWrapper.defaultProps = {
+	label: '',
+	preferences: ['COLLECTED'],
+	response: {},
+	options: [],
+	disabled: false,
+	focused: false,
+	positioning: 'DEFAULT',
+	declarations: [],
+	features: [],
+	bindings: {},
+	management: false,
+	style: { fieldsetStyle: {}, modalityStyle: {} },
+};
+
+ListDeclarationsWrapper.propTypes = {
+	id: PropTypes.string.isRequired,
+	label: PropTypes.string,
+	preferences: PropTypes.arrayOf(U.valueTypePropTypes),
+	response: U.responsePropTypes,
+	options: U.optionsPropTypes,
+	handleChange: PropTypes.func.isRequired,
+	disabled: PropTypes.bool,
+	focused: PropTypes.bool,
+	positioning: PropTypes.oneOf(['DEFAULT', 'HORIZONTAL', 'VERTICAL']),
+	declarations: U.declarationsPropTypes,
+	features: PropTypes.arrayOf(PropTypes.string),
+	bindings: PropTypes.object,
+	management: PropTypes.bool,
+	style: PropTypes.object,
+	type: PropTypes.oneOf(['radio', 'checkbox']),
+};
+
+export default ListDeclarationsWrapper;