allaw-ui 5.1.2 → 5.1.3
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.
|
@@ -14,6 +14,7 @@ export interface TextAreaProps {
|
|
|
14
14
|
error?: string;
|
|
15
15
|
maxHeight?: number;
|
|
16
16
|
minHeight?: number;
|
|
17
|
+
maxLength?: number;
|
|
17
18
|
variant?: "bold" | "semiBold" | "medium";
|
|
18
19
|
color?: "bleu-allaw" | "mid-grey" | "dark-grey" | "noir" | "pure-white" | "grey-venom" | "venom-grey-dark";
|
|
19
20
|
dataTestId?: string;
|
|
@@ -6,7 +6,7 @@ import Paragraph from "../typography/Paragraph";
|
|
|
6
6
|
import TinyInfo from "../typography/TinyInfo";
|
|
7
7
|
import "./TextArea.css";
|
|
8
8
|
var TextArea = forwardRef(function (_a, ref) {
|
|
9
|
-
var title = _a.title, _b = _a.style, style = _b === void 0 ? "default" : _b, placeholder = _a.placeholder, _c = _a.isRequired, isRequired = _c === void 0 ? false : _c, validate = _a.validate, onError = _a.onError, onChange = _a.onChange, propValue = _a.value, propError = _a.error, _d = _a.maxHeight, maxHeight = _d === void 0 ? 400 : _d, minHeight = _a.minHeight, _e = _a.variant, variant = _e === void 0 ? "medium" : _e, _f = _a.color, color = _f === void 0 ? "noir" : _f, dataTestId = _a.dataTestId, _g = _a.isPrefilled, isPrefilled = _g === void 0 ? false : _g;
|
|
9
|
+
var title = _a.title, _b = _a.style, style = _b === void 0 ? "default" : _b, placeholder = _a.placeholder, _c = _a.isRequired, isRequired = _c === void 0 ? false : _c, validate = _a.validate, onError = _a.onError, onChange = _a.onChange, propValue = _a.value, propError = _a.error, _d = _a.maxHeight, maxHeight = _d === void 0 ? 400 : _d, minHeight = _a.minHeight, maxLength = _a.maxLength, _e = _a.variant, variant = _e === void 0 ? "medium" : _e, _f = _a.color, color = _f === void 0 ? "noir" : _f, dataTestId = _a.dataTestId, _g = _a.isPrefilled, isPrefilled = _g === void 0 ? false : _g;
|
|
10
10
|
var _h = useState(propValue || ""), value = _h[0], setValue = _h[1];
|
|
11
11
|
var _j = useState(propError || ""), error = _j[0], setError = _j[1];
|
|
12
12
|
var _k = useState(false), isTouched = _k[0], setIsTouched = _k[1];
|
|
@@ -86,7 +86,7 @@ var TextArea = forwardRef(function (_a, ref) {
|
|
|
86
86
|
: ""), "data-testid": dataTestId || "text-area" },
|
|
87
87
|
React.createElement("textarea", { ref: textareaRef, placeholder: placeholder, className: minHeight !== undefined
|
|
88
88
|
? "text-area-placeholder no-transition"
|
|
89
|
-
: "text-area-placeholder", value: value, onChange: handleChange, onBlur: handleBlur, style: textareaStyle, "data-testid": dataTestId || "text-area" })),
|
|
89
|
+
: "text-area-placeholder", value: value, onChange: handleChange, onBlur: handleBlur, style: textareaStyle, maxLength: maxLength, "data-testid": dataTestId || "text-area" })),
|
|
90
90
|
error && isTouched && (React.createElement("div", { className: "error-message" },
|
|
91
91
|
React.createElement(TinyInfo, { variant: "medium12", color: "actions-error", text: error }))))));
|
|
92
92
|
});
|
|
@@ -213,6 +213,7 @@ var FileUploader = function (_a) {
|
|
|
213
213
|
};
|
|
214
214
|
/**
|
|
215
215
|
* Crop l'image côté client et retourne un Blob
|
|
216
|
+
* Utilise la même logique que ImageCropperModal pour calculer le crop
|
|
216
217
|
*/
|
|
217
218
|
var cropImageToBlob = function (imageUrl, cropMetadata, outputWidth, outputHeight) { return __awaiter(void 0, void 0, void 0, function () {
|
|
218
219
|
return __generator(this, function (_a) {
|
|
@@ -230,47 +231,54 @@ var FileUploader = function (_a) {
|
|
|
230
231
|
reject(new Error("Impossible de créer le contexte canvas"));
|
|
231
232
|
return;
|
|
232
233
|
}
|
|
233
|
-
// Dimensions de la zone de crop (
|
|
234
|
-
//
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
var cropAreaWidth = 400;
|
|
238
|
-
var cropAreaHeight = 400;
|
|
234
|
+
// Dimensions de la zone de crop dans le modal (selon le CSS)
|
|
235
|
+
// Ces dimensions correspondent exactement à celles utilisées dans ImageCropperModal.module.css
|
|
236
|
+
var cropAreaWidth = 280; // Dimensions réelles du cadre de crop pour square/circle
|
|
237
|
+
var cropAreaHeight = 280;
|
|
239
238
|
if (cropMetadata.shape === "banner") {
|
|
240
|
-
cropAreaWidth =
|
|
241
|
-
cropAreaHeight =
|
|
239
|
+
cropAreaWidth = 320;
|
|
240
|
+
cropAreaHeight = 60;
|
|
242
241
|
}
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
var
|
|
249
|
-
|
|
250
|
-
//
|
|
251
|
-
//
|
|
242
|
+
// Le zoom dans cropMetadata est déjà le zoom total (baseZoom * zoom relatif)
|
|
243
|
+
// Comme calculé dans ImageCropperModal ligne 318: zoom: baseZoom * zoom
|
|
244
|
+
var totalZoom = cropMetadata.zoom;
|
|
245
|
+
// Dimensions de l'image après zoom
|
|
246
|
+
var scaledImgWidth = img.width * totalZoom;
|
|
247
|
+
var scaledImgHeight = img.height * totalZoom;
|
|
248
|
+
// Dans le modal, l'image est centrée dans le container
|
|
249
|
+
// Le container a les mêmes dimensions que le viewport du modal
|
|
250
|
+
// La cropArea est centrée dans ce container
|
|
251
|
+
// Les offsets (offsetX, offsetY) représentent le déplacement de l'image depuis le centre
|
|
252
|
+
// Position du centre de l'image zoomée (qui correspond au centre du container)
|
|
252
253
|
var imgCenterX = scaledImgWidth / 2;
|
|
253
254
|
var imgCenterY = scaledImgHeight / 2;
|
|
254
|
-
//
|
|
255
|
-
//
|
|
255
|
+
// Position du centre de la cropArea dans l'image zoomée
|
|
256
|
+
// Les offsets sont la position de l'image par rapport au centre du container
|
|
257
|
+
// Donc le centre de la cropArea dans l'image zoomée est :
|
|
256
258
|
var cropCenterX = imgCenterX - cropMetadata.offsetX;
|
|
257
259
|
var cropCenterY = imgCenterY - cropMetadata.offsetY;
|
|
258
|
-
// Coordonnées du coin supérieur gauche de la zone à cropper
|
|
259
|
-
var
|
|
260
|
-
var
|
|
260
|
+
// Coordonnées du coin supérieur gauche de la zone à cropper dans l'image zoomée
|
|
261
|
+
var cropXInScaledImg = cropCenterX - cropAreaWidth / 2;
|
|
262
|
+
var cropYInScaledImg = cropCenterY - cropAreaHeight / 2;
|
|
263
|
+
// Convertir ces coordonnées en coordonnées de l'image originale (diviser par le zoom)
|
|
264
|
+
var sourceX = cropXInScaledImg / totalZoom;
|
|
265
|
+
var sourceY = cropYInScaledImg / totalZoom;
|
|
266
|
+
var sourceWidth = cropAreaWidth / totalZoom;
|
|
267
|
+
var sourceHeight = cropAreaHeight / totalZoom;
|
|
268
|
+
// S'assurer que les coordonnées sont valides
|
|
269
|
+
var clampedSourceX = Math.max(0, Math.min(sourceX, img.width - sourceWidth));
|
|
270
|
+
var clampedSourceY = Math.max(0, Math.min(sourceY, img.height - sourceHeight));
|
|
271
|
+
var clampedSourceWidth = Math.min(sourceWidth, img.width - clampedSourceX);
|
|
272
|
+
var clampedSourceHeight = Math.min(sourceHeight, img.height - clampedSourceY);
|
|
261
273
|
// Dessiner l'image croppée sur le canvas
|
|
262
|
-
ctx.drawImage(img,
|
|
263
|
-
sourceY / cropMetadata.zoom, // source y dans l'image originale
|
|
264
|
-
cropAreaWidth / cropMetadata.zoom, // largeur source
|
|
265
|
-
cropAreaHeight / cropMetadata.zoom, // hauteur source
|
|
266
|
-
0, 0, outputWidth, outputHeight);
|
|
274
|
+
ctx.drawImage(img, clampedSourceX, clampedSourceY, clampedSourceWidth, clampedSourceHeight, 0, 0, outputWidth, outputHeight);
|
|
267
275
|
// Si c'est un cercle, appliquer un masque
|
|
268
276
|
if (cropMetadata.shape === "circle") {
|
|
269
277
|
var imageData = ctx.getImageData(0, 0, outputWidth, outputHeight);
|
|
270
278
|
var pixels = imageData.data;
|
|
271
279
|
var centerX = outputWidth / 2;
|
|
272
280
|
var centerY = outputHeight / 2;
|
|
273
|
-
var radius = outputWidth / 2;
|
|
281
|
+
var radius = Math.min(outputWidth, outputHeight) / 2;
|
|
274
282
|
for (var y = 0; y < outputHeight; y++) {
|
|
275
283
|
for (var x = 0; x < outputWidth; x++) {
|
|
276
284
|
var distance = Math.sqrt(Math.pow(x - centerX, 2) + Math.pow(y - centerY, 2));
|