@inseefr/lunatic 0.2.62 → 0.3.0-v2

package/src/components/suggester-loader-widget/tools/index.js

@@ -0,0 +1,2 @@
+export { default as ActionTool } from './action-tool';
+export { default as Tools } from './tools';

package/src/components/suggester-loader-widget/tools/tools.js

@@ -0,0 +1,7 @@
+import React from 'react';
+
+function Tools({ children }) {
+	return <div className="lunatic-widget-tools">{children}</div>;
+}
+
+export default Tools;

package/src/components/suggester-loader-widget/widget-container.js

@@ -0,0 +1,35 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import classnames from 'classnames';
+
+function WidgetContainer({ children, drag, absolute }, containerEl) {
+	if (absolute) {
+		return ReactDOM.createPortal(
+			<div
+				className={classnames('lunatic-suggester-widget-container', {
+					absolute,
+				})}
+				ref={containerEl}
+			>
+				<div className={classnames('lunatic-suggester-widget', { drag })}>
+					{children}
+				</div>
+			</div>,
+			document.body
+		);
+	}
+	return (
+		<div
+			className={classnames('lunatic-suggester-widget-container', {
+				absolute,
+			})}
+			ref={containerEl}
+		>
+			<div className={classnames('lunatic-suggester-widget', { drag })}>
+				{children}
+			</div>
+		</div>
+	);
+}
+
+export default React.forwardRef(WidgetContainer);

package/src/components/suggester-loader-widget/widget.js

@@ -0,0 +1,123 @@
+import React, { useEffect, useState, useCallback, useRef } from 'react';
+import PropTypes from 'prop-types';
+import classnames from 'classnames';
+import LoaderRow from './loader-row';
+import { Tools, ActionTool } from './tools';
+import { IsNetwork } from '../commons/components/is-network';
+import WidgetContainer from './widget-container';
+import Dragger from '../commons/components/dragger';
+import { OnDragIcon } from 'components/commons/icons';
+import './widget.scss';
+
+function empty() {}
+
+function SuggesterLoaderWidget({ source, getStoreInfo, onRefresh, absolute }) {
+	const { suggesters } = source;
+	const containerEl = useRef();
+	const { current } = containerEl;
+	const [stores, setStores] = useState(undefined);
+	const [rows, setRows] = useState([]);
+	const [disabled, setDisabled] = useState(false);
+	const [drag, setDrag] = useState(false);
+
+	useEffect(
+		function () {
+			if (suggesters) {
+				const str = suggesters.reduce(function (current, storeInfo) {
+					const { name } = storeInfo;
+
+					return { ...current, [name]: { storeInfo, ...getStoreInfo(name) } };
+				}, {});
+
+				setStores(str);
+			}
+		},
+		[suggesters, getStoreInfo]
+	);
+
+	const notify = useCallback(function (online) {
+		setDisabled(!online);
+	}, []);
+
+	const onDrag = useCallback(
+		function (status) {
+			if (!drag && status) {
+				setDrag(true);
+			} else if (drag && !status) {
+				setDrag(false);
+			}
+		},
+		[drag]
+	);
+
+	useEffect(
+		function () {
+			if (stores) {
+				setRows(
+					Object.entries(stores).map(function ([
+						name,
+						{ storeInfo, idbVersion, fetch: fetchStore },
+					]) {
+						return (
+							<LoaderRow
+								key={name}
+								storeInfo={storeInfo}
+								idbVersion={idbVersion}
+								fetchStore={fetchStore}
+								onRefresh={onRefresh}
+								disabled={disabled}
+							/>
+						);
+					})
+				);
+			}
+		},
+		[stores, disabled, onRefresh]
+	);
+
+	useEffect(
+		function () {
+			if (current && absolute) {
+				current.style.top = '30px';
+				current.style.left = '30px';
+			}
+		},
+		[current, absolute]
+	);
+
+	return (
+		<WidgetContainer ref={containerEl} drag={drag} absolute={absolute}>
+			<Tools>
+				<ActionTool
+					className={classnames('', { drag })}
+					ariaLabel="drag"
+					display={absolute}
+					title="drag"
+				>
+					<Dragger el={current} onDrag={onDrag}>
+						<OnDragIcon className={classnames('on-drag-icon', { drag })} />
+					</Dragger>
+				</ActionTool>
+			</Tools>
+			<IsNetwork
+				className={classnames('suggester-widget-network', { drag })}
+				notify={notify}
+			/>
+			{rows}
+		</WidgetContainer>
+	);
+}
+
+SuggesterLoaderWidget.propTypes = {
+	absolute: PropTypes.bool,
+	source: PropTypes.object.isRequired,
+	getStoreInfo: PropTypes.func.isRequired,
+	onRefresh: PropTypes.func,
+};
+
+SuggesterLoaderWidget.defaultProps = {
+	onRefresh: empty,
+	absolute: false,
+};
+
+export default SuggesterLoaderWidget;

package/src/components/suggester-loader-widget/widget.scss

@@ -0,0 +1,176 @@
+$colorA: #e9d0d0;
+$colorB: darkred;
+$colorC: #320000;
+$colorD: goldenrod;
+
+@mixin preventSelect() {
+	-moz-user-select: -moz-none;
+	-khtml-user-select: none;
+	-webkit-user-select: none;
+}
+
+@mixin onDrag() {
+	&.drag {
+		box-shadow: $colorD 0px 3px 8px;
+		transition: box-shadow 0.5s;
+	}
+}
+
+.lunatic-suggester-widget-container {
+	&.absolute {
+		position: fixed;
+		z-index: 1;
+	}
+	.lunatic-suggester-widget {
+		position: relative;
+		border: solid $colorB 2px;
+		background-color: $colorA;
+		padding: 4px 4px;
+		border: 2px 2px;
+		width: 400px;
+		box-shadow: $colorC 0px 3px 8px;
+
+		@include onDrag();
+
+		.widget-row {
+			height: 22px;
+			display: flex;
+			flex-direction: row;
+			margin-bottom: 1px;
+			.store-name {
+				width: 60%;
+				color: $colorB;
+				font-size: 18px;
+				white-space: nowrap;
+				overflow-x: hidden;
+			}
+			.stats {
+				color: $colorB;
+				font-size: 18px;
+				white-space: nowrap;
+				overflow-x: hidden;
+				width: 40%;
+			}
+			.widget-button {
+				margin: 0 1px 0 0;
+				padding: 0;
+				border: none;
+				width: 18px;
+				height: 18px;
+				background-color: $colorB;
+
+				&.disabled {
+					background-color: gray;
+					cursor: default;
+				}
+
+				&:hover {
+					background-color: $colorC;
+					transition: background-color 1s;
+					cursor: pointer;
+				}
+
+				.lunatic-suggester-icon {
+					svg {
+						width: 18px;
+						height: 18px;
+						fill: $colorA;
+					}
+				}
+			}
+
+			.lunatic-suggester-loader-progress {
+				height: inherit;
+				border: solid 1px $colorB;
+				border-radius: 2px;
+				width: 70%;
+
+				&.done {
+					&:hover {
+						border-color: $colorC;
+						transition: border-color 1s;
+						.progress {
+							background-color: $colorC;
+							transition: background-color 1s;
+						}
+
+						cursor: pointer;
+					}
+				}
+
+				.content {
+					padding: 2px 2px;
+					height: calc(100%);
+					width: 100%;
+					.progress {
+						background-color: $colorB;
+						height: 100%;
+					}
+				}
+			}
+		}
+
+		.suggester-widget-network {
+			position: absolute;
+			border: solid $colorB 2px;
+			left: 6px;
+			background-color: $colorA;
+			border-radius: 50%;
+			padding: 2px 2px;
+			left: -22px;
+			top: -22px;
+			box-shadow: $colorC 0px 3px 8px;
+
+			&.online {
+				svg {
+					fill: forestgreen;
+				}
+			}
+
+			svg {
+				width: 24px;
+				height: 24px;
+				fill: $colorB;
+			}
+
+			@include onDrag();
+		}
+
+		.lunatic-widget-tools {
+			position: absolute;
+			right: 0;
+			top: -18px;
+			margin-top: -4px;
+
+			.lunatic-action-tool {
+				display: inline-block;
+				height: 18px;
+				width: 18px;
+				background-color: $colorB;
+				border-radius: 50%;
+				margin-left: 2px;
+
+				&:hover {
+					box-shadow: $colorC 0px 3px 8px;
+				}
+
+				&.drag {
+					background-color: $colorD;
+					transition: background-color 0.5s;
+				}
+
+				.on-drag-icon {
+					cursor: grab;
+					&.drag {
+						cursor: grabbing;
+					}
+					svg {
+						width: 16px;
+						height: 16px;
+						fill: $colorA;
+					}
+				}
+			}
+		}
+	}
+}

package/src/components/switch/index.js

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

package/src/components/switch/lunatic-switch.js

@@ -0,0 +1,36 @@
+import React, { useCallback } from 'react';
+import PropTypes from 'prop-types';
+import Switch from './switch';
+
+import { createLunaticComponent } from '../commons';
+
+function LunaticSwitch({ id, value, statusLabel, onChange, custom, labelId }) {
+	const booleanValue = value || false;
+	const onClick = useCallback(
+		function (status) {
+			onChange(status);
+		},
+		[onChange]
+	);
+
+	return (
+		<Switch
+			id={id}
+			checked={booleanValue}
+			onClick={onClick}
+			statusLabel={statusLabel}
+			labelId={labelId}
+			custom={custom}
+		/>
+	);
+}
+
+LunaticSwitch.propTypes = {
+	value: PropTypes.oneOf([null, true, false]),
+};
+
+LunaticSwitch.defaultProps = { statusLabel: { true: 'True', false: 'False' } };
+
+export default createLunaticComponent(LunaticSwitch, {
+	inputId: 'lunatic-switch',
+});

package/src/components/switch/switch.js

@@ -0,0 +1,73 @@
+import React, { useCallback } from 'react';
+import PropTypes from 'prop-types';
+import classnames from 'classnames';
+import { createCustomizableLunaticField } from '../commons';
+import './switch.scss';
+
+function Switch({ checked, disabled, onClick, statusLabel, labelId, id }) {
+	const handleClick = useCallback(
+		function () {
+			onClick(!checked);
+		},
+		[checked, onClick]
+	);
+
+	const handleKeyDown = useCallback(
+		function (e) {
+			const { code } = e;
+			if (code === 'Space') {
+				onClick();
+			}
+		},
+		[onClick]
+	);
+	const { true: labelTrue, false: labelFalse } = statusLabel;
+
+	return (
+		<div className="lunatic-switch" id={id}>
+			<div
+				className={classnames('lunatic-switch-label', { checked: !checked })}
+			>
+				{labelFalse}
+			</div>
+			<div
+				role="switch"
+				aria-checked={checked}
+				tabIndex="0"
+				className={classnames('lunatic-switch-container', {
+					disabled,
+					checked,
+				})}
+				onClick={handleClick}
+				onKeyDown={handleKeyDown}
+				labelledBy={labelId}
+			>
+				<div className="lunatic-switch-button"></div>
+			</div>
+			<div className={classnames('lunatic-switch-label', { checked })}>
+				{labelTrue}
+			</div>
+		</div>
+	);
+}
+
+Switch.propTypes = {
+	checked: PropTypes.bool.isRequired,
+	disabled: PropTypes.bool,
+	handleChange: PropTypes.func.isRequired,
+	statusLabel: PropTypes.shape({
+		true: PropTypes.string,
+		false: PropTypes.string,
+	}),
+	labelId: PropTypes.string.isRequired,
+};
+
+Switch.defaultProps = {
+	disabled: false,
+	statusLabel: {
+		true: 'True',
+		false: 'False',
+	},
+};
+
+export default createCustomizableLunaticField(Switch);

package/src/components/switch/switch.scss

@@ -0,0 +1,47 @@
+.lunatic-switch {
+	display: flex;
+	flex-direction: row;
+
+	.lunatic-switch-label {
+		height: 100%;
+		line-height: 26px;
+		&.checked {
+			font-weight: bold;
+		}
+	}
+
+	.lunatic-switch-container {
+		display: inline-block;
+		height: 26px;
+		width: 52px;
+		background-color: lightgrey;
+		border-radius: 13px;
+		position: relative;
+		margin: 2px;
+
+		cursor: pointer;
+
+		.lunatic-switch-button {
+			position: absolute;
+			height: 22px;
+			width: 22px;
+			background-color: white;
+			border-radius: 11px;
+			margin: 2px;
+
+			-webkit-transition: 0.3s;
+			transition: 0.3s;
+		}
+
+		&.disabled {
+		}
+		&.checked {
+			background-color: royalblue;
+			.lunatic-switch-button {
+				-webkit-transform: translateX(26px);
+				-ms-transform: translateX(26px);
+				transform: translateX(26px);
+			}
+		}
+	}
+}

package/src/components/table/cell.js

@@ -0,0 +1,83 @@
+import React from 'react';
+import { OrchestratedComponent } from '../commons';
+import { Td as HtmlTd } from '../commons/components/html-table';
+
+function collecteResponseValue(response, value) {
+	if (typeof response === 'object') {
+		const { name } = response;
+		if (name in value) {
+			return value[name];
+		}
+	}
+
+	return undefined;
+}
+
+function collecteArrayResponseValue(responses, value) {
+	const [response, ...rest] = responses;
+
+	if (response) {
+		return [
+			collecteResponseValue(response, value),
+			collecteArrayResponseValue(rest, value),
+		];
+	}
+	return [];
+}
+
+function collecteValue(component, value) {
+	const { response, responses } = component;
+
+	if (Array.isArray(responses)) {
+		return collecteArrayResponseValue(responses, value);
+	}
+	if (typeof response === 'object') {
+		return collecteResponseValue(response, value);
+	}
+	return {};
+}
+
+function Cell({
+	content,
+	id,
+	custom,
+	executeExpression,
+	iteration,
+	value,
+	row,
+	index,
+	handleChange,
+}) {
+	const { label, componentType, rowspan, colspan } = content;
+
+	if (componentType) {
+		const valueField = collecteValue(content, value);
+		return (
+			<HtmlTd
+				id={id}
+				row={row}
+				index={index}
+				rowSpan={rowspan}
+				colSpan={colspan}
+			>
+				<OrchestratedComponent
+					id={id}
+					component={content}
+					handleChange={handleChange}
+					value={valueField}
+					custom={custom}
+					executeExpression={executeExpression}
+					iteration={iteration}
+				/>
+			</HtmlTd>
+		);
+	}
+
+	return (
+		<HtmlTd id={id} row={row} index={index} rowSpan={rowspan} colSpan={colspan}>
+			{label || ''}
+		</HtmlTd>
+	);
+}
+
+export default Cell;

package/src/components/table/components/cell.js

@@ -0,0 +1,83 @@
+import React from 'react';
+import { OrchestratedComponent } from '../../commons';
+import { Td as HtmlTd } from '../../commons/components/html-table';
+
+function collecteResponseValue(response, value) {
+	if (typeof response === 'object') {
+		const { name } = response;
+		if (name in value) {
+			return value[name];
+		}
+	}
+
+	return undefined;
+}
+
+function collecteArrayResponseValue(responses, value) {
+	const [response, ...rest] = responses;
+
+	if (response) {
+		return [
+			collecteResponseValue(response, value),
+			collecteArrayResponseValue(rest, value),
+		];
+	}
+	return [];
+}
+
+function collecteValue(component, value) {
+	const { response, responses } = component;
+
+	if (Array.isArray(responses)) {
+		return collecteArrayResponseValue(responses, value);
+	}
+	if (typeof response === 'object') {
+		return collecteResponseValue(response, value);
+	}
+	return {};
+}
+
+function Cell({
+	content,
+	id,
+	custom,
+	executeExpression,
+	iteration,
+	value,
+	row,
+	index,
+	handleChange,
+}) {
+	const { label, componentType, rowspan, colspan } = content;
+
+	if (componentType) {
+		const valueField = collecteValue(content, value);
+		return (
+			<HtmlTd
+				id={id}
+				row={row}
+				index={index}
+				rowSpan={rowspan}
+				colSpan={colspan}
+			>
+				<OrchestratedComponent
+					id={id}
+					component={content}
+					handleChange={handleChange}
+					value={valueField}
+					custom={custom}
+					executeExpression={executeExpression}
+					iteration={iteration}
+				/>
+			</HtmlTd>
+		);
+	}
+
+	return (
+		<HtmlTd id={id} row={row} index={index} rowSpan={rowspan} colSpan={colspan}>
+			{label || ''}
+		</HtmlTd>
+	);
+}
+
+export default Cell;

package/src/components/table/components/header.js

@@ -0,0 +1,36 @@
+import React from 'react';
+import {
+	Thead as HtmlThead,
+	Tr as HtmlTr,
+	Th as HtmlTh,
+} from '../../commons/components/html-table';
+
+function Header({ custom, id, header }) {
+	if (Array.isArray(header)) {
+		const content = header.map(function ({ label, rowspan, colspan }, index) {
+			return (
+				<HtmlTh
+					id={id}
+					custom={custom}
+					row={0}
+					index={index}
+					rowSpan={rowspan}
+					colSpan={colspan}
+					key={index}
+				>
+					{label}
+				</HtmlTh>
+			);
+		});
+		return (
+			<HtmlThead id={id} custom={custom}>
+				<HtmlTr id={id} custom={custom} row={0}>
+					{content}
+				</HtmlTr>
+			</HtmlThead>
+		);
+	}
+	return null;
+}
+
+export default Header;