@inseefr/lunatic 0.1.6 → 0.1.8-experimental

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

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

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

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

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

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

@@ -0,0 +1,149 @@
+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);
+		}
+		default:
+			return state;
+	}
+};
+
+export default reducer;

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

@@ -0,0 +1,17 @@
+/** */
+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);
+    }
+  }
+};

package/src/components/dropdown/component.js

@@ -0,0 +1,128 @@
+import React, { useState, useEffect } from 'react';
+import PropTypes from 'prop-types';
+import missingWrapper from '../missing-wrapper';
+import DropdownSimple from './dropdown-simple';
+import DropdownEdit from './dropdown-edit';
+import Declarations from '../declarations';
+import * as U from '../../utils/lib';
+import * as C from '../../constants';
+import { interpret } from '../../utils/to-expose';
+import './dropdown.scss';
+
+const Dropdown = ({
+	id,
+	label,
+	preferences,
+	response,
+	handleChange,
+	options,
+	writable,
+	declarations,
+	features,
+	bindings,
+	management,
+	freezeOptions,
+	...rest
+}) => {
+	const [opts, setOpts] = useState(options);
+
+	//TODO: improve feature support for MD, adding plainText to options & search input
+	const updatedFeatures = features.reduce(
+		(acc, f) => (f === 'MD' ? acc : [...acc, f]),
+		[]
+	);
+
+	useEffect(() => {
+		if (!freezeOptions) {
+			const featOptions = options.map(
+				({ label: labelOption, ...restOpts }) => ({
+					label: interpret(updatedFeatures)(bindings)(labelOption),
+					...restOpts,
+				})
+			);
+			setOpts(featOptions);
+		}
+	}, [freezeOptions, features, bindings, options]);
+
+	const interpretedLabel = interpret(features, rest?.logFunction)(bindings)(
+		label
+	);
+	const value = U.getResponseByPreference(preferences)(response);
+
+	const onSelect = (e) =>
+		handleChange({
+			[U.getResponseName(response)]: e.value,
+		});
+	return (
+		<>
+			<Declarations
+				id={id}
+				type={C.BEFORE_QUESTION_TEXT}
+				declarations={declarations}
+				features={features}
+				bindings={bindings}
+			/>
+			<Declarations
+				id={id}
+				type={C.AFTER_QUESTION_TEXT}
+				declarations={declarations}
+				features={features}
+				bindings={bindings}
+			/>
+			{writable ? (
+				<DropdownEdit
+					{...rest}
+					id={id}
+					value={value}
+					response={response}
+					label={interpretedLabel}
+					options={opts}
+					onSelect={onSelect}
+					management={management}
+				/>
+			) : (
+				<DropdownSimple
+					{...rest}
+					id={id}
+					value={value}
+					response={response}
+					label={interpretedLabel}
+					options={opts}
+					onSelect={onSelect}
+					management={management}
+				/>
+			)}
+			<Declarations
+				id={id}
+				type={C.DETACHABLE}
+				declarations={declarations}
+				features={features}
+				bindings={bindings}
+			/>
+		</>
+	);
+};
+
+Dropdown.propTypes = {
+	disabled: PropTypes.bool,
+	writable: PropTypes.bool,
+	features: PropTypes.arrayOf(PropTypes.string),
+	handleChange: PropTypes.func,
+	label: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
+	className: PropTypes.string,
+	zIndex: PropTypes.number,
+	freezeOptions: PropTypes.bool,
+};
+
+Dropdown.defaultProps = {
+	writable: false,
+	handleChange: () => null,
+	features: [],
+	label: undefined,
+	className: undefined,
+	zIndex: 0,
+	disabled: false,
+	freezeOptions: false,
+};
+
+export default React.memo(missingWrapper(Dropdown), U.areEqual);

package/src/components/dropdown/dropdown-edit/dropdown-edit.js

@@ -0,0 +1,190 @@
+import React, { useReducer, useRef, useEffect } from 'react';
+import classnames from 'classnames';
+import PropTypes from 'prop-types';
+import * as actions from '../commons/actions';
+import Panel from '../commons/components/panel';
+import DropdownContainer from '../commons/components/dropdown';
+import { preparePrefix } from './prefix-tools';
+import reducer, { initial } from '../commons/reducer';
+import Option from './option';
+import Icone from './icone';
+
+/* **/
+const isDisplay = ({ visible, visibleOptions }) =>
+	visible && visibleOptions.length > 0;
+
+/** */
+const onChangeCallback = (state, dispatch) => (e) => {
+	e.stopPropagation();
+	e.preventDefault();
+	const {
+		target: { value },
+	} = e;
+	dispatch(actions.setValue(value));
+	dispatch(actions.setPrefix(preparePrefix(value)));
+	if (value && value.length > 1) dispatch(actions.showPanel());
+};
+
+/** */
+const createOnSelect = (_, dispatch, onSelect) => (option) => {
+	dispatch(actions.setSelectedOption(option));
+	dispatch(actions.hidePanel());
+	onSelect(option);
+};
+
+/**
+ *
+ * @param {props}
+ */
+function Dropdown({
+	widthAuto,
+	options = [],
+	onSelect,
+	response,
+	className,
+	placeholder,
+	label,
+	labelPosition,
+	mandatory,
+	value: valueFromProps,
+	zIndex,
+	management,
+	disabled,
+	focused: initFocused,
+}) {
+	const [state, dispatch] = useReducer(reducer, {
+		...initial,
+		id: `dropdown-${new Date().getMilliseconds()}`,
+		disabled,
+		focused: initFocused,
+	});
+	const {
+		prefix,
+		visible,
+		activeIndex,
+		visibleOptions,
+		value,
+		focused,
+		id,
+	} = state;
+	const inputEl = useRef();
+	const containerEl = useRef();
+	const onSelect_ = createOnSelect(state, dispatch, onSelect);
+
+	const selectedOption = options.find((o) => o.label === value);
+
+	useEffect(
+		function () {
+			const { current } = inputEl;
+			if (current && focused) {
+				current.focus();
+			}
+		},
+		[inputEl, focused]
+	);
+
+	return (
+		<DropdownContainer
+			className={className || 'lunatic-dropdown'}
+			state={state}
+			ref={containerEl}
+			dispatch={dispatch}
+			options={options}
+			label={label}
+			labelPosition={labelPosition}
+			mandatory={mandatory}
+			response={response}
+			onSelect={onSelect_}
+			value={valueFromProps}
+			zIndex={zIndex}
+			management={management}
+		>
+			<span
+				className={classnames('lunatic-dropdown-input', { focused, disabled })}
+			>
+				<input
+					type="text"
+					ref={inputEl}
+					value={value || ''}
+					disabled={disabled}
+					placeholder={placeholder}
+					autoComplete="list"
+					autoCorrect="off"
+					autoCapitalize="off"
+					spellCheck="false"
+					tabIndex="0"
+					onChange={onChangeCallback(state, dispatch)}
+				/>
+			</span>
+			<Icone
+				prefix={prefix}
+				visible={visible}
+				disabled={disabled}
+				onDelete={(e) => {
+					e.stopPropagation();
+					inputEl.current.value = '';
+					dispatch(actions.resetSelection());
+					onSelect_({ value: null });
+				}}
+				onSwitch={(e) => {
+					e.stopPropagation();
+					e.preventDefault();
+					if (visible) {
+						dispatch(actions.hidePanel());
+					} else {
+						dispatch(actions.showPanel());
+						containerEl.current.focus();
+					}
+				}}
+			/>
+			<div
+				tabIndex="-1"
+				className={classnames('lunatic-transition', {
+					visible: isDisplay(state),
+					'width-auto': widthAuto,
+				})}
+			>
+				<Panel
+					idDropdown={id}
+					options={visibleOptions}
+					display={isDisplay(state) && !disabled}
+					prefix={prefix}
+					activeIndex={activeIndex}
+					optionComponent={Option}
+					selectedOption={selectedOption}
+					onSelect={onSelect_}
+					handleActive={(index) => dispatch(actions.setActiveOption(index))}
+				/>
+			</div>
+		</DropdownContainer>
+	);
+}
+
+Dropdown.propTypes = {
+	widthAuto: PropTypes.bool,
+	zIndex: PropTypes.number,
+	disabled: PropTypes.bool,
+	focused: PropTypes.bool,
+	className: PropTypes.string,
+	id: PropTypes.string,
+	options: PropTypes.array.isRequired,
+	onSelect: PropTypes.func,
+	placeholder: PropTypes.string,
+	value: PropTypes.oneOfType([
+		PropTypes.string,
+		PropTypes.number,
+		PropTypes.bool,
+	]),
+};
+
+Dropdown.defaultProps = {
+	options: [],
+	zIndex: 0,
+	onSelect: () => null,
+	placeholder: 'Search...',
+	disabled: false,
+	focused: false,
+	widthAuto: false,
+};
+
+export default Dropdown;

package/src/components/dropdown/dropdown-edit/icone.js

@@ -0,0 +1,33 @@
+import React from 'react';
+import OpenedIcon from '../../../utils/icons/opened.icon';
+import CrossIcon from '../../../utils/icons/cross.icon';
+import ClosedIcon from '../../../utils/icons/closed.icon';
+
+/** */
+const getIcon = (visible) =>
+	visible ? (
+		<OpenedIcon className="lunatic-dropdown-icon" width={16} height={16} />
+	) : (
+		<ClosedIcon className="lunatic-dropdown-icon" width={16} height={16} />
+	);
+
+const Icon = ({ prefix, visible, disabled, onDelete, onSwitch }) => {
+	if (disabled) {
+		return (
+			<span tabIndex="-1" onMouseDown={onSwitch}>
+				<ClosedIcon className="lunatic-dropdown-icon" width={16} height={16} />
+			</span>
+		);
+	}
+	return prefix && prefix.length > 0 ? (
+		<span tabIndex="-1" onMouseDown={onDelete}>
+			<CrossIcon className="lunatic-dropdown-icon" width={16} height={16} />
+		</span>
+	) : (
+		<span tabIndex="-1" onMouseDown={onSwitch}>
+			{getIcon(visible)}
+		</span>
+	);
+};
+
+export default Icon;

package/src/components/dropdown/dropdown-edit/index.js

@@ -0,0 +1,11 @@
+import React from "react";
+import DropdownEdit from "./dropdown-edit";
+import childrenToOption from "../commons/children-to-option";
+
+const createDropDown = Component => ({ children, options, ...props }) => {
+  const o = options || childrenToOption(children);
+  return <Component options={o} {...props} />;
+};
+
+export default createDropDown(DropdownEdit);
+export { default as Option } from "./option";