@inseefr/lunatic 2.0.0 → 2.0.1-v2

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

@@ -1,62 +0,0 @@
-import React from 'react';
-import classnames from 'classnames';
-import { lettersMatching, preparePrefix } from './prefix-tools';
-
-export default ({ label, active, prefix, selected }) => {
-	const initLetters = lettersMatching(label, prefix);
-	const what = label
-		.split('')
-		.reduce(
-			({ letters, stack }, c) => {
-				const m = preparePrefix(c);
-				const [first, ...rest] = letters;
-				if (m === first) {
-					return {
-						letters: rest,
-						stack: [...stack, { char: c, className: 'lunatic-prefix' }],
-					};
-				}
-
-				return {
-					letters,
-					stack: [...stack, { char: c, className: 'lunatic-normal' }],
-				};
-			},
-			{ letters: initLetters, stack: [] }
-		)
-		.stack.reduce(
-			({ last, stack }, { char, className }) => {
-				if (!last) {
-					return { last: className, stack: [{ part: char, className }] };
-				}
-				if (last !== className) {
-					return {
-						last: className,
-						stack: [{ part: char, className }, ...stack],
-					};
-				}
-				const [first, ...rest] = stack;
-				return {
-					last: className,
-					stack: [{ ...first, part: `${first.part}${char}` }, ...rest],
-				};
-			},
-			{ last: undefined, stack: [] }
-		)
-		.stack.reverse()
-		.map(({ part, className }, i) => (
-			<span className={className} key={i}>
-				{part}
-			</span>
-		));
-	return (
-		<span
-			className={classnames('lunatic-dropdown-option', {
-				'lunatic-dropdown-option-active': active,
-				'lunatic-dropdown-option-selected': selected,
-			})}
-		>
-			{what}
-		</span>
-	);
-};

package/src/components/dropdown/dropdown-edit/prefix-tools.js

@@ -1,51 +0,0 @@
-import removeAccents from 'remove-accents';
-
-export const preparePrefix = (prefix) =>
-	typeof prefix === 'string'
-		? removeAccents(prefix.toLowerCase()).replace(/[- ']/g, '')
-		: prefix;
-
-export const lettersMatching = (label, prefix = '') => {
-	const pref = prefix.split('');
-	let pos = -1;
-	const clean = preparePrefix(label);
-	return clean.split('').reduce((a, c, idx) => {
-		if (pos < pref.length && pref[pos + 1] === c) {
-			pos++;
-			return [...a, c];
-		}
-		return a;
-	}, []);
-};
-
-export const match = (label, prefix) => {
-	const pref = prefix.split('');
-	let pos = -1;
-	const clean = preparePrefix(label);
-	return (
-		clean.split('').reduce((a, c, idx) => {
-			if (pos < pref.length && pref[pos + 1] === c) {
-				pos++;
-				return a + 1;
-			}
-			return a / (idx * 0.0001 + 1);
-		}, 0) / prefix.length
-	);
-};
-
-/** */
-export const filterOption = (options, prefix) => {
-	if (!prefix || prefix.length === 0) {
-		return options;
-	}
-
-	return options
-		.reduce((acc, o) => {
-			const { label, search } = o;
-			const how = match(search || label, prefix);
-			return how >= 0.6
-				? [{ o, how }, ...acc].sort((a, b) => a.how <= b.how)
-				: acc;
-		}, [])
-		.map(({ o }) => o);
-};

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

@@ -1,155 +0,0 @@
-import React, { useReducer, useRef } 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 '../commons/components/closed.icon';
-import OpenedIcon from '../commons/components/opened.icon';
-import DropdownContainer from '../commons/components/dropdown-container';
-import reducer, { initial } from '../commons/reducer';
-import Option from './option';
-
-const Dropdown = ({
-	widthAuto,
-	id: initId,
-	label,
-	value,
-	options,
-	response,
-	onSelect,
-	placeholder,
-	disabled,
-	focused: initFocused,
-	mandatory,
-	labelPosition,
-	management,
-	className,
-	zIndex,
-}) => {
-	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);
-	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}
-		>
-			<span className={classnames('lunatic-dropdown-input', { focused })}>
-				<input
-					type="button"
-					disabled={disabled}
-					value={selectedOption ? selectedOption.label : placeholder || ''}
-				/>
-			</span>
-			{getIcon(state, dispatch)(visible, containerEl)}
-			<div
-				tabIndex="-1"
-				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,
-	placeholder: PropTypes.string,
-	value: PropTypes.oneOfType([
-		PropTypes.string,
-		PropTypes.number,
-		PropTypes.bool,
-	]),
-};
-
-Dropdown.defaultProps = {
-	disabled: false,
-	focused: false,
-	options: [],
-	zIndex: 0,
-	onSelect: () => null,
-	placeholder: 'Search...',
-	widthAuto: false,
-};
-
-export default Dropdown;
-
-/* **/
-const isDisplay = ({ visible, options }) => visible && options.length > 0;
-
-/** */
-const getIcon = ({ disabled }, dispatch) => (visible, containerEl) => {
-	if (disabled) {
-		return (
-			<span className="lunatic-icone">
-				<ClosedIcon width={10} height={10} />
-			</span>
-		);
-	}
-	return (
-		<span
-			className="lunatic-icone"
-			tabIndex="-1"
-			onMouseDown={(e) => {
-				e.stopPropagation();
-				e.preventDefault();
-
-				if (visible) {
-					dispatch(actions.hidePanel());
-				} else {
-					dispatch(actions.showPanel());
-					containerEl.current.focus();
-				}
-			}}
-		>
-			{visible ? (
-				<OpenedIcon width={10} height={10} />
-			) : (
-				<ClosedIcon width={10} height={10} />
-			)}
-		</span>
-	);
-};
-
-const createOnSelect = (_, dispatch, onSelect) => (option) => {
-	dispatch(actions.setSelectedOption(option));
-	dispatch(actions.hidePanel());
-	onSelect(option);
-};

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

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

@@ -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/dropdown/dropdown.scss

@@ -1,183 +0,0 @@
-@import 'src/components/index.scss';
-$inputHeight: 2em;
-
-@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-dropdown {
-	display: block;
-
-	&: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-container {
-		position: relative;
-		height: $inputHeight;
-		width: 100%;
-		&:focus {
-			outline: none;
-		}
-
-		.lunatic-dropdown-content {
-			.lunatic-dropdown-input {
-				display: block;
-				background-color: snow;
-				width: 100%;
-				border: none;
-				height: $inputHeight;
-				border-radius: 0px 0px;
-				box-shadow: 0em 0em 0.1em 0.1em $main_color;
-
-				&.focused {
-					box-shadow: 0 0 0 0.2em $main_color;
-				}
-
-				&.disabled {
-					background-color: $disabled;
-				}
-
-				input {
-					margin: 0px 25px 0px 12px;
-					width: calc(100% - 37px);
-					background-color: transparent;
-					height: $inputHeight;
-					border: none;
-					outline: none;
-					text-align: left;
-				}
-			}
-
-			.lunatic-icone {
-				cursor: pointer;
-				position: absolute;
-				right: 10px;
-				top: 7px;
-				&:focus {
-					outline: none;
-				}
-			}
-
-			.lunatic-transition {
-				&.width-auto  {
-					display: inline-block;// for fix width 
-				}
-				
-				visibility: hidden;
-				overflow-y: hidden;
-				opacity: 0;
-
-				&:focus {
-					outline: none;
-				}
-
-				&.visible {
-					visibility: visible;
-					opacity: 1;
-					transition: opacity 0.5s ease-in;
-				}
-
-				.lunatic-dropdown-panel {
-					padding: 0;
-					margin: 0;
-					margin-top: 12px;
-					list-style: none;
-					background-color: $second_color;
-					&:focus {
-						outline: none;
-					}
-					max-height: 200px;
-					overflow-y: auto;
-
-					/* width */
-					&::-webkit-scrollbar {
-						width: 8px;
-					}
-
-					/* Track */
-					&::-webkit-scrollbar-track {
-						background-color: #ffe9e8;
-						border-radius: 4px 4px;
-					}
-
-					/* Handle */
-					&::-webkit-scrollbar-thumb {
-						background: $main_color;
-						border-radius: 4px 4px;
-					}
-
-					/* Handle on hover */
-					&::-webkit-scrollbar-thumb:hover {
-						background: Indigo;
-					}
-				}
-
-				/** options style */
-				.lunatic-dropdown-option {
-					cursor: pointer;
-
-					white-space: nowrap;
-					overflow: hidden;
-					text-overflow: ellipsis;
-					color: $disabled;
-					padding: 5px 5px;
-					display: block;
-					border-bottom: solid 1px #ffe9e8;
-
-					&.lunatic-dropdown-option-active {
-						color: $disabled;
-						background-color: $main_color;
-						.lunatic-prefix {
-							color: Indigo;
-							font-weight: bold;
-						}
-					}
-
-					&.lunatic-dropdown-option-selected {
-						color: $disabled;
-						background-color: Indigo;
-						.lunatic-prefix {
-							color: $disabled;
-							font-weight: bold;
-						}
-
-						&.lunatic-dropdown-option-active {
-							color: $disabled;
-							background-color: $second_color;
-						}
-					}
-
-					.lunatic-prefix {
-						color: Indigo;
-						font-weight: bold;
-					}
-				}
-			}
-		}
-	}
-}

package/src/components/dropdown/index.js

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

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

@@ -1,41 +0,0 @@
-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,
-}) =>
-	filterDescription ? (
-		<div
-			id={`filter-description-${id}`}
-			aria-label={`filter-description`}
-			className="filter-description-lunatic"
-			style={buildStyleObject(style)}
-		>
-			{interpret(features)(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

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

package/src/components/index.js

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

package/src/components/index.scss

@@ -1,76 +0,0 @@
-// Define colors
-$main_color: #e80a4d;
-$second_color: #e07898;
-$progress_back: #d3d3d3;
-$background-warning: rgb(245, 12, 12);
-$disabled: rgb(235, 235, 228);
-
-* {
-	box-sizing: border-box;
-}
-
-.mandatory:after {
-	content: ' *';
-	color: red;
-}
-
-.horizontal-options {
-	display: inline-block;
-	margin-right: 2em;
-}
-
-@mixin vertical-placement($reverse: false) {
-	display: flex;
-	flex-direction: if($reverse, column-reverse, column);
-}
-
-@mixin horizontal-placement($reverse: false) {
-	display: flex;
-	flex-direction: if($reverse, row-reverse, row);
-	align-items: baseline;
-	:first-child {
-		margin-right: 1rem;
-	}
-}
-
-label,
-.lunatic-dropdown-label {
-	margin-bottom: 0.5em;
-}
-
-.label-top {
-	@include vertical-placement();
-}
-.label-bottom {
-	@include vertical-placement(true);
-}
-.label-right {
-	justify-content: flex-end;
-	@include horizontal-placement(true);
-}
-.label-left {
-	@include horizontal-placement();
-}
-
-.field-container {
-	display: flex;
-}
-
-.tooltip {
-	display: flex;
-	flex-direction: column;
-	justify-content: center;
-	align-items: center;
-}
-
-.field-with-tooltip {
-	// display: flex;
-	width: calc(100% - 25px);
-	position: relative;
-}
-
-.field {
-	width: 100%;
-	// display: flex;
-	position: relative;
-}

package/src/components/input/index.js

@@ -1,2 +0,0 @@
-export { default as Input } from './input';
-export { default as InputNumber } from './input-number';