fix: noticebar 关闭事件优化，小程序样式优化 (#424)

src/packages/noticebar/demo.taro.tsx

@@ -84,8 +84,8 @@ const NoticeBarDemo = () => {
             list={horseLamp1}
             speed={10}
             standTime={1000}
-            onClick={(item: any) => {
-              go(item)
+            onClick={(e) => {
+              go(e.target.innerHTML)
             }}
             closeMode
           />
@@ -109,8 +109,12 @@ const NoticeBarDemo = () => {
             height={50}
             speed={10}
             standTime={1000}
-            onClick={(item: any) => {
-              go(item)
+            closeMode
+            onClose={() => {
+              console.log('close')
+            }}
+            onClick={(e) => {
+              console.log(e)
             }}
           >
             {horseLamp3.map((item, index) => {

src/packages/noticebar/demo.tsx

@@ -85,8 +85,8 @@ const NoticeBarDemo = () => {
             list={horseLamp1}
             speed={10}
             standTime={1000}
-            onClick={(item: any) => {
-              go(item)
+            onClick={(e) => {
+              go(e.target.innerHTML)
             }}
             closeMode
           />
@@ -110,8 +110,12 @@ const NoticeBarDemo = () => {
             height={50}
             speed={10}
             standTime={1000}
-            onClick={(item: any) => {
-              go(item)
+            closeMode
+            onClose={() => {
+              console.log('close')
+            }}
+            onClick={(e) => {
+              console.log(e)
             }}
           >
             {horseLamp3.map((item, index) => {

src/packages/noticebar/doc.en-US.md

@@ -134,8 +134,8 @@ const App = () => {
             list={horseLamp1}
             speed={10}
             standTime={1000}
-            onClick={(item: any) => {
-              go(item)
+            onClick={(e) => {
+              go(e.target.innerHtml)
             }}
             closeMode
           />
@@ -188,7 +188,10 @@ const App = () => {
 
     return (
       <>
-        <NoticeBar direction="vertical" height={50} speed={10} standTime={1000}>
+        <NoticeBar direction="vertical" height={50} speed={10} standTime={1000}
+        closeMode
+        onClose={() => {console.log('close')}}
+        onClick={(e) => {console.log(e)}}>
         {horseLamp3.map((item, index) => {
             return (
             <div

src/packages/noticebar/doc.md

@@ -140,8 +140,8 @@ const App = () => {
             list={horseLamp1}
             speed={10}
             standTime={1000}
-            onClick={(item: any) => {
-              go(item)
+            onClick={(e) => {
+              go(e.target.innerHtml)
             }}
             closeMode
           />
@@ -194,7 +194,10 @@ const App = () => {
 
     return (
       <>
-        <NoticeBar direction="vertical" height={50} speed={10} standTime={1000}>
+        <NoticeBar direction="vertical" height={50} speed={10} standTime={1000} 
+        closeMode
+        onClose={() => {console.log('close')}}
+        onClick={(e) => {console.log(e)}}>
         {horseLamp3.map((item, index) => {
             return (
             <div

src/packages/noticebar/doc.zh-TW.md

@@ -140,8 +140,8 @@ const App = () => {
             list={horseLamp1}
             speed={10}
             standTime={1000}
-            onClick={(item: any) => {
-              go(item)
+            onClick={(e) => {
+              go(e.target.innerHtml)
             }}
             closeMode
           />
@@ -194,7 +194,10 @@ const App = () => {
 
     return (
       <>
-        <NoticeBar direction="vertical" height={50} speed={10} standTime={1000}>
+        <NoticeBar direction="vertical" height={50} speed={10} standTime={1000} 
+        closeMode
+        onClose={() => {console.log('close')}}
+        onClick={(e) => {console.log(e)}}>
         {horseLamp3.map((item, index) => {
             return (
             <div

src/packages/noticebar/noticebar.scss

@@ -127,6 +127,9 @@
     .go {
       align-self: center;
       display: flex;
+      justify-content: center;
+      width: $noticebar-right-icon-width;
+      margin: $noticebar-righticon-margin;
     }
   }
 }

src/packages/noticebar/noticebar.taro.tsx

@@ -242,14 +242,12 @@ export const NoticeBar: FunctionComponent<
   /**
    * 点击滚动单元
    */
-  const go = (item: any) => {
-    click && click(item)
-    onClick && onClick(item)
-  }
 
-  const handleClickIcon = () => {
-    close && close(scrollList[0])
-    onClose && onClose(scrollList[0])
+  const handleClickIcon = (event: MouseEvent) => {
+    event.stopPropagation()
+    SetShowNoticeBar(!closeMode)
+    close && close(event)
+    onClose && onClose(event)
   }
 
   const iconShow = () => {
@@ -347,8 +345,14 @@ export const NoticeBar: FunctionComponent<
           ) : null}
         </div>
       ) : null}
-      {scrollList.current.length > 0 && direction === 'vertical' ? (
-        <div className="nut-noticebar-vertical" style={barStyle}>
+      {showNoticeBar &&
+      scrollList.current.length > 0 &&
+      direction === 'vertical' ? (
+        <div
+          className="nut-noticebar-vertical"
+          style={barStyle}
+          onClick={handleClick}
+        >
           {children ? (
             <div className="horseLamp_list" style={horseLampStyle}>
               {scrollList.current.map((item: string, index: number) => {
@@ -364,9 +368,6 @@ export const NoticeBar: FunctionComponent<
                     className="horseLamp_list_item"
                     style={{ height }}
                     key={index}
-                    onClick={() => {
-                      go(item)
-                    }}
                   >
                     {item}
                   </li>
@@ -376,8 +377,8 @@ export const NoticeBar: FunctionComponent<
           )}
           <div
             className="go"
-            onClick={() => {
-              handleClickIcon()
+            onClick={(e) => {
+              handleClickIcon(e)
             }}
           >
             {rightIcon ||
@@ -385,7 +386,7 @@ export const NoticeBar: FunctionComponent<
                 <Icon
                   classPrefix={iconClassPrefix}
                   fontClassName={iconFontClassName}
-                  name="cross"
+                  name={rightIcon || 'close'}
                   color={color}
                   size="11px"
                 />

src/packages/noticebar/noticebar.tsx

@@ -240,14 +240,12 @@ export const NoticeBar: FunctionComponent<
   /**
    * 点击滚动单元
    */
-  const go = (item: any) => {
-    click && click(item)
-    onClick && onClick(item)
-  }
 
-  const handleClickIcon = () => {
-    close && close(scrollList[0])
-    onClose && onClose(scrollList[0])
+  const handleClickIcon = (event: MouseEvent) => {
+    event.stopPropagation()
+    SetShowNoticeBar(!closeMode)
+    close && close(event)
+    onClose && onClose(event)
   }
 
   const iconShow = () => {
@@ -345,8 +343,14 @@ export const NoticeBar: FunctionComponent<
           ) : null}
         </div>
       ) : null}
-      {scrollList.current.length > 0 && direction === 'vertical' ? (
-        <div className="nut-noticebar-vertical" style={barStyle}>
+      {showNoticeBar &&
+      scrollList.current.length > 0 &&
+      direction === 'vertical' ? (
+        <div
+          className="nut-noticebar-vertical"
+          style={barStyle}
+          onClick={handleClick}
+        >
           {children ? (
             <div className="horseLamp_list" style={horseLampStyle}>
               {scrollList.current.map((item: string, index: number) => {
@@ -362,9 +366,6 @@ export const NoticeBar: FunctionComponent<
                     className="horseLamp_list_item"
                     style={{ height }}
                     key={index}
-                    onClick={() => {
-                      go(item)
-                    }}
                   >
                     {item}
                   </li>
@@ -374,8 +375,8 @@ export const NoticeBar: FunctionComponent<
           )}
           <div
             className="go"
-            onClick={() => {
-              handleClickIcon()
+            onClick={(e) => {
+              handleClickIcon(e)
             }}
           >
             {rightIcon ||
@@ -383,7 +384,7 @@ export const NoticeBar: FunctionComponent<
                 <Icon
                   classPrefix={iconClassPrefix}
                   fontClassName={iconFontClassName}
-                  name="cross"
+                  name={rightIcon || 'close'}
                   color={color}
                   size="11px"
                 />