refactor(action-sheet): sfc to tsx (#1445)

* perf(action-sheet-list): sfc to tsx

* perf(action-sheet): sfc to tsx

* fix: fix the lint issue

---------

Co-authored-by: siyaojia <jiasy1616@github.com>

src/action-sheet/__test__/__snapshots__/demo.test.jsx.snap

@@ -239,7 +239,7 @@ exports[`ActionSheet > ActionSheet listVue demo works fine 1`] = `
         class="t-button__content"
       >
         
-        带微标列表型
+        带徽标列表型
         
       </span>
       <!---->
@@ -373,7 +373,7 @@ exports[`ActionSheet > ActionSheet mobileVue demo works fine 1`] = `
             class="t-button__content"
           >
             
-            带微标列表型
+            带徽标列表型
             
           </span>
           <!---->

src/action-sheet/__test__/index.test.jsx

@@ -1,7 +1,7 @@
 import { describe, it, expect, vi } from 'vitest';
 import { mount } from '@vue/test-utils';
-import ActionSheet from '../action-sheet.vue';
-import MenuGrid from '../action-sheet-grid.vue';
+import ActionSheet from '../action-sheet';
+import MenuGrid from '../action-sheet-grid';
 import { GridItem as TGridItem } from '../../grid/index';
 import TBadge from '../../badge/index';
 import config from '../../config';

src/action-sheet/action-sheet-grid.tsx

@@ -0,0 +1,108 @@
+import { defineComponent, computed } from 'vue';
+import config from '../config';
+import { Grid as TGrid, GridItem as TGridItem } from '../grid';
+import { Swiper as TSwiper, SwiperItem as TSwiperItem } from '../swiper';
+import { ActionSheetItem } from './type';
+
+const { prefix } = config;
+const name = `${prefix}-action-sheet`;
+
+export default defineComponent({
+  components: { TGrid, TGridItem, TSwiper, TSwiperItem },
+  props: {
+    items: {
+      type: Array<ActionSheetItem>,
+      required: true,
+    },
+    count: {
+      type: Number,
+      default: 8,
+    },
+    selected: {
+      type: Function,
+      default: undefined,
+    },
+  },
+  emits: ['selected'],
+  setup(props, { emit }) {
+    const gridColumn = computed(() => Math.ceil(props.count / 2));
+    const pageNum = computed(() => Math.ceil(props.items.length / props.count));
+    const actionItems = computed(() => {
+      const res: ActionSheetItem[][] = [];
+      for (let i = 0; i < pageNum.value; i++) {
+        const temp = props.items.slice(i * props.count, (i + 1) * props.count);
+        res.push(temp);
+      }
+      return res;
+    });
+    const gridClasses = computed(() => ({
+      [`${name}__grid`]: true,
+      [`${name}__grid--swiper`]: pageNum.value > 1,
+      [`${name}__dots`]: pageNum.value > 1,
+    }));
+    const handleSelected = (i: number) => {
+      emit('selected', i);
+      console.log('111', i);
+    };
+    return () => {
+      const swiper = () => {
+        const swiperItems = actionItems.value.map((items, i) => {
+          const gridItems = items.map((item, index) => (
+            <t-grid-item
+              key={index}
+              text={item.label}
+              image={item.icon}
+              badge={item.badge}
+              onClick={(event: MouseEvent) => {
+                event.preventDefault();
+                handleSelected(i * props.count + index);
+              }}
+            />
+          ));
+          return (
+            <t-swiper-item key={i}>
+              <t-grid column={gridColumn.value}>{gridItems}</t-grid>
+            </t-swiper-item>
+          );
+        });
+        if (actionItems.value.length > 1) {
+          return (
+            <t-swiper
+              autoplay={false}
+              pagination-position="bottom"
+              navigation={{ type: 'dots', showControls: false }}
+              loop={false}
+              class={`${name}__swiper-wrap`}
+              height={192}
+            >
+              {swiperItems}
+            </t-swiper>
+          );
+        }
+        return null;
+      };
+      const grid = () => {
+        if (actionItems.value.length === 1) {
+          const items = actionItems.value[0].map((item, index) => (
+            <t-grid-item
+              key={index}
+              text={item.label}
+              image={item.icon}
+              badge={item.badge}
+              onClick={() => handleSelected(index)}
+            />
+          ));
+
+          return <t-grid column={gridColumn.value}>{items}</t-grid>;
+        }
+        return null;
+      };
+      return (
+        <div class={gridClasses.value}>
+          {swiper()}
+          {grid()}
+        </div>
+      );
+    };
+  },
+});

src/action-sheet/action-sheet-list.tsx

@@ -0,0 +1,84 @@
+import { computed, defineComponent, PropType, toRefs } from 'vue';
+import TButton from '../button';
+import TBadge from '../badge';
+import config from '../config';
+import { ActionSheetItem } from './type';
+import { useTNodeDefault } from '../hooks/tnode';
+
+const { prefix } = config;
+const name = `${prefix}-action-sheet`;
+
+export default defineComponent({
+  name,
+  components: { TButton, TBadge },
+  props: {
+    items: {
+      type: Array as PropType<ActionSheetItem[]>,
+      required: true,
+    },
+    align: {
+      type: String as PropType<'left' | 'center'>,
+      default: 'center',
+    },
+  },
+  emits: ['selected'],
+  setup(props, { emit }) {
+    const renderTNodeJSX = useTNodeDefault();
+
+    const { align, items } = toRefs(props);
+    const handleSelected = (index: number) => {
+      emit('selected', index);
+    };
+    const itemClasses = computed(() => ({
+      [`${name}__list-item`]: true,
+      [`${name}__list-item--left`]: align.value === 'left',
+    }));
+
+    return () => {
+      const renderButtonNode = () => {
+        const renderBadgeNode = (item: ActionSheetItem) => {
+          if (item.badge) {
+            const content = () => {
+              if (item.badge.dot || item.badge.count) {
+                return (
+                  <t-badge
+                    count={item.badge.count}
+                    max-count={item.badge.maxCount || 99}
+                    dot={item.badge.dot}
+                    content={item.badge.content}
+                    size={item.badge.size}
+                    offset={item.badge.offset || [-16, 20]}
+                  >
+                    <span class={`${name}__list-item-text`}> {item.label}</span>
+                  </t-badge>
+                );
+              }
+              return renderTNodeJSX('badge', {
+                defaultNode: <span class={`${name}__list-item-text`}>{item.label}</span>,
+              });
+            };
+            return content();
+          }
+          return <span class={`${name}__list-item-text`}>{item.label}</span>;
+        };
+        const buttonList = items.value.map((item, index) => (
+          <t-button
+            key={index}
+            variant={'text'}
+            block
+            class={[itemClasses.value, { [`${name}__list-item--disabled`]: item.disabled }]}
+            disabled={item.disabled}
+            icon={item.icon}
+            style={{ color: item.color }}
+            onClick={() => handleSelected(index)}
+          >
+            {renderBadgeNode(item)}
+          </t-button>
+        ));
+        return buttonList;
+      };
+
+      return <div class={`${name}__list`}>{renderButtonNode()}</div>;
+    };
+  },
+});