@inseefr/lunatic 0.1.6 → 0.1.8-experimental

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

@@ -0,0 +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;

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

@@ -0,0 +1,54 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import Declarations from '../';
+import * as U from '../../../utils/lib';
+import * as C from '../../../constants';
+
+const SimpleDeclarationsWrapper = ({
+	id,
+	declarations,
+	features,
+	bindings,
+	children,
+}) => (
+	<>
+		<Declarations
+			id={id}
+			type={C.BEFORE_QUESTION_TEXT}
+			declarations={declarations}
+			features={features}
+			bindings={bindings}
+		/>
+		{children}
+		<Declarations
+			id={id}
+			type={C.AFTER_QUESTION_TEXT}
+			declarations={declarations}
+			features={features}
+			bindings={bindings}
+		/>
+		<Declarations
+			id={id}
+			type={C.DETACHABLE}
+			declarations={declarations}
+			features={features}
+			bindings={bindings}
+		/>
+	</>
+);
+
+SimpleDeclarationsWrapper.defaultProps = {
+	declarations: [],
+	features: [],
+	bindings: {},
+};
+
+SimpleDeclarationsWrapper.propTypes = {
+	id: PropTypes.string.isRequired,
+	declarations: U.declarationsPropTypes,
+	features: PropTypes.arrayOf(PropTypes.string),
+	bindings: PropTypes.object,
+	children: PropTypes.element.isRequired,
+};
+
+export default SimpleDeclarationsWrapper;

package/src/components/dropdown/commons/actions.js

@@ -0,0 +1,56 @@
+export const SHOW_PANEL = "dropdown/show-panel";
+export const showPanel = () => ({ type: SHOW_PANEL });
+
+export const HIDE_PANEL = "dropdown/hide-panel";
+export const hidePanel = () => ({ type: HIDE_PANEL });
+
+export const SET_ACTIVE_OPTION = "dropdown/set-active-option";
+export const setActiveOption = index => ({
+  type: SET_ACTIVE_OPTION,
+  payload: { index }
+});
+
+export const SET_OPTIONS = "dropdown/set-options";
+export const setOptions = options => ({
+  type: SET_OPTIONS,
+  payload: { options }
+});
+
+export const SET_VALUE = "dropdown/set-value";
+export const setValue = value => ({ type: SET_VALUE, payload: { value } });
+
+export const SET_FOCUSED = "dropdown/set-focused";
+export const setFocused = focused => ({
+  type: SET_FOCUSED,
+  payload: { focused }
+});
+
+export const SET_SELECTED_OPTION = "dropdown/set-selectted-option";
+export const setSelectedOption = option => ({
+  type: SET_SELECTED_OPTION,
+  payload: { option }
+});
+
+export const RESET_SELECTION = "dropdown/reset-selection";
+export const resetSelection = option => ({
+  type: RESET_SELECTION
+});
+
+/* */
+export const ARROW_UP_PRESSED = "dropdown/arrow-up-ressed";
+export const arrowUpPressed = () => ({ type: ARROW_UP_PRESSED });
+
+/* */
+export const ARROW_DOWN_PRESSED = "dropdown/arrow-down-pressed";
+export const arrowDownPressed = () => ({ type: ARROW_DOWN_PRESSED });
+
+/* */
+export const ENTER_PRESSED = "dropdown/enter-pressed";
+export const enterPressed = callback => ({
+  type: ENTER_PRESSED,
+  payload: { callback }
+});
+
+/*  */
+export const SET_PREFIX = "dropdown/set-prefix";
+export const setPrefix = prefix => ({ type: SET_PREFIX, payload: { prefix } });

package/src/components/dropdown/commons/children-to-option.js

@@ -0,0 +1,9 @@
+export default (children = []) =>
+  (Array.isArray(children) ? children : [children]).map(child => {
+    const { value } = child.props;
+    const label = child.props.children;
+    if (label === undefined || value === undefined) {
+      throw new Error("Ooops");
+    }
+    return { label, value };
+  });

package/src/components/dropdown/commons/cleaner-callbacks.js

@@ -0,0 +1,58 @@
+let CLEANER_CALLBACKS = {};
+
+/**
+ *
+ * @param {string} id identifiant de dropdown
+ * @param {function} hook fonction de rappelle à invoquer
+ */
+export const setCallback = (id, hook) => {
+  CLEANER_CALLBACKS[id] = hook;
+};
+
+/**
+ *
+ * @param  {...any} execpt identifiants de dropdownn a ne pas appliquer
+ */
+export const applyAll = (...execpt) => {
+  Object.entries(CLEANER_CALLBACKS).forEach(([k, todo]) => {
+    if (execpt.indexOf(k) === -1) {
+      apply(k);
+    }
+  });
+};
+
+/**
+ * Applique une fonction pour l'identifiant transmis
+ * @param {string} id
+ */
+export const apply = id => {
+  if (id in CLEANER_CALLBACKS && typeof CLEANER_CALLBACKS[id] === "function") {
+    CLEANER_CALLBACKS[id]();
+  }
+};
+
+/**
+ *
+ * @param {string} id
+ * @param {function} callback
+ */
+export const add = (id, callback) => {
+  if (typeof callback === "function") {
+    CLEANER_CALLBACKS[id] = callback;
+  }
+};
+
+/**
+ *
+ */
+export const clearAll = () => {
+  CLEANER_CALLBACKS = [];
+};
+
+/**
+ *
+ * @param {string} id
+ */
+export const clear = id => {
+  delete CLEANER_CALLBACKS[id];
+};

package/src/components/dropdown/commons/components/dropdown-container.js

@@ -0,0 +1,29 @@
+import React from 'react';
+
+const DropdownContainer = React.forwardRef(function (props, ref) {
+	const {
+		children,
+		className,
+		id,
+		onMouseDown,
+		onKeyDown,
+		onFocus,
+		onBlur,
+	} = props;
+	return (
+		<div
+			className={className}
+			tabIndex="-1"
+			id={id}
+			onMouseDown={onMouseDown}
+			onKeyDown={onKeyDown}
+			onFocus={onFocus}
+			onBlur={onBlur}
+			ref={ref}
+		>
+			{children}
+		</div>
+	);
+});
+
+export default DropdownContainer;

package/src/components/dropdown/commons/components/dropdown-field.js

@@ -0,0 +1,46 @@
+import React from 'react';
+import classnames from 'classnames';
+import { TooltipResponse } from '../../../tooltip';
+import * as U from '../../../../utils/lib';
+
+function DropdownFieldContainer({
+	children,
+	id,
+	response,
+	options,
+	management,
+	focused,
+	visible,
+	disabled,
+}) {
+	return (
+		<div className="field-container">
+			<div className={`${management ? 'field-with-tooltip' : 'field'}`}>
+				<div
+					tabIndex="-1"
+					className={classnames('lunatic-dropdown-container', { focused })}
+				>
+					<span
+						className={classnames(`lunatic-dropdown-content`, {
+							focused,
+							visible,
+							disabled,
+						})}
+					>
+						{children}
+					</span>
+				</div>
+			</div>
+			{management && (
+				<div className="tooltip">
+					<TooltipResponse
+						id={id}
+						response={U.buildMultiTooltipResponse(options)(response)}
+					/>
+				</div>
+			)}
+		</div>
+	);
+}
+
+export default DropdownFieldContainer;

package/src/components/dropdown/commons/components/dropdown.js

@@ -0,0 +1,183 @@
+import React, { useEffect, useCallback } from 'react';
+import PropTypes from 'prop-types';
+import classnames from 'classnames';
+import Label from './label';
+import * as U from '../../../../utils/lib';
+import * as CLEAN from '../cleaner-callbacks';
+import * as actions from '../actions';
+import DropdownField from './dropdown-field';
+import DropdownContainer from './dropdown-container';
+import {
+	createOnKeyDownCallback,
+	createOnMouseDownCallback,
+	BINDED_KEYS,
+} from '../event-callbacks';
+
+/** */
+function stopAndPrevent(e) {
+	e.preventDefault();
+	e.stopPropagation();
+}
+
+/** */
+function prepareOptions(options, valueFromProps) {
+	return options.reduce(
+		(a, o, i) =>
+			o.value === valueFromProps && a.index === -1
+				? { index: i, option: o }
+				: a,
+		{ index: -1, option: {} }
+	);
+}
+
+/** */
+function onKeyDownCallbackProxy(state, dispatch, onSelect) {
+	const callback = createOnKeyDownCallback(state, dispatch, onSelect);
+	return function (e) {
+		switch (e.key) {
+			case BINDED_KEYS.enter:
+			case BINDED_KEYS.arrowUp:
+			case BINDED_KEYS.arrowDown:
+				stopAndPrevent(e);
+				callback(e.key);
+				break;
+			case BINDED_KEYS.tab:
+				callback(e.key);
+				break;
+			default:
+				return;
+		}
+		return false;
+	};
+}
+
+function Dropdown({
+	options,
+	children,
+	onSelect,
+	response,
+	className,
+	label,
+	labelPosition,
+	mandatory,
+	value: valueFromProps,
+	management,
+	state,
+	dispatch,
+	refs,
+}) {
+	const { visible, focused, id, disabled } = state;
+
+	CLEAN.add(id, function () {
+		dispatch(actions.hidePanel());
+		dispatch(actions.setFocused(false));
+	});
+	useEffect(
+		function () {
+			const hook = function () {
+				dispatch(actions.hidePanel());
+				dispatch(actions.setFocused(false));
+			};
+			window.addEventListener('mousedown', hook);
+
+			return function () {
+				window.removeEventListener('mousedown', hook);
+				CLEAN.clear(id);
+			};
+		},
+		[id, dispatch]
+	);
+
+	useEffect(
+		function () {
+			dispatch(actions.setOptions(options));
+		},
+		[options, dispatch]
+	);
+
+	useEffect(
+		function () {
+			if (valueFromProps) {
+				const { option, index } = prepareOptions(options, valueFromProps);
+				dispatch(actions.setSelectedOption(option));
+				dispatch(actions.setActiveOption(index));
+			}
+		},
+		[valueFromProps, options, dispatch]
+	);
+
+	const onFocus = useCallback(
+		function () {
+			dispatch(actions.setFocused(true && !disabled));
+		},
+		[dispatch, disabled]
+	);
+
+	const onBlur = useCallback(
+		function () {
+			dispatch(actions.setFocused(false));
+		},
+		[dispatch]
+	);
+
+	const onMouseDownCallback = useCallback(
+		createOnMouseDownCallback(state, dispatch),
+		[state, dispatch]
+	);
+
+	const onKeyDownCallback = useCallback(
+		onKeyDownCallbackProxy(state, dispatch, onSelect),
+		[state, dispatch, onSelect]
+	);
+
+	return (
+		<DropdownContainer
+			className={classnames(className, U.getLabelPositionClass(labelPosition), {
+				focused,
+				disabled,
+			})}
+			id={id}
+			onMouseDown={onMouseDownCallback}
+			onKeyDown={onKeyDownCallback}
+			onFocus={onFocus}
+			onBlur={onBlur}
+			ref={refs}
+		>
+			<Label content={label} focused={focused} mandatory={mandatory} />
+			<DropdownField
+				id={id}
+				response={response}
+				options={options}
+				management={management}
+				focused={focused}
+				visible={visible}
+				disabled={disabled}
+			>
+				{children}
+			</DropdownField>
+		</DropdownContainer>
+	);
+}
+
+Dropdown.propTypes = {
+	zIndex: PropTypes.number,
+	className: PropTypes.string,
+	id: PropTypes.string,
+	options: PropTypes.array.isRequired,
+	onSelect: PropTypes.func,
+	value: PropTypes.oneOfType([
+		PropTypes.string,
+		PropTypes.number,
+		PropTypes.object,
+		PropTypes.bool,
+	]),
+};
+
+Dropdown.defaultProps = {
+	options: [],
+	onSelect: () => null,
+};
+
+export default React.forwardRef((props, ref) => (
+	<Dropdown {...props} refs={ref} />
+));

package/src/components/dropdown/commons/components/label.js

@@ -0,0 +1,28 @@
+import React from 'react';
+import classnames from 'classnames';
+import PropTypes from 'prop-types';
+
+function Label({ content, focused, mandatory }) {
+	if (!content) {
+		return null;
+	}
+	return (
+		<div
+			className={classnames('lunatic-dropdown-label', { focused, mandatory })}
+		>
+			{content}
+		</div>
+	);
+}
+
+Label.defaultProps = {
+	mandatory: false,
+};
+
+Label.propTypes = {
+	content: PropTypes.string,
+	focused: PropTypes.bool.isRequired,
+	mandatory: PropTypes.bool,
+};
+
+export default Label;