Skip to content

Commit

Permalink
[docs] Migrate notifications demos
Browse files Browse the repository at this point in the history
  • Loading branch information
rtivital committed Jan 30, 2022
1 parent 798ab51 commit 74db653
Show file tree
Hide file tree
Showing 3 changed files with 11 additions and 12 deletions.
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import React from 'react';
import { Paper, createStyles } from '@mantine/core';
import { Prism } from '@mantine/prism';
import * as NotificationDemos from '@demos/notifications';
import { NotificationsDemos } from '@mantine/demos';
import { Demo } from '@mantine/ds';

const code = `import { Button } from '@mantine/core';
Expand Down Expand Up @@ -41,7 +41,7 @@ export function NotificationsDemo() {
const { classes } = useStyles();
return (
<Paper shadow="md" padding={30} radius="md">
<Demo data={NotificationDemos.root} demoProps={{ inline: true }} />
<Demo data={NotificationsDemos.root} demoProps={{ inline: true }} />
<Prism noCopy language="tsx" className={classes.prism} mt="xl">
{code}
</Prism>
Expand Down
2 changes: 1 addition & 1 deletion docs/src/docs/hooks/use-queue.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ docs: 'hooks/use-queue.mdx'
source: 'mantine-hooks/src/use-queue/use-queue.ts'
---

import * as NotificationsDemos from '@demos/notifications';
import { NotificationsDemos } from '@mantine/demos';

## Usage

Expand Down
17 changes: 8 additions & 9 deletions docs/src/docs/others/notifications.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -13,8 +13,7 @@ installation: '@mantine/notifications'
license: MIT
---

import * as MantineNotificationsDemos from '@demos/notifications';
import { NotificationDemos } from '@mantine/demos';
import { NotificationDemos, NotificationsDemos } from '@mantine/demos';

## Installation

Expand All @@ -34,7 +33,7 @@ yarn add @mantine/notifications @mantine/core @mantine/hooks

## Demo

<Demo data={MantineNotificationsDemos.root} />
<Demo data={NotificationsDemos.root} />

## Usage

Expand All @@ -57,7 +56,7 @@ function YourApp() {

Use use-notifications hook at any place in your application:

<Demo data={MantineNotificationsDemos.base} />
<Demo data={NotificationsDemos.base} />

## use-notifications hook

Expand Down Expand Up @@ -166,7 +165,7 @@ You can limit maximum amount of notifications that can be displayed by setting
All notifications added after limit was reached will be added into queue
and displayed when notification from current state is closed.

<Demo data={MantineNotificationsDemos.limit} />
<Demo data={NotificationsDemos.limit} />

## Remove notifications from state and queue

Expand All @@ -182,13 +181,13 @@ notifications.hideNotification(id);
Use `cleanQueue` handler to remove all notifications that are not currently displayed and
`clean` handler to remove all notifications from state and queue:

<Demo data={MantineNotificationsDemos.clean} />
<Demo data={NotificationsDemos.clean} />

## Update notification

showNotification handler returns notification id, you can use it to update notification:

<Demo data={MantineNotificationsDemos.update} />
<Demo data={NotificationsDemos.update} />

## Auto close

Expand Down Expand Up @@ -218,11 +217,11 @@ notifications.updateNotification('hello', {

showNotification and updateNotification have higher priority.

<Demo data={MantineNotificationsDemos.autoclose} />
<Demo data={NotificationsDemos.autoclose} />

## React node in notification message

You can render any react node in notification message, for example, input or button.
Combine this option with other settings to achieve the desired behavior:

<Demo data={MantineNotificationsDemos.interactive} />
<Demo data={NotificationsDemos.interactive} />

0 comments on commit 74db653

Please sign in to comment.