From 871f222993c20cbcc967534053ac97ccbf87e6f8 Mon Sep 17 00:00:00 2001 From: zhixzhan Date: Wed, 4 Nov 2020 15:38:58 +0800 Subject: [PATCH 1/2] filter hidden card, do not render empty container --- .../src/components/Notifications/NotificationContainer.tsx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/Composer/packages/client/src/components/Notifications/NotificationContainer.tsx b/Composer/packages/client/src/components/Notifications/NotificationContainer.tsx index 8166685d40..d7d7303540 100644 --- a/Composer/packages/client/src/components/Notifications/NotificationContainer.tsx +++ b/Composer/packages/client/src/components/Notifications/NotificationContainer.tsx @@ -3,6 +3,7 @@ /** @jsx jsx */ import { jsx, css } from '@emotion/core'; +import { isEmpty } from 'lodash'; import { useRecoilValue } from 'recoil'; import { dispatcherState } from '../../recoilModel'; @@ -22,9 +23,11 @@ const container = css` // -------------------- NotificationContainer -------------------- // export const NotificationContainer = () => { - const notifications = useRecoilValue(notificationsSelector); + const notifications = useRecoilValue(notificationsSelector).filter(({ hidden }) => !hidden); const { deleteNotification, hideNotification } = useRecoilValue(dispatcherState); + if (isEmpty(notifications)) return null; + return (
{notifications.map((item) => { From fb246ebfb46b61365b0234dd687b48f84e3ef39a Mon Sep 17 00:00:00 2001 From: zhixzhan Date: Wed, 4 Nov 2020 16:04:07 +0800 Subject: [PATCH 2/2] update --- .../src/components/Notifications/NotificationContainer.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Composer/packages/client/src/components/Notifications/NotificationContainer.tsx b/Composer/packages/client/src/components/Notifications/NotificationContainer.tsx index d7d7303540..e157f8638c 100644 --- a/Composer/packages/client/src/components/Notifications/NotificationContainer.tsx +++ b/Composer/packages/client/src/components/Notifications/NotificationContainer.tsx @@ -3,7 +3,7 @@ /** @jsx jsx */ import { jsx, css } from '@emotion/core'; -import { isEmpty } from 'lodash'; +import isEmpty from 'lodash/isEmpty'; import { useRecoilValue } from 'recoil'; import { dispatcherState } from '../../recoilModel';