@inseefr/lunatic 0.2.60 → 0.3.0-experimental

package/src/components/dropdown/component.js

@@ -1,100 +1,135 @@
-import React from 'react';
+import React, { useState, useEffect, useMemo } from 'react';
 import PropTypes from 'prop-types';
-import Writable from './writable';
-import Simple from './simple';
+import componentWrapper from '../component-wrapper';
+import DropdownSimple from './dropdown-simple';
+import DropdownEdit from './dropdown-edit';
 import Declarations from '../declarations';
-import { TooltipResponse } from '../tooltip';
 import * as U from '../../utils/lib';
-import * as C from '../../utils/constants';
+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,
-	labelPosition,
+	preferences,
+	response,
+	handleChange,
+	options,
 	writable,
-	required,
 	declarations,
-	...props
+	features,
+	bindings,
+	management,
+	freezeOptions,
+	...rest
 }) => {
-	const { preferences, response, handleChange, tooltip, options } = props;
+	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 handler = value =>
+
+	const onSelect = (e) =>
 		handleChange({
-			[U.getResponseName(response)]: value,
+			[U.getResponseName(response)]: e.value,
 		});
+
+	const DeclarationAfterLabel = () => (
+		<Declarations
+			id={id}
+			type={C.AFTER_QUESTION_TEXT}
+			declarations={declarations}
+			features={features}
+			bindings={bindings}
+		/>
+	);
+
 	return (
-		<div className={U.getLabelPositionClass(labelPosition)}>
+		<>
 			<Declarations
 				id={id}
 				type={C.BEFORE_QUESTION_TEXT}
 				declarations={declarations}
+				features={features}
+				bindings={bindings}
 			/>
-			{label && (
-				<label
-					htmlFor={`textarea-${id}`}
-					id={`textarea-label-${id}`}
-					className={`${required ? 'required' : ''}`}
-				>
-					{label}
-				</label>
+			{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.AFTER_QUESTION_TEXT}
+				type={C.DETACHABLE}
 				declarations={declarations}
+				features={features}
+				bindings={bindings}
 			/>
-			<div className="field-container">
-				<div className={`${tooltip ? 'field-with-tooltip' : 'field'}`}>
-					{writable ? (
-						<Writable {...props} value={value} handleChange={handler} />
-					) : (
-						<Simple {...props} value={value} handleChange={handler} />
-					)}
-				</div>
-				{tooltip && (
-					<div className="tooltip">
-						<TooltipResponse
-							id={id}
-							response={U.buildResponse(options)(response)}
-						/>
-					</div>
-				)}
-			</div>
-			<Declarations id={id} type={C.DETACHABLE} declarations={declarations} />
-		</div>
+		</>
 	);
 };
 
-Dropdown.defaultProps = {
-	label: '',
-	preferences: ['COLLECTED'],
-	response: {},
-	placeholder: '',
-	writable: false,
-	required: false,
-	tooltip: false,
-	labelPosition: 'DEFAULT',
-	declarations: [],
-	tooltip: false,
-	style: {},
-};
-
 Dropdown.propTypes = {
-	id: PropTypes.string.isRequired,
-	label: PropTypes.string,
-	preferences: PropTypes.arrayOf(U.valueTypePropTypes),
-	response: U.responsePropTypes,
-	options: U.optionsPropTypes,
-	handleChange: PropTypes.func.isRequired,
-	placeholder: PropTypes.string,
-	readOnly: PropTypes.bool,
+	disabled: PropTypes.bool,
 	writable: PropTypes.bool,
-	required: PropTypes.bool,
-	labelPosition: PropTypes.oneOf(['DEFAULT', 'TOP', 'BOTTOM', 'LEFT', 'RIGHT']),
-	declarations: U.declarationsPropTypes,
-	tooltip: PropTypes.bool,
-	style: PropTypes.object,
+	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 Dropdown;
+export default componentWrapper(React.memo(Dropdown, U.areEqual));

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

@@ -0,0 +1,191 @@
+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(() => {
+		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}
+		>
+			<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/icone.js

@@ -0,0 +1,33 @@
+import React from 'react';
+import OpenedIcon from '../../../utils/icons/opened.icon';
+import CrossIcon from '../../../utils/icons/cross.icon';
+import ClosedIcon from '../../../utils/icons/closed.icon';
+
+/** */
+const getIcon = (visible) =>
+	visible ? (
+		<OpenedIcon className="lunatic-dropdown-icon" width={16} height={16} />
+	) : (
+		<ClosedIcon className="lunatic-dropdown-icon" width={16} height={16} />
+	);
+
+const Icon = ({ prefix, visible, disabled, onDelete, onSwitch }) => {
+	if (disabled) {
+		return (
+			<span tabIndex="-1" onMouseDown={onSwitch}>
+				<ClosedIcon className="lunatic-dropdown-icon" width={16} height={16} />
+			</span>
+		);
+	}
+	return prefix && prefix.length > 0 ? (
+		<span tabIndex="-1" onMouseDown={onDelete}>
+			<CrossIcon className="lunatic-dropdown-icon" width={16} height={16} />
+		</span>
+	) : (
+		<span tabIndex="-1" onMouseDown={onSwitch}>
+			{getIcon(visible)}
+		</span>
+	);
+};
+
+export default Icon;

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

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

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

@@ -0,0 +1,62 @@
+import React from 'react';
+import classnames from 'classnames';
+import { lettersMatching, preparePrefix } from './prefix-tools';
+
+export default ({ label, active, prefix, selected }) => {
+	const initLetters = lettersMatching(label, prefix);
+	const what = label
+		.split('')
+		.reduce(
+			({ letters, stack }, c) => {
+				const m = preparePrefix(c);
+				const [first, ...rest] = letters;
+				if (m === first) {
+					return {
+						letters: rest,
+						stack: [...stack, { char: c, className: 'lunatic-prefix' }],
+					};
+				}
+
+				return {
+					letters,
+					stack: [...stack, { char: c, className: 'lunatic-normal' }],
+				};
+			},
+			{ letters: initLetters, stack: [] }
+		)
+		.stack.reduce(
+			({ last, stack }, { char, className }) => {
+				if (!last) {
+					return { last: className, stack: [{ part: char, className }] };
+				}
+				if (last !== className) {
+					return {
+						last: className,
+						stack: [{ part: char, className }, ...stack],
+					};
+				}
+				const [first, ...rest] = stack;
+				return {
+					last: className,
+					stack: [{ ...first, part: `${first.part}${char}` }, ...rest],
+				};
+			},
+			{ last: undefined, stack: [] }
+		)
+		.stack.reverse()
+		.map(({ part, className }, i) => (
+			<span className={className} key={i}>
+				{part}
+			</span>
+		));
+	return (
+		<span
+			className={classnames('lunatic-dropdown-option', {
+				'lunatic-dropdown-option-active': active,
+				'lunatic-dropdown-option-selected': selected,
+			})}
+		>
+			{what}
+		</span>
+	);
+};

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

@@ -0,0 +1,51 @@
+import removeAccents from 'remove-accents';
+
+export const preparePrefix = (prefix) =>
+	typeof prefix === 'string'
+		? removeAccents(prefix.toLowerCase()).replace(/[- ']/g, '')
+		: prefix;
+
+export const lettersMatching = (label, prefix = '') => {
+	const pref = prefix.split('');
+	let pos = -1;
+	const clean = preparePrefix(label);
+	return clean.split('').reduce((a, c, idx) => {
+		if (pos < pref.length && pref[pos + 1] === c) {
+			pos++;
+			return [...a, c];
+		}
+		return a;
+	}, []);
+};
+
+export const match = (label, prefix) => {
+	const pref = prefix.split('');
+	let pos = -1;
+	const clean = preparePrefix(label);
+	return (
+		clean.split('').reduce((a, c, idx) => {
+			if (pos < pref.length && pref[pos + 1] === c) {
+				pos++;
+				return a + 1;
+			}
+			return a / (idx * 0.0001 + 1);
+		}, 0) / prefix.length
+	);
+};
+
+/** */
+export const filterOption = (options, prefix) => {
+	if (!prefix || prefix.length === 0) {
+		return options;
+	}
+
+	return options
+		.reduce((acc, o) => {
+			const { label, search } = o;
+			const how = match(search || label, prefix);
+			return how >= 0.6
+				? [{ o, how }, ...acc].sort((a, b) => a.how <= b.how)
+				: acc;
+		}, [])
+		.map(({ o }) => o);
+};