@aarhus-university/au-lib-react-components 10.0.10 → 10.0.11

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.
Files changed (84) hide show
  1. package/.eslintrc.js +44 -44
  2. package/README.md +19 -19
  3. package/babel.config.js +7 -7
  4. package/build/umd/all.css +2 -2
  5. package/build/umd/all.js +1 -1
  6. package/build/umd/alphabox.js +1 -1
  7. package/build/umd/databox.js +1 -1
  8. package/build/umd/diagramme.js +1 -1
  9. package/build/umd/flowbox.js +1 -1
  10. package/build/umd/universe.js +1 -1
  11. package/package.json +67 -67
  12. package/src/components/AUAlertComponent.tsx +70 -70
  13. package/src/components/AUAutoSuggestComponent.js +158 -158
  14. package/src/components/AUCalendarComponent.tsx +493 -493
  15. package/src/components/AUContentToggleComponent.tsx +33 -33
  16. package/src/components/AUDatepickerComponent.tsx +117 -117
  17. package/src/components/AUMobilePrefixComponent.tsx +15 -15
  18. package/src/components/AUModalComponent.tsx +84 -84
  19. package/src/components/AUReceiptComponent.tsx +33 -33
  20. package/src/components/AUSpinnerComponent.tsx +91 -91
  21. package/src/components/AUSubNavComponent.tsx +38 -38
  22. package/src/components/AUSubmitButtonContainerComponent.tsx +31 -31
  23. package/src/components/AUTabbedContentComponent.tsx +83 -145
  24. package/src/components/AUTableComponent.tsx +24 -24
  25. package/src/components/AUToastComponent.tsx +103 -103
  26. package/src/components/AUToolbarComponent.tsx +45 -45
  27. package/src/components/profile/AUProfileActions.js +128 -128
  28. package/src/components/profile/AUProfileAvatarComponent.js +83 -83
  29. package/src/components/profile/AUProfileAvatarV2Component.js +91 -91
  30. package/src/components/profile/AUProfileAvatarV3Component.tsx +42 -42
  31. package/src/components/profile/AUProfileContainerComponent.js +283 -283
  32. package/src/components/profile/AUProfileHooks.js +30 -30
  33. package/src/components/profile/AUProfileItemComponent.js +54 -54
  34. package/src/components/profile/AUProfileLanguageComponent.js +131 -131
  35. package/src/components/profile/AUProfileLoginComponent.tsx +26 -26
  36. package/src/components/profile/AUProfileMailComponent.js +307 -307
  37. package/src/components/profile/AUProfileMobileComponent.js +164 -164
  38. package/src/components/profile/AUProfileNameComponent.js +253 -253
  39. package/src/components/profile/AUProfileNextOfKinComponent.js +216 -216
  40. package/src/components/profile/AUProfileReducer.js +230 -230
  41. package/src/components/profile/AUProfileWidgetComponent.js +95 -95
  42. package/src/components/profile/AUProfileWidgetV2Component.js +116 -116
  43. package/src/components/profile/AUProfileWidgetV3Component.tsx +122 -122
  44. package/src/components/wrapping/AUEmbedComponent.js +47 -47
  45. package/src/layout-2016/components/alphabox/AlphaBoxComponent.js +143 -143
  46. package/src/layout-2016/components/alphabox/AlphaBoxContentComponent.js +136 -136
  47. package/src/layout-2016/components/common/AUCollapsibleComponent.js +152 -152
  48. package/src/layout-2016/components/common/AUSpinnerComponent.js +103 -103
  49. package/src/layout-2016/components/databox/DataBoxAlphabetComponent.js +144 -144
  50. package/src/layout-2016/components/databox/DataBoxAssociationComponent.js +122 -122
  51. package/src/layout-2016/components/databox/DataBoxButtonComponent.js +157 -157
  52. package/src/layout-2016/components/databox/DataBoxComponent.js +297 -297
  53. package/src/layout-2016/components/databox/DataBoxGroupingComponent.js +64 -64
  54. package/src/layout-2016/components/databox/DataBoxSearchResultComponent.js +36 -36
  55. package/src/layout-2016/components/databox/DataBoxStackedAssociationComponent.js +54 -54
  56. package/src/layout-2016/components/databox/DataBoxSuggestionComponent.js +39 -39
  57. package/src/layout-2016/components/diagramme/AUDiagrammeComponent.js +309 -309
  58. package/src/layout-2016/components/flowbox/FlowBoxComponent.js +126 -126
  59. package/src/layout-2016/components/flowbox/FlowBoxPhoneComponent.js +104 -104
  60. package/src/layout-2016/components/profile/AUProfileAvatar2016Component.js +103 -103
  61. package/src/layout-2016/components/universe/StaffTopComponent.js +363 -363
  62. package/src/layout-2016/components/universe/StudentTopComponent.js +137 -137
  63. package/src/layout-2016/components/universe/UniverseContainerComponent.js +65 -65
  64. package/src/layout-2016/lib/all.js +3 -3
  65. package/src/layout-2016/lib/au-alphabox.js +100 -100
  66. package/src/layout-2016/lib/au-databox.js +400 -400
  67. package/src/layout-2016/lib/au-diagramme.js +85 -85
  68. package/src/layout-2016/lib/au-flowbox.js +93 -93
  69. package/src/layout-2016/lib/universe.js +9 -9
  70. package/src/lib/helpers.ts +208 -208
  71. package/src/lib/hooks.ts +53 -53
  72. package/src/lib/i18n.ts +600 -600
  73. package/src/lib/tracking.ts +69 -69
  74. package/src/lib/wrapping.ts +21 -21
  75. package/src/styles/_settings.scss +10 -10
  76. package/src/styles/alphabox.scss +222 -222
  77. package/src/styles/app.scss +7 -7
  78. package/src/styles/autosuggest.scss +57 -57
  79. package/src/styles/databox.scss +563 -563
  80. package/src/styles/diagramme.scss +119 -119
  81. package/src/styles/flowbox.scss +72 -72
  82. package/src/styles/maps.scss +395 -395
  83. package/tsconfig.json +46 -46
  84. package/webpack.config.js +89 -89
@@ -1,230 +1,230 @@
1
- import { profileLabels } from '../../lib/i18n';
2
- import {
3
- GET_BASIC_USER,
4
- SAVING_USER,
5
- PATCH_NAME,
6
- PATCH_MAIL,
7
- PATCH_MOBILE,
8
- PATCH_LANGUAGE,
9
- PATCH_NEXTOFKIN,
10
- DISMISS_MESSAGES,
11
- SET_SAVED,
12
- GET_WORKMAIL_DOMAIN,
13
- } from './AUProfileActions';
14
-
15
- export const initialState = {
16
- user: {
17
- auId: 0,
18
- firstNames: '',
19
- lastName: '',
20
- hasChosenName: false,
21
- chosenFirstNames: '',
22
- chosenLastName: '',
23
- name: '',
24
- privateMailAddress: '',
25
- privatePhoneNumber: '',
26
- privateMobileNumber: '',
27
- nextOfKinName: '',
28
- nextOfKinPhoneNumber: '',
29
- preferredLanguage: 'da',
30
- studentNumber: null,
31
- educations: [],
32
- isStudentImpersonator: false,
33
- timelineAllowed: false,
34
- isActiveStudent: false,
35
- suCandidate: false,
36
- studentMailAddress: null,
37
- studentChosenMailAddress: null,
38
- workMailAddress: '',
39
- workMailDomain: '',
40
- saving: false,
41
- saved: false,
42
- loaded: false,
43
- },
44
- messages: [],
45
- };
46
-
47
- export const reducer = (state, action) => {
48
- const nextState = { ...state };
49
-
50
- switch (action.type) {
51
- case GET_BASIC_USER: { // Tror ikke det her i brug...
52
- const { result } = action;
53
- if (result.user) {
54
- const prevUser = { ...nextState.user };
55
- const newUser = Object.assign(prevUser, result.user);
56
- nextState.user = newUser;
57
- } else if (result.error) {
58
- nextState.messages = [{
59
- type: 'warning',
60
- message: result.error.Message,
61
- }];
62
- }
63
- return nextState;
64
- }
65
- case GET_WORKMAIL_DOMAIN: {
66
- const { result } = action;
67
- if (result.user) {
68
- const prevUser = { ...nextState.user };
69
- const newUser = Object.assign(prevUser, result.user);
70
- nextState.user = newUser;
71
- } else if (result.error) {
72
- nextState.messages = [{
73
- type: 'warning',
74
- message: nextState.user.preferredLanguage === 'da' ? result.error.errorMessageDa : result.error.errorMessageEn,
75
- // Skal bruges i de andre profilePatch også?
76
- }];
77
- }
78
- return nextState;
79
- }
80
- case DISMISS_MESSAGES: {
81
- nextState.messages = [];
82
- return nextState;
83
- }
84
- case SET_SAVED: {
85
- const prevUser = { ...nextState.user };
86
- nextState.user = Object.assign(prevUser, {
87
- saved: false,
88
- });
89
- return nextState;
90
- }
91
- case SAVING_USER: {
92
- const prevUser = { ...nextState.user };
93
- nextState.user = Object.assign(prevUser, { saving: true, saved: false });
94
- return nextState;
95
- }
96
- case PATCH_NAME: {
97
- const { result } = action;
98
- const prevUser = { ...nextState.user };
99
- if (result.user) {
100
- const { user: { hasChosenName, chosenFirstNames, chosenLastName } } = result;
101
- nextState.user = Object.assign(prevUser, {
102
- hasChosenName,
103
- chosenFirstNames,
104
- chosenLastName,
105
- saving: false,
106
- saved: true,
107
- });
108
- nextState.messages = [{
109
- type: 'confirm',
110
- message: profileLabels[nextState.user.preferredLanguage].saved,
111
- }];
112
- } else if (result.error) {
113
- nextState.messages = [{
114
- type: 'warning',
115
- message: result.error.Message,
116
- }];
117
- nextState.user = Object.assign(prevUser, { saving: false });
118
- }
119
- return nextState;
120
- }
121
- case PATCH_MAIL: {
122
- const { result } = action;
123
- const prevUser = { ...nextState.user };
124
- if (result.user) {
125
- const { user: { privateMailAddress, workMailAddress, studentChosenMailAddress } } = result;
126
- nextState.user = Object.assign(prevUser, {
127
- workMailAddress,
128
- studentChosenMailAddress,
129
- privateMailAddress,
130
- saving: false,
131
- saved: true,
132
- });
133
- nextState.messages = [{
134
- type: 'confirm',
135
- message: `${profileLabels[nextState.user.preferredLanguage].saved} ${profileLabels[nextState.user.preferredLanguage].mailNotice}`,
136
- }];
137
- } else if (result.error) {
138
- nextState.messages = [{
139
- type: 'warning',
140
- message: nextState.user.preferredLanguage === 'da' ? result.error.errorMessageDa : result.error.errorMessageEn,
141
- // Skal bruges i de andre profilePatch også?
142
- }];
143
- nextState.user = Object.assign(prevUser, { saving: false });
144
- }
145
- return nextState;
146
- }
147
- case PATCH_MOBILE: {
148
- const { result } = action;
149
- const prevUser = { ...nextState.user };
150
- if (result.user) {
151
- const { user: { privatePhoneNumber, privateMobileNumber } } = result;
152
- nextState.user = Object.assign(prevUser, {
153
- privatePhoneNumber,
154
- privateMobileNumber,
155
- saving: false,
156
- saved: true,
157
- });
158
- nextState.messages = [{
159
- type: 'confirm',
160
- message: profileLabels[nextState.user.preferredLanguage].saved,
161
- }];
162
- } else if (result.error) {
163
- if (result.error.Message) {
164
- nextState.messages = [{
165
- type: 'warning',
166
- message: result.error.Message,
167
- }];
168
- } else {
169
- nextState.messages = result.error.map((e) => ({
170
- type: 'warning',
171
- message: e.errorMessage,
172
- }));
173
- }
174
-
175
- nextState.user = Object.assign(prevUser, { saving: false });
176
- }
177
- return nextState;
178
- }
179
- case PATCH_LANGUAGE: {
180
- const { result } = action;
181
- const prevUser = { ...nextState.user };
182
- if (result.user) {
183
- const { user: { preferredLanguage } } = result;
184
- nextState.user = Object.assign(prevUser, {
185
- preferredLanguage,
186
- saving: false,
187
- saved: true,
188
- });
189
- nextState.messages = [{
190
- type: 'confirm',
191
- message: profileLabels[nextState.user.preferredLanguage].saved,
192
- }];
193
- } else if (result.error) {
194
- nextState.messages = [{
195
- type: 'warning',
196
- message: result.error.Message,
197
- }];
198
- nextState.user = Object.assign(prevUser, { saving: false });
199
- }
200
- return nextState;
201
- }
202
- case PATCH_NEXTOFKIN: {
203
- const { result } = action;
204
- const prevUser = { ...nextState.user };
205
- if (result.user) {
206
- const { user: { nextOfKinName, nextOfKinPhoneNumber } } = result;
207
- nextState.user = Object.assign(prevUser, {
208
- nextOfKinName,
209
- nextOfKinPhoneNumber,
210
- saving: false,
211
- saved: true,
212
- });
213
- nextState.messages = [{
214
- type: 'confirm',
215
- message: profileLabels[nextState.user.preferredLanguage].saved,
216
- }];
217
- } else if (result.error) {
218
- nextState.messages = [{
219
- type: 'warning',
220
- message: result.error.Message,
221
- }];
222
- nextState.user = Object.assign(prevUser, { saving: false });
223
- }
224
- return nextState;
225
- }
226
- default: {
227
- return null;
228
- }
229
- }
230
- };
1
+ import { profileLabels } from '../../lib/i18n';
2
+ import {
3
+ GET_BASIC_USER,
4
+ SAVING_USER,
5
+ PATCH_NAME,
6
+ PATCH_MAIL,
7
+ PATCH_MOBILE,
8
+ PATCH_LANGUAGE,
9
+ PATCH_NEXTOFKIN,
10
+ DISMISS_MESSAGES,
11
+ SET_SAVED,
12
+ GET_WORKMAIL_DOMAIN,
13
+ } from './AUProfileActions';
14
+
15
+ export const initialState = {
16
+ user: {
17
+ auId: 0,
18
+ firstNames: '',
19
+ lastName: '',
20
+ hasChosenName: false,
21
+ chosenFirstNames: '',
22
+ chosenLastName: '',
23
+ name: '',
24
+ privateMailAddress: '',
25
+ privatePhoneNumber: '',
26
+ privateMobileNumber: '',
27
+ nextOfKinName: '',
28
+ nextOfKinPhoneNumber: '',
29
+ preferredLanguage: 'da',
30
+ studentNumber: null,
31
+ educations: [],
32
+ isStudentImpersonator: false,
33
+ timelineAllowed: false,
34
+ isActiveStudent: false,
35
+ suCandidate: false,
36
+ studentMailAddress: null,
37
+ studentChosenMailAddress: null,
38
+ workMailAddress: '',
39
+ workMailDomain: '',
40
+ saving: false,
41
+ saved: false,
42
+ loaded: false,
43
+ },
44
+ messages: [],
45
+ };
46
+
47
+ export const reducer = (state, action) => {
48
+ const nextState = { ...state };
49
+
50
+ switch (action.type) {
51
+ case GET_BASIC_USER: { // Tror ikke det her i brug...
52
+ const { result } = action;
53
+ if (result.user) {
54
+ const prevUser = { ...nextState.user };
55
+ const newUser = Object.assign(prevUser, result.user);
56
+ nextState.user = newUser;
57
+ } else if (result.error) {
58
+ nextState.messages = [{
59
+ type: 'warning',
60
+ message: result.error.Message,
61
+ }];
62
+ }
63
+ return nextState;
64
+ }
65
+ case GET_WORKMAIL_DOMAIN: {
66
+ const { result } = action;
67
+ if (result.user) {
68
+ const prevUser = { ...nextState.user };
69
+ const newUser = Object.assign(prevUser, result.user);
70
+ nextState.user = newUser;
71
+ } else if (result.error) {
72
+ nextState.messages = [{
73
+ type: 'warning',
74
+ message: nextState.user.preferredLanguage === 'da' ? result.error.errorMessageDa : result.error.errorMessageEn,
75
+ // Skal bruges i de andre profilePatch også?
76
+ }];
77
+ }
78
+ return nextState;
79
+ }
80
+ case DISMISS_MESSAGES: {
81
+ nextState.messages = [];
82
+ return nextState;
83
+ }
84
+ case SET_SAVED: {
85
+ const prevUser = { ...nextState.user };
86
+ nextState.user = Object.assign(prevUser, {
87
+ saved: false,
88
+ });
89
+ return nextState;
90
+ }
91
+ case SAVING_USER: {
92
+ const prevUser = { ...nextState.user };
93
+ nextState.user = Object.assign(prevUser, { saving: true, saved: false });
94
+ return nextState;
95
+ }
96
+ case PATCH_NAME: {
97
+ const { result } = action;
98
+ const prevUser = { ...nextState.user };
99
+ if (result.user) {
100
+ const { user: { hasChosenName, chosenFirstNames, chosenLastName } } = result;
101
+ nextState.user = Object.assign(prevUser, {
102
+ hasChosenName,
103
+ chosenFirstNames,
104
+ chosenLastName,
105
+ saving: false,
106
+ saved: true,
107
+ });
108
+ nextState.messages = [{
109
+ type: 'confirm',
110
+ message: profileLabels[nextState.user.preferredLanguage].saved,
111
+ }];
112
+ } else if (result.error) {
113
+ nextState.messages = [{
114
+ type: 'warning',
115
+ message: result.error.Message,
116
+ }];
117
+ nextState.user = Object.assign(prevUser, { saving: false });
118
+ }
119
+ return nextState;
120
+ }
121
+ case PATCH_MAIL: {
122
+ const { result } = action;
123
+ const prevUser = { ...nextState.user };
124
+ if (result.user) {
125
+ const { user: { privateMailAddress, workMailAddress, studentChosenMailAddress } } = result;
126
+ nextState.user = Object.assign(prevUser, {
127
+ workMailAddress,
128
+ studentChosenMailAddress,
129
+ privateMailAddress,
130
+ saving: false,
131
+ saved: true,
132
+ });
133
+ nextState.messages = [{
134
+ type: 'confirm',
135
+ message: `${profileLabels[nextState.user.preferredLanguage].saved} ${profileLabels[nextState.user.preferredLanguage].mailNotice}`,
136
+ }];
137
+ } else if (result.error) {
138
+ nextState.messages = [{
139
+ type: 'warning',
140
+ message: nextState.user.preferredLanguage === 'da' ? result.error.errorMessageDa : result.error.errorMessageEn,
141
+ // Skal bruges i de andre profilePatch også?
142
+ }];
143
+ nextState.user = Object.assign(prevUser, { saving: false });
144
+ }
145
+ return nextState;
146
+ }
147
+ case PATCH_MOBILE: {
148
+ const { result } = action;
149
+ const prevUser = { ...nextState.user };
150
+ if (result.user) {
151
+ const { user: { privatePhoneNumber, privateMobileNumber } } = result;
152
+ nextState.user = Object.assign(prevUser, {
153
+ privatePhoneNumber,
154
+ privateMobileNumber,
155
+ saving: false,
156
+ saved: true,
157
+ });
158
+ nextState.messages = [{
159
+ type: 'confirm',
160
+ message: profileLabels[nextState.user.preferredLanguage].saved,
161
+ }];
162
+ } else if (result.error) {
163
+ if (result.error.Message) {
164
+ nextState.messages = [{
165
+ type: 'warning',
166
+ message: result.error.Message,
167
+ }];
168
+ } else {
169
+ nextState.messages = result.error.map((e) => ({
170
+ type: 'warning',
171
+ message: e.errorMessage,
172
+ }));
173
+ }
174
+
175
+ nextState.user = Object.assign(prevUser, { saving: false });
176
+ }
177
+ return nextState;
178
+ }
179
+ case PATCH_LANGUAGE: {
180
+ const { result } = action;
181
+ const prevUser = { ...nextState.user };
182
+ if (result.user) {
183
+ const { user: { preferredLanguage } } = result;
184
+ nextState.user = Object.assign(prevUser, {
185
+ preferredLanguage,
186
+ saving: false,
187
+ saved: true,
188
+ });
189
+ nextState.messages = [{
190
+ type: 'confirm',
191
+ message: profileLabels[nextState.user.preferredLanguage].saved,
192
+ }];
193
+ } else if (result.error) {
194
+ nextState.messages = [{
195
+ type: 'warning',
196
+ message: result.error.Message,
197
+ }];
198
+ nextState.user = Object.assign(prevUser, { saving: false });
199
+ }
200
+ return nextState;
201
+ }
202
+ case PATCH_NEXTOFKIN: {
203
+ const { result } = action;
204
+ const prevUser = { ...nextState.user };
205
+ if (result.user) {
206
+ const { user: { nextOfKinName, nextOfKinPhoneNumber } } = result;
207
+ nextState.user = Object.assign(prevUser, {
208
+ nextOfKinName,
209
+ nextOfKinPhoneNumber,
210
+ saving: false,
211
+ saved: true,
212
+ });
213
+ nextState.messages = [{
214
+ type: 'confirm',
215
+ message: profileLabels[nextState.user.preferredLanguage].saved,
216
+ }];
217
+ } else if (result.error) {
218
+ nextState.messages = [{
219
+ type: 'warning',
220
+ message: result.error.Message,
221
+ }];
222
+ nextState.user = Object.assign(prevUser, { saving: false });
223
+ }
224
+ return nextState;
225
+ }
226
+ default: {
227
+ return null;
228
+ }
229
+ }
230
+ };
@@ -1,95 +1,95 @@
1
- /* eslint-env browser */
2
- import React, { useEffect, useState } from 'react';
3
- import PropTypes from 'prop-types';
4
- import { setCopyToClipboard } from '@aarhus-university/au-designsystem-delphinus/source/js/components/nav';
5
-
6
- const AUProfileWidgetComponent = React.memo(({
7
- lang,
8
- name,
9
- auid,
10
- studentNumber,
11
- settings,
12
- changeLanguageUrl,
13
- logoutUri,
14
- profileLabels,
15
- }) => {
16
- const [ctcSet, setCtcSet] = useState(false);
17
- const renderSettings = settings.map((s) => <a key={s.url} className="sub-nav__item" href={s.url}>{s.text}</a>);
18
-
19
- useEffect(() => {
20
- if (auid > 0 && !ctcSet) {
21
- setCopyToClipboard(lang);
22
- setCtcSet(true);
23
- }
24
- });
25
-
26
- return (
27
- <div className="sub-nav__content theme--normal" aria-labelledby="profile-menu-toggle">
28
- <div className="sub-nav__user">
29
- <h2 className="sub-nav__user-name">{name}</h2>
30
- <button
31
- type="button"
32
- className="copy-to-clipboard"
33
- title={profileLabels[lang].copyAuid}
34
- aria-label={`${profileLabels[lang].auId}: AU${auid}`}
35
- >
36
- {`${profileLabels[lang].auId}: `}
37
- <span className="copy-to-clipboard__this">{`AU${auid}`}</span>
38
- </button>
39
- {
40
- studentNumber && (
41
- <button
42
- type="button"
43
- className="copy-to-clipboard"
44
- title={profileLabels[lang].copyStudentNumber}
45
- aria-label={`${profileLabels[lang].studentNumber}: ${studentNumber}`}
46
- >
47
- {`${profileLabels[lang].studentNumber}: `}
48
- <span className="copy-to-clipboard__this">{studentNumber}</span>
49
- </button>
50
- )
51
- }
52
- </div>
53
- <hr />
54
- {renderSettings}
55
- <hr />
56
- {
57
- changeLanguageUrl && (
58
- <>
59
- <a className="sub-nav__item sub-nav__item--icon" href={changeLanguageUrl} data-icon="">{profileLabels[lang].changeLanguage}</a>
60
- <hr />
61
- </>
62
- )
63
- }
64
- <a
65
- className="sub-nav__item sub-nav__item--icon"
66
- data-icon=""
67
- href={logoutUri}
68
- >
69
- {profileLabels[lang].logout}
70
- </a>
71
- </div>
72
- );
73
- });
74
-
75
- AUProfileWidgetComponent.defaultProps = {
76
- studentNumber: null,
77
- changeLanguageUrl: null,
78
- };
79
-
80
- AUProfileWidgetComponent.propTypes = {
81
- lang: PropTypes.string.isRequired,
82
- name: PropTypes.string.isRequired,
83
- auid: PropTypes.number.isRequired,
84
- studentNumber: PropTypes.string,
85
- settings: PropTypes.arrayOf(PropTypes.shape({
86
- url: PropTypes.string.isRequired,
87
- text: PropTypes.string.isRequired,
88
- })).isRequired,
89
- profileLabels: PropTypes.shape({}).isRequired,
90
- changeLanguageUrl: PropTypes.string,
91
- logoutUri: PropTypes.string.isRequired,
92
- };
93
-
94
- AUProfileWidgetComponent.displayName = 'AUProfileWidgetComponent';
95
- export default AUProfileWidgetComponent;
1
+ /* eslint-env browser */
2
+ import React, { useEffect, useState } from 'react';
3
+ import PropTypes from 'prop-types';
4
+ import { setCopyToClipboard } from '@aarhus-university/au-designsystem-delphinus/source/js/components/nav';
5
+
6
+ const AUProfileWidgetComponent = React.memo(({
7
+ lang,
8
+ name,
9
+ auid,
10
+ studentNumber,
11
+ settings,
12
+ changeLanguageUrl,
13
+ logoutUri,
14
+ profileLabels,
15
+ }) => {
16
+ const [ctcSet, setCtcSet] = useState(false);
17
+ const renderSettings = settings.map((s) => <a key={s.url} className="sub-nav__item" href={s.url}>{s.text}</a>);
18
+
19
+ useEffect(() => {
20
+ if (auid > 0 && !ctcSet) {
21
+ setCopyToClipboard(lang);
22
+ setCtcSet(true);
23
+ }
24
+ });
25
+
26
+ return (
27
+ <div className="sub-nav__content theme--normal" aria-labelledby="profile-menu-toggle">
28
+ <div className="sub-nav__user">
29
+ <h2 className="sub-nav__user-name">{name}</h2>
30
+ <button
31
+ type="button"
32
+ className="copy-to-clipboard"
33
+ title={profileLabels[lang].copyAuid}
34
+ aria-label={`${profileLabels[lang].auId}: AU${auid}`}
35
+ >
36
+ {`${profileLabels[lang].auId}: `}
37
+ <span className="copy-to-clipboard__this">{`AU${auid}`}</span>
38
+ </button>
39
+ {
40
+ studentNumber && (
41
+ <button
42
+ type="button"
43
+ className="copy-to-clipboard"
44
+ title={profileLabels[lang].copyStudentNumber}
45
+ aria-label={`${profileLabels[lang].studentNumber}: ${studentNumber}`}
46
+ >
47
+ {`${profileLabels[lang].studentNumber}: `}
48
+ <span className="copy-to-clipboard__this">{studentNumber}</span>
49
+ </button>
50
+ )
51
+ }
52
+ </div>
53
+ <hr />
54
+ {renderSettings}
55
+ <hr />
56
+ {
57
+ changeLanguageUrl && (
58
+ <>
59
+ <a className="sub-nav__item sub-nav__item--icon" href={changeLanguageUrl} data-icon="">{profileLabels[lang].changeLanguage}</a>
60
+ <hr />
61
+ </>
62
+ )
63
+ }
64
+ <a
65
+ className="sub-nav__item sub-nav__item--icon"
66
+ data-icon=""
67
+ href={logoutUri}
68
+ >
69
+ {profileLabels[lang].logout}
70
+ </a>
71
+ </div>
72
+ );
73
+ });
74
+
75
+ AUProfileWidgetComponent.defaultProps = {
76
+ studentNumber: null,
77
+ changeLanguageUrl: null,
78
+ };
79
+
80
+ AUProfileWidgetComponent.propTypes = {
81
+ lang: PropTypes.string.isRequired,
82
+ name: PropTypes.string.isRequired,
83
+ auid: PropTypes.number.isRequired,
84
+ studentNumber: PropTypes.string,
85
+ settings: PropTypes.arrayOf(PropTypes.shape({
86
+ url: PropTypes.string.isRequired,
87
+ text: PropTypes.string.isRequired,
88
+ })).isRequired,
89
+ profileLabels: PropTypes.shape({}).isRequired,
90
+ changeLanguageUrl: PropTypes.string,
91
+ logoutUri: PropTypes.string.isRequired,
92
+ };
93
+
94
+ AUProfileWidgetComponent.displayName = 'AUProfileWidgetComponent';
95
+ export default AUProfileWidgetComponent;