@inseefr/lunatic 2.0.0 → 2.0.1-v2

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

@@ -1,164 +0,0 @@
-import React, { useState, useEffect, useRef } from 'react';
-import PropTypes from 'prop-types';
-import Declarations from '../';
-import { TooltipResponse } from '../../tooltip';
-import * as U from '../../../utils/lib';
-import * as C from '../../../constants';
-import { interpret } from '../../../utils/to-expose';
-
-const InputDeclarationsWrapper = ({
-	id,
-	label,
-	preferences,
-	response,
-	placeholder,
-	handleChange,
-	maxLength,
-	readOnly,
-	disabled,
-	autoComplete,
-	labelPosition,
-	mandatory,
-	declarations,
-	features,
-	bindings,
-	focused,
-	management,
-	style,
-	type,
-	roleType,
-}) => {
-	const inputRef = useRef();
-
-	const [value, setValue] = useState(() =>
-		U.getResponseByPreference(preferences)(response)
-	);
-
-	useEffect(() => {
-		if (focused) inputRef.current.focus();
-	}, [focused]);
-
-	// 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]);
-
-	const handleChangeOnBlur = () => {
-		handleChange({
-			[U.getResponseName(response)]: value,
-		});
-	};
-
-	const Component = roleType === 'textarea' ? 'textarea' : 'input';
-
-	return (
-		<>
-			<Declarations
-				id={id}
-				type={C.BEFORE_QUESTION_TEXT}
-				declarations={declarations}
-				features={features}
-				bindings={bindings}
-			/>
-			<div className={U.getLabelPositionClass(labelPosition)}>
-				{label && (
-					<label
-						htmlFor={`${roleType}-${id}`}
-						id={`${roleType}-label-${id}`}
-						className={`${mandatory ? 'mandatory' : ''}`}
-					>
-						{interpret(features)(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'}`}>
-						<Component
-							type={type}
-							id={`${roleType}-${id}`}
-							ref={inputRef}
-							value={value}
-							placeholder={placeholder}
-							autoComplete={autoComplete ? 'on' : 'off'}
-							className={`${roleType}-lunatic`}
-							style={U.buildStyleObject(style)}
-							readOnly={readOnly}
-							disabled={disabled}
-							maxLength={maxLength || 524288}
-							required={mandatory}
-							aria-required={mandatory}
-							onChange={({ target: { value: v } }) => {
-								setValue(v === '' ? null : v);
-							}}
-							onBlur={handleChangeOnBlur}
-						/>
-					</div>
-					{management && (
-						<div className="tooltip">
-							<TooltipResponse id={id} response={response} />
-						</div>
-					)}
-				</div>
-			</div>
-			<Declarations
-				id={id}
-				type={C.DETACHABLE}
-				declarations={declarations}
-				features={features}
-				bindings={bindings}
-			/>
-		</>
-	);
-};
-
-InputDeclarationsWrapper.defaultProps = {
-	label: '',
-	preferences: ['COLLECTED'],
-	response: {},
-	placeholder: '',
-	readOnly: false,
-	disabled: false,
-	autoComplete: false,
-	labelPosition: 'DEFAULT',
-	mandatory: false,
-	focused: false,
-	declarations: [],
-	features: [],
-	bindings: {},
-	management: false,
-	style: {},
-};
-
-InputDeclarationsWrapper.propTypes = {
-	id: PropTypes.string.isRequired,
-	label: PropTypes.string,
-	preferences: PropTypes.arrayOf(U.valueTypePropTypes),
-	response: U.responsePropTypes,
-	placeholder: PropTypes.string,
-	handleChange: PropTypes.func.isRequired,
-	readOnly: PropTypes.bool,
-	disabled: PropTypes.bool,
-	maxLength: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-	autoComplete: PropTypes.bool,
-	labelPosition: PropTypes.oneOf(['DEFAULT', 'TOP', 'BOTTOM', 'LEFT', 'RIGHT']),
-	mandatory: PropTypes.bool,
-	focused: PropTypes.bool,
-	declarations: U.declarationsPropTypes,
-	features: PropTypes.arrayOf(PropTypes.string),
-	bindings: PropTypes.object,
-	management: PropTypes.bool,
-	style: PropTypes.object,
-	type: PropTypes.oneOf(['text', 'date', null]),
-	roleType: PropTypes.oneOf(['input', 'datepicker', 'textarea']),
-};
-
-export default InputDeclarationsWrapper;

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

@@ -1,162 +0,0 @@
-import React, { useEffect, useRef } from 'react';
-import PropTypes from 'prop-types';
-import Declarations from '../';
-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,
-	disabled,
-	focused,
-	keyboardSelection,
-	declarations,
-	features,
-	bindings,
-	management,
-	style,
-	positioning,
-	type,
-}) => {
-	const inputRef = useRef();
-
-	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`}
-						style={U.buildStyleObject(fieldsetStyle)}
-					>
-						<legend>{interpret(features)(bindings)(label)}</legend>
-						<Declarations
-							id={id}
-							type={C.AFTER_QUESTION_TEXT}
-							declarations={declarations}
-							features={features}
-							bindings={bindings}
-						/>
-						{options.map(({ label: optionLabel, value: optionValue }, i) => {
-							const checked =
-								U.getResponseByPreference(preferences)(response) ===
-								optionValue;
-							const interpretedLabel = interpret(features)(bindings)(
-								optionLabel
-							);
-							return (
-								<div
-									key={`${type}-${id}-${optionValue}`}
-									className={`${type}-modality ${U.getItemsPositioningClass(
-										positioning
-									)} ${checked ? 'content-checked' : ''}`}
-								>
-									<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={() =>
-											handleChange({
-												[U.getResponseName(response)]: optionValue,
-											})
-										}
-									/>
-									<label
-										htmlFor={`${type}-${id}-${optionValue}`}
-										id={`input-label-${id}-${optionValue}`}
-										style={checked ? U.buildStyleObject(modalityStyle) : {}}
-									>
-										{keyboardSelection && (
-											<span className="code-modality">
-												{options.length < 10
-													? i + 1
-													: U.getAlphabet()[i].toUpperCase()}
-											</span>
-										)}
-										{interpretedLabel}
-									</label>
-								</div>
-							);
-						})}
-					</fieldset>
-				</div>
-				{management && (
-					<div className="tooltip">
-						<TooltipResponse
-							id={id}
-							response={U.buildMultiTooltipResponse(options)(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,
-	keyboardSelection: 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,
-	keyboardSelection: 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

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

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

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

@@ -1,58 +0,0 @@
-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/closed.icon.js

@@ -1,24 +0,0 @@
-import React from "react";
-
-function Icon({ height = 20, width = 20, color = "#aaa" }) {
-  return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width={width}
-      height={height}
-      x="0"
-      y="0"
-      enableBackground="new 0 0 292.362 292.362"
-      version="1.1"
-      viewBox="0 0 292.362 292.362"
-      xmlSpace="preserve"
-    >
-      <path
-        fill={color}
-        d="M286.935 69.377c-3.614-3.617-7.898-5.424-12.848-5.424H18.274c-4.952 0-9.233 1.807-12.85 5.424C1.807 72.998 0 77.279 0 82.228c0 4.948 1.807 9.229 5.424 12.847l127.907 127.907c3.621 3.617 7.902 5.428 12.85 5.428s9.233-1.811 12.847-5.428L286.935 95.074c3.613-3.617 5.427-7.898 5.427-12.847 0-4.948-1.814-9.229-5.427-12.85z"
-      ></path>
-    </svg>
-  );
-}
-
-export default Icon;

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

@@ -1,169 +0,0 @@
-import React, { useEffect } from 'react';
-import PropTypes from 'prop-types';
-import classnames from 'classnames';
-import Label from './label';
-import { TooltipResponse } from '../../../tooltip';
-import * as U from '../../../../utils/lib';
-import * as CLEAN from '../cleaner-callbacks';
-import * as actions from '../actions';
-import {
-	onKeyDownCallback,
-	onMouseDownCallback,
-	BINDED_KEYS,
-} from '../event-callbacks';
-
-/** */
-const stopAndPrevent = (e) => {
-	e.preventDefault();
-	e.stopPropagation();
-};
-
-/** */
-const onKeyDownCallback_ = (state, dispatch, onSelect) => (e) => {
-	switch (e.key) {
-		case BINDED_KEYS.enter:
-		case BINDED_KEYS.arrowUp:
-		case BINDED_KEYS.arrowDown:
-			stopAndPrevent(e);
-			onKeyDownCallback(state, dispatch, onSelect)(e.key);
-			break;
-		case BINDED_KEYS.tab:
-			onKeyDownCallback(state, dispatch, onSelect)(e.key);
-			break;
-		default:
-	}
-};
-
-const getZIndex = (z) => z || 0;
-
-const DropdownContainer = ({
-	options,
-	children,
-	onSelect,
-	response,
-	className,
-	label,
-	labelPosition,
-	mandatory,
-	value: valueFromProps,
-	zIndex,
-	management,
-	state,
-	dispatch,
-	refs,
-}) => {
-	const { visible, focused, id, disabled } = state;
-
-	CLEAN.add(id, () => {
-		dispatch(actions.hidePanel());
-		dispatch(actions.setFocused(false));
-	});
-	useEffect(() => {
-		const hook = () => {
-			dispatch(actions.hidePanel());
-			dispatch(actions.setFocused(false));
-		};
-		window.addEventListener('mousedown', hook);
-
-		return () => {
-			window.removeEventListener('mousedown', hook);
-			CLEAN.clear(id);
-		};
-	}, [id, dispatch]);
-
-	useEffect(() => {
-		dispatch(actions.setOptions(options));
-	}, [options, dispatch]);
-
-	useEffect(() => {
-		if (valueFromProps) {
-			const { option, index } = options.reduce(
-				(a, o, i) =>
-					o.value === valueFromProps && a.index === -1
-						? { index: i, option: o }
-						: a,
-				{ index: -1, option: {} }
-			);
-			dispatch(actions.setSelectedOption(option));
-			dispatch(actions.setActiveOption(index));
-		}
-	}, [valueFromProps, options, dispatch]);
-
-	const z = getZIndex(zIndex);
-
-	return (
-		<div
-			className={classnames(
-				`${className} ${U.getLabelPositionClass(labelPosition)}`,
-				{
-					focused,
-					disabled,
-				}
-			)}
-			tabIndex="-1"
-			id={id}
-			onMouseDown={onMouseDownCallback(state, dispatch, 'id')}
-			onKeyDown={onKeyDownCallback_(state, dispatch, onSelect)}
-			onFocus={() => dispatch(actions.setFocused(true && !disabled))}
-			onBlur={function () {
-				dispatch(actions.setFocused(false));
-			}}
-			ref={refs}
-		>
-			{label ? (
-				<Label content={label} focused={focused} mandatory={mandatory} />
-			) : null}
-			<div className="field-container">
-				<div className={`${management ? 'field-with-tooltip' : 'field'}`}>
-					<div
-						tabIndex="-1"
-						style={{ zIndex: focused ? z + 1 : z }}
-						className="lunatic-dropdown-container"
-					>
-						<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>
-		</div>
-	);
-};
-
-DropdownContainer.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,
-	]),
-};
-
-DropdownContainer.defaultProps = {
-	options: [],
-	zIndex: 0,
-	onSelect: () => null,
-};
-
-export default React.forwardRef((props, ref) => (
-	<DropdownContainer {...props} refs={ref} />
-));