From 3da3dfe7dd2c625f5640abb15b9917aad2276362 Mon Sep 17 00:00:00 2001
From: neverland <chenjiahan@youzan.com>
Date: Wed, 3 Feb 2021 10:57:52 +0800
Subject: [PATCH] chore(ActionSheet): use tsx (#8071)

---
 src/action-sheet/demo/index.vue          | 12 +++++++-----
 src/action-sheet/{index.js => index.tsx} | 18 +++++++++++++++---
 2 files changed, 22 insertions(+), 8 deletions(-)
 rename src/action-sheet/{index.js => index.tsx} (89%)

diff --git a/src/action-sheet/demo/index.vue b/src/action-sheet/demo/index.vue
index 98a19122b..9cd704800 100644
--- a/src/action-sheet/demo/index.vue
+++ b/src/action-sheet/demo/index.vue
@@ -51,9 +51,10 @@
   </van-action-sheet>
 </template>
 
-<script>
+<script lang="ts">
 import { computed, reactive, toRefs } from 'vue';
 import { useTranslate } from '@demo/use-translate';
+import { ActionSheetAction } from '..';
 import Toast from '../../toast';
 
 const i18n = {
@@ -100,28 +101,29 @@ export default {
       },
     });
 
-    const simpleActions = computed(() => [
+    const simpleActions = computed<ActionSheetAction[]>(() => [
       { name: t('option1') },
       { name: t('option2') },
       { name: t('option3') },
     ]);
 
-    const statusActions = computed(() => [
+    const statusActions = computed<ActionSheetAction[]>(() => [
       { name: t('coloredOption'), color: '#ee0a24' },
       { name: t('disabledOption'), disabled: true },
       { loading: true },
     ]);
 
-    const actionsWithDescription = computed(() => [
+    const actionsWithDescription = computed<ActionSheetAction[]>(() => [
       { name: t('option1') },
       { name: t('option2') },
       { name: t('option3'), subname: t('subname') },
     ]);
 
-    const onSelect = (item) => {
+    const onSelect = (item: ActionSheetAction) => {
       state.show.basic = false;
       Toast(item.name);
     };
+
     const onCancel = () => Toast(t('cancel'));
 
     return {
diff --git a/src/action-sheet/index.js b/src/action-sheet/index.tsx
similarity index 89%
rename from src/action-sheet/index.js
rename to src/action-sheet/index.tsx
index 99a86c070..b8f915773 100644
--- a/src/action-sheet/index.js
+++ b/src/action-sheet/index.tsx
@@ -1,3 +1,5 @@
+import { PropType } from 'vue';
+
 // Utils
 import { createNamespace, pick } from '../utils';
 
@@ -8,11 +10,21 @@ import Loading from '../loading';
 
 const [createComponent, bem] = createNamespace('action-sheet');
 
+export type ActionSheetAction = {
+  name?: string;
+  color?: string;
+  subname?: string;
+  loading?: boolean;
+  disabled?: boolean;
+  callback?: (action: ActionSheetAction) => void;
+  className?: any;
+};
+
 export default createComponent({
   props: {
     ...popupSharedProps,
     title: String,
-    actions: Array,
+    actions: Array as PropType<ActionSheetAction[]>,
     cancelText: String,
     description: String,
     closeOnPopstate: Boolean,
@@ -40,7 +52,7 @@ export default createComponent({
   setup(props, { slots, emit }) {
     const popupPropKeys = Object.keys(popupSharedProps);
 
-    const onUpdateShow = (show) => {
+    const onUpdateShow = (show: boolean) => {
       emit('update:show', show);
     };
 
@@ -77,7 +89,7 @@ export default createComponent({
       }
     };
 
-    const renderOption = (item, index) => {
+    const renderOption = (item: ActionSheetAction, index: number) => {
       const {
         name,
         color,