@inseefr/lunatic 0.3.3-experimental → 0.3.4-v2

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/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="-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

@@ -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;

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

@@ -1,204 +0,0 @@
-import React, { useEffect, useCallback, useMemo } from 'react';
-import PropTypes from 'prop-types';
-import classnames from 'classnames';
-import Label from './label';
-import * as U from '../../../../utils/lib';
-import * as C from '../../../../constants';
-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,
-	logFunction,
-}) {
-	const { visible, focused, id, disabled } = state;
-
-	const createEventFocus = (focusIn = true) =>
-		U.createObjectEvent(
-			id,
-			C.INPUT_CATEGORY,
-			focusIn ? C.EVENT_FOCUS_IN : C.EVENT_FOCUS_OUT,
-			U.getResponseName(response),
-			valueFromProps
-		);
-
-	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 = useMemo(
-		() => createOnMouseDownCallback(state, dispatch),
-		[state, dispatch]
-	);
-
-	const onKeyDownCallback = useMemo(
-		() => onKeyDownCallbackProxy(state, dispatch, onSelect),
-		[state, dispatch, onSelect]
-	);
-
-	// log info when focus change
-	useEffect(() => {
-		if (id && focused && U.isFunction(logFunction))
-			logFunction(createEventFocus());
-		if (id && !focused && U.isFunction(logFunction))
-			logFunction(createEventFocus(false));
-
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [focused, id]);
-
-	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

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

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

@@ -1,78 +0,0 @@
-import React, { useRef } from 'react';
-import PropTypes from 'prop-types';
-
-/**
- *
- */
-function Panel({
-	options = [],
-	display,
-	handleActive,
-	prefix,
-	activeIndex,
-	selectedOption,
-	onSelect,
-	idDropdown,
-	optionComponent: Option,
-}) {
-	const ulRef = useRef();
-
-	return display ? (
-		<div className="lunatic-dropdown-panel-container">
-			<ul className="lunatic-dropdown-panel" ref={ulRef} tabIndex="-1">
-				{options.map(({ label, value }, index) => (
-					<li
-						key={value}
-						id={`${idDropdown}-option-${value}`}
-						onMouseEnter={() => handleActive(index)}
-						onMouseDown={(e) => {
-							e.stopPropagation();
-							e.preventDefault();
-							if (e.button === 0) {
-								onSelect({ label, value });
-							}
-						}}
-					>
-						<Option
-							label={label}
-							value={value}
-							prefix={prefix}
-							active={activeIndex === index}
-							selected={selectedOption && selectedOption.value === value}
-						/>
-					</li>
-				))}
-			</ul>
-		</div>
-	) : null;
-}
-
-const propTypesOption = PropTypes.shape({
-	label: PropTypes.string,
-	value: PropTypes.oneOfType([
-		PropTypes.string,
-		PropTypes.object,
-		PropTypes.number,
-		PropTypes.symbol,
-		PropTypes.bool,
-	]),
-});
-
-Panel.propTypes = {
-	idDropdown: PropTypes.string.isRequired,
-	prefix: PropTypes.string,
-	onSelect: PropTypes.func,
-	handleActive: PropTypes.func.isRequired,
-	activeIndex: PropTypes.number,
-	selectedOption: propTypesOption,
-	display: PropTypes.bool.isRequired,
-	options: PropTypes.arrayOf(propTypesOption),
-};
-
-Panel.defaultProps = {
-	options: [],
-	onSelect: () => null,
-	selectedOption: undefined,
-};
-
-export default Panel;

package/src/components/dropdown/commons/event-callbacks/index.js

@@ -1,5 +0,0 @@
-export {
-	default as createOnKeyDownCallback,
-	BINDED_KEYS,
-} from './on-keydown-callback';
-export { default as createOnMouseDownCallback } from './on-mousedown-callback';

package/src/components/dropdown/commons/event-callbacks/on-keydown-callback.js

@@ -1,29 +0,0 @@
-import * as actions from '../actions';
-
-export const BINDED_KEYS = {
-	arrowUp: 'ArrowUp',
-	arrowDown: 'ArrowDown',
-	enter: 'Enter',
-	tab: 'Tab',
-};
-
-/** */
-export default (_, dispatch, onSelect) => (key) => {
-	switch (key) {
-		case BINDED_KEYS.arrowUp:
-			dispatch(actions.arrowUpPressed());
-			break;
-		case BINDED_KEYS.arrowDown:
-			dispatch(actions.arrowDownPressed());
-			dispatch(actions.showPanel());
-			break;
-		case BINDED_KEYS.enter:
-			dispatch(actions.enterPressed(onSelect));
-			break;
-		case BINDED_KEYS.tab:
-			dispatch(actions.setFocused(false));
-			dispatch(actions.hidePanel());
-			break;
-		default:
-	}
-};

package/src/components/dropdown/commons/event-callbacks/on-mousedown-callback.js

@@ -1,15 +0,0 @@
-import * as CLEAN from '../cleaner-callbacks';
-import * as actions from '../actions';
-
-/** */
-const onMouseDownCallback =
-	({ visible, id, disabled }, dispatch) =>
-	(e) => {
-		e.stopPropagation();
-		if (!visible && !disabled) {
-			CLEAN.applyAll(id);
-			dispatch(actions.showPanel());
-		}
-	};
-
-export default onMouseDownCallback;

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

@@ -1,152 +0,0 @@
-import * as actions from './actions';
-import { scrollTo } from './tools';
-import { filterOption } from '../dropdown-edit/prefix-tools';
-import { preparePrefix } from '../dropdown-edit/prefix-tools';
-
-export const initial = {
-	prefix: undefined,
-	options: [],
-	visibleOptions: [],
-	visible: false,
-	activeIndex: undefined,
-	selectedOption: undefined,
-	focused: false,
-	value: '',
-};
-
-/** */
-const isPrefix = (prefix) => prefix !== undefined && prefix.length > 0;
-
-/** */
-const reduceArrowDownPressed = (state) => {
-	const { visibleOptions, activeIndex } = state;
-	const next = visibleOptions.length
-		? Math.min(
-				visibleOptions.length - 1,
-				activeIndex === undefined ? 0 : activeIndex + 1
-		  )
-		: undefined;
-	if (next !== undefined) {
-		scrollTo(`${state.id}-option-${visibleOptions[next].value}`);
-	}
-	return { ...state, activeIndex: next };
-};
-
-/** */
-const reduceArrowUpPressed = (state) => {
-	const { visibleOptions, activeIndex } = state;
-	const next = visibleOptions.length
-		? Math.max(0, activeIndex === undefined ? 0 : activeIndex - 1)
-		: undefined;
-
-	if (next !== undefined) {
-		scrollTo(`${state.id}-option-${visibleOptions[next].value}`);
-	}
-	return { ...state, activeIndex: next };
-};
-
-/** */
-const reduceEnterPressed = (state, callback) => {
-	const { activeIndex, visibleOptions, visible } = state;
-	if (!visible) {
-		return { ...state, visible: true };
-	}
-	if (activeIndex !== undefined) {
-		const option = visibleOptions[activeIndex];
-		callback(option);
-		return {
-			...state,
-			selectedOption: option,
-			value: option.label,
-			prefix: preparePrefix(option.label),
-			visible: false,
-		};
-	}
-	return state;
-};
-
-/**  */
-const reducer = (state, action) => {
-	const { type, payload } = action;
-	switch (type) {
-		case actions.SHOW_PANEL: {
-			return { ...state, visible: true };
-		}
-		case actions.HIDE_PANEL: {
-			return { ...state, visible: false };
-		}
-		case actions.SET_ACTIVE_OPTION: {
-			const { index } = payload;
-			return {
-				...state,
-				activeIndex: index,
-			};
-		}
-		case actions.SET_OPTIONS: {
-			const { options } = payload;
-			const { prefix } = state;
-			return {
-				...state,
-				options,
-				visibleOptions: isPrefix(prefix) ? filterOption(options) : options,
-			};
-		}
-		case actions.SET_PREFIX: {
-			const { prefix } = payload;
-			const { options } = state;
-			return {
-				...state,
-				prefix,
-				activeIndex: undefined,
-				visibleOptions: isPrefix(prefix)
-					? filterOption(options, prefix)
-					: options,
-			};
-		}
-		case actions.SET_VALUE: {
-			const { value } = payload;
-			return { ...state, value };
-		}
-		case actions.SET_SELECTED_OPTION: {
-			const { option } = payload;
-			return {
-				...state,
-				value: option.label,
-				selectedOption: option,
-				prefix: preparePrefix(option.label),
-			};
-		}
-		case actions.SET_FOCUSED: {
-			const { focused } = payload;
-			return { ...state, focused };
-		}
-		case actions.RESET_SELECTION: {
-			return {
-				...state,
-				prefix: undefined,
-				value: '',
-				selectedOption: undefined,
-				activeIndex: undefined,
-				activeOption: undefined,
-				visibleOptions: state.options,
-			};
-		}
-		case actions.ARROW_UP_PRESSED: {
-			return reduceArrowUpPressed(state);
-		}
-		case actions.ARROW_DOWN_PRESSED: {
-			return reduceArrowDownPressed(state);
-		}
-		case actions.ENTER_PRESSED: {
-			const { callback } = payload;
-			return reduceEnterPressed(state, callback);
-		}
-		case actions.INIT_ACTIVE_INDEX: {
-			return { ...state, activeIndex: 0 };
-		}
-		default:
-			return state;
-	}
-};
-
-export default reducer;

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

@@ -1,17 +0,0 @@
-/** */
-export const scrollTo = id => {
-  const li = document.getElementById(id);
-  if (li) {
-    const parent = li.parentNode;
-    const pr = parent.getBoundingClientRect();
-    const lr = li.getBoundingClientRect();
-    const top = lr.top - pr.top + parent.scrollTop;
-    const bottom = lr.bottom - pr.top + parent.scrollTop;
-
-    if (bottom > parent.scrollTop + pr.height) {
-      parent.scrollTo(0, bottom - pr.height);
-    } else if (top < parent.scrollTop) {
-      parent.scrollTo(0, top);
-    }
-  }
-};