From 6daed5b8cb4e7c1e4983b681d267dcb3b61cbb4d Mon Sep 17 00:00:00 2001 From: Chandler Prall Date: Sat, 20 Feb 2021 12:58:28 -0700 Subject: [PATCH] Refactored EuiEventNotification context menu item creation --- .../notification_events.tsx | 22 +++++------ .../notification/notification_event.tsx | 20 ++++------ .../notification_event_meta.test.tsx | 2 +- .../notification/notification_event_meta.tsx | 39 ++++++++++++------- 4 files changed, 43 insertions(+), 40 deletions(-) diff --git a/src-docs/src/views/notification_events/notification_events.tsx b/src-docs/src/views/notification_events/notification_events.tsx index 854cda4090d..53b7aefe458 100644 --- a/src-docs/src/views/notification_events/notification_events.tsx +++ b/src-docs/src/views/notification_events/notification_events.tsx @@ -2,10 +2,7 @@ import React, { useState } from 'react'; import { EuiPanel } from '../../../../src/components/panel'; import { EuiTitle } from '../../../../src/components/title'; import { EuiSpacer } from '../../../../src/components/spacer'; -import { - EuiContextMenuItem, - EuiContextMenuPanelProps, -} from '../../../../src/components/context_menu'; +import { EuiContextMenuItem } from '../../../../src/components/context_menu'; import { EuiNotificationEvent } from '../../../../src/components/notification/notification_event'; export default () => { @@ -85,9 +82,6 @@ export default () => { ]; const [events, setEvents] = useState(notificationEventsData); - const [contextMenuItems, setContextMenuItems] = useState< - EuiContextMenuPanelProps['items'] - >(); const onRead = (id: string, isRead: boolean) => { const nextState = events.map((event) => { @@ -103,12 +97,17 @@ export default () => { setEvents(nextState); }; - const onOpenContextMenu = (id: string, isRead: boolean, type: string) => { - const nextContextMenus = [ + const onOpenContextMenu = (id: string) => { + const { + isRead, + meta: { type }, + } = events.find(({ id: eventId }) => eventId === id)!; + + return [ onRead(id, isRead)}> - {isRead ? ' Mark as unread' : 'Mark as read'} + {isRead ? 'Mark as unread' : 'Mark as read'} , { Don’t notify me about this , ]; - - setContextMenuItems(nextContextMenus); }; const onClickEventTitle = (id: string) => { @@ -147,7 +144,6 @@ export default () => { primaryAction={event.primaryAction} messages={event.messages} onRead={onRead} - contextMenuItems={contextMenuItems} onOpenContextMenu={onOpenContextMenu} onClickPrimaryAction={onClickEventPrimaryAction} onClickTitle={onClickNoNewsTitles!} diff --git a/src/components/notification/notification_event.tsx b/src/components/notification/notification_event.tsx index e8c873eebaf..18139056a26 100644 --- a/src/components/notification/notification_event.tsx +++ b/src/components/notification/notification_event.tsx @@ -17,7 +17,7 @@ * under the License. */ -import React, { FunctionComponent } from 'react'; +import React, { FunctionComponent, ReactElement } from 'react'; import classNames from 'classnames'; import { EuiNotificationEventMeta, @@ -28,8 +28,8 @@ import { EuiNotificationEventMessagesProps, } from './notification_event_messages'; import { EuiButtonEmpty, EuiButtonEmptyProps } from '../button'; -import { EuiContextMenuPanelProps } from '../context_menu'; import { EuiLink } from '../link'; +import { EuiContextMenuItem, EuiContextMenuItemProps } from '../context_menu'; export type EuiNotificationEventPrimaryActionProps = EuiButtonEmptyProps & { label: string; @@ -70,13 +70,11 @@ export type EuiNotificationEventProps = { */ onRead?: (id: string, isRead: boolean) => void; /** - * An array of context menu items. See #EuiContextMenuItem + * Provided the `id` of the event aand must return an array of #EuiContextMenuItem elements */ - contextMenuItems?: EuiContextMenuPanelProps['items']; - /** - * Returns the `id`, `isRead` ad `type` of the open context menu - */ - onOpenContextMenu?: (id: string, isRead: boolean, type: string) => void; + onOpenContextMenu?: ( + id: string + ) => Array>; }; export const EuiNotificationEvent: FunctionComponent = ({ @@ -87,7 +85,6 @@ export const EuiNotificationEvent: FunctionComponent primaryAction, messages, onRead, - contextMenuItems, onOpenContextMenu, onClickTitle, onClickPrimaryAction, @@ -110,11 +107,8 @@ export const EuiNotificationEvent: FunctionComponent iconAriaLabel={meta.iconAriaLabel} time={meta.time} isRead={isRead} - contextMenuItems={contextMenuItems} onOpenContextMenu={ - onOpenContextMenu - ? () => onOpenContextMenu(id, isRead!, meta.type) - : undefined + onOpenContextMenu ? () => onOpenContextMenu(id) : undefined } eventName={meta.eventName} onRead={() => onRead?.(id, isRead!)} diff --git a/src/components/notification/notification_event_meta.test.tsx b/src/components/notification/notification_event_meta.test.tsx index f40a896aba9..9c8568c12f0 100644 --- a/src/components/notification/notification_event_meta.test.tsx +++ b/src/components/notification/notification_event_meta.test.tsx @@ -107,7 +107,7 @@ describe('EuiNotificationEventMeta', () => { type="Alert" time={2 min ago} iconType="logoCloud" - contextMenuItems={contextMenuItems} + onOpenContextMenu={() => contextMenuItems} eventName="eventName" /> ); diff --git a/src/components/notification/notification_event_meta.tsx b/src/components/notification/notification_event_meta.tsx index a62e4dcd9e3..df8aff33617 100644 --- a/src/components/notification/notification_event_meta.tsx +++ b/src/components/notification/notification_event_meta.tsx @@ -17,13 +17,22 @@ * under the License. */ -import React, { FunctionComponent, useState, ReactNode } from 'react'; +import React, { + FunctionComponent, + useState, + ReactNode, + ReactElement, +} from 'react'; import classNames from 'classnames'; import { EuiIcon, IconType } from '../icon'; import { EuiBadge, EuiBadgeProps } from '../badge'; import { EuiPopover } from '../popover'; import { EuiButtonIcon } from '../button'; -import { EuiContextMenuPanel, EuiContextMenuPanelProps } from '../context_menu'; +import { + EuiContextMenuItem, + EuiContextMenuItemProps, + EuiContextMenuPanel, +} from '../context_menu'; import { EuiI18n } from '../i18n'; import { EuiNotificationEventReadButton, @@ -64,14 +73,12 @@ export type EuiNotificationEventMetaProps = Omit< * Indicates when the event was received. */ time: ReactNode; - /** - * An array of context menu items. See #EuiContextMenuItem - */ - contextMenuItems?: EuiContextMenuPanelProps['items']; /** * Necessary to trigger onOpenContextMenu from EuiNotificationEvent */ - onOpenContextMenu?: () => void; + onOpenContextMenu?: () => Array< + ReactElement + >; /** * Applies an `onClick` handler to the `read` indicator. */ @@ -89,14 +96,16 @@ export const EuiNotificationEventMeta: FunctionComponent { const [isPopoverOpen, setIsPopoverOpen] = useState(false); const classes = classNames('euiNotificationEventMeta', { - 'euiNotificationEventMeta--hasContextMenu': - onOpenContextMenu || contextMenuItems.length > 0, + 'euiNotificationEventMeta--hasContextMenu': onOpenContextMenu, }); + const [contextMenuItems, setContextMenuItems] = useState< + ReturnType> + >([]); + const id = htmlIdGenerator()(); const onMarkAsRead = () => { @@ -109,7 +118,9 @@ export const EuiNotificationEventMeta: FunctionComponent { setIsPopoverOpen(!isPopoverOpen); - onOpenContextMenu?.(); + if (onOpenContextMenu) { + setContextMenuItems(onOpenContextMenu()); + } }; return ( @@ -138,7 +149,7 @@ export const EuiNotificationEventMeta: FunctionComponent{time} - {(onOpenContextMenu || contextMenuItems.length > 0) && ( + {onOpenContextMenu && (
} closePopover={() => setIsPopoverOpen(false)}> - +
setIsPopoverOpen(false)}> + +
)}