fix: swipe 类型和文档优化

jdf2e · Jun 13, 2023 · dac88c6 · dac88c6
1 parent ac690ec
commit dac88c6
Show file tree

Hide file tree

Showing 6 changed files with 53 additions and 62 deletions.
diff --git a/src/packages/swipe/doc.en-US.md b/src/packages/swipe/doc.en-US.md
@@ -263,17 +263,17 @@ export default App;
 
 | Props                        | Description | Type          | Default&nbsp;&nbsp;&nbsp;&nbsp; |
 |------------------------------|-----------------|---------------|---------------|
-|name | identifier, which can be obtained in the event parameters | `number \| string` | - |
-|leftAction | contents of the left sliding area | `ReactNode` | - |
-|rightAction | content of right sliding area | `ReactNode` | - |
-|beforeClose | the callback function before closing returns `position` which is the direction of the sliding area  | `(position: 'left \|'right') => void` | - |
+|name | identifier, which can be obtained in the event parameters | `number \| string` | `-` |
+|leftAction | contents of the left sliding area | `ReactNode` | `-` |
+|rightAction | content of right sliding area | `ReactNode` | `-` |
+|beforeClose | the callback function before closing returns `position` which is the direction of the sliding area  | `(position: 'left \|'right') => void` | `-` |
 |disabled | disable sliding | `boolean` | `false` |
-|onOpen | open the cell sidebar | `(name, position): { name: string \| number, position: 'left' \| 'right' } => void` | - |
-|onClose | collapse the cell sidebar | `(name, position): { name: string \| number, position: 'left' \| 'right' } => void` | - |
-|onActionClick | triggered when clicking on the left or right | `(event: Event, position: 'left' \|'right') => void` | - |
-|onTouchStart | onTouchStart | `(event: Event) => void` | - |
-|onTouchMove | onTouchMove | `(event: Event) => void` | - |
-|onTouchEnd | onTouchEnd | `(event: Event) => void` | - |
+|onOpen | open the cell sidebar | `(name, position): { name: string \| number, position: 'left' \| 'right' } => void` | `-` |
+|onClose | collapse the cell sidebar | `(name, position): { name: string \| number, position: 'left' \| 'right' } => void` | `-` |
+|onActionClick | triggered when clicking on the left or right | `(event: Event, position: 'left' \|'right') => void` | `-` |
+|onTouchStart | onTouchStart | `(event: Event) => void` | `-` |
+|onTouchMove | onTouchMove | `(event: Event) => void` | `-` |
+|onTouchEnd | onTouchEnd | `(event: Event) => void` | `-` |
 
 ### Ref
 

diff --git a/src/packages/swipe/doc.md b/src/packages/swipe/doc.md
@@ -252,17 +252,17 @@ export default App;
 
 | 属性 | 说明                             | 类型   | 默认值           |
 |--------------|----------------------------------|--------|------------------|
-| name | 标识符，可以在事件参数中获取到 | `number \| string` | - |
-| leftAction | 左侧滑动区域的内容 | `ReactNode` | - |
-| rightAction | 右侧滑动区域的内容 | `ReactNode` | - |
-| beforeClose | 关闭前的回调函数，返回滑动区域所在方向 `position` | `(position: 'left \| 'right') => void` | - |
+| name | 标识符，可以在事件参数中获取到 | `number \| string` | `-` |
+| leftAction | 左侧滑动区域的内容 | `ReactNode` | `-` |
+| rightAction | 右侧滑动区域的内容 | `ReactNode` | `-` |
+| beforeClose | 关闭前的回调函数，返回滑动区域所在方向 `position` | `(position: 'left \| 'right') => void` | `-` |
 | disabled | 是否禁用滑动 | `boolean` | `false` |
-| onOpen | 打开单元格侧边栏 | `(name, position): { name: string \| number, position: 'left' \| 'right' } => void` | - |
-| onClose | 收起单元格侧边栏 | `(name, position): { name: string \| number, position: 'left' \| 'right' } => void` | - |
-| onActionClick | 点击左侧或者右侧时触发 | `(event: Event, position: 'left' \| 'right') => void` | - |
-| onTouchStart | onTouchStart | `(event: Event) => void` | - |
-| onTouchMove | onTouchMove | `(event: Event) => void` | - |
-| onTouchEnd | onTouchEnd | `(event: Event) => void` | - |
+| onOpen | 打开单元格侧边栏 | `(name, position): { name: string \| number, position: 'left' \| 'right' } => void` | `-` |
+| onClose | 收起单元格侧边栏 | `(name, position): { name: string \| number, position: 'left' \| 'right' } => void` | `-` |
+| onActionClick | 点击左侧或者右侧时触发 | `(event: Event, position: 'left' \| 'right') => void` | `-` |
+| onTouchStart | onTouchStart | `(event: Event) => void` | `-` |
+| onTouchMove | onTouchMove | `(event: Event) => void` | `-` |
+| onTouchEnd | onTouchEnd | `(event: Event) => void` | `-` |
 
 ### Ref
 

diff --git a/src/packages/swipe/doc.taro.md b/src/packages/swipe/doc.taro.md
@@ -260,17 +260,17 @@ export default App;
 
 | 属性 | 说明                             | 类型   | 默认值           |
 |--------------|----------------------------------|--------|------------------|
-| name | 标识符，可以在事件参数中获取到 | `number \| string` | - |
-| leftAction | 左侧滑动区域的内容 | `ReactNode` | - |
-| rightAction | 右侧滑动区域的内容 | `ReactNode` | - |
-| beforeClose | 关闭前的回调函数，返回滑动区域所在方向 `position` | `(position: 'left \| 'right') => void` | - |
+| name | 标识符，可以在事件参数中获取到 | `number \| string` | `-` |
+| leftAction | 左侧滑动区域的内容 | `ReactNode` | `-` |
+| rightAction | 右侧滑动区域的内容 | `ReactNode` | `-` |
+| beforeClose | 关闭前的回调函数，返回滑动区域所在方向 `position` | `(position: 'left \| 'right') => void` | `-` |
 | disabled | 是否禁用滑动 | `boolean` | `false` |
-| onOpen | 打开单元格侧边栏 | `(name, position): { name: string \| number, position: 'left' \| 'right' } => void` | - |
-| onClose | 收起单元格侧边栏 | `(name, position): { name: string \| number, position: 'left' \| 'right' } => void` | - |
-| onActionClick | 点击左侧或者右侧时触发 | `(event: Event, position: 'left' \|'right') => void` | - |
-| onTouchStart | onTouchStart | `(event: Event) => void` | - |
-| onTouchMove | onTouchMove | `(event: Event) => void` | - |
-| onTouchEnd | onTouchEnd | `(event: Event) => void` | - |
+| onOpen | 打开单元格侧边栏 | `(name, position): { name: string \| number, position: 'left' \| 'right' } => void` | `-` |
+| onClose | 收起单元格侧边栏 | `(name, position): { name: string \| number, position: 'left' \| 'right' } => void` | `-` |
+| onActionClick | 点击左侧或者右侧时触发 | `(event: Event, position: 'left' \|'right') => void` | `-` |
+| onTouchStart | onTouchStart | `(event: Event) => void` | `-` |
+| onTouchMove | onTouchMove | `(event: Event) => void` | `-` |
+| onTouchEnd | onTouchEnd | `(event: Event) => void` | `-` |
 
 ### Ref
 

diff --git a/src/packages/swipe/doc.zh-TW.md b/src/packages/swipe/doc.zh-TW.md
@@ -252,17 +252,17 @@ export default App;
 
 |參數|說明|類型|預設值|
 |--------------|----------------------------------|--------|------------------|
-| name |識別字，可以在事件參數中獲取到| `number \| string` | - |
-| leftAction |左側滑動區域的內容| `ReactNode` | - |
-| rightAction |右側滑動區域的內容| `ReactNode` | - |
-| beforeClose |關閉前的回呼函數，返回滑動區域所在的方向 `position` | `(position: 'left \| 'right') => void` | - |
+| name |識別字，可以在事件參數中獲取到| `number \| string` | `-` |
+| leftAction |左側滑動區域的內容| `ReactNode` | `-` |
+| rightAction |右側滑動區域的內容| `ReactNode` | `-` |
+| beforeClose |關閉前的回呼函數，返回滑動區域所在的方向 `position` | `(position: 'left \| 'right') => void` | `-` |
 | disabled |是否禁用滑動| `boolean` | `false` |
-| onOpen |打開儲存格側邊欄| `(name, position): { name: string \| number, position: 'left' \| 'right' } => void` | - |
-| onClose |收起儲存格側邊欄| `(name, position): { name: string \| number, position: 'left' \| 'right' } => void` | - |
-| onActionClick |點擊左側或者右側時觸發| `(event: Event, position: 'left' \|'right') => void` | - |
-| onTouchStart |onTouchStart| `(event: Event) => void` | - |
-| onTouchMove |onTouchMove| `(event: Event) => void` | - |
-| onTouchEnd |onTouchEnd| `(event: Event) => void` | - |
+| onOpen |打開儲存格側邊欄| `(name, position): { name: string \| number, position: 'left' \| 'right' } => void` | `-` |
+| onClose |收起儲存格側邊欄| `(name, position): { name: string \| number, position: 'left' \| 'right' } => void` | `-` |
+| onActionClick |點擊左側或者右側時觸發| `(event: Event, position: 'left' \|'right') => void` | `-` |
+| onTouchStart |onTouchStart| `(event: Event) => void` | `-` |
+| onTouchMove |onTouchMove| `(event: Event) => void` | `-` |
+| onTouchEnd |onTouchEnd| `(event: Event) => void` | `-` |
 
 ### Ref
 

diff --git a/src/packages/swipe/swipe.taro.tsx b/src/packages/swipe/swipe.taro.tsx
@@ -8,9 +8,9 @@ import React, {
 } from 'react'
 import classNames from 'classnames'
 import { nextTick, useReady } from '@tarojs/taro'
-import bem from '@/utils/bem'
 import { useTouch } from '@/utils/use-touch'
 import { getRectByTaro } from '@/utils/use-client-rect'
+import { BasicComponent, ComponentDefaults } from '@/utils/typings'
 
 export type SwipeSide = 'left' | 'right'
 
@@ -29,11 +29,7 @@ export interface SwipeInstance {
   open: (side: SwipeSide) => void
   close: () => void
 }
-export interface SwipeProps {
-  /** 自定义类名 */
-  className: string
-  /** 自定义样式 */
-  style: React.CSSProperties
+export interface SwipeProps extends BasicComponent {
   /** 标识符，可以在事件参数中获取到 */
   name?: string | number
   /** 左侧滑动区域的内容 */
@@ -65,9 +61,9 @@ export interface SwipeProps {
   onTouchStart?: (event: Event) => void
   onTouchEnd?: (event: Event) => void
   onTouchMove?: (event: Event) => void
-  children?: React.ReactNode
 }
 const defaultProps = {
+  ...ComponentDefaults,
   name: '',
 } as SwipeProps
 export const Swipe = forwardRef<
@@ -78,7 +74,7 @@ export const Swipe = forwardRef<
       'onTouchStart' | 'onTouchMove' | 'onTouchEnd'
     >
 >((props, instanceRef) => {
-  const swipeBem = bem('swipe')
+  const classPrefix = 'nut-swipe'
   const touch: any = useTouch()
 
   // 获取元素的时候要在页面 onReady 后，需要参考小程序的事件周期
@@ -218,7 +214,7 @@ export const Swipe = forwardRef<
         <div
           id="left"
           ref={side === 'left' ? leftWrapper : rightWrapper}
-          className={`${swipeBem(side)}`}
+          className={`${classPrefix}__${side}`}
           onClick={(e: any) => handleOperate(e, side)}
         >
           {props[`${side}Action`]}
@@ -265,13 +261,13 @@ export const Swipe = forwardRef<
   return (
     <div
       ref={root}
-      className={classNames(swipeBem(), className)}
+      className={classNames(classPrefix, className)}
       onTouchStart={(e: any) => onTouchStart(e)}
       onTouchMove={(e: any) => onTouchMove(e)}
       onTouchEnd={(e: any) => onTouchEnd(e)}
       style={style}
     >
-      <div className={`${swipeBem('wrapper')}`} style={wrapperStyle}>
+      <div className={`${classPrefix}__wrapper`} style={wrapperStyle}>
         {renderActionContent('left')}
         {children}
         {renderActionContent('right')}

diff --git a/src/packages/swipe/swipe.tsx b/src/packages/swipe/swipe.tsx
@@ -8,9 +8,9 @@ import React, {
   useEffect,
 } from 'react'
 import classNames from 'classnames'
-import bem from '@/utils/bem'
 import { useTouch } from '@/utils/use-touch'
 import { getRect } from '@/utils/use-client-rect'
+import { BasicComponent } from '@/utils/typings'
 
 export type SwipeSide = 'left' | 'right'
 
@@ -29,11 +29,7 @@ export interface SwipeInstance {
   open: (side: SwipeSide) => void
   close: () => void
 }
-export interface SwipeProps {
-  /** 自定义类名 */
-  className: string
-  /** 自定义样式 */
-  style: React.CSSProperties
+export interface SwipeProps extends BasicComponent {
   /** 标识符，可以在事件参数中获取到 */
   name?: string | number
   /** 左侧滑动区域的内容 */
@@ -65,7 +61,6 @@ export interface SwipeProps {
   onTouchStart?: (event: Event) => void
   onTouchEnd?: (event: Event) => void
   onTouchMove?: (event: Event) => void
-  children?: React.ReactNode
 }
 const defaultProps = {
   name: '',
@@ -78,7 +73,7 @@ export const Swipe = forwardRef<
       'onTouchStart' | 'onTouchMove' | 'onTouchEnd'
     >
 >((props, instanceRef) => {
-  const swipeBem = bem('swipe')
+  const classPrefix = 'nut-swipe'
   const touch: any = useTouch()
 
   const { children, className, style } = { ...defaultProps, ...props }
@@ -217,7 +212,7 @@ export const Swipe = forwardRef<
       return (
         <div
           ref={measuredRef}
-          className={`${swipeBem(side)}`}
+          className={`${classPrefix}__${side}`}
           onClick={(e: any) => handleOperate(e, side)}
         >
           {props[`${side}Action`]}
@@ -264,13 +259,13 @@ export const Swipe = forwardRef<
   return (
     <div
       ref={root}
-      className={classNames(swipeBem(), className)}
+      className={classNames(classPrefix, className)}
       onTouchStart={(e: any) => onTouchStart(e)}
       onTouchMove={(e: any) => onTouchMove(e)}
       onTouchEnd={(e: any) => onTouchEnd(e)}
       style={style}
     >
-      <div className={`${swipeBem('wrapper')}`} style={wrapperStyle}>
+      <div className={`${classPrefix}__wrapper`} style={wrapperStyle}>
         {renderActionContent('left', leftRef)}
         {children}
         {renderActionContent('right', rightRef)}