diff --git a/CHANGELOG.md b/CHANGELOG.md index 91e2399181f..43012d82da3 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,6 @@ ## [`master`](https://github.com/elastic/eui/tree/master) +- Converted `EuiGlobalToastListItem` to TS ([#1880](https://github.com/elastic/eui/pull/1880)) - Converted `token_map` to TS ([#1870](https://github.com/elastic/eui/pull/1870)) - Converted `EuiOverlayMask` to TS ([#1858](https://github.com/elastic/eui/pull/1858)) - Converted `EuiStat` to TS ([#1848](https://github.com/elastic/eui/pull/1848)) diff --git a/src/components/toast/__snapshots__/global_toast_list_item.test.js.snap b/src/components/toast/__snapshots__/global_toast_list_item.test.tsx.snap similarity index 100% rename from src/components/toast/__snapshots__/global_toast_list_item.test.js.snap rename to src/components/toast/__snapshots__/global_toast_list_item.test.tsx.snap diff --git a/src/components/toast/global_toast_list_item.js b/src/components/toast/global_toast_list_item.js deleted file mode 100644 index 34976e3bc26..00000000000 --- a/src/components/toast/global_toast_list_item.js +++ /dev/null @@ -1,20 +0,0 @@ -import { - cloneElement, -} from 'react'; -import PropTypes from 'prop-types'; -import classNames from 'classnames'; - -export const EuiGlobalToastListItem = ({ isDismissed, children }) => { - const classes = classNames('euiGlobalToastListItem', children.props.className, { - 'euiGlobalToastListItem-isDismissed': isDismissed, - }); - - return cloneElement(children, ({ ...children.props, ...{ - className: classes, - } })); -}; - -EuiGlobalToastListItem.propTypes = { - isDismissed: PropTypes.bool, - children: PropTypes.node, -}; diff --git a/src/components/toast/global_toast_list_item.test.js b/src/components/toast/global_toast_list_item.test.tsx similarity index 87% rename from src/components/toast/global_toast_list_item.test.js rename to src/components/toast/global_toast_list_item.test.tsx index 1742f02f84d..99b46b0e94d 100644 --- a/src/components/toast/global_toast_list_item.test.js +++ b/src/components/toast/global_toast_list_item.test.tsx @@ -11,7 +11,6 @@ describe('EuiGlobalToastListItem', () => { ); - expect(component) - .toMatchSnapshot(); + expect(component).toMatchSnapshot(); }); }); diff --git a/src/components/toast/global_toast_list_item.tsx b/src/components/toast/global_toast_list_item.tsx new file mode 100644 index 00000000000..f676e6f82b1 --- /dev/null +++ b/src/components/toast/global_toast_list_item.tsx @@ -0,0 +1,28 @@ +import { cloneElement, FunctionComponent, ReactElement } from 'react'; +import classNames from 'classnames'; +import { CommonProps } from '../common'; + +export interface EuiGlobalToastListItemProps { + isDismissed?: boolean; + children?: ReactElement; +} + +export const EuiGlobalToastListItem: FunctionComponent< + CommonProps & EuiGlobalToastListItemProps +> = ({ children, isDismissed }) => { + if (!children) { + return null; + } + const classes = classNames( + 'euiGlobalToastListItem', + children.props.className, + { + 'euiGlobalToastListItem-isDismissed': isDismissed, + } + ); + + return cloneElement(children, { + ...children.props, + ...{ className: classes }, + }); +}; diff --git a/src/components/toast/index.d.ts b/src/components/toast/index.d.ts index 60a6177fcaa..a1d5350aec9 100644 --- a/src/components/toast/index.d.ts +++ b/src/components/toast/index.d.ts @@ -1,7 +1,16 @@ +import { + EuiGlobalToastListItemProps as ToastListItemProps, + EuiGlobalToastListItem as ToastListItem, +} from './global_toast_list_item'; import { CommonProps } from '../common'; import { IconType } from '../icon'; -import { Component, FunctionComponent, HTMLAttributes, ReactChild } from 'react'; +import { + Component, + FunctionComponent, + HTMLAttributes, + ReactChild, +} from 'react'; declare module '@elastic/eui' { /** @@ -9,7 +18,9 @@ declare module '@elastic/eui' { * * @see './toast.js' */ - export interface EuiToastProps extends CommonProps, HTMLAttributes { + export interface EuiToastProps + extends CommonProps, + HTMLAttributes { title?: string, color?: 'primary' | 'success' | 'warning' | 'danger', iconType?: IconType, @@ -17,20 +28,8 @@ declare module '@elastic/eui' { } export const EuiToast: FunctionComponent; - - - /** - * EuiGlobalToastListItem type def - * - * @see './global_toast_list_item.js' - */ - export interface EuiGlobalToastListItemProps { - isDismissed?: boolean; - } - - export const EuiGlobalToastListItem: FunctionComponent< - EuiGlobalToastListItemProps - > + export interface EuiGlobalToastListItemProps extends ToastListItemProps {} + export const EuiGlobalToastListItem: typeof ToastListItem; /** * EuiGlobalToastList type def