Skip to content

Commit

Permalink
feat(Toaster): add lifecircle callbacks
Browse files Browse the repository at this point in the history
  • Loading branch information
@oynikishin
oynikishin committed Dec 28, 2022
1 parent 3e215cc commit dc6a46b
Show file tree
Hide file tree
Showing 3 changed files with 39 additions and 11 deletions.
24 changes: 13 additions & 11 deletions src/components/Toaster/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -90,17 +90,19 @@ On initialization it is possible to pass className, that will be assigned to dom

Accepts argument `toastOptions` with ongoing notification details:

| Parameter | Type | Required | Default | Description |
| :-------------- | :-------------- | :------- | :---------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| name | `string` | yes | | Notification unique name. Notifications with same names collapse into one |
| title | `string` | yes | | Notification title |
| className | `string` | | | CSS-class |
| allowAutoHiding | `boolean` | | `true` | Configuration that manages notification automatic hiding |
| timeout | `number` | | 5000 | Time (in milliseconds)after which the notification will hide |
| content | `node` | | `undefined` | Notification content. [Anything that can be rendered: numbers, strings, elements or an array](https://reactjs.org/docs/typechecking-with-proptypes.html#proptypes) |
| type | `string` | | `undefined` | Notification type. Possible values: `error`, `success`. If `type` is set, icon (success/error) will be added into notification title. _By default there is no icon_ |
| isClosable | `boolean` | | `true` | Configuration that manages visibility of cross icon, which allows to close notification |
| actions | `ToastAction[]` | | `undefined` | Array of [actions](./types.ts#L9) which displays after `content` |
| Parameter | Type | Required | Default | Description |
| :-------------- | :----------------------- | :------- | :---------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------ | --- |
| name | `string` | yes | | Notification unique name. Notifications with same names collapse into one |
| title | `string` | yes | | Notification title |
| className | `string` | | | CSS-class |
| allowAutoHiding | `boolean` | | `true` | Configuration that manages notification automatic hiding |
| timeout | `number` | | 5000 | Time (in milliseconds)after which the notification will hide |
| content | `node` | | `undefined` | Notification content. [Anything that can be rendered: numbers, strings, elements or an array](https://reactjs.org/docs/typechecking-with-proptypes.html#proptypes) |
| type | `string` | | `undefined` | Notification type. Possible values: `error`, `success`. If `type` is set, icon (success/error) will be added into notification title. _By default there is no icon_ |
| isClosable | `boolean` | | `true` | Configuration that manages visibility of cross icon, which allows to close notification |
| actions | `ToastAction[]` | | `undefined` | Array of [actions](./types.ts#L9) which displays after `content` |
| onMount | `ToastLifecycleCallback` | | `undefined` | Callback. Fired when corresponding toast component mount |
| onUnmount | `ToastLifecycleCallback` | | `undefined` | Callback. Fired when corresponding toast component unmount | |

Every `action` is an object with following parameters:

Expand Down
13 changes: 13 additions & 0 deletions src/components/Toaster/Toast/Toast.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -176,6 +176,8 @@ export function Toast(props: ToastUnitedProps) {
title,
className,
type,
onMount,
onUnmount,
allowAutoHiding = true,
isClosable = true,
isOverride = false,
Expand All @@ -202,6 +204,17 @@ export function Toast(props: ToastUnitedProps) {
[type || 'default']: true,
};

React.useEffect(() => {
if (onMount && heightProps.ref.current) {
onMount({props, element: heightProps.ref.current});
}
return () => {
if (onUnmount && heightProps.ref.current) {
onUnmount({props, element: heightProps.ref.current});
}
};
}, []);

return (
<div
className={b(mods, className)}
Expand Down
13 changes: 13 additions & 0 deletions src/components/Toaster/types.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,13 @@ export type ToastAction = {
removeAfterClick?: boolean;
};

export interface ToastLifecycleArgs {
element: HTMLDivElement;
props: ToastProps;
}

export type ToastLifecycleCallback = (args: ToastLifecycleArgs) => void;

export type ToastProps = {
name: string;
title?: string;
Expand All @@ -29,6 +36,12 @@ export type ToastProps = {
isClosable?: boolean;
isOverride?: boolean;
actions?: ToastAction[];

/** Callback. Fired when corresponding toast component mount */
onMount?: ToastLifecycleCallback;

/** Callback. Fired when corresponding toast component unmount */
onUnmount?: ToastLifecycleCallback;
};

export type InternalToastProps = ToastProps & {
Expand Down

0 comments on commit dc6a46b

Please sign in to comment.