@inseefr/lunatic 0.1.7 → 0.1.8-experimental

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

@@ -0,0 +1,190 @@
+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,
+	placeholder,
+	label,
+	labelPosition,
+	mandatory,
+	value: valueFromProps,
+	zIndex,
+	management,
+	disabled,
+	focused: initFocused,
+}) {
+	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}
+		>
+			<span
+				className={classnames('lunatic-dropdown-input', { focused, disabled })}
+			>
+				<input
+					type="text"
+					ref={inputEl}
+					value={value || ''}
+					disabled={disabled}
+					placeholder={placeholder}
+					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,
+	placeholder: PropTypes.string,
+	value: PropTypes.oneOfType([
+		PropTypes.string,
+		PropTypes.number,
+		PropTypes.bool,
+	]),
+};
+
+Dropdown.defaultProps = {
+	options: [],
+	zIndex: 0,
+	onSelect: () => null,
+	placeholder: '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);
+};

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

@@ -0,0 +1,162 @@
+import React, { useReducer, useRef } from 'react';
+import classnames from 'classnames';
+import PropTypes from 'prop-types';
+import * as actions from '../commons/actions';
+import Panel from '../commons/components/panel';
+import ClosedIcon from '../../../utils/icons/closed.icon';
+import OpenedIcon from '../../../utils/icons/opened.icon';
+import DropdownContainer from '../commons/components/dropdown';
+import reducer, { initial } from '../commons/reducer';
+import Option from './option';
+
+const Dropdown = ({
+	widthAuto,
+	id: initId,
+	label,
+	value,
+	options,
+	response,
+	onSelect,
+	placeholder,
+	disabled,
+	focused: initFocused,
+	mandatory,
+	labelPosition,
+	management,
+	className,
+	zIndex,
+}) => {
+	const containerEl = useRef();
+	const [state, dispatch] = useReducer(reducer, {
+		...initial,
+		id: `dropdown-${initId}-${new Date().getMilliseconds()}`,
+		disabled,
+		focused: initFocused,
+	});
+	const { focused, visible, activeIndex, id } = state;
+	const onSelect_ = createOnSelect(state, dispatch, onSelect);
+	const selectedOption = options.find((o) => o.value === value);
+	return (
+		<DropdownContainer
+			className={className || 'lunatic-dropdown'}
+			ref={containerEl}
+			state={state}
+			dispatch={dispatch}
+			options={options}
+			response={response}
+			management={management}
+			label={label}
+			labelPosition={labelPosition}
+			mandatory={mandatory}
+			onSelect={onSelect_}
+			value={value}
+			zIndex={zIndex}
+		>
+			<span className={classnames('lunatic-dropdown-input', { focused })}>
+				<input
+					type="button"
+					disabled={disabled}
+					value={selectedOption ? selectedOption.label : placeholder || ''}
+				/>
+			</span>
+			{getIcon(state, dispatch)(visible, containerEl)}
+			<div
+				tabIndex="0"
+				className={classnames('lunatic-transition', {
+					visible: isDisplay(state),
+					'width-auto': widthAuto,
+				})}
+			>
+				<Panel
+					idDropdown={id}
+					options={options}
+					display={isDisplay(state)}
+					activeIndex={activeIndex}
+					optionComponent={Option}
+					selectedOption={selectedOption}
+					onSelect={onSelect_}
+					handleActive={(index) => dispatch(actions.setActiveOption(index))}
+				/>
+			</div>
+		</DropdownContainer>
+	);
+};
+
+Dropdown.propTypes = {
+	widthAuto: PropTypes.bool,
+	disabled: PropTypes.bool,
+	focused: PropTypes.bool,
+	zIndex: PropTypes.number,
+	className: PropTypes.string,
+	id: PropTypes.string,
+	options: PropTypes.array.isRequired,
+	onSelect: PropTypes.func,
+	placeholder: PropTypes.string,
+	value: PropTypes.oneOfType([
+		PropTypes.string,
+		PropTypes.number,
+		PropTypes.bool,
+	]),
+};
+
+Dropdown.defaultProps = {
+	disabled: false,
+	focused: false,
+	options: [],
+	zIndex: 0,
+	onSelect: () => null,
+	placeholder: 'Search...',
+	widthAuto: false,
+};
+
+export default Dropdown;
+
+/* **/
+const isDisplay = ({ visible, options }) => visible && options.length > 0;
+
+/** */
+const getIcon =
+	({ disabled }, dispatch) =>
+	(visible, containerEl) => {
+		if (disabled) {
+			return (
+				<ClosedIcon className="lunatic-dropdown-icon" width={16} height={16} />
+			);
+		}
+		return (
+			<span
+				tabIndex="-1"
+				onMouseDown={(e) => {
+					e.stopPropagation();
+					e.preventDefault();
+
+					if (visible) {
+						dispatch(actions.hidePanel());
+					} else {
+						dispatch(actions.showPanel());
+						containerEl.current.focus();
+					}
+				}}
+			>
+				{visible ? (
+					<OpenedIcon
+						className="lunatic-dropdown-icon"
+						width={16}
+						height={16}
+					/>
+				) : (
+					<ClosedIcon
+						className="lunatic-dropdown-icon"
+						width={16}
+						height={16}
+					/>
+				)}
+			</span>
+		);
+	};
+
+const createOnSelect = (_, dispatch, onSelect) => (option) => {
+	dispatch(actions.setSelectedOption(option));
+	dispatch(actions.hidePanel());
+	onSelect(option);
+};

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

@@ -0,0 +1,20 @@
+import React from 'react';
+import Dropdown from './dropdown';
+
+const childrenToOption = (children = []) =>
+	(Array.isArray(children) ? children : [children]).map(child => {
+		const { value } = child.props;
+		const label = child.props.children;
+		if (label === undefined || value === undefined) {
+			throw new Error('Ooops');
+		}
+		return { label, value };
+	});
+
+const createDropdown = Component => ({ children, options, ...props }) => {
+	const o = options || childrenToOption(children);
+	return <Component options={o} {...props} />;
+};
+
+export default createDropdown(Dropdown);
+export { default as Option } from './option';

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

@@ -0,0 +1,15 @@
+import React from 'react';
+import classnames from 'classnames';
+
+export default ({ label, active, selected }) => {
+	return (
+		<span
+			className={classnames('lunatic-dropdown-option', {
+				'lunatic-dropdown-option-active': active,
+				'lunatic-dropdown-option-selected': selected,
+			})}
+		>
+			{label}
+		</span>
+	);
+};