Skip to content

Commit

Permalink
fix: user can use custom component as leftSourceIcon (#149)
Browse files Browse the repository at this point in the history
  • Loading branch information
@Jarmy123
Jarmy123 committed Jul 12, 2022
1 parent 4517659 commit 54bdc98
Show file tree
Hide file tree
Showing 4 changed files with 71 additions and 47 deletions.
105 changes: 63 additions & 42 deletions docs/docs/intro/default-variants-config/global-config.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,47 +3,49 @@ sidebar_position: 1
---

# 🌍 Global Styles Settings

####

## 🎨 Default styles settings

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: {},
},
})
```

#

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.

#

<br/>

## ⚙️ Style config object


All five configs:

- `globalConfig`
Expand All @@ -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)` / `<CustomIcon name="cross"/>` |

##

### 🔳 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.
Expand Down Expand Up @@ -159,19 +178,20 @@ export const GlobalConfigExamples = () => {
</SafeAreaView>
)
}

```

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
Expand Down Expand Up @@ -219,7 +239,6 @@ export const GlobalConfigExamples = () => {
</SafeAreaView>
)
}

```

![No-border](../../../assets/rounded-error.png)
Expand All @@ -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. <br/>
Expand All @@ -251,7 +271,7 @@ const { useNotifications, NotificationsProvider } = createNotifications({
},
successConfig: {
borderRadius: 10,
}
},
},
})

Expand Down Expand Up @@ -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

##

9 changes: 6 additions & 3 deletions src/defaultConfig/components/notificationBase.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,9 +23,12 @@ export const NotificationBase = (props: NotificationOwnProps & MergedNotificatio
: require('../../assets/images/close-darkMode.png')
const { remove } = useNotificationController()

const renderLeftIcon = () => (
<Image source={props.leftIconSource!} style={{ ...styles.icon, ...props?.imageStyle }} />
)
const renderLeftIcon = () =>
typeof props.leftIconSource === 'object' ? (
props.leftIconSource
) : (
<Image source={props.leftIconSource!} style={{ ...styles.icon, ...props?.imageStyle }} />
)

const renderRightIcon = () =>
!props.hideCloseButton && (
Expand Down
2 changes: 1 addition & 1 deletion src/defaultConfig/mergeProps.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
2 changes: 1 addition & 1 deletion src/defaultConfig/types.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@ export type NotificationStyleConfig = Partial<{
borderWidth: number
multiline: number
defaultIconType: IconVisualStyle
leftIconSource: ImageSourcePropType
leftIconSource: ImageSourcePropType | JSX.Element
borderType: BorderType
imageStyle: ImageStyle
}>
Expand Down

0 comments on commit 54bdc98

Please sign in to comment.