@inseefr/lunatic 0.2.61 → 0.3.1-experimental

package/src/utils/to-expose/state.js

@@ -1,32 +1,45 @@
-export const getState = questionnaire => {
-	const { components, variables } = questionnaire;
-	const COLLECTED = getVariablesFromComponents(components);
-	const CALCULATED = Array.isArray(variables)
-		? variables
-				.filter(({ variableType }) => variableType === 'CALCULATED')
-				.reduce(
-					(_, { name }) => ({ ..._, [name]: 'Evaluation is coming soon!' }),
-					{}
-				)
-		: {};
-	const EXTERNAL =
-		Array.isArray(variables) &&
-		variables.filter(({ variableType }) => variableType === 'EXTERNAL').length >
-			0
-			? variables
-					.filter(({ variableType }) => variableType === 'EXTERNAL')
-					.reduce((_, { name, label }) => ({ ..._, [name]: label }), {})
-			: {};
-	return { COLLECTED, CALCULATED, EXTERNAL };
+import * as C from '../../constants';
+
+export const getState = (questionnaire) => {
+	const { variables } = questionnaire;
+	return {
+		[C.CALCULATED]: getCalculatedFromVariables(variables),
+		[C.COLLECTED]: getCollectedState(questionnaire),
+		[C.EXTERNAL]: getExternalFromVariables(variables),
+	};
+};
+
+export const getCollectedState = (questionnaire) => {
+	const { variables } = questionnaire;
+	return (
+		(variables &&
+			variables[C.COLLECTED] &&
+			Object.entries(variables[C.COLLECTED]).reduce(
+				(acc, [name, { values }]) => ({ ...acc, [name]: values }),
+				{}
+			)) ||
+		{}
+	);
 };
 
-export const getCollectedState = questionnaire =>
-	getState(questionnaire).COLLECTED;
+const getCalculatedFromVariables = (variables) =>
+	variables && variables[C.CALCULATED]
+		? Object.entries(variables[C.CALCULATED]).reduce(
+				(_, [name, { value }]) => ({ ..._, [name]: value }),
+				{}
+		  )
+		: {};
+
+const getExternalFromVariables = (variables) =>
+	(variables && variables[C.EXTERNAL]) || {};
 
-export const getCollectedStateByValueType = questionnaire => valueType =>
+export const getCollectedStateByValueType = (questionnaire) => (
+	valueType,
+	displayNull
+) =>
 	['PREVIOUS', 'COLLECTED', 'FORCED', 'EDITED', 'INPUTED'].includes(valueType)
 		? Object.entries(getCollectedState(questionnaire)).reduce((_, v) => {
-				if (v[1][valueType] !== null)
+				if (displayNull || v[1][valueType] !== null)
 					return {
 						..._,
 						[v[0]]: v[1][valueType],
@@ -35,41 +48,11 @@ export const getCollectedStateByValueType = questionnaire => valueType =>
 		  }, {})
 		: {};
 
-const getVariablesFromComponents = components =>
-	Array.isArray(components)
-		? components.reduce((_, { componentType, response, responses, cells }) => {
-				if (
-					!componentType ||
-					['Sequence', 'Subsequence'].includes(componentType)
-				)
-					return _;
-				else if (componentType === 'CheckboxGroup') {
-					return { ..._, ...getVariableFromResponses(responses) };
-				} else if (componentType === 'Table') {
-					return { ..._, ...getVariableFromCells(cells) };
-				} else {
-					return { ..._, ...getVariableFromResponse(response) };
-				}
-		  }, {})
-		: {};
-
-const getVariableFromResponse = response => {
-	const { name, valueState } = response;
-	const values = valueState.reduce(
-		(__, { valueType, value }) => ({ ...__, [valueType]: value }),
-		{}
-	);
-	return { [name]: values };
+export const getBindings = (questionnaire) => {
+	const { variables } = questionnaire;
+	return {
+		...getCollectedStateByValueType(questionnaire)('COLLECTED', true),
+		...getCalculatedFromVariables(variables),
+		...getExternalFromVariables(variables),
+	};
 };
-
-const getVariableFromResponses = responses =>
-	responses.reduce(
-		(_, { response }) => ({ ..._, ...getVariableFromResponse(response) }),
-		{}
-	);
-
-const getVariableFromCells = cells =>
-	cells.reduce(
-		(_, components) => ({ ..._, ...getVariablesFromComponents(components) }),
-		{}
-	);

package/src/components/dropdown/shared/option.component.js

@@ -1,77 +0,0 @@
-import React from 'react';
-import classnames from 'classnames';
-import PropTypes from 'prop-types';
-
-class Option extends React.Component {
-	html = React.createRef();
-	componentDidMount() {
-		if (this.props.validate) {
-			this.props.validate(this.props.index, this.html);
-		}
-	}
-	render() {
-		const {
-			value,
-			children,
-			onClick,
-			selected,
-			id,
-			index,
-			hidden,
-			component: Component,
-		} = this.props;
-
-		return (
-			<li
-				ref={this.html}
-				role="option"
-				id={id}
-				aria-selected={selected ? 'true' : undefined}
-				className={classnames('option', { selected, hidden })}
-				aria-hidden={hidden ? true : undefined}
-				onClick={e => {
-					e.stopPropagation();
-					return onClick ? onClick(value, index) : null;
-				}}
-			>
-				{Component ? (
-					<Component index={index} value={value} label={children} />
-				) : (
-					children
-				)}
-			</li>
-		);
-	}
-}
-
-Option.propTypes = {
-	id: PropTypes.string,
-	component: PropTypes.func,
-	index: PropTypes.number,
-	selected: PropTypes.bool,
-	hidden: PropTypes.bool,
-	value: PropTypes.oneOfType([
-		PropTypes.string,
-		PropTypes.number,
-		PropTypes.string,
-		PropTypes.object,
-	]),
-};
-
-export default Option;
-
-export const getValuesFromProps = ({ children, options }) => {
-	const witch = options || children;
-	if (witch) {
-		const options = Array.isArray(witch) ? witch : [witch];
-		return options
-			.filter(option => option.type === Option)
-			.map(({ props: { value, children } }, index) => ({
-				index,
-				value,
-				label: children,
-			}))
-			.reduce((a, { index, ...rest }) => ({ ...a, [index]: { ...rest } }), {});
-	}
-	return {};
-};

package/src/components/dropdown/shared/select-base.component.js

@@ -1,148 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import SelectPanel from './select-panel.component';
-import SelectContainer from './select-container.component';
-import { getValuesFromProps } from './option.component';
-
-let __SELECT_ID__ = 1;
-
-class SelectBase extends React.Component {
-	state = { index: -1, initialValue: null };
-	overPanel = false;
-	values = [];
-	nbOptions = -1;
-
-	constructor(props) {
-		super(props);
-		this.idSequence = __SELECT_ID__++;
-		this.state.initialValue = this.props.initial;
-	}
-
-	static getDerivedStateFromProps(props, state) {
-		if (props.initial !== state.initialValue) {
-			const values = getValuesFromProps(props);
-			const { index, label, value } = Object.entries(values).reduce(
-				(a, [index, { value, label }]) =>
-					value === props.initial ? { index, value, label } : a,
-				-1
-			);
-
-			props.setValue(value, label);
-			return {
-				...state,
-				initialValue: props.value,
-				index: parseInt(index, 10),
-			};
-		}
-		return state;
-	}
-
-	componentDidMount() {
-		this.values = getValuesFromProps(this.props);
-		this.nbOptions = Object.keys(this.values).length;
-		if (this.props.value) {
-			const current = Object.entries(this.values).reduce(
-				(a, [i, { label, value }]) =>
-					value === this.props.value
-						? { index: Number.parseInt(i, 10), label, value }
-						: a,
-				null
-			);
-			if (current) {
-				const { index, label, value } = current;
-				this.setState({ index });
-				this.props.setValue(value, label);
-			}
-		}
-	}
-
-	up = () => this.validateIndex(Math.max(0, this.state.index - 1));
-
-	down = () =>
-		this.validateIndex(Math.min(this.nbOptions - 1, this.state.index + 1));
-
-	home = () => this.validateIndex(0);
-
-	end = () => this.validateIndex(this.nbOptions - 1);
-
-	validateIndex = index => {
-		const finalValue = this.values[index];
-		if (this.state.value !== finalValue.value) {
-			this.setState({ index });
-			this.props.setValue(finalValue.value, finalValue.label);
-		}
-		return index;
-	};
-
-	handleClick = () => {
-		this.props.setExpanded(!this.props.expanded);
-	};
-
-	handleClickOptions = (value, index, label) => {
-		if (this.state.value !== value && !this.props.readOnly) {
-			this.setState({ index });
-			this.props.setExpanded(false);
-			this.props.setValue(value, label);
-		}
-		return false;
-	};
-
-	handleOnBlur = e => {
-		if (!this.overPanel) {
-			this.props.setExpanded(false);
-		}
-	};
-
-	render() {
-		const { index } = this.state;
-		const {
-			children,
-			options,
-			id,
-			expanded,
-			prefix,
-			value,
-			...rest
-		} = this.props;
-		return (
-			<SelectContainer
-				id={getSelectId(id)(this.idSequence)}
-				onBlur={this.handleOnBlur}
-				up={this.up}
-				down={this.down}
-				home={this.home}
-				end={this.end}
-				{...rest}
-			>
-				{children}
-				<SelectPanel
-					value={value}
-					index={index}
-					prefix={prefix}
-					expanded={expanded}
-					getId={getOptionId(id)(this.idSequence)}
-					onClickOption={this.handleClickOptions}
-					handleHover={over => (this.overPanel = over)}
-				>
-					{options}
-				</SelectPanel>
-			</SelectContainer>
-		);
-	}
-}
-
-SelectBase.propTypes = {
-	prefix: PropTypes.string,
-	placeHolder: PropTypes.string.isRequired,
-	expanded: PropTypes.bool.isRequired,
-	className: PropTypes.string.isRequired,
-	id: PropTypes.string.isRequired,
-	options: PropTypes.oneOfType([PropTypes.func, PropTypes.array]),
-	setExpanded: PropTypes.func.isRequired,
-};
-
-const getSelectId = name => id => (id ? `${name}-${id}` : undefined);
-const getOptionId = name => idSelect => index =>
-	index ? `${name}-${idSelect}-${index}` : undefined;
-
-export default SelectBase;

package/src/components/dropdown/shared/select-container.component.js

@@ -1,59 +0,0 @@
-import React from "react";
-import PropTypes from "prop-types";
-import classnames from "classnames";
-import keycode from "keycode";
-
-class SelectContainer extends React.Component {
-  handleKeyPressed = e => {
-    switch (keycode(e)) {
-      case "up":
-        e.preventDefault();
-        return this.props.up();
-      case "down":
-        e.preventDefault();
-        return this.props.down();
-      case "home":
-        e.preventDefault();
-        return this.props.home();
-      case "end":
-        e.preventDefault();
-        return this.props.end();
-      default:
-        return;
-    }
-  };
-
-  handleClickOptions = (value, index) => {
-    if (this.state.value !== value && !this.props.readOnly) {
-      this.setState({ expanded: undefined, value, index });
-      return this.props.onChange ? this.props.onChange(value) : false;
-    }
-    return false;
-  };
-
-  render() {
-    const { className, children, id } = this.props;
-    return (
-      <div
-        id={id}
-        className={classnames({ [className]: className })}
-        onBlur={this.props.onBlur}
-        onKeyDown={this.handleKeyPressed}
-      >
-        {children}
-      </div>
-    );
-  }
-}
-
-SelectContainer.propTypes = {
-  className: PropTypes.string,
-  id: PropTypes.string.isRequired,
-  onBlur: PropTypes.func.isRequired,
-  up: PropTypes.func.isRequired,
-  down: PropTypes.func.isRequired,
-  home: PropTypes.func.isRequired,
-  end: PropTypes.func.isRequired
-};
-
-export default SelectContainer;

package/src/components/dropdown/shared/select-panel.component.js

@@ -1,202 +0,0 @@
-import React from 'react';
-import classnames from 'classnames';
-import Option from './option.component';
-
-class SelectPanel extends React.Component {
-	domUl = React.createRef();
-	domOptions = {};
-	index = -1;
-
-	constructor(props) {
-		super(props);
-		this.index = props.index;
-	}
-
-	componentDidUpdate() {
-		if (this.index !== this.props.index) {
-			this.validateScroll(this.props.index);
-			this.index = this.props.index;
-		}
-	}
-
-	validateScroll = index => {
-		const domLi = this.domOptions[index];
-		if (domLi && domLi.current && this.domUl.current) {
-			const top = domLi.current.offsetTop;
-			const bottom = top + domLi.current.offsetHeight;
-			const topLim = this.domUl.current.scrollTop;
-			const bottomLim = topLim + this.domUl.current.offsetHeight;
-			if (bottom > bottomLim) {
-				this.domUl.current.scrollTop = bottom - this.domUl.current.offsetHeight;
-			} else if (top < topLim) {
-				this.domUl.current.scrollTop = top;
-			}
-		}
-	};
-
-	handleClick = (value, index, label) => {
-		if (this.props.onClickOption) {
-			this.props.onClickOption(value, index, label);
-		}
-		return false;
-	};
-
-	handlePanelEnter = () => {
-		this.props.handleHover(true);
-	};
-
-	handlePanelLeave = () => {
-		this.props.handleHover(false);
-	};
-
-	render() {
-		const { expanded, index, getId, children, prefix } = this.props;
-		return (
-			<ul
-				className={classnames('options', { hidden: !expanded })}
-				onMouseEnter={this.handlePanelEnter}
-				onMouseLeave={this.handlePanelLeave}
-				role="listbox"
-				tabIndex="0"
-				aria-activedescendant={getId(this.props.index)}
-				ref={this.domUl}
-			>
-				{React.Children.toArray(children)
-					.filter(({ hidden }) => !hidden)
-					.map(({ props: { children, value: val, ...rest } }, i) => (
-						<Option
-							{...rest}
-							hidden={
-								prefix ? (children.startsWith(prefix) ? false : true) : false
-							}
-							key={i}
-							value={val}
-							selected={i === index}
-							onClick={() => this.handleClick(val, i, children)}
-							id={getId(i)}
-							index={i}
-							validate={(i, html) => {
-								this.domOptions[i] = html;
-							}}
-						>
-							{children}
-						</Option>
-					))}
-			</ul>
-		);
-	}
-}
-
-// const SelectPanel = ({
-// 	expanded,
-// 	index,
-// 	getId,
-// 	children,
-// 	prefix,
-// 	value,
-// 	onClickOption,
-// 	handleHover,
-// }) => {
-// 	const domUl = React.createRef();
-// 	const domOptions = {};
-// 	const handleClick = createHandleClick({ onClickOption });
-// 	const [idx, setIdx] = useState(index);
-// 	let validateScroll = null;
-// 	const [init, setInit] = useState(false);
-// 	useEffect(() => {
-// 		if (domUl.current) {
-// 			validateScroll = createValidateScroll(domOptions, domUl.current);
-// 			setInit(true);
-// 		}
-// 		if (idx !== index && init) {
-// 			validateScroll(index);
-// 			setIdx(index);
-// 		}
-// 	});
-
-// 	return (
-// 		<ul
-// 			className={classnames('options', { hidden: !expanded })}
-// 			onMouseEnter={createHandlePanelEnter(handleHover)}
-// 			onMouseLeave={createHandlePanelLeave(handleHover)}
-// 			role="listbox"
-// 			tabIndex="0"
-// 			aria-activedescendant={getId(index)}
-// 			ref={domUl}
-// 		>
-// 			{React.Children.toArray(children)
-// 				.filter(({ hidden }) => !hidden)
-// 				.map(({ props: { children, value: val, ...rest } }, i) => (
-// 					<Option
-// 						{...rest}
-// 						hidden={
-// 							prefix ? (children.startsWith(prefix) ? false : true) : false
-// 						}
-// 						key={i}
-// 						value={val}
-// 						selected={i === index}
-// 						onClick={e => {
-// 							handleClick(val, i, children);
-// 						}}
-// 						id={getId(i)}
-// 						index={i}
-// 						validate={(i, html) => {
-// 							domOptions[i] = html;
-// 						}}
-// 					>
-// 						{children}
-// 					</Option>
-// 				))}
-// 		</ul>
-// 	);
-// };
-
-// const createValidateScroll = (domOptions, domUl) => index => {
-// 	const domLi = domOptions[index];
-// 	if (domLi && domLi.current && domUl.current) {
-// 		const top = domLi.current.offsetTop;
-// 		const bottom = top + domLi.current.offsetHeight;
-// 		const topLim = domUl.current.scrollTop;
-// 		const bottomLim = topLim + domUl.current.offsetHeight;
-// 		if (bottom > bottomLim) {
-// 			domUl.current.scrollTop = bottom - domUl.current.offsetHeight;
-// 		} else if (top < topLim) {
-// 			domUl.current.scrollTop = top;
-// 		}
-// 	}
-// };
-
-// const createHandleClick = props => (value, index, label) => {
-// 	if (props.onClickOption) {
-// 		props.onClickOption(value, index, label);
-// 	}
-// 	return false;
-// };
-
-// const createHandlePanelEnter = handleHover => () => {
-// 	handleHover(true);
-// };
-
-// const createHandlePanelLeave = handleHover => () => {
-// 	handleHover(false);
-// };
-
-// SelectPanel.propTypes = {
-// 	prefix: PropTypes.string,
-// 	index: PropTypes.number,
-// 	getId: PropTypes.func.isRequired,
-// 	expanded: PropTypes.bool.isRequired,
-// 	hidden: PropTypes.bool,
-// 	handleHover: PropTypes.func.isRequired,
-// 	onClickOption: PropTypes.func.isRequired,
-// 	children: (content, propName, componentName) =>
-// 		React.Children.toArray(content[propName]).reduce(
-// 			(a, p) =>
-// 				p.type !== Option
-// 					? new Error(`${componentName} children should be of type Option.`)
-// 					: a,
-// 			null
-// 		),
-// };
-
-export default SelectPanel;

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

@@ -1,10 +0,0 @@
-import React from 'react';
-import WithNestedOption from './simple-select-nested.component';
-import WithList from './simple-select-list.component';
-
-export default ({ options, ...rest }) =>
-	options ? (
-		<WithList options={options} {...rest} />
-	) : (
-		<WithNestedOption {...rest} />
-	);

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

@@ -1,14 +0,0 @@
-import PropTypes from 'prop-types';
-
-export const allowedTypes = PropTypes.oneOfType([
-	PropTypes.string,
-	PropTypes.number,
-	PropTypes.object,
-]);
-
-export const selectCommonPropTypes = {
-	handleChange: PropTypes.func,
-	placeHolder: PropTypes.string,
-	readOnly: PropTypes.bool,
-	value: allowedTypes,
-};

package/src/components/dropdown/simple/simple-select-list.component.js

@@ -1,31 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import Select from './simple-select-nested.component';
-import Option from '../shared/option.component';
-import { selectCommonPropTypes, allowedTypes } from './prop-types';
-
-class SimpleSelect extends React.Component {
-	render() {
-		return (
-			<Select {...this.props}>
-				{this.props.options.map(({ label, value }, i) => (
-					<Option key={i} value={value}>
-						{label}
-					</Option>
-				))}
-			</Select>
-		);
-	}
-}
-
-SimpleSelect.propTypes = {
-	...selectCommonPropTypes,
-	options: PropTypes.arrayOf(
-		PropTypes.shape({
-			label: PropTypes.string.isRequired,
-			value: allowedTypes,
-		})
-	),
-};
-
-export default SimpleSelect;