refactor(web): 创建群组时的滚动UI

web/src/components/Slides.less

@@ -0,0 +1,5 @@
+.slides {
+  .slick-list {
+    transition: height .2s ease-in-out;
+  }
+}

web/src/components/Slides.tsx

@@ -0,0 +1,53 @@
+import { Carousel } from 'antd';
+import type { CarouselProps, CarouselRef } from 'antd/lib/carousel';
+import React, { useImperativeHandle, useRef } from 'react';
+
+import './Slides.less';
+
+export interface SlidesRef {
+  next: () => void;
+  prev: () => void;
+}
+
+/**
+ * 类似于走马灯, 但是用于分步操作
+ *
+ * 会随内容的变化动态改变高度
+ *
+ * Reference: https://react-slick.neostack.com/docs/api
+ */
+export const Slides = React.forwardRef<SlidesRef, CarouselProps>(
+  (props, ref) => {
+    const carouselRef = useRef<CarouselRef>(null);
+
+    useImperativeHandle(
+      ref,
+      () => ({
+        next() {
+          carouselRef.current?.next();
+        },
+        prev() {
+          carouselRef.current?.prev();
+        },
+      }),
+      []
+    );
+
+    return (
+      <Carousel
+        className="slides"
+        ref={carouselRef}
+        {...props}
+        dots={false}
+        adaptiveHeight={true}
+        infinite={false}
+        beforeChange={(current, next) => {
+          console.log(current, next, carouselRef.current?.innerSlider);
+        }}
+      >
+        {props.children}
+      </Carousel>
+    );
+  }
+);
+Slides.displayName = 'Slides';

web/src/components/modals/CreateGroup.tsx

@@ -1,20 +1,20 @@
-import { Button, Carousel, Divider, Input, Typography } from 'antd';
+import { Button, Divider, Input, Typography } from 'antd';
-import type { CarouselRef } from 'antd/lib/carousel';
 import React, { useCallback, useRef, useState } from 'react';
 import { Avatar } from '../Avatar';
 import { ModalWrapper } from '../Modal';
+import { Slides, SlidesRef } from '../Slides';
 
 export const ModalCreateGroup: React.FC = React.memo(() => {
-  const carouselRef = useRef<CarouselRef>(null);
+  const slidesRef = useRef<SlidesRef>(null);
   const [name, setName] = useState('');
 
   const handleSelectTemplate = useCallback(() => {
     // TODO
-    carouselRef.current?.next();
+    slidesRef.current?.next();
   }, []);
 
   const handleBack = useCallback(() => {
-    carouselRef.current?.prev();
+    slidesRef.current?.prev();
   }, []);
 
   const handleCreate = useCallback(() => {
@@ -23,7 +23,7 @@ export const ModalCreateGroup: React.FC = React.memo(() => {
 
   return (
     <ModalWrapper style={{ width: 440 }}>
-      <Carousel ref={carouselRef} dots={false}>
+      <Slides ref={slidesRef}>
         <div>
           <Typography.Title level={4} className="text-center mb-4">
             创建群组
@@ -81,7 +81,7 @@ export const ModalCreateGroup: React.FC = React.memo(() => {
             </Button>
           </div>
         </div>
-      </Carousel>
+      </Slides>
     </ModalWrapper>
   );
 });