From 5d369072fec568ef5cf758858d1b0f23722cdfd8 Mon Sep 17 00:00:00 2001
From: neverland <chenjiahan@youzan.com>
Date: Wed, 4 Aug 2021 16:02:19 +0800
Subject: [PATCH] types(SwipeCell): add SwipeCellInstance type (#9179)

---
 src/swipe-cell/README.md       | 13 ++++++++
 src/swipe-cell/README.zh-CN.md | 13 ++++++++
 src/swipe-cell/SwipeCell.tsx   | 61 ++++++++++++++++++++++------------
 src/swipe-cell/index.ts        |  5 +++
 src/swipe-cell/types.ts        | 16 +++++++++
 5 files changed, 86 insertions(+), 22 deletions(-)
 create mode 100644 src/swipe-cell/types.ts

diff --git a/src/swipe-cell/README.md b/src/swipe-cell/README.md
index 7448729a6..623dabf95 100644
--- a/src/swipe-cell/README.md
+++ b/src/swipe-cell/README.md
@@ -146,6 +146,19 @@ Use [ref](https://v3.vuejs.org/guide/component-template-refs.html) to get SwipeC
 | open  | open SwipeCell  | position: `left \| right` | -            |
 | close | close SwipeCell | -                         | -            |
 
+### Types
+
+Get the type definition of the SwipeCell instance through `SwipeCellInstance`.
+
+```ts
+import { ref } from 'vue';
+import type { SwipeCellInstance } from 'vant';
+
+const swipeCellRef = ref<SwipeCellInstance>();
+
+swipeCellRef.value?.close();
+```
+
 ### CSS Variables
 
 The component provides the following CSS variables, which can be used to customize styles. Please refer to [ConfigProvider component](#/en-US/config-provider).
diff --git a/src/swipe-cell/README.zh-CN.md b/src/swipe-cell/README.zh-CN.md
index f40f8b2a3..70b1525d6 100644
--- a/src/swipe-cell/README.zh-CN.md
+++ b/src/swipe-cell/README.zh-CN.md
@@ -155,6 +155,19 @@ beforeClose 的第一个参数为对象，对象中包含以下属性：
 | open   | 打开单元格侧边栏 | position: `left \| right` | -      |
 | close  | 收起单元格侧边栏 | -                         | -      |
 
+### 类型定义
+
+通过 `SwipeCellInstance` 获取 SwipeCell 实例的类型定义。
+
+```ts
+import { ref } from 'vue';
+import type { SwipeCellInstance } from 'vant';
+
+const swipeCellRef = ref<SwipeCellInstance>();
+
+swipeCellRef.value?.close();
+```
+
 ### 样式变量
 
 组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。
diff --git a/src/swipe-cell/SwipeCell.tsx b/src/swipe-cell/SwipeCell.tsx
index 03f78400f..85e53a64b 100644
--- a/src/swipe-cell/SwipeCell.tsx
+++ b/src/swipe-cell/SwipeCell.tsx
@@ -1,4 +1,12 @@
-import { ref, Ref, reactive, computed, PropType, defineComponent } from 'vue';
+import {
+  ref,
+  Ref,
+  reactive,
+  computed,
+  PropType,
+  defineComponent,
+  ExtractPropTypes,
+} from 'vue';
 
 // Utils
 import { clamp, isDef, createNamespace, preventDefault } from '../utils';
@@ -9,25 +17,33 @@ import { useRect, useClickAway } from '@vant/use';
 import { useTouch } from '../composables/use-touch';
 import { useExpose } from '../composables/use-expose';
 
+// Types
+import type {
+  SwipeCellSide,
+  SwipeCellExpose,
+  SwipeCellPosition,
+} from './types';
+
 const [name, bem] = createNamespace('swipe-cell');
 
-export type SwipeCellSide = 'left' | 'right';
-export type SwipeCellPosition = SwipeCellSide | 'cell' | 'outside';
+const props = {
+  disabled: Boolean,
+  leftWidth: [Number, String],
+  rightWidth: [Number, String],
+  beforeClose: Function as PropType<Interceptor>,
+  stopPropagation: Boolean,
+  name: {
+    type: [Number, String],
+    default: '',
+  },
+};
+
+export type SwipeCellProps = ExtractPropTypes<typeof props>;
 
 export default defineComponent({
   name,
 
-  props: {
-    disabled: Boolean,
-    leftWidth: [Number, String],
-    rightWidth: [Number, String],
-    beforeClose: Function as PropType<Interceptor>,
-    stopPropagation: Boolean,
-    name: {
-      type: [Number, String],
-      default: '',
-    },
-  },
+  props,
 
   emits: ['open', 'close', 'click'],
 
@@ -154,13 +170,14 @@ export default defineComponent({
       }
     };
 
-    const getClickHandler =
-      (position: SwipeCellPosition, stop?: boolean) => (event: MouseEvent) => {
-        if (stop) {
-          event.stopPropagation();
-        }
-        onClick(position);
-      };
+    const getClickHandler = (position: SwipeCellPosition, stop?: boolean) => (
+      event: MouseEvent
+    ) => {
+      if (stop) {
+        event.stopPropagation();
+      }
+      onClick(position);
+    };
 
     const renderSideContent = (
       side: SwipeCellSide,
@@ -180,7 +197,7 @@ export default defineComponent({
       }
     };
 
-    useExpose({
+    useExpose<SwipeCellExpose>({
       open,
       close,
     });
diff --git a/src/swipe-cell/index.ts b/src/swipe-cell/index.ts
index edb900f52..f63aae7c3 100644
--- a/src/swipe-cell/index.ts
+++ b/src/swipe-cell/index.ts
@@ -5,3 +5,8 @@ const SwipeCell = withInstall<typeof _SwipeCell>(_SwipeCell);
 
 export default SwipeCell;
 export { SwipeCell };
+export type {
+  SwipeCellSide,
+  SwipeCellPosition,
+  SwipeCellInstance,
+} from './types';
diff --git a/src/swipe-cell/types.ts b/src/swipe-cell/types.ts
new file mode 100644
index 000000000..b46a68e46
--- /dev/null
+++ b/src/swipe-cell/types.ts
@@ -0,0 +1,16 @@
+import type { ComponentPublicInstance } from 'vue';
+import type { SwipeCellProps } from './SwipeCell';
+
+export type SwipeCellSide = 'left' | 'right';
+
+export type SwipeCellPosition = SwipeCellSide | 'cell' | 'outside';
+
+export type SwipeCellExpose = {
+  open: (side: SwipeCellSide) => void;
+  close: (position: SwipeCellPosition) => void;
+};
+
+export type SwipeCellInstance = ComponentPublicInstance<
+  SwipeCellProps,
+  SwipeCellExpose
+>;