allaw-ui 5.2.7 → 5.2.9
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -13,6 +13,26 @@ export interface InputProps {
|
|
|
13
13
|
validate?: RegExp | keyof typeof commonRegex;
|
|
14
14
|
onError?: (error: string) => void;
|
|
15
15
|
onChange?: (value: string) => void;
|
|
16
|
+
/**
|
|
17
|
+
* Callback appelé quand l'utilisateur sort du champ (blur event).
|
|
18
|
+
* Exécuté APRÈS la validation interne du composant.
|
|
19
|
+
* Utile pour déclencher une validation externe (ex: React Hook Form trigger()).
|
|
20
|
+
*
|
|
21
|
+
* @example
|
|
22
|
+
* <Input
|
|
23
|
+
* onChange={(v) => setValue("field", v, { shouldValidate: true })}
|
|
24
|
+
* onBlur={() => trigger("field")}
|
|
25
|
+
* />
|
|
26
|
+
*/
|
|
27
|
+
onBlur?: () => void | Promise<void>;
|
|
28
|
+
/**
|
|
29
|
+
* Force la validation et l'affichage des erreurs sans attendre le blur.
|
|
30
|
+
* Utile quand le formulaire est soumis sans que l'utilisateur ait touché les champs.
|
|
31
|
+
*
|
|
32
|
+
* @example
|
|
33
|
+
* <Input forceShowErrors={forceShowErrors} />
|
|
34
|
+
*/
|
|
35
|
+
forceShowErrors?: boolean;
|
|
16
36
|
value?: string;
|
|
17
37
|
error?: string;
|
|
18
38
|
type?: string;
|
|
@@ -27,6 +47,18 @@ export interface InputProps {
|
|
|
27
47
|
}
|
|
28
48
|
export interface InputRef {
|
|
29
49
|
validate: () => boolean;
|
|
50
|
+
/**
|
|
51
|
+
* Force l'état isTouched du composant.
|
|
52
|
+
* Utile pour synchroniser avec des systèmes de validation externes (ex: React Hook Form).
|
|
53
|
+
* @param isTouched - true pour marquer le champ comme touché, false sinon
|
|
54
|
+
*/
|
|
55
|
+
setTouched: (isTouched: boolean) => void;
|
|
56
|
+
/**
|
|
57
|
+
* Force l'affichage d'une erreur spécifique et marque le champ comme touché.
|
|
58
|
+
* Utile pour afficher des erreurs de validation externe (ex: React Hook Form).
|
|
59
|
+
* @param message - Le message d'erreur à afficher. Passer une chaîne vide pour effacer l'erreur.
|
|
60
|
+
*/
|
|
61
|
+
showError: (message: string) => void;
|
|
30
62
|
}
|
|
31
63
|
declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<InputRef>>;
|
|
32
64
|
export default Input;
|
|
@@ -9,6 +9,42 @@ var __assign = (this && this.__assign) || function () {
|
|
|
9
9
|
};
|
|
10
10
|
return __assign.apply(this, arguments);
|
|
11
11
|
};
|
|
12
|
+
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
|
|
13
|
+
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
|
|
14
|
+
return new (P || (P = Promise))(function (resolve, reject) {
|
|
15
|
+
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
|
|
16
|
+
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
|
|
17
|
+
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
|
|
18
|
+
step((generator = generator.apply(thisArg, _arguments || [])).next());
|
|
19
|
+
});
|
|
20
|
+
};
|
|
21
|
+
var __generator = (this && this.__generator) || function (thisArg, body) {
|
|
22
|
+
var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
|
|
23
|
+
return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
|
|
24
|
+
function verb(n) { return function (v) { return step([n, v]); }; }
|
|
25
|
+
function step(op) {
|
|
26
|
+
if (f) throw new TypeError("Generator is already executing.");
|
|
27
|
+
while (g && (g = 0, op[0] && (_ = 0)), _) try {
|
|
28
|
+
if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
|
|
29
|
+
if (y = 0, t) op = [op[0] & 2, t.value];
|
|
30
|
+
switch (op[0]) {
|
|
31
|
+
case 0: case 1: t = op; break;
|
|
32
|
+
case 4: _.label++; return { value: op[1], done: false };
|
|
33
|
+
case 5: _.label++; y = op[1]; op = [0]; continue;
|
|
34
|
+
case 7: op = _.ops.pop(); _.trys.pop(); continue;
|
|
35
|
+
default:
|
|
36
|
+
if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
|
|
37
|
+
if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
|
|
38
|
+
if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
|
|
39
|
+
if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
|
|
40
|
+
if (t[2]) _.ops.pop();
|
|
41
|
+
_.trys.pop(); continue;
|
|
42
|
+
}
|
|
43
|
+
op = body.call(thisArg, _);
|
|
44
|
+
} catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
|
|
45
|
+
if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
|
|
46
|
+
}
|
|
47
|
+
};
|
|
12
48
|
import React, { useState, useEffect, useCallback, forwardRef, useImperativeHandle, useRef, } from "react";
|
|
13
49
|
import "./Input.css";
|
|
14
50
|
import "../../../styles/global.css";
|
|
@@ -17,7 +53,7 @@ import { commonRegex } from "../../../utils/regex";
|
|
|
17
53
|
import TinyInfo from "../typography/TinyInfo";
|
|
18
54
|
import Paragraph from "../typography/Paragraph";
|
|
19
55
|
var Input = forwardRef(function (_a, ref) {
|
|
20
|
-
var title = _a.title, _b = _a.style, style = _b === void 0 ? "default" : _b, rowChange = _a.rowChange, placeholder = _a.placeholder, endIcon = _a.endIcon, _c = _a.isRequired, isRequired = _c === void 0 ? false : _c, validate = _a.validate, onError = _a.onError, onChange = _a.onChange, propValue = _a.value, _d = _a.type, type = _d === void 0 ? "text" : _d, propError = _a.error, _e = _a.color, color = _e === void 0 ? "noir" : _e, _f = _a.variant, variant = _f === void 0 ? "medium" : _f, onKeyDown = _a.onKeyDown, name = _a.name, _g = _a.disableZoom, disableZoom = _g === void 0 ? false : _g, _h = _a.isPrefilled, isPrefilled = _h === void 0 ? false : _h, _j = _a.showClearButton, showClearButton = _j === void 0 ? false : _j, _k = _a.disableAutofill, disableAutofill = _k === void 0 ? false : _k;
|
|
56
|
+
var title = _a.title, _b = _a.style, style = _b === void 0 ? "default" : _b, rowChange = _a.rowChange, placeholder = _a.placeholder, endIcon = _a.endIcon, _c = _a.isRequired, isRequired = _c === void 0 ? false : _c, validate = _a.validate, onError = _a.onError, onChange = _a.onChange, onBlur = _a.onBlur, forceShowErrors = _a.forceShowErrors, propValue = _a.value, _d = _a.type, type = _d === void 0 ? "text" : _d, propError = _a.error, _e = _a.color, color = _e === void 0 ? "noir" : _e, _f = _a.variant, variant = _f === void 0 ? "medium" : _f, onKeyDown = _a.onKeyDown, name = _a.name, _g = _a.disableZoom, disableZoom = _g === void 0 ? false : _g, _h = _a.isPrefilled, isPrefilled = _h === void 0 ? false : _h, _j = _a.showClearButton, showClearButton = _j === void 0 ? false : _j, _k = _a.disableAutofill, disableAutofill = _k === void 0 ? false : _k;
|
|
21
57
|
var _l = useState(false), isPasswordVisible = _l[0], setIsPasswordVisible = _l[1];
|
|
22
58
|
var _m = useState(propValue || ""), value = _m[0], setValue = _m[1];
|
|
23
59
|
var _o = useState(propError || ""), error = _o[0], setError = _o[1];
|
|
@@ -52,9 +88,24 @@ var Input = forwardRef(function (_a, ref) {
|
|
|
52
88
|
// );
|
|
53
89
|
onError === null || onError === void 0 ? void 0 : onError(errorMessage);
|
|
54
90
|
return !errorMessage;
|
|
55
|
-
}, [isRequired, value, validate, onError
|
|
91
|
+
}, [isRequired, value, validate, onError]);
|
|
92
|
+
// Forcer la validation quand forceShowErrors devient true
|
|
93
|
+
useEffect(function () {
|
|
94
|
+
if (forceShowErrors) {
|
|
95
|
+
validateInput();
|
|
96
|
+
}
|
|
97
|
+
}, [forceShowErrors, validateInput]);
|
|
56
98
|
useImperativeHandle(ref, function () { return ({
|
|
57
99
|
validate: validateInput,
|
|
100
|
+
setTouched: function (touched) {
|
|
101
|
+
console.log("[Input] setTouched(".concat(touched, ")"));
|
|
102
|
+
setIsTouched(touched);
|
|
103
|
+
},
|
|
104
|
+
showError: function (message) {
|
|
105
|
+
console.log("[Input] showError(\"".concat(message, "\")"));
|
|
106
|
+
setError(message);
|
|
107
|
+
setIsTouched(true);
|
|
108
|
+
},
|
|
58
109
|
}); });
|
|
59
110
|
var handleChange = function (e) {
|
|
60
111
|
var newValue = e.target.value;
|
|
@@ -65,11 +116,23 @@ var Input = forwardRef(function (_a, ref) {
|
|
|
65
116
|
validateInput();
|
|
66
117
|
}
|
|
67
118
|
};
|
|
68
|
-
var handleBlur = function () {
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
119
|
+
var handleBlur = function () { return __awaiter(void 0, void 0, void 0, function () {
|
|
120
|
+
return __generator(this, function (_a) {
|
|
121
|
+
switch (_a.label) {
|
|
122
|
+
case 0:
|
|
123
|
+
// Marquer le champ comme touché
|
|
124
|
+
setIsTouched(true);
|
|
125
|
+
// Valider en interne d'abord
|
|
126
|
+
validateInput();
|
|
127
|
+
if (!onBlur) return [3 /*break*/, 2];
|
|
128
|
+
return [4 /*yield*/, onBlur()];
|
|
129
|
+
case 1:
|
|
130
|
+
_a.sent();
|
|
131
|
+
_a.label = 2;
|
|
132
|
+
case 2: return [2 /*return*/];
|
|
133
|
+
}
|
|
134
|
+
});
|
|
135
|
+
}); };
|
|
73
136
|
var handleClear = function (e) {
|
|
74
137
|
e.preventDefault();
|
|
75
138
|
e.stopPropagation();
|