allaw-ui 4.4.1 → 4.4.3

package/dist/components/atoms/datepickers/Datepicker.d.ts

@@ -12,6 +12,7 @@ export interface DatepickerProps {
     maxDate?: Date;
     disableFutur?: Boolean;
     mode?: "button" | "input";
+    onError?: (err: string) => void;
 }
 declare const Datepicker: React.FC<DatepickerProps>;
 export default Datepicker;

package/dist/components/atoms/datepickers/Datepicker.js

@@ -49,7 +49,7 @@ var CustomInput = forwardRef(function (_a, ref) {
 });
 CustomInput.displayName = "CustomInput";
 var CustomInputField = forwardRef(function (_a, ref) {
-    var value = _a.value, onChange = _a.onChange, onCalendarClick = _a.onCalendarClick, placeholder = _a.placeholder, onBlur = _a.onBlur, error = _a.error;
+    var value = _a.value, onChange = _a.onChange, onCalendarClick = _a.onCalendarClick, placeholder = _a.placeholder, onBlur = _a.onBlur, error = _a.error, onError = _a.onError;
     var _b = useState(value || ""), inputValue = _b[0], setInputValue = _b[1];
     var _c = useState(false), isTouched = _c[0], setIsTouched = _c[1];
     var _d = useState(error || ""), localError = _d[0], setLocalError = _d[1];
@@ -60,6 +60,10 @@ var CustomInputField = forwardRef(function (_a, ref) {
     useEffect(function () {
         setLocalError(error || "");
     }, [error]);
+    useEffect(function () {
+        if (onError)
+            onError(localError);
+    }, [localError, onError]);
     useImperativeHandle(ref, function () { return inputRef.current; });
     var handleInput = function (e) {
         var val = e.target.value.replace(/[^0-9/]/g, "");
@@ -96,17 +100,19 @@ var CustomInputField = forwardRef(function (_a, ref) {
         var err = validateDate(inputValue);
         setLocalError(err);
         onBlur === null || onBlur === void 0 ? void 0 : onBlur();
+        if (onError)
+            onError(err);
     };
     return (React.createElement("div", { style: { width: "100%" } },
         React.createElement("div", { className: "datepicker-input-wrapper" },
             React.createElement("input", { ref: inputRef, type: "text", inputMode: "numeric", pattern: "\\d{2}/\\d{2}/\\d{4}", maxLength: 10, className: "datepicker-input ".concat(localError && isTouched ? "datepicker-input-error" : ""), placeholder: placeholder, value: inputValue, onChange: handleInput, onBlur: handleBlur, autoComplete: "off", "data-form-type": "other", "data-lpignore": "true", "data-1p-ignore": true }),
             React.createElement("button", { type: "button", className: "datepicker-input-icon", tabIndex: -1, onClick: onCalendarClick },
                 React.createElement("i", { className: "datepicker-icon allaw-icon-calendar" }))),
-        localError && isTouched && (React.createElement(TinyInfo, { variant: "medium12", color: "actions-error", text: localError }))));
+        localError && isTouched && (React.createElement(TinyInfo, { variant: "medium12", color: "actions-error", text: localError, align: "left" }))));
 });
 CustomInputField.displayName = "CustomInputField";
 var Datepicker = function (_a) {
-    var value = _a.value, onChange = _a.onChange, _b = _a.placeholder, placeholder = _b === void 0 ? "Sélectionner une date" : _b, _c = _a.yearDropdownItemNumber, yearDropdownItemNumber = _c === void 0 ? 10 : _c, maxDaysInPast = _a.maxDaysInPast, minDate = _a.minDate, maxDate = _a.maxDate, _d = _a.disableFutur, disableFutur = _d === void 0 ? true : _d, _e = _a.mode, mode = _e === void 0 ? "button" : _e;
+    var value = _a.value, onChange = _a.onChange, _b = _a.placeholder, placeholder = _b === void 0 ? "Sélectionner une date" : _b, _c = _a.yearDropdownItemNumber, yearDropdownItemNumber = _c === void 0 ? 10 : _c, maxDaysInPast = _a.maxDaysInPast, minDate = _a.minDate, maxDate = _a.maxDate, _d = _a.disableFutur, disableFutur = _d === void 0 ? true : _d, _e = _a.mode, mode = _e === void 0 ? "button" : _e, onError = _a.onError;
     var _f = useState(value), selectedDate = _f[0], setSelectedDate = _f[1];
     var _g = useState(false), isOpen = _g[0], setIsOpen = _g[1];
     var _h = useState({ top: 0, left: 0 }), position = _h[0], setPosition = _h[1];
@@ -211,7 +217,7 @@ var Datepicker = function (_a) {
             }, onCalendarClick: function () { return setIsOpen(!isOpen); }, placeholder: placeholder, error: inputError, onBlur: function () {
                 if (!selectedDate)
                     setInputError("Date invalide");
-            } })) : (React.createElement(CustomInput, { value: selectedDate
+            }, onError: onError })) : (React.createElement(CustomInput, { value: selectedDate
                 ? format(selectedDate, "dd MMMM yyyy", { locale: fr })
                 : "", onClick: function () { return setIsOpen(!isOpen); }, placeholder: placeholder })),
         isOpen &&

package/dist/components/molecules/datepickerForm/DatepickerForm.d.ts

@@ -12,6 +12,7 @@ export interface DatepickerFormProps {
     maxDaysInPast?: number;
     minDate?: Date;
     mode?: "button" | "input";
+    onError?: (err: string) => void;
 }
 declare const DatepickerForm: React.FC<DatepickerFormProps>;
 export default DatepickerForm;

package/dist/components/molecules/datepickerForm/DatepickerForm.js

@@ -16,9 +16,9 @@ import Paragraph from "../../atoms/typography/Paragraph";
 import Datepicker from "../../atoms/datepickers/Datepicker";
 var DatepickerForm = function (_a) {
     // console.log("Valeur reçue dans DatepickerForm :", value);
-    var value = _a.value, onChange = _a.onChange, _b = _a.placeholder, placeholder = _b === void 0 ? "Sélectionner une date" : _b, text = _a.text, _c = _a.variant, variant = _c === void 0 ? "medium" : _c, _d = _a.color, color = _d === void 0 ? "noir" : _d, _e = _a.yearDropdownItemNumber, yearDropdownItemNumber = _e === void 0 ? 10 : _e, maxDaysInPast = _a.maxDaysInPast, minDate = _a.minDate, mode = _a.mode;
+    var value = _a.value, onChange = _a.onChange, _b = _a.placeholder, placeholder = _b === void 0 ? "Sélectionner une date" : _b, text = _a.text, _c = _a.variant, variant = _c === void 0 ? "medium" : _c, _d = _a.color, color = _d === void 0 ? "noir" : _d, _e = _a.yearDropdownItemNumber, yearDropdownItemNumber = _e === void 0 ? 10 : _e, maxDaysInPast = _a.maxDaysInPast, minDate = _a.minDate, mode = _a.mode, onError = _a.onError;
     return (React.createElement("div", { className: "datepicker-form-wrapper" },
         text && React.createElement(Paragraph, { text: text, variant: variant, color: color }),
-        React.createElement(Datepicker, __assign({ value: value || undefined, onChange: onChange, placeholder: placeholder, yearDropdownItemNumber: yearDropdownItemNumber, maxDaysInPast: maxDaysInPast, minDate: minDate }, (mode ? { mode: mode } : {})))));
+        React.createElement(Datepicker, __assign({ value: value || undefined, onChange: onChange, placeholder: placeholder, yearDropdownItemNumber: yearDropdownItemNumber, maxDaysInPast: maxDaysInPast, minDate: minDate }, (mode ? { mode: mode } : {}), (onError ? { onError: onError } : {})))));
 };
 export default DatepickerForm;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "allaw-ui",
-  "version": "4.4.1",
+  "version": "4.4.3",
   "description": "Composants UI pour l'application Allaw",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",