@inseefr/lunatic 2.0.0 → 2.0.1-v2

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

@@ -1,21 +0,0 @@
-import React from 'react';
-import classnames from 'classnames';
-import PropTypes from 'prop-types';
-
-const Label = ({ content, focused, mandatory }) => (
-	<div className={classnames('lunatic-dropdown-label', { focused, mandatory })}>
-		{content}
-	</div>
-);
-
-Label.defaultProps = {
-	mandatory: false,
-};
-
-Label.propTypes = {
-	content: PropTypes.string.isRequired,
-	focused: PropTypes.bool.isRequired,
-	mandatory: PropTypes.bool,
-};
-
-export default Label;

package/src/components/dropdown/commons/components/opened.icon.js

@@ -1,24 +0,0 @@
-import React from "react";
-
-function Icon({ height = 20, width = 20, color = "#aaa" }) {
-  return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width={width}
-      height={height}
-      x="0"
-      y="0"
-      enableBackground="new 0 0 292.362 292.362"
-      version="1.1"
-      viewBox="0 0 292.362 292.362"
-      xmlSpace="preserve"
-    >
-      <path
-        fill={color}
-        d="M286.935 197.286L159.028 69.379c-3.613-3.617-7.895-5.424-12.847-5.424s-9.233 1.807-12.85 5.424L5.424 197.286C1.807 200.9 0 205.184 0 210.132s1.807 9.233 5.424 12.847c3.621 3.617 7.902 5.428 12.85 5.428h255.813c4.949 0 9.233-1.811 12.848-5.428 3.613-3.613 5.427-7.898 5.427-12.847s-1.814-9.232-5.427-12.846z"
-      ></path>
-    </svg>
-  );
-}
-
-export default Icon;

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

@@ -1,78 +0,0 @@
-import React, { useRef } from 'react';
-import PropTypes from 'prop-types';
-
-/**
- *
- */
-function Panel({
-	options = [],
-	display,
-	handleActive,
-	prefix,
-	activeIndex,
-	selectedOption,
-	onSelect,
-	idDropdown,
-	optionComponent: Option,
-}) {
-	const ulRef = useRef();
-
-	return display ? (
-		<div className="lunatic-dropdown-panel-container">
-			<ul className="lunatic-dropdown-panel" ref={ulRef} tabIndex="-1">
-				{options.map(({ label, value }, index) => (
-					<li
-						key={value}
-						id={`${idDropdown}-option-${value}`}
-						onMouseEnter={() => handleActive(index)}
-						onMouseDown={(e) => {
-							e.stopPropagation();
-							e.preventDefault();
-							if (e.button === 0) {
-								onSelect({ label, value });
-							}
-						}}
-					>
-						<Option
-							label={label}
-							value={value}
-							prefix={prefix}
-							active={activeIndex === index}
-							selected={selectedOption && selectedOption.value === value}
-						/>
-					</li>
-				))}
-			</ul>
-		</div>
-	) : null;
-}
-
-const propTypesOption = PropTypes.shape({
-	label: PropTypes.string,
-	value: PropTypes.oneOfType([
-		PropTypes.string,
-		PropTypes.object,
-		PropTypes.number,
-		PropTypes.symbol,
-		PropTypes.bool,
-	]),
-});
-
-Panel.propTypes = {
-	idDropdown: PropTypes.string.isRequired,
-	prefix: PropTypes.string,
-	onSelect: PropTypes.func,
-	handleActive: PropTypes.func.isRequired,
-	activeIndex: PropTypes.number,
-	selectedOption: propTypesOption,
-	display: PropTypes.bool.isRequired,
-	options: PropTypes.arrayOf(propTypesOption),
-};
-
-Panel.defaultProps = {
-	options: [],
-	onSelect: () => null,
-	selectedOption: undefined,
-};
-
-export default Panel;

package/src/components/dropdown/commons/event-callbacks/index.js

@@ -1,5 +0,0 @@
-export {
-  default as onKeyDownCallback,
-  BINDED_KEYS
-} from "./on-keydown-callback";
-export { default as onMouseDownCallback } from "./on-mousedown-callback";

package/src/components/dropdown/commons/event-callbacks/on-keydown-callback.js

@@ -1,30 +0,0 @@
-import * as actions from "../actions";
-
-export const BINDED_KEYS = {
-  arrowUp: "ArrowUp",
-  arrowDown: "ArrowDown",
-  enter: "Enter",
-  tab: "Tab"
-};
-
-/** */
-export default (_, dispatch, onSelect) => key => {
-  switch (key) {
-    case BINDED_KEYS.arrowUp:
-      dispatch(actions.arrowUpPressed());
-      //   dispatch(actions.showPanel());
-      break;
-    case BINDED_KEYS.arrowDown:
-      dispatch(actions.arrowDownPressed());
-      dispatch(actions.showPanel());
-      break;
-    case BINDED_KEYS.enter:
-      dispatch(actions.enterPressed(onSelect));
-      break;
-    case BINDED_KEYS.tab:
-      dispatch(actions.setFocused(false));
-      dispatch(actions.hidePanel());
-      break;
-    default:
-  }
-};

package/src/components/dropdown/commons/event-callbacks/on-mousedown-callback.js

@@ -1,11 +0,0 @@
-import * as CLEAN from '../cleaner-callbacks';
-import * as actions from '../actions';
-
-/** */
-export default ({ visible, id, disabled }, dispatch) => e => {
-	e.stopPropagation();
-	if (!visible && !disabled) {
-		CLEAN.applyAll(id);
-		dispatch(actions.showPanel());
-	}
-};

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

@@ -1,149 +0,0 @@
-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);
-		}
-		default:
-			return state;
-	}
-};
-
-export default reducer;

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

@@ -1,17 +0,0 @@
-/** */
-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,117 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import PropTypes from 'prop-types';
-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';
-
-const Dropdown = ({
-	id,
-	label,
-	preferences,
-	response,
-	handleChange,
-	options,
-	writable,
-	declarations,
-	features,
-	bindings,
-	management,
-	freezeOptions,
-	...rest
-}) => {
-	const [opts, setOpts] = useState(options);
-
-	useEffect(() => {
-		if (!freezeOptions) {
-			const featOptions = options.map(
-				({ label: labelOption, ...restOpts }) => ({
-					label: interpret(features)(bindings)(labelOption),
-					...restOpts,
-				})
-			);
-			setOpts(featOptions);
-		}
-	}, [freezeOptions, features, bindings, options]);
-
-	const interpretedLabel = interpret(features)(bindings)(label);
-	const value = U.getResponseByPreference(preferences)(response);
-
-	const onSelect = (e) =>
-		handleChange({
-			[U.getResponseName(response)]: e.value,
-		});
-	return (
-		<>
-			<Declarations
-				id={id}
-				type={C.BEFORE_QUESTION_TEXT}
-				declarations={declarations}
-				features={features}
-				bindings={bindings}
-			/>
-			<Declarations
-				id={id}
-				type={C.AFTER_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}
-				/>
-			) : (
-				<DropdownSimple
-					{...rest}
-					id={id}
-					value={value}
-					response={response}
-					label={interpretedLabel}
-					options={opts}
-					onSelect={onSelect}
-					management={management}
-				/>
-			)}
-			<Declarations
-				id={id}
-				type={C.DETACHABLE}
-				declarations={declarations}
-				features={features}
-				bindings={bindings}
-			/>
-		</>
-	);
-};
-
-Dropdown.propTypes = {
-	disabled: PropTypes.bool,
-	writable: PropTypes.bool,
-	handleChange: PropTypes.func,
-	label: PropTypes.string,
-	className: PropTypes.string,
-	zIndex: PropTypes.number,
-	freezeOptions: PropTypes.bool,
-};
-
-Dropdown.defaultProps = {
-	writable: false,
-	handleChange: () => null,
-	label: undefined,
-	className: undefined,
-	zIndex: 0,
-	disabled: false,
-	freezeOptions: false,
-};
-
-export default React.memo(Dropdown, U.areEqual);

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

@@ -1,20 +0,0 @@
-import React from "react";
-
-export default ({ width = 20, height = 20, color = "#aaa" }) => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    width={width}
-    height={height}
-    x="0"
-    y="0"
-    enableBackground="new 0 0 612 612"
-    version="1.1"
-    viewBox="0 0 612 612"
-    xmlSpace="preserve"
-  >
-    <path
-      fill={color}
-      d="M444.644 306l138.644-138.644c38.284-38.284 38.284-100.36 0-138.644-38.283-38.284-100.359-38.284-138.644 0L306 167.356 167.356 28.713c-38.284-38.284-100.36-38.284-138.644 0s-38.284 100.36 0 138.644L167.356 306 28.713 444.644c-38.284 38.283-38.284 100.36 0 138.644 38.284 38.284 100.36 38.284 138.644 0L306 444.644l138.644 138.644c38.283 38.284 100.36 38.284 138.644 0 38.284-38.283 38.284-100.36 0-138.644L444.644 306z"
-    ></path>
-  </svg>
-);

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

@@ -1,174 +0,0 @@
-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 DropdownContainer from '../commons/components/dropdown-container';
-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();
-	dispatch(actions.setValue(e.target.value));
-	dispatch(actions.setPrefix(preparePrefix(e.target.value)));
-};
-
-/** */
-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.value === value);
-	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}
-		>
-			<div
-				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="-1"
-					onChange={onChangeCallback(state, dispatch)}
-				/>
-			</div>
-			<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

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

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";