@inseefr/lunatic 0.2.3-experimental → 0.2.3-prisme

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

@@ -1,88 +1,128 @@
-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;
+import React, {
+	useCallback,
+	useContext,
+	useRef,
+	useMemo,
+	useEffect,
+	useState,
+} 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 * as C from '../../../constants';
+import * as U from '../../../utils/lib';
+import './suggester.scss';
+
+function Suggester({
+	className,
+	placeholderList,
+	labelledBy,
+	optionRenderer,
+	labelRenderer,
+	onSelect,
+	value,
+	focused: initFocused,
+	response,
+	logFunction,
+}) {
+	const inputEl = useRef();
+	const [state, dispatch] = useContext(SuggesterContext);
+	const { focused, id, messageError, search, disabled } = state;
+
+	const [init, setInit] = useState(false);
+
+	const createEventFocus = (focusIn = true) =>
+		U.createObjectEvent(
+			`suggester-${id}`,
+			C.INPUT_CATEGORY,
+			focusIn ? C.EVENT_FOCUS_IN : C.EVENT_FOCUS_OUT,
+			U.getResponseName(response),
+			value
+		);
+
+	const onFocus = useCallback(
+		function () {
+			if (!focused && !disabled) {
+				if (inputEl.current !== document.activeElement) {
+				}
+				inputEl.current.focus();
+				dispatch(actions.onFocus());
+			}
+		},
+		[disabled, dispatch, focused]
+	);
+
+	// Handle focused props of Component
+	useEffect(() => {
+		if (!init && id) {
+			if (initFocused && !focused) onFocus();
+			setInit(true);
+		}
+	}, [focused, init, initFocused, onFocus, id]);
+
+	// log info when focus change
+	useEffect(() => {
+		if (init && id && focused && U.isFunction(logFunction))
+			logFunction(createEventFocus());
+		if (init && id && !focused && U.isFunction(logFunction))
+			logFunction(createEventFocus(false));
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [focused, id, init]);
+
+	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

@@ -1,101 +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();
-				}
-			}
-		}
-	}
-}
+@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

@@ -1,125 +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;
-							}
-						}
-					}
-				}
-			}
-		}
-	}
-}
+@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;
+							}
+						}
+					}
+				}
+			}
+		}
+	}
+}