@axa-fr/design-system-look-and-feel-react 1.0.5-ci.96 → 1.0.5-ci.98
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.
|
@@ -6,13 +6,14 @@ type Props = Omit<ComponentPropsWithRef<"input">, "required"> & {
|
|
|
6
6
|
buttonLabel?: string;
|
|
7
7
|
dropzoneDescription?: string;
|
|
8
8
|
instructions?: string;
|
|
9
|
+
filesListLabel?: string;
|
|
9
10
|
required?: boolean;
|
|
10
11
|
globalError?: string;
|
|
11
12
|
errors?: Array<{
|
|
12
13
|
id?: string | undefined;
|
|
13
14
|
message: string;
|
|
14
15
|
}>;
|
|
15
|
-
files
|
|
16
|
+
files?: Array<{
|
|
16
17
|
id: string;
|
|
17
18
|
name: string;
|
|
18
19
|
size: number;
|
|
@@ -27,7 +28,7 @@ type Props = Omit<ComponentPropsWithRef<"input">, "required"> & {
|
|
|
27
28
|
onDelete?: (id: string) => void;
|
|
28
29
|
};
|
|
29
30
|
declare const FileUpload: {
|
|
30
|
-
({ id, label, buttonLabel, instructions, dropzoneDescription, required, files, errors, globalError, isMobile, withPadding, onView, onDelete, ...otherProps }: Props): import("react/jsx-runtime").JSX.Element;
|
|
31
|
+
({ id, label, buttonLabel, instructions, dropzoneDescription, filesListLabel, required, files, errors, globalError, isMobile, withPadding, onView, onDelete, ...otherProps }: Props): import("react/jsx-runtime").JSX.Element;
|
|
31
32
|
displayName: string;
|
|
32
33
|
};
|
|
33
34
|
export { FileUpload };
|
|
@@ -18,12 +18,12 @@ function getReadableFileSizeString(fileSizeInBytes) {
|
|
|
18
18
|
let fileSizeInBytesCopy = fileSizeInBytes;
|
|
19
19
|
const byteUnits = [" Ko", " Mo", " Go"];
|
|
20
20
|
do {
|
|
21
|
-
fileSizeInBytesCopy /=
|
|
21
|
+
fileSizeInBytesCopy /= 1000;
|
|
22
22
|
i += 1;
|
|
23
|
-
} while (fileSizeInBytesCopy >
|
|
23
|
+
} while (fileSizeInBytesCopy > 1000);
|
|
24
24
|
return Math.max(fileSizeInBytesCopy, 0.1).toFixed(1) + byteUnits[i];
|
|
25
25
|
}
|
|
26
|
-
const FileUpload = ({ id, label, buttonLabel, instructions, dropzoneDescription, required, files, errors, globalError, isMobile, withPadding = false, onView, onDelete, ...otherProps }) => {
|
|
26
|
+
const FileUpload = ({ id, label, buttonLabel, instructions, dropzoneDescription, filesListLabel, required, files, errors, globalError, isMobile, withPadding = false, onView, onDelete, ...otherProps }) => {
|
|
27
27
|
const idError = useId();
|
|
28
28
|
const getIcon = (isInError, isLoading) => {
|
|
29
29
|
if (isInError) {
|
|
@@ -34,22 +34,24 @@ const FileUpload = ({ id, label, buttonLabel, instructions, dropzoneDescription,
|
|
|
34
34
|
}
|
|
35
35
|
return (_jsx(Svg, { src: check, className: "af-form__file-title-container-icon-success" }));
|
|
36
36
|
};
|
|
37
|
-
return (_jsxs("div", { children: [_jsxs("label", { className: "af-form__group--label", htmlFor: id, children: [label, " ", required ? "*" : ""] }), _jsxs("div", { className: classNames("af-form__file-input", globalError && "af-form__file-input--error", (isMobile || (!withPadding && !dropzoneDescription)) && "is-mobile"), children: [_jsx("input", { type: "file", name: "file-input", id: id, "aria-errormessage": idError, "aria-invalid": Boolean(globalError), ...otherProps }), dropzoneDescription && (_jsxs("div", { className: "af-form__file-input-dropdown-text", children: [_jsx("p", { children: dropzoneDescription }), _jsx("p", { children: "ou" })] })), _jsx(Button, { variant: Variants.tertiary, onClick: () => document.getElementById(id)?.click(), iconLeft: _jsx(Svg, { src: plus, className: "af-form__file-input-icon" }), children: buttonLabel })] }), globalError && _jsx(InputError, { id: idError, message: globalError }), _jsx("small", { className: "af-form__file-input-help", children: instructions }),
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
onDelete(fileId)
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
37
|
+
return (_jsxs("div", { children: [_jsxs("label", { className: "af-form__group--label", htmlFor: id, children: [label, " ", required ? "*" : ""] }), _jsxs("div", { className: classNames("af-form__file-input", globalError && "af-form__file-input--error", (isMobile || (!withPadding && !dropzoneDescription)) && "is-mobile"), children: [_jsx("input", { type: "file", name: "file-input", id: id, "aria-errormessage": idError, "aria-invalid": Boolean(globalError), ...otherProps }), dropzoneDescription && (_jsxs("div", { className: "af-form__file-input-dropdown-text", children: [_jsx("p", { children: dropzoneDescription }), _jsx("p", { children: "ou" })] })), _jsx(Button, { variant: Variants.tertiary, onClick: () => document.getElementById(id)?.click(), iconLeft: _jsx(Svg, { src: plus, className: "af-form__file-input-icon" }), children: buttonLabel })] }), globalError && _jsx(InputError, { id: idError, message: globalError }), instructions && (_jsx("small", { className: "af-form__file-input-help", children: instructions })), _jsxs("div", { className: "custom-table-file af-file-table", children: [filesListLabel && (_jsx("div", { className: "af-form__group--label af-form__files-list-label", children: filesListLabel })), _jsx("ul", { className: "af-form__file-list", children: files &&
|
|
38
|
+
files.length !== 0 &&
|
|
39
|
+
files.map(({ id: fileId, name, size, isLoading }) => {
|
|
40
|
+
const effectiveSize = getReadableFileSizeString(size);
|
|
41
|
+
const isInError = errors
|
|
42
|
+
? errors.some((fileError) => fileError.id === fileId)
|
|
43
|
+
: false;
|
|
44
|
+
const errorMessage = errors?.find((fileError) => fileError.id === fileId)?.message;
|
|
45
|
+
return (_jsxs("li", { className: "af-form__file-line", children: [_jsxs("div", { className: `af-form__file-line-container ${isInError ? "af-form__file-line-container--error" : ""}`, children: [_jsxs("div", { className: "af-form__file-title", children: [getIcon(isInError, isLoading), _jsxs("div", { children: [_jsx("span", { className: "af-form__file-name", children: name }), _jsx("span", { className: "af-form__file-size", children: effectiveSize })] })] }), _jsxs("div", { className: "af-form__file-actions", children: [onView && (_jsx(Svg, { tabIndex: 0, role: "button", "aria-label": "Visualiser", onClick: () => onView(fileId), onKeyDown: (e) => {
|
|
46
|
+
if (e.key === "Enter") {
|
|
47
|
+
onView(fileId);
|
|
48
|
+
}
|
|
49
|
+
}, className: "af-form__file-actions-icon", src: visibility })), onDelete && (_jsx(Svg, { tabIndex: 0, role: "button", "aria-label": "Supprimer", onClick: () => onDelete(fileId), onKeyDown: (e) => {
|
|
50
|
+
if (e.key === "Enter") {
|
|
51
|
+
onDelete(fileId);
|
|
52
|
+
}
|
|
53
|
+
}, className: "af-form__file-actions-icon", src: close }))] })] }), isInError && (_jsxs("small", { className: "af-form__file-error", children: [_jsx(Svg, { src: errorO, className: "af-form__file-error-icon", width: 18 }), errorMessage] }))] }, fileId));
|
|
54
|
+
}) })] })] }));
|
|
53
55
|
};
|
|
54
56
|
FileUpload.displayName = "FileUpload";
|
|
55
57
|
export { FileUpload };
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@axa-fr/design-system-look-and-feel-react",
|
|
3
|
-
"version": "1.0.5-ci.
|
|
3
|
+
"version": "1.0.5-ci.98",
|
|
4
4
|
"description": "",
|
|
5
5
|
"main": "./dist/index.js",
|
|
6
6
|
"types": "./dist/index.d.ts",
|
|
@@ -54,7 +54,7 @@
|
|
|
54
54
|
},
|
|
55
55
|
"homepage": "https://github.com/AxaFrance/design-system#readme",
|
|
56
56
|
"peerDependencies": {
|
|
57
|
-
"@axa-fr/design-system-look-and-feel-css": "1.0.5-ci.
|
|
57
|
+
"@axa-fr/design-system-look-and-feel-css": "1.0.5-ci.98",
|
|
58
58
|
"@material-symbols/svg-400": ">= 0.19.0",
|
|
59
59
|
"react": ">= 18"
|
|
60
60
|
},
|