From 1493ade8114f4b81b077adaf77bb5cb2e50fade5 Mon Sep 17 00:00:00 2001
From: moonrailgun <moonrailgun@gmail.com>
Date: Wed, 25 Aug 2021 10:44:50 +0800
Subject: [PATCH] =?UTF-8?q?style:=20=E8=B0=83=E6=95=B4ModalWrapper?=
 =?UTF-8?q?=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/src/components/Modal.tsx              | 7 +++++--
 web/src/components/Slides.tsx             | 1 +
 web/src/components/modals/CreateGroup.tsx | 2 +-
 web/src/components/modals/GroupInvite.tsx | 2 +-
 4 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/web/src/components/Modal.tsx b/web/src/components/Modal.tsx
index eb777c68..38d7086a 100644
--- a/web/src/components/Modal.tsx
+++ b/web/src/components/Modal.tsx
@@ -9,9 +9,10 @@ import { PortalAdd, PortalRemove } from './Portal';
 import { Typography } from 'antd';
 import { Icon } from '@iconify/react';
 import { CSSTransition } from 'react-transition-group';
+import clsx from 'clsx';
+import { useIsMobile } from '@/hooks/useIsMobile';
 
 import './Modal.less';
-import clsx from 'clsx';
 
 const transitionEndListener = (node: HTMLElement, done: () => void) =>
   node.addEventListener('transitionend', done, false);
@@ -170,6 +171,8 @@ export const ModalWrapper: React.FC<{
   className?: string;
   style?: React.CSSProperties;
 }> = React.memo((props) => {
+  const isMobile = useIsMobile();
+
   const title = _isString(props.title) ? (
     <Typography.Title level={4} className="text-center mb-4">
       {props.title}
@@ -179,7 +182,7 @@ export const ModalWrapper: React.FC<{
   return (
     <div
       className={clsx('p-4', props.className)}
-      style={{ minWidth: 300, ...props.style }}
+      style={{ minWidth: isMobile ? 300 : 420, ...props.style }}
     >
       {title}
       {props.children}
diff --git a/web/src/components/Slides.tsx b/web/src/components/Slides.tsx
index 55179b0e..f6bb7a0d 100644
--- a/web/src/components/Slides.tsx
+++ b/web/src/components/Slides.tsx
@@ -39,6 +39,7 @@ export const Slides = React.forwardRef<SlidesRef, CarouselProps>(
         ref={carouselRef}
         {...props}
         dots={false}
+        swipe={false}
         adaptiveHeight={true}
         infinite={false}
         beforeChange={(current, next) => {
diff --git a/web/src/components/modals/CreateGroup.tsx b/web/src/components/modals/CreateGroup.tsx
index 273eb8dd..4d5d72d8 100644
--- a/web/src/components/modals/CreateGroup.tsx
+++ b/web/src/components/modals/CreateGroup.tsx
@@ -95,7 +95,7 @@ export const ModalCreateGroup: React.FC = React.memo(() => {
   }, [name, panels]);
 
   return (
-    <ModalWrapper style={{ width: 440 }}>
+    <ModalWrapper>
       <Slides ref={slidesRef}>
         <div>
           <Typography.Title level={4} className="text-center mb-4">
diff --git a/web/src/components/modals/GroupInvite.tsx b/web/src/components/modals/GroupInvite.tsx
index 63941f38..a40a2313 100644
--- a/web/src/components/modals/GroupInvite.tsx
+++ b/web/src/components/modals/GroupInvite.tsx
@@ -36,7 +36,7 @@ export const GroupInvite: React.FC<GroupInviteProps> = React.memo((props) => {
   }
 
   return (
-    <ModalWrapper style={{ width: '440px' }}>
+    <ModalWrapper>
       {/* <div>邀请好友加入群组 {groupInfo.name}</div>
 
       <div>