@inseefr/lunatic 0.2.2-experimental → 0.2.3-prisme

package/src/components/sequence/component.js

@@ -1,50 +1,50 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { SimpleDeclarationsWrapper } from '../declarations/wrappers';
-import * as U from '../../utils/lib';
-import { interpret } from '../../utils/to-expose';
-import './sequence.scss';
-
-const Sequence = ({
-	id,
-	label,
-	declarations,
-	features,
-	bindings,
-	style,
-	logFunction,
-}) => (
-	<SimpleDeclarationsWrapper
-		id={id}
-		declarations={declarations}
-		features={features}
-		bindings={bindings}
-	>
-		<div
-			aria-label={`sequence-${id}`}
-			className="sequence-lunatic"
-			style={U.buildStyleObject(style)}
-			id={`sequence-${id}`}
-		>
-			{interpret(features, logFunction)(bindings)(label)}
-		</div>
-	</SimpleDeclarationsWrapper>
-);
-
-Sequence.defaultProps = {
-	declarations: [],
-	features: [],
-	bindings: {},
-	style: {},
-};
-
-Sequence.propTypes = {
-	id: PropTypes.string.isRequired,
-	label: PropTypes.string.isRequired,
-	declarations: U.declarationsPropTypes,
-	features: PropTypes.arrayOf(PropTypes.string),
-	bindings: PropTypes.object,
-	style: PropTypes.object,
-};
-
-export default React.memo(Sequence, U.areEqual);
+import React from 'react';
+import PropTypes from 'prop-types';
+import { SimpleDeclarationsWrapper } from '../declarations/wrappers';
+import * as U from '../../utils/lib';
+import { interpret } from '../../utils/to-expose';
+import './sequence.scss';
+
+const Sequence = ({
+	id,
+	label,
+	declarations,
+	features,
+	bindings,
+	style,
+	logFunction,
+}) => (
+	<SimpleDeclarationsWrapper
+		id={id}
+		declarations={declarations}
+		features={features}
+		bindings={bindings}
+	>
+		<div
+			aria-label={`sequence-${id}`}
+			className="sequence-lunatic"
+			style={U.buildStyleObject(style)}
+			id={`sequence-${id}`}
+		>
+			{interpret(features, logFunction)(bindings)(label)}
+		</div>
+	</SimpleDeclarationsWrapper>
+);
+
+Sequence.defaultProps = {
+	declarations: [],
+	features: [],
+	bindings: {},
+	style: {},
+};
+
+Sequence.propTypes = {
+	id: PropTypes.string.isRequired,
+	label: PropTypes.string.isRequired,
+	declarations: U.declarationsPropTypes,
+	features: PropTypes.arrayOf(PropTypes.string),
+	bindings: PropTypes.object,
+	style: PropTypes.object,
+};
+
+export default React.memo(Sequence, U.areEqual);

package/src/components/sequence/sequence.scss

@@ -1,10 +1,10 @@
-.lunatic-component {
-	.sequence-lunatic {
-		padding: 0;
-		font-size: 0.875rem;
-		color: var(--color-primary-light);
-		background-color: var(--color-secondary-contrast-text);
-		border: 0;
-		height: 1.875rem;
-	}
-}
+.lunatic-component {
+	.sequence-lunatic {
+		padding: 0;
+		font-size: 0.875rem;
+		color: var(--color-primary-light);
+		background-color: var(--color-secondary-contrast-text);
+		border: 0;
+		height: 1.875rem;
+	}
+}

package/src/components/subsequence/component.js

@@ -1,49 +1,49 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { SimpleDeclarationsWrapper } from '../declarations/wrappers';
-import * as U from '../../utils/lib';
-import { interpret } from '../../utils/to-expose';
-
-const Subsequence = ({
-	id,
-	label,
-	declarations,
-	features,
-	bindings,
-	style,
-	logFunction,
-}) => (
-	<SimpleDeclarationsWrapper
-		id={id}
-		declarations={declarations}
-		features={features}
-		bindings={bindings}
-	>
-		<div
-			aria-label={`subsequence-${id}`}
-			className="subsequence-lunatic"
-			style={U.buildStyleObject(style)}
-			aria-label={`subsequence-${id}`}
-		>
-			{interpret(features, logFunction)(bindings)(label)}
-		</div>
-	</SimpleDeclarationsWrapper>
-);
-
-Subsequence.defaultProps = {
-	declarations: [],
-	features: [],
-	bindings: {},
-	style: {},
-};
-
-Subsequence.propTypes = {
-	id: PropTypes.string.isRequired,
-	label: PropTypes.string.isRequired,
-	declarations: U.declarationsPropTypes,
-	features: PropTypes.arrayOf(PropTypes.string),
-	bindings: PropTypes.object,
-	style: PropTypes.object,
-};
-
-export default React.memo(Subsequence, U.areEqual);
+import React from 'react';
+import PropTypes from 'prop-types';
+import { SimpleDeclarationsWrapper } from '../declarations/wrappers';
+import * as U from '../../utils/lib';
+import { interpret } from '../../utils/to-expose';
+
+const Subsequence = ({
+	id,
+	label,
+	declarations,
+	features,
+	bindings,
+	style,
+	logFunction,
+}) => (
+	<SimpleDeclarationsWrapper
+		id={id}
+		declarations={declarations}
+		features={features}
+		bindings={bindings}
+	>
+		<div
+			aria-label={`subsequence-${id}`}
+			className="subsequence-lunatic"
+			style={U.buildStyleObject(style)}
+			aria-label={`subsequence-${id}`}
+		>
+			{interpret(features, logFunction)(bindings)(label)}
+		</div>
+	</SimpleDeclarationsWrapper>
+);
+
+Subsequence.defaultProps = {
+	declarations: [],
+	features: [],
+	bindings: {},
+	style: {},
+};
+
+Subsequence.propTypes = {
+	id: PropTypes.string.isRequired,
+	label: PropTypes.string.isRequired,
+	declarations: U.declarationsPropTypes,
+	features: PropTypes.arrayOf(PropTypes.string),
+	bindings: PropTypes.object,
+	style: PropTypes.object,
+};
+
+export default React.memo(Subsequence, U.areEqual);

package/src/components/suggester/check-store.js

@@ -59,10 +59,8 @@ function CheckStore({ storeName, version, setStore, children }) {
 	}
 	return (
 		<div className="lunatic-suggester-unvailable">
-			Le store {storeName} n'est pas disponible.
-			<button disabled={disabled} onClick={() => setRefresh(true)}>
-				Refresh
-			</button>
+			La suggestion sur liste n'est pas possible sur votre navigateur, vous
+			pouvez passer la question en appuyant sur Enregistrer et Continuer
 		</div>
 	);
 }

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

@@ -1,27 +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;
+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/option-container.js

@@ -1,61 +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;
+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}
+			onMouseDown={onClick}
+			ref={ref}
+		>
+			{children}
+		</li>
+	);
+}
+
+export default OptionContainer;

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

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

@@ -1,31 +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;
+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/label.js

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