@inseefr/lunatic 0.1.7 → 0.1.8-experimental

package/src/components/checkbox/group.js

@@ -0,0 +1,231 @@
+import React, { useState, useRef, useEffect } from 'react';
+import KeyboardEventHandler from 'react-keyboard-event-handler';
+import PropTypes from 'prop-types';
+import missingWrapper from '../missing-wrapper';
+import debounce from 'lodash.debounce';
+import Declarations from '../declarations';
+import Icon from '../icon';
+import { TooltipResponse } from '../tooltip';
+import * as U from '../../utils/lib';
+import * as C from '../../constants';
+import { interpret } from '../../utils/to-expose';
+import './checkbox.scss';
+
+const CheckboxGroup = ({
+	id,
+	label,
+	preferences,
+	responses,
+	handleChange: propsHandleChange,
+	disabled,
+	focused,
+	shortcut,
+	positioning,
+	declarations,
+	features,
+	bindings,
+	management,
+	style,
+	logFunction,
+}) => {
+	const { fieldsetStyle, modalityStyle } = style;
+	const inputRef = useRef();
+
+	const [values, setValues] = useState(() =>
+		responses.map(({ response }) =>
+			U.getResponseByPreference(preferences)(response)
+		)
+	);
+
+	const handleChange = debounce((obj) => propsHandleChange(obj), 50);
+
+	const specificHandleChange = (e) => {
+		const [key, value] = Object.entries(e)[0];
+		if (value === false && U.responsesToClean(responses)(preferences)(key))
+			handleChange({ [key]: null });
+		else handleChange(e);
+	};
+
+	// Assume we only want to handle enable external updates
+	// Don't need to check all value changes
+	useEffect(() => {
+		const newValues = responses.map(({ response }) =>
+			U.getResponseByPreference(preferences)(response)
+		);
+		if (newValues.join('|') !== values.join('|')) setValues(newValues);
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [responses, preferences]);
+
+	useEffect(() => {
+		if (focused) inputRef.current.focus();
+	}, [focused]);
+
+	const checkedArray = [];
+
+	return (
+		<>
+			<Declarations
+				id={id}
+				type={C.BEFORE_QUESTION_TEXT}
+				declarations={declarations}
+				features={features}
+				bindings={bindings}
+			/>
+			<fieldset
+				key={`checkbox-${id}`}
+				className="checkbox-group-list"
+				style={U.buildStyleObject(fieldsetStyle)}
+			>
+				<legend>{interpret(features, logFunction)(bindings)(label)}</legend>
+				<Declarations
+					id={id}
+					type={C.AFTER_QUESTION_TEXT}
+					declarations={declarations}
+					features={features}
+					bindings={bindings}
+				/>
+				{responses.map(({ id: modId, label: modLabel, response }, i) => {
+					const checked = values[i];
+					if (checked) checkedArray.push(modId);
+					const toRef =
+						i === 0 || (checkedArray[0] && checkedArray[0] === modId);
+					const interpretedLabel = interpret(features)(bindings)(modLabel);
+					const keyboardSelectionKey =
+						responses.length < 10 ? `${i + 1}` : U.getAlphabet()[i];
+					return (
+						<div
+							className={`${U.getItemsPositioningClass(positioning)}`}
+							key={`checkbox-${id}-${modId}`}
+						>
+							<div className="field-container">
+								<div
+									className={`${management ? 'field-with-tooltip' : 'field'}`}
+								>
+									<div
+										className={`checkbox-modality ${
+											checked ? 'content-checked' : ''
+										}`}
+									>
+										<Icon type="checkbox" checked={checked} disabled={disabled}>
+											<input
+												type="checkbox"
+												id={`checkbox-${id}-${modId}`}
+												ref={toRef ? inputRef : null}
+												key={`checkbox-${id}-${modId}`}
+												aria-labelledby={`input-label-${id}-${modId}`}
+												className="checkbox-lunatic"
+												checked={checked || false}
+												disabled={disabled}
+												onChange={({ target: { checked } }) => {
+													setValues(
+														values.map((v, j) => (i === j ? checked : v))
+													);
+													specificHandleChange({
+														[U.getResponseName(response)]: checked,
+													});
+													if (U.isFunction(logFunction))
+														logFunction(
+															U.createObjectEvent(
+																`checkbox-${id}-${modId}`,
+																C.INPUT_CATEGORY,
+																C.EVENT_SELECTION,
+																U.getResponseName(response),
+																checked
+															)
+														);
+												}}
+											/>
+											<label
+												htmlFor={`checkbox-${id}-${modId}`}
+												id={`input-label-${id}-${modId}`}
+												style={checked ? U.buildStyleObject(modalityStyle) : {}}
+												className="modality-label"
+											>
+												{shortcut && (
+													<span className="code-modality">
+														{keyboardSelectionKey.toUpperCase()}
+													</span>
+												)}
+												{interpretedLabel}
+											</label>
+										</Icon>
+									</div>
+								</div>
+								{management && (
+									<div className="tooltip">
+										<TooltipResponse
+											id={id}
+											response={U.buildBooleanTooltipResponse(response)}
+										/>
+									</div>
+								)}
+							</div>
+							{shortcut && (
+								<KeyboardEventHandler
+									handleKeys={[keyboardSelectionKey.toLowerCase()]}
+									onKeyEvent={(key, e) => {
+										e.preventDefault();
+										setValues(values.map((v, j) => (i === j ? !checked : v)));
+										specificHandleChange({
+											[U.getResponseName(response)]: !checked,
+										});
+										if (U.isFunction(logFunction))
+											logFunction(
+												U.createObjectEvent(
+													`checkbox-${id}-${modId}`,
+													C.INPUT_CATEGORY,
+													C.EVENT_SELECTION,
+													U.getResponseName(response),
+													!checked
+												)
+											);
+									}}
+									handleFocusableElements
+								/>
+							)}
+						</div>
+					);
+				})}
+			</fieldset>
+			<Declarations
+				id={id}
+				type={C.DETACHABLE}
+				declarations={declarations}
+				features={features}
+				bindings={bindings}
+			/>
+		</>
+	);
+};
+
+CheckboxGroup.defaultProps = {
+	label: '',
+	preferences: ['COLLECTED'],
+	responses: [],
+	disabled: false,
+	focused: false,
+	positioning: 'DEFAULT',
+	declarations: [],
+	features: [],
+	bindings: {},
+	management: false,
+	style: { fieldsetStyle: {}, modalityStyle: {} },
+};
+
+CheckboxGroup.propTypes = {
+	id: PropTypes.string.isRequired,
+	label: PropTypes.string,
+	preferences: PropTypes.arrayOf(U.valueTypePropTypes),
+	response: U.responsePropTypes,
+	handleChange: PropTypes.func.isRequired,
+	disabled: PropTypes.bool,
+	focused: PropTypes.bool,
+	positioning: PropTypes.oneOf(['DEFAULT', 'HORIZONTAL', 'VERTICAL']),
+	declarations: U.declarationsPropTypes,
+	features: PropTypes.arrayOf(PropTypes.string),
+	bindings: PropTypes.object,
+	management: PropTypes.bool,
+	style: PropTypes.object,
+};
+
+export default React.memo(missingWrapper(CheckboxGroup), U.areEqual);

package/src/components/checkbox/index.js

@@ -1,2 +1,3 @@
+export { default as CheckboxGroup } from './group';
 export { default as CheckboxBoolean } from './boolean';
 export { default as CheckboxOne } from './one';

package/src/components/checkbox/one.js

@@ -1,93 +1,11 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import Radium from 'radium';
-import { buildStyleObject } from '../../utils/string-utils';
-import { getItemsPositioningClass } from '../../utils/items-positioning';
+import React from 'react';
+import missingWrapper from '../missing-wrapper';
+import { ListDeclarationsWrapper } from '../declarations/wrappers';
+import { areEqual } from '../../utils/lib';
 import './checkbox.scss';
 
-class CheckboxOne extends Component {
-	constructor(props) {
-		super(props);
-		const { selectedValue, handleChange } = props;
-		this.state = { selectedValue };
-		this.onChange = value => {
-			if (value === this.state.selectedValue) {
-				handleChange('');
-				this.setState({ selectedValue: '' });
-			} else {
-				handleChange(value);
-				this.setState({ selectedValue: value });
-			}
-		};
-	}
-	render() {
-		const { selectedValue } = this.state;
-		const { id, label, options, positioning, disabled, style } = this.props;
-		const { fieldsetStyle, checkboxStyle } = style;
+const CheckboxOne = (props) => (
+	<ListDeclarationsWrapper type="checkbox" {...props} hasSpecificHandler />
+);
 
-		return (
-			<fieldset
-				key={`checkbox-one-${id}`}
-				className="checkbox-group"
-				style={buildStyleObject(fieldsetStyle)}
-			>
-				<legend>{label}</legend>
-				{options.map(({ label: modLabel, value }) => {
-					const checked = selectedValue === value;
-					return (
-						<div
-							key={`checkbox-one-${id}-${value}`}
-							className={`checkbox-modality ${getItemsPositioningClass(
-								positioning
-							)}`}
-						>
-							<input
-								type="checkbox"
-								id={`checkbox-one-${id}-${value}`}
-								key={`checkbox-one-${id}-${value}`}
-								aria-labelledby={`input-label-${id}-${value}`}
-								className="checkbox-lunatic"
-								checked={checked}
-								disabled={disabled}
-								onChange={() => this.onChange(value)}
-							/>
-							<label
-								htmlFor={`checkbox-one-${id}-${value}`}
-								id={`input-label-${id}-${value}`}
-								style={checked ? buildStyleObject(checkboxStyle) : {}}
-							>
-								{modLabel}
-							</label>
-						</div>
-					);
-				})}
-			</fieldset>
-		);
-	}
-}
-
-CheckboxOne.propTypes = {
-	id: PropTypes.string.isRequired,
-	label: PropTypes.string,
-	options: PropTypes.arrayOf(
-		PropTypes.shape({
-			label: PropTypes.string.isRequired,
-			value: PropTypes.string.isRequired,
-		})
-	).isRequired,
-	selectedValue: PropTypes.string,
-	handleChange: PropTypes.func.isRequired,
-	positioning: PropTypes.oneOf(['DEFAULT', 'HORIZONTAL', 'VERTICAL']),
-	disabled: PropTypes.bool,
-	style: PropTypes.object,
-};
-
-CheckboxOne.defaultProps = {
-	label: '',
-	selectedValue: '',
-	positioning: 'DEFAULT',
-	disabled: false,
-	style: { fieldsetStyle: {}, checkboxStyle: {} },
-};
-
-export default Radium(CheckboxOne);
+export default React.memo(missingWrapper(CheckboxOne), areEqual);

package/src/components/components.js

@@ -0,0 +1,18 @@
+export { default as Breadcrumb } from './breadcrumb';
+export { default as Button } from './button';
+export * from './checkbox';
+export { default as Datepicker } from './datepicker';
+export { default as Declarations } from './declarations';
+export { default as Dropdown } from './dropdown';
+export * from './input';
+export { default as FilterDescription } from './filter-description';
+export { default as ProgressBar } from './progress-bar';
+export { default as Radio } from './radio';
+export { default as Loop } from './loop';
+export * from './loop-constructor';
+export { default as Sequence } from './sequence';
+export { default as Subsequence } from './subsequence';
+export { default as Suggester } from './suggester';
+export { default as Textarea } from './textarea';
+export { default as SuggesterLoaderWidget } from './suggester-loader-widget';
+export { TooltipResponse } from './tooltip';

package/src/components/datepicker/component.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import missingWrapper from '../missing-wrapper';
+import { InputDeclarationsWrapper } from '../declarations/wrappers';
+import { areEqual } from '../../utils/lib';
+import './datepicker.scss';
+
+const Datepicker = (props) => (
+	<InputDeclarationsWrapper type="date" roleType="datepicker" {...props} />
+);
+
+export default React.memo(missingWrapper(Datepicker), areEqual);

package/src/components/datepicker/datepicker.scss

@@ -0,0 +1 @@
+// see input.scss

package/src/components/datepicker/index.js

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

package/src/components/declarations/component.js

@@ -0,0 +1,45 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import * as U from '../../utils/lib';
+import { interpret } from '../../utils/to-expose';
+import './declarations.scss';
+
+const Declarations = ({
+	id,
+	type,
+	declarations,
+	features,
+	bindings,
+	logFunction,
+}) => {
+	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()}`}
+				>
+					{interpret(features, logFunction)(bindings)(label)}
+				</div>
+			))}
+		</div>
+	);
+};
+
+Declarations.defaultProps = {
+	type: 'AFTER_QUESTION_TEXT',
+	declarations: [],
+	features: [],
+	bindings: {},
+};
+
+Declarations.propTypes = {
+	id: PropTypes.string.isRequired,
+	type: PropTypes.string,
+	declarations: U.declarationsPropTypes,
+	features: PropTypes.arrayOf(PropTypes.string),
+	bindings: PropTypes.object,
+};
+
+export default Declarations;

package/src/components/declarations/declarations.scss

@@ -0,0 +1,38 @@
+.declarations-lunatic {
+	margin-bottom: 0.4rem;
+}
+
+.declaration-instruction {
+	font-style: italic;
+	font-size: 80%;
+}
+
+.declaration-comment {
+	font-size: 80%;
+}
+
+.declaration-statement {
+	font-style: italic;
+	font-size: 80%;
+	color: blue;
+}
+
+.declaration-help {
+	font-style: italic;
+	font-size: 80%;
+	color: green;
+}
+
+.declaration-warning {
+	font-style: bold;
+	font-size: 80%;
+	color: red;
+}
+
+.declaration-message_filter {
+	font-size: 100%;
+	color: rgb(73, 66, 66);
+	&:before {
+		content: '→ ';
+	}
+}

package/src/components/declarations/index.js

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

package/src/components/declarations/wrappers/index.js

@@ -0,0 +1,3 @@
+export { default as InputDeclarationsWrapper } from './input-declarations-wrapper';
+export { default as ListDeclarationsWrapper } from './list-declarations-wrapper';
+export { default as SimpleDeclarationsWrapper } from './simple-declarations-wrapper';