@inseefr/lunatic 0.2.2-experimental → 0.2.3-prisme

package/src/components/dropdown/component.js

@@ -1,135 +1,135 @@
-import React, { useState, useEffect, useMemo } from 'react';
-import PropTypes from 'prop-types';
-import missingWrapper from '../missing-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 missingWrapper(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));

package/src/components/dropdown/dropdown-edit/dropdown-edit.js

@@ -1,185 +1,194 @@
-import React, { useReducer, useRef, useEffect } from 'react';
-import classnames from 'classnames';
-import PropTypes from 'prop-types';
-import * as actions from '../commons/actions';
-import Panel from '../commons/components/panel';
-import DropdownContainer from '../commons/components/dropdown';
-import { preparePrefix } from './prefix-tools';
-import reducer, { initial } from '../commons/reducer';
-import Option from './option';
-import Icone from './icone';
-
-/* **/
-const isDisplay = ({ visible, visibleOptions }) =>
-	visible && visibleOptions.length > 0;
-
-/** */
-const onChangeCallback = (state, dispatch) => (e) => {
-	e.stopPropagation();
-	e.preventDefault();
-	const {
-		target: { value },
-	} = e;
-	dispatch(actions.setValue(value));
-	dispatch(actions.setPrefix(preparePrefix(value)));
-	if (value && value.length > 1) dispatch(actions.showPanel());
-};
-
-/** */
-const createOnSelect = (_, dispatch, onSelect) => (option) => {
-	dispatch(actions.setSelectedOption(option));
-	dispatch(actions.hidePanel());
-	onSelect(option);
-};
-
-/**
- *
- * @param {props}
- */
-function Dropdown({
-	widthAuto,
-	options = [],
-	onSelect,
-	response,
-	className,
-	placeholderList,
-	label,
-	labelPosition,
-	mandatory,
-	value: valueFromProps,
-	zIndex,
-	management,
-	disabled,
-	focused: initFocused,
-	DeclarationAfterLabel,
-}) {
-	const [state, dispatch] = useReducer(reducer, {
-		...initial,
-		id: `dropdown-${new Date().getMilliseconds()}`,
-		disabled,
-		focused: initFocused,
-	});
-	const { prefix, visible, activeIndex, visibleOptions, value, focused, id } =
-		state;
-	const inputEl = useRef();
-	const containerEl = useRef();
-	const onSelect_ = createOnSelect(state, dispatch, onSelect);
-
-	const selectedOption = options.find((o) => o.label === value);
-
-	useEffect(
-		function () {
-			const { current } = inputEl;
-			if (current && focused) {
-				current.focus();
-			}
-		},
-		[inputEl, focused]
-	);
-
-	return (
-		<DropdownContainer
-			className={className || 'lunatic-dropdown'}
-			state={state}
-			ref={containerEl}
-			dispatch={dispatch}
-			options={options}
-			label={label}
-			labelPosition={labelPosition}
-			mandatory={mandatory}
-			response={response}
-			onSelect={onSelect_}
-			value={valueFromProps}
-			zIndex={zIndex}
-			management={management}
-		>
-			<DeclarationAfterLabel />
-			<span
-				className={classnames('lunatic-dropdown-input', { focused, disabled })}
-			>
-				<input
-					type="text"
-					ref={inputEl}
-					value={value || ''}
-					disabled={disabled}
-					placeholderList={placeholderList}
-					autoComplete="list"
-					autoCorrect="off"
-					autoCapitalize="off"
-					spellCheck="false"
-					tabIndex="0"
-					onChange={onChangeCallback(state, dispatch)}
-				/>
-			</span>
-			<Icone
-				prefix={prefix}
-				visible={visible}
-				disabled={disabled}
-				onDelete={(e) => {
-					e.stopPropagation();
-					inputEl.current.value = '';
-					dispatch(actions.resetSelection());
-					onSelect_({ value: null });
-				}}
-				onSwitch={(e) => {
-					e.stopPropagation();
-					e.preventDefault();
-					if (visible) {
-						dispatch(actions.hidePanel());
-					} else {
-						dispatch(actions.showPanel());
-						containerEl.current.focus();
-					}
-				}}
-			/>
-			<div
-				tabIndex="-1"
-				className={classnames('lunatic-transition', {
-					visible: isDisplay(state),
-					'width-auto': widthAuto,
-				})}
-			>
-				<Panel
-					idDropdown={id}
-					options={visibleOptions}
-					display={isDisplay(state) && !disabled}
-					prefix={prefix}
-					activeIndex={activeIndex}
-					optionComponent={Option}
-					selectedOption={selectedOption}
-					onSelect={onSelect_}
-					handleActive={(index) => dispatch(actions.setActiveOption(index))}
-				/>
-			</div>
-		</DropdownContainer>
-	);
-}
-
-Dropdown.propTypes = {
-	widthAuto: PropTypes.bool,
-	zIndex: PropTypes.number,
-	disabled: PropTypes.bool,
-	focused: PropTypes.bool,
-	className: PropTypes.string,
-	id: PropTypes.string,
-	options: PropTypes.array.isRequired,
-	onSelect: PropTypes.func,
-	placeholderList: PropTypes.string,
-	value: PropTypes.oneOfType([
-		PropTypes.string,
-		PropTypes.number,
-		PropTypes.bool,
-	]),
-};
-
-Dropdown.defaultProps = {
-	options: [],
-	zIndex: 0,
-	onSelect: () => null,
-	placeholderList: 'Search...',
-	disabled: false,
-	focused: false,
-	widthAuto: false,
-};
-
-export default Dropdown;
+import React, { useReducer, useRef, useEffect } from 'react';
+import classnames from 'classnames';
+import PropTypes from 'prop-types';
+import * as actions from '../commons/actions';
+import Panel from '../commons/components/panel';
+import DropdownContainer from '../commons/components/dropdown';
+import { preparePrefix } from './prefix-tools';
+import reducer, { initial } from '../commons/reducer';
+import Option from './option';
+import Icone from './icone';
+
+/* **/
+const isDisplay = ({ visible, visibleOptions }) =>
+	visible && visibleOptions.length > 0;
+
+/** */
+const onChangeCallback = (state, dispatch) => (e) => {
+	e.stopPropagation();
+	e.preventDefault();
+	const {
+		target: { value },
+	} = e;
+	dispatch(actions.setValue(value));
+	dispatch(actions.setPrefix(preparePrefix(value)));
+	if (value && value.length > 1) dispatch(actions.showPanel());
+};
+
+/** */
+const createOnSelect = (_, dispatch, onSelect) => (option) => {
+	dispatch(actions.setSelectedOption(option));
+	dispatch(actions.hidePanel());
+	onSelect(option);
+};
+
+/**
+ *
+ * @param {props}
+ */
+function Dropdown({
+	id: initId,
+	widthAuto,
+	options = [],
+	onSelect,
+	response,
+	className,
+	placeholderList,
+	label,
+	labelPosition,
+	mandatory,
+	value: valueFromProps,
+	zIndex,
+	management,
+	disabled,
+	focused: initFocused,
+	DeclarationAfterLabel,
+	logFunction,
+}) {
+	const [state, dispatch] = useReducer(reducer, {
+		...initial,
+		id: `dropdown-${initId || new Date().getMilliseconds()}`,
+		disabled,
+		focused: initFocused,
+	});
+	const { prefix, visible, activeIndex, visibleOptions, value, focused, id } =
+		state;
+	const inputEl = useRef();
+	const containerEl = useRef();
+	const onSelect_ = createOnSelect(state, dispatch, onSelect);
+
+	const selectedOption = options.find((o) => o.label === value);
+
+	useEffect(() => {
+		if (visible && !activeIndex) {
+			dispatch(actions.initActiveIndex());
+		}
+	}, [activeIndex, visible]);
+
+	useEffect(
+		function () {
+			const { current } = inputEl;
+			if (current && focused) {
+				current.focus();
+			}
+		},
+		[inputEl, focused]
+	);
+
+	return (
+		<DropdownContainer
+			className={className || 'lunatic-dropdown'}
+			state={state}
+			ref={containerEl}
+			dispatch={dispatch}
+			options={options}
+			label={label}
+			labelPosition={labelPosition}
+			mandatory={mandatory}
+			response={response}
+			onSelect={onSelect_}
+			value={valueFromProps}
+			zIndex={zIndex}
+			management={management}
+			logFunction={logFunction}
+		>
+			<DeclarationAfterLabel />
+			<span
+				className={classnames('lunatic-dropdown-input', { focused, disabled })}
+			>
+				<input
+					type="text"
+					ref={inputEl}
+					value={value || ''}
+					disabled={disabled}
+					placeholderList={placeholderList}
+					autoComplete="list"
+					autoCorrect="off"
+					autoCapitalize="off"
+					spellCheck="false"
+					tabIndex="0"
+					onChange={onChangeCallback(state, dispatch)}
+				/>
+			</span>
+			<Icone
+				prefix={prefix}
+				visible={visible}
+				disabled={disabled}
+				onDelete={(e) => {
+					e.stopPropagation();
+					inputEl.current.value = '';
+					dispatch(actions.resetSelection());
+					onSelect_({ value: null });
+				}}
+				onSwitch={(e) => {
+					e.stopPropagation();
+					e.preventDefault();
+					if (visible) {
+						dispatch(actions.hidePanel());
+					} else {
+						dispatch(actions.showPanel());
+						containerEl.current.focus();
+					}
+				}}
+			/>
+			<div
+				tabIndex="-1"
+				className={classnames('lunatic-transition', {
+					visible: isDisplay(state),
+					'width-auto': widthAuto,
+				})}
+			>
+				<Panel
+					idDropdown={id}
+					options={visibleOptions}
+					display={isDisplay(state) && !disabled}
+					prefix={prefix}
+					activeIndex={activeIndex}
+					optionComponent={Option}
+					selectedOption={selectedOption}
+					onSelect={onSelect_}
+					handleActive={(index) => dispatch(actions.setActiveOption(index))}
+				/>
+			</div>
+		</DropdownContainer>
+	);
+}
+
+Dropdown.propTypes = {
+	widthAuto: PropTypes.bool,
+	zIndex: PropTypes.number,
+	disabled: PropTypes.bool,
+	focused: PropTypes.bool,
+	className: PropTypes.string,
+	id: PropTypes.string,
+	options: PropTypes.array.isRequired,
+	onSelect: PropTypes.func,
+	placeholderList: PropTypes.string,
+	value: PropTypes.oneOfType([
+		PropTypes.string,
+		PropTypes.number,
+		PropTypes.bool,
+	]),
+};
+
+Dropdown.defaultProps = {
+	options: [],
+	zIndex: 0,
+	onSelect: () => null,
+	placeholderList: 'Search...',
+	disabled: false,
+	focused: false,
+	widthAuto: false,
+};
+
+export default Dropdown;

package/src/components/dropdown/dropdown-edit/index.js

@@ -1,11 +1,11 @@
-import React from "react";
-import DropdownEdit from "./dropdown-edit";
-import childrenToOption from "../commons/children-to-option";
-
-const createDropDown = Component => ({ children, options, ...props }) => {
-  const o = options || childrenToOption(children);
-  return <Component options={o} {...props} />;
-};
-
-export default createDropDown(DropdownEdit);
-export { default as Option } from "./option";
+import React from "react";
+import DropdownEdit from "./dropdown-edit";
+import childrenToOption from "../commons/children-to-option";
+
+const createDropDown = Component => ({ children, options, ...props }) => {
+  const o = options || childrenToOption(children);
+  return <Component options={o} {...props} />;
+};
+
+export default createDropDown(DropdownEdit);
+export { default as Option } from "./option";