Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: user can use custom component as leftSourceIcon #149

Merged
merged 2 commits into from
Jul 12, 2022
Merged

fix: user can use custom component as leftSourceIcon #149

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
3329eaa
customSourceIcon addition
Jarmy123 Jun 14, 2022
6e11993
Lint
Jarmy123 Jun 14, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
105 changes: 63 additions & 42 deletions docs/docs/intro/default-variants-config/global-config.md
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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