@sdcx/bottom-sheet 0.3.0 → 0.5.0

package/README.md

@@ -4,6 +4,10 @@
 
 它位于屏幕底部，可拖拽，支持嵌套滚动，可以和可滚动视图（`FlatList`, `FlashList`, `WebView` 等等）一起使用。
 
+|                                                                                                           |                                                                                                           |
+| --------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------- |
+| <img src="https://todoit.oss-cn-shanghai.aliyuncs.com/assets/troika-2023-04-27-14-47-39.gif" width="320"> | <img src="https://todoit.oss-cn-shanghai.aliyuncs.com/assets/troika-2023-04-27-14-48-40.gif" width="320"> |
+
 ## Installation
 
 ```bash
@@ -51,30 +55,45 @@ const App = () => {
 
 ### 属性
 
-`peekHeight` 是指 `BottomSheet` 收起时，内层在屏幕上露出的高度，默认是 200。
-
-`fitToContents` 是指内层的高度是否适应内容。默认情况下，内层的高度是和外层一样的。
+- `peekHeight`, 是指 BottomSheet 收起时，在屏幕上露出的高度，默认是 200。
 
-> 当 `BottomSheet` 中的子组件包含可滚动视图时，请不要打开这个属性。
+- `state`, 是指 BottomSheet 的状态，有三种状态：
 
-`state` 用来控制 `BottomSheet` 的状态，有 3 种可能的值：
+  - `'collapsed'`，收起状态，此时 BottomSheet 的高度为 `peekHeight`。
 
-- `collapsed`：`BottomSheet` 完全收起，这是默认状态。
+  - `'expanded'`，展开状态，此时 BottomSheet 的高度为父组件的高度或内容的高度，参考 `fitToContents` 属性。
 
-- `expanded`：`BottomSheet` 完全展开
+  - `'hidden'`，隐藏状态，此时 BottomSheet 的高度为 0。
 
-- `hidden`：`BottomSheet` 完全隐藏
+- `fitToContents`，是指 BottomSheet 在展开时，是否适应内容的高度，默认是 `false`。
 
 ### 回调
 
-`onStateChanged` 回调 和 `state` 属性是一对，用来实现受控模式，当 `BottomSheet` 的状态发生变化时会被调用，它接收一个参数，即 `BottomSheet` 当前的状态。
+- `onStateChanged`, 是指 BottomSheet 状态变化时的回调，它和 `state` 属性是一对，用来实现受控模式。
+
+  ```tsx
+  export type BottomSheetState = 'collapsed' | 'expanded' | 'hidden'
 
-`onSlide` 是 `BottomSheet` 的重要回调函数，它会在 `BottomSheet` 的位置发生偏移时调用，可以用它来实现一些动画效果。`onSlide` 在调用是携带以下参数：
+  export interface StateChangedEventData {
+    state: BottomSheetState
+  }
 
-- `collapsedOffset` 是指 `BottomSheet` 完全收起时，内层顶部距离外层顶部的距离。可以看到，它的值等于外层的高度减去 `peekHeight`。
+  interface NativeBottomSheetProps extends ViewProps {
+    onStateChanged?: (event: NativeSyntheticEvent<StateChangedEventData>) => void
+  }
+  ```
 
-- `expandedOffset` 是指 `BottomSheet` 完全展开时，内层顶部距离外层顶部的距离，通常是 0。但如果设置了 `fitToContents` 属性，则可能大于 0。
+- `onSlide`, 是指 BottomSheet 滑动时的回调，可以用它来实现一些动画效果。
 
-- `offset` 是指 `BottomSheet` 当前的位置，它的值在 `collapsedOffset` 和 `expandedOffset` 之间。
+  ```tsx
+  export interface OffsetChangedEventData {
+    progress: number // 是指 `BottomSheet` 当前的位置在 `collapsedOffset` 和 `expandedOffset` 之间的比例，它的值在 0 和 1 之间。
+    offset: number // 是指 `BottomSheet` 当前的位置，它的值在 `collapsedOffset` 和 `expandedOffset` 之间。
+    expandedOffset: number // 是指 `BottomSheet` 完全展开时，内层顶部距离外层顶部的距离，通常是 0。但如果设置了 `fitToContents` 属性，则可能大于 0。
+    collapsedOffset: number // 是指 `BottomSheet` 完全收起时，内层顶部距离外层顶部的距离。可以看到，它的值等于外层的高度减去 `peekHeight`。
+  }
 
-- `progress` 是指 `BottomSheet` 当前的位置在 `collapsedOffset` 和 `expandedOffset` 之间的比例，它的值在 0 和 1 之间。
+  interface NativeBottomSheetProps extends ViewProps {
+    onSlide?: (event: NativeSyntheticEvent<OffsetChangedEventData>) => void
+  }
+  ```

package/ios/BottomSheet/RNBottomSheet.m

@@ -159,7 +159,7 @@
     }
     
     if (pan.state == UIGestureRecognizerStateEnded) {
-        if (self.lastDragDistance > 1) {
+        if (self.lastDragDistance > 0) {
             if (self.target && self.target.contentOffset.y <= 0) {
                 //如果是类似轻扫的那种
                 [self settleToState:@"collapsed"];
@@ -169,7 +169,7 @@
                 //如果是类似轻扫的那种
                 [self settleToState:@"collapsed"];
             }
-        } else if (self.lastDragDistance < -1) {
+        } else if (self.lastDragDistance < 0) {
             //如果是类似轻扫的那种
             [self settleToState:@"expanded"];
         } else {

package/lib/index.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
 import { NativeSyntheticEvent, ViewProps } from 'react-native';
 export interface OffsetChangedEventData {
+    progress: number;
     offset: number;
     expandedOffset: number;
     collapsedOffset: number;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@sdcx/bottom-sheet",
   "description": "A react-native BottomSheet component.",
-  "version": "0.3.0",
+  "version": "0.5.0",
   "main": "./lib/index.js",
   "typings": "./lib/index.d.ts",
   "react-native": "src/index",

package/src/index.tsx

@@ -3,6 +3,7 @@ import { NativeSyntheticEvent, Platform, requireNativeComponent, StyleSheet, Vie
 import splitLayoutProps from './splitLayoutProps'
 
 export interface OffsetChangedEventData {
+  progress: number
   offset: number
   expandedOffset: number
   collapsedOffset: number