feat: optimize NoticeBar close (#294)

arco-design · Nov 21, 2024 · a717540 · a717540
1 parent dc4d2e9
commit a717540
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 6 deletions.
diff --git 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
@@ -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 (