@carbon/ibm-products
Version:
Carbon for IBM Products
224 lines (223 loc) • 6.23 kB
TypeScript
/**
* Copyright IBM Corp. 2020, 2022
*
* This source code is licensed under the Apache-2.0 license found in the
* LICENSE file in the root directory of this source tree.
*/
import { Link } from '@carbon/react';
import React, { RefObject } from 'react';
type Themes = 'light' | 'dark';
type DateTimeStyles = 'long' | 'short' | 'narrow';
interface Link {
url: string;
text: string;
}
interface Data {
id?: string | number;
type?: 'error' | 'warning' | 'success' | 'informational';
timestamp?: Date;
title?: string;
description?: string;
link?: Link;
unread?: boolean;
onNotificationClick?: () => void;
}
export interface NotificationsPanelProps {
/**
* Provide an optional class to be applied to the containing node.
*/
className?: string;
/**
* Array of data for Notifications component to render
*/
data: Data[];
/**
* The language for each notification's time stamp.
* Used with `dateTimeStyle`.
*/
dateTimeLocale?: string;
/**
* The date/time format for each notification's time stamp.
* Used with `dateTimeLocale`.
*
* E.g. `long` as "6 minutes ago", `short` as "6m ago".
*/
dateTimeStyle?: DateTimeStyles;
/**
* Sets the `days ago` label text
*
* @deprecated use `dateTimeLocale` instead.
*/
daysAgoText?: (value: number) => string;
/**
* Label for Dismiss all button
*/
dismissAllLabel?: string;
/**
* Label for Dismiss single notification icon button
*/
dismissSingleNotificationIconDescription?: string;
/**
* Optional: Determines if the `Do not disturb` toggle is on or off when the component is rendered
*/
doNotDisturbDefaultToggled?: boolean;
/**
* Optional: Label for Do not disturb toggle
*/
doNotDisturbLabel?: string;
/**
* Sets the empty state label text when there are no notifications
*/
emptyStateLabel?: string;
/**
* Sets the `hour ago` label text
*
* @deprecated use `dateTimeLocale` instead.
*/
hourAgoText?: (value: number) => string;
/**
* Sets the `hours ago` label text
*
* @deprecated use `dateTimeLocale` instead.
*/
hoursAgoText?: (value: number) => string;
/**
* Determines the theme of the empty state's illustration.
*/
illustrationTheme: Themes;
/**
* Sets the `minute ago` label text
*
* @deprecated use `dateTimeLocale` instead.
*/
minuteAgoText?: (value: number) => string;
/**
* Sets the `minutes ago` label text
*
* @deprecated use `dateTimeLocale` instead.
*/
minutesAgoText?: (value: number) => string;
/**
* Sets the `month ago` label text
*
* @deprecated use `dateTimeLocale` instead.
*/
monthAgoText?: (value: number) => string;
/**
* Sets the `months ago` label text
*
* @deprecated use `dateTimeLocale` instead.
*/
monthsAgoText?: (value: number) => string;
/**
* Sets the `now` label text
*
* @deprecated use `dateTimeLocale` instead.
*/
nowText?: string;
/**
* Optional function called after clicking outside of the panel.
*/
onClickOutside?: () => void;
/**
* Optional function called after clicking the "Dismiss all" button.
*/
onDismissAllNotifications?: () => void;
/**
* Optional function called after clicking a notification's "X" button.
*/
onDismissSingleNotification?: (prop: any) => void;
/**
* Optional function called after toggling "Do not disturb".
*/
onDoNotDisturbChange?: (prop: any) => void;
/**
* Optional function called after clicking settings / gear icon button.
*/
onSettingsClick?: () => void;
/**
* Optional function called after clicking the "View all" button.
*/
onViewAllClick?: () => void;
/**
* Determines whether the notifications panel should render or not
*/
open: boolean;
/**
* Sets the previous label text
*/
previousLabel?: string;
/**
* Sets the `read less` label text
*/
readLessLabel?: string;
/**
* Sets the `read more` label text
*/
readMoreLabel?: string;
/**
* Sets the `seconds ago` label text
*
* @deprecated use `dateTimeLocale` instead.
*/
secondsAgoText?: (value: number) => string;
/**
* Sets the settings icon description text
*/
settingsIconDescription?: string;
/**
* Sets the title for the Notifications panel
*/
title?: string;
/**
* Sets the today label text
*/
todayLabel?: string;
/**
* Reference to trigger button
*/
triggerButtonRef?: RefObject<any>;
/**
* Sets the View all button text
*/
viewAllLabel?: (value: number) => string;
/**
* Sets the `year ago` label text
*
* @deprecated use `dateTimeLocale` instead.
*/
yearAgoText?: (value: number) => string;
/**
* Sets the `years ago` label text
*
* @deprecated use `dateTimeLocale` instead.
*/
yearsAgoText?: (value: number) => string;
/**
* Sets the `Yesterday at` label text
*
* @deprecated use `dateTimeLocale` instead.
*/
yesterdayAtText?: (value: number) => string;
/**
* Sets the yesterday label text
*/
yesterdayLabel?: string;
}
/**
* The `NotificationsPanel` sets expectations on the behavior for notifications,
* allowing the user to view and interact with them all in one place.
*
* **To adopt the new localization:**
*
* **Step 1:** Provide a locale to the `dateTimeLocale` prop, such as "de" or "fr-CA".
*
* **Step 2:** Remove the now _deprecated_ props: `daysAgoText`,
* `hourAgoText`, `hoursAgoText`, `minuteAgoText`, `minutesAgoText`,
* `monthAgoText`, `monthsAgoText`, `nowText`, `secondsAgoText`,
* `yearAgoText`, `yearsAgoText`, `yesterdayAtText`.
*
* If you do not provide a locale, the deprecated props will be applied instead.
*/
export declare let NotificationsPanel: React.ForwardRefExoticComponent<NotificationsPanelProps & React.RefAttributes<unknown>>;
export {};