@inseefr/lunatic 2.0.2 → 2.0.3-v2

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

@@ -1,168 +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 } }) => {
-								if (management) setValue(v);
-								else setValue(v === '' ? null : v);
-							}}
-							onBlur={handleChangeOnBlur}
-						/>
-					</div>
-					{management && (
-						<div className="tooltip">
-							<TooltipResponse
-								id={id}
-								response={U.buildLocalResponse(response, value)}
-							/>
-						</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,190 +0,0 @@
-import React, { useState, useEffect, useRef } from 'react';
-import PropTypes from 'prop-types';
-import debounce from 'lodash.debounce';
-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: propsHandleChange,
-	disabled,
-	focused,
-	keyboardSelection,
-	declarations,
-	features,
-	bindings,
-	management,
-	style,
-	positioning,
-	type,
-	hasSpecificHandler,
-}) => {
-	const inputRef = useRef();
-
-	const [value, setValue] = useState(() =>
-		U.getResponseByPreference(preferences)(response)
-	);
-
-	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);
-		}
-	};
-
-	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 = value === 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={(optionLabel) => onChange(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,29 +0,0 @@
-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="0"
-			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

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