@inseefr/lunatic 0.2.62 → 0.3.0-v2

package/src/components/checkbox/one.js

@@ -1,132 +0,0 @@
-import React, { useEffect, useRef } from 'react';
-import PropTypes from 'prop-types';
-import Declarations from '../declarations';
-import { TooltipResponse } from '../tooltip';
-import * as U from '../../utils/lib';
-import * as C from '../../utils/constants';
-import './checkbox.scss';
-
-const CheckboxOne = ({
-	id,
-	label,
-	preferences,
-	response,
-	options,
-	handleChange,
-	positioning,
-	disabled,
-	keyboardSelection,
-	focused,
-	declarations,
-	tooltip,
-	style,
-}) => {
-	const inputRef = useRef();
-
-	useEffect(() => {
-		if (focused) inputRef.current.focus();
-	}, [focused]);
-
-	const { fieldsetStyle, checkboxStyle } = style;
-
-	return (
-		<React.Fragment>
-			<Declarations
-				id={id}
-				type={C.BEFORE_QUESTION_TEXT}
-				declarations={declarations}
-			/>
-			<div className="field-container">
-				<div className={`${tooltip ? 'field-with-tooltip' : 'field'}`}>
-					<fieldset
-						key={`checkbox-one-${id}`}
-						className="checkbox-group"
-						style={U.buildStyleObject(fieldsetStyle)}
-					>
-						<legend>{label}</legend>
-						<Declarations
-							id={id}
-							type={C.AFTER_QUESTION_TEXT}
-							declarations={declarations}
-						/>
-						{options.map(({ label: optionLabel, value: optionValue }, i) => {
-							const checked =
-								U.getResponseByPreference(preferences)(response) ===
-								optionValue;
-							return (
-								<div
-									key={`checkbox-one-${id}-${optionValue}`}
-									className={`checkbox-modality ${U.getItemsPositioningClass(
-										positioning
-									)}`}
-								>
-									<input
-										type="checkbox"
-										id={`checkbox-one-${id}-${optionValue}`}
-										ref={inputRef}
-										key={`checkbox-one-${id}-${optionValue}`}
-										aria-labelledby={`input-label-${id}-${optionValue}`}
-										className="checkbox-lunatic"
-										checked={checked}
-										disabled={disabled}
-										onChange={() =>
-											handleChange({
-												[U.getResponseName(response)]: optionValue,
-											})
-										}
-									/>
-									<label
-										htmlFor={`checkbox-one-${id}-${optionValue}`}
-										id={`input-label-${id}-${optionValue}`}
-										style={checked ? U.buildStyleObject(checkboxStyle) : {}}
-									>
-										{keyboardSelection
-											? `${U.getAlphabet()[i].toUpperCase()} - ${optionLabel}`
-											: optionLabel}
-									</label>
-								</div>
-							);
-						})}
-					</fieldset>
-				</div>
-				{tooltip && (
-					<div className="tooltip">
-						<TooltipResponse id={id} response={U.buildResponse(options)(response)} />
-					</div>
-				)}
-			</div>
-			<Declarations id={id} type={C.DETACHABLE} declarations={declarations} />
-		</React.Fragment>
-	);
-};
-
-CheckboxOne.defaultProps = {
-	label: '',
-	preferences: ['COLLECTED'],
-	response: {},
-	disabled: false,
-	focused: false,
-	keyboardSelection: false,
-	positioning: 'DEFAULT',
-	declarations: [],
-	tooltip: false,
-	style: { fieldsetStyle: {}, checkboxStyle: {} },
-};
-
-CheckboxOne.propTypes = {
-	id: PropTypes.string.isRequired,
-	label: PropTypes.string,
-	preferences: PropTypes.arrayOf(U.valueTypePropTypes),
-	response: U.responsePropTypes,
-	options: U.optionsPropTypes,
-	handleChange: PropTypes.func.isRequired,
-	disabled: PropTypes.bool,
-	focused: PropTypes.bool,
-	keyboardSelection: PropTypes.bool,
-	positioning: PropTypes.oneOf(['DEFAULT', 'HORIZONTAL', 'VERTICAL']),
-	declarations: U.declarationsPropTypes,
-	tooltip: PropTypes.bool,
-	style: PropTypes.object,
-};
-
-export default CheckboxOne;

package/src/components/datepicker/component.js

@@ -1,113 +0,0 @@
-import React, { useEffect, useRef } from 'react';
-import PropTypes from 'prop-types';
-import { TooltipResponse } from '../tooltip';
-import Declarations from '../declarations';
-import * as U from '../../utils/lib';
-import * as C from '../../utils/constants';
-import './datepicker.scss';
-
-const Datepicker = ({
-	id,
-	label,
-	preferences,
-	response,
-	placeholder,
-	handleChange,
-	readOnly,
-	labelPosition,
-	required,
-	focused,
-	declarations,
-	tooltip,
-	style,
-}) => {
-	const inputRef = useRef();
-
-	useEffect(() => {
-		if (focused) inputRef.current.focus();
-	}, [focused]);
-
-	return (
-		<React.Fragment>
-			<Declarations
-				id={id}
-				type={C.BEFORE_QUESTION_TEXT}
-				declarations={declarations}
-			/>
-			<div className={U.getLabelPositionClass(labelPosition)}>
-				{label && (
-					<label
-						htmlFor={`datepicker-${id}`}
-						id={`input-label-${id}`}
-						className={`${required ? 'required' : ''}`}
-					>
-						{label}
-					</label>
-				)}
-				<Declarations
-					id={id}
-					type={C.AFTER_QUESTION_TEXT}
-					declarations={declarations}
-				/>
-				<div className="field-container">
-					<div className={`${tooltip ? 'field-with-tooltip' : 'field'}`}>
-						<input
-							type="date"
-							id={`datepicker-${id}`}
-							ref={inputRef}
-							value={U.getResponseByPreference(preferences)(response)}
-							placeholder={placeholder || ''}
-							className="datepicker-lunatic"
-							style={U.buildStyleObject(style)}
-							readOnly={readOnly}
-							required={required}
-							aria-required={required}
-							onChange={e =>
-								handleChange({
-									[U.getResponseName(response)]: e.target.value,
-								})
-							}
-						/>
-					</div>
-					{tooltip && (
-						<div className="tooltip">
-							<TooltipResponse id={id} response={response} />
-						</div>
-					)}
-				</div>
-			</div>
-			<Declarations id={id} type={C.DETACHABLE} declarations={declarations} />
-		</React.Fragment>
-	);
-};
-
-Datepicker.defaultProps = {
-	preferences: ['COLLECTED'],
-	placeholder: '',
-	readOnly: false,
-	labelPosition: 'DEFAULT',
-	required: false,
-	focused: false,
-	response: {},
-	declarations: [],
-	tooltip: false,
-	style: {},
-};
-
-Datepicker.propTypes = {
-	id: PropTypes.string,
-	label: PropTypes.string,
-	preferences: PropTypes.arrayOf(U.valueTypePropTypes),
-	response: U.responsePropTypes,
-	placeholder: PropTypes.string,
-	handleChange: PropTypes.func.isRequired,
-	readOnly: PropTypes.bool,
-	labelPosition: PropTypes.oneOf(['DEFAULT', 'TOP', 'BOTTOM', 'LEFT', 'RIGHT']),
-	required: PropTypes.bool,
-	focused: PropTypes.bool,
-	declarations: U.declarationsPropTypes,
-	tooltip: PropTypes.bool,
-	style: PropTypes.object,
-};
-
-export default Datepicker;

package/src/components/declarations/component.js

@@ -1,33 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import * as U from '../../utils/lib';
-import './declarations.scss';
-
-const Declarations = ({ id, type, declarations }) => {
-	const filtered = declarations.filter(({ position }) => position === type);
-	return (
-		<div id={`declarations-${id}-${type}`} className="declarations-lunatic">
-			{filtered.map(({ id: idD, label, declarationType }) => (
-				<div
-					key={`${idD}`}
-					className={`declaration-lunatic declaration-${declarationType.toLowerCase()}`}
-				>
-					{label}
-				</div>
-			))}
-		</div>
-	);
-};
-
-Declarations.defaultProps = {
-	type: 'AFTER_QUESTION_TEXT',
-	declarations: [],
-};
-
-Declarations.propTypes = {
-	id: PropTypes.string.isRequired,
-	type: PropTypes.string,
-	declarations: U.declarationsPropTypes,
-};
-
-export default Declarations;

package/src/components/dropdown/component.js

@@ -1,100 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import Writable from './writable';
-import Simple from './simple';
-import Declarations from '../declarations';
-import { TooltipResponse } from '../tooltip';
-import * as U from '../../utils/lib';
-import * as C from '../../utils/constants';
-import './dropdown.scss';
-
-const Dropdown = ({
-	id,
-	label,
-	labelPosition,
-	writable,
-	required,
-	declarations,
-	...props
-}) => {
-	const { preferences, response, handleChange, tooltip, options } = props;
-	const value = U.getResponseByPreference(preferences)(response);
-	const handler = value =>
-		handleChange({
-			[U.getResponseName(response)]: value,
-		});
-	return (
-		<div className={U.getLabelPositionClass(labelPosition)}>
-			<Declarations
-				id={id}
-				type={C.BEFORE_QUESTION_TEXT}
-				declarations={declarations}
-			/>
-			{label && (
-				<label
-					htmlFor={`textarea-${id}`}
-					id={`textarea-label-${id}`}
-					className={`${required ? 'required' : ''}`}
-				>
-					{label}
-				</label>
-			)}
-			<Declarations
-				id={id}
-				type={C.AFTER_QUESTION_TEXT}
-				declarations={declarations}
-			/>
-			<div className="field-container">
-				<div className={`${tooltip ? 'field-with-tooltip' : 'field'}`}>
-					{writable ? (
-						<Writable {...props} value={value} handleChange={handler} />
-					) : (
-						<Simple {...props} value={value} handleChange={handler} />
-					)}
-				</div>
-				{tooltip && (
-					<div className="tooltip">
-						<TooltipResponse
-							id={id}
-							response={U.buildResponse(options)(response)}
-						/>
-					</div>
-				)}
-			</div>
-			<Declarations id={id} type={C.DETACHABLE} declarations={declarations} />
-		</div>
-	);
-};
-
-Dropdown.defaultProps = {
-	label: '',
-	preferences: ['COLLECTED'],
-	response: {},
-	placeholder: '',
-	writable: false,
-	required: false,
-	tooltip: false,
-	labelPosition: 'DEFAULT',
-	declarations: [],
-	tooltip: false,
-	style: {},
-};
-
-Dropdown.propTypes = {
-	id: PropTypes.string.isRequired,
-	label: PropTypes.string,
-	preferences: PropTypes.arrayOf(U.valueTypePropTypes),
-	response: U.responsePropTypes,
-	options: U.optionsPropTypes,
-	handleChange: PropTypes.func.isRequired,
-	placeholder: PropTypes.string,
-	readOnly: PropTypes.bool,
-	writable: PropTypes.bool,
-	required: PropTypes.bool,
-	labelPosition: PropTypes.oneOf(['DEFAULT', 'TOP', 'BOTTOM', 'LEFT', 'RIGHT']),
-	declarations: U.declarationsPropTypes,
-	tooltip: PropTypes.bool,
-	style: PropTypes.object,
-};
-
-export default Dropdown;

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;