@inseefr/lunatic 0.3.2-experimental → 0.3.2-v2

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

@@ -1,25 +1,25 @@
-import React from 'react';
-import classnames from 'classnames';
-
-function Progress({ display, percent = 0, handleClick = () => null }) {
-	if (display) {
-		return (
-			<div
-				className={classnames('lunatic-suggester-loader-progress', {
-					done: percent === 100,
-				})}
-				onClick={() => handleClick(percent)}
-			>
-				<div className="content">
-					<div
-						className="progress"
-						style={{ width: `${Math.round(percent)}%` }}
-					></div>
-				</div>
-			</div>
-		);
-	}
-	return null;
-}
-
-export default Progress;
+import React from 'react';
+import classnames from 'classnames';
+
+function Progress({ display, percent = 0, handleClick = () => null }) {
+	if (display) {
+		return (
+			<div
+				className={classnames('lunatic-suggester-loader-progress', {
+					done: percent === 100,
+				})}
+				onClick={() => handleClick(percent)}
+			>
+				<div className="content">
+					<div
+						className="progress"
+						style={{ width: `${Math.round(percent)}%` }}
+					></div>
+				</div>
+			</div>
+		);
+	}
+	return null;
+}
+
+export default Progress;

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

@@ -1,20 +1,20 @@
-import React from 'react';
-import classnames from 'classnames';
-
-function ActionTool({ children, ariaLabel, className, title, display = true }) {
-	if (display) {
-		return (
-			<div
-				aria-label={ariaLabel}
-				role="button"
-				className={classnames('lunatic-action-tool', className)}
-				title={title}
-			>
-				{children}
-			</div>
-		);
-	}
-	return null;
-}
-
-export default ActionTool;
+import React from 'react';
+import classnames from 'classnames';
+
+function ActionTool({ children, ariaLabel, className, title, display = true }) {
+	if (display) {
+		return (
+			<div
+				aria-label={ariaLabel}
+				role="button"
+				className={classnames('lunatic-action-tool', className)}
+				title={title}
+			>
+				{children}
+			</div>
+		);
+	}
+	return null;
+}
+
+export default ActionTool;

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

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

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

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

@@ -1,35 +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);
+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

@@ -3,10 +3,10 @@ import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import LoaderRow from './loader-row';
 import { Tools, ActionTool } from './tools';
-import { IsNetwork } from '../../utils/components/is-network';
+import { IsNetwork } from '../commons/components/is-network';
 import WidgetContainer from './widget-container';
-import Dragger from '../../utils/components/dragger';
-import OnDragIcon from '../../utils/icons/on-drag.icon';
+import Dragger from '../commons/components/dragger';
+import { OnDragIcon } from '../commons/icons';
 import './widget.scss';
 
 function empty() {}

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

@@ -1,176 +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;
-					}
-				}
-			}
-		}
-	}
-}
+$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);