Skip to content

feat(Swipeable): add minSlideWidth prop #3688

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
arpitBhalla merged 5 commits into from
Dec 27, 2022
Merged

feat(Swipeable): add minSlideWidth prop #3688

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
e4d8926
WIP
arpitBhalla Nov 23, 2022
492e916
WIP
arpitBhalla Nov 23, 2022
9fa0ede
WIP
arpitBhalla Dec 10, 2022
d0f58ae
Merge branch 'next' into listitem-swipeable
arpitBhalla Dec 27, 2022
a6507d6
WIP
arpitBhalla Dec 27, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
27 changes: 17 additions & 10 deletions packages/base/src/ListItem/ListItem.Swipeable.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,12 +30,16 @@ export interface ListItemSwipeableProps extends ListItemProps {
/** Style of right container.*/
rightStyle?: StyleProp<ViewStyle>;

/** Width to swipe left. */
/** Width of swipe left container. */
leftWidth?: number;

/** Width to swipe right. */
/** Width of swipe right container.*/
rightWidth?: number;

/** minimum horizontal distance to open content
*/
minSlideWidth?: number;

/** Handler for swipe in either direction */
onSwipeBegin?: (direction: 'left' | 'right') => unknown;

Expand Down Expand Up @@ -63,6 +67,7 @@ export const ListItemSwipeable: RneFunctionComponent<
rightContent,
leftWidth = ScreenWidth / 3,
rightWidth = ScreenWidth / 3,
minSlideWidth = ScreenWidth / 3,
onSwipeBegin,
onSwipeEnd,
animation = { type: 'spring', duration: 200 },
Expand Down Expand Up @@ -96,13 +101,13 @@ export const ListItemSwipeable: RneFunctionComponent<

const onRelease = React.useCallback(
(_: unknown, { dx }: PanResponderGestureState) => {
if (Math.abs(panX.current + dx) >= ScreenWidth / 3) {
if (Math.abs(panX.current + dx) >= minSlideWidth) {
slideAnimation(panX.current + dx > 0 ? leftWidth : -rightWidth);
} else {
slideAnimation(0);
}
},
[leftWidth, rightWidth, slideAnimation]
[leftWidth, rightWidth, slideAnimation, minSlideWidth]
);

const shouldSlide = React.useCallback(
Expand Down Expand Up @@ -139,11 +144,7 @@ export const ListItemSwipeable: RneFunctionComponent<
);

return (
<View
style={{
justifyContent: 'center',
}}
>
<View style={styles.container}>
<View style={styles.actions}>
<View
style={[
Expand All @@ -158,7 +159,7 @@ export const ListItemSwipeable: RneFunctionComponent<
? leftContent(resetCallBack)
: leftContent}
</View>
<View style={{ flex: 0 }} />
<View style={styles.empty} />
<View
style={[
{
Expand Down Expand Up @@ -202,6 +203,12 @@ const styles = StyleSheet.create({
flexDirection: 'row',
justifyContent: 'space-between',
},
container: {
justifyContent: 'center',
},
empty: {
flex: 0,
},
});

ListItemSwipeable.displayName = 'ListItem.Swipeable';
2 changes: 1 addition & 1 deletion packages/base/src/Tab/Tab.Item.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -85,7 +85,7 @@ export interface TabItemProps
export const TabItem: RneFunctionComponent<TabItemProps> = ({
active,
theme = defaultTheme,
_parentProps,
_parentProps = {},
titleStyle = _parentProps.titleStyle,
containerStyle = _parentProps.containerStyle,
buttonStyle = _parentProps.buttonStyle,
Expand Down
23 changes: 12 additions & 11 deletions website/docs/components/ListItem.Swipeable.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,16 +46,17 @@ Includes all [ListItem](listitem#props) props.

<div class='table-responsive'>

| Name | Type | Default | Description |
| -------------- | ----------------------------------------- | -------------------------------------------- | ------------------------------------- |
| `animation` | Animated.TimingAnimationConfig | `Object with duration 350ms and type timing` | Decide whether to show animation. |
| `leftContent` | ReactNode or resetCallback => ReactNode | | Left Content. |
| `leftStyle` | View Style | | Style of left container. |
| `leftWidth` | number | `ScreenWidth / 3` | Width to swipe left. |
| `onSwipeBegin` | `(direction: left` \| `right) => unknown` | | Handler for swipe in either direction |
| `onSwipeEnd` | () => unknown | | Handler for swipe end. |
| `rightContent` | ReactNode or resetCallback => ReactNode | | Right Content. |
| `rightStyle` | View Style | | Style of right container. |
| `rightWidth` | number | `ScreenWidth / 3` | Width to swipe right. |
| Name | Type | Default | Description |
| --------------- | ----------------------------------------- | -------------------------------------------- | ------------------------------------------- |
| `animation` | Animated.TimingAnimationConfig | `Object with duration 350ms and type timing` | Decide whether to show animation. |
| `leftContent` | ReactNode or resetCallback => ReactNode | | Left Content. |
| `leftStyle` | View Style | | Style of left container. |
| `leftWidth` | number | `ScreenWidth / 3` | Width of swipe left container. |
| `minSlideWidth` | number | `ScreenWidth / 3` | minimum horizontal distance to open content |
| `onSwipeBegin` | `(direction: left` \| `right) => unknown` | | Handler for swipe in either direction |
| `onSwipeEnd` | () => unknown | | Handler for swipe end. |
| `rightContent` | ReactNode or resetCallback => ReactNode | | Right Content. |
| `rightStyle` | View Style | | Style of right container. |
| `rightWidth` | number | `ScreenWidth / 3` | Width of swipe right container. |

</div>