@aarhus-university/au-lib-react-components 11.3.2 → 11.3.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.
- package/.eslintrc.js +34 -34
- package/.storybook/main.js +20 -20
- package/.storybook/preview.js +17 -17
- package/README.md +19 -19
- package/__tests__/jest/AUButtonComponent.test.tsx +165 -165
- package/__tests__/jest/AUErrorComponent.test.tsx +142 -142
- package/__tests__/jest/AUModalComponent.test.tsx +186 -186
- package/__tests__/jest/AUNotificationComponent.test.tsx +115 -115
- package/__tests__/jest/AUSpinnerComponent.test.tsx +57 -57
- package/__tests__/jest/AUToolbarComponent.test.tsx +46 -46
- package/__tests__/jest/context.test.ts +25 -25
- package/__tests__/jest/helpers.test.ts +15 -15
- package/__tests__/jest/setupTests.ts +2 -2
- package/babel.config.js +8 -8
- package/build/umd/all.css +2 -2
- package/build/umd/all.js +1 -1
- package/build/umd/alphabox.js +1 -1
- package/build/umd/databox.js +1 -1
- package/build/umd/diagramme.js +1 -1
- package/build/umd/flowbox.js +1 -1
- package/build/umd/universe.js +1 -1
- package/build-storybook.log +367 -367
- package/package.json +114 -114
- package/src/components/AUAlertComponent.tsx +70 -70
- package/src/components/AUAutoSuggestComponent.js +158 -158
- package/src/components/AUButtonComponent.tsx +84 -84
- package/src/components/AUCalendarComponent.tsx +493 -493
- package/src/components/AUContentToggleComponent.tsx +47 -47
- package/src/components/AUDatepickerComponent.tsx +121 -121
- package/src/components/AUErrorComponent.tsx +78 -78
- package/src/components/AUMobilePrefixComponent.tsx +15 -15
- package/src/components/AUModalComponent.tsx +68 -68
- package/src/components/AUNotificationComponent.tsx +43 -43
- package/src/components/AUReceiptComponent.tsx +33 -33
- package/src/components/AUSpinnerComponent.tsx +36 -36
- package/src/components/AUStepComponent.tsx +47 -41
- package/src/components/AUSubNavComponent.tsx +48 -48
- package/src/components/AUSubmitButtonContainerComponent.tsx +29 -29
- package/src/components/AUTabbedContentComponent.tsx +145 -145
- package/src/components/AUTableComponent.tsx +24 -24
- package/src/components/AUToastComponent.tsx +104 -104
- package/src/components/AUToolbarComponent.tsx +101 -101
- package/src/components/AUTruncatorComponent.tsx +129 -129
- package/src/components/wrapping/AUEmbedComponent.js +47 -47
- package/src/layout-2016/components/alphabox/AlphaBoxComponent.js +143 -143
- package/src/layout-2016/components/alphabox/AlphaBoxContentComponent.js +136 -136
- package/src/layout-2016/components/common/AUCollapsibleComponent.js +152 -152
- package/src/layout-2016/components/common/AUSpinnerComponent.js +103 -103
- package/src/layout-2016/components/databox/DataBoxAlphabetComponent.js +144 -144
- package/src/layout-2016/components/databox/DataBoxAssociationComponent.js +122 -122
- package/src/layout-2016/components/databox/DataBoxButtonComponent.js +157 -157
- package/src/layout-2016/components/databox/DataBoxComponent.js +297 -297
- package/src/layout-2016/components/databox/DataBoxGroupingComponent.js +64 -64
- package/src/layout-2016/components/databox/DataBoxSearchResultComponent.js +36 -36
- package/src/layout-2016/components/databox/DataBoxStackedAssociationComponent.js +54 -54
- package/src/layout-2016/components/databox/DataBoxSuggestionComponent.js +39 -39
- package/src/layout-2016/components/diagramme/AUDiagrammeComponent.js +309 -309
- package/src/layout-2016/components/flowbox/FlowBoxComponent.js +126 -126
- package/src/layout-2016/components/flowbox/FlowBoxPhoneComponent.js +104 -104
- package/src/layout-2016/components/profile/AUProfileAvatar2016Component.js +103 -103
- package/src/layout-2016/components/universe/StaffTopComponent.js +363 -363
- package/src/layout-2016/components/universe/StudentTopComponent.js +137 -137
- package/src/layout-2016/components/universe/UniverseContainerComponent.js +65 -65
- package/src/layout-2016/lib/all.js +3 -3
- package/src/layout-2016/lib/au-alphabox.js +100 -100
- package/src/layout-2016/lib/au-databox.js +400 -400
- package/src/layout-2016/lib/au-diagramme.js +85 -85
- package/src/layout-2016/lib/au-flowbox.js +93 -93
- package/src/layout-2016/lib/universe.js +9 -9
- package/src/lib/context.tsx +51 -51
- package/src/lib/dates.ts +50 -50
- package/src/lib/helpers.ts +208 -208
- package/src/lib/hooks.ts +75 -75
- package/src/lib/i18n.ts +600 -600
- package/src/lib/portals.tsx +119 -119
- package/src/lib/tracking.ts +69 -69
- package/src/lib/wrapping.ts +21 -21
- package/src/styles/_settings.scss +10 -10
- package/src/styles/alphabox.scss +222 -222
- package/src/styles/app.scss +7 -7
- package/src/styles/autosuggest.scss +57 -57
- package/src/styles/databox.scss +563 -563
- package/src/styles/diagramme.scss +119 -119
- package/src/styles/flowbox.scss +72 -72
- package/src/styles/maps.scss +395 -395
- package/stories/AUButtonComponent.stories.tsx +127 -127
- package/stories/AUContentToggleComponent.stories.tsx +63 -63
- package/stories/AUErrorComponent.stories.tsx +98 -98
- package/stories/AUModalComponent.stories.tsx +83 -83
- package/stories/AUNotificationComponent.stories.tsx +116 -116
- package/stories/AUSpinnerComponent.stories.tsx +41 -41
- package/stories/AUStepComponent.stories.tsx +40 -40
- package/stories/AUToolbarComponent.stories.tsx +326 -326
- package/stories/lib/helpers.tsx +128 -128
- package/tsconfig.json +46 -46
- package/webpack.config.js +89 -89
package/package.json
CHANGED
|
@@ -1,114 +1,114 @@
|
|
|
1
|
-
{
|
|
2
|
-
"sideEffects": false,
|
|
3
|
-
"name": "@aarhus-university/au-lib-react-components",
|
|
4
|
-
"version": "11.3.
|
|
5
|
-
"description": "Library for shared React components for various applications on au.dk",
|
|
6
|
-
"scripts": {
|
|
7
|
-
"test": "jest",
|
|
8
|
-
"build": "jest && webpack --config ./webpack.config.js",
|
|
9
|
-
"storybook": "start-storybook -p 6006",
|
|
10
|
-
"build-storybook": "build-storybook",
|
|
11
|
-
"chromatic": "npx chromatic --project-token=6e78be9148c0"
|
|
12
|
-
},
|
|
13
|
-
"repository": {
|
|
14
|
-
"type": "git",
|
|
15
|
-
"url": "https://gitlab.au.dk/au-web-og-digital/au-lib-react-components"
|
|
16
|
-
},
|
|
17
|
-
"author": {
|
|
18
|
-
"name": "Thomas Riis Hansen",
|
|
19
|
-
"email": "trh@au.dk"
|
|
20
|
-
},
|
|
21
|
-
"devDependencies": {
|
|
22
|
-
"@babel/core": "^7.17.0",
|
|
23
|
-
"@babel/plugin-proposal-class-properties": "^7.16.7",
|
|
24
|
-
"@babel/plugin-proposal-object-rest-spread": "^7.16.7",
|
|
25
|
-
"@babel/plugin-proposal-optional-chaining": "^7.16.7",
|
|
26
|
-
"@babel/preset-env": "^7.16.11",
|
|
27
|
-
"@babel/preset-react": "^7.16.7",
|
|
28
|
-
"@babel/preset-typescript": "^7.16.7",
|
|
29
|
-
"@mdx-js/react": "^2.1.2",
|
|
30
|
-
"@storybook/addon-a11y": "^6.5.9",
|
|
31
|
-
"@storybook/addon-actions": "^6.5.4",
|
|
32
|
-
"@storybook/addon-essentials": "^6.5.4",
|
|
33
|
-
"@storybook/addon-interactions": "^6.5.4",
|
|
34
|
-
"@storybook/addon-links": "^6.5.4",
|
|
35
|
-
"@storybook/builder-webpack4": "^6.5.4",
|
|
36
|
-
"@storybook/builder-webpack5": "^6.5.4",
|
|
37
|
-
"@storybook/jest": "^0.0.10",
|
|
38
|
-
"@storybook/manager-webpack4": "^6.5.4",
|
|
39
|
-
"@storybook/manager-webpack5": "^6.5.4",
|
|
40
|
-
"@storybook/react": "^6.5.4",
|
|
41
|
-
"@storybook/testing-library": "^0.0.11",
|
|
42
|
-
"@testing-library/jest-dom": "5.0.0",
|
|
43
|
-
"@testing-library/react": "13.0.0",
|
|
44
|
-
"@testing-library/user-event": "14.0.0",
|
|
45
|
-
"@types/jest": "^27.4.0",
|
|
46
|
-
"@types/testing-library__jest-dom": "5.0.0",
|
|
47
|
-
"@typescript-eslint/eslint-plugin": "^5.10.2",
|
|
48
|
-
"@typescript-eslint/parser": "^5.10.2",
|
|
49
|
-
"babel-eslint": "^10.1.0",
|
|
50
|
-
"babel-jest": "^27.5.1",
|
|
51
|
-
"babel-loader": "^8.2.3",
|
|
52
|
-
"chromatic": "^6.7.2",
|
|
53
|
-
"css-loader": "^6.6.0",
|
|
54
|
-
"eslint": "^8.8.0",
|
|
55
|
-
"eslint-config-airbnb": "^19.0.4",
|
|
56
|
-
"eslint-import-resolver-typescript": "^2.5.0",
|
|
57
|
-
"eslint-plugin-import": "^2.25.4",
|
|
58
|
-
"eslint-plugin-jsx-a11y": "^6.5.1",
|
|
59
|
-
"eslint-plugin-react": "^7.28.0",
|
|
60
|
-
"eslint-plugin-react-hooks": "^4.3.0",
|
|
61
|
-
"eslint-plugin-storybook": "^0.5.12",
|
|
62
|
-
"eslint-webpack-plugin": "^3.1.1",
|
|
63
|
-
"fork-ts-checker-webpack-plugin": "^7.0.0",
|
|
64
|
-
"jest": "^27.5.1",
|
|
65
|
-
"mini-css-extract-plugin": "^2.5.3",
|
|
66
|
-
"react-test-renderer": "18.1.0",
|
|
67
|
-
"sass": "^1.49.7",
|
|
68
|
-
"sass-loader": "^12.4.0",
|
|
69
|
-
"style-loader": "^3.3.1",
|
|
70
|
-
"ts-loader": "^9.2.6",
|
|
71
|
-
"typescript": "^4.5.5",
|
|
72
|
-
"webpack-cli": "^4.9.2"
|
|
73
|
-
},
|
|
74
|
-
"dependencies": {
|
|
75
|
-
"@aarhus-university/au-designsystem-delphinus": "0.34.8",
|
|
76
|
-
"@aarhus-university/au-designsystem-delphinus-dev": "0.2.0",
|
|
77
|
-
"@aarhus-university/types": "^0.17.11",
|
|
78
|
-
"@reduxjs/toolkit": "^1.8.3",
|
|
79
|
-
"@types/google.analytics": "^0.0.42",
|
|
80
|
-
"@types/history": "^5.0.0",
|
|
81
|
-
"@types/react": "^18.0.14",
|
|
82
|
-
"@types/react-dom": "^18.0.5",
|
|
83
|
-
"@types/react-router-dom": "^5.3.3",
|
|
84
|
-
"dayjs": "^1.11.3",
|
|
85
|
-
"lodash.debounce": "^4.0.8",
|
|
86
|
-
"prop-types": "^15.8.1",
|
|
87
|
-
"query-string": "^7.1.0",
|
|
88
|
-
"react": "18.2.0",
|
|
89
|
-
"react-autosuggest": "^10.1.0",
|
|
90
|
-
"react-router-dom": "^6.2.1",
|
|
91
|
-
"regenerator-runtime": "^0.13.9",
|
|
92
|
-
"webpack": "^5.68.0",
|
|
93
|
-
"whatwg-fetch": "^3.6.2"
|
|
94
|
-
},
|
|
95
|
-
"peerDependencies": {
|
|
96
|
-
"react": "18.2.0",
|
|
97
|
-
"react-dom": "18.2.0"
|
|
98
|
-
},
|
|
99
|
-
"jest": {
|
|
100
|
-
"rootDir": "__tests__/jest",
|
|
101
|
-
"setupFilesAfterEnv": [
|
|
102
|
-
"./setupTests.ts"
|
|
103
|
-
],
|
|
104
|
-
"testEnvironment": "jsdom",
|
|
105
|
-
"transformIgnorePatterns": [
|
|
106
|
-
"node_modules/(?!(@aarhus-university/au-lib-react-components|@aarhus-university/au-designsystem-delphinus|node-fetch|data-uri-to-buffer|fetch-blob|formdata-polyfill)/)"
|
|
107
|
-
],
|
|
108
|
-
"testPathIgnorePatterns": [
|
|
109
|
-
"factory.ts",
|
|
110
|
-
"setupTests.ts"
|
|
111
|
-
]
|
|
112
|
-
},
|
|
113
|
-
"readme": "ERROR: No README data found!"
|
|
114
|
-
}
|
|
1
|
+
{
|
|
2
|
+
"sideEffects": false,
|
|
3
|
+
"name": "@aarhus-university/au-lib-react-components",
|
|
4
|
+
"version": "11.3.3",
|
|
5
|
+
"description": "Library for shared React components for various applications on au.dk",
|
|
6
|
+
"scripts": {
|
|
7
|
+
"test": "jest",
|
|
8
|
+
"build": "jest && webpack --config ./webpack.config.js",
|
|
9
|
+
"storybook": "start-storybook -p 6006",
|
|
10
|
+
"build-storybook": "build-storybook",
|
|
11
|
+
"chromatic": "npx chromatic --project-token=6e78be9148c0"
|
|
12
|
+
},
|
|
13
|
+
"repository": {
|
|
14
|
+
"type": "git",
|
|
15
|
+
"url": "https://gitlab.au.dk/au-web-og-digital/au-lib-react-components"
|
|
16
|
+
},
|
|
17
|
+
"author": {
|
|
18
|
+
"name": "Thomas Riis Hansen",
|
|
19
|
+
"email": "trh@au.dk"
|
|
20
|
+
},
|
|
21
|
+
"devDependencies": {
|
|
22
|
+
"@babel/core": "^7.17.0",
|
|
23
|
+
"@babel/plugin-proposal-class-properties": "^7.16.7",
|
|
24
|
+
"@babel/plugin-proposal-object-rest-spread": "^7.16.7",
|
|
25
|
+
"@babel/plugin-proposal-optional-chaining": "^7.16.7",
|
|
26
|
+
"@babel/preset-env": "^7.16.11",
|
|
27
|
+
"@babel/preset-react": "^7.16.7",
|
|
28
|
+
"@babel/preset-typescript": "^7.16.7",
|
|
29
|
+
"@mdx-js/react": "^2.1.2",
|
|
30
|
+
"@storybook/addon-a11y": "^6.5.9",
|
|
31
|
+
"@storybook/addon-actions": "^6.5.4",
|
|
32
|
+
"@storybook/addon-essentials": "^6.5.4",
|
|
33
|
+
"@storybook/addon-interactions": "^6.5.4",
|
|
34
|
+
"@storybook/addon-links": "^6.5.4",
|
|
35
|
+
"@storybook/builder-webpack4": "^6.5.4",
|
|
36
|
+
"@storybook/builder-webpack5": "^6.5.4",
|
|
37
|
+
"@storybook/jest": "^0.0.10",
|
|
38
|
+
"@storybook/manager-webpack4": "^6.5.4",
|
|
39
|
+
"@storybook/manager-webpack5": "^6.5.4",
|
|
40
|
+
"@storybook/react": "^6.5.4",
|
|
41
|
+
"@storybook/testing-library": "^0.0.11",
|
|
42
|
+
"@testing-library/jest-dom": "5.0.0",
|
|
43
|
+
"@testing-library/react": "13.0.0",
|
|
44
|
+
"@testing-library/user-event": "14.0.0",
|
|
45
|
+
"@types/jest": "^27.4.0",
|
|
46
|
+
"@types/testing-library__jest-dom": "5.0.0",
|
|
47
|
+
"@typescript-eslint/eslint-plugin": "^5.10.2",
|
|
48
|
+
"@typescript-eslint/parser": "^5.10.2",
|
|
49
|
+
"babel-eslint": "^10.1.0",
|
|
50
|
+
"babel-jest": "^27.5.1",
|
|
51
|
+
"babel-loader": "^8.2.3",
|
|
52
|
+
"chromatic": "^6.7.2",
|
|
53
|
+
"css-loader": "^6.6.0",
|
|
54
|
+
"eslint": "^8.8.0",
|
|
55
|
+
"eslint-config-airbnb": "^19.0.4",
|
|
56
|
+
"eslint-import-resolver-typescript": "^2.5.0",
|
|
57
|
+
"eslint-plugin-import": "^2.25.4",
|
|
58
|
+
"eslint-plugin-jsx-a11y": "^6.5.1",
|
|
59
|
+
"eslint-plugin-react": "^7.28.0",
|
|
60
|
+
"eslint-plugin-react-hooks": "^4.3.0",
|
|
61
|
+
"eslint-plugin-storybook": "^0.5.12",
|
|
62
|
+
"eslint-webpack-plugin": "^3.1.1",
|
|
63
|
+
"fork-ts-checker-webpack-plugin": "^7.0.0",
|
|
64
|
+
"jest": "^27.5.1",
|
|
65
|
+
"mini-css-extract-plugin": "^2.5.3",
|
|
66
|
+
"react-test-renderer": "18.1.0",
|
|
67
|
+
"sass": "^1.49.7",
|
|
68
|
+
"sass-loader": "^12.4.0",
|
|
69
|
+
"style-loader": "^3.3.1",
|
|
70
|
+
"ts-loader": "^9.2.6",
|
|
71
|
+
"typescript": "^4.5.5",
|
|
72
|
+
"webpack-cli": "^4.9.2"
|
|
73
|
+
},
|
|
74
|
+
"dependencies": {
|
|
75
|
+
"@aarhus-university/au-designsystem-delphinus": "0.34.8",
|
|
76
|
+
"@aarhus-university/au-designsystem-delphinus-dev": "0.2.0",
|
|
77
|
+
"@aarhus-university/types": "^0.17.11",
|
|
78
|
+
"@reduxjs/toolkit": "^1.8.3",
|
|
79
|
+
"@types/google.analytics": "^0.0.42",
|
|
80
|
+
"@types/history": "^5.0.0",
|
|
81
|
+
"@types/react": "^18.0.14",
|
|
82
|
+
"@types/react-dom": "^18.0.5",
|
|
83
|
+
"@types/react-router-dom": "^5.3.3",
|
|
84
|
+
"dayjs": "^1.11.3",
|
|
85
|
+
"lodash.debounce": "^4.0.8",
|
|
86
|
+
"prop-types": "^15.8.1",
|
|
87
|
+
"query-string": "^7.1.0",
|
|
88
|
+
"react": "18.2.0",
|
|
89
|
+
"react-autosuggest": "^10.1.0",
|
|
90
|
+
"react-router-dom": "^6.2.1",
|
|
91
|
+
"regenerator-runtime": "^0.13.9",
|
|
92
|
+
"webpack": "^5.68.0",
|
|
93
|
+
"whatwg-fetch": "^3.6.2"
|
|
94
|
+
},
|
|
95
|
+
"peerDependencies": {
|
|
96
|
+
"react": "18.2.0",
|
|
97
|
+
"react-dom": "18.2.0"
|
|
98
|
+
},
|
|
99
|
+
"jest": {
|
|
100
|
+
"rootDir": "__tests__/jest",
|
|
101
|
+
"setupFilesAfterEnv": [
|
|
102
|
+
"./setupTests.ts"
|
|
103
|
+
],
|
|
104
|
+
"testEnvironment": "jsdom",
|
|
105
|
+
"transformIgnorePatterns": [
|
|
106
|
+
"node_modules/(?!(@aarhus-university/au-lib-react-components|@aarhus-university/au-designsystem-delphinus|node-fetch|data-uri-to-buffer|fetch-blob|formdata-polyfill)/)"
|
|
107
|
+
],
|
|
108
|
+
"testPathIgnorePatterns": [
|
|
109
|
+
"factory.ts",
|
|
110
|
+
"setupTests.ts"
|
|
111
|
+
]
|
|
112
|
+
},
|
|
113
|
+
"readme": "ERROR: No README data found!"
|
|
114
|
+
}
|
|
@@ -1,70 +1,70 @@
|
|
|
1
|
-
/* eslint-disable @typescript-eslint/no-non-null-assertion */
|
|
2
|
-
/* eslint-env browser */
|
|
3
|
-
import React, { FC } from 'react';
|
|
4
|
-
import ReactDOM from 'react-dom';
|
|
5
|
-
|
|
6
|
-
const AUAlertComponent: FC<AUAlertComponentProps> = ({
|
|
7
|
-
message,
|
|
8
|
-
children,
|
|
9
|
-
alert,
|
|
10
|
-
buttons,
|
|
11
|
-
}: AUAlertComponentProps) => {
|
|
12
|
-
const renderButtons = (buttons || []).map((button) => (
|
|
13
|
-
<button
|
|
14
|
-
key={button.text}
|
|
15
|
-
type="button"
|
|
16
|
-
className={button.className}
|
|
17
|
-
data-icon={button.dataIcon}
|
|
18
|
-
onClick={() => {
|
|
19
|
-
button.onClick();
|
|
20
|
-
}}
|
|
21
|
-
>
|
|
22
|
-
{button.text}
|
|
23
|
-
</button>
|
|
24
|
-
));
|
|
25
|
-
|
|
26
|
-
if (alert) {
|
|
27
|
-
return (
|
|
28
|
-
<>
|
|
29
|
-
{
|
|
30
|
-
ReactDOM.createPortal(
|
|
31
|
-
<div key="0" className="theme--normal toast-notification toast-notification--attention toast-notification--persistent">
|
|
32
|
-
<div className="toast-notification__content">
|
|
33
|
-
<p dangerouslySetInnerHTML={{ __html: message }} />
|
|
34
|
-
</div>
|
|
35
|
-
{renderButtons}
|
|
36
|
-
</div>,
|
|
37
|
-
document.querySelector('body')!,
|
|
38
|
-
)
|
|
39
|
-
}
|
|
40
|
-
{children}
|
|
41
|
-
</>
|
|
42
|
-
);
|
|
43
|
-
}
|
|
44
|
-
|
|
45
|
-
if (!children) {
|
|
46
|
-
return null;
|
|
47
|
-
}
|
|
48
|
-
|
|
49
|
-
return children;
|
|
50
|
-
};
|
|
51
|
-
|
|
52
|
-
AUAlertComponent.defaultProps = {
|
|
53
|
-
buttons: [{
|
|
54
|
-
className: 'button',
|
|
55
|
-
text: 'OK',
|
|
56
|
-
dataIcon: null,
|
|
57
|
-
// eslint-disable-next-line no-console
|
|
58
|
-
onClick: () => console.log('clicked on OK'),
|
|
59
|
-
}, {
|
|
60
|
-
className: 'button',
|
|
61
|
-
text: 'Annuller',
|
|
62
|
-
dataIcon: null,
|
|
63
|
-
// eslint-disable-next-line no-console
|
|
64
|
-
onClick: () => console.log('clicked on cancel'),
|
|
65
|
-
},
|
|
66
|
-
],
|
|
67
|
-
};
|
|
68
|
-
|
|
69
|
-
AUAlertComponent.displayName = 'AUAlertComponent';
|
|
70
|
-
export default AUAlertComponent;
|
|
1
|
+
/* eslint-disable @typescript-eslint/no-non-null-assertion */
|
|
2
|
+
/* eslint-env browser */
|
|
3
|
+
import React, { FC } from 'react';
|
|
4
|
+
import ReactDOM from 'react-dom';
|
|
5
|
+
|
|
6
|
+
const AUAlertComponent: FC<AUAlertComponentProps> = ({
|
|
7
|
+
message,
|
|
8
|
+
children,
|
|
9
|
+
alert,
|
|
10
|
+
buttons,
|
|
11
|
+
}: AUAlertComponentProps) => {
|
|
12
|
+
const renderButtons = (buttons || []).map((button) => (
|
|
13
|
+
<button
|
|
14
|
+
key={button.text}
|
|
15
|
+
type="button"
|
|
16
|
+
className={button.className}
|
|
17
|
+
data-icon={button.dataIcon}
|
|
18
|
+
onClick={() => {
|
|
19
|
+
button.onClick();
|
|
20
|
+
}}
|
|
21
|
+
>
|
|
22
|
+
{button.text}
|
|
23
|
+
</button>
|
|
24
|
+
));
|
|
25
|
+
|
|
26
|
+
if (alert) {
|
|
27
|
+
return (
|
|
28
|
+
<>
|
|
29
|
+
{
|
|
30
|
+
ReactDOM.createPortal(
|
|
31
|
+
<div key="0" className="theme--normal toast-notification toast-notification--attention toast-notification--persistent">
|
|
32
|
+
<div className="toast-notification__content">
|
|
33
|
+
<p dangerouslySetInnerHTML={{ __html: message }} />
|
|
34
|
+
</div>
|
|
35
|
+
{renderButtons}
|
|
36
|
+
</div>,
|
|
37
|
+
document.querySelector('body')!,
|
|
38
|
+
)
|
|
39
|
+
}
|
|
40
|
+
{children}
|
|
41
|
+
</>
|
|
42
|
+
);
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
if (!children) {
|
|
46
|
+
return null;
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
return children;
|
|
50
|
+
};
|
|
51
|
+
|
|
52
|
+
AUAlertComponent.defaultProps = {
|
|
53
|
+
buttons: [{
|
|
54
|
+
className: 'button',
|
|
55
|
+
text: 'OK',
|
|
56
|
+
dataIcon: null,
|
|
57
|
+
// eslint-disable-next-line no-console
|
|
58
|
+
onClick: () => console.log('clicked on OK'),
|
|
59
|
+
}, {
|
|
60
|
+
className: 'button',
|
|
61
|
+
text: 'Annuller',
|
|
62
|
+
dataIcon: null,
|
|
63
|
+
// eslint-disable-next-line no-console
|
|
64
|
+
onClick: () => console.log('clicked on cancel'),
|
|
65
|
+
},
|
|
66
|
+
],
|
|
67
|
+
};
|
|
68
|
+
|
|
69
|
+
AUAlertComponent.displayName = 'AUAlertComponent';
|
|
70
|
+
export default AUAlertComponent;
|