@inseefr/lunatic 0.3.2-experimental → 0.3.2-v2

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

@@ -0,0 +1,57 @@
+import React, { useRef, useCallback } from 'react';
+import classnames from 'classnames';
+import useDocumentAddEventListener from '../../use-document-add-event-listener';
+import { KEYBOARD_KEY_CODES } from './state-management/reducer/reduce-on-keydown/keyboard-key-codes';
+
+function ComboBoxContent({ children, focused, onFocus, onBlur, onKeyDown }) {
+	const ref = useRef();
+
+	const onClick = useCallback(
+		function (e) {
+			const { current } = ref;
+			if (!current.contains(e.target)) {
+				onBlur();
+			}
+		},
+		[ref, onBlur]
+	);
+
+	useDocumentAddEventListener('mousedown', onClick);
+
+	const handleKeyDown = useCallback(
+		function (e) {
+			const { key } = e;
+			e.stopPropagation();
+			switch (key) {
+				case KEYBOARD_KEY_CODES.Escape:
+				case KEYBOARD_KEY_CODES.Enter:
+				case KEYBOARD_KEY_CODES.Tab:
+					ref.current.focus();
+					break;
+				default:
+				// e.preventDefault();
+			}
+			onKeyDown(key);
+		},
+		[onKeyDown]
+	);
+
+	return (
+		<div
+			className={classnames('lunatic-combo-box', {
+				focused,
+			})}
+			onFocus={onFocus}
+			onClick={onFocus}
+			onKeyDown={handleKeyDown}
+			ref={ref}
+			tabIndex="0"
+		>
+			<div className={classnames('lunatic-combo-box-content', { focused })}>
+				{children}
+			</div>
+		</div>
+	);
+}
+
+export default ComboBoxContent;

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

@@ -0,0 +1,189 @@
+import React, { useCallback, useReducer, useEffect } from 'react';
+import PropTypes from 'prop-types';
+import classnames from 'classnames';
+import ComboBoxContent from './combo-box-content';
+import Selection from './selection';
+import Panel from './panel';
+import Delete from './selection/delete';
+import ComboBoxContainer from './combo-box-container';
+import createCustomizableLunaticField from '../../create-customizable-field';
+import { INITIAL_STATE, reducer, actions } from './state-management';
+import './combo-box.scss';
+
+import usePrevious from '../../use-previous';
+
+const EMPTY_SEARCH = '';
+
+function getDefaultOptionValue(option = {}) {
+	const { id, value } = option;
+	return id || value;
+}
+
+function ComboBox({
+	className,
+	classStyle,
+	placeholder,
+	labelledBy,
+	htmlFor,
+	editable,
+	disabled,
+	id,
+	optionRenderer,
+	labelRenderer,
+	onChange,
+	onSelect,
+	value,
+	options,
+	messageError,
+	search: searchProps,
+	getOptionValue,
+}) {
+	const [state, dispatch] = useReducer(reducer, {
+		...INITIAL_STATE,
+		search: searchProps,
+	});
+	const { focused, expended, search, selectedIndex, displayLabel } = state;
+
+	useEffect(
+		function () {
+			dispatch(
+				actions.onInit({ options, value, selectedIndex, getOptionValue })
+			);
+		},
+		[value, selectedIndex, options]
+	);
+
+	const onFocus = useCallback(function () {
+		dispatch(actions.onFocus());
+	}, []);
+
+	const onBlur = useCallback(function () {
+		dispatch(actions.onBlur());
+	}, []);
+
+	const handleSelect = useCallback(
+		function (index) {
+			const option = options[index];
+			dispatch(actions.onSelect(index));
+			onSelect(getOptionValue(option));
+		},
+		[options, onSelect]
+	);
+
+	const handleChange = useCallback(
+		function (s) {
+			dispatch(actions.onChange(s));
+			onChange(s);
+		},
+		[onChange]
+	);
+
+	const onKeyDown = useCallback(
+		function (key) {
+			const { length } = options;
+			dispatch(actions.onKeydown(key, length));
+		},
+		[options]
+	);
+
+	const onDelete = useCallback(
+		function () {
+			dispatch(actions.onDelete());
+			onChange(EMPTY_SEARCH);
+		},
+		[onChange]
+	);
+
+	if (messageError) {
+		return (
+			<div className="lunatic-combo-box-message-error">{messageError}</div>
+		);
+	}
+
+	return (
+		<ComboBoxContainer id={id} classStyle={classStyle} className={className}>
+			<ComboBoxContent
+				id={id}
+				focused={focused}
+				onFocus={onFocus}
+				onBlur={onBlur}
+				onKeyDown={onKeyDown}
+			>
+				<Selection
+					labelRenderer={labelRenderer}
+					placeholder={placeholder}
+					labelledBy={labelledBy}
+					htmlFor={htmlFor}
+					search={search}
+					expended={expended}
+					id={id}
+					disabled={disabled}
+					focused={focused}
+					editable={editable}
+					selectedIndex={selectedIndex}
+					options={options}
+					onChange={handleChange}
+					displayLabel={displayLabel}
+				/>
+				<Panel
+					optionRenderer={optionRenderer}
+					value={value}
+					options={options}
+					focused={focused}
+					selectedIndex={selectedIndex}
+					expended={expended}
+					id={id}
+					search={search}
+					onSelect={handleSelect}
+				/>
+			</ComboBoxContent>
+			<Delete
+				className={classnames({ focused })}
+				search={search}
+				onClick={onDelete}
+				editable={editable}
+			/>
+		</ComboBoxContainer>
+	);
+}
+
+ComboBox.propTypes = {
+	classStyle: PropTypes.string,
+	placeholder: PropTypes.string,
+	htmlFor: PropTypes.string.isRequired,
+	labelledBy: PropTypes.string.isRequired,
+	search: PropTypes.string,
+	editable: PropTypes.bool,
+	onSelect: PropTypes.func,
+	onChange: PropTypes.func,
+	options: PropTypes.array,
+
+	className: PropTypes.string,
+	disabled: PropTypes.bool,
+	id: PropTypes.string.isRequired,
+	optionRenderer: PropTypes.elementType.isRequired,
+	labelRenderer: PropTypes.elementType.isRequired,
+	getOptionValue: PropTypes.func,
+	// value: PropTypes.oneOf([
+	// 	null,
+	// 	PropTypes.oneOfType([
+	// 		PropTypes.string,
+	// 		PropTypes.number,
+	// 		PropTypes.array,
+	// 		PropTypes.bool,
+	// 	]),
+	// ]).isRequired,
+};
+
+ComboBox.defaultProps = {
+	classStyle: 'default-style',
+	placeholder: 'Please, do something...',
+	editable: false,
+	search: EMPTY_SEARCH,
+	onSelect: () => null,
+	onChange: () => null,
+	options: [],
+	getOptionValue: getDefaultOptionValue,
+};
+
+export default createCustomizableLunaticField(ComboBox);

package/src/components/commons/components/combo-box/combo-box.scss

@@ -0,0 +1,218 @@
+@mixin preventSelect() {
+	-moz-user-select: -moz-none;
+	-khtml-user-select: none;
+	-webkit-user-select: none;
+}
+
+@mixin placeholder {
+	color: gray;
+	@include defaultFont();
+	font-size: 15px;
+	line-height: 34px;
+	vertical-align: middle;
+	font-weight: normal;
+}
+
+@mixin defaultFont {
+	font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
+}
+
+@mixin selection() {
+	@include defaultFont();
+}
+
+.lunatic-combo-box-container {
+	position: relative;
+	width: 100%;
+
+	&.default-style {
+		--color-combo-box-selected: Cornsilk;
+		--color-primary-dark: DarkGreen;
+		--color-primary-main: FloralWhite;
+		--color-combo-box-background: snow;
+		--color-disabled: Gainsboro;
+		--color-primary-light: GreenYellow;
+
+		margin-bottom: 10px;
+		.lunatic-combo-box {
+			min-height: 30px;
+			min-width: 260px;
+			width: 100%;
+
+			.lunatic-combo-box-content {
+				.lunatic-combo-box-selection {
+					border-radius: 5px;
+					border: 2px solid var(--color-primary-dark);
+					background-color: var(--color-combo-box-background);
+					&:hover {
+						border-color: var(--color-primary-main);
+					}
+					.lunatic-combo-box-input {
+						height: 34;
+						line-height: 34px;
+						font-size: 15px;
+						padding-left: 4px;
+						@include selection();
+
+						&::placeholder {
+							@include placeholder();
+						}
+					}
+
+					.lunatic-combo-box-selected {
+						height: 34px;
+						line-height: 34px;
+						background-color: var(--color-combo-box-background);
+						border-radius: 5px;
+						padding-left: 4px;
+						@include selection();
+						outline: none;
+
+						display: block;
+						@include placeholder();
+
+						.placeholder {
+						}
+
+						.selection {
+							display: inline-block;
+							line-height: 34px;
+							font-size: 15px;
+						}
+
+						&.disabled {
+							background-color: var(--color-disabled);
+						}
+					}
+				}
+
+				.lunatic-combo-box-panel {
+					@include defaultFont();
+					height: 0;
+					opacity: 0;
+					background-color: var(--color-combo-box-background);
+					transition: opacity 267ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
+						transform 178ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+
+					&.expended {
+						border: solid 1px var(--color-primary-light);
+						opacity: 1;
+						min-height: 30px;
+						height: max-content;
+						box-shadow: 0 2px 2px grey;
+						border-radius: 4px;
+					}
+					&:focus {
+					}
+					.lunatic-combo-box-option {
+						text-overflow: ellipsis;
+						white-space: nowrap;
+						overflow: hidden;
+						margin-bottom: 0.1em;
+						line-height: 2rem;
+						display: block;
+
+						&.selected {
+							color: var(--color-primary-dark);
+							background-color: var(--color-combo-box-selected);
+						}
+						&:hover {
+							background-color: var(--color-primary-main);
+							color: var(--color-combo-box-background);
+						}
+					}
+				}
+			}
+		}
+	}
+
+	.lunatic-combo-box-fab {
+		position: absolute;
+		right: 4px;
+		top: 8px;
+		z-index: 0;
+		&.focused {
+			z-index: 1;
+		}
+
+		.lunatic-icon {
+			svg {
+				fill: white;
+				width: 16px;
+				height: 16px;
+			}
+		}
+	}
+
+	.lunatic-combo-box {
+		position: relative;
+		z-index: 0;
+
+		&:focus {
+			outline: none;
+		}
+
+		&.focused {
+			z-index: 1;
+		}
+
+		.lunatic-combo-box-content {
+			position: absolute;
+			width: 100%;
+
+			.lunatic-combo-box-selection {
+				position: relative;
+				.lunatic-combo-box-input {
+					border: none;
+					margin: 0;
+					padding: 0;
+					background-color: transparent;
+					&:focus {
+						outline: none;
+					}
+
+					width: 100%;
+					/* */
+				}
+
+				.lunatic-combo-box-selected {
+					// position: absolute;
+					top: 0;
+					white-space: nowrap;
+					overflow-x: hidden;
+					width: 100%;
+					height: 100%;
+					display: none;
+					&.displayed {
+						display: block;
+					}
+
+					.placeholder {
+					}
+					.selection {
+					}
+				}
+			}
+
+			ul,
+			li,
+			div,
+			span {
+				margin: 0;
+				padding: 0;
+				border: none;
+				list-style: none;
+			}
+
+			.lunatic-combo-box-panel {
+				&:focus {
+					outline: none;
+				}
+				.lunatic-combo-box-option {
+					white-space: nowrap;
+					@include preventSelect();
+				}
+			}
+		}
+	}
+}

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

@@ -0,0 +1,2 @@
+export { default } from './combo-box';
+export { DefaultOptionRenderer } from './panel';

package/src/components/commons/components/combo-box/panel/index.js

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

package/src/components/{suggester/components → commons/components/combo-box}/panel/option-container.js

@@ -1,6 +1,5 @@
-import React, { useRef, useEffect } from 'react';
+import React, { useRef, useEffect, useCallback } from 'react';
 import classnames from 'classnames';
-import { actions, SuggesterContext, useDispatch } from '../../state-management';
 
 function getMin(rect) {
 	const { top } = rect;
@@ -21,15 +20,17 @@ function isVisible(optionRect, parentRect) {
 	return false;
 }
 
-function OptionContainer({ children, index, selected }) {
+function OptionContainer({ children, index, selected, onSelect }) {
 	const ref = useRef();
-	const dispatch = useDispatch(SuggesterContext);
 
-	function onClick(e) {
-		e.stopPropagation();
-		e.preventDefault();
-		dispatch(actions.onClickOption(index));
-	}
+	const onClick = useCallback(
+		function (e) {
+			e.stopPropagation();
+			e.preventDefault();
+			onSelect(index);
+		},
+		[onSelect, index]
+	);
 
 	useEffect(
 		function () {
@@ -37,6 +38,7 @@ function OptionContainer({ children, index, selected }) {
 			if (current && selected) {
 				const oRect = current.getBoundingClientRect();
 				const pRect = current.parentNode.getBoundingClientRect();
+
 				if (!isVisible(oRect, pRect)) {
 					current.scrollIntoView();
 				}
@@ -47,10 +49,10 @@ function OptionContainer({ children, index, selected }) {
 
 	return (
 		<li
-			className={classnames('lunatic-suggester-option', { selected })}
+			className={classnames('lunatic-combo-box-option-container', { selected })}
 			role="option"
 			aria-selected={selected}
-			onMouseDown={onClick}
+			onClick={onClick}
 			ref={ref}
 		>
 			{children}

package/src/components/{suggester/components → commons/components/combo-box}/panel/panel-container.js

@@ -1,21 +1,20 @@
-import React from 'react';
-import classnames from 'classnames';
-
-function PanelContainer({ children, focused, expended, id }) {
-	return (
-		<ul
-			id={id}
-			tabIndex="-1"
-			aria-label="suggestions"
-			className={classnames('lunatic-suggester-panel', {
-				focused,
-				expended,
-			})}
-			role="listbox"
-		>
-			{children}
-		</ul>
-	);
-}
-
-export default PanelContainer;
+import React from 'react';
+import classnames from 'classnames';
+
+function PanelContainer({ children, focused, expended, id }) {
+	return (
+		<ul
+			id={`lunatic-combo-box-panel-${id}`}
+			aria-label="suggestions"
+			className={classnames('lunatic-combo-box-panel', {
+				focused,
+				expended,
+			})}
+			role="listbox"
+		>
+			{children}
+		</ul>
+	);
+}
+
+export default PanelContainer;

package/src/components/{suggester/components → commons/components/combo-box}/panel/panel.js

@@ -1,40 +1,51 @@
-import React, { useContext } from 'react';
-import { SuggesterContext } from '../../state-management';
+import React from 'react';
 import PanelContainer from './panel-container';
 import OptionContainer from './option-container';
 
 function getContent({
 	options,
-	OptionRender,
+	optionRenderer: OptionRender,
 	selectedIndex,
 	expended,
-	value,
 	search,
+	onSelect,
 }) {
 	if (expended) {
 		return options.map(function (option, index) {
-			const { id } = option;
+			const { id, value } = option;
 			const selected = selectedIndex === index;
 			return (
-				<OptionContainer key={id} index={index} selected={id === value}>
+				<OptionContainer
+					key={id ?? value}
+					index={index}
+					selected={selected}
+					onSelect={onSelect}
+				>
 					<OptionRender option={option} selected={selected} search={search} />
 				</OptionContainer>
 			);
 		});
 	}
-	return undefined;
+	return null;
 }
 
-function Panel({ optionRenderer: OptionRender, value }) {
-	const [state] = useContext(SuggesterContext);
-	const { options, focused, selectedIndex, expended, id, search } = state;
+function Panel({
+	optionRenderer,
+	options,
+	focused,
+	selectedIndex,
+	expended,
+	id,
+	search,
+	onSelect,
+}) {
 	const content = getContent({
 		options,
-		OptionRender,
+		optionRenderer,
 		selectedIndex,
 		expended,
-		value,
 		search,
+		onSelect,
 	});
 
 	return (

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

@@ -0,0 +1,40 @@
+import React, { useMemo } from 'react';
+import classnames from 'classnames';
+import { Fab } from '../../fab';
+import { CrossIcon } from '../../../../commons/icons';
+
+function isDisabled(search) {
+	return !search || search.trim().length === 0;
+}
+
+function createOnKeyDown(onClick) {
+	if (typeof onClick === 'function') {
+		return function onKeyDown(e) {
+			const { key } = e;
+			if (key === 'Enter') {
+				onClick();
+			}
+		};
+	}
+	return () => null;
+}
+
+function Delete({ className, search, onClick, editable }) {
+	const onKeyDown = useMemo(() => createOnKeyDown(onClick), [onClick]);
+	if (editable) {
+		return (
+			<Fab
+				className={classnames('mini', 'lunatic-combo-box-fab', className)}
+				title="delete"
+				onClick={onClick}
+				disabled={isDisabled(search)}
+				onKeyDown={onKeyDown}
+			>
+				<CrossIcon className="lunatic-combo-box-icon" />
+			</Fab>
+		);
+	}
+	return null;
+}
+
+export default Delete;

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

@@ -0,0 +1,23 @@
+import React from 'react';
+
+function displayLabelOrInput(Field) {
+	const Memoized = React.memo(Field);
+	const { name } = Field;
+
+	return function LabelOrInput(props) {
+		const { editable, expended } = props;
+
+		const displayLabel = !editable || !expended;
+
+		if (
+			(name === 'Input' && !displayLabel) ||
+			(name === 'Label' && displayLabel)
+		) {
+			return <Memoized {...props} />;
+		}
+
+		return null;
+	};
+}
+
+export default displayLabelOrInput;

package/src/components/{suggester/components → commons/components/combo-box}/selection/index.js

@@ -1 +1 @@
-export { default } from './selection';
+export { default } from './selection';