From 54de66794c60f79fab038a61c7038d0f0806369e Mon Sep 17 00:00:00 2001 From: Hossein Dehnokhalaji Date: Fri, 8 May 2020 21:29:23 +0100 Subject: [PATCH] Add SnackbarContainer `containerRoot` class (#263) * Add SnackbarContainer root class * Update CHANGELOG * Minor --- CHANGELOG.md | 1 + src/SnackbarProvider.tsx | 6 +- src/index.d.ts | 1 + src/utils/constants.ts | 3 +- typedoc.json | 140 ++++++++++++++++++++------------------- 5 files changed, 81 insertions(+), 70 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 936d1edd..463c1415 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -8,6 +8,7 @@ Thanks to all contributers who improved notistack by opening an issue/PR. * **@iinitz**: Enforce white text for dark theme [#241](https://github.com/iamhosseindhv/notistack/pull/241) * **@fbarbare**: Let Mat UI handle the font and border-radius [#262](https://github.com/iamhosseindhv/notistack/pull/262) * **@tomohiro-iwana @JuanmaMenendez**: Fix bug with snackbar not being centered on `xs` screens [#232](https://github.com/iamhosseindhv/notistack/issues/232) +* Add new `containerRoot` class to `SnackbarContainer` [#263](https://github.com/iamhosseindhv/notistack/pull/263)
diff --git a/src/SnackbarProvider.tsx b/src/SnackbarProvider.tsx index 97ace8e1..1e565072 100644 --- a/src/SnackbarProvider.tsx +++ b/src/SnackbarProvider.tsx @@ -1,5 +1,6 @@ import React, { Component } from 'react'; import { createPortal } from 'react-dom'; +import clsx from 'clsx'; import SnackbarContext from './SnackbarContext'; import { MESSAGES, REASONS, originKeyExtractor, omitContainerKeys } from './utils/constants'; import SnackbarItem from './SnackbarItem'; @@ -278,7 +279,10 @@ class SnackbarProvider extends Component { key={origin} dense={dense} anchorOrigin={snacks[0].anchorOrigin} - className={classes[`containerAnchorOrigin${origin}` as ContainerClassKey]} + className={clsx( + classes.containerRoot, + classes[`containerAnchorOrigin${origin}` as ContainerClassKey], + )} > {snacks.map(snack => ( void; export type ContainerClassKey = + | 'containerRoot' | 'containerAnchorOriginTopCenter' | 'containerAnchorOriginBottomCenter' | 'containerAnchorOriginTopRight' diff --git a/src/utils/constants.ts b/src/utils/constants.ts index 3f960d50..d45a812c 100644 --- a/src/utils/constants.ts +++ b/src/utils/constants.ts @@ -17,6 +17,7 @@ export const allClasses: { anchorOriginBottomLeft: {}, }, container: { + containerRoot: {}, containerAnchorOriginTopCenter: {}, containerAnchorOriginBottomCenter: {}, containerAnchorOriginTopRight: {}, @@ -44,7 +45,7 @@ export const originKeyExtractor = (anchor: Snack['anchorOrigin']): string => ( /** * Omit SnackbarContainer class keys that are not needed for SnackbarItem */ -export const omitContainerKeys = (classes: SnackbarProviderProps['classes'] = {}): SnackbarItemProps['classes'] => ( +export const omitContainerKeys = (classes: SnackbarProviderProps['classes']): SnackbarItemProps['classes'] => ( // @ts-ignore Object.keys(classes).filter(key => !allClasses.container[key]).reduce((obj, key) => ({ ...obj, [key]: classes[key] }), {}) ); diff --git a/typedoc.json b/typedoc.json index 15f5f807..5154eab4 100644 --- a/typedoc.json +++ b/typedoc.json @@ -28,7 +28,7 @@ "sources": [ { "fileName": "src/index.d.ts", - "line": 51, + "line": 52, "character": 11 } ], @@ -51,7 +51,7 @@ "sources": [ { "fileName": "src/index.d.ts", - "line": 55, + "line": 56, "character": 9 } ], @@ -74,7 +74,7 @@ "sources": [ { "fileName": "src/index.d.ts", - "line": 67, + "line": 68, "character": 8 } ], @@ -97,7 +97,7 @@ "sources": [ { "fileName": "src/index.d.ts", - "line": 59, + "line": 60, "character": 11 } ], @@ -120,7 +120,7 @@ "sources": [ { "fileName": "src/index.d.ts", - "line": 63, + "line": 64, "character": 11 } ], @@ -146,7 +146,7 @@ "sources": [ { "fileName": "src/index.d.ts", - "line": 47, + "line": 48, "character": 28 } ] @@ -183,7 +183,7 @@ "sources": [ { "fileName": "src/index.d.ts", - "line": 200, + "line": 201, "character": 10 } ], @@ -220,7 +220,7 @@ "sources": [ { "fileName": "src/index.d.ts", - "line": 195, + "line": 196, "character": 11 } ], @@ -256,7 +256,7 @@ "sources": [ { "fileName": "src/index.d.ts", - "line": 211, + "line": 212, "character": 7 } ], @@ -287,7 +287,7 @@ "sources": [ { "fileName": "src/index.d.ts", - "line": 216, + "line": 217, "character": 11 } ], @@ -330,7 +330,7 @@ "sources": [ { "fileName": "src/index.d.ts", - "line": 190, + "line": 191, "character": 20 } ], @@ -378,7 +378,7 @@ "sources": [ { "fileName": "src/index.d.ts", - "line": 185, + "line": 186, "character": 11 } ], @@ -411,7 +411,7 @@ "sources": [ { "fileName": "src/index.d.ts", - "line": 206, + "line": 207, "character": 30 } ], @@ -443,7 +443,7 @@ "sources": [ { "fileName": "src/index.d.ts", - "line": 262, + "line": 263, "character": 17 } ], @@ -492,7 +492,7 @@ "sources": [ { "fileName": "src/index.d.ts", - "line": 262, + "line": 263, "character": 18 } ] @@ -510,7 +510,7 @@ "sources": [ { "fileName": "src/index.d.ts", - "line": 261, + "line": 262, "character": 19 } ], @@ -574,7 +574,7 @@ "sources": [ { "fileName": "src/index.d.ts", - "line": 261, + "line": 262, "character": 20 } ] @@ -595,7 +595,7 @@ "sources": [ { "fileName": "src/index.d.ts", - "line": 260, + "line": 261, "character": 32 } ] @@ -632,7 +632,7 @@ "sources": [ { "fileName": "src/index.d.ts", - "line": 200, + "line": 201, "character": 10 } ], @@ -664,7 +664,7 @@ "sources": [ { "fileName": "src/index.d.ts", - "line": 195, + "line": 196, "character": 11 } ], @@ -695,7 +695,7 @@ "sources": [ { "fileName": "src/index.d.ts", - "line": 190, + "line": 191, "character": 20 } ], @@ -738,7 +738,7 @@ "sources": [ { "fileName": "src/index.d.ts", - "line": 185, + "line": 186, "character": 11 } ], @@ -764,7 +764,7 @@ "sources": [ { "fileName": "src/index.d.ts", - "line": 179, + "line": 180, "character": 28 } ], @@ -782,7 +782,7 @@ "sources": [ { "fileName": "src/index.d.ts", - "line": 179, + "line": 180, "character": 36 } ] @@ -801,7 +801,7 @@ "sources": [ { "fileName": "src/index.d.ts", - "line": 179, + "line": 180, "character": 68 } ] @@ -841,7 +841,7 @@ "sources": [ { "fileName": "src/index.d.ts", - "line": 44, + "line": 45, "character": 14 } ], @@ -874,7 +874,7 @@ "sources": [ { "fileName": "src/index.d.ts", - "line": 43, + "line": 44, "character": 12 } ], @@ -906,7 +906,7 @@ "sources": [ { "fileName": "src/index.d.ts", - "line": 42, + "line": 43, "character": 31 } ] @@ -942,7 +942,7 @@ "sources": [ { "fileName": "src/index.d.ts", - "line": 155, + "line": 156, "character": 23 } ], @@ -972,7 +972,7 @@ "sources": [ { "fileName": "src/index.d.ts", - "line": 173, + "line": 174, "character": 19 } ], @@ -1003,7 +1003,7 @@ "sources": [ { "fileName": "src/index.d.ts", - "line": 119, + "line": 120, "character": 16 } ], @@ -1034,7 +1034,7 @@ "sources": [ { "fileName": "src/index.d.ts", - "line": 127, + "line": 128, "character": 20 } ], @@ -1156,7 +1156,7 @@ "sources": [ { "fileName": "src/index.d.ts", - "line": 142, + "line": 143, "character": 29 } ], @@ -1325,7 +1325,7 @@ "sources": [ { "fileName": "src/index.d.ts", - "line": 150, + "line": 151, "character": 22 } ], @@ -1390,7 +1390,7 @@ "sources": [ { "fileName": "src/index.d.ts", - "line": 169, + "line": 170, "character": 22 } ], @@ -1424,7 +1424,7 @@ "sources": [ { "fileName": "src/index.d.ts", - "line": 169, + "line": 170, "character": 42 } ], @@ -1454,7 +1454,7 @@ "sources": [ { "fileName": "src/index.d.ts", - "line": 169, + "line": 170, "character": 58 } ], @@ -1484,7 +1484,7 @@ "sources": [ { "fileName": "src/index.d.ts", - "line": 169, + "line": 170, "character": 73 } ], @@ -1517,7 +1517,7 @@ "sources": [ { "fileName": "src/index.d.ts", - "line": 169, + "line": 170, "character": 33 } ] @@ -1550,7 +1550,7 @@ "sources": [ { "fileName": "src/index.d.ts", - "line": 114, + "line": 115, "character": 30 } ], @@ -1812,7 +1812,7 @@ "sources": [ { "fileName": "src/index.d.ts", - "line": 200, + "line": 201, "character": 10 } ], @@ -1841,7 +1841,7 @@ "sources": [ { "fileName": "src/index.d.ts", - "line": 228, + "line": 229, "character": 12 } ], @@ -1877,7 +1877,7 @@ "sources": [ { "fileName": "src/index.d.ts", - "line": 251, + "line": 252, "character": 11 } ], @@ -1922,7 +1922,7 @@ "sources": [ { "fileName": "src/index.d.ts", - "line": 195, + "line": 196, "character": 11 } ], @@ -1958,7 +1958,7 @@ "sources": [ { "fileName": "src/index.d.ts", - "line": 233, + "line": 234, "character": 9 } ], @@ -1995,7 +1995,7 @@ "sources": [ { "fileName": "src/index.d.ts", - "line": 247, + "line": 248, "character": 11 } ], @@ -2025,7 +2025,7 @@ "sources": [ { "fileName": "src/index.d.ts", - "line": 243, + "line": 244, "character": 19 } ], @@ -2062,7 +2062,7 @@ "sources": [ { "fileName": "src/index.d.ts", - "line": 255, + "line": 256, "character": 15 } ], @@ -2099,7 +2099,7 @@ "sources": [ { "fileName": "src/index.d.ts", - "line": 238, + "line": 239, "character": 12 } ], @@ -2138,7 +2138,7 @@ "sources": [ { "fileName": "src/index.d.ts", - "line": 190, + "line": 191, "character": 20 } ], @@ -2186,7 +2186,7 @@ "sources": [ { "fileName": "src/index.d.ts", - "line": 185, + "line": 186, "character": 11 } ], @@ -2224,7 +2224,7 @@ "sources": [ { "fileName": "src/index.d.ts", - "line": 223, + "line": 224, "character": 38 } ], @@ -2277,7 +2277,7 @@ "sources": [ { "fileName": "src/index.d.ts", - "line": 84, + "line": 85, "character": 11 } ], @@ -2301,7 +2301,7 @@ "sources": [ { "fileName": "src/index.d.ts", - "line": 88, + "line": 89, "character": 11 } ], @@ -2325,7 +2325,7 @@ "sources": [ { "fileName": "src/index.d.ts", - "line": 96, + "line": 97, "character": 13 } ], @@ -2349,7 +2349,7 @@ "sources": [ { "fileName": "src/index.d.ts", - "line": 92, + "line": 93, "character": 14 } ], @@ -2373,7 +2373,7 @@ "sources": [ { "fileName": "src/index.d.ts", - "line": 100, + "line": 101, "character": 10 } ], @@ -2397,7 +2397,7 @@ "sources": [ { "fileName": "src/index.d.ts", - "line": 108, + "line": 109, "character": 12 } ], @@ -2421,7 +2421,7 @@ "sources": [ { "fileName": "src/index.d.ts", - "line": 104, + "line": 105, "character": 13 } ], @@ -2450,7 +2450,7 @@ "sources": [ { "fileName": "src/index.d.ts", - "line": 73, + "line": 74, "character": 39 } ] @@ -2552,7 +2552,7 @@ "sources": [ { "fileName": "src/index.d.ts", - "line": 40, + "line": 41, "character": 28 } ], @@ -2594,6 +2594,10 @@ "type": { "type": "union", "types": [ + { + "type": "stringLiteral", + "value": "containerRoot" + }, { "type": "stringLiteral", "value": "containerAnchorOriginTopCenter" @@ -3490,7 +3494,7 @@ "sources": [ { "fileName": "src/index.d.ts", - "line": 39, + "line": 40, "character": 27 } ], @@ -3568,7 +3572,7 @@ "sources": [ { "fileName": "src/index.d.ts", - "line": 272, + "line": 273, "character": 29 } ], @@ -3590,7 +3594,7 @@ "sources": [ { "fileName": "src/index.d.ts", - "line": 258, + "line": 259, "character": 29 } ], @@ -3633,7 +3637,7 @@ "sources": [ { "fileName": "src/index.d.ts", - "line": 269, + "line": 270, "character": 27 } ] @@ -3753,7 +3757,7 @@ "sources": [ { "fileName": "src/index.d.ts", - "line": 266, + "line": 267, "character": 77 } ], @@ -3786,7 +3790,7 @@ "sources": [ { "fileName": "src/index.d.ts", - "line": 266, + "line": 267, "character": 58 } ] @@ -3799,7 +3803,7 @@ "sources": [ { "fileName": "src/index.d.ts", - "line": 265, + "line": 266, "character": 28 } ]