@inseefr/lunatic 0.3.3-experimental → 0.3.4-v2

package/src/components/dropdown/component.js

@@ -1,135 +0,0 @@
-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,194 +0,0 @@
-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/icone.js

@@ -1,33 +0,0 @@
-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

@@ -1,11 +0,0 @@
-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

@@ -1,62 +0,0 @@
-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

@@ -1,51 +0,0 @@
-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

@@ -1,173 +0,0 @@
-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 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,
-	placeholderList,
-	disabled,
-	focused: initFocused,
-	mandatory,
-	labelPosition,
-	management,
-	className,
-	zIndex,
-	DeclarationAfterLabel,
-	logFunction,
-}) => {
-	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);
-
-	useEffect(() => {
-		if (visible && !activeIndex) {
-			dispatch(actions.initActiveIndex());
-		}
-	}, [activeIndex, visible]);
-
-	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}
-			logFunction={logFunction}
-		>
-			<DeclarationAfterLabel />
-			<span className={classnames('lunatic-dropdown-input', { focused })}>
-				<input
-					type="button"
-					disabled={disabled}
-					value={selectedOption ? selectedOption.label : placeholderList || ''}
-				/>
-			</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,
-	placeholderList: PropTypes.string,
-	value: PropTypes.oneOfType([
-		PropTypes.string,
-		PropTypes.number,
-		PropTypes.bool,
-	]),
-};
-
-Dropdown.defaultProps = {
-	disabled: false,
-	focused: false,
-	options: [],
-	zIndex: 0,
-	onSelect: () => null,
-	placeholderList: '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/option.js

@@ -1,15 +0,0 @@
-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>
-	);
-};

package/src/components/icon/assets/checkbox-checked.js

@@ -1,16 +0,0 @@
-import React from 'react';
-
-const CheckboxChecked = () => (
-	<svg
-		xmlns="http://www.w3.org/2000/svg"
-		width="24"
-		height="24"
-		viewBox="0 0 24 24"
-		fill="rgb(74,118,168)"
-	>
-		<path d="M0 0h24v24H0z" fill="none" />
-		<path d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z" />
-	</svg>
-);
-
-export default CheckboxChecked;

package/src/components/icon/assets/checkbox-unchecked.js

@@ -1,16 +0,0 @@
-import React from 'react';
-
-const CheckboxUnchecked = () => (
-	<svg
-		xmlns="http://www.w3.org/2000/svg"
-		width="24"
-		height="24"
-		viewBox="0 0 24 24"
-		fill="rgb(74,118,168)"
-	>
-		<path d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z" />
-		<path d="M0 0h24v24H0z" fill="none" />
-	</svg>
-);
-
-export default CheckboxUnchecked;