@inseefr/lunatic 0.2.62 → 0.3.0-v2

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;

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

@@ -1,70 +0,0 @@
-import React, { useState } from 'react';
-import { selectCommonPropTypes } from './prop-types';
-import classnames from 'classnames';
-import SelectBase from '../shared/select-base.component';
-import './simple-select.scss';
-
-const SimpleSelect = ({
-	className,
-	children,
-	name,
-	readOnly,
-	placeHolder,
-	options,
-	value: valueProps,
-	handleChange,
-	...rest
-}) => {
-	const [expanded, setExpanded] = useState(false);
-	const [label, setLabel] = useState(null);
-	const [initialValue, setInitialValue] = useState(
-		valueProps ? valueProps : null
-	);
-	const [value, setValue] = useState(valueProps ? valueProps : null);
-
-	if (valueProps !== initialValue) {
-		setInitialValue(valueProps);
-		setValue(valueProps);
-		// handleChange(valueProps);
-	}
-
-	return (
-		<SelectBase
-			id="simple-select"
-			options={children}
-			expanded={expanded}
-			readOnly={readOnly}
-			value={value}
-			initial={valueProps}
-			placeHolder={placeHolder ? placeHolder : 'Veuillez ...'}
-			setExpanded={ex => setExpanded(ex)}
-			setValue={(val, label) => {
-				setValue(val);
-				setLabel(label);
-				if (typeof handleChange === 'function') {
-					handleChange(val);
-				}
-				return false;
-			}}
-			className={classnames('simple-select', { [className]: className })}
-			{...rest}
-		>
-			<button
-				aria-haspopup="listbox"
-				className={classnames('bouton', { 'read-only': readOnly })}
-				aria-expanded={expanded ? true : undefined}
-				onClick={() => setExpanded(!expanded)}
-				readOnly={readOnly ? true : undefined}
-				name={name}
-			>
-				{label || placeHolder || 'Veuillez....'}
-			</button>
-		</SelectBase>
-	);
-};
-
-SimpleSelect.propTypes = {
-	...selectCommonPropTypes,
-};
-
-export default SimpleSelect;

package/src/components/dropdown/simple/simple-select.scss

@@ -1,84 +0,0 @@
-@mixin arrowUp {
-	margin-left: 5px;
-	content: ' ';
-	border: solid black;
-	border-width: 0 3px 3px 0;
-	display: inline-block;
-	padding: 3px;
-	transform: rotate(-135deg);
-	-webkit-transform: rotate(-135deg);
-}
-
-@mixin arrowDown {
-	margin-left: 5px;
-	content: ' ';
-	border: solid black;
-	border-width: 0 3px 3px 0;
-	display: inline-block;
-	padding: 3px;
-	transform: rotate(45deg);
-	-webkit-transform: rotate(45deg);
-}
-
-.simple-select {
-	display: inline-block;
-	position: relative;
-	button {
-		width: 100%;
-		background-color: snow;
-		border-radius: 4px;
-		border: solid blue 1px;
-		color: black;
-		padding: 5px 8px;
-		text-align: center;
-		text-decoration: none;
-		display: inline-block;
-		font-size: 16px;
-		text-align: left;
-
-		&:after {
-			float: right;
-			@include arrowDown();
-		}
-		&:focus {
-			border: solid 1px rgba(0, 0, 0, 0);
-			box-shadow: 0 0 1pt 1pt rgba(50, 50, 50, 0.5);
-		}
-	}
-
-	button[aria-expanded='true'] {
-		&:after {
-			@include arrowUp();
-		}
-	}
-
-	.read-only {
-		background-color: lightgrey;
-	}
-
-	.options {
-		list-style-type: none;
-		background-color: snow;
-		width: 100%;
-		margin: 0;
-		padding: 0;
-		border: solid blue 1px;
-		position: absolute;
-		overflow-y: auto;
-		max-height: 120px;
-		z-index: 1;
-
-		.option {
-			cursor: pointer;
-		}
-
-		.selected {
-			background-color: darkblue;
-			color: snow;
-		}
-	}
-
-	.hidden {
-		display: none;
-	}
-}

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

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

package/src/components/dropdown/writable/writable-select.component.js

@@ -1,98 +0,0 @@
-import React from 'react';
-import classnames from 'classnames';
-import SelectBase from '../shared/select-base.component';
-import PropTypes from 'prop-types';
-import './writable-select.scss';
-
-class WritableSelect extends React.Component {
-	state = { expanded: false, value: null, label: null, prefix: null };
-
-	constructor(props) {
-		super(props);
-		if (props.value) {
-			this.state.value = props.value;
-		}
-	}
-
-	delete = () =>
-		this.setState({ expanded: true, prefix: null, value: null, label: null });
-
-	expandPanel = e => {
-		e.stopPropagation();
-		this.setState({ expanded: !this.state.expanded });
-	};
-
-	setValue = (value, label) => {
-		this.setState({ value, label, prefix: null });
-		if (this.props.handleChange) {
-			this.props.handleChange(value);
-		}
-		return false;
-	};
-
-	onFocusInput = () => this.setState({ expanded: true });
-
-	setExpanded = expanded => {
-		this.setState({ expanded });
-	};
-
-	handleChangeInput = e => {
-		this.setState({
-			label: e.target.value,
-			value: e.target.value,
-			expanded: true,
-			prefix: e.target.value,
-		});
-		this.props.handleChange(e.target.value);
-	};
-
-	render() {
-		const { expanded, value, label, prefix } = this.state;
-		const { children, className, placeHolder, readOnly, ...rest } = this.props;
-		return (
-			<SelectBase
-				id="writable-select"
-				prefix={prefix}
-				options={children}
-				expanded={expanded}
-				readOnly={readOnly}
-				value={value}
-				placeHolder={placeHolder ? placeHolder : 'Veuillez ...'}
-				setExpanded={this.setExpanded}
-				setValue={this.setValue}
-				className={classnames('writable-select', { [className]: className })}
-				{...rest}
-			>
-				<span className="champ-saisie">
-					<input
-						type="text"
-						placeholder={placeHolder || 'Veuillez...'}
-						value={label || ''}
-						onChange={this.handleChangeInput}
-						onFocus={this.onFocusInput}
-					/>
-					{value ? (
-						<button className="button-delete" onClick={this.delete} />
-					) : null}
-					<button
-						className={classnames('button-expand', {
-							'arrow-up': expanded,
-							'arrow-down': !expanded,
-						})}
-						onClick={this.expandPanel}
-					/>
-				</span>
-			</SelectBase>
-		);
-	}
-}
-
-WritableSelect.propTypes = {
-	value: PropTypes.object,
-	handleChange: PropTypes.func,
-	className: PropTypes.string,
-	placeHolder: PropTypes.string,
-	readOnly: PropTypes.bool,
-};
-
-export default WritableSelect;

package/src/components/dropdown/writable/writable-select.scss

@@ -1,113 +0,0 @@
-@mixin arrow {
-	width: 10px;
-	height: 10px;
-	content: ' ';
-	border: solid black;
-	border-width: 0 3px 3px 0;
-	display: inline-block;
-}
-
-@mixin buttonClear {
-	background: none;
-	color: inherit;
-	border: none;
-	padding: 0;
-	font: inherit;
-	cursor: pointer;
-	outline: inherit;
-}
-
-.writable-select {
-	position: relative;
-	background-color: snow;
-	border-radius: 4px;
-	border: solid blue 1px;
-	color: black;
-
-	.champ-saisie {
-		input {
-			outline: none;
-			margin: 5px 0 5px 8px;
-			background-color: snow;
-			// border-radius: 4px;
-			border: none;
-			color: black;
-			// padding: 5px 0 5px 8px;
-			text-align: center;
-			text-decoration: none;
-			text-align: left;
-		}
-
-		.button-delete {
-			display: inline-block;
-			@include buttonClear();
-			float: right;
-			margin-right: 24px;
-
-			&:before {
-				transform: rotate(45deg);
-				position: absolute;
-
-				content: ' ';
-				height: 14px;
-				width: 2px;
-				background-color: #333;
-			}
-			&:after {
-				transform: rotate(-45deg);
-				position: absolute;
-
-				content: ' ';
-				height: 14px;
-				width: 2px;
-				background-color: #333;
-			}
-		}
-
-		.button-expand {
-			@include buttonClear();
-			display: inline-block;
-			float: right;
-		}
-		.arrow-up {
-			@include arrow();
-			transform: rotate(-135deg);
-			-webkit-transform: rotate(-135deg);
-		}
-		.arrow-down {
-			@include arrow();
-			transform: rotate(45deg);
-			-webkit-transform: rotate(45deg);
-		}
-	}
-
-	.options {
-		list-style-type: none;
-		background-color: snow;
-		width: 100%;
-		margin: 0;
-		padding: 0;
-		border: solid blue 1px;
-		position: absolute;
-		overflow-y: auto;
-		max-height: 120px;
-		z-index: 1;
-
-		.option {
-			cursor: pointer;
-			&:hover {
-			}
-			&:focus {
-			}
-		}
-
-		.selected {
-			background-color: darkblue;
-			color: snow;
-		}
-	}
-
-	.hidden {
-		display: none;
-	}
-}