@inseefr/lunatic 0.3.0-experimental → 0.3.0-prisme

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

@@ -1,152 +1,152 @@
-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);
-		}
-		case actions.INIT_ACTIVE_INDEX: {
-			return { ...state, activeIndex: 0 };
-		}
-		default:
-			return state;
-	}
-};
-
-export default reducer;
+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);
+		}
+		case actions.INIT_ACTIVE_INDEX: {
+			return { ...state, activeIndex: 0 };
+		}
+		default:
+			return state;
+	}
+};
+
+export default reducer;

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

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

@@ -1,135 +1,135 @@
-import React, { useState, useEffect, useMemo } from 'react';
-import PropTypes from 'prop-types';
-import componentWrapper from '../component-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';
-
-function compileFeatures(features = []) {
-	return features.reduce((acc, f) => (f === 'MD' ? acc : [...acc, f]), []);
-}
-
-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 = useMemo(() => compileFeatures(features), [features]);
-
-	useEffect(() => {
-		if (!freezeOptions) {
-			const featOptions = options.map(
-				({ label: labelOption, ...restOpts }) => ({
-					label: interpret(updatedFeatures)(bindings)(labelOption),
-					...restOpts,
-				})
-			);
-			setOpts(featOptions);
-		}
-	}, [freezeOptions, updatedFeatures, 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,
-		});
-
-	const DeclarationAfterLabel = () => (
-		<Declarations
-			id={id}
-			type={C.AFTER_QUESTION_TEXT}
-			declarations={declarations}
-			features={features}
-			bindings={bindings}
-		/>
-	);
-
-	return (
-		<>
-			<Declarations
-				id={id}
-				type={C.BEFORE_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}
-					DeclarationAfterLabel={DeclarationAfterLabel}
-				/>
-			) : (
-				<DropdownSimple
-					{...rest}
-					id={id}
-					value={value}
-					response={response}
-					label={interpretedLabel}
-					options={opts}
-					onSelect={onSelect}
-					management={management}
-					DeclarationAfterLabel={DeclarationAfterLabel}
-				/>
-			)}
-			<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 componentWrapper(React.memo(Dropdown, U.areEqual));
+import React, { useState, useEffect, useMemo } from 'react';
+import PropTypes from 'prop-types';
+import componentWrapper from '../component-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';
+
+function compileFeatures(features = []) {
+	return features.reduce((acc, f) => (f === 'MD' ? acc : [...acc, f]), []);
+}
+
+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 = useMemo(() => compileFeatures(features), [features]);
+
+	useEffect(() => {
+		if (!freezeOptions) {
+			const featOptions = options.map(
+				({ label: labelOption, ...restOpts }) => ({
+					label: interpret(updatedFeatures)(bindings)(labelOption),
+					...restOpts,
+				})
+			);
+			setOpts(featOptions);
+		}
+	}, [freezeOptions, updatedFeatures, 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,
+		});
+
+	const DeclarationAfterLabel = () => (
+		<Declarations
+			id={id}
+			type={C.AFTER_QUESTION_TEXT}
+			declarations={declarations}
+			features={features}
+			bindings={bindings}
+		/>
+	);
+
+	return (
+		<>
+			<Declarations
+				id={id}
+				type={C.BEFORE_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}
+					DeclarationAfterLabel={DeclarationAfterLabel}
+				/>
+			) : (
+				<DropdownSimple
+					{...rest}
+					id={id}
+					value={value}
+					response={response}
+					label={interpretedLabel}
+					options={opts}
+					onSelect={onSelect}
+					management={management}
+					DeclarationAfterLabel={DeclarationAfterLabel}
+				/>
+			)}
+			<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 componentWrapper(React.memo(Dropdown, U.areEqual));