@inseefr/lunatic 0.2.62 → 0.3.0-v2

package/src/components/commons/components/combo-box/selection/input.js

@@ -0,0 +1,55 @@
+import React, { useRef, useEffect } from 'react';
+import classnames from 'classnames';
+import displayLabelOrInput from './displayLabelOrInput';
+
+function Input({
+	placeholder,
+	disabled,
+	onChange,
+	value,
+	id,
+	labelledBy,
+	focused,
+	className,
+}) {
+	const inputEl = useRef();
+
+	useEffect(
+		function () {
+			if (inputEl.current && focused) {
+				inputEl.current.focus();
+			}
+		},
+		[inputEl, focused]
+	);
+
+	function onKeydown(e) {
+		const { key } = e;
+		if (key === 'ArrowUp' || key === 'ArrowDown') {
+			e.preventDefault();
+		}
+	}
+
+	return (
+		<input
+			ref={inputEl}
+			id={id}
+			className={classnames('lunatic-combo-box-input', className)}
+			type="text"
+			onChange={onChange}
+			value={value}
+			aria-label="lunatic-combo-box"
+			title="combo-box"
+			autoComplete="off"
+			autoCapitalize="off"
+			autoCorrect="off"
+			spellCheck="false"
+			placeholder={placeholder}
+			disabled={disabled}
+			aria-labelledby={labelledBy}
+			onKeyDown={onKeydown}
+		/>
+	);
+}
+
+export default displayLabelOrInput(Input);

package/src/components/commons/components/combo-box/selection/label.js

@@ -0,0 +1,29 @@
+import React from 'react';
+import classnames from 'classnames';
+import displayLabelOrInput from './displayLabelOrInput';
+
+function Label({
+	labelRenderer: Renderer,
+	placeholder,
+	selectedIndex,
+	options,
+	search,
+	disabled,
+	labelledBy,
+}) {
+	const option =
+		selectedIndex !== undefined ? options[selectedIndex] : undefined;
+
+	return (
+		<div
+			className={classnames('lunatic-combo-box-selected', {
+				disabled,
+			})}
+			aria-labelledby={labelledBy}
+		>
+			<Renderer option={option} placeholder={placeholder} search={search} />
+		</div>
+	);
+}
+
+export default displayLabelOrInput(Label);

package/src/components/commons/components/combo-box/selection/selection-container.js

@@ -0,0 +1,32 @@
+import React from 'react';
+import classnames from 'classnames';
+
+function SelectionContainer({
+	children,
+
+	id,
+	expended,
+	focused,
+	disabled,
+}) {
+	const comboBoxId = `lunatic-combo-box-selection-${id}`;
+	return (
+		<div
+			id={comboBoxId}
+			className={classnames('lunatic-combo-box-selection', {
+				focused,
+				disabled,
+			})}
+			role="combobox"
+			aria-controls={'todo'}
+			aria-haspopup="listbox"
+			aria-expanded={expended}
+			aria-autocomplete="list"
+			aria-owns={comboBoxId}
+		>
+			{children}
+		</div>
+	);
+}
+
+export default SelectionContainer;

package/src/components/commons/components/combo-box/selection/selection.js

@@ -0,0 +1,63 @@
+import React, { useCallback } from 'react';
+import Label from './label';
+import Input from './input';
+import SelectionContainer from './selection-container';
+
+function Selection({
+	labelRenderer,
+	placeholder,
+	search,
+	expended,
+	htmlFor,
+	disabled,
+	focused,
+	onChange,
+	selectedIndex,
+	options,
+	editable,
+	labelledBy,
+	id,
+}) {
+	const onChangeEx = useCallback(
+		function (e) {
+			onChange(e.target.value);
+		},
+		[onChange]
+	);
+
+	return (
+		<SelectionContainer
+			id={id}
+			aria-controls={'todo'}
+			expanded={expended}
+			ariaOwns={`${id}-list`}
+		>
+			<Label
+				id={htmlFor}
+				labelRenderer={labelRenderer}
+				placeholder={placeholder}
+				editable={editable}
+				selectedIndex={selectedIndex}
+				options={options}
+				search={search}
+				disabled={disabled}
+				labelledBy={labelledBy}
+				expended={expended}
+			/>
+
+			<Input
+				id={htmlFor}
+				className="lunatic-combo-box-input"
+				onChange={onChangeEx}
+				value={search}
+				placeholder={placeholder}
+				disabled={disabled}
+				focused={focused}
+				editable={editable}
+				expended={expended}
+			/>
+		</SelectionContainer>
+	);
+}
+
+export default Selection;

package/src/components/commons/components/combo-box/state-management/actions.js

@@ -0,0 +1,29 @@
+export const ON_CHANGE = 'combo-box/on-change';
+export const onChange = (search) => ({ type: ON_CHANGE, payload: { search } });
+
+export const ON_SELECT = 'combo-box/on-select';
+export const onSelect = (selectedIndex) => ({
+	type: ON_SELECT,
+	payload: { selectedIndex },
+});
+
+export const ON_KEYDOWN = 'combo-box/on-keydown';
+export const onKeydown = (key, nbOptions) => ({
+	type: ON_KEYDOWN,
+	payload: { key, nbOptions },
+});
+
+export const ON_DELETE = 'combo-box/on-delete';
+export const onDelete = () => ({ type: ON_DELETE });
+
+export const ON_FOCUS = 'combo-box/on-focus';
+export const onFocus = () => ({ type: ON_FOCUS });
+
+export const ON_BLUR = 'combo-box/on-blur';
+export const onBlur = () => ({ type: ON_BLUR });
+
+export const ON_INIT = 'combo-box/on-init';
+export const onInit = ({ ...args }) => ({
+	type: ON_INIT,
+	payload: { ...args },
+});

package/src/components/commons/components/combo-box/state-management/combo-box-context.js

@@ -0,0 +1,8 @@
+import React from 'react';
+
+const ComboBoxContext = React.createContext({
+	dispatch: (state) => state,
+	state: {},
+});
+
+export default ComboBoxContext;

package/src/components/commons/components/combo-box/state-management/index.js

@@ -0,0 +1,4 @@
+export { default as INITIAL_STATE } from './initial-state';
+export { default as reducer } from './reducer';
+export { default as ComboBoxContext } from './combo-box-context';
+export * as actions from './actions';

package/src/components/commons/components/combo-box/state-management/initial-state.js

@@ -0,0 +1,8 @@
+const INITIAL_STATE = {
+	focused: false,
+	expended: false,
+	selectedIndex: undefined,
+	search: '',
+};
+
+export default INITIAL_STATE;

package/src/components/commons/components/combo-box/state-management/reducer/index.js

@@ -0,0 +1 @@
+export { default } from './reducer';

package/src/components/commons/components/combo-box/state-management/reducer/reduce-on-blur.js

@@ -0,0 +1,5 @@
+function reduceOnBlur(state) {
+	return { ...state, expended: false, focused: false };
+}
+
+export default reduceOnBlur;

package/src/components/commons/components/combo-box/state-management/reducer/reduce-on-change.js

@@ -0,0 +1,8 @@
+function reduceOnChange(state, action) {
+	const { payload } = action;
+	const { search } = payload;
+
+	return { ...state, search, selectedIndex: undefined };
+}
+
+export default reduceOnChange;

package/src/components/commons/components/combo-box/state-management/reducer/reduce-on-delete.js

@@ -0,0 +1,10 @@
+function reduceOnDelete(state) {
+	return {
+		...state,
+		search: '',
+		selectedIndex: undefined,
+		expended: false,
+	};
+}
+
+export default reduceOnDelete;

package/src/components/commons/components/combo-box/state-management/reducer/reduce-on-focus.js

@@ -0,0 +1,5 @@
+function reduceOnFocus(state) {
+	return { ...state, expended: true, focused: true };
+}
+
+export default reduceOnFocus;

package/src/components/commons/components/combo-box/state-management/reducer/reduce-on-init.js

@@ -0,0 +1,23 @@
+function reduceOnInit(state, action) {
+	const { payload } = action;
+	const { options, value, selectedIndex, getOptionValue } = payload;
+
+	if (Array.isArray(options) && selectedIndex === undefined) {
+		const next = options.reduce(function (current, option, index) {
+			const optionValue = getOptionValue(option);
+			if (value === optionValue) {
+				return index;
+			}
+			return current;
+		}, undefined);
+		return { ...state, selectedIndex: next };
+	}
+
+	if (!value) {
+		return { ...state, selectedIndex: undefined };
+	}
+
+	return state;
+}
+
+export default reduceOnInit;

package/src/components/commons/components/combo-box/state-management/reducer/reduce-on-keydown/index.js

@@ -0,0 +1 @@
+export { default } from './reduce-on-keydown';

package/src/components/commons/components/combo-box/state-management/reducer/reduce-on-keydown/keyboard-key-codes.js

@@ -0,0 +1,11 @@
+export const KEYBOARD_KEY_CODES = {
+	ArrowUp: 'ArrowUp',
+	ArrowDown: 'ArrowDown',
+	Home: 'Home',
+	End: 'End',
+	Enter: 'Enter',
+	Escape: 'Escape',
+	Tab: 'Tab',
+};
+
+export default KEYBOARD_KEY_CODES;

package/src/components/commons/components/combo-box/state-management/reducer/reduce-on-keydown/on-arrow-down.js

@@ -0,0 +1,22 @@
+function onArrowDown(state, nbOptions) {
+	if (nbOptions) {
+		const { selectedIndex } = state;
+
+		if (selectedIndex !== undefined) {
+			return {
+				...state,
+				selectedIndex: Math.min(selectedIndex + 1, nbOptions - 1),
+				expended: true,
+			};
+		}
+		return {
+			...state,
+			selectedIndex: 0,
+			expended: true,
+		};
+	}
+
+	return { ...state, expended: true };
+}
+
+export default onArrowDown;

package/src/components/commons/components/combo-box/state-management/reducer/reduce-on-keydown/on-arrow-up.js

@@ -0,0 +1,22 @@
+function onArrowUp(state, nbOptions) {
+	if (nbOptions) {
+		const { selectedIndex } = state;
+
+		if (selectedIndex !== undefined) {
+			return {
+				...state,
+				selectedIndex: Math.max(selectedIndex - 1, 0),
+				expended: true,
+			};
+		}
+		return {
+			...state,
+			selectedIndex: 0,
+			expended: true,
+		};
+	}
+
+	return { ...state, expended: true };
+}
+
+export default onArrowUp;

package/src/components/commons/components/combo-box/state-management/reducer/reduce-on-keydown/on-end.js

@@ -0,0 +1,13 @@
+function onEnd(state, nbOptions) {
+	if (nbOptions) {
+		return {
+			...state,
+			selectedIndex: nbOptions - 1,
+			expended: true,
+		};
+	}
+
+	return { ...state, expended: true };
+}
+
+export default onEnd;

package/src/components/commons/components/combo-box/state-management/reducer/reduce-on-keydown/on-enter.js

@@ -0,0 +1,6 @@
+function onEnter(state) {
+	const { expended } = state;
+	return { ...state, expended: !expended, focused: true };
+}
+
+export default onEnter;

package/src/components/commons/components/combo-box/state-management/reducer/reduce-on-keydown/on-escape.js

@@ -0,0 +1,5 @@
+function onEscape(state) {
+	return { ...state, expended: false, focused: true };
+}
+
+export default onEscape;

package/src/components/commons/components/combo-box/state-management/reducer/reduce-on-keydown/on-home.js

@@ -0,0 +1,13 @@
+function onHome(state, nbOptions) {
+	if (nbOptions) {
+		return {
+			...state,
+			selectedIndex: 0,
+			expended: true,
+		};
+	}
+
+	return { ...state, expended: true };
+}
+
+export default onHome;

package/src/components/commons/components/combo-box/state-management/reducer/reduce-on-keydown/on-tab.js

@@ -0,0 +1,5 @@
+function onTab(state) {
+	return { ...state, expended: false, focused: false };
+}
+
+export default onTab;

package/src/components/commons/components/combo-box/state-management/reducer/reduce-on-keydown/reduce-on-keydown.js

@@ -0,0 +1,34 @@
+import KEYBOARD_KEY_CODES from './keyboard-key-codes';
+import onArrowDown from './on-arrow-down';
+import onArrowUp from './on-arrow-up';
+import onTab from './on-tab';
+import onHome from './on-home';
+import onEnd from './on-end';
+import onEnter from './on-enter';
+import onEscape from './on-escape';
+
+function reduceOnKeyDown(state, action) {
+	const { payload } = action;
+	const { key, nbOptions } = payload;
+
+	switch (key) {
+		case KEYBOARD_KEY_CODES.Tab:
+			return onTab(state, nbOptions);
+		case KEYBOARD_KEY_CODES.ArrowDown:
+			return onArrowDown(state, nbOptions);
+		case KEYBOARD_KEY_CODES.ArrowUp:
+			return onArrowUp(state, nbOptions);
+		case KEYBOARD_KEY_CODES.Home:
+			return onHome(state, nbOptions);
+		case KEYBOARD_KEY_CODES.End:
+			return onEnd(state, nbOptions);
+		case KEYBOARD_KEY_CODES.Enter:
+			return onEnter(state, nbOptions);
+		case KEYBOARD_KEY_CODES.Escape:
+			return onEscape(state, nbOptions);
+		default:
+			return state;
+	}
+}
+
+export default reduceOnKeyDown;

package/src/components/commons/components/combo-box/state-management/reducer/reduce-on-select.js

@@ -0,0 +1,8 @@
+function reduceOnSelect(state, action) {
+	const { payload } = action;
+	const { selectedIndex } = payload;
+
+	return { ...state, selectedIndex, expended: false };
+}
+
+export default reduceOnSelect;

package/src/components/commons/components/combo-box/state-management/reducer/reducer.js

@@ -0,0 +1,32 @@
+import * as actions from '../actions';
+import reduceOnFocus from './reduce-on-focus';
+import reduceOnBlur from './reduce-on-blur';
+import reduceOnChange from './reduce-on-change';
+import reduceOnSelect from './reduce-on-select';
+import reduceOnDelete from './reduce-on-delete';
+import reduceOnKeydown from './reduce-on-keydown';
+import reduceOnInit from './reduce-on-init';
+
+function reducer(state, action) {
+	const { type } = action;
+	switch (type) {
+		case actions.ON_FOCUS:
+			return reduceOnFocus(state, action);
+		case actions.ON_BLUR:
+			return reduceOnBlur(state, action);
+		case actions.ON_CHANGE:
+			return reduceOnChange(state, action);
+		case actions.ON_SELECT:
+			return reduceOnSelect(state, action);
+		case actions.ON_DELETE:
+			return reduceOnDelete(state, action);
+		case actions.ON_KEYDOWN:
+			return reduceOnKeydown(state, action);
+		case actions.ON_INIT:
+			return reduceOnInit(state, action);
+		default:
+			return state;
+	}
+}
+
+export default reducer;

package/src/components/commons/components/create-lunatic-component/create-lunatic-component.js

@@ -0,0 +1,58 @@
+import React from 'react';
+import useOnHandleChange from '../../use-on-handle-change';
+import LunaticComponent from '../lunatic-component';
+import LunaticFieldsetComponent from '../lunatic-fieldset-component';
+
+/*
+	Pour le moment HOC utilisé pour :
+		Input
+		InputNumber
+		DatePicker
+		Switch
+		Dropdown
+		Suggester
+
+
+*/
+
+function getComponent(fieldset) {
+	if (fieldset) {
+		return LunaticFieldsetComponent;
+	}
+	return LunaticComponent;
+}
+
+function createLunaticComponent(
+	HtmlComponent,
+	{
+		labelId = 'lunatic-label',
+		inputId = 'lunatic-input',
+		fieldset = false,
+	} = {}
+) {
+	const Memoized = React.memo(HtmlComponent);
+
+	return function LunaticHandlerComponent(props) {
+		const { id, value, handleChange, response } = props;
+
+		const inputId_ = `${inputId}-${id}`;
+		const labelId_ = `${labelId}-${id}`;
+		const Component = getComponent(fieldset);
+		const onChange = useOnHandleChange({ handleChange, response, value });
+
+		return (
+			<>
+				<Component {...props} labelId={labelId_} inputId={inputId_}>
+					<Memoized
+						{...props}
+						onChange={onChange}
+						id={inputId_}
+						labelId={labelId_}
+					/>
+				</Component>
+			</>
+		);
+	};
+}
+
+export default createLunaticComponent;

package/src/components/commons/components/create-lunatic-component/index.js

@@ -0,0 +1,5 @@
+import createVariableResponse from './create-lunatic-component';
+
+// TODO: cascade HOC habillage
+
+export default createVariableResponse;

package/src/components/commons/components/default-label-renderer.js

@@ -0,0 +1,31 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+function getContent(option, search) {
+	if (option) {
+		const { id, value, label } = option;
+		return label ? `${id || value} - ${label}` : id || value;
+	}
+	if (search && search.trim().length) {
+		return search;
+	}
+	return null;
+}
+
+function DefaultLabelRenderer({ option, placeholder, search }) {
+	const content = getContent(option, search);
+	if (content) {
+		return <span className="selection">{content}</span>;
+	}
+	return <span className="placeholder">{placeholder}</span>;
+}
+
+DefaultLabelRenderer.propTypes = {
+	option: PropTypes.shape({
+		id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
+	}),
+	placeholder: PropTypes.string,
+	search: PropTypes.string,
+};
+
+export default DefaultLabelRenderer;

package/src/components/commons/components/default-option-renderer.js

@@ -0,0 +1,27 @@
+import React from 'react';
+import classnames from 'classnames';
+
+function DefaultOptionRenderer({ option, selected }) {
+	const { id, value, label } = option;
+
+	if (label && label.length) {
+		return (
+			<div className={classnames('lunatic-combo-box-option', { selected })}>
+				<span className="id">{id || value}</span>
+				{label && (
+					<>
+						<span> - </span>
+						<span className="label">{label}</span>
+					</>
+				)}
+			</div>
+		);
+	}
+	return (
+		<div className={classnames('lunatic-combo-box-option', { selected })}>
+			<span className="id">{id}</span>
+		</div>
+	);
+}
+
+export default DefaultOptionRenderer;

package/src/components/commons/components/dragger/dragger.js

@@ -0,0 +1,64 @@
+import React, { useState, useEffect, useCallback } from 'react';
+import PropTypes from 'prop-types';
+import { useDocumentAddEventListener } from '../../../commons';
+import './dragger.scss';
+
+function Dragger({ el, children, onDrag }) {
+	const [drag, setDrag] = useState(false);
+	const [delta, setDelta] = useState([undefined, undefined]);
+	const [anchor, setAnchor] = useState([undefined, undefined]);
+
+	function onMouseDown(e) {
+		const { clientX, clientY } = e;
+		setDrag(true);
+		setAnchor([clientX, clientY]);
+		onDrag(true, [clientX, clientY]);
+	}
+
+	function onMouseUp() {
+		setDrag(false);
+		onDrag(false);
+	}
+
+	const onMouseMove = useCallback(
+		function (e) {
+			const { clientX, clientY } = e;
+			if (drag) {
+				const [ax, ay] = anchor;
+				const dx = clientX - ax;
+				const dy = clientY - ay;
+				setAnchor([clientX, clientY]);
+				setDelta([dx, dy]);
+				onDrag(true, [dx, dy]);
+			}
+		},
+		[drag, anchor, onDrag]
+	);
+
+	useEffect(
+		function () {
+			const [dx, dy] = delta;
+			if (el && dx !== undefined && dy !== undefined) {
+				const { top, left } = el.getBoundingClientRect();
+				el.style.top = `${top + dy}px`;
+				el.style.left = `${left + dx}px`;
+			}
+		},
+		[el, delta]
+	);
+
+	useDocumentAddEventListener('mousemove', onMouseMove);
+	useDocumentAddEventListener('mouseup', onMouseUp);
+
+	return (
+		<div className="lunatic-dragger" onMouseDown={onMouseDown}>
+			{children}
+		</div>
+	);
+}
+
+Dragger.propTypes = { el: PropTypes.object, onDrag: PropTypes.func };
+
+Dragger.defaultProps = { el: undefined, onDrag: () => null };
+
+export default Dragger;