fix(packages): eix tab can't click on mobile side

soybeanjs · Sep 7, 2024 · e01410a · e01410a
1 parent 5e1f789
commit e01410a
Show file tree

Hide file tree

Showing 6 changed files with 123 additions and 27 deletions.
diff --git a/packages/materials/src/libs/page-tab/ButtonTab.tsx b/packages/materials/src/libs/page-tab/ButtonTab.tsx
@@ -1,11 +1,24 @@
 import classNames from 'classnames';
 import type { ButtonTabProps } from '../../types';
 import styles from './index.module.css';
+import { useTap } from './hook';
+const ButtonTab = ({
+  darkMode,
+  active,
+  prefix,
+  suffix,
+  children,
+  className,
+  onClick,
+  style,
+  ...rest
+}: ButtonTabProps) => {
+  const tap = useTap(onClick);
 
-const ButtonTab = ({ darkMode, active, prefix, suffix, children, className, style, ...rest }: ButtonTabProps) => {
   return (
     <div
       {...rest}
+      {...tap}
       className={classNames(
         ':soy: relative inline-flex cursor-pointer items-center justify-center gap-12px whitespace-nowrap border-(1px solid) rounded-4px px-12px py-4px',
         [
@@ -16,6 +29,7 @@ const ButtonTab = ({ darkMode, active, prefix, suffix, children, className, styl
           className
         ]
       )}
+      onClick={onClick}
       style={{ ...style }}
     >
       {prefix}

diff --git a/packages/materials/src/libs/page-tab/ChromeTab.tsx b/packages/materials/src/libs/page-tab/ChromeTab.tsx
@@ -1,12 +1,26 @@
 import classNames from 'classnames';
 import type { ButtonTabProps } from '../../types';
+import { useTap } from './hook';
 import styles from './index.module.css';
 import ChromeTabBg from './ChromeTabBg';
 
-const ChromeTab = ({ active, darkMode, prefix, suffix, children, className, style, ...rest }: ButtonTabProps) => {
+const ChromeTab = ({
+  active,
+  darkMode,
+  onClick,
+  prefix,
+  suffix,
+  children,
+  className,
+  style,
+  ...rest
+}: ButtonTabProps) => {
+  const tap = useTap(onClick);
+
   return (
     <div
       {...rest}
+      {...tap}
       className={classNames(
         ':soy: relative inline-flex cursor-pointer items-center justify-center gap-16px whitespace-nowrap px-24px py-6px -mr-18px',
         [
@@ -17,6 +31,7 @@ const ChromeTab = ({ active, darkMode, prefix, suffix, children, className, styl
           className
         ]
       )}
+      onClick={onClick}
       style={{ ...style }}
     >
       <div

diff --git a/packages/materials/src/libs/page-tab/SvgClose.tsx b/packages/materials/src/libs/page-tab/SvgClose.tsx
@@ -1,17 +1,43 @@
-import type { FC } from 'react';
-import React from 'react';
+import type { FC, TouchEvent } from 'react';
+import React, { useState } from 'react';
 import classNames from 'classnames';
 
 interface SvgCloseProps extends React.ComponentProps<'div'> {}
 
-const SvgClose: FC<SvgCloseProps> = ({ className, ...props }) => {
+const SvgClose: FC<SvgCloseProps> = ({ className, onClick, ...props }) => {
+  const [touchStart, setTouchStart] = useState(false);
+
+  // 处理触摸开始事件
+  const handleTouchStart = () => {
+    setTouchStart(true);
+  };
+
+  // 处理触摸结束事件
+  const handleTouchEnd = (event: TouchEvent) => {
+    if (touchStart) {
+      onClick && onClick(event as any);
+    }
+
+    // 重置触摸状态
+    setTouchStart(false);
+  };
+
+  const handleTouchMove = () => {
+    // 触摸移动，认为不是点击事件
+    setTouchStart(false);
+  };
+
   return (
     <div
+      onTouchStart={handleTouchStart}
+      onTouchMove={handleTouchMove}
+      onTouchEnd={handleTouchEnd}
       className={classNames(
         ':soy: relative h-16px w-16px inline-flex items-center justify-center rd-50% text-14px',
         className
       )}
       {...props}
+      onClick={onClick}
     >
       <svg
         width="1em"

diff --git a/packages/materials/src/libs/page-tab/hook.ts b/packages/materials/src/libs/page-tab/hook.ts
@@ -0,0 +1,34 @@
+import { useState } from 'react';
+
+type OnClick = () => void;
+
+export function useTap(onClick: OnClick) {
+  const [touchStart, setTouchStart] = useState(false);
+
+  // 处理触摸开始事件
+  const handleTouchStart = () => {
+    setTouchStart(true);
+  };
+
+  // 处理触摸结束事件
+  const handleTouchEnd = () => {
+    // 判断触摸开始的状态，确保这是一个点击事件，而不是滑动等其他触摸事件
+    if (touchStart) {
+      onClick();
+    }
+
+    // 重置触摸状态
+    setTouchStart(false);
+  };
+
+  const handleTouchMove = () => {
+    // 触摸移动，认为不是点击事件
+    setTouchStart(false);
+  };
+
+  return {
+    onTouchStart: handleTouchStart,
+    onTouchEnd: handleTouchEnd,
+    onTouchMove: handleTouchMove
+  };
+}
diff --git a/packages/materials/src/libs/page-tab/index.tsx b/packages/materials/src/libs/page-tab/index.tsx
@@ -1,3 +1,4 @@
+import type { FC } from 'react';
 import React, { memo } from 'react';
 import classNames from 'classnames';
 import type { ButtonTabProps } from '../../types';
@@ -6,8 +7,10 @@ import ChromeTab from './ChromeTab';
 import ButtonTab from './ButtonTab';
 import SvgClose from './SvgClose';
 import styles from './index.module.css';
+
 type PageTabProps = Omit<ButtonTabProps, 'onMouseUp'>;
-const PageTab = memo(function PageTab({
+
+const PageTab: FC<PageTabProps> = ({
   mode = 'chrome',
   activeColor = ACTIVE_COLOR,
   closable = true,
@@ -22,32 +25,33 @@ const PageTab = memo(function PageTab({
   darkMode,
   prefix,
   ...rest
-}: PageTabProps) {
+}) => {
   const cssVars = createTabCssVars(activeColor) as React.CSSProperties;
-  const getActiveTabComponent = () => {
-    const tabComponentMap = {
-      chrome: {
-        component: ChromeTab,
-        class: chromeClass
-      },
-      button: {
-        component: ButtonTab,
-        class: buttonClass
-      }
-    };
 
-    return tabComponentMap[mode];
+  const getActiveTabComponent = {
+    chrome: {
+      component: ChromeTab,
+      class: chromeClass
+    },
+    button: {
+      component: ButtonTab,
+      class: buttonClass
+    }
   };
-  const ActiveTabComponent = getActiveTabComponent().component;
-  const activeClass = getActiveTabComponent().class;
-  function closeTab(event: React.MouseEvent<HTMLDivElement, MouseEvent>) {
+
+  const ActiveTabComponent = getActiveTabComponent[mode].component;
+
+  const activeClass = getActiveTabComponent[mode].class;
+
+  function closeTab(event: React.MouseEvent | TouchEvent) {
     event.stopPropagation();
-    handleClose?.();
+    handleClose && handleClose();
   }
+
   function handleMouseup(e: React.MouseEvent<HTMLDivElement>) {
     // close tab by mouse wheel button click
     if (e.button === 1) {
-      handleClose?.();
+      handleClose && handleClose();
     }
   }
 
@@ -59,6 +63,7 @@ const PageTab = memo(function PageTab({
         onClick={closeTab}
       />
     ));
+
   return (
     <ActiveTabComponent
       prefix={prefix}
@@ -73,6 +78,6 @@ const PageTab = memo(function PageTab({
       {children}
     </ActiveTabComponent>
   );
-});
+};
 
-export default PageTab;
+export default memo(PageTab);
diff --git a/packages/materials/src/types/index.ts b/packages/materials/src/types/index.ts
@@ -263,7 +263,8 @@ export type LayoutCssVars = {
  * @default chrome
  */
 export type PageTabMode = 'button' | 'chrome';
-export type ButtonTabProps = PageTabProps & Omit<React.ComponentProps<'div'>, 'prefix' | 'style' | 'className'>;
+export type ButtonTabProps = PageTabProps &
+  Omit<React.ComponentProps<'div'>, 'prefix' | 'style' | 'className' | 'onClick'>;
 export interface PageTabProps {
   /** Whether is dark mode */
   darkMode?: boolean;
@@ -301,6 +302,7 @@ export interface PageTabProps {
   suffix?: React.ReactNode;
   className?: string;
   style?: React.CSSProperties;
+  onClick: () => void;
 }
 
 export type PageTabCssVarsProps = {