@inseefr/lunatic 0.4.0-v2 → 0.4.4-v2

package/lib/components/commons/components/create-lunatic-component/create-lunatic-component.js

@@ -17,16 +17,16 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "d
 
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
-/*
-	Pour le moment HOC utilisé pour :
-		Input
-		InputNumber
-		DatePicker
-		Switch
-		Dropdown
-		Suggester
-
-
+/*
+	Pour le moment HOC utilisé pour :
+		Input
+		InputNumber
+		DatePicker
+		Switch
+		Dropdown
+		Suggester
+
+
 */
 function getComponent(fieldset) {
   if (fieldset) {

package/lib/components/commons/components/dragger/dragger.scss

@@ -1,8 +1,8 @@
-.lunatic-dragger {
-    display: inline-block;;
-    width: 100%;
-    height: 100%;
-    -moz-user-select: -moz-none;
-	-khtml-user-select: none;
-	-webkit-user-select: none;
+.lunatic-dragger {
+    display: inline-block;;
+    width: 100%;
+    height: 100%;
+    -moz-user-select: -moz-none;
+	-khtml-user-select: none;
+	-webkit-user-select: none;
 }

package/lib/components/commons/components/errors/errors.js

@@ -0,0 +1,35 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+require("./errors.scss");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+function Errors(_ref) {
+  var errors = _ref.errors;
+
+  if (Array.isArray(errors)) {
+    var content = errors.map(function (_ref2) {
+      var id = _ref2.id,
+          errorMessage = _ref2.errorMessage;
+      return /*#__PURE__*/_react["default"].createElement("div", {
+        key: "error-".concat(id),
+        className: "lunatic-error"
+      }, errorMessage);
+    });
+    return /*#__PURE__*/_react["default"].createElement("div", {
+      className: "lunatic-errors"
+    }, content);
+  }
+
+  return null;
+}
+
+var _default = Errors;
+exports["default"] = _default;

package/lib/components/commons/components/errors/errors.scss

@@ -0,0 +1,5 @@
+.lunatic-errors {
+	.lunatic-error {
+		color: red;
+	}
+}

package/lib/components/commons/components/errors/index.js

@@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function get() {
+    return _errors["default"];
+  }
+});
+
+var _errors = _interopRequireDefault(require("./errors"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

package/lib/components/commons/components/fab/fab.scss

@@ -1,32 +1,32 @@
-.lunatic-fab {
-	width: 32px;
-	height: 32px;
-	border-radius: 50%;
-	margin: 0;
-	padding: 0;
-	outline: inherit;
-	border: none;
-	background-color: royalblue;
-	box-shadow: 0px 3px 5px -1px rgb(0 0 0 / 20%),
-		0px 6px 10px 0px rgb(0 0 0 / 14%), 0px 1px 18px 0px rgb(0 0 0 / 12%);
-
-	&:hover {
-		cursor: pointer;
-		background-color: navy;
-		transition: background-color 1s;
-	}
-
-	&.mini {
-		width: 18px;
-		height: 18px;
-	}
-
-	&:focus {
-		border: solid 1px black;
-	}
-
-	&:disabled {
-		cursor: default;
-		background-color: darkgray;
-	}
-}
+.lunatic-fab {
+	width: 32px;
+	height: 32px;
+	border-radius: 50%;
+	margin: 0;
+	padding: 0;
+	outline: inherit;
+	border: none;
+	background-color: royalblue;
+	box-shadow: 0px 3px 5px -1px rgb(0 0 0 / 20%),
+		0px 6px 10px 0px rgb(0 0 0 / 14%), 0px 1px 18px 0px rgb(0 0 0 / 12%);
+
+	&:hover {
+		cursor: pointer;
+		background-color: navy;
+		transition: background-color 1s;
+	}
+
+	&.mini {
+		width: 18px;
+		height: 18px;
+	}
+
+	&:focus {
+		border: solid 1px black;
+	}
+
+	&:disabled {
+		cursor: default;
+		background-color: darkgray;
+	}
+}

package/lib/components/commons/components/missing/missing.scss

@@ -1,30 +1,30 @@
-.lunatic-component {
-	.missing-buttons {
-		margin-top: 1em;
-		.button-lunatic {
-			width: 4em;
-			font-size: 1em;
-			font-weight: normal;
-		}
-		.missing-button {
-			.button-lunatic {
-				background-color: var(--color-very-very-light);
-				color: var(--color-primary-dark);
-				&:hover {
-					background-color: white;
-					color: var(--color-primary-main);
-				}
-			}
-		}
-		.missing-button-active {
-			.button-lunatic {
-				background-color: var(--color-primary-dark);
-				color: var(--color-very-very-light);
-				&:hover {
-					background-color: var(--color-primary-main);
-					color: white;
-				}
-			}
-		}
-	}
-}
+.lunatic-component {
+	.missing-buttons {
+		margin-top: 1em;
+		.button-lunatic {
+			width: 4em;
+			font-size: 1em;
+			font-weight: normal;
+		}
+		.missing-button {
+			.button-lunatic {
+				background-color: var(--color-very-very-light);
+				color: var(--color-primary-dark);
+				&:hover {
+					background-color: white;
+					color: var(--color-primary-main);
+				}
+			}
+		}
+		.missing-button-active {
+			.button-lunatic {
+				background-color: var(--color-primary-dark);
+				color: var(--color-very-very-light);
+				&:hover {
+					background-color: var(--color-primary-main);
+					color: white;
+				}
+			}
+		}
+	}
+}

package/lib/components/commons/components/variable-status/variable-status.scss

@@ -1,39 +1,39 @@
-// Import index once for bundle
-@import '../../../index.scss';
-
-.lunatic-component-container-test {
-	display: flex;
-
-	.lunatic-component-body {
-		width: 80%;
-	}
-
-	/* Tooltip container */
-	.tooltip-lunatic {
-		margin: auto;
-		width: 20%;
-		position: relative;
-		display: block;
-		margin-left: auto;
-		margin-right: auto;
-	}
-
-	/* Tooltip text */
-	.tooltip-lunatic .tooltip-text {
-		min-width: 10em;
-		max-width: 20em;
-		background-color: var(--color-primary-dark);
-		color: #fff;
-		padding: 0.5em;
-		border-radius: 6px;
-		font-size: 1em;
-		&.place-left {
-			&::before {
-				border-left: 10px solid var(--color-primary-dark);
-			}
-			&::after {
-				content: none;
-			}
-		}
-	}
-}
+// Import index once for bundle
+@import '../../../index.scss';
+
+.lunatic-component-container-test {
+	display: flex;
+
+	.lunatic-component-body {
+		width: 80%;
+	}
+
+	/* Tooltip container */
+	.tooltip-lunatic {
+		margin: auto;
+		width: 20%;
+		position: relative;
+		display: block;
+		margin-left: auto;
+		margin-right: auto;
+	}
+
+	/* Tooltip text */
+	.tooltip-lunatic .tooltip-text {
+		min-width: 10em;
+		max-width: 20em;
+		background-color: var(--color-primary-dark);
+		color: #fff;
+		padding: 0.5em;
+		border-radius: 6px;
+		font-size: 1em;
+		&.place-left {
+			&::before {
+				border-left: 10px solid var(--color-primary-dark);
+			}
+			&::after {
+				content: none;
+			}
+		}
+	}
+}

package/lib/components/commons/icons/lunatic-icon.scss

@@ -1,4 +1,4 @@
-.lunatic-icon {
-	display: flex;
-	justify-content: center;
-}
+.lunatic-icon {
+	display: flex;
+	justify-content: center;
+}

package/lib/components/commons/index.js

@@ -23,6 +23,12 @@ Object.defineProperty(exports, "DefaultOptionRenderer", {
     return _defaultOptionRenderer["default"];
   }
 });
+Object.defineProperty(exports, "Errors", {
+  enumerable: true,
+  get: function get() {
+    return _errors["default"];
+  }
+});
 Object.defineProperty(exports, "FieldContainer", {
   enumerable: true,
   get: function get() {
@@ -147,6 +153,8 @@ var _safetyLabel = _interopRequireDefault(require("./safety-label"));
 
 var _createLunaticComponent = _interopRequireDefault(require("./components/create-lunatic-component"));
 
+var _errors = _interopRequireDefault(require("./components/errors"));
+
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

package/lib/components/commons/use-on-handle-change.js

@@ -11,12 +11,11 @@ function useOnHandleChange(_ref) {
   var handleChange = _ref.handleChange,
       response = _ref.response,
       value = _ref.value;
-  var onHandlechange = (0, _react.useCallback)(function (valueOption) {
+  return (0, _react.useCallback)(function (valueOption) {
     if (value !== valueOption) {
       handleChange(response, valueOption);
     }
   }, [handleChange, response, value]);
-  return onHandlechange;
 }
 
 var _default = useOnHandleChange;

package/lib/components/datepicker/datepicker.scss

@@ -1 +1 @@
-// see input.scss
+// see input.scss

package/lib/components/datepicker/lunatic-datepicker.js

@@ -11,9 +11,24 @@ var _commons = require("../commons");
 
 require("./datepicker.scss");
 
+var _excluded = ["errors"];
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
-var _default = (0, _commons.createLunaticComponent)(_datepicker["default"], {
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
+var LunaticDatepicker = function LunaticDatepicker(_ref) {
+  var errors = _ref.errors,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_datepicker["default"], props), /*#__PURE__*/React.createElement(_commons.Errors, {
+    errors: errors
+  }));
+};
+
+var _default = (0, _commons.createLunaticComponent)(LunaticDatepicker, {
   inputId: 'lunatic-datepicker'
 });
 

package/lib/components/declarations/declarations.scss

@@ -1,36 +1,36 @@
-.lunatic-component {
-	.lunatic-declarations {
-		margin-bottom: 0.4rem;
-	}
-
-	.declaration-instruction {
-		font-style: italic;
-		font-size: 80%;
-	}
-
-	.declaration-statement {
-		font-style: italic;
-		font-size: 80%;
-		color: blue;
-	}
-
-	.declaration-help {
-		font-style: italic;
-		font-size: 80%;
-		color: green;
-	}
-
-	.declaration-codecard {
-		font-style: bold;
-		font-size: 80%;
-		color: purple;
-	}
-
-	.declaration-message_filter {
-		font-size: 100%;
-		color: rgb(73, 66, 66);
-		&:before {
-			content: '→ ';
-		}
-	}
-}
+.lunatic-component {
+	.lunatic-declarations {
+		margin-bottom: 0.4rem;
+	}
+
+	.declaration-instruction {
+		font-style: italic;
+		font-size: 80%;
+	}
+
+	.declaration-statement {
+		font-style: italic;
+		font-size: 80%;
+		color: blue;
+	}
+
+	.declaration-help {
+		font-style: italic;
+		font-size: 80%;
+		color: green;
+	}
+
+	.declaration-codecard {
+		font-style: bold;
+		font-size: 80%;
+		color: purple;
+	}
+
+	.declaration-message_filter {
+		font-size: 100%;
+		color: rgb(73, 66, 66);
+		&:before {
+			content: '→ ';
+		}
+	}
+}

package/lib/components/dropdown/dropdown.scss

@@ -1,41 +1,41 @@
-@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 {
-		.lunatic-dropdown-option {
-			text-overflow: ellipsis;
-			white-space: nowrap;
-			overflow: hidden;
-			margin-bottom: 0.1em;
-			line-height: 2rem;
-			display: block;
-
-			&.selected {
-				color: var(--color-primary-dark);
-				background-color: goldenrod;
-			}
-
-			&:hover {
-				background-color: var(--color-primary-main);
-				color: white;
-			}
-
-			.prefix {
-				color: red;
-			}
-
-			.normal {
-			}
-		}
-	}
-}
+@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 {
+		.lunatic-dropdown-option {
+			text-overflow: ellipsis;
+			white-space: nowrap;
+			overflow: hidden;
+			margin-bottom: 0.1em;
+			line-height: 2rem;
+			display: block;
+
+			&.selected {
+				color: var(--color-primary-dark);
+				background-color: goldenrod;
+			}
+
+			&:hover {
+				background-color: var(--color-primary-main);
+				color: white;
+			}
+
+			.prefix {
+				color: red;
+			}
+
+			.normal {
+			}
+		}
+	}
+}

package/lib/components/dropdown/lunatic-dropdown.js

@@ -23,8 +23,9 @@ function LunaticDropdown(_ref) {
       disabled = _ref.disabled,
       htmlFor = _ref.htmlFor,
       labelId = _ref.labelId,
-      value = _ref.value;
-  return /*#__PURE__*/_react["default"].createElement(_dropdown["default"], {
+      value = _ref.value,
+      errors = _ref.errors;
+  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_dropdown["default"], {
     id: id,
     htmlFor: id,
     labelId: labelId,
@@ -35,7 +36,9 @@ function LunaticDropdown(_ref) {
     onSelect: onChange,
     value: value,
     className: "lunatic-dropdown"
-  });
+  }), /*#__PURE__*/_react["default"].createElement(_commons.Errors, {
+    errors: errors
+  }));
 }
 
 LunaticDropdown.propTypes = {