@inseefr/lunatic 0.3.4-experimental → 0.3.4-v2

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;

package/src/components/icon/assets/index.js

@@ -1,4 +0,0 @@
-export { default as RadioChecked } from './radio-checked';
-export { default as RadioUnchecked } from './radio-unchecked';
-export { default as CheckboxChecked } from './checkbox-checked';
-export { default as CheckboxUnchecked } from './checkbox-unchecked';

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

@@ -1,16 +0,0 @@
-import React from 'react';
-
-const RadioChecked = () => (
-	<svg
-		xmlns="http://www.w3.org/2000/svg"
-		width="24"
-		height="24"
-		viewBox="0 0 24 24"
-		fill="rgb(74,118,168)"
-	>
-		<path d="M12 7c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5zm0-5C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z" />
-		<path d="M0 0h24v24H0z" fill="none" />
-	</svg>
-);
-
-export default RadioChecked;

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

@@ -1,16 +0,0 @@
-import React from 'react';
-
-const RadioUnchecked = () => (
-	<svg
-		xmlns="http://www.w3.org/2000/svg"
-		width="24"
-		height="24"
-		viewBox="0 0 24 24"
-		fill="rgb(74,118,168)"
-	>
-		<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z" />
-		<path d="M0 0h24v24H0z" fill="none" />
-	</svg>
-);
-
-export default RadioUnchecked;

package/src/components/icon/component.js

@@ -1,33 +0,0 @@
-import React from 'react';
-import {
-	CheckboxChecked,
-	CheckboxUnchecked,
-	RadioChecked,
-	RadioUnchecked,
-} from './assets';
-import './icon.scss';
-
-const Content = ({ type, checked }) => {
-	if (type === 'radio') {
-		if (checked) return <RadioChecked />;
-		return <RadioUnchecked />;
-	}
-	if (type === 'checkbox') {
-		if (checked) return <CheckboxChecked />;
-		return <CheckboxUnchecked />;
-	}
-	return null;
-};
-
-const Icon = ({ type, checked, disabled, children }) => (
-	<>
-		<span className={`list-icon-wrapper`}>
-			<span className={`list-icon ${disabled ? 'list-icon-disabled' : ''}`}>
-				<Content type={type} checked={checked} />
-			</span>
-			{children}
-		</span>
-	</>
-);
-
-export default Icon;

package/src/components/icon/icon.scss

@@ -1,15 +0,0 @@
-.lunatic-component {
-	.list-icon-wrapper {
-		&:focus-within svg {
-			fill: var(--color-primary-dark);
-		}
-	}
-
-	.list-icon {
-		position: absolute;
-		margin-top: -0.1rem;
-		&.list-icon-disabled svg {
-			background-color: var(--color-disabled);
-		}
-	}
-}

package/src/components/icon/index.js

@@ -1 +0,0 @@
-export { default } from './component';

package/src/components/input/input-number.js

@@ -1,29 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import componentWrapper from '../component-wrapper';
-import { InputDeclarationsWrapper } from '../declarations/wrappers';
-import { areEqual } from '../../utils/lib';
-import { getTypeControls } from '../component-wrapper/controls/validators';
-import './input.scss';
-
-const InputNumber = ({ numberAsTextfield, decimals, ...props }) => (
-	<InputDeclarationsWrapper
-		type={numberAsTextfield ? 'text' : 'number'}
-		roleType="input"
-		{...props}
-		decimals={decimals || 0}
-		isInputNumber
-		numberAsTextfield
-		validators={[getTypeControls]}
-	/>
-);
-
-InputNumber.defaultProps = {
-	validators: [],
-};
-
-InputNumber.propTypes = {
-	validators: PropTypes.arrayOf(PropTypes.func),
-};
-
-export default componentWrapper(React.memo(InputNumber, areEqual));

package/src/components/loop/component.js

@@ -1,170 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import * as lunatic from '../components';
-import { interpret } from '../../utils/to-expose';
-import * as U from '../../utils/lib';
-import './loop.scss';
-
-const Loop = ({
-	id,
-	label,
-	iterations,
-	components,
-	bindings,
-	handleChange,
-	loopDependencies,
-	maxPage,
-	pagination,
-	paginatedLoop,
-	currentPage,
-	depth: loopDepth,
-	...orchetratorProps
-}) => {
-	const [todos, setTodos] = useState([]);
-	const vectorialBindings = U.buildVectorialBindings(bindings);
-	const { features } = orchetratorProps;
-	const featuresWithoutMD = features.filter((f) => f !== 'MD');
-	const iterationNb =
-		parseInt(interpret(featuresWithoutMD)(vectorialBindings)(iterations), 10) ||
-		0;
-	const involvedVariables = U.getInvolvedVariables(components);
-
-	/**
-	 * Handle the increase in the number of iterations
-	 * Assume we only want to update if iterationNb changes
-	 */
-	useEffect(() => {
-		const toUpdate = involvedVariables.reduce((acc, { name: iv, depth }) => {
-			if (bindings[iv]) {
-				if (iterationNb === bindings[iv].length) return acc;
-				if (iterationNb <= bindings[iv].length)
-					return {
-						...acc,
-						[iv]: [...bindings[iv].splice(0, iterationNb)],
-					};
-				return {
-					...acc,
-					[iv]: [
-						...bindings[iv],
-						...new Array(iterationNb - bindings[iv].length).fill(
-							U.buildEmptyValue(depth)
-						),
-					],
-				};
-			}
-			return acc;
-		}, {});
-		if (Object.keys(toUpdate).length !== 0) handleChange(toUpdate);
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [iterationNb]);
-
-	useEffect(() => {
-		if (todos.length !== 0) {
-			const todosObj = todos.reduce((acc, { up, rowNumber }) => {
-				const entries = Object.entries(up);
-				if (entries.length === 0) return acc;
-				const toUpdate = entries.reduce((_, [key, value]) => {
-					const previousValue = bindings[key];
-					const newValue = previousValue.map((v, i) =>
-						i === rowNumber ? value : v
-					);
-					return { ..._, [key]: newValue };
-				}, {});
-
-				return { ...acc, ...toUpdate };
-			}, {});
-			handleChange(todosObj);
-			setTodos([]);
-		}
-	}, [bindings, todos, handleChange]);
-
-	const flattenComponents = U.buildLoopComponents(iterationNb)(components);
-
-	const { currentIteration, currentPageWithoutAnyIteration } = U.splitPage(
-		currentPage,
-		loopDepth
-	);
-
-	const localCache = {};
-
-	const loopComponents = flattenComponents.reduce(
-		(
-			acc,
-			{
-				componentType,
-				id: idC,
-				rowNumber,
-				conditionFilter,
-				page,
-				bindingDependencies = [],
-				missingResponse,
-				...rest
-			}
-		) => {
-			const loopVars = bindingDependencies.map((b) => {
-				if (bindings[b]) return [b, bindings[b]];
-				return [b, null];
-			});
-			const loopBindings = U.buildLoopBindings(rowNumber)(loopVars);
-
-			const loopMissingResponse =
-				U.buildLoopMissingResponse(rowNumber)(missingResponse);
-
-			if (!U.displayLoopQuestion(bindingDependencies)(loopBindings)) return acc;
-			const Component = lunatic[componentType];
-
-			const { bindingDependencies: filterDependencies = [], value = '' } =
-				conditionFilter;
-
-			const filterVars = filterDependencies.map((b) => {
-				if (bindings[b]) return [b, bindings[b]];
-				return [b, null];
-			});
-			const filterBindings = U.buildLoopBindings(rowNumber)(filterVars);
-			const set = () => {
-				const v = interpret(featuresWithoutMD)(filterBindings)(value);
-				localCache[`${value}-row-${rowNumber}`] = v;
-				return v;
-			};
-
-			const filterResult = localCache[value] || set();
-
-			if (
-				!filterResult ||
-				(pagination &&
-					(currentPageWithoutAnyIteration !== page ||
-						(paginatedLoop && rowNumber + 1 !== currentIteration)))
-			)
-				return acc;
-			return [
-				...acc,
-				<div key={`${idC}-loop-${rowNumber}`} className="loop-component">
-					<Component
-						{...orchetratorProps}
-						{...rest}
-						id={`${idC}-loop-${rowNumber}`}
-						handleChange={(up) => {
-							setTodos((t) => [...t, { up, rowNumber }]);
-						}}
-						bindings={loopBindings}
-						fullBindings={bindings}
-						bindingDependencies={bindingDependencies}
-						componentType={componentType}
-						pagination={pagination}
-						currentPage={currentPage}
-						conditionFilter={conditionFilter}
-						missingResponse={loopMissingResponse}
-					/>
-				</div>,
-			];
-		},
-		[]
-	);
-
-	return (
-		<div id={`loop-${id}`} className="lunatic-loop">
-			{loopComponents}
-		</div>
-	);
-};
-
-export default React.memo(Loop, U.areEqual);

package/src/components/loop/loop.scss

@@ -1,13 +0,0 @@
-.lunatic-component {
-	.lunatic-loop {
-		.loop-label {
-			text-align: center;
-			font-weight: bold;
-			font-size: 2em;
-		}
-		.loop-component {
-			margin-top: 0.4em;
-			margin-bottom: 0.4em;
-		}
-	}
-}

package/src/components/loop/wrapper.js

@@ -1,15 +0,0 @@
-import React from 'react';
-import Loop from './component';
-import BlockForLoop from '../loop-constructor/block';
-
-const LoopWrapper = (props) => {
-	const { iterations } = props;
-	if (iterations) {
-		return <Loop {...props} />;
-	}
-	return <BlockForLoop {...props} />;
-};
-
-// TODO: need componentWrapper?
-
-export default LoopWrapper;

package/src/components/loop-constructor/block/block.scss

@@ -1,10 +0,0 @@
-.lunatic-component {
-	.block-for-loop {
-		margin-top: 1em;
-		margin-bottom: 1em;
-		.block-component {
-			margin-top: 0.4em;
-			margin-bottom: 0.4em;
-		}
-	}
-}

package/src/components/loop-constructor/block/component.js

@@ -1,9 +0,0 @@
-import React from 'react';
-import componentWrapper from '../../component-wrapper';
-import LoopConstructorWrapper from '../wrapper';
-import * as U from '../../../utils/lib';
-import './block.scss';
-
-const BlockForLoop = (props) => <LoopConstructorWrapper {...props} />;
-
-export default componentWrapper(React.memo(BlockForLoop), U.areEqual);

package/src/components/loop-constructor/block/index.js

@@ -1 +0,0 @@
-export { default } from './component';

package/src/components/loop-constructor/index.js

@@ -1 +0,0 @@
-export { default as RosterForLoop } from './roster';

package/src/components/loop-constructor/roster/component.js

@@ -1,8 +0,0 @@
-import React from 'react';
-import componentWrapper from '../../component-wrapper';
-import LoopConstructorWrapper from '../wrapper';
-import * as U from '../../../utils/lib';
-
-const RosterForLoop = (props) => <LoopConstructorWrapper {...props} />;
-
-export default componentWrapper(React.memo(RosterForLoop), U.areEqual);

package/src/components/loop-constructor/roster/index.js

@@ -1 +0,0 @@
-export { default } from './component';