@inseefr/lunatic 0.2.61 → 0.3.1-experimental

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

@@ -0,0 +1,171 @@
+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,
+}) => {
+	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}
+		>
+			<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/index.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import Dropdown from './dropdown';
+
+const childrenToOption = (children = []) =>
+	(Array.isArray(children) ? children : [children]).map(child => {
+		const { value } = child.props;
+		const label = child.props.children;
+		if (label === undefined || value === undefined) {
+			throw new Error('Ooops');
+		}
+		return { label, value };
+	});
+
+const createDropdown = Component => ({ children, options, ...props }) => {
+	const o = options || childrenToOption(children);
+	return <Component options={o} {...props} />;
+};
+
+export default createDropdown(Dropdown);
+export { default as Option } from './option';

package/src/components/dropdown/dropdown-simple/option.js

@@ -0,0 +1,15 @@
+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/dropdown/dropdown.scss

@@ -1,16 +1,178 @@
-@import 'src/components/index.scss';
-
-.dropdown-lunatic {
-	width: 100%;
-	box-sizing: border-box;
-	border: solid 2px $main_color;
-	border-radius: 10px;
-	padding: 5px;
-	&:focus {
-		outline: none;
-		box-shadow: 0 0 10px $main_color;
-	}
-	&:read-only {
-		background-color: $disabled;
+@mixin defaultFont {
+	font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
+}
+
+@mixin disableSelect {
+	-moz-user-select: none; /* Firefox */
+	-ms-user-select: none; /* Internet Explorer */
+	-khtml-user-select: none; /* KHTML browsers (e.g. Konqueror) */
+	-webkit-user-select: none; /* Chrome, Safari, and Opera */
+	-webkit-touch-callout: none; /* Disable Android and iOS callouts*/
+}
+
+.lunatic-component {
+	.lunatic-dropdown {
+		display: block;
+		width: 100%;
+		margin-bottom: 1.5rem;
+		&:focus {
+			outline: none;
+		}
+
+		&.label-left {
+			display: flex;
+			flex-direction: row;
+		}
+
+		&.label-right {
+			display: flex;
+			flex-direction: row-reverse;
+		}
+
+		&.label-top {
+			display: flex;
+			flex-direction: column;
+		}
+
+		&.label-bottom {
+			display: flex;
+			flex-direction: column-reverse;
+		}
+
+		.lunatic-dropdown-label {
+			opacity: 1;
+		}
+
+		.lunatic-dropdown-container {
+			ul {
+				padding-inline-start: 0px;
+				font-size: 1rem;
+			}
+			position: relative;
+			height: 2em;
+			width: 100%;
+			z-index: 1;
+
+			&.focused {
+				z-index: 2;
+			}
+			&:focus {
+				outline: none;
+			}
+
+			.lunatic-dropdown-content {
+				// background-color: var(--color-very-very-light);
+				border-color: white;
+				left: 0;
+				top: 0;
+				width: 100%;
+				height: 100%;
+				position: absolute;
+				height: auto;
+				&.visible {
+					// border-radius: 0 0 16px 16px;
+					height: auto;
+				}
+
+				&.disabled {
+					background-color: var(--color-disabled);
+				}
+
+				.lunatic-dropdown-input {
+					border-bottom: 1px solid var(--color-primary-dark);
+					padding: 6px 0 7px;
+					input {
+						@include defaultFont();
+						@include disableSelect();
+						margin: 0px 25px 0px 0px;
+						width: calc(100% - 37px);
+						background-color: transparent;
+						border-color: transparent;
+						height: 2em;
+						border: none;
+						outline: none;
+						text-align: left;
+						cursor: inherit;
+					}
+					&:hover {
+						cursor: pointer;
+						border-bottom: 2px solid var(--color-primary-main);
+					}
+					&.focused {
+						background-color: rgba(0, 0, 0, 0.05);
+						box-shadow: 12px 0 rgba(0, 0, 0, 0.05);
+					}
+				}
+
+				.lunatic-dropdown-icon {
+					cursor: pointer;
+					position: absolute;
+					right: 2px;
+					top: 2px;
+					svg {
+						fill: rgb(146, 146, 146);
+					}
+				}
+
+				.lunatic-transition {
+					opacity: 0;
+
+					&:focus {
+						outline: none;
+					}
+
+					&.visible {
+						visibility: visible;
+						opacity: 1;
+						transition: opacity var(--dropdown-transition-time) ease-out;
+					}
+
+					.lunatic-dropdown-panel-container {
+						box-shadow: 0px 3px 3px -2px rgba(0, 0, 0, 0.9),
+							0px 3px 4px 0px rgba(0, 0, 0, 0.14),
+							0px 1px 8px 0px rgba(0, 0, 0, 0.12);
+
+						.lunatic-dropdown-panel {
+							background-color: white;
+							margin: 0 0 12px 0;
+							border-radius: 4px;
+							z-index: 3;
+							padding-top: 3px;
+							list-style: none;
+							&:focus {
+								outline: none;
+							}
+							max-height: 100px;
+							overflow-y: auto;
+						}
+					}
+
+					/** options style */
+					.lunatic-dropdown-option {
+						padding-left: 10px;
+						cursor: pointer;
+						@include defaultFont();
+						white-space: nowrap;
+						overflow: hidden;
+						text-overflow: ellipsis;
+						color: black;
+						line-height: 2rem;
+						display: block;
+						&.lunatic-dropdown-option-active {
+							color: var(--color-primary-dark);
+							background-color: var(--color-dropdown-active);
+						}
+						&.lunatic-dropdown-option-selected {
+							background-color: var(--color-dropdown-selected);
+						}
+
+						.lunatic-prefix {
+							color: var(--color-prefix);
+							font-weight: bold;
+						}
+					}
+				}
+			}
+		}
 	}
 }

package/src/components/dropdown/index.js

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

package/src/components/filter-description/component.js

@@ -0,0 +1,42 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { interpret } from '../../utils/to-expose';
+import { buildStyleObject } from '../../utils/lib';
+
+const FilterDescription = ({
+	id,
+	label,
+	filterDescription,
+	features,
+	bindings,
+	style,
+	logFunction,
+}) =>
+	filterDescription ? (
+		<div
+			id={`filter-description-${id}`}
+			aria-label={`filter-description`}
+			className="filter-description-lunatic"
+			style={buildStyleObject(style)}
+		>
+			{interpret(features, logFunction)(bindings)(label)}
+		</div>
+	) : null;
+
+FilterDescription.defaultProps = {
+	filterDescription: false,
+	features: [],
+	bindings: {},
+	style: {},
+};
+
+FilterDescription.propTypes = {
+	id: PropTypes.string.isRequired,
+	label: PropTypes.string.isRequired,
+	filterDescription: PropTypes.bool,
+	features: PropTypes.arrayOf(PropTypes.string),
+	bindings: PropTypes.object,
+	style: PropTypes.object,
+};
+
+export default FilterDescription;

package/src/components/filter-description/index.js

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

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

@@ -0,0 +1,16 @@
+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

@@ -0,0 +1,16 @@
+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

@@ -0,0 +1,4 @@
+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

@@ -0,0 +1,16 @@
+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

@@ -0,0 +1,16 @@
+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

@@ -0,0 +1,33 @@
+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

@@ -0,0 +1,15 @@
+.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

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

package/src/components/index.js

@@ -1,4 +1,3 @@
-export * from './components';
-// Avoid circular deps
-export { default as Table } from './table';
-export * from '../utils/to-expose';
+export * from './components';
+export { default as Table } from './table';
+export * from '../utils/to-expose';