Skip to content

Fix/drawer left toggle #875

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
merged 2 commits into from
Aug 2, 2020
Merged

Fix/drawer left toggle #875

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
22c780f
Fix left toggle drag threshold and haptic trigger timing; Add item re…
Inbal-Tish Jul 30, 2020
aaca3a2
fix bounciness and closing of the drawer after item animation
Inbal-Tish Aug 2, 2020
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
2 changes: 1 addition & 1 deletion demo/src/screens/componentScreens/DrawerScreen.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -78,7 +78,7 @@ class DrawerScreen extends Component {
};

toggleReadState = () => {
this.setState({unread: !this.state.unread}); // setState will close the Drawer
this.setState({unread: !this.state.unread});
}

triggerLeftToggleHaptic = () => {
Expand Down
48 changes: 33 additions & 15 deletions src/components/drawer/Swipeable.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -112,13 +112,21 @@ export default class Swipeable extends Component<PropType, StateType> {
_handleDrag = (e) => {
const {onToggleSwipeLeft} = this.props;

if (onToggleSwipeLeft && !this.dragThresholdReached) {
if (onToggleSwipeLeft) {
// Drag left toggle
const {rowWidth, leftWidth} = this.state;
const x = e.nativeEvent.translationX;
const threshold = rowWidth * LEFT_TOGGLE_THRESHOLD;
if (x >= threshold && x < threshold + 10) {

if (!this.dragThresholdReached && x >= threshold && x < threshold + 10) {
// move item right
this.dragThresholdReached = true;
onToggleSwipeLeft({rowWidth, leftWidth, dragX: x});
onToggleSwipeLeft({rowWidth, leftWidth, dragX: x, triggerHaptic: true});
}
if (this.dragThresholdReached && x < threshold - 10) {
// move item left
this.dragThresholdReached = false;
onToggleSwipeLeft({rowWidth, leftWidth, dragX: x, resetItemPosition: true});
}
}
}
Expand Down Expand Up @@ -215,23 +223,32 @@ export default class Swipeable extends Component<PropType, StateType> {
const {leftWidth = 0, rowWidth = 0} = this.state;
const {rightOffset = rowWidth} = this.state;
const rightWidth = rowWidth - rightOffset;
const {fullSwipeLeft, fullSwipeRight, friction, leftThreshold = leftWidth / 2, rightThreshold = rightWidth / 2, fullLeftThreshold, fullRightThreshold, onToggleSwipeLeft} = this.props;

const {
fullSwipeLeft,
fullSwipeRight,
friction,
leftThreshold = leftWidth / 2,
rightThreshold = rightWidth / 2,
fullLeftThreshold,
fullRightThreshold,
onToggleSwipeLeft
} = this.props;
const startOffsetX = this._currentOffset() + dragX / friction;
const translationX = (dragX + DRAG_TOSS * velocityX) / friction;

let toValue = 0;
if (this.rowState === 0) {
if (onToggleSwipeLeft && translationX > leftWidth) {
if (!this.dragThresholdReached) {
toValue = rowWidth * LEFT_TOGGLE_THRESHOLD;
}
} else if (fullSwipeLeft && translationX > rowWidth * fullLeftThreshold) {
if (onToggleSwipeLeft && translationX > rowWidth * LEFT_TOGGLE_THRESHOLD && !this.dragThresholdReached) {
// Swipe left toggle
toValue = rowWidth * LEFT_TOGGLE_THRESHOLD;
} else if (!onToggleSwipeLeft && fullSwipeLeft && translationX > rowWidth * fullLeftThreshold) {
toValue = rowWidth;
} else if (fullSwipeRight && translationX < -rowWidth * fullRightThreshold) {
toValue = -rowWidth;
} else if (translationX > leftThreshold) {
toValue = leftWidth;
if (!onToggleSwipeLeft || onToggleSwipeLeft && translationX < rowWidth * LEFT_TOGGLE_THRESHOLD) {
toValue = leftWidth;
}
} else if (translationX < -rightThreshold) {
toValue = -rightWidth;
}
Expand Down Expand Up @@ -264,7 +281,6 @@ export default class Swipeable extends Component<PropType, StateType> {
onSwipeableWillClose,
onSwipeableWillOpen,
onFullSwipeLeft,
fullSwipeLeft,
onToggleSwipeLeft,
onWillFullSwipeLeft,
onFullSwipeRight,
Expand All @@ -274,13 +290,13 @@ export default class Swipeable extends Component<PropType, StateType> {
dragX.setValue(0);
rowTranslation.setValue(fromValue);
this.rowState = Math.sign(toValue);

Animated.spring(rowTranslation, {
toValue,
restSpeedThreshold: 1.7,
restDisplacementThreshold: 0.4,
velocity: velocityX,
bounciness: 0,
toValue,
useNativeDriver: useNativeAnimations,
...animationOptions
}).start(({finished}) => {
Expand All @@ -304,7 +320,8 @@ export default class Swipeable extends Component<PropType, StateType> {
});

if ((toValue === rowWidth * LEFT_TOGGLE_THRESHOLD || this.dragThresholdReached) && onToggleSwipeLeft) {
onToggleSwipeLeft({rowWidth, leftWidth, released: true});
onToggleSwipeLeft({rowWidth, leftWidth, released: true, triggerHaptic: !this.dragThresholdReached});
this.dragThresholdReached = false;
} else if (toValue === rowWidth && onWillFullSwipeLeft) {
onWillFullSwipeLeft()
} else if (toValue === -rowWidth && onWillFullSwipeRight) {
Expand Down Expand Up @@ -350,6 +367,7 @@ export default class Swipeable extends Component<PropType, StateType> {
};

toggleLeft = () => {
// Programmatically left toggle
const {rowWidth} = this.state;
this._animateRow(this._currentOffset(), rowWidth * LEFT_TOGGLE_THRESHOLD);
};
Expand Down
38 changes: 27 additions & 11 deletions src/components/drawer/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ import View from '../view';
import Swipeable, {PropType as SwipeableProps} from './Swipeable';

const DEFAULT_BG = Colors.blue30;
const DEFAULT_BOUNCINESS = 0;

interface ItemProps {
width?: number;
Expand Down Expand Up @@ -123,7 +124,7 @@ class Drawer extends PureComponent<DrawerProps> {
leftRender: SwipeableProps['renderLeftActions'];
rightRender: SwipeableProps['renderLeftActions'];
_swipeableRow: RefObject<Swipeable> = React.createRef();
animationOptions: SwipeableProps['animationOptions'] = {bounciness: this.props.bounciness || 5};
animationOptions: SwipeableProps['animationOptions'] = {bounciness: this.props.bounciness || DEFAULT_BOUNCINESS};
leftActionX: Animated.Value = new Animated.Value(0);

constructor(props: DrawerProps) {
Expand Down Expand Up @@ -192,19 +193,34 @@ class Drawer extends PureComponent<DrawerProps> {
_.invoke(this.props, 'onSwipeableWillClose', this.props);
};

private onToggleSwipeLeft = ({rowWidth, leftWidth, dragX, released}: any) => {
private onToggleSwipeLeft = (options?: any) => {
if (this.props.onToggleSwipeLeft) {
if (options?.triggerHaptic) {
_.invoke(this.props, 'leftToggleHapticTrigger');
}
this.animateItem(options);
}
}

private animateItem({rowWidth, leftWidth, dragX, released, resetItemPosition}: any) {
const toValue = resetItemPosition ? 0 : dragX ? dragX - leftWidth : rowWidth * 0.6 - leftWidth;

Animated.timing(this.leftActionX, {
toValue: dragX ? dragX - leftWidth : rowWidth * 0.6 - leftWidth,
toValue,
easing: Easing.bezier(0.25, 1, 0.5, 1),
duration: 200,
delay: 100,
useNativeDriver: true
}).start(() => released && this.toggle());
}

private toggle() {
_.invoke(this.props, 'leftToggleHapticTrigger');
_.invoke(this.props, 'onToggleSwipeLeft');
}).start(() => {
if (released) {
// reset Drawer
this.animateItem({released: false, resetItemPosition: true});
this.closeDrawer();
setTimeout(() => {
_.invoke(this.props, 'onToggleSwipeLeft', this.props);
}, 150);
}
});
}

/** Accessability */
Expand Down Expand Up @@ -347,7 +363,7 @@ class Drawer extends PureComponent<DrawerProps> {
};

render() {
const {children, style, leftItem, rightItems, onToggleSwipeLeft, ...others} = this.props;
const {children, style, leftItem, rightItems, ...others} = this.props;

return (
<Swipeable
Expand All @@ -362,7 +378,7 @@ class Drawer extends PureComponent<DrawerProps> {
leftActionsContainerStyle={this.getLeftActionsContainerStyle(leftItem, rightItems)}
onSwipeableWillOpen={this.onSwipeableWillOpen}
onSwipeableWillClose={this.onSwipeableWillClose}
onToggleSwipeLeft={onToggleSwipeLeft && this.onToggleSwipeLeft}
onToggleSwipeLeft={this.onToggleSwipeLeft}
>
<View
// flex
Expand Down