Skip to content

Commit

Permalink
add swipeDamping prop
Browse files Browse the repository at this point in the history
  • Loading branch information
@computerjazz
computerjazz committed Feb 11, 2020
1 parent ae021ee commit e2d8f2a
Show file tree
Hide file tree
Showing 2 changed files with 15 additions and 12 deletions.
21 changes: 11 additions & 10 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,16 +39,17 @@ enum OpenDirection {
}
```

| Name | Type | Description |
| :-------------------- | :---------------------------------------------------------- | :------------------------------------------------------------------------------------------------------------------------------------------- |
| `renderUnderlayLeft` | `RenderUnderlay` | Component to be rendered underneath row on left swipe. |
| `renderUnderlayRight` | `RenderUnderlay` | Component to be rendered underneath row on left swipe. |
| `snapPointsLeft` | `number[]` | Pixel values left-swipe snaps to (eg. [100, 300]) |
| `snapPointsRight` | `number[]` | Pixel values right-swipe snaps to (eg. [100, 300]) |
| `renderOverlay` | `RenderOverlay` | Component to be rendered on top. Use if you need access to programmatic open/close methods. May altenatively pass children to SwipeableItem. |
| `onChange` | `(params: { open: OpenDirection, snapTo: number }) => void` | Called when row is opened or closed. |
| `swipeEnabled` | `boolean` | Enable/disable swipe. Defaults to `true`. |
| `activationThreshold` | `number` | Distance finger must travel before swipe engages. Defaults to 20. |
| Name | Type | Description |
| :-------------------- | :---------------------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `renderUnderlayLeft` | `RenderUnderlay` | Component to be rendered underneath row on left swipe. |
| `renderUnderlayRight` | `RenderUnderlay` | Component to be rendered underneath row on left swipe. |
| `snapPointsLeft` | `number[]` | Pixel values left-swipe snaps to (eg. `[100, 300]`) |
| `snapPointsRight` | `number[]` | Pixel values right-swipe snaps to (eg. `[100, 300]`) |
| `renderOverlay` | `RenderOverlay` | Component to be rendered on top. Use if you need access to programmatic open/close methods. May altenatively pass children to SwipeableItem. |
| `onChange` | `(params: { open: OpenDirection, snapTo: number }) => void` | Called when row is opened or closed. |
| `swipeEnabled` | `boolean` | Enable/disable swipe. Defaults to `true`. |
| `activationThreshold` | `number` | Distance finger must travel before swipe engages. Defaults to 20. |
| `swipeDamping` | `number` | How much swipe velocity determines snap position. A smaller number means swipe velocity will have a larger effect and row will swipe open more easily. Defaults to `10`. |

### Instance Methods

Expand Down
6 changes: 4 additions & 2 deletions src/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -83,6 +83,7 @@ type Props<T> = {
swipeEnabled?: boolean;
snapPointsLeft?: number[];
snapPointsRight?: number[];
swipeDamping?: number;
};

class SwipeableItem<T> extends React.PureComponent<Props<T>> {
Expand All @@ -93,7 +94,8 @@ class SwipeableItem<T> extends React.PureComponent<Props<T>> {
activationThreshold: 20,
swipeEnabled: true,
snapPointsLeft: [],
snapPointsRight: []
snapPointsRight: [],
swipeDamping: 10
};

state = {
Expand Down Expand Up @@ -207,7 +209,7 @@ class SwipeableItem<T> extends React.PureComponent<Props<T>> {
// Approximate where item would end up with velocity taken into account
velocityModifiedPosition = add(
this.animState.position,
divide(this.velocity, 10)
divide(this.velocity, this.props.swipeDamping!)
);

// This beautiful little snippet stolen from
Expand Down

0 comments on commit e2d8f2a

Please sign in to comment.