@entur/alert 0.17.13-beta.3 → 0.17.13-beta.4
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/dist/BannerAlertBox.d.ts +27 -0
- package/dist/BaseAlertBox.d.ts +34 -0
- package/dist/CopyableText.d.ts +20 -0
- package/dist/ExpandableAlertBox.d.ts +33 -0
- package/dist/SmallAlertBox.d.ts +29 -0
- package/dist/ToastAlertBox.d.ts +23 -0
- package/dist/ToastProvider.d.ts +30 -0
- package/dist/alert.cjs.development.js +410 -0
- package/dist/alert.cjs.development.js.map +1 -0
- package/dist/alert.cjs.production.min.js +2 -0
- package/dist/alert.cjs.production.min.js.map +1 -0
- package/dist/alert.esm.js +349 -322
- package/dist/alert.esm.js.map +1 -1
- package/dist/index.d.ts +7 -174
- package/dist/index.js +8 -0
- package/dist/styles.css +346 -332
- package/package.json +18 -28
- package/dist/alert.cjs.js +0 -372
- package/dist/alert.cjs.js.map +0 -1
package/dist/alert.esm.js
CHANGED
|
@@ -1,372 +1,399 @@
|
|
|
1
|
-
import { warnAboutMissingStyles } from
|
|
2
|
-
import
|
|
3
|
-
import
|
|
4
|
-
import
|
|
5
|
-
import {
|
|
6
|
-
import {
|
|
7
|
-
import
|
|
8
|
-
import
|
|
9
|
-
import {
|
|
10
|
-
|
|
11
|
-
|
|
1
|
+
import { warnAboutMissingStyles } from '@entur/utils';
|
|
2
|
+
import React from 'react';
|
|
3
|
+
import classNames from 'classnames';
|
|
4
|
+
import { CloseIcon, ValidationSuccessIcon, ValidationInfoIcon, ValidationExclamationIcon, ValidationErrorIcon, CopyIcon } from '@entur/icons';
|
|
5
|
+
import { IconButton } from '@entur/button';
|
|
6
|
+
import { Tooltip } from '@entur/tooltip';
|
|
7
|
+
import copy from 'copy-text-to-clipboard';
|
|
8
|
+
import { PreformattedText } from '@entur/typography';
|
|
9
|
+
import { BaseExpand, ExpandArrow } from '@entur/expand/';
|
|
10
|
+
|
|
11
|
+
function _extends() {
|
|
12
|
+
return _extends = Object.assign ? Object.assign.bind() : function (n) {
|
|
13
|
+
for (var e = 1; e < arguments.length; e++) {
|
|
14
|
+
var t = arguments[e];
|
|
15
|
+
for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
|
|
16
|
+
}
|
|
17
|
+
return n;
|
|
18
|
+
}, _extends.apply(null, arguments);
|
|
19
|
+
}
|
|
20
|
+
function _objectWithoutPropertiesLoose(r, e) {
|
|
21
|
+
if (null == r) return {};
|
|
22
|
+
var t = {};
|
|
23
|
+
for (var n in r) if ({}.hasOwnProperty.call(r, n)) {
|
|
24
|
+
if (-1 !== e.indexOf(n)) continue;
|
|
25
|
+
t[n] = r[n];
|
|
26
|
+
}
|
|
27
|
+
return t;
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
var _excluded$3 = ["children", "className", "closable", "closeButtonLabel", "variant", "onClose", "size", "title", "toastIsBeingRemoved"];
|
|
31
|
+
var iconsMap = {
|
|
12
32
|
success: {
|
|
13
33
|
icon: ValidationSuccessIcon,
|
|
14
|
-
description:
|
|
34
|
+
description: 'Suksessmelding'
|
|
35
|
+
},
|
|
36
|
+
information: {
|
|
37
|
+
icon: ValidationInfoIcon,
|
|
38
|
+
description: 'Infomelding'
|
|
15
39
|
},
|
|
16
|
-
information: { icon: ValidationInfoIcon, description: "Infomelding" },
|
|
17
40
|
warning: {
|
|
18
41
|
icon: ValidationExclamationIcon,
|
|
19
|
-
description:
|
|
42
|
+
description: 'Varselmelding'
|
|
43
|
+
},
|
|
44
|
+
negative: {
|
|
45
|
+
icon: ValidationErrorIcon,
|
|
46
|
+
description: 'Feilmelding'
|
|
20
47
|
},
|
|
21
|
-
negative: { icon: ValidationErrorIcon, description: "Feilmelding" },
|
|
22
48
|
//deprecated
|
|
23
|
-
info: {
|
|
24
|
-
|
|
49
|
+
info: {
|
|
50
|
+
icon: ValidationInfoIcon,
|
|
51
|
+
description: 'Infomelding'
|
|
52
|
+
},
|
|
53
|
+
error: {
|
|
54
|
+
icon: ValidationErrorIcon,
|
|
55
|
+
description: 'Feilmelding'
|
|
56
|
+
}
|
|
25
57
|
};
|
|
26
|
-
|
|
27
|
-
children,
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
}
|
|
38
|
-
|
|
58
|
+
var BaseAlertBox = function BaseAlertBox(_ref) {
|
|
59
|
+
var children = _ref.children,
|
|
60
|
+
className = _ref.className,
|
|
61
|
+
_ref$closable = _ref.closable,
|
|
62
|
+
closable = _ref$closable === void 0 ? false : _ref$closable,
|
|
63
|
+
_ref$closeButtonLabel = _ref.closeButtonLabel,
|
|
64
|
+
closeButtonLabel = _ref$closeButtonLabel === void 0 ? 'Lukk' : _ref$closeButtonLabel,
|
|
65
|
+
variant = _ref.variant,
|
|
66
|
+
_ref$onClose = _ref.onClose,
|
|
67
|
+
onClose = _ref$onClose === void 0 ? function () {
|
|
68
|
+
return {};
|
|
69
|
+
} : _ref$onClose,
|
|
70
|
+
size = _ref.size,
|
|
71
|
+
title = _ref.title,
|
|
72
|
+
toastIsBeingRemoved = _ref.toastIsBeingRemoved,
|
|
73
|
+
rest = _objectWithoutPropertiesLoose(_ref, _excluded$3);
|
|
74
|
+
var _React$useState = React.useState(false),
|
|
75
|
+
isClosed = _React$useState[0],
|
|
76
|
+
setClosed = _React$useState[1];
|
|
39
77
|
if (isClosed) {
|
|
40
78
|
return null;
|
|
41
79
|
}
|
|
42
|
-
|
|
80
|
+
var handleClose = function handleClose() {
|
|
43
81
|
setClosed(true);
|
|
44
82
|
onClose();
|
|
45
83
|
};
|
|
46
|
-
|
|
47
|
-
return
|
|
48
|
-
"
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
"aria-hidden": true,
|
|
87
|
-
placement: "bottom",
|
|
88
|
-
content: "Lukk",
|
|
89
|
-
children: /* @__PURE__ */ jsx(
|
|
90
|
-
IconButton,
|
|
91
|
-
{
|
|
92
|
-
className: "eds-alert-box__close-button",
|
|
93
|
-
"aria-label": closeButtonLabel,
|
|
94
|
-
onClick: handleClose,
|
|
95
|
-
type: "button",
|
|
96
|
-
children: /* @__PURE__ */ jsx(CloseIcon, {})
|
|
97
|
-
}
|
|
98
|
-
)
|
|
99
|
-
}
|
|
100
|
-
)
|
|
101
|
-
]
|
|
102
|
-
}
|
|
103
|
-
);
|
|
84
|
+
var Icon = iconsMap[variant].icon;
|
|
85
|
+
return React.createElement("div", _extends({
|
|
86
|
+
className: classNames('eds-alert-box', "eds-alert-box--" + size, "eds-alert-box--" + variant, {
|
|
87
|
+
'eds-alert-box--toast--exit-animation': toastIsBeingRemoved,
|
|
88
|
+
'eds-alert-box--no-title': !title
|
|
89
|
+
}, className)
|
|
90
|
+
}, rest), React.createElement(Icon, {
|
|
91
|
+
role: "img",
|
|
92
|
+
className: "eds-alert-box__icon",
|
|
93
|
+
"aria-label": iconsMap[variant].description
|
|
94
|
+
}), React.createElement("div", {
|
|
95
|
+
className: classNames('eds-alert-box__content', {
|
|
96
|
+
'eds-alert-box__content--no-children': !children
|
|
97
|
+
})
|
|
98
|
+
}, title && React.createElement("div", {
|
|
99
|
+
className: "eds-alert-box__title"
|
|
100
|
+
}, title), children && children), closable && React.createElement(Tooltip, {
|
|
101
|
+
className: "eds-alert-box__tooltip",
|
|
102
|
+
"aria-hidden": true,
|
|
103
|
+
placement: "bottom",
|
|
104
|
+
content: "Lukk"
|
|
105
|
+
}, React.createElement(IconButton, {
|
|
106
|
+
className: "eds-alert-box__close-button",
|
|
107
|
+
"aria-label": closeButtonLabel,
|
|
108
|
+
onClick: handleClose,
|
|
109
|
+
type: "button"
|
|
110
|
+
}, React.createElement(CloseIcon, null))));
|
|
111
|
+
};
|
|
112
|
+
|
|
113
|
+
var BannerAlertBox = function BannerAlertBox(props) {
|
|
114
|
+
return React.createElement(BaseAlertBox, _extends({}, props, {
|
|
115
|
+
size: "banner"
|
|
116
|
+
}));
|
|
117
|
+
};
|
|
118
|
+
|
|
119
|
+
var ToastAlertBox = function ToastAlertBox(props) {
|
|
120
|
+
return React.createElement(BaseAlertBox, _extends({}, props, {
|
|
121
|
+
size: "toast",
|
|
122
|
+
role: "status"
|
|
123
|
+
}));
|
|
104
124
|
};
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
className,
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
BaseAlertBox,
|
|
116
|
-
{
|
|
125
|
+
|
|
126
|
+
var _excluded$2 = ["className", "width", "onClose", "closable", "closeButtonLabel"];
|
|
127
|
+
var SmallAlertBox = function SmallAlertBox(_ref) {
|
|
128
|
+
var className = _ref.className,
|
|
129
|
+
width = _ref.width,
|
|
130
|
+
onClose = _ref.onClose,
|
|
131
|
+
_ref$closable = _ref.closable,
|
|
132
|
+
closable = _ref$closable === void 0 ? false : _ref$closable,
|
|
133
|
+
closeButtonLabel = _ref.closeButtonLabel,
|
|
134
|
+
rest = _objectWithoutPropertiesLoose(_ref, _excluded$2);
|
|
135
|
+
return React.createElement(BaseAlertBox, _extends({
|
|
117
136
|
className: classNames(className, {
|
|
118
|
-
|
|
119
|
-
})
|
|
120
|
-
|
|
121
|
-
onClose,
|
|
122
|
-
closable,
|
|
123
|
-
closeButtonLabel,
|
|
137
|
+
'eds-alert-box--fit-content': width === 'fit-content'
|
|
138
|
+
})
|
|
139
|
+
}, rest, {
|
|
140
|
+
onClose: onClose,
|
|
141
|
+
closable: closable,
|
|
142
|
+
closeButtonLabel: closeButtonLabel,
|
|
124
143
|
size: "small"
|
|
125
|
-
}
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
144
|
+
}));
|
|
145
|
+
};
|
|
146
|
+
|
|
147
|
+
var EXIT_ANIMATION_TIME = 400;
|
|
148
|
+
var ToastContext = /*#__PURE__*/React.createContext(null);
|
|
149
|
+
var toastReducer = function toastReducer(prevToasts, action) {
|
|
130
150
|
switch (action.type) {
|
|
131
|
-
case
|
|
132
|
-
return [action.payload
|
|
133
|
-
case
|
|
134
|
-
return prevToasts.map((toast)
|
|
135
|
-
if (toast.id === action.payload)
|
|
136
|
-
|
|
151
|
+
case 'ADD_TOAST':
|
|
152
|
+
return [action.payload].concat(prevToasts);
|
|
153
|
+
case 'PLAY_EXIT_ANIMATION':
|
|
154
|
+
return prevToasts.map(function (toast) {
|
|
155
|
+
if (toast.id === action.payload) return _extends({}, toast, {
|
|
156
|
+
isBeingRemoved: true
|
|
157
|
+
});
|
|
137
158
|
return toast;
|
|
138
159
|
});
|
|
139
|
-
case
|
|
140
|
-
return prevToasts.filter((toast)
|
|
160
|
+
case 'REMOVE_TOAST':
|
|
161
|
+
return prevToasts.filter(function (toast) {
|
|
162
|
+
return toast.id !== action.payload;
|
|
163
|
+
});
|
|
141
164
|
}
|
|
142
165
|
};
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
166
|
+
var createUniqueId = function createUniqueId() {
|
|
167
|
+
return Math.random().toString().substring(2);
|
|
168
|
+
};
|
|
169
|
+
var createToast = function createToast(toast, id) {
|
|
170
|
+
if (typeof toast === 'string') {
|
|
171
|
+
return {
|
|
172
|
+
id: id,
|
|
173
|
+
content: toast,
|
|
174
|
+
variant: 'success',
|
|
175
|
+
isBeingRemoved: false
|
|
176
|
+
};
|
|
147
177
|
} else {
|
|
148
|
-
return {
|
|
178
|
+
return _extends({
|
|
179
|
+
id: id,
|
|
180
|
+
variant: 'success',
|
|
181
|
+
isBeingRemoved: false
|
|
182
|
+
}, toast);
|
|
149
183
|
}
|
|
150
184
|
};
|
|
151
|
-
|
|
152
|
-
delay =
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
185
|
+
var ToastProvider = function ToastProvider(_ref) {
|
|
186
|
+
var _ref$delay = _ref.delay,
|
|
187
|
+
delay = _ref$delay === void 0 ? 6000 : _ref$delay,
|
|
188
|
+
children = _ref.children,
|
|
189
|
+
_ref$position = _ref.position,
|
|
190
|
+
position = _ref$position === void 0 ? 'bottom-right' : _ref$position,
|
|
191
|
+
className = _ref.className,
|
|
192
|
+
style = _ref.style;
|
|
193
|
+
var _React$useReducer = React.useReducer(toastReducer, []),
|
|
194
|
+
toasts = _React$useReducer[0],
|
|
195
|
+
dispatch = _React$useReducer[1];
|
|
196
|
+
var _React$useState = React.useState(),
|
|
197
|
+
hoveringId = _React$useState[0],
|
|
198
|
+
setHovering = _React$useState[1];
|
|
199
|
+
var timeoutIdRefs = React.useRef({});
|
|
200
|
+
var removeToast = React.useCallback(function (id) {
|
|
162
201
|
window.clearTimeout(timeoutIdRefs.current[id]);
|
|
163
|
-
dispatch({
|
|
202
|
+
dispatch({
|
|
203
|
+
type: 'REMOVE_TOAST',
|
|
204
|
+
payload: id
|
|
205
|
+
});
|
|
164
206
|
delete timeoutIdRefs.current[id];
|
|
165
207
|
}, []);
|
|
166
|
-
|
|
167
|
-
window.clearTimeout(timeoutIdRefs.current[id +
|
|
168
|
-
dispatch({
|
|
169
|
-
|
|
208
|
+
var playExitAnimation = React.useCallback(function (id) {
|
|
209
|
+
window.clearTimeout(timeoutIdRefs.current[id + 'animation']);
|
|
210
|
+
dispatch({
|
|
211
|
+
type: 'PLAY_EXIT_ANIMATION',
|
|
212
|
+
payload: id
|
|
213
|
+
});
|
|
214
|
+
delete timeoutIdRefs.current[id + 'animation'];
|
|
170
215
|
}, []);
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
);
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
(toast) => {
|
|
186
|
-
const id = createUniqueId();
|
|
187
|
-
const payload = createToast(toast, id);
|
|
188
|
-
dispatch({ type: "ADD_TOAST", payload });
|
|
189
|
-
removeToastWithAnimationAfterDelay(id, delay);
|
|
190
|
-
},
|
|
191
|
-
[delay, removeToastWithAnimationAfterDelay]
|
|
192
|
-
);
|
|
193
|
-
const handleMouseEnter = (toast) => () => {
|
|
194
|
-
if (toast.isBeingRemoved) return;
|
|
195
|
-
setHovering(toast.id);
|
|
196
|
-
Object.values(timeoutIdRefs.current).forEach((timeoutId) => {
|
|
197
|
-
window.clearTimeout(timeoutId);
|
|
216
|
+
var removeToastWithAnimationAfterDelay = React.useCallback(function (id, delay) {
|
|
217
|
+
timeoutIdRefs.current[id + 'animation'] = window.setTimeout(function () {
|
|
218
|
+
return playExitAnimation(id);
|
|
219
|
+
}, delay - EXIT_ANIMATION_TIME);
|
|
220
|
+
timeoutIdRefs.current[id] = window.setTimeout(function () {
|
|
221
|
+
return removeToast(id);
|
|
222
|
+
}, delay);
|
|
223
|
+
}, [timeoutIdRefs, playExitAnimation, removeToast]);
|
|
224
|
+
var addToast = React.useCallback(function (toast) {
|
|
225
|
+
var id = createUniqueId();
|
|
226
|
+
var payload = createToast(toast, id);
|
|
227
|
+
dispatch({
|
|
228
|
+
type: 'ADD_TOAST',
|
|
229
|
+
payload: payload
|
|
198
230
|
});
|
|
199
|
-
|
|
231
|
+
removeToastWithAnimationAfterDelay(id, delay);
|
|
232
|
+
}, [delay, removeToastWithAnimationAfterDelay]);
|
|
233
|
+
var handleMouseEnter = function handleMouseEnter(toast) {
|
|
234
|
+
return function () {
|
|
235
|
+
if (toast.isBeingRemoved) return;
|
|
236
|
+
setHovering(toast.id);
|
|
237
|
+
Object.values(timeoutIdRefs.current).forEach(function (timeoutId) {
|
|
238
|
+
window.clearTimeout(timeoutId);
|
|
239
|
+
});
|
|
240
|
+
timeoutIdRefs.current = {};
|
|
241
|
+
};
|
|
200
242
|
};
|
|
201
|
-
|
|
202
|
-
setHovering(
|
|
203
|
-
toasts.forEach((toast)
|
|
243
|
+
var handleMouseLeave = function handleMouseLeave() {
|
|
244
|
+
setHovering(undefined);
|
|
245
|
+
toasts.forEach(function (toast) {
|
|
204
246
|
removeToastWithAnimationAfterDelay(toast.id, delay);
|
|
205
247
|
});
|
|
206
248
|
};
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
249
|
+
var handleClose = function handleClose(toastId) {
|
|
250
|
+
return function () {
|
|
251
|
+
removeToast(toastId);
|
|
252
|
+
handleMouseLeave();
|
|
253
|
+
};
|
|
210
254
|
};
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
children: toastToShow.content
|
|
236
|
-
},
|
|
237
|
-
toastToShow.id
|
|
238
|
-
))
|
|
239
|
-
}
|
|
240
|
-
),
|
|
241
|
-
children
|
|
242
|
-
] });
|
|
255
|
+
var contextValue = React.useMemo(function () {
|
|
256
|
+
return {
|
|
257
|
+
toasts: toasts,
|
|
258
|
+
addToast: addToast,
|
|
259
|
+
removeToast: removeToast
|
|
260
|
+
};
|
|
261
|
+
}, [addToast, removeToast, toasts]);
|
|
262
|
+
return React.createElement(ToastContext.Provider, {
|
|
263
|
+
value: contextValue
|
|
264
|
+
}, toasts.length > 0 && React.createElement("div", {
|
|
265
|
+
className: classNames('eds-toast-container', "eds-toast-container--" + position, className),
|
|
266
|
+
style: style
|
|
267
|
+
}, toasts.slice(0, 3).map(function (toastToShow) {
|
|
268
|
+
return React.createElement(ToastAlertBox, {
|
|
269
|
+
variant: toastToShow.variant,
|
|
270
|
+
title: toastToShow.title,
|
|
271
|
+
onClose: handleClose(toastToShow.id),
|
|
272
|
+
onMouseEnter: handleMouseEnter(toastToShow),
|
|
273
|
+
onMouseLeave: handleMouseLeave,
|
|
274
|
+
closable: hoveringId === toastToShow.id,
|
|
275
|
+
toastIsBeingRemoved: toastToShow.isBeingRemoved,
|
|
276
|
+
key: toastToShow.id
|
|
277
|
+
}, toastToShow.content);
|
|
278
|
+
})), children);
|
|
243
279
|
};
|
|
244
|
-
|
|
245
|
-
|
|
280
|
+
var useToast = function useToast() {
|
|
281
|
+
var context = React.useContext(ToastContext);
|
|
246
282
|
if (!context) {
|
|
247
|
-
throw new Error(
|
|
248
|
-
"You need to wrap your component in a ToastProvider component in order to use the useToast hook"
|
|
249
|
-
);
|
|
283
|
+
throw new Error('You need to wrap your component in a ToastProvider component in ' + 'order to use the useToast hook');
|
|
250
284
|
}
|
|
251
|
-
|
|
285
|
+
var addToast = context.addToast;
|
|
252
286
|
return {
|
|
253
|
-
addToast
|
|
287
|
+
addToast: addToast
|
|
254
288
|
};
|
|
255
289
|
};
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
290
|
+
|
|
291
|
+
var _excluded$1 = ["children", "successHeading", "successMessage", "textToCopy", "className", "aria-label"];
|
|
292
|
+
var CopyableText = function CopyableText(_ref) {
|
|
293
|
+
var children = _ref.children,
|
|
294
|
+
_ref$successHeading = _ref.successHeading,
|
|
295
|
+
successHeading = _ref$successHeading === void 0 ? 'Kopiert!' : _ref$successHeading,
|
|
296
|
+
successMessage = _ref.successMessage,
|
|
297
|
+
textToCopy = _ref.textToCopy,
|
|
298
|
+
className = _ref.className,
|
|
299
|
+
_ref$ariaLabel = _ref['aria-label'],
|
|
300
|
+
ariaLabel = _ref$ariaLabel === void 0 ? "Kopier " + (textToCopy != null ? textToCopy : children) + " til utklippstavlen" : _ref$ariaLabel,
|
|
301
|
+
rest = _objectWithoutPropertiesLoose(_ref, _excluded$1);
|
|
302
|
+
var _useToast = useToast(),
|
|
303
|
+
addToast = _useToast.addToast;
|
|
304
|
+
var buttonRef = React.useRef(null);
|
|
305
|
+
var _textToCopy = textToCopy != null ? textToCopy : children;
|
|
306
|
+
var _successMessage = successMessage != null ? successMessage : _textToCopy + " ble kopiert til utklippstavlen.";
|
|
307
|
+
var handleClick = function handleClick() {
|
|
270
308
|
buttonRef.current && copy(_textToCopy, {
|
|
271
309
|
target: buttonRef.current
|
|
272
|
-
}) && addToast({
|
|
310
|
+
}) && addToast({
|
|
311
|
+
title: successHeading,
|
|
312
|
+
content: _successMessage
|
|
313
|
+
});
|
|
273
314
|
};
|
|
274
|
-
return
|
|
275
|
-
|
|
276
|
-
{
|
|
277
|
-
|
|
278
|
-
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
children: /* @__PURE__ */ jsx(CopyIcon, { className: "eds-copyable-text__button__icon" })
|
|
294
|
-
}
|
|
295
|
-
)
|
|
296
|
-
] })
|
|
297
|
-
}
|
|
298
|
-
);
|
|
299
|
-
};
|
|
300
|
-
const SmallExpandableAlertBox = (props) => {
|
|
301
|
-
return /* @__PURE__ */ jsx(ExpandableAlertBox, { size: "small", ...props });
|
|
315
|
+
return React.createElement("div", _extends({
|
|
316
|
+
className: 'eds-copyable-text ' + className,
|
|
317
|
+
style: _extends({}, rest.style),
|
|
318
|
+
type: "button",
|
|
319
|
+
onClick: handleClick,
|
|
320
|
+
tabIndex: -1,
|
|
321
|
+
"aria-label": ""
|
|
322
|
+
}, rest), React.createElement(PreformattedText, {
|
|
323
|
+
className: "eds-copyable-text__preformatted-text"
|
|
324
|
+
}, React.createElement("span", {
|
|
325
|
+
className: "eds-copyable-text__displayed-text"
|
|
326
|
+
}, children), React.createElement(IconButton, {
|
|
327
|
+
className: "eds-copyable-text__button",
|
|
328
|
+
"aria-label": ariaLabel,
|
|
329
|
+
type: "button",
|
|
330
|
+
ref: buttonRef
|
|
331
|
+
}, React.createElement(CopyIcon, {
|
|
332
|
+
className: 'eds-copyable-text__button__icon'
|
|
333
|
+
}))));
|
|
302
334
|
};
|
|
303
|
-
|
|
304
|
-
|
|
335
|
+
|
|
336
|
+
var _excluded = ["variant", "title", "children", "size", "className", "openLabel", "closeLabel"];
|
|
337
|
+
var SmallExpandableAlertBox = function SmallExpandableAlertBox(props) {
|
|
338
|
+
return React.createElement(ExpandableAlertBox, _extends({
|
|
339
|
+
size: "small"
|
|
340
|
+
}, props));
|
|
305
341
|
};
|
|
306
|
-
|
|
307
|
-
|
|
308
|
-
|
|
309
|
-
|
|
310
|
-
size,
|
|
311
|
-
className,
|
|
312
|
-
openLabel,
|
|
313
|
-
closeLabel,
|
|
314
|
-
...rest
|
|
315
|
-
}) => {
|
|
316
|
-
const [open, setopen] = React.useState(false);
|
|
317
|
-
return /* @__PURE__ */ jsx(
|
|
318
|
-
BaseAlertBox,
|
|
319
|
-
{
|
|
320
|
-
size,
|
|
321
|
-
variant,
|
|
322
|
-
className: classNames("eds-expandable-alert-box", className),
|
|
323
|
-
title: /* @__PURE__ */ jsx(
|
|
324
|
-
ExpandableAlertBoxTitle,
|
|
325
|
-
{
|
|
326
|
-
open,
|
|
327
|
-
title,
|
|
328
|
-
onClick: () => setopen(!open),
|
|
329
|
-
openLabel,
|
|
330
|
-
closeLabel
|
|
331
|
-
}
|
|
332
|
-
),
|
|
333
|
-
...rest,
|
|
334
|
-
children: /* @__PURE__ */ jsx(BaseExpand, { open, children })
|
|
335
|
-
}
|
|
336
|
-
);
|
|
342
|
+
var BannerExpandableAlertBox = function BannerExpandableAlertBox(props) {
|
|
343
|
+
return React.createElement(ExpandableAlertBox, _extends({
|
|
344
|
+
size: "banner"
|
|
345
|
+
}, props));
|
|
337
346
|
};
|
|
338
|
-
|
|
339
|
-
|
|
340
|
-
|
|
341
|
-
|
|
342
|
-
|
|
343
|
-
|
|
344
|
-
|
|
345
|
-
|
|
346
|
-
|
|
347
|
-
|
|
348
|
-
|
|
349
|
-
|
|
350
|
-
|
|
351
|
-
|
|
352
|
-
|
|
353
|
-
|
|
354
|
-
|
|
355
|
-
|
|
356
|
-
|
|
357
|
-
|
|
358
|
-
|
|
359
|
-
|
|
347
|
+
var ExpandableAlertBox = function ExpandableAlertBox(_ref) {
|
|
348
|
+
var variant = _ref.variant,
|
|
349
|
+
title = _ref.title,
|
|
350
|
+
children = _ref.children,
|
|
351
|
+
size = _ref.size,
|
|
352
|
+
className = _ref.className,
|
|
353
|
+
openLabel = _ref.openLabel,
|
|
354
|
+
closeLabel = _ref.closeLabel,
|
|
355
|
+
rest = _objectWithoutPropertiesLoose(_ref, _excluded);
|
|
356
|
+
var _React$useState = React.useState(false),
|
|
357
|
+
open = _React$useState[0],
|
|
358
|
+
setopen = _React$useState[1];
|
|
359
|
+
return React.createElement(BaseAlertBox, _extends({
|
|
360
|
+
size: size,
|
|
361
|
+
variant: variant,
|
|
362
|
+
className: classNames('eds-expandable-alert-box', className),
|
|
363
|
+
title: React.createElement(ExpandableAlertBoxTitle, {
|
|
364
|
+
open: open,
|
|
365
|
+
title: title,
|
|
366
|
+
onClick: function onClick() {
|
|
367
|
+
return setopen(!open);
|
|
368
|
+
},
|
|
369
|
+
openLabel: openLabel,
|
|
370
|
+
closeLabel: closeLabel
|
|
371
|
+
})
|
|
372
|
+
}, rest), React.createElement(BaseExpand, {
|
|
373
|
+
open: open
|
|
374
|
+
}, children));
|
|
360
375
|
};
|
|
361
|
-
|
|
362
|
-
|
|
363
|
-
|
|
364
|
-
|
|
365
|
-
|
|
366
|
-
|
|
367
|
-
|
|
368
|
-
|
|
369
|
-
|
|
370
|
-
|
|
376
|
+
var ExpandableAlertBoxTitle = function ExpandableAlertBoxTitle(_ref2) {
|
|
377
|
+
var title = _ref2.title,
|
|
378
|
+
open = _ref2.open,
|
|
379
|
+
_ref2$openLabel = _ref2.openLabel,
|
|
380
|
+
openLabel = _ref2$openLabel === void 0 ? 'Les mer' : _ref2$openLabel,
|
|
381
|
+
_ref2$closeLabel = _ref2.closeLabel,
|
|
382
|
+
closeLabel = _ref2$closeLabel === void 0 ? 'Lukk' : _ref2$closeLabel,
|
|
383
|
+
onClick = _ref2.onClick;
|
|
384
|
+
return React.createElement("div", {
|
|
385
|
+
className: "eds-expandable-alert-box__title"
|
|
386
|
+
}, React.createElement("div", null, title), React.createElement("button", {
|
|
387
|
+
className: "eds-expandable-alert-box__button",
|
|
388
|
+
onClick: onClick,
|
|
389
|
+
type: "button"
|
|
390
|
+
}, open ? closeLabel : openLabel, React.createElement(ExpandArrow, {
|
|
391
|
+
open: open,
|
|
392
|
+
inline: true
|
|
393
|
+
})));
|
|
371
394
|
};
|
|
395
|
+
|
|
396
|
+
warnAboutMissingStyles('alert', 'icons');
|
|
397
|
+
|
|
398
|
+
export { BannerAlertBox, BannerExpandableAlertBox, CopyableText, SmallAlertBox, SmallExpandableAlertBox, ToastAlertBox, ToastProvider, useToast };
|
|
372
399
|
//# sourceMappingURL=alert.esm.js.map
|