Skip to content

Commit

Permalink
feature: custom cn function (#310)
Browse files Browse the repository at this point in the history
  • Loading branch information
@jzxhuang
jzxhuang authored Feb 6, 2024
1 parent 0c8ce18 commit d39170f
Show file tree
Hide file tree
Showing 3 changed files with 30 additions and 22 deletions.
13 changes: 8 additions & 5 deletions src/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ const SWIPE_THRESHOLD = 20;

const TIME_BEFORE_UNMOUNT = 200;

function cn(...classes: (string | undefined)[]) {
function _cn(...classes: (string | undefined)[]) {
return classes.filter(Boolean).join(' ');
}

Expand Down Expand Up @@ -60,6 +60,7 @@ const Toast = (props: ToastProps) => {
icons,
closeButtonAriaLabel = 'Close toast',
pauseWhenPageIsHidden,
cn,
} = props;
const [mounted, setMounted] = React.useState(false);
const [removed, setRemoved] = React.useState(false);
Expand Down Expand Up @@ -457,6 +458,7 @@ const Toaster = (props: ToasterProps) => {
icons,
containerAriaLabel = 'Notifications',
pauseWhenPageIsHidden,
cn = _cn,
} = props;
const [toasts, setToasts] = React.useState<ToastT[]>([]);
const possiblePositions = React.useMemo(() => {
Expand All @@ -471,10 +473,10 @@ const Toaster = (props: ToasterProps) => {
theme !== 'system'
? theme
: typeof window !== 'undefined'
? window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches
? 'dark'
: 'light'
: 'light',
? window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches
? 'dark'
: 'light'
: 'light',
);

const listRef = React.useRef<HTMLOListElement>(null);
Expand Down Expand Up @@ -679,6 +681,7 @@ const Toaster = (props: ToasterProps) => {
loadingIcon={loadingIcon}
expanded={expanded}
pauseWhenPageIsHidden={pauseWhenPageIsHidden}
cn={cn}
/>
))}
</ol>
Expand Down
4 changes: 4 additions & 0 deletions src/types.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -91,6 +91,8 @@ interface ToastOptions {
classNames?: ToastClassnames;
}

type CnFunction = (...classes: Array<string | undefined>) => string;

export interface ToasterProps {
invert?: boolean;
theme?: 'light' | 'dark' | 'system';
Expand Down Expand Up @@ -119,6 +121,7 @@ export interface ToasterProps {
icons?: ToastIcons;
containerAriaLabel?: string;
pauseWhenPageIsHidden?: boolean;
cn?: CnFunction;
}

export interface ToastProps {
Expand Down Expand Up @@ -148,6 +151,7 @@ export interface ToastProps {
icons?: ToastIcons;
closeButtonAriaLabel?: string;
pauseWhenPageIsHidden: boolean;
cn: CnFunction;
}

export enum SwipeStateTypes {
Expand Down
35 changes: 18 additions & 17 deletions website/src/pages/toaster.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -49,20 +49,21 @@ Changes the directionality of the toast's text.

## API Reference

| Property | Description | Default |
| :-------------------- | :-----------------------------------------------------------------------------------------------------------------------------: | -------------: |
| theme | Toast's theme, either `light`, `dark`, or `system` | `light` |
| richColors | Makes error and success state more colorful | `false` |
| expand | Toasts will be expanded by default | `false` |
| visibleToasts | Amount of visible toasts | `3` |
| position | Place where the toasts will be rendered | `bottom-right` |
| closeButton | Adds a close button to all toasts | `false` |
| offset | Offset from the edges of the screen. | `32px` |
| dir | Directionality of toast's text | `ltr` |
| hotkey | Keyboard shortcut that will move focus to the toaster area. | `⌥/alt + T` |
| invert | Dark toasts in light mode and vice versa. | `false` |
| toastOptions | These will act as default options for all toasts. See [toast()](/toast) for all available options. | `4000` |
| gap | Gap between toasts when expanded | `14` |
| loadingIcon | Changes the default loading icon | `-` |
| pauseWhenPageIsHidden | Pauses toast timers when the page is hidden, e.g., when the tab is backgrounded, the browser is minimized, or the OS is locked. | `false` |
| icons | Changes the default icons | `-` |
| Property | Description | Default |
| :-------------------- | :-----------------------------------------------------------------------------------------------------------------------------: | ----------------------------------: |
| theme | Toast's theme, either `light`, `dark`, or `system` | `light` |
| richColors | Makes error and success state more colorful | `false` |
| expand | Toasts will be expanded by default | `false` |
| visibleToasts | Amount of visible toasts | `3` |
| position | Place where the toasts will be rendered | `bottom-right` |
| closeButton | Adds a close button to all toasts | `false` |
| offset | Offset from the edges of the screen. | `32px` |
| dir | Directionality of toast's text | `ltr` |
| hotkey | Keyboard shortcut that will move focus to the toaster area. | `⌥/alt + T` |
| invert | Dark toasts in light mode and vice versa. | `false` |
| toastOptions | These will act as default options for all toasts. See [toast()](/toast) for all available options. | `4000` |
| gap | Gap between toasts when expanded | `14` |
| loadingIcon | Changes the default loading icon | `-` |
| pauseWhenPageIsHidden | Pauses toast timers when the page is hidden, e.g., when the tab is backgrounded, the browser is minimized, or the OS is locked. | `false` |
| icons | Changes the default icons | `-` |
| cn | Custom function for constructing/merging classes. | `classes.filter(Boolean).join(' ')` |

0 comments on commit d39170f

Please sign in to comment.