Chore/main

CHANGELOG.md

@@ -5,6 +5,20 @@ toc: false
 spline: explain
 ---
 
+## 🌈 0.13.0 `2025-04-18` 
+### 🚀 Features
+- `Icon`: 图标库版本更新到 `0.4.4`([#590](https://github.com/Tencent/tdesign-mobile-react/pull/590))
+- `Toast`: 新增 `warning` 主题 @betavs ([#589](https://github.com/Tencent/tdesign-mobile-react/pull/589))
+- `Fab`: 新增 `draggable`，`yBounds `，`onDragEnd` 和 `onDragStart ` 等属性，支持组件拖拽 @novlan1 ([#594](https://github.com/Tencent/tdesign-mobile-react/pull/594))
+- `List`: 新增 `List` 组件 @feaswcy ([#463](https://github.com/Tencent/tdesign-mobile-react/pull/463))
+- `ActionSheet`: 新增 `ActionSheet` 组件 @TianlunXiong ([#471](https://github.com/Tencent/tdesign-mobile-react/pull/471))
+- `Progress`: 新增 `size` 属性，仅在环形进度条有效 @anlyyao ([#609](https://github.com/Tencent/tdesign-mobile-react/pull/609))
+- `CollapsePanel`: 优化面板折叠动画 @anlyyao ([#611](https://github.com/Tencent/tdesign-mobile-react/pull/611))
+### 🐞 Bug Fixes
+- `Textarea`: 修复传入参数类型错误 @RSS1102 ([#591](https://github.com/Tencent/tdesign-mobile-react/pull/591))；修复 `iOS` 真机上输入内容重复的问题，并补充 `onCompositionstart` 和 `onCompositionend` 属性 @anlyyao ([#601](https://github.com/Tencent/tdesign-mobile-react/pull/601))
+### 🚧 Others
+- `site`: 站点接入主题生成器 @RylanBot ([#604](https://github.com/Tencent/tdesign-mobile-react/pull/604))
+
 ## 🌈 0.12.0 `2025-03-12` 
 ### 🚨 Breaking Changes
 - `Dialog`: 新增 `closeBtn`、`width`、`overlayProps` 属性和 `middle`、`top` 插槽，存在 `DOM` 调整 @epoll-j ([#548](https://github.com/Tencent/tdesign-mobile-react/pull/548))

package.json

@@ -1,6 +1,6 @@
 {
   "name": "tdesign-mobile-react",
-  "version": "0.13.0-beta",
+  "version": "0.13.0",
   "description": "TDesign Component for Mobile React",
   "title": "tdesign-mobile-react",
   "main": "cjs/index.js",
@@ -162,14 +162,12 @@
   },
   "dependencies": {
     "@popperjs/core": "^2.11.8",
-    "@react-spring/web": "9.6.1",
     "@use-gesture/react": "^10.2.10",
     "ahooks": "^3.1.9",
     "classnames": "^2.3.1",
     "dayjs": "^1.11.13",
     "hoist-non-react-statics": "^3.3.2",
     "lodash-es": "^4.17.21",
-    "react-spring": "9.6.1",
     "react-transition-group": "^4.4.2",
     "smoothscroll-polyfill": "^0.4.4",
     "tdesign-icons-react": "^0.4.4",

site/mobile/components/style/index.less

@@ -6,10 +6,12 @@
 
 #app {
   min-height: 100vh;
+  height: 100vh;
   display: flex;
   flex-direction: column;
 }
 
 .tdesign-mobile-demo {
   flex: 1;
+  overflow-y: scroll;
 }

site/mobile/mobile.config.js

@@ -35,6 +35,11 @@ export default {
       name: 'grid',
       component: () => import('tdesign-mobile-react/grid/_example/index.tsx'),
     },
+    {
+      title: 'List 列表',
+      name: 'list',
+      component: () => import('tdesign-mobile-react/list/_example/index.tsx'),
+    },
     {
       title: 'Image 图片',
       name: 'image',
@@ -245,7 +250,7 @@ export default {
     {
       title: 'Fab 悬浮按钮',
       name: 'fab',
-      component: () => import('tdesign-mobile-react/fab/_example/index.jsx'),
+      component: () => import('tdesign-mobile-react/fab/_example/index.tsx'),
     },
     {
       title: 'NoticeBar 公告栏',
@@ -257,6 +262,11 @@ export default {
       name: 'result',
       component: () => import('tdesign-mobile-react/result/_example/index.tsx'),
     },
+    {
+      title: 'ActionSheet 动作面板',
+      name: 'action-sheet',
+      component: () => import('tdesign-mobile-react/action-sheet/_example/index.tsx'),
+    },
     {
       title: 'Link 链接',
       name: 'link',
@@ -297,5 +307,10 @@ export default {
       name: 'config-provider',
       component: () => import('tdesign-mobile-react/config-provider/_example/index.tsx'),
     },
+    {
+      title: 'ActionSheet 动作面板',
+      name: 'action-sheet',
+      component: () => import('tdesign-mobile-react/action-sheet/_example/index.tsx'),
+    },
   ],
 };

site/style/mobile/index.less

@@ -3,15 +3,15 @@
 
 :root,
 :root[theme-mode='light'] {
-  --bg-color-demo: #fff;
+  --bg-color-demo: #f6f6f6;
   --text-primary: #181818;
   --text-secondary: #181818;
 }
 
 :root[theme-mode='dark'] {
   --bg-color-demo: #181818;
   --text-primary: rgba(255, 255, 255, 0.9);
-  --text-secondary: rgba(255, 255, 255, .55);
+  --text-secondary: rgba(255, 255, 255, 0.55);
 }
 
 .tdesign-demo-topnav {
@@ -20,12 +20,14 @@
   align-items: center;
   justify-content: center;
   height: 50px;
-  background-color: var(--bg-color-demo);
+  background-color: var(--td-bg-color-container);
   color: var(--text-primary);
   box-shadow: @shadow-level-1;
+
   &-title {
     font-size: 18px;
   }
+
   &__back {
     position: absolute;
     left: 16px;

site/web/site.config.js

@@ -388,12 +388,12 @@ export const docs = [
       //   path: '/mobile-react/components/image-viewer',
       //   component: () => import('tdesign-mobile-react/image-viewer/image-viewer.md'),
       // },
-      // {
-      //   title: 'List 列表',
-      //   name: 'list',
-      //   path: '/mobile-react/components/list',
-      //   component: () => import('tdesign-mobile-react/list/list.md'),
-      // },
+      {
+        title: 'List 列表',
+        name: 'list',
+        path: '/mobile-react/components/list',
+        component: () => import('tdesign-mobile-react/list/list.md'),
+      },
       {
         title: 'Progress 进度条',
         titleEn: 'Progress',
@@ -456,12 +456,12 @@ export const docs = [
     titleEn: 'FeedBack',
     type: 'component',
     children: [
-      // {
-      //   title: 'ActionSheet 动作面板',
-      //   name: 'action-sheet',
-      //   path: '/mobile-react/components/actionsheet',
-      //   component: () => import('tdesign-mobile-react/action-sheet/action-sheet.md'),
-      // },
+      {
+        title: 'ActionSheet 动作面板',
+        name: 'action-sheet',
+        path: '/mobile-react/components/actionsheet',
+        component: () => import('tdesign-mobile-react/action-sheet/action-sheet.md'),
+      },
       {
         title: 'Dialog 对话框',
         titleEn: 'Dialog',

src/action-sheet/ActionSheet.tsx

@@ -0,0 +1,90 @@
+import React from 'react';
+import cx from 'classnames';
+import type { TdActionSheetProps } from './type';
+import { Button } from '../button';
+import { Popup } from '../popup';
+import { StyledProps } from '../common';
+import useControlled from '../hooks/useControlled';
+import { usePrefixClass } from '../hooks/useClass';
+import useDefaultProps from '../hooks/useDefaultProps';
+import { actionSheetDefaultProps } from './defaultProps';
+import { ActionSheetList } from './ActionSheetList';
+import { ActionSheetGrid } from './ActionSheetGrid';
+
+export interface ActionSheetProps extends TdActionSheetProps, StyledProps {}
+
+export const ActionSheet: React.FC<ActionSheetProps> = (props) => {
+  const {
+    items,
+    theme,
+    align,
+    showOverlay,
+    showCancel,
+    cancelText,
+    description,
+    popupProps,
+    onClose,
+    onSelected,
+    onCancel,
+    count,
+  } = useDefaultProps<ActionSheetProps>(props, actionSheetDefaultProps);
+
+  const actionSheetClass = usePrefixClass('action-sheet');
+
+  const [visible, setVisible] = useControlled(props, 'visible', (visible, context) => {
+    !visible && onClose?.(context);
+  });
+
+  const handleCancel = (ev) => {
+    onCancel?.(ev);
+  };
+
+  const handleSelected = (idx) => {
+    const found = items?.[idx];
+
+    onSelected?.(found, idx);
+
+    setVisible(false, { trigger: 'select' });
+  };
+
+  return (
+    <Popup
+      {...popupProps}
+      visible={visible}
+      className={actionSheetClass}
+      placement="bottom"
+      onVisibleChange={(value) => {
+        setVisible(value, { trigger: 'overlay' });
+      }}
+      showOverlay={showOverlay}
+    >
+      <div className={cx(`${actionSheetClass}__content`)}>
+        {description ? (
+          <p
+            className={cx({
+              [`${actionSheetClass}__description`]: true,
+              [`${actionSheetClass}__description--left`]: align === 'left',
+              [`${actionSheetClass}__description--grid`]: theme === 'grid',
+            })}
+          >
+            {description}
+          </p>
+        ) : null}
+        {theme === 'list' ? <ActionSheetList items={items} align={align} onSelected={handleSelected} /> : null}
+        {theme === 'grid' ? (
+          <ActionSheetGrid items={items} align={align} onSelected={handleSelected} count={count} />
+        ) : null}
+        {showCancel ? (
+          <div className={`${actionSheetClass}__footer`}>
+            <div className={`${actionSheetClass}__gap-${theme}`}></div>
+            <Button className={`${actionSheetClass}__cancel`} variant="text" block onClick={handleCancel}>
+              {cancelText || '取消'}
+            </Button>
+          </div>
+        ) : null}
+      </div>
+    </Popup>
+  );
+};
+
+export default ActionSheet;

src/action-sheet/ActionSheetGrid.tsx

@@ -0,0 +1,88 @@
+import React, { useEffect, useMemo, useState } from 'react';
+import cx from 'classnames';
+
+import type { ActionSheetProps } from './ActionSheet';
+import type { ActionSheetItem } from './type';
+
+import { Grid, GridItem } from '../grid';
+import { Swiper, SwiperProps } from '../swiper';
+import { usePrefixClass } from '../hooks/useClass';
+
+type ActionSheetGridProps = Pick<ActionSheetProps, 'items' | 'align'> & {
+  onSelected?: (idx: number) => void;
+  count?: number;
+};
+
+export function ActionSheetGrid(props: ActionSheetGridProps) {
+  const { items = [], count = 8, onSelected } = props;
+
+  const actionSheetClass = usePrefixClass('action-sheet');
+
+  const [direction, setDirection] = useState<SwiperProps['direction']>('vertical');
+
+  const gridColumn = Math.ceil(count / 2);
+  const pageNum = Math.ceil(items.length / count);
+
+  const actionItems = useMemo(() => {
+    const res: ActionSheetProps['items'][] = [];
+    for (let i = 0; i < pageNum; i++) {
+      const temp = items.slice(i * count, (i + 1) * count);
+      res.push(temp);
+    }
+    return res;
+  }, [items, count, pageNum]);
+
+  useEffect(() => {
+    setDirection('horizontal');
+  }, []);
+
+  return (
+    <div
+      className={cx({
+        [`${actionSheetClass}__grid`]: true,
+        [`${actionSheetClass}__grid--swiper`]: pageNum > 1,
+        [`${actionSheetClass}__dots`]: pageNum > 1,
+      })}
+    >
+      <Swiper
+        autoplay={false}
+        className={cx(`${actionSheetClass}__swiper-wrap--base`, pageNum > 1 && `${actionSheetClass}__swiper-wrap`)}
+        loop={false}
+        navigation={pageNum > 1 ? { type: 'dots' } : undefined}
+        direction={direction}
+        height={pageNum > 1 ? 208 : 196}
+      >
+        {actionItems.map((item, idx1) => (
+          <Swiper.SwiperItem key={idx1}>
+            <Grid gutter={0} column={gridColumn} style={{ width: '100%' }}>
+              {item.map((it, idx2) => {
+                let label: string;
+                let image: React.ReactNode;
+                let badge: ActionSheetItem['badge'];
+                if (typeof it === 'string') {
+                  label = it;
+                } else {
+                  label = it.label;
+                  image = it.icon;
+                  badge = it.badge;
+                }
+                return (
+                  <GridItem
+                    key={`${idx1}-${idx2}`}
+                    image={image}
+                    text={label}
+                    badge={badge}
+                    // @ts-ignore
+                    onClick={() => {
+                      onSelected?.(idx1 * count + idx2);
+                    }}
+                  />
+                );
+              })}
+            </Grid>
+          </Swiper.SwiperItem>
+        ))}
+      </Swiper>
+    </div>
+  );
+}