@ndla/ui 55.0.19-alpha.0 → 55.0.19
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/panda.buildinfo.json +1 -0
- package/dist/styles.css +4 -0
- package/es/CampaignBlock/CampaignBlock.js +1 -0
- package/es/ContactBlock/ContactBlock.js +1 -0
- package/es/ResourceBox/ResourceBox.js +1 -0
- package/es/index.js +0 -1
- package/es/styles.css +4 -0
- package/lib/CampaignBlock/CampaignBlock.js +1 -0
- package/lib/ContactBlock/ContactBlock.js +1 -0
- package/lib/ResourceBox/ResourceBox.js +1 -0
- package/lib/index.d.ts +0 -2
- package/lib/index.js +0 -25
- package/lib/styles.css +4 -0
- package/package.json +8 -8
- package/src/CampaignBlock/CampaignBlock.tsx +1 -0
- package/src/ContactBlock/ContactBlock.tsx +1 -0
- package/src/ResourceBox/ResourceBox.tsx +1 -0
- package/src/index.ts +0 -2
- package/es/SnackBar/DefaultSnackbar.js +0 -50
- package/es/SnackBar/SnackbarProvider.js +0 -120
- package/es/SnackBar/index.js +0 -10
- package/lib/SnackBar/DefaultSnackbar.d.ts +0 -10
- package/lib/SnackBar/DefaultSnackbar.js +0 -57
- package/lib/SnackBar/SnackbarProvider.d.ts +0 -32
- package/lib/SnackBar/SnackbarProvider.js +0 -130
- package/lib/SnackBar/index.d.ts +0 -10
- package/lib/SnackBar/index.js +0 -32
- package/src/SnackBar/DefaultSnackbar.tsx +0 -62
- package/src/SnackBar/Snack.stories.tsx +0 -105
- package/src/SnackBar/SnackbarProvider.tsx +0 -146
- package/src/SnackBar/index.ts +0 -11
|
@@ -393,6 +393,7 @@
|
|
|
393
393
|
"gridTemplateColumns]___[value:repeat(2, 1fr)",
|
|
394
394
|
"gridTemplateColumns]___[value:1fr]___[cond:tabletDown",
|
|
395
395
|
"marginBlockStart]___[value:xsmall",
|
|
396
|
+
"marginBlockEnd]___[value:medium",
|
|
396
397
|
"padding]___[value:xsmall]___[cond:tabletWideDown",
|
|
397
398
|
"flexDirection]___[value:column]___[cond:tabletDown",
|
|
398
399
|
"gap]___[value:0]___[cond:tabletDown",
|
package/dist/styles.css
CHANGED
package/es/index.js
CHANGED
|
@@ -38,7 +38,6 @@ export { ContentTypeBadge as ContentTypeBadgeNew, contentTypeToBadgeVariantMap }
|
|
|
38
38
|
export { default as CopyParagraphButton } from "./CopyParagraphButton";
|
|
39
39
|
export { default as ContentPlaceholder } from "./ContentPlaceholder";
|
|
40
40
|
export { TagSelectorRoot, TagSelectorLabel, TagSelectorItemInput, TagSelectorTrigger, TagSelectorControl, TagSelectorClearTrigger, TagSelectorInputBase, TagSelectorInput } from "./TagSelector/TagSelector";
|
|
41
|
-
export { SnackbarProvider, useSnack, BaseSnack, DefaultSnackbar } from "./SnackBar";
|
|
42
41
|
export { TreeStructure } from "./TreeStructure";
|
|
43
42
|
export { BlogPostV2 } from "./BlogPost";
|
|
44
43
|
export { ProgrammeCard } from "./ProgrammeCard";
|
package/es/styles.css
CHANGED
package/lib/index.d.ts
CHANGED
|
@@ -37,8 +37,6 @@ export { ContentTypeBadge as ContentTypeBadgeNew, contentTypeToBadgeVariantMap,
|
|
|
37
37
|
export { default as CopyParagraphButton } from "./CopyParagraphButton";
|
|
38
38
|
export { default as ContentPlaceholder } from "./ContentPlaceholder";
|
|
39
39
|
export { TagSelectorRoot, TagSelectorLabel, TagSelectorItemInput, TagSelectorTrigger, TagSelectorControl, TagSelectorClearTrigger, TagSelectorInputBase, TagSelectorInput, } from "./TagSelector/TagSelector";
|
|
40
|
-
export { SnackbarProvider, useSnack, BaseSnack, DefaultSnackbar } from "./SnackBar";
|
|
41
|
-
export type { Snack, SnackContext } from "./SnackBar";
|
|
42
40
|
export { TreeStructure } from "./TreeStructure";
|
|
43
41
|
export type { TreeStructureProps } from "./TreeStructure";
|
|
44
42
|
export { BlogPostV2 } from "./BlogPost";
|
package/lib/index.js
CHANGED
|
@@ -69,12 +69,6 @@ Object.defineProperty(exports, "AudioPlayer", {
|
|
|
69
69
|
return _AudioPlayer.default;
|
|
70
70
|
}
|
|
71
71
|
});
|
|
72
|
-
Object.defineProperty(exports, "BaseSnack", {
|
|
73
|
-
enumerable: true,
|
|
74
|
-
get: function () {
|
|
75
|
-
return _SnackBar.BaseSnack;
|
|
76
|
-
}
|
|
77
|
-
});
|
|
78
72
|
Object.defineProperty(exports, "BlockConcept", {
|
|
79
73
|
enumerable: true,
|
|
80
74
|
get: function () {
|
|
@@ -189,12 +183,6 @@ Object.defineProperty(exports, "CopyrightEmbed", {
|
|
|
189
183
|
return _Embed.CopyrightEmbed;
|
|
190
184
|
}
|
|
191
185
|
});
|
|
192
|
-
Object.defineProperty(exports, "DefaultSnackbar", {
|
|
193
|
-
enumerable: true,
|
|
194
|
-
get: function () {
|
|
195
|
-
return _SnackBar.DefaultSnackbar;
|
|
196
|
-
}
|
|
197
|
-
});
|
|
198
186
|
Object.defineProperty(exports, "EmbedByline", {
|
|
199
187
|
enumerable: true,
|
|
200
188
|
get: function () {
|
|
@@ -411,12 +399,6 @@ Object.defineProperty(exports, "ResourceBox", {
|
|
|
411
399
|
return _ResourceBox.ResourceBox;
|
|
412
400
|
}
|
|
413
401
|
});
|
|
414
|
-
Object.defineProperty(exports, "SnackbarProvider", {
|
|
415
|
-
enumerable: true,
|
|
416
|
-
get: function () {
|
|
417
|
-
return _SnackBar.SnackbarProvider;
|
|
418
|
-
}
|
|
419
|
-
});
|
|
420
402
|
Object.defineProperty(exports, "SourceMaterialBadge", {
|
|
421
403
|
enumerable: true,
|
|
422
404
|
get: function () {
|
|
@@ -621,12 +603,6 @@ Object.defineProperty(exports, "usePaginationTranslations", {
|
|
|
621
603
|
return _i18n.usePaginationTranslations;
|
|
622
604
|
}
|
|
623
605
|
});
|
|
624
|
-
Object.defineProperty(exports, "useSnack", {
|
|
625
|
-
enumerable: true,
|
|
626
|
-
get: function () {
|
|
627
|
-
return _SnackBar.useSnack;
|
|
628
|
-
}
|
|
629
|
-
});
|
|
630
606
|
Object.defineProperty(exports, "useTagSelectorTranslations", {
|
|
631
607
|
enumerable: true,
|
|
632
608
|
get: function () {
|
|
@@ -668,7 +644,6 @@ var _ContentTypeBadgeNew = require("./ContentTypeBadge/ContentTypeBadgeNew");
|
|
|
668
644
|
var _CopyParagraphButton = _interopRequireDefault(require("./CopyParagraphButton"));
|
|
669
645
|
var _ContentPlaceholder = _interopRequireDefault(require("./ContentPlaceholder"));
|
|
670
646
|
var _TagSelector = require("./TagSelector/TagSelector");
|
|
671
|
-
var _SnackBar = require("./SnackBar");
|
|
672
647
|
var _TreeStructure = require("./TreeStructure");
|
|
673
648
|
var _BlogPost = require("./BlogPost");
|
|
674
649
|
var _ProgrammeCard = require("./ProgrammeCard");
|
package/lib/styles.css
CHANGED
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ndla/ui",
|
|
3
|
-
"version": "55.0.19
|
|
3
|
+
"version": "55.0.19",
|
|
4
4
|
"description": "UI component library for NDLA",
|
|
5
5
|
"license": "GPL-3.0",
|
|
6
6
|
"main": "lib/index.js",
|
|
@@ -33,14 +33,14 @@
|
|
|
33
33
|
"types"
|
|
34
34
|
],
|
|
35
35
|
"dependencies": {
|
|
36
|
-
"@ndla/button": "^14.0.8
|
|
36
|
+
"@ndla/button": "^14.0.8",
|
|
37
37
|
"@ndla/core": "^5.0.1",
|
|
38
38
|
"@ndla/hooks": "^2.1.8",
|
|
39
|
-
"@ndla/icons": "^7.0.9
|
|
39
|
+
"@ndla/icons": "^7.0.9",
|
|
40
40
|
"@ndla/licenses": "^8.0.0-alpha.0",
|
|
41
|
-
"@ndla/primitives": "^0.0.
|
|
42
|
-
"@ndla/safelink": "^6.0.5
|
|
43
|
-
"@ndla/styled-system": "^0.0.
|
|
41
|
+
"@ndla/primitives": "^0.0.23",
|
|
42
|
+
"@ndla/safelink": "^6.0.5",
|
|
43
|
+
"@ndla/styled-system": "^0.0.9",
|
|
44
44
|
"@ndla/typography": "^0.4.23",
|
|
45
45
|
"@ndla/util": "^4.1.0",
|
|
46
46
|
"date-fns": "^2.30.0",
|
|
@@ -60,7 +60,7 @@
|
|
|
60
60
|
"react-router-dom": "> 6.0.0"
|
|
61
61
|
},
|
|
62
62
|
"devDependencies": {
|
|
63
|
-
"@ndla/preset-panda": "^0.0.
|
|
63
|
+
"@ndla/preset-panda": "^0.0.13",
|
|
64
64
|
"@ndla/types-backend": "^0.2.86",
|
|
65
65
|
"@ndla/types-embed": "^5.0.0-alpha.0",
|
|
66
66
|
"@pandacss/dev": "^0.42.0",
|
|
@@ -73,5 +73,5 @@
|
|
|
73
73
|
"publishConfig": {
|
|
74
74
|
"access": "public"
|
|
75
75
|
},
|
|
76
|
-
"gitHead": "
|
|
76
|
+
"gitHead": "35713120e2a004be81a62f17e29af74707b21dc4"
|
|
77
77
|
}
|
package/src/index.ts
CHANGED
|
@@ -123,8 +123,6 @@ export {
|
|
|
123
123
|
TagSelectorInput,
|
|
124
124
|
} from "./TagSelector/TagSelector";
|
|
125
125
|
|
|
126
|
-
export { SnackbarProvider, useSnack, BaseSnack, DefaultSnackbar } from "./SnackBar";
|
|
127
|
-
export type { Snack, SnackContext } from "./SnackBar";
|
|
128
126
|
export { TreeStructure } from "./TreeStructure";
|
|
129
127
|
export type { TreeStructureProps } from "./TreeStructure";
|
|
130
128
|
|
|
@@ -1,50 +0,0 @@
|
|
|
1
|
-
import _styled from "@emotion/styled/base";
|
|
2
|
-
/**
|
|
3
|
-
* Copyright (c) 2022-present, NDLA.
|
|
4
|
-
*
|
|
5
|
-
* This source code is licensed under the GPLv3 license found in the
|
|
6
|
-
* LICENSE file in the root directory of this source tree.
|
|
7
|
-
*
|
|
8
|
-
*/
|
|
9
|
-
|
|
10
|
-
import { useTranslation } from "react-i18next";
|
|
11
|
-
import { IconButtonV2 } from "@ndla/button";
|
|
12
|
-
import { breakpoints, colors, fonts, misc, mq, shadows, spacing } from "@ndla/core";
|
|
13
|
-
import { Cross } from "@ndla/icons/action";
|
|
14
|
-
import { useSnack } from "./SnackbarProvider";
|
|
15
|
-
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
16
|
-
const DefaultSnackContainer = /*#__PURE__*/_styled("div", {
|
|
17
|
-
target: "e1s2vq9x1",
|
|
18
|
-
label: "DefaultSnackContainer"
|
|
19
|
-
})("display:flex;gap:", spacing.small, ";padding:", spacing.small, ";background-color:", colors.text.primary, ";color:", colors.white, ";border-radius:", misc.borderRadius, ";margin:0 ", spacing.large, ";pointer-events:all;box-shadow:", shadows.levitate1, ";font-family:", fonts.sans, ";font-size:18px;align-items:center;" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkRlZmF1bHRTbmFja2Jhci50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBZXdDIiwiZmlsZSI6IkRlZmF1bHRTbmFja2Jhci50c3giLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIENvcHlyaWdodCAoYykgMjAyMi1wcmVzZW50LCBORExBLlxuICpcbiAqIFRoaXMgc291cmNlIGNvZGUgaXMgbGljZW5zZWQgdW5kZXIgdGhlIEdQTHYzIGxpY2Vuc2UgZm91bmQgaW4gdGhlXG4gKiBMSUNFTlNFIGZpbGUgaW4gdGhlIHJvb3QgZGlyZWN0b3J5IG9mIHRoaXMgc291cmNlIHRyZWUuXG4gKlxuICovXG5cbmltcG9ydCB7IHVzZVRyYW5zbGF0aW9uIH0gZnJvbSBcInJlYWN0LWkxOG5leHRcIjtcbmltcG9ydCBzdHlsZWQgZnJvbSBcIkBlbW90aW9uL3N0eWxlZFwiO1xuaW1wb3J0IHsgSWNvbkJ1dHRvblYyIH0gZnJvbSBcIkBuZGxhL2J1dHRvblwiO1xuaW1wb3J0IHsgYnJlYWtwb2ludHMsIGNvbG9ycywgZm9udHMsIG1pc2MsIG1xLCBzaGFkb3dzLCBzcGFjaW5nIH0gZnJvbSBcIkBuZGxhL2NvcmVcIjtcbmltcG9ydCB7IENyb3NzIH0gZnJvbSBcIkBuZGxhL2ljb25zL2FjdGlvblwiO1xuaW1wb3J0IHsgU25hY2ssIHVzZVNuYWNrIH0gZnJvbSBcIi4vU25hY2tiYXJQcm92aWRlclwiO1xuXG5jb25zdCBEZWZhdWx0U25hY2tDb250YWluZXIgPSBzdHlsZWQuZGl2YFxuICBkaXNwbGF5OiBmbGV4O1xuICBnYXA6ICR7c3BhY2luZy5zbWFsbH07XG4gIHBhZGRpbmc6ICR7c3BhY2luZy5zbWFsbH07XG4gIGJhY2tncm91bmQtY29sb3I6ICR7Y29sb3JzLnRleHQucHJpbWFyeX07XG4gIGNvbG9yOiAke2NvbG9ycy53aGl0ZX07XG4gIGJvcmRlci1yYWRpdXM6ICR7bWlzYy5ib3JkZXJSYWRpdXN9O1xuICBtYXJnaW46IDAgJHtzcGFjaW5nLmxhcmdlfTtcbiAgcG9pbnRlci1ldmVudHM6IGFsbDtcbiAgYm94LXNoYWRvdzogJHtzaGFkb3dzLmxldml0YXRlMX07XG4gIGZvbnQtZmFtaWx5OiAke2ZvbnRzLnNhbnN9O1xuICBmb250LXNpemU6IDE4cHg7XG4gIGFsaWduLWl0ZW1zOiBjZW50ZXI7XG5gO1xuXG5jb25zdCBCdXR0b25XcmFwcGVyID0gc3R5bGVkLmRpdmBcbiAgJHttcS5yYW5nZSh7IGZyb206IGJyZWFrcG9pbnRzLnRhYmxldCB9KX0ge1xuICAgIGdhcDogJHtzcGFjaW5nLnh4c21hbGx9O1xuICB9XG5gO1xuXG5jb25zdCBEZWZhdWx0U25hY2sgPSAoc25hY2s6IFNuYWNrKSA9PiB7XG4gIGNvbnN0IHsgY2xvc2FibGUgPSB0cnVlLCBpY29uIH0gPSBzbmFjaztcbiAgY29uc3QgeyB0IH0gPSB1c2VUcmFuc2xhdGlvbigpO1xuICBjb25zdCB7IGNsb3NlU25hY2sgfSA9IHVzZVNuYWNrKCk7XG4gIHJldHVybiAoXG4gICAgPERlZmF1bHRTbmFja0NvbnRhaW5lcj5cbiAgICAgIHtpY29ufVxuICAgICAge3NuYWNrLmNvbnRlbnR9XG4gICAgICA8QnV0dG9uV3JhcHBlcj5cbiAgICAgICAge2Nsb3NhYmxlICYmIChcbiAgICAgICAgICA8SWNvbkJ1dHRvblYyXG4gICAgICAgICAgICBzaXplPVwieHNtYWxsXCJcbiAgICAgICAgICAgIHZhcmlhbnQ9XCJvdXRsaW5lXCJcbiAgICAgICAgICAgIGNvbG9yVGhlbWU9XCJncmV5TGlnaHRlclwiXG4gICAgICAgICAgICBvbkNsaWNrPXsoKSA9PiBjbG9zZVNuYWNrKHNuYWNrKX1cbiAgICAgICAgICAgIGFyaWEtbGFiZWw9e3QoXCJzbmFja2Jhci5jbG9zZVwiKX1cbiAgICAgICAgICA+XG4gICAgICAgICAgICA8Q3Jvc3MgLz5cbiAgICAgICAgICA8L0ljb25CdXR0b25WMj5cbiAgICAgICAgKX1cbiAgICAgIDwvQnV0dG9uV3JhcHBlcj5cbiAgICA8L0RlZmF1bHRTbmFja0NvbnRhaW5lcj5cbiAgKTtcbn07XG5cbmV4cG9ydCBkZWZhdWx0IERlZmF1bHRTbmFjaztcbiJdfQ== */"));
|
|
20
|
-
const ButtonWrapper = /*#__PURE__*/_styled("div", {
|
|
21
|
-
target: "e1s2vq9x0",
|
|
22
|
-
label: "ButtonWrapper"
|
|
23
|
-
})(mq.range({
|
|
24
|
-
from: breakpoints.tablet
|
|
25
|
-
}), "{gap:", spacing.xxsmall, ";}" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkRlZmF1bHRTbmFja2Jhci50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBOEJnQyIsImZpbGUiOiJEZWZhdWx0U25hY2tiYXIudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBDb3B5cmlnaHQgKGMpIDIwMjItcHJlc2VudCwgTkRMQS5cbiAqXG4gKiBUaGlzIHNvdXJjZSBjb2RlIGlzIGxpY2Vuc2VkIHVuZGVyIHRoZSBHUEx2MyBsaWNlbnNlIGZvdW5kIGluIHRoZVxuICogTElDRU5TRSBmaWxlIGluIHRoZSByb290IGRpcmVjdG9yeSBvZiB0aGlzIHNvdXJjZSB0cmVlLlxuICpcbiAqL1xuXG5pbXBvcnQgeyB1c2VUcmFuc2xhdGlvbiB9IGZyb20gXCJyZWFjdC1pMThuZXh0XCI7XG5pbXBvcnQgc3R5bGVkIGZyb20gXCJAZW1vdGlvbi9zdHlsZWRcIjtcbmltcG9ydCB7IEljb25CdXR0b25WMiB9IGZyb20gXCJAbmRsYS9idXR0b25cIjtcbmltcG9ydCB7IGJyZWFrcG9pbnRzLCBjb2xvcnMsIGZvbnRzLCBtaXNjLCBtcSwgc2hhZG93cywgc3BhY2luZyB9IGZyb20gXCJAbmRsYS9jb3JlXCI7XG5pbXBvcnQgeyBDcm9zcyB9IGZyb20gXCJAbmRsYS9pY29ucy9hY3Rpb25cIjtcbmltcG9ydCB7IFNuYWNrLCB1c2VTbmFjayB9IGZyb20gXCIuL1NuYWNrYmFyUHJvdmlkZXJcIjtcblxuY29uc3QgRGVmYXVsdFNuYWNrQ29udGFpbmVyID0gc3R5bGVkLmRpdmBcbiAgZGlzcGxheTogZmxleDtcbiAgZ2FwOiAke3NwYWNpbmcuc21hbGx9O1xuICBwYWRkaW5nOiAke3NwYWNpbmcuc21hbGx9O1xuICBiYWNrZ3JvdW5kLWNvbG9yOiAke2NvbG9ycy50ZXh0LnByaW1hcnl9O1xuICBjb2xvcjogJHtjb2xvcnMud2hpdGV9O1xuICBib3JkZXItcmFkaXVzOiAke21pc2MuYm9yZGVyUmFkaXVzfTtcbiAgbWFyZ2luOiAwICR7c3BhY2luZy5sYXJnZX07XG4gIHBvaW50ZXItZXZlbnRzOiBhbGw7XG4gIGJveC1zaGFkb3c6ICR7c2hhZG93cy5sZXZpdGF0ZTF9O1xuICBmb250LWZhbWlseTogJHtmb250cy5zYW5zfTtcbiAgZm9udC1zaXplOiAxOHB4O1xuICBhbGlnbi1pdGVtczogY2VudGVyO1xuYDtcblxuY29uc3QgQnV0dG9uV3JhcHBlciA9IHN0eWxlZC5kaXZgXG4gICR7bXEucmFuZ2UoeyBmcm9tOiBicmVha3BvaW50cy50YWJsZXQgfSl9IHtcbiAgICBnYXA6ICR7c3BhY2luZy54eHNtYWxsfTtcbiAgfVxuYDtcblxuY29uc3QgRGVmYXVsdFNuYWNrID0gKHNuYWNrOiBTbmFjaykgPT4ge1xuICBjb25zdCB7IGNsb3NhYmxlID0gdHJ1ZSwgaWNvbiB9ID0gc25hY2s7XG4gIGNvbnN0IHsgdCB9ID0gdXNlVHJhbnNsYXRpb24oKTtcbiAgY29uc3QgeyBjbG9zZVNuYWNrIH0gPSB1c2VTbmFjaygpO1xuICByZXR1cm4gKFxuICAgIDxEZWZhdWx0U25hY2tDb250YWluZXI+XG4gICAgICB7aWNvbn1cbiAgICAgIHtzbmFjay5jb250ZW50fVxuICAgICAgPEJ1dHRvbldyYXBwZXI+XG4gICAgICAgIHtjbG9zYWJsZSAmJiAoXG4gICAgICAgICAgPEljb25CdXR0b25WMlxuICAgICAgICAgICAgc2l6ZT1cInhzbWFsbFwiXG4gICAgICAgICAgICB2YXJpYW50PVwib3V0bGluZVwiXG4gICAgICAgICAgICBjb2xvclRoZW1lPVwiZ3JleUxpZ2h0ZXJcIlxuICAgICAgICAgICAgb25DbGljaz17KCkgPT4gY2xvc2VTbmFjayhzbmFjayl9XG4gICAgICAgICAgICBhcmlhLWxhYmVsPXt0KFwic25hY2tiYXIuY2xvc2VcIil9XG4gICAgICAgICAgPlxuICAgICAgICAgICAgPENyb3NzIC8+XG4gICAgICAgICAgPC9JY29uQnV0dG9uVjI+XG4gICAgICAgICl9XG4gICAgICA8L0J1dHRvbldyYXBwZXI+XG4gICAgPC9EZWZhdWx0U25hY2tDb250YWluZXI+XG4gICk7XG59O1xuXG5leHBvcnQgZGVmYXVsdCBEZWZhdWx0U25hY2s7XG4iXX0= */"));
|
|
26
|
-
const DefaultSnack = snack => {
|
|
27
|
-
const {
|
|
28
|
-
closable = true,
|
|
29
|
-
icon
|
|
30
|
-
} = snack;
|
|
31
|
-
const {
|
|
32
|
-
t
|
|
33
|
-
} = useTranslation();
|
|
34
|
-
const {
|
|
35
|
-
closeSnack
|
|
36
|
-
} = useSnack();
|
|
37
|
-
return /*#__PURE__*/_jsxs(DefaultSnackContainer, {
|
|
38
|
-
children: [icon, snack.content, /*#__PURE__*/_jsx(ButtonWrapper, {
|
|
39
|
-
children: closable && /*#__PURE__*/_jsx(IconButtonV2, {
|
|
40
|
-
size: "xsmall",
|
|
41
|
-
variant: "outline",
|
|
42
|
-
colorTheme: "greyLighter",
|
|
43
|
-
onClick: () => closeSnack(snack),
|
|
44
|
-
"aria-label": t("snackbar.close"),
|
|
45
|
-
children: /*#__PURE__*/_jsx(Cross, {})
|
|
46
|
-
})
|
|
47
|
-
})]
|
|
48
|
-
});
|
|
49
|
-
};
|
|
50
|
-
export default DefaultSnack;
|
|
@@ -1,120 +0,0 @@
|
|
|
1
|
-
import _styled from "@emotion/styled/base";
|
|
2
|
-
/**
|
|
3
|
-
* Copyright (c) 2022-present, NDLA.
|
|
4
|
-
*
|
|
5
|
-
* This source code is licensed under the GPLv3 license found in the
|
|
6
|
-
* LICENSE file in the root directory of this source tree.
|
|
7
|
-
*
|
|
8
|
-
*/
|
|
9
|
-
|
|
10
|
-
import { useCallback, useMemo, createContext, useState, useContext, useEffect } from "react";
|
|
11
|
-
import { keyframes } from "@emotion/react";
|
|
12
|
-
import { spacing, stackOrder } from "@ndla/core";
|
|
13
|
-
import DefaultSnack from "./DefaultSnackbar";
|
|
14
|
-
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
15
|
-
const SnackbarContext = /*#__PURE__*/createContext(undefined);
|
|
16
|
-
export const useSnack = () => {
|
|
17
|
-
const context = useContext(SnackbarContext);
|
|
18
|
-
if (!context) {
|
|
19
|
-
throw new Error("useSnack can only be used within a SnackbarProvider!");
|
|
20
|
-
}
|
|
21
|
-
return context;
|
|
22
|
-
};
|
|
23
|
-
export const SnackbarProvider = _ref => {
|
|
24
|
-
let {
|
|
25
|
-
children
|
|
26
|
-
} = _ref;
|
|
27
|
-
const [snacks, setSnacks] = useState([]);
|
|
28
|
-
const addSnack = useCallback(snack => {
|
|
29
|
-
setSnacks(prev => prev.filter(s => s.id !== snack.id).concat(snack));
|
|
30
|
-
}, []);
|
|
31
|
-
const removeSnack = useCallback(snackId => {
|
|
32
|
-
setSnacks(prev => prev.filter(_ref2 => {
|
|
33
|
-
let {
|
|
34
|
-
id
|
|
35
|
-
} = _ref2;
|
|
36
|
-
return snackId !== id;
|
|
37
|
-
}));
|
|
38
|
-
}, []);
|
|
39
|
-
const closeSnack = useCallback(snack => {
|
|
40
|
-
setSnacks(prev => prev.map(p => p.id === snack.id ? {
|
|
41
|
-
...p,
|
|
42
|
-
duration: 0
|
|
43
|
-
} : p));
|
|
44
|
-
}, []);
|
|
45
|
-
const clearSnacks = useCallback(() => setSnacks([]), []);
|
|
46
|
-
const value = useMemo(() => ({
|
|
47
|
-
addSnack,
|
|
48
|
-
removeSnack,
|
|
49
|
-
clearSnacks,
|
|
50
|
-
closeSnack
|
|
51
|
-
}), [addSnack, removeSnack, clearSnacks, closeSnack]);
|
|
52
|
-
return /*#__PURE__*/_jsxs(SnackbarContext.Provider, {
|
|
53
|
-
value: value,
|
|
54
|
-
children: [children, /*#__PURE__*/_jsx(SnackbarContainer, {
|
|
55
|
-
snacks: snacks
|
|
56
|
-
})]
|
|
57
|
-
});
|
|
58
|
-
};
|
|
59
|
-
const snackbarInAnimation = keyframes({
|
|
60
|
-
"0%": {
|
|
61
|
-
transform: `translateY(${spacing.medium})`,
|
|
62
|
-
opacity: 0
|
|
63
|
-
},
|
|
64
|
-
"100%": {
|
|
65
|
-
opacity: 1
|
|
66
|
-
}
|
|
67
|
-
});
|
|
68
|
-
const snackbarOutAnimation = keyframes({
|
|
69
|
-
"0%": {
|
|
70
|
-
opacity: 1
|
|
71
|
-
},
|
|
72
|
-
"100%": {
|
|
73
|
-
transform: `translateY(${spacing.medium})`,
|
|
74
|
-
opacity: 0
|
|
75
|
-
}
|
|
76
|
-
});
|
|
77
|
-
const BaseSnackContainer = /*#__PURE__*/_styled("li", {
|
|
78
|
-
target: "e12tl09b1",
|
|
79
|
-
label: "BaseSnackContainer"
|
|
80
|
-
})("display:flex;flex-direction:column;align-items:center;animation:", p => p.expired ? snackbarOutAnimation : snackbarInAnimation, " 200ms ease-in-out;animation-fill-mode:forwards;" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIlNuYWNrYmFyUHJvdmlkZXIudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQTZGNkQiLCJmaWxlIjoiU25hY2tiYXJQcm92aWRlci50c3giLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIENvcHlyaWdodCAoYykgMjAyMi1wcmVzZW50LCBORExBLlxuICpcbiAqIFRoaXMgc291cmNlIGNvZGUgaXMgbGljZW5zZWQgdW5kZXIgdGhlIEdQTHYzIGxpY2Vuc2UgZm91bmQgaW4gdGhlXG4gKiBMSUNFTlNFIGZpbGUgaW4gdGhlIHJvb3QgZGlyZWN0b3J5IG9mIHRoaXMgc291cmNlIHRyZWUuXG4gKlxuICovXG5cbmltcG9ydCB7IHVzZUNhbGxiYWNrLCB1c2VNZW1vLCBjcmVhdGVDb250ZXh0LCBSZWFjdE5vZGUsIHVzZVN0YXRlLCB1c2VDb250ZXh0LCB1c2VFZmZlY3QgfSBmcm9tIFwicmVhY3RcIjtcbmltcG9ydCB7IGtleWZyYW1lcyB9IGZyb20gXCJAZW1vdGlvbi9yZWFjdFwiO1xuaW1wb3J0IHN0eWxlZCBmcm9tIFwiQGVtb3Rpb24vc3R5bGVkXCI7XG5pbXBvcnQgeyBzcGFjaW5nLCBzdGFja09yZGVyIH0gZnJvbSBcIkBuZGxhL2NvcmVcIjtcbmltcG9ydCBEZWZhdWx0U25hY2sgZnJvbSBcIi4vRGVmYXVsdFNuYWNrYmFyXCI7XG5cbmV4cG9ydCBpbnRlcmZhY2UgU25hY2sge1xuICBjb250ZW50PzogUmVhY3ROb2RlO1xuICBkdXJhdGlvbj86IG51bWJlcjtcbiAgcmVuZGVyPzogKGlkOiBzdHJpbmcsIG9uQ2xvc2U/OiAoKSA9PiB2b2lkKSA9PiBSZWFjdE5vZGU7XG4gIGlkOiBzdHJpbmc7XG4gIGljb24/OiBSZWFjdE5vZGU7XG4gIGNsb3NhYmxlPzogYm9vbGVhbjtcbn1cblxuZXhwb3J0IGludGVyZmFjZSBTbmFja0NvbnRleHQge1xuICBhZGRTbmFjazogKHNuYWNrOiBTbmFjaykgPT4gdm9pZDtcbiAgcmVtb3ZlU25hY2s6IChpZDogc3RyaW5nKSA9PiB2b2lkO1xuICBjbGVhclNuYWNrczogKCkgPT4gdm9pZDtcbiAgY2xvc2VTbmFjazogKHNuYWNrOiBTbmFjaykgPT4gdm9pZDtcbn1cblxuY29uc3QgU25hY2tiYXJDb250ZXh0ID0gY3JlYXRlQ29udGV4dDxTbmFja0NvbnRleHQgfCB1bmRlZmluZWQ+KHVuZGVmaW5lZCk7XG5cbmV4cG9ydCBjb25zdCB1c2VTbmFjayA9ICgpID0+IHtcbiAgY29uc3QgY29udGV4dCA9IHVzZUNvbnRleHQoU25hY2tiYXJDb250ZXh0KTtcbiAgaWYgKCFjb250ZXh0KSB7XG4gICAgdGhyb3cgbmV3IEVycm9yKFwidXNlU25hY2sgY2FuIG9ubHkgYmUgdXNlZCB3aXRoaW4gYSBTbmFja2JhclByb3ZpZGVyIVwiKTtcbiAgfVxuXG4gIHJldHVybiBjb250ZXh0O1xufTtcblxuaW50ZXJmYWNlIFByb3BzIHtcbiAgY2hpbGRyZW46IFJlYWN0Tm9kZTtcbn1cblxuZXhwb3J0IGNvbnN0IFNuYWNrYmFyUHJvdmlkZXIgPSAoeyBjaGlsZHJlbiB9OiBQcm9wcykgPT4ge1xuICBjb25zdCBbc25hY2tzLCBzZXRTbmFja3NdID0gdXNlU3RhdGU8U25hY2tbXT4oW10pO1xuXG4gIGNvbnN0IGFkZFNuYWNrID0gdXNlQ2FsbGJhY2soKHNuYWNrOiBTbmFjaykgPT4ge1xuICAgIHNldFNuYWNrcygocHJldikgPT4gcHJldi5maWx0ZXIoKHMpID0+IHMuaWQgIT09IHNuYWNrLmlkKS5jb25jYXQoc25hY2spKTtcbiAgfSwgW10pO1xuXG4gIGNvbnN0IHJlbW92ZVNuYWNrID0gdXNlQ2FsbGJhY2soKHNuYWNrSWQ6IHN0cmluZykgPT4ge1xuICAgIHNldFNuYWNrcygocHJldikgPT4gcHJldi5maWx0ZXIoKHsgaWQgfSkgPT4gc25hY2tJZCAhPT0gaWQpKTtcbiAgfSwgW10pO1xuXG4gIGNvbnN0IGNsb3NlU25hY2sgPSB1c2VDYWxsYmFjaygoc25hY2s6IFNuYWNrKSA9PiB7XG4gICAgc2V0U25hY2tzKChwcmV2KSA9PiBwcmV2Lm1hcCgocCkgPT4gKHAuaWQgPT09IHNuYWNrLmlkID8geyAuLi5wLCBkdXJhdGlvbjogMCB9IDogcCkpKTtcbiAgfSwgW10pO1xuXG4gIGNvbnN0IGNsZWFyU25hY2tzID0gdXNlQ2FsbGJhY2soKCkgPT4gc2V0U25hY2tzKFtdKSwgW10pO1xuXG4gIGNvbnN0IHZhbHVlID0gdXNlTWVtbyhcbiAgICAoKSA9PiAoeyBhZGRTbmFjaywgcmVtb3ZlU25hY2ssIGNsZWFyU25hY2tzLCBjbG9zZVNuYWNrIH0pLFxuICAgIFthZGRTbmFjaywgcmVtb3ZlU25hY2ssIGNsZWFyU25hY2tzLCBjbG9zZVNuYWNrXSxcbiAgKTtcblxuICByZXR1cm4gKFxuICAgIDxTbmFja2JhckNvbnRleHQuUHJvdmlkZXIgdmFsdWU9e3ZhbHVlfT5cbiAgICAgIHtjaGlsZHJlbn1cbiAgICAgIDxTbmFja2JhckNvbnRhaW5lciBzbmFja3M9e3NuYWNrc30gLz5cbiAgICA8L1NuYWNrYmFyQ29udGV4dC5Qcm92aWRlcj5cbiAgKTtcbn07XG5cbmludGVyZmFjZSBCYXNlU25hY2tQcm9wcyBleHRlbmRzIFNuYWNrIHtcbiAgY2hpbGRyZW46IFJlYWN0Tm9kZTtcbn1cblxuaW50ZXJmYWNlIEJhc2VTbmFja0NvbnRhaW5lclByb3BzIHtcbiAgZXhwaXJlZDogYm9vbGVhbjtcbn1cblxuY29uc3Qgc25hY2tiYXJJbkFuaW1hdGlvbiA9IGtleWZyYW1lcyh7XG4gIFwiMCVcIjogeyB0cmFuc2Zvcm06IGB0cmFuc2xhdGVZKCR7c3BhY2luZy5tZWRpdW19KWAsIG9wYWNpdHk6IDAgfSxcbiAgXCIxMDAlXCI6IHsgb3BhY2l0eTogMSB9LFxufSk7XG5cbmNvbnN0IHNuYWNrYmFyT3V0QW5pbWF0aW9uID0ga2V5ZnJhbWVzKHtcbiAgXCIwJVwiOiB7IG9wYWNpdHk6IDEgfSxcbiAgXCIxMDAlXCI6IHsgdHJhbnNmb3JtOiBgdHJhbnNsYXRlWSgke3NwYWNpbmcubWVkaXVtfSlgLCBvcGFjaXR5OiAwIH0sXG59KTtcblxuY29uc3QgQmFzZVNuYWNrQ29udGFpbmVyID0gc3R5bGVkLmxpPEJhc2VTbmFja0NvbnRhaW5lclByb3BzPmBcbiAgZGlzcGxheTogZmxleDtcbiAgZmxleC1kaXJlY3Rpb246IGNvbHVtbjtcbiAgYWxpZ24taXRlbXM6IGNlbnRlcjtcbiAgYW5pbWF0aW9uOiAkeyhwKSA9PiAocC5leHBpcmVkID8gc25hY2tiYXJPdXRBbmltYXRpb24gOiBzbmFja2JhckluQW5pbWF0aW9uKX0gMjAwbXMgZWFzZS1pbi1vdXQ7XG4gIGFuaW1hdGlvbi1maWxsLW1vZGU6IGZvcndhcmRzO1xuYDtcblxuZXhwb3J0IGNvbnN0IEJhc2VTbmFjayA9ICh7IGR1cmF0aW9uID0gNTAwMCwgaWQsIGNoaWxkcmVuIH06IEJhc2VTbmFja1Byb3BzKSA9PiB7XG4gIGNvbnN0IHsgcmVtb3ZlU25hY2sgfSA9IHVzZVNuYWNrKCk7XG4gIGNvbnN0IFtleHBpcmVkLCBzZXRFeHBpcmVkXSA9IHVzZVN0YXRlKGZhbHNlKTtcblxuICB1c2VFZmZlY3QoKCkgPT4ge1xuICAgIGNvbnN0IHRpbWVvdXQgPSBzZXRUaW1lb3V0KCgpID0+IHNldEV4cGlyZWQodHJ1ZSksIGR1cmF0aW9uKTtcbiAgICByZXR1cm4gKCkgPT4gY2xlYXJUaW1lb3V0KHRpbWVvdXQpO1xuICB9LCBbZHVyYXRpb25dKTtcblxuICByZXR1cm4gKFxuICAgIDxCYXNlU25hY2tDb250YWluZXIgZXhwaXJlZD17ZXhwaXJlZH0gb25BbmltYXRpb25FbmQ9eygpID0+IGV4cGlyZWQgJiYgcmVtb3ZlU25hY2soaWQpfT5cbiAgICAgIHtjaGlsZHJlbn1cbiAgICA8L0Jhc2VTbmFja0NvbnRhaW5lcj5cbiAgKTtcbn07XG5cbmludGVyZmFjZSBTbmFja2JhckNvbnRhaW5lclByb3BzIHtcbiAgc25hY2tzOiBTbmFja1tdO1xufVxuXG5jb25zdCBTdHlsZWRTbmFja0xpc3QgPSBzdHlsZWQudWxgXG4gIHBvc2l0aW9uOiBmaXhlZDtcbiAgei1pbmRleDogJHtzdGFja09yZGVyLnRvYXN0fTtcbiAgZGlzcGxheTogZmxleDtcbiAgZmxleC1kaXJlY3Rpb246IGNvbHVtbjtcbiAgcG9pbnRlci1ldmVudHM6IG5vbmU7XG4gIHBhZGRpbmc6IDA7XG4gIGJvdHRvbTogZW52KHNhZmUtYXJlYS1pbnNldC1ib3R0b20sIDQwcHgpO1xuICByaWdodDogZW52KHNhZmUtYXJlYS1pbnNldC1yaWdodCwgMHB4KTtcbiAgbGVmdDogZW52KHNhZmUtYXJlYS1pbnNldC1sZWZ0LCAwcHgpO1xuYDtcblxuY29uc3QgU25hY2tiYXJDb250YWluZXIgPSAoeyBzbmFja3MgfTogU25hY2tiYXJDb250YWluZXJQcm9wcykgPT4ge1xuICByZXR1cm4gKFxuICAgIDxTdHlsZWRTbmFja0xpc3QgYXJpYS1saXZlPVwicG9saXRlXCIgcm9sZT1cInJlZ2lvblwiPlxuICAgICAge3NuYWNrcy5tYXAoKHNuYWNrKSA9PiAoXG4gICAgICAgIDxCYXNlU25hY2sga2V5PXtzbmFjay5pZH0gey4uLnNuYWNrfT5cbiAgICAgICAgICB7c25hY2sucmVuZGVyPy4oc25hY2suaWQpID8/IDxEZWZhdWx0U25hY2sgey4uLnNuYWNrfSAvPn1cbiAgICAgICAgPC9CYXNlU25hY2s+XG4gICAgICApKX1cbiAgICA8L1N0eWxlZFNuYWNrTGlzdD5cbiAgKTtcbn07XG5cbmV4cG9ydCBkZWZhdWx0IFNuYWNrYmFyUHJvdmlkZXI7XG4iXX0= */"));
|
|
81
|
-
export const BaseSnack = _ref3 => {
|
|
82
|
-
let {
|
|
83
|
-
duration = 5000,
|
|
84
|
-
id,
|
|
85
|
-
children
|
|
86
|
-
} = _ref3;
|
|
87
|
-
const {
|
|
88
|
-
removeSnack
|
|
89
|
-
} = useSnack();
|
|
90
|
-
const [expired, setExpired] = useState(false);
|
|
91
|
-
useEffect(() => {
|
|
92
|
-
const timeout = setTimeout(() => setExpired(true), duration);
|
|
93
|
-
return () => clearTimeout(timeout);
|
|
94
|
-
}, [duration]);
|
|
95
|
-
return /*#__PURE__*/_jsx(BaseSnackContainer, {
|
|
96
|
-
expired: expired,
|
|
97
|
-
onAnimationEnd: () => expired && removeSnack(id),
|
|
98
|
-
children: children
|
|
99
|
-
});
|
|
100
|
-
};
|
|
101
|
-
const StyledSnackList = /*#__PURE__*/_styled("ul", {
|
|
102
|
-
target: "e12tl09b0",
|
|
103
|
-
label: "StyledSnackList"
|
|
104
|
-
})("position:fixed;z-index:", stackOrder.toast, ";display:flex;flex-direction:column;pointer-events:none;padding:0;bottom:env(safe-area-inset-bottom, 40px);right:env(safe-area-inset-right, 0px);left:env(safe-area-inset-left, 0px);" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIlNuYWNrYmFyUHJvdmlkZXIudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQXlIaUMiLCJmaWxlIjoiU25hY2tiYXJQcm92aWRlci50c3giLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIENvcHlyaWdodCAoYykgMjAyMi1wcmVzZW50LCBORExBLlxuICpcbiAqIFRoaXMgc291cmNlIGNvZGUgaXMgbGljZW5zZWQgdW5kZXIgdGhlIEdQTHYzIGxpY2Vuc2UgZm91bmQgaW4gdGhlXG4gKiBMSUNFTlNFIGZpbGUgaW4gdGhlIHJvb3QgZGlyZWN0b3J5IG9mIHRoaXMgc291cmNlIHRyZWUuXG4gKlxuICovXG5cbmltcG9ydCB7IHVzZUNhbGxiYWNrLCB1c2VNZW1vLCBjcmVhdGVDb250ZXh0LCBSZWFjdE5vZGUsIHVzZVN0YXRlLCB1c2VDb250ZXh0LCB1c2VFZmZlY3QgfSBmcm9tIFwicmVhY3RcIjtcbmltcG9ydCB7IGtleWZyYW1lcyB9IGZyb20gXCJAZW1vdGlvbi9yZWFjdFwiO1xuaW1wb3J0IHN0eWxlZCBmcm9tIFwiQGVtb3Rpb24vc3R5bGVkXCI7XG5pbXBvcnQgeyBzcGFjaW5nLCBzdGFja09yZGVyIH0gZnJvbSBcIkBuZGxhL2NvcmVcIjtcbmltcG9ydCBEZWZhdWx0U25hY2sgZnJvbSBcIi4vRGVmYXVsdFNuYWNrYmFyXCI7XG5cbmV4cG9ydCBpbnRlcmZhY2UgU25hY2sge1xuICBjb250ZW50PzogUmVhY3ROb2RlO1xuICBkdXJhdGlvbj86IG51bWJlcjtcbiAgcmVuZGVyPzogKGlkOiBzdHJpbmcsIG9uQ2xvc2U/OiAoKSA9PiB2b2lkKSA9PiBSZWFjdE5vZGU7XG4gIGlkOiBzdHJpbmc7XG4gIGljb24/OiBSZWFjdE5vZGU7XG4gIGNsb3NhYmxlPzogYm9vbGVhbjtcbn1cblxuZXhwb3J0IGludGVyZmFjZSBTbmFja0NvbnRleHQge1xuICBhZGRTbmFjazogKHNuYWNrOiBTbmFjaykgPT4gdm9pZDtcbiAgcmVtb3ZlU25hY2s6IChpZDogc3RyaW5nKSA9PiB2b2lkO1xuICBjbGVhclNuYWNrczogKCkgPT4gdm9pZDtcbiAgY2xvc2VTbmFjazogKHNuYWNrOiBTbmFjaykgPT4gdm9pZDtcbn1cblxuY29uc3QgU25hY2tiYXJDb250ZXh0ID0gY3JlYXRlQ29udGV4dDxTbmFja0NvbnRleHQgfCB1bmRlZmluZWQ+KHVuZGVmaW5lZCk7XG5cbmV4cG9ydCBjb25zdCB1c2VTbmFjayA9ICgpID0+IHtcbiAgY29uc3QgY29udGV4dCA9IHVzZUNvbnRleHQoU25hY2tiYXJDb250ZXh0KTtcbiAgaWYgKCFjb250ZXh0KSB7XG4gICAgdGhyb3cgbmV3IEVycm9yKFwidXNlU25hY2sgY2FuIG9ubHkgYmUgdXNlZCB3aXRoaW4gYSBTbmFja2JhclByb3ZpZGVyIVwiKTtcbiAgfVxuXG4gIHJldHVybiBjb250ZXh0O1xufTtcblxuaW50ZXJmYWNlIFByb3BzIHtcbiAgY2hpbGRyZW46IFJlYWN0Tm9kZTtcbn1cblxuZXhwb3J0IGNvbnN0IFNuYWNrYmFyUHJvdmlkZXIgPSAoeyBjaGlsZHJlbiB9OiBQcm9wcykgPT4ge1xuICBjb25zdCBbc25hY2tzLCBzZXRTbmFja3NdID0gdXNlU3RhdGU8U25hY2tbXT4oW10pO1xuXG4gIGNvbnN0IGFkZFNuYWNrID0gdXNlQ2FsbGJhY2soKHNuYWNrOiBTbmFjaykgPT4ge1xuICAgIHNldFNuYWNrcygocHJldikgPT4gcHJldi5maWx0ZXIoKHMpID0+IHMuaWQgIT09IHNuYWNrLmlkKS5jb25jYXQoc25hY2spKTtcbiAgfSwgW10pO1xuXG4gIGNvbnN0IHJlbW92ZVNuYWNrID0gdXNlQ2FsbGJhY2soKHNuYWNrSWQ6IHN0cmluZykgPT4ge1xuICAgIHNldFNuYWNrcygocHJldikgPT4gcHJldi5maWx0ZXIoKHsgaWQgfSkgPT4gc25hY2tJZCAhPT0gaWQpKTtcbiAgfSwgW10pO1xuXG4gIGNvbnN0IGNsb3NlU25hY2sgPSB1c2VDYWxsYmFjaygoc25hY2s6IFNuYWNrKSA9PiB7XG4gICAgc2V0U25hY2tzKChwcmV2KSA9PiBwcmV2Lm1hcCgocCkgPT4gKHAuaWQgPT09IHNuYWNrLmlkID8geyAuLi5wLCBkdXJhdGlvbjogMCB9IDogcCkpKTtcbiAgfSwgW10pO1xuXG4gIGNvbnN0IGNsZWFyU25hY2tzID0gdXNlQ2FsbGJhY2soKCkgPT4gc2V0U25hY2tzKFtdKSwgW10pO1xuXG4gIGNvbnN0IHZhbHVlID0gdXNlTWVtbyhcbiAgICAoKSA9PiAoeyBhZGRTbmFjaywgcmVtb3ZlU25hY2ssIGNsZWFyU25hY2tzLCBjbG9zZVNuYWNrIH0pLFxuICAgIFthZGRTbmFjaywgcmVtb3ZlU25hY2ssIGNsZWFyU25hY2tzLCBjbG9zZVNuYWNrXSxcbiAgKTtcblxuICByZXR1cm4gKFxuICAgIDxTbmFja2JhckNvbnRleHQuUHJvdmlkZXIgdmFsdWU9e3ZhbHVlfT5cbiAgICAgIHtjaGlsZHJlbn1cbiAgICAgIDxTbmFja2JhckNvbnRhaW5lciBzbmFja3M9e3NuYWNrc30gLz5cbiAgICA8L1NuYWNrYmFyQ29udGV4dC5Qcm92aWRlcj5cbiAgKTtcbn07XG5cbmludGVyZmFjZSBCYXNlU25hY2tQcm9wcyBleHRlbmRzIFNuYWNrIHtcbiAgY2hpbGRyZW46IFJlYWN0Tm9kZTtcbn1cblxuaW50ZXJmYWNlIEJhc2VTbmFja0NvbnRhaW5lclByb3BzIHtcbiAgZXhwaXJlZDogYm9vbGVhbjtcbn1cblxuY29uc3Qgc25hY2tiYXJJbkFuaW1hdGlvbiA9IGtleWZyYW1lcyh7XG4gIFwiMCVcIjogeyB0cmFuc2Zvcm06IGB0cmFuc2xhdGVZKCR7c3BhY2luZy5tZWRpdW19KWAsIG9wYWNpdHk6IDAgfSxcbiAgXCIxMDAlXCI6IHsgb3BhY2l0eTogMSB9LFxufSk7XG5cbmNvbnN0IHNuYWNrYmFyT3V0QW5pbWF0aW9uID0ga2V5ZnJhbWVzKHtcbiAgXCIwJVwiOiB7IG9wYWNpdHk6IDEgfSxcbiAgXCIxMDAlXCI6IHsgdHJhbnNmb3JtOiBgdHJhbnNsYXRlWSgke3NwYWNpbmcubWVkaXVtfSlgLCBvcGFjaXR5OiAwIH0sXG59KTtcblxuY29uc3QgQmFzZVNuYWNrQ29udGFpbmVyID0gc3R5bGVkLmxpPEJhc2VTbmFja0NvbnRhaW5lclByb3BzPmBcbiAgZGlzcGxheTogZmxleDtcbiAgZmxleC1kaXJlY3Rpb246IGNvbHVtbjtcbiAgYWxpZ24taXRlbXM6IGNlbnRlcjtcbiAgYW5pbWF0aW9uOiAkeyhwKSA9PiAocC5leHBpcmVkID8gc25hY2tiYXJPdXRBbmltYXRpb24gOiBzbmFja2JhckluQW5pbWF0aW9uKX0gMjAwbXMgZWFzZS1pbi1vdXQ7XG4gIGFuaW1hdGlvbi1maWxsLW1vZGU6IGZvcndhcmRzO1xuYDtcblxuZXhwb3J0IGNvbnN0IEJhc2VTbmFjayA9ICh7IGR1cmF0aW9uID0gNTAwMCwgaWQsIGNoaWxkcmVuIH06IEJhc2VTbmFja1Byb3BzKSA9PiB7XG4gIGNvbnN0IHsgcmVtb3ZlU25hY2sgfSA9IHVzZVNuYWNrKCk7XG4gIGNvbnN0IFtleHBpcmVkLCBzZXRFeHBpcmVkXSA9IHVzZVN0YXRlKGZhbHNlKTtcblxuICB1c2VFZmZlY3QoKCkgPT4ge1xuICAgIGNvbnN0IHRpbWVvdXQgPSBzZXRUaW1lb3V0KCgpID0+IHNldEV4cGlyZWQodHJ1ZSksIGR1cmF0aW9uKTtcbiAgICByZXR1cm4gKCkgPT4gY2xlYXJUaW1lb3V0KHRpbWVvdXQpO1xuICB9LCBbZHVyYXRpb25dKTtcblxuICByZXR1cm4gKFxuICAgIDxCYXNlU25hY2tDb250YWluZXIgZXhwaXJlZD17ZXhwaXJlZH0gb25BbmltYXRpb25FbmQ9eygpID0+IGV4cGlyZWQgJiYgcmVtb3ZlU25hY2soaWQpfT5cbiAgICAgIHtjaGlsZHJlbn1cbiAgICA8L0Jhc2VTbmFja0NvbnRhaW5lcj5cbiAgKTtcbn07XG5cbmludGVyZmFjZSBTbmFja2JhckNvbnRhaW5lclByb3BzIHtcbiAgc25hY2tzOiBTbmFja1tdO1xufVxuXG5jb25zdCBTdHlsZWRTbmFja0xpc3QgPSBzdHlsZWQudWxgXG4gIHBvc2l0aW9uOiBmaXhlZDtcbiAgei1pbmRleDogJHtzdGFja09yZGVyLnRvYXN0fTtcbiAgZGlzcGxheTogZmxleDtcbiAgZmxleC1kaXJlY3Rpb246IGNvbHVtbjtcbiAgcG9pbnRlci1ldmVudHM6IG5vbmU7XG4gIHBhZGRpbmc6IDA7XG4gIGJvdHRvbTogZW52KHNhZmUtYXJlYS1pbnNldC1ib3R0b20sIDQwcHgpO1xuICByaWdodDogZW52KHNhZmUtYXJlYS1pbnNldC1yaWdodCwgMHB4KTtcbiAgbGVmdDogZW52KHNhZmUtYXJlYS1pbnNldC1sZWZ0LCAwcHgpO1xuYDtcblxuY29uc3QgU25hY2tiYXJDb250YWluZXIgPSAoeyBzbmFja3MgfTogU25hY2tiYXJDb250YWluZXJQcm9wcykgPT4ge1xuICByZXR1cm4gKFxuICAgIDxTdHlsZWRTbmFja0xpc3QgYXJpYS1saXZlPVwicG9saXRlXCIgcm9sZT1cInJlZ2lvblwiPlxuICAgICAge3NuYWNrcy5tYXAoKHNuYWNrKSA9PiAoXG4gICAgICAgIDxCYXNlU25hY2sga2V5PXtzbmFjay5pZH0gey4uLnNuYWNrfT5cbiAgICAgICAgICB7c25hY2sucmVuZGVyPy4oc25hY2suaWQpID8/IDxEZWZhdWx0U25hY2sgey4uLnNuYWNrfSAvPn1cbiAgICAgICAgPC9CYXNlU25hY2s+XG4gICAgICApKX1cbiAgICA8L1N0eWxlZFNuYWNrTGlzdD5cbiAgKTtcbn07XG5cbmV4cG9ydCBkZWZhdWx0IFNuYWNrYmFyUHJvdmlkZXI7XG4iXX0= */"));
|
|
105
|
-
const SnackbarContainer = _ref4 => {
|
|
106
|
-
let {
|
|
107
|
-
snacks
|
|
108
|
-
} = _ref4;
|
|
109
|
-
return /*#__PURE__*/_jsx(StyledSnackList, {
|
|
110
|
-
"aria-live": "polite",
|
|
111
|
-
role: "region",
|
|
112
|
-
children: snacks.map(snack => /*#__PURE__*/_jsx(BaseSnack, {
|
|
113
|
-
...snack,
|
|
114
|
-
children: snack.render?.(snack.id) ?? /*#__PURE__*/_jsx(DefaultSnack, {
|
|
115
|
-
...snack
|
|
116
|
-
})
|
|
117
|
-
}, snack.id))
|
|
118
|
-
});
|
|
119
|
-
};
|
|
120
|
-
export default SnackbarProvider;
|
package/es/SnackBar/index.js
DELETED
|
@@ -1,10 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Copyright (c) 2022-present, NDLA.
|
|
3
|
-
*
|
|
4
|
-
* This source code is licensed under the GPLv3 license found in the
|
|
5
|
-
* LICENSE file in the root directory of this source tree.
|
|
6
|
-
*
|
|
7
|
-
*/
|
|
8
|
-
|
|
9
|
-
export { SnackbarProvider, useSnack, BaseSnack } from "./SnackbarProvider";
|
|
10
|
-
export { default as DefaultSnackbar } from "./DefaultSnackbar";
|
|
@@ -1,10 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Copyright (c) 2022-present, NDLA.
|
|
3
|
-
*
|
|
4
|
-
* This source code is licensed under the GPLv3 license found in the
|
|
5
|
-
* LICENSE file in the root directory of this source tree.
|
|
6
|
-
*
|
|
7
|
-
*/
|
|
8
|
-
import { Snack } from "./SnackbarProvider";
|
|
9
|
-
declare const DefaultSnack: (snack: Snack) => import("react/jsx-runtime").JSX.Element;
|
|
10
|
-
export default DefaultSnack;
|
|
@@ -1,57 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
exports.default = void 0;
|
|
7
|
-
var _base = _interopRequireDefault(require("@emotion/styled/base"));
|
|
8
|
-
var _reactI18next = require("react-i18next");
|
|
9
|
-
var _button = require("@ndla/button");
|
|
10
|
-
var _core = require("@ndla/core");
|
|
11
|
-
var _action = require("@ndla/icons/action");
|
|
12
|
-
var _SnackbarProvider = require("./SnackbarProvider");
|
|
13
|
-
var _jsxRuntime = require("react/jsx-runtime");
|
|
14
|
-
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
15
|
-
/**
|
|
16
|
-
* Copyright (c) 2022-present, NDLA.
|
|
17
|
-
*
|
|
18
|
-
* This source code is licensed under the GPLv3 license found in the
|
|
19
|
-
* LICENSE file in the root directory of this source tree.
|
|
20
|
-
*
|
|
21
|
-
*/
|
|
22
|
-
|
|
23
|
-
const DefaultSnackContainer = /*#__PURE__*/(0, _base.default)("div", {
|
|
24
|
-
target: "e1s2vq9x1",
|
|
25
|
-
label: "DefaultSnackContainer"
|
|
26
|
-
})("display:flex;gap:", _core.spacing.small, ";padding:", _core.spacing.small, ";background-color:", _core.colors.text.primary, ";color:", _core.colors.white, ";border-radius:", _core.misc.borderRadius, ";margin:0 ", _core.spacing.large, ";pointer-events:all;box-shadow:", _core.shadows.levitate1, ";font-family:", _core.fonts.sans, ";font-size:18px;align-items:center;" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkRlZmF1bHRTbmFja2Jhci50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBZXdDIiwiZmlsZSI6IkRlZmF1bHRTbmFja2Jhci50c3giLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIENvcHlyaWdodCAoYykgMjAyMi1wcmVzZW50LCBORExBLlxuICpcbiAqIFRoaXMgc291cmNlIGNvZGUgaXMgbGljZW5zZWQgdW5kZXIgdGhlIEdQTHYzIGxpY2Vuc2UgZm91bmQgaW4gdGhlXG4gKiBMSUNFTlNFIGZpbGUgaW4gdGhlIHJvb3QgZGlyZWN0b3J5IG9mIHRoaXMgc291cmNlIHRyZWUuXG4gKlxuICovXG5cbmltcG9ydCB7IHVzZVRyYW5zbGF0aW9uIH0gZnJvbSBcInJlYWN0LWkxOG5leHRcIjtcbmltcG9ydCBzdHlsZWQgZnJvbSBcIkBlbW90aW9uL3N0eWxlZFwiO1xuaW1wb3J0IHsgSWNvbkJ1dHRvblYyIH0gZnJvbSBcIkBuZGxhL2J1dHRvblwiO1xuaW1wb3J0IHsgYnJlYWtwb2ludHMsIGNvbG9ycywgZm9udHMsIG1pc2MsIG1xLCBzaGFkb3dzLCBzcGFjaW5nIH0gZnJvbSBcIkBuZGxhL2NvcmVcIjtcbmltcG9ydCB7IENyb3NzIH0gZnJvbSBcIkBuZGxhL2ljb25zL2FjdGlvblwiO1xuaW1wb3J0IHsgU25hY2ssIHVzZVNuYWNrIH0gZnJvbSBcIi4vU25hY2tiYXJQcm92aWRlclwiO1xuXG5jb25zdCBEZWZhdWx0U25hY2tDb250YWluZXIgPSBzdHlsZWQuZGl2YFxuICBkaXNwbGF5OiBmbGV4O1xuICBnYXA6ICR7c3BhY2luZy5zbWFsbH07XG4gIHBhZGRpbmc6ICR7c3BhY2luZy5zbWFsbH07XG4gIGJhY2tncm91bmQtY29sb3I6ICR7Y29sb3JzLnRleHQucHJpbWFyeX07XG4gIGNvbG9yOiAke2NvbG9ycy53aGl0ZX07XG4gIGJvcmRlci1yYWRpdXM6ICR7bWlzYy5ib3JkZXJSYWRpdXN9O1xuICBtYXJnaW46IDAgJHtzcGFjaW5nLmxhcmdlfTtcbiAgcG9pbnRlci1ldmVudHM6IGFsbDtcbiAgYm94LXNoYWRvdzogJHtzaGFkb3dzLmxldml0YXRlMX07XG4gIGZvbnQtZmFtaWx5OiAke2ZvbnRzLnNhbnN9O1xuICBmb250LXNpemU6IDE4cHg7XG4gIGFsaWduLWl0ZW1zOiBjZW50ZXI7XG5gO1xuXG5jb25zdCBCdXR0b25XcmFwcGVyID0gc3R5bGVkLmRpdmBcbiAgJHttcS5yYW5nZSh7IGZyb206IGJyZWFrcG9pbnRzLnRhYmxldCB9KX0ge1xuICAgIGdhcDogJHtzcGFjaW5nLnh4c21hbGx9O1xuICB9XG5gO1xuXG5jb25zdCBEZWZhdWx0U25hY2sgPSAoc25hY2s6IFNuYWNrKSA9PiB7XG4gIGNvbnN0IHsgY2xvc2FibGUgPSB0cnVlLCBpY29uIH0gPSBzbmFjaztcbiAgY29uc3QgeyB0IH0gPSB1c2VUcmFuc2xhdGlvbigpO1xuICBjb25zdCB7IGNsb3NlU25hY2sgfSA9IHVzZVNuYWNrKCk7XG4gIHJldHVybiAoXG4gICAgPERlZmF1bHRTbmFja0NvbnRhaW5lcj5cbiAgICAgIHtpY29ufVxuICAgICAge3NuYWNrLmNvbnRlbnR9XG4gICAgICA8QnV0dG9uV3JhcHBlcj5cbiAgICAgICAge2Nsb3NhYmxlICYmIChcbiAgICAgICAgICA8SWNvbkJ1dHRvblYyXG4gICAgICAgICAgICBzaXplPVwieHNtYWxsXCJcbiAgICAgICAgICAgIHZhcmlhbnQ9XCJvdXRsaW5lXCJcbiAgICAgICAgICAgIGNvbG9yVGhlbWU9XCJncmV5TGlnaHRlclwiXG4gICAgICAgICAgICBvbkNsaWNrPXsoKSA9PiBjbG9zZVNuYWNrKHNuYWNrKX1cbiAgICAgICAgICAgIGFyaWEtbGFiZWw9e3QoXCJzbmFja2Jhci5jbG9zZVwiKX1cbiAgICAgICAgICA+XG4gICAgICAgICAgICA8Q3Jvc3MgLz5cbiAgICAgICAgICA8L0ljb25CdXR0b25WMj5cbiAgICAgICAgKX1cbiAgICAgIDwvQnV0dG9uV3JhcHBlcj5cbiAgICA8L0RlZmF1bHRTbmFja0NvbnRhaW5lcj5cbiAgKTtcbn07XG5cbmV4cG9ydCBkZWZhdWx0IERlZmF1bHRTbmFjaztcbiJdfQ== */"));
|
|
27
|
-
const ButtonWrapper = /*#__PURE__*/(0, _base.default)("div", {
|
|
28
|
-
target: "e1s2vq9x0",
|
|
29
|
-
label: "ButtonWrapper"
|
|
30
|
-
})(_core.mq.range({
|
|
31
|
-
from: _core.breakpoints.tablet
|
|
32
|
-
}), "{gap:", _core.spacing.xxsmall, ";}" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkRlZmF1bHRTbmFja2Jhci50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBOEJnQyIsImZpbGUiOiJEZWZhdWx0U25hY2tiYXIudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBDb3B5cmlnaHQgKGMpIDIwMjItcHJlc2VudCwgTkRMQS5cbiAqXG4gKiBUaGlzIHNvdXJjZSBjb2RlIGlzIGxpY2Vuc2VkIHVuZGVyIHRoZSBHUEx2MyBsaWNlbnNlIGZvdW5kIGluIHRoZVxuICogTElDRU5TRSBmaWxlIGluIHRoZSByb290IGRpcmVjdG9yeSBvZiB0aGlzIHNvdXJjZSB0cmVlLlxuICpcbiAqL1xuXG5pbXBvcnQgeyB1c2VUcmFuc2xhdGlvbiB9IGZyb20gXCJyZWFjdC1pMThuZXh0XCI7XG5pbXBvcnQgc3R5bGVkIGZyb20gXCJAZW1vdGlvbi9zdHlsZWRcIjtcbmltcG9ydCB7IEljb25CdXR0b25WMiB9IGZyb20gXCJAbmRsYS9idXR0b25cIjtcbmltcG9ydCB7IGJyZWFrcG9pbnRzLCBjb2xvcnMsIGZvbnRzLCBtaXNjLCBtcSwgc2hhZG93cywgc3BhY2luZyB9IGZyb20gXCJAbmRsYS9jb3JlXCI7XG5pbXBvcnQgeyBDcm9zcyB9IGZyb20gXCJAbmRsYS9pY29ucy9hY3Rpb25cIjtcbmltcG9ydCB7IFNuYWNrLCB1c2VTbmFjayB9IGZyb20gXCIuL1NuYWNrYmFyUHJvdmlkZXJcIjtcblxuY29uc3QgRGVmYXVsdFNuYWNrQ29udGFpbmVyID0gc3R5bGVkLmRpdmBcbiAgZGlzcGxheTogZmxleDtcbiAgZ2FwOiAke3NwYWNpbmcuc21hbGx9O1xuICBwYWRkaW5nOiAke3NwYWNpbmcuc21hbGx9O1xuICBiYWNrZ3JvdW5kLWNvbG9yOiAke2NvbG9ycy50ZXh0LnByaW1hcnl9O1xuICBjb2xvcjogJHtjb2xvcnMud2hpdGV9O1xuICBib3JkZXItcmFkaXVzOiAke21pc2MuYm9yZGVyUmFkaXVzfTtcbiAgbWFyZ2luOiAwICR7c3BhY2luZy5sYXJnZX07XG4gIHBvaW50ZXItZXZlbnRzOiBhbGw7XG4gIGJveC1zaGFkb3c6ICR7c2hhZG93cy5sZXZpdGF0ZTF9O1xuICBmb250LWZhbWlseTogJHtmb250cy5zYW5zfTtcbiAgZm9udC1zaXplOiAxOHB4O1xuICBhbGlnbi1pdGVtczogY2VudGVyO1xuYDtcblxuY29uc3QgQnV0dG9uV3JhcHBlciA9IHN0eWxlZC5kaXZgXG4gICR7bXEucmFuZ2UoeyBmcm9tOiBicmVha3BvaW50cy50YWJsZXQgfSl9IHtcbiAgICBnYXA6ICR7c3BhY2luZy54eHNtYWxsfTtcbiAgfVxuYDtcblxuY29uc3QgRGVmYXVsdFNuYWNrID0gKHNuYWNrOiBTbmFjaykgPT4ge1xuICBjb25zdCB7IGNsb3NhYmxlID0gdHJ1ZSwgaWNvbiB9ID0gc25hY2s7XG4gIGNvbnN0IHsgdCB9ID0gdXNlVHJhbnNsYXRpb24oKTtcbiAgY29uc3QgeyBjbG9zZVNuYWNrIH0gPSB1c2VTbmFjaygpO1xuICByZXR1cm4gKFxuICAgIDxEZWZhdWx0U25hY2tDb250YWluZXI+XG4gICAgICB7aWNvbn1cbiAgICAgIHtzbmFjay5jb250ZW50fVxuICAgICAgPEJ1dHRvbldyYXBwZXI+XG4gICAgICAgIHtjbG9zYWJsZSAmJiAoXG4gICAgICAgICAgPEljb25CdXR0b25WMlxuICAgICAgICAgICAgc2l6ZT1cInhzbWFsbFwiXG4gICAgICAgICAgICB2YXJpYW50PVwib3V0bGluZVwiXG4gICAgICAgICAgICBjb2xvclRoZW1lPVwiZ3JleUxpZ2h0ZXJcIlxuICAgICAgICAgICAgb25DbGljaz17KCkgPT4gY2xvc2VTbmFjayhzbmFjayl9XG4gICAgICAgICAgICBhcmlhLWxhYmVsPXt0KFwic25hY2tiYXIuY2xvc2VcIil9XG4gICAgICAgICAgPlxuICAgICAgICAgICAgPENyb3NzIC8+XG4gICAgICAgICAgPC9JY29uQnV0dG9uVjI+XG4gICAgICAgICl9XG4gICAgICA8L0J1dHRvbldyYXBwZXI+XG4gICAgPC9EZWZhdWx0U25hY2tDb250YWluZXI+XG4gICk7XG59O1xuXG5leHBvcnQgZGVmYXVsdCBEZWZhdWx0U25hY2s7XG4iXX0= */"));
|
|
33
|
-
const DefaultSnack = snack => {
|
|
34
|
-
const {
|
|
35
|
-
closable = true,
|
|
36
|
-
icon
|
|
37
|
-
} = snack;
|
|
38
|
-
const {
|
|
39
|
-
t
|
|
40
|
-
} = (0, _reactI18next.useTranslation)();
|
|
41
|
-
const {
|
|
42
|
-
closeSnack
|
|
43
|
-
} = (0, _SnackbarProvider.useSnack)();
|
|
44
|
-
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(DefaultSnackContainer, {
|
|
45
|
-
children: [icon, snack.content, /*#__PURE__*/(0, _jsxRuntime.jsx)(ButtonWrapper, {
|
|
46
|
-
children: closable && /*#__PURE__*/(0, _jsxRuntime.jsx)(_button.IconButtonV2, {
|
|
47
|
-
size: "xsmall",
|
|
48
|
-
variant: "outline",
|
|
49
|
-
colorTheme: "greyLighter",
|
|
50
|
-
onClick: () => closeSnack(snack),
|
|
51
|
-
"aria-label": t("snackbar.close"),
|
|
52
|
-
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_action.Cross, {})
|
|
53
|
-
})
|
|
54
|
-
})]
|
|
55
|
-
});
|
|
56
|
-
};
|
|
57
|
-
var _default = exports.default = DefaultSnack;
|
|
@@ -1,32 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Copyright (c) 2022-present, NDLA.
|
|
3
|
-
*
|
|
4
|
-
* This source code is licensed under the GPLv3 license found in the
|
|
5
|
-
* LICENSE file in the root directory of this source tree.
|
|
6
|
-
*
|
|
7
|
-
*/
|
|
8
|
-
import { ReactNode } from "react";
|
|
9
|
-
export interface Snack {
|
|
10
|
-
content?: ReactNode;
|
|
11
|
-
duration?: number;
|
|
12
|
-
render?: (id: string, onClose?: () => void) => ReactNode;
|
|
13
|
-
id: string;
|
|
14
|
-
icon?: ReactNode;
|
|
15
|
-
closable?: boolean;
|
|
16
|
-
}
|
|
17
|
-
export interface SnackContext {
|
|
18
|
-
addSnack: (snack: Snack) => void;
|
|
19
|
-
removeSnack: (id: string) => void;
|
|
20
|
-
clearSnacks: () => void;
|
|
21
|
-
closeSnack: (snack: Snack) => void;
|
|
22
|
-
}
|
|
23
|
-
export declare const useSnack: () => SnackContext;
|
|
24
|
-
interface Props {
|
|
25
|
-
children: ReactNode;
|
|
26
|
-
}
|
|
27
|
-
export declare const SnackbarProvider: ({ children }: Props) => import("react/jsx-runtime").JSX.Element;
|
|
28
|
-
interface BaseSnackProps extends Snack {
|
|
29
|
-
children: ReactNode;
|
|
30
|
-
}
|
|
31
|
-
export declare const BaseSnack: ({ duration, id, children }: BaseSnackProps) => import("react/jsx-runtime").JSX.Element;
|
|
32
|
-
export default SnackbarProvider;
|
|
@@ -1,130 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
exports.useSnack = exports.default = exports.SnackbarProvider = exports.BaseSnack = void 0;
|
|
7
|
-
var _base = _interopRequireDefault(require("@emotion/styled/base"));
|
|
8
|
-
var _react = require("react");
|
|
9
|
-
var _react2 = require("@emotion/react");
|
|
10
|
-
var _core = require("@ndla/core");
|
|
11
|
-
var _DefaultSnackbar = _interopRequireDefault(require("./DefaultSnackbar"));
|
|
12
|
-
var _jsxRuntime = require("react/jsx-runtime");
|
|
13
|
-
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
14
|
-
/**
|
|
15
|
-
* Copyright (c) 2022-present, NDLA.
|
|
16
|
-
*
|
|
17
|
-
* This source code is licensed under the GPLv3 license found in the
|
|
18
|
-
* LICENSE file in the root directory of this source tree.
|
|
19
|
-
*
|
|
20
|
-
*/
|
|
21
|
-
|
|
22
|
-
const SnackbarContext = /*#__PURE__*/(0, _react.createContext)(undefined);
|
|
23
|
-
const useSnack = () => {
|
|
24
|
-
const context = (0, _react.useContext)(SnackbarContext);
|
|
25
|
-
if (!context) {
|
|
26
|
-
throw new Error("useSnack can only be used within a SnackbarProvider!");
|
|
27
|
-
}
|
|
28
|
-
return context;
|
|
29
|
-
};
|
|
30
|
-
exports.useSnack = useSnack;
|
|
31
|
-
const SnackbarProvider = _ref => {
|
|
32
|
-
let {
|
|
33
|
-
children
|
|
34
|
-
} = _ref;
|
|
35
|
-
const [snacks, setSnacks] = (0, _react.useState)([]);
|
|
36
|
-
const addSnack = (0, _react.useCallback)(snack => {
|
|
37
|
-
setSnacks(prev => prev.filter(s => s.id !== snack.id).concat(snack));
|
|
38
|
-
}, []);
|
|
39
|
-
const removeSnack = (0, _react.useCallback)(snackId => {
|
|
40
|
-
setSnacks(prev => prev.filter(_ref2 => {
|
|
41
|
-
let {
|
|
42
|
-
id
|
|
43
|
-
} = _ref2;
|
|
44
|
-
return snackId !== id;
|
|
45
|
-
}));
|
|
46
|
-
}, []);
|
|
47
|
-
const closeSnack = (0, _react.useCallback)(snack => {
|
|
48
|
-
setSnacks(prev => prev.map(p => p.id === snack.id ? {
|
|
49
|
-
...p,
|
|
50
|
-
duration: 0
|
|
51
|
-
} : p));
|
|
52
|
-
}, []);
|
|
53
|
-
const clearSnacks = (0, _react.useCallback)(() => setSnacks([]), []);
|
|
54
|
-
const value = (0, _react.useMemo)(() => ({
|
|
55
|
-
addSnack,
|
|
56
|
-
removeSnack,
|
|
57
|
-
clearSnacks,
|
|
58
|
-
closeSnack
|
|
59
|
-
}), [addSnack, removeSnack, clearSnacks, closeSnack]);
|
|
60
|
-
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(SnackbarContext.Provider, {
|
|
61
|
-
value: value,
|
|
62
|
-
children: [children, /*#__PURE__*/(0, _jsxRuntime.jsx)(SnackbarContainer, {
|
|
63
|
-
snacks: snacks
|
|
64
|
-
})]
|
|
65
|
-
});
|
|
66
|
-
};
|
|
67
|
-
exports.SnackbarProvider = SnackbarProvider;
|
|
68
|
-
const snackbarInAnimation = (0, _react2.keyframes)({
|
|
69
|
-
"0%": {
|
|
70
|
-
transform: `translateY(${_core.spacing.medium})`,
|
|
71
|
-
opacity: 0
|
|
72
|
-
},
|
|
73
|
-
"100%": {
|
|
74
|
-
opacity: 1
|
|
75
|
-
}
|
|
76
|
-
});
|
|
77
|
-
const snackbarOutAnimation = (0, _react2.keyframes)({
|
|
78
|
-
"0%": {
|
|
79
|
-
opacity: 1
|
|
80
|
-
},
|
|
81
|
-
"100%": {
|
|
82
|
-
transform: `translateY(${_core.spacing.medium})`,
|
|
83
|
-
opacity: 0
|
|
84
|
-
}
|
|
85
|
-
});
|
|
86
|
-
const BaseSnackContainer = /*#__PURE__*/(0, _base.default)("li", {
|
|
87
|
-
target: "e12tl09b1",
|
|
88
|
-
label: "BaseSnackContainer"
|
|
89
|
-
})("display:flex;flex-direction:column;align-items:center;animation:", p => p.expired ? snackbarOutAnimation : snackbarInAnimation, " 200ms ease-in-out;animation-fill-mode:forwards;" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIlNuYWNrYmFyUHJvdmlkZXIudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQTZGNkQiLCJmaWxlIjoiU25hY2tiYXJQcm92aWRlci50c3giLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIENvcHlyaWdodCAoYykgMjAyMi1wcmVzZW50LCBORExBLlxuICpcbiAqIFRoaXMgc291cmNlIGNvZGUgaXMgbGljZW5zZWQgdW5kZXIgdGhlIEdQTHYzIGxpY2Vuc2UgZm91bmQgaW4gdGhlXG4gKiBMSUNFTlNFIGZpbGUgaW4gdGhlIHJvb3QgZGlyZWN0b3J5IG9mIHRoaXMgc291cmNlIHRyZWUuXG4gKlxuICovXG5cbmltcG9ydCB7IHVzZUNhbGxiYWNrLCB1c2VNZW1vLCBjcmVhdGVDb250ZXh0LCBSZWFjdE5vZGUsIHVzZVN0YXRlLCB1c2VDb250ZXh0LCB1c2VFZmZlY3QgfSBmcm9tIFwicmVhY3RcIjtcbmltcG9ydCB7IGtleWZyYW1lcyB9IGZyb20gXCJAZW1vdGlvbi9yZWFjdFwiO1xuaW1wb3J0IHN0eWxlZCBmcm9tIFwiQGVtb3Rpb24vc3R5bGVkXCI7XG5pbXBvcnQgeyBzcGFjaW5nLCBzdGFja09yZGVyIH0gZnJvbSBcIkBuZGxhL2NvcmVcIjtcbmltcG9ydCBEZWZhdWx0U25hY2sgZnJvbSBcIi4vRGVmYXVsdFNuYWNrYmFyXCI7XG5cbmV4cG9ydCBpbnRlcmZhY2UgU25hY2sge1xuICBjb250ZW50PzogUmVhY3ROb2RlO1xuICBkdXJhdGlvbj86IG51bWJlcjtcbiAgcmVuZGVyPzogKGlkOiBzdHJpbmcsIG9uQ2xvc2U/OiAoKSA9PiB2b2lkKSA9PiBSZWFjdE5vZGU7XG4gIGlkOiBzdHJpbmc7XG4gIGljb24/OiBSZWFjdE5vZGU7XG4gIGNsb3NhYmxlPzogYm9vbGVhbjtcbn1cblxuZXhwb3J0IGludGVyZmFjZSBTbmFja0NvbnRleHQge1xuICBhZGRTbmFjazogKHNuYWNrOiBTbmFjaykgPT4gdm9pZDtcbiAgcmVtb3ZlU25hY2s6IChpZDogc3RyaW5nKSA9PiB2b2lkO1xuICBjbGVhclNuYWNrczogKCkgPT4gdm9pZDtcbiAgY2xvc2VTbmFjazogKHNuYWNrOiBTbmFjaykgPT4gdm9pZDtcbn1cblxuY29uc3QgU25hY2tiYXJDb250ZXh0ID0gY3JlYXRlQ29udGV4dDxTbmFja0NvbnRleHQgfCB1bmRlZmluZWQ+KHVuZGVmaW5lZCk7XG5cbmV4cG9ydCBjb25zdCB1c2VTbmFjayA9ICgpID0+IHtcbiAgY29uc3QgY29udGV4dCA9IHVzZUNvbnRleHQoU25hY2tiYXJDb250ZXh0KTtcbiAgaWYgKCFjb250ZXh0KSB7XG4gICAgdGhyb3cgbmV3IEVycm9yKFwidXNlU25hY2sgY2FuIG9ubHkgYmUgdXNlZCB3aXRoaW4gYSBTbmFja2JhclByb3ZpZGVyIVwiKTtcbiAgfVxuXG4gIHJldHVybiBjb250ZXh0O1xufTtcblxuaW50ZXJmYWNlIFByb3BzIHtcbiAgY2hpbGRyZW46IFJlYWN0Tm9kZTtcbn1cblxuZXhwb3J0IGNvbnN0IFNuYWNrYmFyUHJvdmlkZXIgPSAoeyBjaGlsZHJlbiB9OiBQcm9wcykgPT4ge1xuICBjb25zdCBbc25hY2tzLCBzZXRTbmFja3NdID0gdXNlU3RhdGU8U25hY2tbXT4oW10pO1xuXG4gIGNvbnN0IGFkZFNuYWNrID0gdXNlQ2FsbGJhY2soKHNuYWNrOiBTbmFjaykgPT4ge1xuICAgIHNldFNuYWNrcygocHJldikgPT4gcHJldi5maWx0ZXIoKHMpID0+IHMuaWQgIT09IHNuYWNrLmlkKS5jb25jYXQoc25hY2spKTtcbiAgfSwgW10pO1xuXG4gIGNvbnN0IHJlbW92ZVNuYWNrID0gdXNlQ2FsbGJhY2soKHNuYWNrSWQ6IHN0cmluZykgPT4ge1xuICAgIHNldFNuYWNrcygocHJldikgPT4gcHJldi5maWx0ZXIoKHsgaWQgfSkgPT4gc25hY2tJZCAhPT0gaWQpKTtcbiAgfSwgW10pO1xuXG4gIGNvbnN0IGNsb3NlU25hY2sgPSB1c2VDYWxsYmFjaygoc25hY2s6IFNuYWNrKSA9PiB7XG4gICAgc2V0U25hY2tzKChwcmV2KSA9PiBwcmV2Lm1hcCgocCkgPT4gKHAuaWQgPT09IHNuYWNrLmlkID8geyAuLi5wLCBkdXJhdGlvbjogMCB9IDogcCkpKTtcbiAgfSwgW10pO1xuXG4gIGNvbnN0IGNsZWFyU25hY2tzID0gdXNlQ2FsbGJhY2soKCkgPT4gc2V0U25hY2tzKFtdKSwgW10pO1xuXG4gIGNvbnN0IHZhbHVlID0gdXNlTWVtbyhcbiAgICAoKSA9PiAoeyBhZGRTbmFjaywgcmVtb3ZlU25hY2ssIGNsZWFyU25hY2tzLCBjbG9zZVNuYWNrIH0pLFxuICAgIFthZGRTbmFjaywgcmVtb3ZlU25hY2ssIGNsZWFyU25hY2tzLCBjbG9zZVNuYWNrXSxcbiAgKTtcblxuICByZXR1cm4gKFxuICAgIDxTbmFja2JhckNvbnRleHQuUHJvdmlkZXIgdmFsdWU9e3ZhbHVlfT5cbiAgICAgIHtjaGlsZHJlbn1cbiAgICAgIDxTbmFja2JhckNvbnRhaW5lciBzbmFja3M9e3NuYWNrc30gLz5cbiAgICA8L1NuYWNrYmFyQ29udGV4dC5Qcm92aWRlcj5cbiAgKTtcbn07XG5cbmludGVyZmFjZSBCYXNlU25hY2tQcm9wcyBleHRlbmRzIFNuYWNrIHtcbiAgY2hpbGRyZW46IFJlYWN0Tm9kZTtcbn1cblxuaW50ZXJmYWNlIEJhc2VTbmFja0NvbnRhaW5lclByb3BzIHtcbiAgZXhwaXJlZDogYm9vbGVhbjtcbn1cblxuY29uc3Qgc25hY2tiYXJJbkFuaW1hdGlvbiA9IGtleWZyYW1lcyh7XG4gIFwiMCVcIjogeyB0cmFuc2Zvcm06IGB0cmFuc2xhdGVZKCR7c3BhY2luZy5tZWRpdW19KWAsIG9wYWNpdHk6IDAgfSxcbiAgXCIxMDAlXCI6IHsgb3BhY2l0eTogMSB9LFxufSk7XG5cbmNvbnN0IHNuYWNrYmFyT3V0QW5pbWF0aW9uID0ga2V5ZnJhbWVzKHtcbiAgXCIwJVwiOiB7IG9wYWNpdHk6IDEgfSxcbiAgXCIxMDAlXCI6IHsgdHJhbnNmb3JtOiBgdHJhbnNsYXRlWSgke3NwYWNpbmcubWVkaXVtfSlgLCBvcGFjaXR5OiAwIH0sXG59KTtcblxuY29uc3QgQmFzZVNuYWNrQ29udGFpbmVyID0gc3R5bGVkLmxpPEJhc2VTbmFja0NvbnRhaW5lclByb3BzPmBcbiAgZGlzcGxheTogZmxleDtcbiAgZmxleC1kaXJlY3Rpb246IGNvbHVtbjtcbiAgYWxpZ24taXRlbXM6IGNlbnRlcjtcbiAgYW5pbWF0aW9uOiAkeyhwKSA9PiAocC5leHBpcmVkID8gc25hY2tiYXJPdXRBbmltYXRpb24gOiBzbmFja2JhckluQW5pbWF0aW9uKX0gMjAwbXMgZWFzZS1pbi1vdXQ7XG4gIGFuaW1hdGlvbi1maWxsLW1vZGU6IGZvcndhcmRzO1xuYDtcblxuZXhwb3J0IGNvbnN0IEJhc2VTbmFjayA9ICh7IGR1cmF0aW9uID0gNTAwMCwgaWQsIGNoaWxkcmVuIH06IEJhc2VTbmFja1Byb3BzKSA9PiB7XG4gIGNvbnN0IHsgcmVtb3ZlU25hY2sgfSA9IHVzZVNuYWNrKCk7XG4gIGNvbnN0IFtleHBpcmVkLCBzZXRFeHBpcmVkXSA9IHVzZVN0YXRlKGZhbHNlKTtcblxuICB1c2VFZmZlY3QoKCkgPT4ge1xuICAgIGNvbnN0IHRpbWVvdXQgPSBzZXRUaW1lb3V0KCgpID0+IHNldEV4cGlyZWQodHJ1ZSksIGR1cmF0aW9uKTtcbiAgICByZXR1cm4gKCkgPT4gY2xlYXJUaW1lb3V0KHRpbWVvdXQpO1xuICB9LCBbZHVyYXRpb25dKTtcblxuICByZXR1cm4gKFxuICAgIDxCYXNlU25hY2tDb250YWluZXIgZXhwaXJlZD17ZXhwaXJlZH0gb25BbmltYXRpb25FbmQ9eygpID0+IGV4cGlyZWQgJiYgcmVtb3ZlU25hY2soaWQpfT5cbiAgICAgIHtjaGlsZHJlbn1cbiAgICA8L0Jhc2VTbmFja0NvbnRhaW5lcj5cbiAgKTtcbn07XG5cbmludGVyZmFjZSBTbmFja2JhckNvbnRhaW5lclByb3BzIHtcbiAgc25hY2tzOiBTbmFja1tdO1xufVxuXG5jb25zdCBTdHlsZWRTbmFja0xpc3QgPSBzdHlsZWQudWxgXG4gIHBvc2l0aW9uOiBmaXhlZDtcbiAgei1pbmRleDogJHtzdGFja09yZGVyLnRvYXN0fTtcbiAgZGlzcGxheTogZmxleDtcbiAgZmxleC1kaXJlY3Rpb246IGNvbHVtbjtcbiAgcG9pbnRlci1ldmVudHM6IG5vbmU7XG4gIHBhZGRpbmc6IDA7XG4gIGJvdHRvbTogZW52KHNhZmUtYXJlYS1pbnNldC1ib3R0b20sIDQwcHgpO1xuICByaWdodDogZW52KHNhZmUtYXJlYS1pbnNldC1yaWdodCwgMHB4KTtcbiAgbGVmdDogZW52KHNhZmUtYXJlYS1pbnNldC1sZWZ0LCAwcHgpO1xuYDtcblxuY29uc3QgU25hY2tiYXJDb250YWluZXIgPSAoeyBzbmFja3MgfTogU25hY2tiYXJDb250YWluZXJQcm9wcykgPT4ge1xuICByZXR1cm4gKFxuICAgIDxTdHlsZWRTbmFja0xpc3QgYXJpYS1saXZlPVwicG9saXRlXCIgcm9sZT1cInJlZ2lvblwiPlxuICAgICAge3NuYWNrcy5tYXAoKHNuYWNrKSA9PiAoXG4gICAgICAgIDxCYXNlU25hY2sga2V5PXtzbmFjay5pZH0gey4uLnNuYWNrfT5cbiAgICAgICAgICB7c25hY2sucmVuZGVyPy4oc25hY2suaWQpID8/IDxEZWZhdWx0U25hY2sgey4uLnNuYWNrfSAvPn1cbiAgICAgICAgPC9CYXNlU25hY2s+XG4gICAgICApKX1cbiAgICA8L1N0eWxlZFNuYWNrTGlzdD5cbiAgKTtcbn07XG5cbmV4cG9ydCBkZWZhdWx0IFNuYWNrYmFyUHJvdmlkZXI7XG4iXX0= */"));
|
|
90
|
-
const BaseSnack = _ref3 => {
|
|
91
|
-
let {
|
|
92
|
-
duration = 5000,
|
|
93
|
-
id,
|
|
94
|
-
children
|
|
95
|
-
} = _ref3;
|
|
96
|
-
const {
|
|
97
|
-
removeSnack
|
|
98
|
-
} = useSnack();
|
|
99
|
-
const [expired, setExpired] = (0, _react.useState)(false);
|
|
100
|
-
(0, _react.useEffect)(() => {
|
|
101
|
-
const timeout = setTimeout(() => setExpired(true), duration);
|
|
102
|
-
return () => clearTimeout(timeout);
|
|
103
|
-
}, [duration]);
|
|
104
|
-
return /*#__PURE__*/(0, _jsxRuntime.jsx)(BaseSnackContainer, {
|
|
105
|
-
expired: expired,
|
|
106
|
-
onAnimationEnd: () => expired && removeSnack(id),
|
|
107
|
-
children: children
|
|
108
|
-
});
|
|
109
|
-
};
|
|
110
|
-
exports.BaseSnack = BaseSnack;
|
|
111
|
-
const StyledSnackList = /*#__PURE__*/(0, _base.default)("ul", {
|
|
112
|
-
target: "e12tl09b0",
|
|
113
|
-
label: "StyledSnackList"
|
|
114
|
-
})("position:fixed;z-index:", _core.stackOrder.toast, ";display:flex;flex-direction:column;pointer-events:none;padding:0;bottom:env(safe-area-inset-bottom, 40px);right:env(safe-area-inset-right, 0px);left:env(safe-area-inset-left, 0px);" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIlNuYWNrYmFyUHJvdmlkZXIudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQXlIaUMiLCJmaWxlIjoiU25hY2tiYXJQcm92aWRlci50c3giLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIENvcHlyaWdodCAoYykgMjAyMi1wcmVzZW50LCBORExBLlxuICpcbiAqIFRoaXMgc291cmNlIGNvZGUgaXMgbGljZW5zZWQgdW5kZXIgdGhlIEdQTHYzIGxpY2Vuc2UgZm91bmQgaW4gdGhlXG4gKiBMSUNFTlNFIGZpbGUgaW4gdGhlIHJvb3QgZGlyZWN0b3J5IG9mIHRoaXMgc291cmNlIHRyZWUuXG4gKlxuICovXG5cbmltcG9ydCB7IHVzZUNhbGxiYWNrLCB1c2VNZW1vLCBjcmVhdGVDb250ZXh0LCBSZWFjdE5vZGUsIHVzZVN0YXRlLCB1c2VDb250ZXh0LCB1c2VFZmZlY3QgfSBmcm9tIFwicmVhY3RcIjtcbmltcG9ydCB7IGtleWZyYW1lcyB9IGZyb20gXCJAZW1vdGlvbi9yZWFjdFwiO1xuaW1wb3J0IHN0eWxlZCBmcm9tIFwiQGVtb3Rpb24vc3R5bGVkXCI7XG5pbXBvcnQgeyBzcGFjaW5nLCBzdGFja09yZGVyIH0gZnJvbSBcIkBuZGxhL2NvcmVcIjtcbmltcG9ydCBEZWZhdWx0U25hY2sgZnJvbSBcIi4vRGVmYXVsdFNuYWNrYmFyXCI7XG5cbmV4cG9ydCBpbnRlcmZhY2UgU25hY2sge1xuICBjb250ZW50PzogUmVhY3ROb2RlO1xuICBkdXJhdGlvbj86IG51bWJlcjtcbiAgcmVuZGVyPzogKGlkOiBzdHJpbmcsIG9uQ2xvc2U/OiAoKSA9PiB2b2lkKSA9PiBSZWFjdE5vZGU7XG4gIGlkOiBzdHJpbmc7XG4gIGljb24/OiBSZWFjdE5vZGU7XG4gIGNsb3NhYmxlPzogYm9vbGVhbjtcbn1cblxuZXhwb3J0IGludGVyZmFjZSBTbmFja0NvbnRleHQge1xuICBhZGRTbmFjazogKHNuYWNrOiBTbmFjaykgPT4gdm9pZDtcbiAgcmVtb3ZlU25hY2s6IChpZDogc3RyaW5nKSA9PiB2b2lkO1xuICBjbGVhclNuYWNrczogKCkgPT4gdm9pZDtcbiAgY2xvc2VTbmFjazogKHNuYWNrOiBTbmFjaykgPT4gdm9pZDtcbn1cblxuY29uc3QgU25hY2tiYXJDb250ZXh0ID0gY3JlYXRlQ29udGV4dDxTbmFja0NvbnRleHQgfCB1bmRlZmluZWQ+KHVuZGVmaW5lZCk7XG5cbmV4cG9ydCBjb25zdCB1c2VTbmFjayA9ICgpID0+IHtcbiAgY29uc3QgY29udGV4dCA9IHVzZUNvbnRleHQoU25hY2tiYXJDb250ZXh0KTtcbiAgaWYgKCFjb250ZXh0KSB7XG4gICAgdGhyb3cgbmV3IEVycm9yKFwidXNlU25hY2sgY2FuIG9ubHkgYmUgdXNlZCB3aXRoaW4gYSBTbmFja2JhclByb3ZpZGVyIVwiKTtcbiAgfVxuXG4gIHJldHVybiBjb250ZXh0O1xufTtcblxuaW50ZXJmYWNlIFByb3BzIHtcbiAgY2hpbGRyZW46IFJlYWN0Tm9kZTtcbn1cblxuZXhwb3J0IGNvbnN0IFNuYWNrYmFyUHJvdmlkZXIgPSAoeyBjaGlsZHJlbiB9OiBQcm9wcykgPT4ge1xuICBjb25zdCBbc25hY2tzLCBzZXRTbmFja3NdID0gdXNlU3RhdGU8U25hY2tbXT4oW10pO1xuXG4gIGNvbnN0IGFkZFNuYWNrID0gdXNlQ2FsbGJhY2soKHNuYWNrOiBTbmFjaykgPT4ge1xuICAgIHNldFNuYWNrcygocHJldikgPT4gcHJldi5maWx0ZXIoKHMpID0+IHMuaWQgIT09IHNuYWNrLmlkKS5jb25jYXQoc25hY2spKTtcbiAgfSwgW10pO1xuXG4gIGNvbnN0IHJlbW92ZVNuYWNrID0gdXNlQ2FsbGJhY2soKHNuYWNrSWQ6IHN0cmluZykgPT4ge1xuICAgIHNldFNuYWNrcygocHJldikgPT4gcHJldi5maWx0ZXIoKHsgaWQgfSkgPT4gc25hY2tJZCAhPT0gaWQpKTtcbiAgfSwgW10pO1xuXG4gIGNvbnN0IGNsb3NlU25hY2sgPSB1c2VDYWxsYmFjaygoc25hY2s6IFNuYWNrKSA9PiB7XG4gICAgc2V0U25hY2tzKChwcmV2KSA9PiBwcmV2Lm1hcCgocCkgPT4gKHAuaWQgPT09IHNuYWNrLmlkID8geyAuLi5wLCBkdXJhdGlvbjogMCB9IDogcCkpKTtcbiAgfSwgW10pO1xuXG4gIGNvbnN0IGNsZWFyU25hY2tzID0gdXNlQ2FsbGJhY2soKCkgPT4gc2V0U25hY2tzKFtdKSwgW10pO1xuXG4gIGNvbnN0IHZhbHVlID0gdXNlTWVtbyhcbiAgICAoKSA9PiAoeyBhZGRTbmFjaywgcmVtb3ZlU25hY2ssIGNsZWFyU25hY2tzLCBjbG9zZVNuYWNrIH0pLFxuICAgIFthZGRTbmFjaywgcmVtb3ZlU25hY2ssIGNsZWFyU25hY2tzLCBjbG9zZVNuYWNrXSxcbiAgKTtcblxuICByZXR1cm4gKFxuICAgIDxTbmFja2JhckNvbnRleHQuUHJvdmlkZXIgdmFsdWU9e3ZhbHVlfT5cbiAgICAgIHtjaGlsZHJlbn1cbiAgICAgIDxTbmFja2JhckNvbnRhaW5lciBzbmFja3M9e3NuYWNrc30gLz5cbiAgICA8L1NuYWNrYmFyQ29udGV4dC5Qcm92aWRlcj5cbiAgKTtcbn07XG5cbmludGVyZmFjZSBCYXNlU25hY2tQcm9wcyBleHRlbmRzIFNuYWNrIHtcbiAgY2hpbGRyZW46IFJlYWN0Tm9kZTtcbn1cblxuaW50ZXJmYWNlIEJhc2VTbmFja0NvbnRhaW5lclByb3BzIHtcbiAgZXhwaXJlZDogYm9vbGVhbjtcbn1cblxuY29uc3Qgc25hY2tiYXJJbkFuaW1hdGlvbiA9IGtleWZyYW1lcyh7XG4gIFwiMCVcIjogeyB0cmFuc2Zvcm06IGB0cmFuc2xhdGVZKCR7c3BhY2luZy5tZWRpdW19KWAsIG9wYWNpdHk6IDAgfSxcbiAgXCIxMDAlXCI6IHsgb3BhY2l0eTogMSB9LFxufSk7XG5cbmNvbnN0IHNuYWNrYmFyT3V0QW5pbWF0aW9uID0ga2V5ZnJhbWVzKHtcbiAgXCIwJVwiOiB7IG9wYWNpdHk6IDEgfSxcbiAgXCIxMDAlXCI6IHsgdHJhbnNmb3JtOiBgdHJhbnNsYXRlWSgke3NwYWNpbmcubWVkaXVtfSlgLCBvcGFjaXR5OiAwIH0sXG59KTtcblxuY29uc3QgQmFzZVNuYWNrQ29udGFpbmVyID0gc3R5bGVkLmxpPEJhc2VTbmFja0NvbnRhaW5lclByb3BzPmBcbiAgZGlzcGxheTogZmxleDtcbiAgZmxleC1kaXJlY3Rpb246IGNvbHVtbjtcbiAgYWxpZ24taXRlbXM6IGNlbnRlcjtcbiAgYW5pbWF0aW9uOiAkeyhwKSA9PiAocC5leHBpcmVkID8gc25hY2tiYXJPdXRBbmltYXRpb24gOiBzbmFja2JhckluQW5pbWF0aW9uKX0gMjAwbXMgZWFzZS1pbi1vdXQ7XG4gIGFuaW1hdGlvbi1maWxsLW1vZGU6IGZvcndhcmRzO1xuYDtcblxuZXhwb3J0IGNvbnN0IEJhc2VTbmFjayA9ICh7IGR1cmF0aW9uID0gNTAwMCwgaWQsIGNoaWxkcmVuIH06IEJhc2VTbmFja1Byb3BzKSA9PiB7XG4gIGNvbnN0IHsgcmVtb3ZlU25hY2sgfSA9IHVzZVNuYWNrKCk7XG4gIGNvbnN0IFtleHBpcmVkLCBzZXRFeHBpcmVkXSA9IHVzZVN0YXRlKGZhbHNlKTtcblxuICB1c2VFZmZlY3QoKCkgPT4ge1xuICAgIGNvbnN0IHRpbWVvdXQgPSBzZXRUaW1lb3V0KCgpID0+IHNldEV4cGlyZWQodHJ1ZSksIGR1cmF0aW9uKTtcbiAgICByZXR1cm4gKCkgPT4gY2xlYXJUaW1lb3V0KHRpbWVvdXQpO1xuICB9LCBbZHVyYXRpb25dKTtcblxuICByZXR1cm4gKFxuICAgIDxCYXNlU25hY2tDb250YWluZXIgZXhwaXJlZD17ZXhwaXJlZH0gb25BbmltYXRpb25FbmQ9eygpID0+IGV4cGlyZWQgJiYgcmVtb3ZlU25hY2soaWQpfT5cbiAgICAgIHtjaGlsZHJlbn1cbiAgICA8L0Jhc2VTbmFja0NvbnRhaW5lcj5cbiAgKTtcbn07XG5cbmludGVyZmFjZSBTbmFja2JhckNvbnRhaW5lclByb3BzIHtcbiAgc25hY2tzOiBTbmFja1tdO1xufVxuXG5jb25zdCBTdHlsZWRTbmFja0xpc3QgPSBzdHlsZWQudWxgXG4gIHBvc2l0aW9uOiBmaXhlZDtcbiAgei1pbmRleDogJHtzdGFja09yZGVyLnRvYXN0fTtcbiAgZGlzcGxheTogZmxleDtcbiAgZmxleC1kaXJlY3Rpb246IGNvbHVtbjtcbiAgcG9pbnRlci1ldmVudHM6IG5vbmU7XG4gIHBhZGRpbmc6IDA7XG4gIGJvdHRvbTogZW52KHNhZmUtYXJlYS1pbnNldC1ib3R0b20sIDQwcHgpO1xuICByaWdodDogZW52KHNhZmUtYXJlYS1pbnNldC1yaWdodCwgMHB4KTtcbiAgbGVmdDogZW52KHNhZmUtYXJlYS1pbnNldC1sZWZ0LCAwcHgpO1xuYDtcblxuY29uc3QgU25hY2tiYXJDb250YWluZXIgPSAoeyBzbmFja3MgfTogU25hY2tiYXJDb250YWluZXJQcm9wcykgPT4ge1xuICByZXR1cm4gKFxuICAgIDxTdHlsZWRTbmFja0xpc3QgYXJpYS1saXZlPVwicG9saXRlXCIgcm9sZT1cInJlZ2lvblwiPlxuICAgICAge3NuYWNrcy5tYXAoKHNuYWNrKSA9PiAoXG4gICAgICAgIDxCYXNlU25hY2sga2V5PXtzbmFjay5pZH0gey4uLnNuYWNrfT5cbiAgICAgICAgICB7c25hY2sucmVuZGVyPy4oc25hY2suaWQpID8/IDxEZWZhdWx0U25hY2sgey4uLnNuYWNrfSAvPn1cbiAgICAgICAgPC9CYXNlU25hY2s+XG4gICAgICApKX1cbiAgICA8L1N0eWxlZFNuYWNrTGlzdD5cbiAgKTtcbn07XG5cbmV4cG9ydCBkZWZhdWx0IFNuYWNrYmFyUHJvdmlkZXI7XG4iXX0= */"));
|
|
115
|
-
const SnackbarContainer = _ref4 => {
|
|
116
|
-
let {
|
|
117
|
-
snacks
|
|
118
|
-
} = _ref4;
|
|
119
|
-
return /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledSnackList, {
|
|
120
|
-
"aria-live": "polite",
|
|
121
|
-
role: "region",
|
|
122
|
-
children: snacks.map(snack => /*#__PURE__*/(0, _jsxRuntime.jsx)(BaseSnack, {
|
|
123
|
-
...snack,
|
|
124
|
-
children: snack.render?.(snack.id) ?? /*#__PURE__*/(0, _jsxRuntime.jsx)(_DefaultSnackbar.default, {
|
|
125
|
-
...snack
|
|
126
|
-
})
|
|
127
|
-
}, snack.id))
|
|
128
|
-
});
|
|
129
|
-
};
|
|
130
|
-
var _default = exports.default = SnackbarProvider;
|
package/lib/SnackBar/index.d.ts
DELETED
|
@@ -1,10 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Copyright (c) 2022-present, NDLA.
|
|
3
|
-
*
|
|
4
|
-
* This source code is licensed under the GPLv3 license found in the
|
|
5
|
-
* LICENSE file in the root directory of this source tree.
|
|
6
|
-
*
|
|
7
|
-
*/
|
|
8
|
-
export type { Snack, SnackContext } from "./SnackbarProvider";
|
|
9
|
-
export { SnackbarProvider, useSnack, BaseSnack } from "./SnackbarProvider";
|
|
10
|
-
export { default as DefaultSnackbar } from "./DefaultSnackbar";
|
package/lib/SnackBar/index.js
DELETED
|
@@ -1,32 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
Object.defineProperty(exports, "BaseSnack", {
|
|
7
|
-
enumerable: true,
|
|
8
|
-
get: function () {
|
|
9
|
-
return _SnackbarProvider.BaseSnack;
|
|
10
|
-
}
|
|
11
|
-
});
|
|
12
|
-
Object.defineProperty(exports, "DefaultSnackbar", {
|
|
13
|
-
enumerable: true,
|
|
14
|
-
get: function () {
|
|
15
|
-
return _DefaultSnackbar.default;
|
|
16
|
-
}
|
|
17
|
-
});
|
|
18
|
-
Object.defineProperty(exports, "SnackbarProvider", {
|
|
19
|
-
enumerable: true,
|
|
20
|
-
get: function () {
|
|
21
|
-
return _SnackbarProvider.SnackbarProvider;
|
|
22
|
-
}
|
|
23
|
-
});
|
|
24
|
-
Object.defineProperty(exports, "useSnack", {
|
|
25
|
-
enumerable: true,
|
|
26
|
-
get: function () {
|
|
27
|
-
return _SnackbarProvider.useSnack;
|
|
28
|
-
}
|
|
29
|
-
});
|
|
30
|
-
var _SnackbarProvider = require("./SnackbarProvider");
|
|
31
|
-
var _DefaultSnackbar = _interopRequireDefault(require("./DefaultSnackbar"));
|
|
32
|
-
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
@@ -1,62 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Copyright (c) 2022-present, NDLA.
|
|
3
|
-
*
|
|
4
|
-
* This source code is licensed under the GPLv3 license found in the
|
|
5
|
-
* LICENSE file in the root directory of this source tree.
|
|
6
|
-
*
|
|
7
|
-
*/
|
|
8
|
-
|
|
9
|
-
import { useTranslation } from "react-i18next";
|
|
10
|
-
import styled from "@emotion/styled";
|
|
11
|
-
import { IconButtonV2 } from "@ndla/button";
|
|
12
|
-
import { breakpoints, colors, fonts, misc, mq, shadows, spacing } from "@ndla/core";
|
|
13
|
-
import { Cross } from "@ndla/icons/action";
|
|
14
|
-
import { Snack, useSnack } from "./SnackbarProvider";
|
|
15
|
-
|
|
16
|
-
const DefaultSnackContainer = styled.div`
|
|
17
|
-
display: flex;
|
|
18
|
-
gap: ${spacing.small};
|
|
19
|
-
padding: ${spacing.small};
|
|
20
|
-
background-color: ${colors.text.primary};
|
|
21
|
-
color: ${colors.white};
|
|
22
|
-
border-radius: ${misc.borderRadius};
|
|
23
|
-
margin: 0 ${spacing.large};
|
|
24
|
-
pointer-events: all;
|
|
25
|
-
box-shadow: ${shadows.levitate1};
|
|
26
|
-
font-family: ${fonts.sans};
|
|
27
|
-
font-size: 18px;
|
|
28
|
-
align-items: center;
|
|
29
|
-
`;
|
|
30
|
-
|
|
31
|
-
const ButtonWrapper = styled.div`
|
|
32
|
-
${mq.range({ from: breakpoints.tablet })} {
|
|
33
|
-
gap: ${spacing.xxsmall};
|
|
34
|
-
}
|
|
35
|
-
`;
|
|
36
|
-
|
|
37
|
-
const DefaultSnack = (snack: Snack) => {
|
|
38
|
-
const { closable = true, icon } = snack;
|
|
39
|
-
const { t } = useTranslation();
|
|
40
|
-
const { closeSnack } = useSnack();
|
|
41
|
-
return (
|
|
42
|
-
<DefaultSnackContainer>
|
|
43
|
-
{icon}
|
|
44
|
-
{snack.content}
|
|
45
|
-
<ButtonWrapper>
|
|
46
|
-
{closable && (
|
|
47
|
-
<IconButtonV2
|
|
48
|
-
size="xsmall"
|
|
49
|
-
variant="outline"
|
|
50
|
-
colorTheme="greyLighter"
|
|
51
|
-
onClick={() => closeSnack(snack)}
|
|
52
|
-
aria-label={t("snackbar.close")}
|
|
53
|
-
>
|
|
54
|
-
<Cross />
|
|
55
|
-
</IconButtonV2>
|
|
56
|
-
)}
|
|
57
|
-
</ButtonWrapper>
|
|
58
|
-
</DefaultSnackContainer>
|
|
59
|
-
);
|
|
60
|
-
};
|
|
61
|
-
|
|
62
|
-
export default DefaultSnack;
|
|
@@ -1,105 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Copyright (c) 2023-present, NDLA.
|
|
3
|
-
*
|
|
4
|
-
* This source code is licensed under the GPLv3 license found in the
|
|
5
|
-
* LICENSE file in the root directory of this source tree.
|
|
6
|
-
*
|
|
7
|
-
*/
|
|
8
|
-
|
|
9
|
-
import { Meta, StoryObj } from "@storybook/react";
|
|
10
|
-
import { ButtonV2 } from "@ndla/button";
|
|
11
|
-
import { PersonOutlined } from "@ndla/icons/common";
|
|
12
|
-
import { Snack, SnackbarProvider, useSnack } from ".";
|
|
13
|
-
|
|
14
|
-
const SnackComponent = ({ ...args }: Snack) => {
|
|
15
|
-
const { addSnack } = useSnack();
|
|
16
|
-
const onClick = () => {
|
|
17
|
-
addSnack({ ...args });
|
|
18
|
-
};
|
|
19
|
-
|
|
20
|
-
return (
|
|
21
|
-
<ButtonV2 variant="outline" onClick={onClick}>
|
|
22
|
-
Show snack
|
|
23
|
-
</ButtonV2>
|
|
24
|
-
);
|
|
25
|
-
};
|
|
26
|
-
|
|
27
|
-
export default {
|
|
28
|
-
title: "Components/Snack",
|
|
29
|
-
tags: ["autodocs"],
|
|
30
|
-
parameters: {
|
|
31
|
-
inlineStories: true,
|
|
32
|
-
},
|
|
33
|
-
args: {
|
|
34
|
-
content: <span>This is a snack</span>,
|
|
35
|
-
duration: 5000,
|
|
36
|
-
render: undefined,
|
|
37
|
-
id: "default",
|
|
38
|
-
icon: undefined,
|
|
39
|
-
closable: true,
|
|
40
|
-
},
|
|
41
|
-
argTypes: {
|
|
42
|
-
content: {
|
|
43
|
-
control: false,
|
|
44
|
-
description: "Any JSX component, but usually a span-like element",
|
|
45
|
-
},
|
|
46
|
-
render: {
|
|
47
|
-
control: false,
|
|
48
|
-
description: "Replaces the entire snack with a custom render",
|
|
49
|
-
},
|
|
50
|
-
icon: {
|
|
51
|
-
control: false,
|
|
52
|
-
description: "An additional icon to be shown on the left-hand side of the snack",
|
|
53
|
-
},
|
|
54
|
-
},
|
|
55
|
-
decorators: [
|
|
56
|
-
(Story) => (
|
|
57
|
-
<SnackbarProvider>
|
|
58
|
-
<Story />
|
|
59
|
-
</SnackbarProvider>
|
|
60
|
-
),
|
|
61
|
-
],
|
|
62
|
-
render: ({ ...args }) => <SnackComponent {...args} />,
|
|
63
|
-
} as Meta<Snack>;
|
|
64
|
-
|
|
65
|
-
export const Default: StoryObj<Snack> = {};
|
|
66
|
-
|
|
67
|
-
const CustomSnack = (snack: Snack) => {
|
|
68
|
-
const { closeSnack } = useSnack();
|
|
69
|
-
return (
|
|
70
|
-
<div
|
|
71
|
-
style={{
|
|
72
|
-
backgroundColor: "gray",
|
|
73
|
-
zIndex: 1000,
|
|
74
|
-
display: "flex",
|
|
75
|
-
pointerEvents: "all",
|
|
76
|
-
}}
|
|
77
|
-
>
|
|
78
|
-
<p>Custom render!</p>
|
|
79
|
-
<ButtonV2 onClick={() => closeSnack(snack)}>Close</ButtonV2>
|
|
80
|
-
</div>
|
|
81
|
-
);
|
|
82
|
-
};
|
|
83
|
-
|
|
84
|
-
export const WithCustomRender: StoryObj<Snack> = {
|
|
85
|
-
args: {
|
|
86
|
-
id: "customRender",
|
|
87
|
-
content: undefined,
|
|
88
|
-
duration: 2000000,
|
|
89
|
-
render: (id) => <CustomSnack id={id} />,
|
|
90
|
-
},
|
|
91
|
-
};
|
|
92
|
-
|
|
93
|
-
export const NotClosable: StoryObj<Snack> = {
|
|
94
|
-
args: {
|
|
95
|
-
id: "nonClosable",
|
|
96
|
-
closable: false,
|
|
97
|
-
},
|
|
98
|
-
};
|
|
99
|
-
|
|
100
|
-
export const WithIcon: StoryObj<Snack> = {
|
|
101
|
-
args: {
|
|
102
|
-
id: "customIcon",
|
|
103
|
-
icon: <PersonOutlined />,
|
|
104
|
-
},
|
|
105
|
-
};
|
|
@@ -1,146 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Copyright (c) 2022-present, NDLA.
|
|
3
|
-
*
|
|
4
|
-
* This source code is licensed under the GPLv3 license found in the
|
|
5
|
-
* LICENSE file in the root directory of this source tree.
|
|
6
|
-
*
|
|
7
|
-
*/
|
|
8
|
-
|
|
9
|
-
import { useCallback, useMemo, createContext, ReactNode, useState, useContext, useEffect } from "react";
|
|
10
|
-
import { keyframes } from "@emotion/react";
|
|
11
|
-
import styled from "@emotion/styled";
|
|
12
|
-
import { spacing, stackOrder } from "@ndla/core";
|
|
13
|
-
import DefaultSnack from "./DefaultSnackbar";
|
|
14
|
-
|
|
15
|
-
export interface Snack {
|
|
16
|
-
content?: ReactNode;
|
|
17
|
-
duration?: number;
|
|
18
|
-
render?: (id: string, onClose?: () => void) => ReactNode;
|
|
19
|
-
id: string;
|
|
20
|
-
icon?: ReactNode;
|
|
21
|
-
closable?: boolean;
|
|
22
|
-
}
|
|
23
|
-
|
|
24
|
-
export interface SnackContext {
|
|
25
|
-
addSnack: (snack: Snack) => void;
|
|
26
|
-
removeSnack: (id: string) => void;
|
|
27
|
-
clearSnacks: () => void;
|
|
28
|
-
closeSnack: (snack: Snack) => void;
|
|
29
|
-
}
|
|
30
|
-
|
|
31
|
-
const SnackbarContext = createContext<SnackContext | undefined>(undefined);
|
|
32
|
-
|
|
33
|
-
export const useSnack = () => {
|
|
34
|
-
const context = useContext(SnackbarContext);
|
|
35
|
-
if (!context) {
|
|
36
|
-
throw new Error("useSnack can only be used within a SnackbarProvider!");
|
|
37
|
-
}
|
|
38
|
-
|
|
39
|
-
return context;
|
|
40
|
-
};
|
|
41
|
-
|
|
42
|
-
interface Props {
|
|
43
|
-
children: ReactNode;
|
|
44
|
-
}
|
|
45
|
-
|
|
46
|
-
export const SnackbarProvider = ({ children }: Props) => {
|
|
47
|
-
const [snacks, setSnacks] = useState<Snack[]>([]);
|
|
48
|
-
|
|
49
|
-
const addSnack = useCallback((snack: Snack) => {
|
|
50
|
-
setSnacks((prev) => prev.filter((s) => s.id !== snack.id).concat(snack));
|
|
51
|
-
}, []);
|
|
52
|
-
|
|
53
|
-
const removeSnack = useCallback((snackId: string) => {
|
|
54
|
-
setSnacks((prev) => prev.filter(({ id }) => snackId !== id));
|
|
55
|
-
}, []);
|
|
56
|
-
|
|
57
|
-
const closeSnack = useCallback((snack: Snack) => {
|
|
58
|
-
setSnacks((prev) => prev.map((p) => (p.id === snack.id ? { ...p, duration: 0 } : p)));
|
|
59
|
-
}, []);
|
|
60
|
-
|
|
61
|
-
const clearSnacks = useCallback(() => setSnacks([]), []);
|
|
62
|
-
|
|
63
|
-
const value = useMemo(
|
|
64
|
-
() => ({ addSnack, removeSnack, clearSnacks, closeSnack }),
|
|
65
|
-
[addSnack, removeSnack, clearSnacks, closeSnack],
|
|
66
|
-
);
|
|
67
|
-
|
|
68
|
-
return (
|
|
69
|
-
<SnackbarContext.Provider value={value}>
|
|
70
|
-
{children}
|
|
71
|
-
<SnackbarContainer snacks={snacks} />
|
|
72
|
-
</SnackbarContext.Provider>
|
|
73
|
-
);
|
|
74
|
-
};
|
|
75
|
-
|
|
76
|
-
interface BaseSnackProps extends Snack {
|
|
77
|
-
children: ReactNode;
|
|
78
|
-
}
|
|
79
|
-
|
|
80
|
-
interface BaseSnackContainerProps {
|
|
81
|
-
expired: boolean;
|
|
82
|
-
}
|
|
83
|
-
|
|
84
|
-
const snackbarInAnimation = keyframes({
|
|
85
|
-
"0%": { transform: `translateY(${spacing.medium})`, opacity: 0 },
|
|
86
|
-
"100%": { opacity: 1 },
|
|
87
|
-
});
|
|
88
|
-
|
|
89
|
-
const snackbarOutAnimation = keyframes({
|
|
90
|
-
"0%": { opacity: 1 },
|
|
91
|
-
"100%": { transform: `translateY(${spacing.medium})`, opacity: 0 },
|
|
92
|
-
});
|
|
93
|
-
|
|
94
|
-
const BaseSnackContainer = styled.li<BaseSnackContainerProps>`
|
|
95
|
-
display: flex;
|
|
96
|
-
flex-direction: column;
|
|
97
|
-
align-items: center;
|
|
98
|
-
animation: ${(p) => (p.expired ? snackbarOutAnimation : snackbarInAnimation)} 200ms ease-in-out;
|
|
99
|
-
animation-fill-mode: forwards;
|
|
100
|
-
`;
|
|
101
|
-
|
|
102
|
-
export const BaseSnack = ({ duration = 5000, id, children }: BaseSnackProps) => {
|
|
103
|
-
const { removeSnack } = useSnack();
|
|
104
|
-
const [expired, setExpired] = useState(false);
|
|
105
|
-
|
|
106
|
-
useEffect(() => {
|
|
107
|
-
const timeout = setTimeout(() => setExpired(true), duration);
|
|
108
|
-
return () => clearTimeout(timeout);
|
|
109
|
-
}, [duration]);
|
|
110
|
-
|
|
111
|
-
return (
|
|
112
|
-
<BaseSnackContainer expired={expired} onAnimationEnd={() => expired && removeSnack(id)}>
|
|
113
|
-
{children}
|
|
114
|
-
</BaseSnackContainer>
|
|
115
|
-
);
|
|
116
|
-
};
|
|
117
|
-
|
|
118
|
-
interface SnackbarContainerProps {
|
|
119
|
-
snacks: Snack[];
|
|
120
|
-
}
|
|
121
|
-
|
|
122
|
-
const StyledSnackList = styled.ul`
|
|
123
|
-
position: fixed;
|
|
124
|
-
z-index: ${stackOrder.toast};
|
|
125
|
-
display: flex;
|
|
126
|
-
flex-direction: column;
|
|
127
|
-
pointer-events: none;
|
|
128
|
-
padding: 0;
|
|
129
|
-
bottom: env(safe-area-inset-bottom, 40px);
|
|
130
|
-
right: env(safe-area-inset-right, 0px);
|
|
131
|
-
left: env(safe-area-inset-left, 0px);
|
|
132
|
-
`;
|
|
133
|
-
|
|
134
|
-
const SnackbarContainer = ({ snacks }: SnackbarContainerProps) => {
|
|
135
|
-
return (
|
|
136
|
-
<StyledSnackList aria-live="polite" role="region">
|
|
137
|
-
{snacks.map((snack) => (
|
|
138
|
-
<BaseSnack key={snack.id} {...snack}>
|
|
139
|
-
{snack.render?.(snack.id) ?? <DefaultSnack {...snack} />}
|
|
140
|
-
</BaseSnack>
|
|
141
|
-
))}
|
|
142
|
-
</StyledSnackList>
|
|
143
|
-
);
|
|
144
|
-
};
|
|
145
|
-
|
|
146
|
-
export default SnackbarProvider;
|
package/src/SnackBar/index.ts
DELETED
|
@@ -1,11 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Copyright (c) 2022-present, NDLA.
|
|
3
|
-
*
|
|
4
|
-
* This source code is licensed under the GPLv3 license found in the
|
|
5
|
-
* LICENSE file in the root directory of this source tree.
|
|
6
|
-
*
|
|
7
|
-
*/
|
|
8
|
-
|
|
9
|
-
export type { Snack, SnackContext } from "./SnackbarProvider";
|
|
10
|
-
export { SnackbarProvider, useSnack, BaseSnack } from "./SnackbarProvider";
|
|
11
|
-
export { default as DefaultSnackbar } from "./DefaultSnackbar";
|