From 54bdc989987fd13333be0c86aa4f7b33591937fd Mon Sep 17 00:00:00 2001 From: Jarmy123 <36279528+Jarmy123@users.noreply.github.com> Date: Tue, 12 Jul 2022 11:09:38 +0200 Subject: [PATCH] fix: user can use custom component as leftSourceIcon (#149) --- .../default-variants-config/global-config.md | 105 +++++++++++------- .../components/notificationBase.tsx | 9 +- src/defaultConfig/mergeProps.ts | 2 +- src/defaultConfig/types.ts | 2 +- 4 files changed, 71 insertions(+), 47 deletions(-) diff --git a/docs/docs/intro/default-variants-config/global-config.md b/docs/docs/intro/default-variants-config/global-config.md index 1905a98e..5423d2cf 100644 --- a/docs/docs/intro/default-variants-config/global-config.md +++ b/docs/docs/intro/default-variants-config/global-config.md @@ -3,6 +3,7 @@ sidebar_position: 1 --- # 🌍 Global Styles Settings + #### ## 🎨 Default styles settings @@ -10,27 +11,27 @@ sidebar_position: 1 In the default styles settings, we can pass the config that affects all the notifications used in the app. We divide them into: -| Name | Type | Default | Description | -|---------------|---------|---------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| -| darkMode | Boolean | false | If set to `true`, it enables the dark mode for the notification layout | -| globalConfig | Object | - | Inside this object, you can pass the configuration for all notifications used in the app (or the parts wrapped with the `NotificationProvider`) | -| successConfig | Object | - | Inside this object, you can pass the configuration for all success type notifications used in the app (or parts wrapped with the `NotificationProvider`). Here, all params set for the success notifications overwrite the same params set in `globalConfig` | +| Name | Type | Default | Description | +| ------------- | ------- | ------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| darkMode | Boolean | false | If set to `true`, it enables the dark mode for the notification layout | +| globalConfig | Object | - | Inside this object, you can pass the configuration for all notifications used in the app (or the parts wrapped with the `NotificationProvider`) | +| successConfig | Object | - | Inside this object, you can pass the configuration for all success type notifications used in the app (or parts wrapped with the `NotificationProvider`). Here, all params set for the success notifications overwrite the same params set in `globalConfig` | | errorConfig | Object | - | Inside this object, you can pass the configuration for all error type notifications used in the app (or parts wrapped with the `NotificationProvider`). Here, all params set for the error notifications here overwrite the same params set in `globalConfig` | | warningConfig | Object | - | Inside this object, you can pass the configuration for all warning type notifications used in the app (or parts wrapped with the `NotificationProvider`). Here, all params set for the warning notifications here overwrite the same params set in `globalConfig` | -| infoConfig | Object | - | Inside this object, you can pass the configuration for all info type notifications used in the app (or parts wrapped with the `NotificationProvider`). Here, all params set for the info notifications here overwrites the same params set in `globalConfig` | +| infoConfig | Object | - | Inside this object, you can pass the configuration for all info type notifications used in the app (or parts wrapped with the `NotificationProvider`). Here, all params set for the info notifications here overwrites the same params set in `globalConfig` | # ```jsx -const {useNotifications, NotificationsProvider} = createNotifications({ - defaultStylesSettings: { - darkMode: true, - globalConfig: {}, - successConfig: {}, - errorConfig: {}, - warningConfig: {}, - infoConfig: {}, - }, +const { useNotifications, NotificationsProvider } = createNotifications({ + defaultStylesSettings: { + darkMode: true, + globalConfig: {}, + successConfig: {}, + errorConfig: {}, + warningConfig: {}, + infoConfig: {}, + }, }) ``` @@ -38,12 +39,13 @@ const {useNotifications, NotificationsProvider} = createNotifications({ Like we said above - in the config descriptions, `globalConfig` even if is set can be overwritten by the config of the different notifications types (`successConfig` / `errorConfig` / `warningConfig` / `infoConfig`). You can find examples explaining it below, but first, let's find out what exactly, can we set in config objects. + # +
## ⚙ī¸ Style config object - All five configs: - `globalConfig` @@ -53,61 +55,78 @@ All five configs: - `infoConfig` are the objects with the same properties. + # -We can set there: -| Name | Type | Default | Description | -|------------------|---------------------------------------------|--------------------------------------------------------------------------------------------------------------|------------------------------------------------------------------------------------------------------------------------------------------| -| titleSize | Number | `16` | Set font size for the notification title | -| titleColor | String | `'#505050'` (darkMode - false) / `'#FAFAFA'` (darkMode - true) | Set font color for the notification title | -| descriptionSize | Number | `14` | Set font size for the notification description | -| descriptionColor | String | `'#505050'` (darkMode - false) / `'#FAFAFA'` (darkMode - true) | Set font color for the notification description | -| bgColor | String | `'#FFFFFF'` (darkMode - false) / `'#2D2D2D'` (darkMode - true) | Set background color for the notification | -| borderType | `'border'` / `'accent'` / `'no-border'` | `'border'` | Set type of border for the notification ([EXAMPLES](#-border-types-examples)) | -| accentColor | String | `'#00EA33'` (success type) / `'#FC6060'` (error type) / `'#8CACFF'` (warning type) / `'#FFD37D'` (info type) | Set accent color for the notification. The color of the border or the left side accent line | -| borderRadius | Number | `14` | Set border radius for the notification container | -| borderWidth | Number | `1` | Set border width for the notification container | -| multiline | Number | `1` | Set number of visible lines for the notification description | -| defaultIconType | `'color'` / `'monochromatic'` / `'no-icon'` | `'color'` | This props works only with default icons. If you set your own icon it has no effect. ([EXAMPLES](#%EF%B8%8F-default-icon-type-examples)) | -| leftIconSource | ImageSourcePropType | - | Set custom left icon for the notification (in png). For example. `require(../assets/icon.png)` | +We can set there: +| Name | Type | Default | Description | +| ---------------- | ------------------------------------------- | ------------------------------------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------- | +| titleSize | Number | `16` | Set font size for the notification title | +| titleColor | String | `'#505050'` (darkMode - false) / `'#FAFAFA'` (darkMode - true) | Set font color for the notification title | +| descriptionSize | Number | `14` | Set font size for the notification description | +| descriptionColor | String | `'#505050'` (darkMode - false) / `'#FAFAFA'` (darkMode - true) | Set font color for the notification description | +| bgColor | String | `'#FFFFFF'` (darkMode - false) / `'#2D2D2D'` (darkMode - true) | Set background color for the notification | +| borderType | `'border'` / `'accent'` / `'no-border'` | `'border'` | Set type of border for the notification ([EXAMPLES](#-border-types-examples)) | +| accentColor | String | `'#00EA33'` (success type) / `'#FC6060'` (error type) / `'#8CACFF'` (warning type) / `'#FFD37D'` (info type) | Set accent color for the notification. The color of the border or the left side accent line | +| borderRadius | Number | `14` | Set border radius for the notification container | +| borderWidth | Number | `1` | Set border width for the notification container | +| multiline | Number | `1` | Set number of visible lines for the notification description | +| defaultIconType | `'color'` / `'monochromatic'` / `'no-icon'` | `'color'` | This props works only with default icons. If you set your own icon it has no effect. ([EXAMPLES](#%EF%B8%8F-default-icon-type-examples)) | +| leftIconSource | ImageSourcePropType / JSX.Element | - | Set custom left icon for the notification (in png) or as custom component. For example. `require(../assets/icon.png)` / `` | ## + ### đŸ”ŗ Border types examples - `'border'` + # - ![Border](../../../assets/border.png) + +![Border](../../../assets/border.png) - `'accent'` + # - ![Accent](../../../assets/accent.png) + +![Accent](../../../assets/accent.png) - `'no-border'` + # - ![No-border](../../../assets/no-border.png) + +![No-border](../../../assets/no-border.png) ## + ### đŸĩī¸ Default icon type examples - `'color'` + # + ![Color](../../../assets/border.png) - `'monochromatic'` + # + ![Monochromatic](../../../assets/monochromatic.png) - `'monochromatic'` (dark mode) + # + ![Monochromatic-darkMode](../../../assets/monochromatic-darkMode.png) - `'no-icon'` + # -![No-border](../../../assets/no-icon.png) +![No-border](../../../assets/no-icon.png) ## + ## 🏞ī¸ Global styles setting examples Let's start with the basic notification settings with some global style. @@ -159,19 +178,20 @@ export const GlobalConfigExamples = () => { ) } - ``` The effect is visible below: ![No-border](../../../assets/global-example.png) - In `globalConfig` above, we have overwritten all the default values. + # + That means that doesn't matter now if we use `error` or `info` notification. All will now look the same. That is what `globalConfig` does. It overwrites properties for all notifications. If we set there only `borderRadius` property for some value, then only `borderRadius` would be set globally. Default values of all other properties would stay untouched: + # ```jsx @@ -219,7 +239,6 @@ export const GlobalConfigExamples = () => { ) } - ``` ![No-border](../../../assets/rounded-error.png) @@ -230,6 +249,7 @@ export const GlobalConfigExamples = () => { Both notifications - error and success - have their default settings. Only `borderRadius` has been changed for both of them because we did it in `globalConfig`. ## + ### ℹī¸ `successConfig` / `errorConfig` / `warningConfig` / `infoConfig` Those settings work the same as `globalConfig` but for different notification types.
@@ -251,7 +271,7 @@ const { useNotifications, NotificationsProvider } = createNotifications({ }, successConfig: { borderRadius: 10, - } + }, }, }) @@ -288,18 +308,19 @@ export const GlobalConfigExamples = () => { } ``` - ![No-border](../../../assets/rounded-error.png) ![No-border](../../../assets/less-rounded-success.png) - ## So in conclusion - + # + `successConfig` / `errorConfig` / `warningConfig` / `infoConfig` overwrites `globalConfig`, and DEFAULT SETTINGS + # + `globalConfig` overwrites DEFAULT SETTINGS ## - diff --git a/src/defaultConfig/components/notificationBase.tsx b/src/defaultConfig/components/notificationBase.tsx index 5b166887..45727f80 100644 --- a/src/defaultConfig/components/notificationBase.tsx +++ b/src/defaultConfig/components/notificationBase.tsx @@ -23,9 +23,12 @@ export const NotificationBase = (props: NotificationOwnProps & MergedNotificatio : require('../../assets/images/close-darkMode.png') const { remove } = useNotificationController() - const renderLeftIcon = () => ( - - ) + const renderLeftIcon = () => + typeof props.leftIconSource === 'object' ? ( + props.leftIconSource + ) : ( + + ) const renderRightIcon = () => !props.hideCloseButton && ( diff --git a/src/defaultConfig/mergeProps.ts b/src/defaultConfig/mergeProps.ts index a3dab311..b609ea74 100644 --- a/src/defaultConfig/mergeProps.ts +++ b/src/defaultConfig/mergeProps.ts @@ -16,7 +16,7 @@ export const mergeProps = ( defaultGlobalConfig?: NotificationStyleConfig, defaultNotificationTypeConfig?: NotificationStyleConfig ): NotificationProps & MergedNotificationStyleConfig => { - const customIconSource: ImageSourcePropType | undefined = + const customIconSource: ImageSourcePropType | undefined | JSX.Element = props.style?.leftIconSource ?? defaultNotificationTypeConfig?.leftIconSource ?? defaultGlobalConfig?.leftIconSource diff --git a/src/defaultConfig/types.ts b/src/defaultConfig/types.ts index 4274178d..972736c7 100644 --- a/src/defaultConfig/types.ts +++ b/src/defaultConfig/types.ts @@ -36,7 +36,7 @@ export type NotificationStyleConfig = Partial<{ borderWidth: number multiline: number defaultIconType: IconVisualStyle - leftIconSource: ImageSourcePropType + leftIconSource: ImageSourcePropType | JSX.Element borderType: BorderType imageStyle: ImageStyle }>