feat(Swiper): support cardScale API

packages/components/swiper/SwiperItem.tsx

@@ -1,8 +1,8 @@
 import React, { useEffect, useState } from 'react';
 import classnames from 'classnames';
 import useConfig from '../hooks/useConfig';
-import { SwiperProps } from './Swiper';
 import useIsFirstRender from '../hooks/useIsFirstRender';
+import type { SwiperProps } from './Swiper';
 
 export interface SwiperItemProps extends SwiperProps {
   currentIndex?: number;
@@ -32,14 +32,20 @@ const disposeIndex = (index: number, currentIndex: number, childrenLength: numbe
   return index;
 };
 
-const calculateTranslate = (index: number, currentIndex: number, parentWidth: number, inStage: boolean) => {
+const calculateTranslate = (
+  index: number,
+  currentIndex: number,
+  parentWidth: number,
+  inStage: boolean,
+  cardScale: number,
+) => {
   if (inStage) {
-    return (parentWidth * ((index - currentIndex) * (1 - itemWidth * CARD_SCALE) - itemWidth + 1)) / 2;
+    return (parentWidth * ((index - currentIndex) * (1 - itemWidth * cardScale) - itemWidth + 1)) / 2;
   }
   if (index < currentIndex) {
-    return (-itemWidth * (1 + CARD_SCALE) * parentWidth) / 2;
+    return (-itemWidth * (1 + cardScale) * parentWidth) / 2;
   }
-  return ((2 + itemWidth * (CARD_SCALE - 1)) * parentWidth) / 2;
+  return ((2 + itemWidth * (cardScale - 1)) * parentWidth) / 2;
 };
 
 const getZindex = (isActivity: boolean, inStage: boolean) => {
@@ -63,6 +69,7 @@ const SwiperItem: React.FC<SwiperItemProps> = (props) => {
     type = 'default',
     childrenLength,
     getWrapAttribute,
+    cardScale = CARD_SCALE,
   } = props;
   const { classPrefix } = useConfig();
   const [, setUpdate] = useState({});
@@ -80,13 +87,13 @@ const SwiperItem: React.FC<SwiperItemProps> = (props) => {
       const translateIndex =
         index !== currentIndex && childrenLength > 2 ? disposeIndex(index, currentIndex, childrenLength) : index;
       const inStage = Math.round(Math.abs(translateIndex - currentIndex)) <= 1;
-      const translate = calculateTranslate(translateIndex, currentIndex, wrapWidth, inStage).toFixed(2);
+      const translate = calculateTranslate(translateIndex, currentIndex, wrapWidth, inStage, cardScale).toFixed(2);
       const isActivity = translateIndex === currentIndex;
       const zIndex = getZindex(isActivity, inStage);
       return {
-        msTransform: `translateX(${translate}px) scale(${isActivity ? 1 : CARD_SCALE})`,
-        WebkitTransform: `translateX(${translate}px) scale(${isActivity ? 1 : CARD_SCALE})`,
-        transform: `translateX(${translate}px) scale(${isActivity ? 1 : CARD_SCALE})`,
+        msTransform: `translateX(${translate}px) scale(${isActivity ? 1 : cardScale})`,
+        WebkitTransform: `translateX(${translate}px) scale(${isActivity ? 1 : cardScale})`,
+        transform: `translateX(${translate}px) scale(${isActivity ? 1 : cardScale})`,
         transition: `transform ${duration / 1000}s ease`,
         zIndex,
       };

packages/components/swiper/_example/card.tsx

@@ -1,31 +1,39 @@
-import React from 'react';
-import { Swiper } from 'tdesign-react';
+import React, { useState } from 'react';
+import { Slider, Space, Swiper, Tag } from 'tdesign-react';
 
 const { SwiperItem } = Swiper;
 
+const DEFAULT_SCALE = 210 / 332;
+
 export default function BasicSwiper() {
+  const [cardScale, setCardScale] = useState(DEFAULT_SCALE);
+
   return (
     <div className="tdesign-demo-block--swiper">
-      <Swiper type={'card'} height={280}>
-        <SwiperItem>
-          <div className="demo-item">1</div>
-        </SwiperItem>
-        <SwiperItem>
-          <div className="demo-item">2</div>
-        </SwiperItem>
-        <SwiperItem>
-          <div className="demo-item">3</div>
-        </SwiperItem>
-        <SwiperItem>
-          <div className="demo-item">4</div>
-        </SwiperItem>
-        <SwiperItem>
-          <div className="demo-item">5</div>
-        </SwiperItem>
-        <SwiperItem>
-          <div className="demo-item">6</div>
-        </SwiperItem>
-      </Swiper>
+      <Space direction="vertical" size={50} style={{ width: '800px' }}>
+        <Space direction="vertical" style={{ width: '100%' }}>
+          <Tag theme="primary" variant="outline">
+            卡片缩放比例
+          </Tag>
+          <Slider<number>
+            min={0}
+            max={1}
+            step={0.01}
+            value={cardScale}
+            onChange={setCardScale}
+            marks={{
+              [DEFAULT_SCALE]: 'Default',
+            }}
+          />
+        </Space>
+        <Swiper type="card" height={280} autoplay={false} cardScale={cardScale}>
+          {Array.from({ length: 6 }, (_, i) => (
+            <SwiperItem key={i + 1}>
+              <div className="demo-item">{i + 1}</div>
+            </SwiperItem>
+          ))}
+        </Swiper>
+      </Space>
     </div>
   );
 }

packages/components/swiper/_usage/props.json

@@ -47,21 +47,6 @@
     "defaultValue": true,
     "options": []
   },
-  {
-    "name": "theme",
-    "type": "enum",
-    "defaultValue": "light",
-    "options": [
-      {
-        "label": "light",
-        "value": "light"
-      },
-      {
-        "label": "dark",
-        "value": "dark"
-      }
-    ]
-  },
   {
     "name": "trigger",
     "type": "enum",

packages/components/swiper/defaultProps.ts

@@ -7,13 +7,13 @@ import { TdSwiperProps } from './type';
 export const swiperDefaultProps: TdSwiperProps = {
   animation: 'slide',
   autoplay: true,
+  cardScale: 210 / 332,
   defaultCurrent: 0,
   direction: 'horizontal',
   duration: 300,
   interval: 5000,
   loop: true,
   stopOnHover: true,
-  theme: 'light',
   trigger: 'hover',
   type: 'default',
 };

packages/components/swiper/swiper.en-US.md

@@ -8,27 +8,27 @@ name | type | default | description | required
 -- | -- | -- | -- | --
 className | String | - | className of component | N
 style | Object | - | CSS(Cascading Style Sheets)，Typescript: `React.CSSProperties` | N
-animation | String | slide | options：slide/fade | N
+animation | String | slide | options: slide/fade | N
 autoplay | Boolean | true | \- | N
+cardScale | Number | 210/332 | \- | N
 current | Number | 0 | \- | N
 defaultCurrent | Number | 0 | uncontrolled property | N
-direction | String | horizontal | options：horizontal/vertical | N
+direction | String | horizontal | options: horizontal/vertical | N
 duration | Number | 300 | \- | N
 height | Number | - | \- | N
 interval | Number | 5000 | \- | N
 loop | Boolean | true | \- | N
 navigation | TNode | - | Typescript: `SwiperNavigation \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N
 stopOnHover | Boolean | true | \- | N
-theme | String | light | options：light/dark | N
-trigger | String | hover | options：hover/click | N
-type | String | default | options：default/card | N
+trigger | String | hover | options: hover/click | N
+type | String | default | options: default/card | N
 onChange | Function |  | Typescript: `(current: number, context: { source: SwiperChangeSource }) => void`<br/>[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/swiper/type.ts)。<br/>`type SwiperChangeSource = 'autoplay' \| 'click' \| 'hover'`<br/> | N
 
 ### SwiperNavigation
 
 name | type | default | description | required
 -- | -- | -- | -- | --
-placement | String | inside | options：inside/outside | N
-showSlideBtn | String | always | options：always/hover/never | N
-size | String | medium | options：small/medium/large | N
+placement | String | inside | options: inside/outside | N
+showSlideBtn | String | always | options: always/hover/never | N
+size | String | medium | options: small/medium/large | N
 type | String | - | Typescript: `SwiperNavigationType` `type SwiperNavigationType = 'dots' \| 'dots-bar' \| 'bars' \| 'fraction'`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/swiper/type.ts) | N

packages/components/swiper/swiper.md

@@ -1,6 +1,7 @@
 :: BASE_DOC ::
 
 ## API
+
 ### Swiper Props
 
 名称 | 类型 | 默认值 | 描述 | 必传
@@ -9,6 +10,7 @@ className | String | - | 类名 | N
 style | Object | - | 样式，TS 类型：`React.CSSProperties` | N
 animation | String | slide | 轮播切换动画效果类型：滑动、淡入淡出等。可选项：slide/fade | N
 autoplay | Boolean | true | 是否自动播放 | N
+cardScale | Number | 210/332 | 卡片模式下非当前展示轮播图的缩放比例 | N
 current | Number | 0 | 当前轮播在哪一项（下标） | N
 defaultCurrent | Number | 0 | 当前轮播在哪一项（下标）。非受控属性 | N
 direction | String | horizontal | 轮播滑动方向，包括横向滑动和纵向滑动两个方向。可选项：horizontal/vertical | N
@@ -18,7 +20,6 @@ interval | Number | 5000 | 轮播间隔时间 | N
 loop | Boolean | true | 是否循环播放 | N
 navigation | TNode | - | 导航器全部配置。TS 类型：`SwiperNavigation \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N
 stopOnHover | Boolean | true | 是否悬浮时停止轮播 | N
-theme | String | light | 深色模式和浅色模式。可选项：light/dark | N
 trigger | String | hover | 触发切换的方式：悬浮、点击等。可选项：hover/click | N
 type | String | default | 样式类型：默认样式、卡片样式。可选项：default/card | N
 onChange | Function |  | TS 类型：`(current: number, context: { source: SwiperChangeSource }) => void`<br/>轮播切换时触发。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/swiper/type.ts)。<br/>`type SwiperChangeSource = 'autoplay' \| 'click' \| 'hover'`<br/> | N

packages/components/swiper/type.ts

@@ -17,6 +17,11 @@ export interface TdSwiperProps {
    * @default true
    */
   autoplay?: boolean;
+  /**
+   * 卡片模式下非当前展示轮播图的缩放比例
+   * @default 210/332
+   */
+  cardScale?: number;
   /**
    * 当前轮播在哪一项（下标）
    * @default 0
@@ -60,11 +65,6 @@ export interface TdSwiperProps {
    * @default true
    */
   stopOnHover?: boolean;
-  /**
-   * 深色模式和浅色模式
-   * @default light
-   */
-  theme?: 'light' | 'dark';
   /**
    * 触发切换的方式：悬浮、点击等
    * @default hover