feat(action-sheet): 新增 ActionSheet组件

site/mobile/mobile.config.js

@@ -237,5 +237,10 @@ export default {
       name: 'table',
       component: () => import('tdesign-mobile-react/table/_example/index.jsx'),
     },
+    {
+      title: 'ActionSheet 动作面板',
+      name: 'action-sheet',
+      component: () => import('tdesign-mobile-react/action-sheet/_example/index.tsx'),
+    },
   ],
 };

site/web/site.config.js

@@ -304,12 +304,12 @@ export default {
       title: '消息提醒',
       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: 'BackTop 返回顶部',
           name: 'back-top',

src/action-sheet/ActionSheet.tsx

@@ -0,0 +1,107 @@
+import React from 'react';
+import cx from 'classnames';
+
+import type { TdActionSheetProps } from './type';
+
+import { Button } from '../button';
+import { Popup } from '../popup';
+import useConfig from '../_util/useConfig';
+import useDefault from '../_util/useDefault';
+import useDefaultProps from '../hooks/useDefaultProps';
+import { actionSheetDefaultProps } from './defaultProps';
+import { ActionSheetList } from './ActionSheetList';
+import { ActionSheetGrid } from './ActionSheetGrid';
+
+export type ActionSheetProps = TdActionSheetProps & {
+  showOverlay?: boolean;
+  onVisibleChange?: (value: boolean) => void;
+  gridHeight?: number;
+};
+
+export const ActionSheet: React.FC<ActionSheetProps> = (props) => {
+  const {
+    defaultVisible,
+    items,
+    visible: visibleFromProps,
+    theme,
+    align,
+    showOverlay,
+    showCancel,
+    cancelText,
+    description,
+    onClose,
+    onSelected,
+    onCancel,
+    onVisibleChange,
+    count,
+    gridHeight,
+  } = useDefaultProps<ActionSheetProps>(props, actionSheetDefaultProps);
+
+  const { classPrefix } = useConfig();
+
+  const cls = `${classPrefix}-action-sheet`;
+
+  const [visible, onChange] = useDefault(visibleFromProps, defaultVisible, onVisibleChange);
+
+  const handleCancel = (ev) => {
+    onCancel?.(ev);
+  };
+
+  const handleSelected = (idx) => {
+    const found = items?.[idx];
+
+    onSelected?.(found, idx);
+
+    onClose?.('select');
+
+    onChange(false);
+  };
+
+  return (
+    <Popup
+      visible={visible}
+      className={cls}
+      placement="bottom"
+      onVisibleChange={(value) => {
+        onChange(value);
+
+        if (!value) onClose?.('overlay');
+      }}
+      showOverlay={showOverlay}
+    >
+      <div className={cx(`${cls}__content`)}>
+        {description ? (
+          <p
+            className={cx({
+              [`${cls}__description`]: true,
+              [`${cls}__description--left`]: align === 'left',
+              [`${cls}__description--grid`]: theme === 'grid',
+            })}
+          >
+            {description}
+          </p>
+        ) : null}
+        {theme === 'list' ? <ActionSheetList items={items} align={align} onSelected={handleSelected} /> : null}
+        {theme === 'grid' && visible ? (
+          <ActionSheetGrid
+            items={items}
+            align={align}
+            onSelected={handleSelected}
+            count={count}
+            gridHeight={gridHeight}
+          />
+        ) : null}
+        {showCancel ? (
+          <div className={`${cls}__footer`}>
+            <div className={`${cls}__gap-${theme}`}></div>
+            <Button className={`${cls}__cancel`} variant="text" block onClick={handleCancel}>
+              {cancelText}
+            </Button>
+          </div>
+        ) : null}
+      </div>
+    </Popup>
+  );
+};
+
+export default ActionSheet;

src/action-sheet/ActionSheetGrid.tsx

@@ -0,0 +1,89 @@
+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 useConfig from '../_util/useConfig';
+
+type ActionSheetGridProps = Pick<ActionSheetProps, 'items' | 'align'> & {
+  onSelected?: (idx: number) => void;
+  count?: number;
+  gridHeight?: number;
+};
+
+export function ActionSheetGrid(props: ActionSheetGridProps) {
+  const { items = [], count = 8, onSelected, gridHeight } = props;
+  const { classPrefix } = useConfig();
+  const cls = `${classPrefix}-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({
+        [`${cls}__grid`]: true,
+        [`${cls}__grid--swiper`]: pageNum > 1,
+        [`${cls}__dots`]: pageNum > 1,
+      })}
+    >
+      <Swiper
+        autoplay={false}
+        className={cx(`${cls}__swiper-wrap--base`, pageNum > 1 && `${cls}__swiper-wrap`)}
+        loop={false}
+        navigation={pageNum > 1 ? { type: 'dots' } : undefined}
+        direction={direction}
+        height={gridHeight || (pageNum > 1 ? 208 : 196)}
+      >
+        {actionItems.map((item, idx1) => (
+          <Swiper.SwiperItem key={idx1}>
+            <Grid gutter={0} column={gridColumn}>
+              {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>
+  );
+}

src/action-sheet/ActionSheetList.tsx

@@ -0,0 +1,78 @@
+import React from 'react';
+import cx from 'classnames';
+
+import type { TElement } from 'tdesign-mobile-react/common';
+import type { ActionSheetProps } from './ActionSheet';
+import type { ActionSheetItem } from './type';
+
+import { Button } from '../button';
+import { Badge } from '../badge';
+import useConfig from '../_util/useConfig';
+
+type ActionSheetListProps = Pick<ActionSheetProps, 'items' | 'align'> & {
+  onSelected?: (idx: number) => void;
+};
+
+export function ActionSheetList(props: ActionSheetListProps) {
+  const { items = [], align, onSelected } = props;
+  const { classPrefix } = useConfig();
+  const cls = `${classPrefix}-action-sheet`;
+
+  return (
+    <div className={cx(`${cls}__list`)}>
+      {items?.map((item, idx) => {
+        let label: React.ReactNode;
+        let disabled: ActionSheetItem['disabled'];
+        let icon: ActionSheetItem['icon'];
+        let color: ActionSheetItem['color'];
+
+        if (typeof item === 'string') {
+          label = <span className={cx([`${cls}__list-item-text`])}>{item}</span>;
+        } else {
+          if (item?.badge) {
+            label = (
+              <Badge
+                count={item?.badge?.count}
+                max-count={item?.badge?.maxCount}
+                dot={item?.badge?.dot}
+                content={item?.badge?.content}
+                size={item?.badge?.size}
+                offset={item?.badge?.offset || [-16, 20]}
+              >
+                <span className={cx([`${cls}__list-item-text`])}>{item?.label}</span>
+              </Badge>
+            );
+          } else {
+            label = <span className={cx([`${cls}__list-item-text`])}>{item?.label}</span>;
+          }
+          disabled = item?.disabled;
+          icon = item?.icon;
+          color = item?.color;
+        }
+
+        return (
+          <Button
+            key={idx}
+            variant="text"
+            block
+            className={cx({
+              [`${cls}__list-item`]: true,
+              [`${cls}__list-item--left`]: align === 'left',
+            })}
+            onClick={() => {
+              onSelected?.(idx);
+            }}
+            disabled={disabled}
+            icon={icon as TElement}
+            style={{
+              color,
+            }}
+            shape="rectangle"
+          >
+            {label}
+          </Button>
+        );
+      })}
+    </div>
+  );
+}

src/action-sheet/ActionSheetMethod.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import renderToBody from '../_util/renderToBody';
+import ActionSheet from './ActionSheet';
+import type { ActionSheetProps } from './ActionSheet';
+import { actionSheetDefaultProps } from './defaultProps';
+
+let destroyRef: () => void;
+
+export function show(config: Partial<ActionSheetProps>) {
+  destroyRef?.();
+
+  const app = document.createElement('div');
+
+  document.body.appendChild(app);
+
+  destroyRef = renderToBody(<ActionSheet {...actionSheetDefaultProps} {...config} visible />);
+}
+
+export function close() {
+  destroyRef?.();
+}

src/action-sheet/_example/align.tsx

@@ -0,0 +1,44 @@
+import React, { useState } from 'react';
+import { Button, ActionSheet } from 'tdesign-mobile-react';
+
+export default function ListExample() {
+  const [alignCenterVisible, setAlignCenterVisible] = useState(false);
+  const [alignLeftVisible, setAlignLeftVisible] = useState(false);
+
+  return (
+    <div className="action-sheet-demo">
+      <div className="action-sheet-demo-btns">
+        <Button block variant="outline" theme="primary" onClick={() => setAlignCenterVisible(true)}>
+          居中列表型
+        </Button>
+        <Button block variant="outline" theme="primary" onClick={() => setAlignLeftVisible(true)}>
+          左对齐列表型
+        </Button>
+      </div>
+      <ActionSheet
+        align="center"
+        visible={alignCenterVisible}
+        description="动作面板描述文字"
+        items={['选项一', '选项二', '选项三', '选项四']}
+        onClose={() => {
+          setAlignCenterVisible(false);
+        }}
+        onCancel={() => {
+          setAlignCenterVisible(false);
+        }}
+      />
+      <ActionSheet
+        align="left"
+        visible={alignLeftVisible}
+        description="动作面板描述文字"
+        items={['选项一', '选项二', '选项三', '选项四']}
+        onClose={() => {
+          setAlignLeftVisible(false);
+        }}
+        onCancel={() => {
+          setAlignLeftVisible(false);
+        }}
+      />
+    </div>
+  );
+}