@inseefr/lunatic 0.2.61 → 0.3.1-experimental

package/src/components/suggester/components/index.js

@@ -0,0 +1,2 @@
+export { default as Suggester } from './suggester';
+export { DefaultOptionRenderer } from './panel';

package/src/components/suggester/components/panel/default-option-renderer.js

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

package/src/components/suggester/components/panel/index.js

@@ -0,0 +1,2 @@
+export { default } from './panel';
+export { default as DefaultOptionRenderer } from './default-option-renderer';

package/src/components/suggester/components/panel/option-container.js

@@ -0,0 +1,61 @@
+import React, { useRef, useEffect } from 'react';
+import classnames from 'classnames';
+import { actions, SuggesterContext, useDispatch } from '../../state-management';
+
+function getMin(rect) {
+	const { top } = rect;
+	return top;
+}
+
+function getMax(rect) {
+	const { top, height } = rect;
+	return top + height;
+}
+
+function isVisible(optionRect, parentRect) {
+	const min = Math.min(getMin(optionRect), getMin(parentRect));
+	const max = Math.max(getMax(optionRect), getMax(parentRect));
+	if (max - min < optionRect.height + parentRect.height) {
+		return true;
+	}
+	return false;
+}
+
+function OptionContainer({ children, index, selected }) {
+	const ref = useRef();
+	const dispatch = useDispatch(SuggesterContext);
+
+	function onClick(e) {
+		e.stopPropagation();
+		e.preventDefault();
+		dispatch(actions.onClickOption(index));
+	}
+
+	useEffect(
+		function () {
+			const { current } = ref;
+			if (current && selected) {
+				const oRect = current.getBoundingClientRect();
+				const pRect = current.parentNode.getBoundingClientRect();
+				if (!isVisible(oRect, pRect)) {
+					current.scrollIntoView();
+				}
+			}
+		},
+		[ref, selected]
+	);
+
+	return (
+		<li
+			className={classnames('lunatic-suggester-option', { selected })}
+			role="option"
+			aria-selected={selected}
+			onClick={onClick}
+			ref={ref}
+		>
+			{children}
+		</li>
+	);
+}
+
+export default OptionContainer;

package/src/components/suggester/components/panel/panel-container.js

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

package/src/components/suggester/components/panel/panel.js

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

package/src/components/suggester/components/selection/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, label } = option;
+		return label ? `${id} - ${label}` : id;
+	}
+	if (search && search.trim().length) {
+		return search;
+	}
+	return undefined;
+}
+
+function DefaultLabelRenderer({ option, placeholderList, search }) {
+	const content = getContent(option, search);
+	if (content) {
+		return <span className="selection">{content}</span>;
+	}
+	return <span className="placeholderList">{placeholderList}</span>;
+}
+
+DefaultLabelRenderer.propTypes = {
+	option: PropTypes.shape({
+		id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
+	}),
+	placeholderList: PropTypes.string,
+	search: PropTypes.string,
+};
+
+export default DefaultLabelRenderer;

package/src/components/suggester/components/selection/delete.js

@@ -0,0 +1,38 @@
+import React, { useMemo } from 'react';
+import classnames from 'classnames';
+import { Fab } from '../../../../utils/components/fab';
+import CrossIcon from '../../../../utils/icons/cross.icon';
+
+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 }) {
+	const onKeyDown = useMemo(() => createOnKeyDown(onClick), [onClick]);
+	return (
+		<Fab
+			className={classnames('mini', 'lunatic-suggester-fab', className)}
+			tabIndex="0"
+			title="delete"
+			onClick={onClick}
+			disabled={isDisabled(search)}
+			onKeyDown={onKeyDown}
+		>
+			<CrossIcon className="lunatic-suggester-icon" />
+		</Fab>
+	);
+}
+
+export default Delete;

package/src/components/suggester/components/selection/index.js

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

package/src/components/suggester/components/selection/label.js

@@ -0,0 +1,35 @@
+import React, { useContext } from 'react';
+import classnames from 'classnames';
+import { SuggesterContext } from '../../state-management';
+import DefaultLabelRenderer from './default-label-renderer';
+
+function Label({
+	labelRenderer: Renderer = DefaultLabelRenderer,
+	placeholderList,
+}) {
+	const [state] = useContext(SuggesterContext);
+	const { displayLabel, expended, selectedIndex, options, search, disabled } =
+		state;
+	const displayed = displayLabel || !expended;
+
+	const option =
+		selectedIndex !== undefined ? options[selectedIndex] : undefined;
+
+	return (
+		<div
+			className={classnames('lunatic-suggester-selected', {
+				displayed,
+				disabled,
+			})}
+			tabIndex="-1"
+		>
+			<Renderer
+				option={option}
+				placeholderList={placeholderList}
+				search={search}
+			/>
+		</div>
+	);
+}
+
+export default Label;

package/src/components/suggester/components/selection/selection.js

@@ -0,0 +1,50 @@
+import React, { useContext } from 'react';
+import { SuggesterContext, actions } from '../../state-management';
+import classnames from 'classnames';
+import Label from './label';
+
+function Selection({ labelRenderer, placeholderList, labelledBy }, inputEl) {
+	const [state, dispatch] = useContext(SuggesterContext);
+	const { search, expended, id, disabled, focused } = state;
+
+	function onChange(e) {
+		dispatch(actions.onChangeSearch(e.target.value));
+	}
+
+	return (
+		<div
+			id={id}
+			className={classnames('lunatic-suggester-selection', {
+				focused,
+				disabled,
+			})}
+			role="combobox"
+			aria-haspopup="listbox"
+			aria-labelledby={labelledBy}
+			aria-expanded={expended}
+			aria-autocomplete="list"
+			aria-owns={`${id}-list`}
+		>
+			<input
+				ref={inputEl}
+				id={`${id}-input`}
+				tabIndex="0"
+				className="lunatic-suggester-input"
+				type="text"
+				onChange={onChange}
+				value={search}
+				aria-label="lunatic-suggester"
+				title="suggester"
+				autoComplete="off"
+				autoCapitalize="off"
+				autoCorrect="off"
+				spellCheck="false"
+				placeholderlist={placeholderList}
+				disabled={disabled}
+			/>
+			<Label labelRenderer={labelRenderer} placeholderList={placeholderList} />
+		</div>
+	);
+}
+
+export default React.forwardRef(Selection);

package/src/components/suggester/components/suggester-content.js

@@ -0,0 +1,42 @@
+import React, { useRef, useCallback } from 'react';
+import classnames from 'classnames';
+import useDocumentAddEventListener from '../../../utils/to-expose/hooks/use-document-add-event-listener';
+
+function SuggesterContent({
+	children,
+	id,
+	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);
+
+	return (
+		<div
+			className={classnames('lunatic-suggester', {
+				focused,
+			})}
+			onFocus={onFocus}
+			onKeyDown={onKeyDown}
+			ref={ref}
+		>
+			<div className={classnames('lunatic-suggester-content', { focused })}>
+				{children}
+			</div>
+		</div>
+	);
+}
+
+export default SuggesterContent;

package/src/components/suggester/components/suggester.js

@@ -0,0 +1,88 @@
+import React, { useCallback, useContext, useRef, useMemo } from 'react';
+import classnames from 'classnames';
+import { actions, SuggesterContext } from '../state-management';
+import SuggesterContent from './suggester-content';
+import Selection from './selection';
+import Panel from './panel';
+import createOnKeyDownCallback from './create-on-keydown-callback';
+import Delete from './selection/delete';
+import './suggester.scss';
+
+function Suggester({
+	className,
+	placeholderList,
+	labelledBy,
+	optionRenderer,
+	labelRenderer,
+	onSelect,
+	value,
+}) {
+	const inputEl = useRef();
+	const [state, dispatch] = useContext(SuggesterContext);
+	const { focused, id, messageError, search, disabled } = state;
+
+	const onFocus = useCallback(
+		function () {
+			if (!disabled) {
+				if (inputEl.current !== document.activeElement) {
+				}
+				inputEl.current.focus();
+				dispatch(actions.onFocus());
+			}
+		},
+		[dispatch, disabled]
+	);
+
+	const onDelete = useCallback(
+		function () {
+			dispatch(actions.onDeleteSearch());
+			onSelect(undefined);
+		},
+		[dispatch, onSelect]
+	);
+
+	const onBlur = useCallback(
+		function () {
+			if (focused) {
+				dispatch(actions.onBlur());
+			}
+		},
+		[dispatch, focused]
+	);
+	const onKeyDown = useMemo(
+		() => createOnKeyDownCallback(dispatch),
+		[dispatch]
+	);
+
+	if (messageError) {
+		return (
+			<div className="lunatic-suggester-message-error">{messageError}</div>
+		);
+	}
+	return (
+		<div className={classnames('lunatic-suggester-container', className)}>
+			<SuggesterContent
+				id={id}
+				focused={focused}
+				onFocus={onFocus}
+				onBlur={onBlur}
+				onKeyDown={onKeyDown}
+			>
+				<Selection
+					labelRenderer={labelRenderer}
+					placeholderList={placeholderList}
+					labelledBy={labelledBy}
+					ref={inputEl}
+				/>
+				<Panel optionRenderer={optionRenderer} value={value} />
+			</SuggesterContent>
+			<Delete
+				className={classnames({ focused })}
+				search={search}
+				onClick={onDelete}
+			/>
+		</div>
+	);
+}
+
+export default Suggester;

package/src/components/suggester/components/suggester.scss

@@ -0,0 +1,101 @@
+@mixin preventSelect() {
+	-moz-user-select: -moz-none;
+	-khtml-user-select: none;
+	-webkit-user-select: none;
+}
+
+.lunatic-suggester-container {
+	position: relative;
+	width: 100%;
+
+	.lunatic-suggester-fab {
+		position: absolute;
+		right: 4px;
+		top: 8px;
+		z-index: 0;
+		&.focused {
+			z-index: 1;
+		}
+
+		.lunatic-icon {
+			svg {
+				fill: white;
+				width: 16px;
+				height: 16px;
+			}
+		}
+	}
+
+	.lunatic-suggester {
+		position: relative;
+		z-index: 0;
+
+		&:focus {
+			outline: none;
+		}
+
+		&.focused {
+			z-index: 1;
+		}
+
+		.lunatic-suggester-content {
+			position: absolute;
+			width: 100%;
+
+			.lunatic-suggester-selection {
+				position: relative;
+				.lunatic-suggester-input {
+					border: none;
+					margin: 0;
+					padding: 0;
+					background-color: transparent;
+					&:focus {
+						outline: none;
+					}
+
+					width: 100%;
+					/* */
+				}
+
+				.lunatic-suggester-selected {
+					position: absolute;
+					top: 0;
+					white-space: nowrap;
+					overflow-x: hidden;
+					width: 100%;
+					height: 100%;
+					display: none;
+					&.displayed {
+						display: block;
+					}
+
+					.placeholderList {
+					}
+					.selection {
+					}
+				}
+			}
+
+			ul,
+			li,
+			div,
+			span {
+				margin: 0;
+				padding: 0;
+				border: none;
+				line-height: 1em;
+				list-style: none;
+			}
+
+			.lunatic-suggester-panel {
+				&:focus {
+					outline: none;
+				}
+				.lunatic-suggester-option {
+					white-space: nowrap;
+					@include preventSelect();
+				}
+			}
+		}
+	}
+}

package/src/components/suggester/default-style.scss

@@ -0,0 +1,125 @@
+@mixin defaultFont {
+	font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
+}
+
+@mixin selection() {
+	@include defaultFont();
+}
+
+@mixin placeholderList {
+	color: gray;
+	@include defaultFont();
+	font-size: 15px;
+	line-height: 34px;
+	vertical-align: middle;
+	font-weight: normal;
+}
+
+.lunatic-component {
+	.lunatic-suggester-message-error {
+		border: solid 1px darkred;
+		color: darkred;
+		background-color: tomato;
+		display: inline-block;
+		border-radius: 3px;
+		padding: 4px 8px;
+		margin: 4px 4px;
+	}
+
+	.lunatic-suggester-default-style {
+		&.lunatic-suggester-container {
+			margin-bottom: 10px;
+			.lunatic-suggester {
+				min-height: 30px;
+				min-width: 260px;
+				width: 100%;
+				.lunatic-suggester-content {
+					/* */
+
+					&.focused {
+						.lunatic-suggester-selection {
+						}
+					}
+
+					/* */
+					.lunatic-suggester-selection {
+						border-radius: 5px;
+						border: 2px solid var(--color-primary-dark);
+						background-color: white;
+						&:hover {
+							border-color: var(--color-primary-main);
+						}
+						.lunatic-suggester-input {
+							height: 34;
+							line-height: 34px;
+							font-size: 15px;
+							padding-left: 4px;
+							@include selection();
+
+							&::placeholderlist {
+								@include placeholderList();
+							}
+						}
+
+						.lunatic-suggester-selected {
+							height: 34px;
+							line-height: 34px;
+							background-color: white;
+							border-radius: 5px;
+							padding-left: 4px;
+							@include selection();
+
+							.placeholderList {
+								display: block;
+								@include placeholderList();
+							}
+							.selection {
+								display: block;
+								line-height: 34px;
+								font-size: 15px;
+							}
+
+							&.disabled {
+								background-color: var(--color-disabled);
+							}
+						}
+					}
+
+					/* */
+					.lunatic-suggester-panel {
+						@include defaultFont();
+						height: 0;
+						opacity: 0;
+						background-color: white;
+						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;
+						}
+						.lunatic-suggester-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-dropdown-selected);
+							}
+							&:hover {
+								background-color: var(--color-primary-main);
+								color: white;
+							}
+						}
+					}
+				}
+			}
+		}
+	}
+}