feat(Swiper): add touchable props (#565)

* feat(Swiper): add touchable props

* feat(NoticeBar): add --td-notice-bar-height

* chore: update _common

* chore: update snapshot

---------

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

Author: anlyyao

src/_common

@@ -14,7 +14,9 @@ import useDefaultProps from '../hooks/useDefaultProps';
 import { noticeBarDefaultProps } from './defaultProps';
 import noop from '../_util/noop';
 
-export interface NoticeBarProps extends TdNoticeBarProps, StyledProps {}
+export interface NoticeBarProps extends TdNoticeBarProps, StyledProps {
+  touchable?: Boolean;
+}
 
 type IconType = ReturnType<typeof InfoCircleFilledIcon>;
 
@@ -108,6 +110,7 @@ const NoticeBar: React.FC<NoticeBarProps> = (props) => {
     theme = 'info',
     visible,
     defaultVisible,
+    touchable = false,
     onClick,
   } = useDefaultProps(props, noticeBarDefaultProps);
 
@@ -179,7 +182,7 @@ const NoticeBar: React.FC<NoticeBarProps> = (props) => {
     setTimeout(() => {
       const listDOMWidth = listDOM.current?.getBoundingClientRect().width;
       const itemDOMWidth = itemDOM.current?.getBoundingClientRect().width;
-      if (itemDOMWidth > listDOMWidth) {
+      if (marquee || itemDOMWidth > listDOMWidth) {
         updateAnimationFrame({
           offset: -itemDOMWidth,
           duration: itemDOMWidth / animationSettingValue.current.scroll.speed,
@@ -273,7 +276,8 @@ const NoticeBar: React.FC<NoticeBarProps> = (props) => {
             loop
             direction={direction}
             duration={2000}
-            height={22}
+            touchable={touchable}
+            style={{ height: 'var(--td-notice-bar-height, 22px)' }}
           >
             {content.map((item, index) => (
               <SwiperItem key={index}>

src/notice-bar/NoticeBar.tsx

@@ -10,6 +10,7 @@ import forwardRefWithStatics from '../_util/forwardRefWithStatics';
 
 export interface SwiperProps extends TdSwiperProps, StyledProps {
   children?: React.ReactNode;
+  touchable?: Boolean;
 }
 
 const Swiper = forwardRefWithStatics(
@@ -29,6 +30,7 @@ const Swiper = forwardRefWithStatics(
       className,
       style,
       children,
+      touchable = true, // 是否可以通过手势滑动
     } = props;
 
     const { classPrefix } = useConfig();
@@ -179,11 +181,15 @@ const Swiper = forwardRefWithStatics(
       }, duration + 50); // 多 50ms 的间隔时间防止动画未执行完就跳转了
     }, [currentIndex, swiperItemLength, duration, direction]);
 
-    /** ******************************************************************
-     * 触摸事件处理方法
-     */
     // 触摸滑动事件 - 开始
     const handleTouchStart = (e: React.TouchEvent) => {
+      if (
+        !touchable ||
+        // avoid resetting position on multi-finger touch
+        e.touches.length > 1
+      )
+        return;
+
       e.stopPropagation();
       isHovering.current = true;
       clearTimer();
@@ -197,6 +203,7 @@ const Swiper = forwardRefWithStatics(
     // 触摸滑动事件 - 滑动中
     const handleTouchMove = useCallback(
       (e: React.TouchEvent) => {
+        if (!touchable) return;
         e.stopPropagation();
 
         if (moveStartSite) {
@@ -221,11 +228,12 @@ const Swiper = forwardRefWithStatics(
           }
         }
       },
-      [setTouchMoveDistance, moveStartSite, direction, currentIndex, loop, childrenLength],
+      [setTouchMoveDistance, moveStartSite, direction, currentIndex, loop, childrenLength, touchable],
     );
 
     // 触摸滑动事件 - 结束
     const handleTouchEnd = (e: React.TouchEvent) => {
+      if (!touchable) return;
       e.stopPropagation();
       if (touchMoveDistance / swiperOuterWidth <= -0.3) {
         // swiperTo(currentIndex + 1, { source: 'touch' });