From 0fc473a5835ec962c3d8b55b0c09c055f43797ae Mon Sep 17 00:00:00 2001
From: "xiaziqi.sia" <xiaziqi.sia@bytedance.com>
Date: Tue, 22 Oct 2024 11:59:14 +0800
Subject: [PATCH] feat: optimze `NoticeBar` close

---
 .../components/notice-bar/__test__/index.spec.js     |  1 +
 packages/arcodesign/components/notice-bar/index.tsx  | 12 ++++++------
 2 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/packages/arcodesign/components/notice-bar/__test__/index.spec.js b/packages/arcodesign/components/notice-bar/__test__/index.spec.js
index 66a6fabc..a81ff974 100644
--- a/packages/arcodesign/components/notice-bar/__test__/index.spec.js
+++ b/packages/arcodesign/components/notice-bar/__test__/index.spec.js
@@ -90,6 +90,7 @@ describe('NoticeBar actions', () => {
         const closeIcon = container.querySelectorAll(`.${prefixCls}-icon-close`)[0];
         userEvent.click(closeIcon);
         expect(onClickRight.mock.calls.length).toBe(1);
+        expect(container.querySelectorAll(`.${prefix}`).length).toBe(0);
     });
 
     it('Should support using ref to update', () => {
diff --git a/packages/arcodesign/components/notice-bar/index.tsx b/packages/arcodesign/components/notice-bar/index.tsx
index d4bbf8c1..4313b9d5 100644
--- a/packages/arcodesign/components/notice-bar/index.tsx
+++ b/packages/arcodesign/components/notice-bar/index.tsx
@@ -1,4 +1,4 @@
-import { cls, removeElement, fadeColor, nextTick } from '@arco-design/mobile-utils';
+import { cls, fadeColor, nextTick } from '@arco-design/mobile-utils';
 import React, {
     useRef,
     forwardRef,
@@ -142,6 +142,7 @@ const NoticeBar = forwardRef((props: NoticeBarProps, ref: Ref<NoticeBarRef>) =>
     const wrapRef = useRef<HTMLDivElement>(null);
     const contentRef = useRef<HTMLDivElement>(null);
     const timerRef = useRef<number | null>(null);
+    const [visible, setVisible] = useState(true);
     const [needMarquee, setNeedMarquee] = useState(false);
     const extraClass = useMemo(() => {
         const classList: string[] = [];
@@ -185,9 +186,8 @@ const NoticeBar = forwardRef((props: NoticeBarProps, ref: Ref<NoticeBarRef>) =>
     }, [useRtl]);
 
     function close() {
-        if (domRef.current) {
-            removeElement(domRef.current);
-        }
+        setVisible(false);
+        clear();
     }
 
     function handleClose(e: React.MouseEvent<HTMLDivElement, MouseEvent>) {
@@ -252,7 +252,7 @@ const NoticeBar = forwardRef((props: NoticeBarProps, ref: Ref<NoticeBarRef>) =>
     }
 
     function renderNoticeBar(prefix: string) {
-        return (
+        return visible ? (
             <div
                 className={cls(prefix, className, extraClass)}
                 style={style}
@@ -281,7 +281,7 @@ const NoticeBar = forwardRef((props: NoticeBarProps, ref: Ref<NoticeBarRef>) =>
                     </div>
                 ) : null}
             </div>
-        );
+        ) : null;
     }
 
     return (