Skip to content

newDrawer - add useNativeAnimations #469

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 3 commits into from
Jul 15, 2019
Merged

newDrawer - add useNativeAnimations #469

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
85e82e7
newDrawer - add useNativeAnimations
roiberlin Jul 14, 2019
6a09e78
newDrawer - set default useNativeAnimation to false
roiberlin Jul 15, 2019
24a6101
newDrawer - remove unnecessary code
roiberlin Jul 15, 2019
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
26 changes: 13 additions & 13 deletions src/interactableComponents/drawer/Swipeable.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -59,9 +59,9 @@ export default class Swipeable extends Component<PropType, StateType> {
static defaultProps = {
friction: 1,
overshootFriction: 1,
// useNativeAnimations: true // issue in iPhone 5
useNativeAnimations: false // issue in iPhone5
};

_onGestureEvent: ?Animated.Event;
_transX: ?Animated.Interpolation;
_showLeftAction: ?Animated.Interpolation | ?Animated.Value;
Expand All @@ -71,7 +71,7 @@ export default class Swipeable extends Component<PropType, StateType> {

constructor(props: PropType) {
super(props);

const dragX = new Animated.Value(0);
this.rowState = 0;

Expand All @@ -82,7 +82,7 @@ export default class Swipeable extends Component<PropType, StateType> {
rightOffset: undefined,
rowWidth: Constants.screenWidth
};

this._updateAnimatedEvent(props, this.state);

this._onGestureEvent = Animated.event([{nativeEvent: {translationX: dragX}}], {
Expand Down Expand Up @@ -211,18 +211,18 @@ export default class Swipeable extends Component<PropType, StateType> {
_animateRow = (fromValue, toValue, velocityX) => {
const {dragX, rowTranslation} = this.state;
const {
useNativeAnimations,
animationOptions,
onSwipeableLeftOpen,
onSwipeableRightOpen,
onSwipeableClose,
useNativeAnimations,
animationOptions,
onSwipeableLeftOpen,
onSwipeableRightOpen,
onSwipeableClose,
onSwipeableOpen,
onSwipeableLeftWillOpen,
onSwipeableRightWillOpen,
onSwipeableWillClose,
onSwipeableWillOpen
} = this.props;

dragX.setValue(0);
rowTranslation.setValue(fromValue);
this.rowState = Math.sign(toValue);
Expand Down Expand Up @@ -268,7 +268,7 @@ export default class Swipeable extends Component<PropType, StateType> {
const {leftWidth = 0, rowWidth = 0} = this.state;
const {rightOffset = rowWidth} = this.state;
const rightWidth = rowWidth - rightOffset;

if (this.rowState === 1) {
return leftWidth;
} else if (this.rowState === -1) {
Expand Down Expand Up @@ -311,8 +311,8 @@ export default class Swipeable extends Component<PropType, StateType> {
const left = renderLeftActions && (
<Animated.View
style={[
styles.leftActions,
leftActionsContainerStyle,
styles.leftActions,
leftActionsContainerStyle,
{transform: [{translateX: this._leftActionTranslate}]}
]}
>
Expand Down
42 changes: 23 additions & 19 deletions src/interactableComponents/drawer/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ const ITEM_PROP_TYPES = {

/**
* @description: Interactable Drawer component
* @extendslink:
* @extendslink:
*/
export default class Drawer extends PureBaseComponent {
static displayName = 'Drawer';
Expand Down Expand Up @@ -72,6 +72,10 @@ export default class Drawer extends PureBaseComponent {
* The items' text style
*/
itemsTextStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.number]),
/**
* Perform the animation in natively
*/
useNativeAnimations: PropTypes.bool,
};

static defaultProps = {
Expand All @@ -95,7 +99,7 @@ export default class Drawer extends PureBaseComponent {
}

UNSAFE_componentWillReceiveProps(nextProps) {
if (JSON.stringify(this.props.leftItem) !== JSON.stringify(nextProps.leftItem) ||
if (JSON.stringify(this.props.leftItem) !== JSON.stringify(nextProps.leftItem) ||
JSON.stringify(this.props.rightItems) !== JSON.stringify(nextProps.rightItems)) {
this.closeDrawer();
}
Expand Down Expand Up @@ -178,7 +182,7 @@ export default class Drawer extends PureBaseComponent {
if (_.size(rightItems) > 0) {
const items = rightItems.reverse();
const size = numberOfItems && numberOfItems >= 0 ? numberOfItems : items.length;

for (let i = 0; i < size; i++) {
total += this.getItemWidth(items[i]);
}
Expand All @@ -201,21 +205,21 @@ export default class Drawer extends PureBaseComponent {
const rightSpring = equalWidths ? 0 : 30;
const rightWidth = this.getRightItemsTotalWidth();
const rightBound = rightWidth > 0 ? -rightWidth - rightSpring : 0;

return {
right: _.isEmpty(leftItem) ? 0 : leftBound, left: _.isEmpty(rightItems) ? 0 : rightBound};
}
getSnapPoints() {
const {leftItem, rightItems, damping, tension} = this.getThemeProps();
const size = rightItems ? rightItems.length : 0;

const left = !_.isEmpty(leftItem) ? {x: this.getItemWidth(leftItem), damping, tension} : {};
const initial = {x: 0, damping, tension};
const last = rightItems && !_.isEmpty(rightItems[0]) ?
{x: -(this.getRightItemsTotalWidth()), damping, tension} : {};

switch (size) {
case 0:
case 0:
return [left, initial];
default:
return [left, initial, last];
Expand All @@ -227,9 +231,9 @@ export default class Drawer extends PureBaseComponent {

const first = {id: 'first', influenceArea: {left: -(this.getRightItemsTotalWidth(1))}};
const second = {id: 'second', influenceArea: {left: -(this.getRightItemsTotalWidth(size - 1))}};

switch (size) {
case 0:
case 0:
case 1:
return [];
case 2:
Expand All @@ -243,7 +247,7 @@ export default class Drawer extends PureBaseComponent {
const size = rightItems ? rightItems.length : 0;
const interval = 65;
const inputRanges = [];

for (let i = 0; i < size; i++) {
const itemWidth = this.getItemWidth(rightItems[i]);
const end = itemWidth - (size * BLEED);
Expand All @@ -256,13 +260,13 @@ export default class Drawer extends PureBaseComponent {

onLayout = (event) => {
const {width, height} = event.nativeEvent.layout;

const typography = height >= SCALE_POINT ? Typography.text70 : Typography.text80;
const textTopMargin = height > SCALE_POINT ? 8 : 0;
const itemPadding = height >= SCALE_POINT ? ITEM_PADDING : 8;

this.setState({width, height, typography, textTopMargin, itemPadding});
};
};

renderLeftItem() {
const {leftItem, itemsTintColor, itemsIconSize, itemsTextStyle} = this.getThemeProps();
Expand Down Expand Up @@ -331,7 +335,7 @@ export default class Drawer extends PureBaseComponent {
]}
{...this.getAnimationConfig()}
/>}
{leftItem && leftItem.text &&
{leftItem && leftItem.text &&
<Animated.Text
numberOfLines={1}
style={
Expand Down Expand Up @@ -426,7 +430,7 @@ export default class Drawer extends PureBaseComponent {
]}
{...this.getAnimationConfig()}
/>}
{item.text &&
{item.text &&
<Animated.Text
numberOfLines={1}
style={
Expand Down Expand Up @@ -473,7 +477,7 @@ export default class Drawer extends PureBaseComponent {
if (migrate) {
return <NewDrawer ref={this.drawer} {...this.getThemeProps()} />;
}

const {style, onPress, rightItems} = this.getThemeProps();
const Container = onPress ? TouchableOpacity : View;
const backgroundColor = _.get(rightItems, '[0].background', ITEM_BG);
Expand All @@ -483,7 +487,7 @@ export default class Drawer extends PureBaseComponent {
<View style={[style, this.styles.container, {backgroundColor}]} onLayout={this.onLayout}>
{rightItems && this.renderRightItems()}
{this.renderLeftItem()}

<Interactable.View
ref={el => (this.interactableElem = el)}
horizontalOnly
Expand All @@ -499,15 +503,15 @@ export default class Drawer extends PureBaseComponent {
style={[this.styles.interactable, {width: containerWidth * 2}]}
>
<View style={{backgroundColor: Colors.white}}>
<Container
<Container
style={[this.styles.childrenContainer, {width: containerWidth}]}
activeOpacity={0.7}
onPress={this.onPress}
onPress={this.onPress}
>
{this.props.children}
</Container>
</View>
{rightItems &&
{rightItems &&
<View style={{width: containerWidth, flexDirection: 'row'}}>
{_.map(rightItems, this.renderGhostButton)}
</View>
Expand Down
6 changes: 5 additions & 1 deletion src/interactableComponents/drawer/newDrawer.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -73,7 +73,11 @@ class NewDrawer extends PureBaseComponent {
/**
* The items' text style
*/
itemsTextStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.number])
itemsTextStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.number]),
/**
* Perform the animation in natively
*/
useNativeAnimations: PropTypes.bool,
};

constructor(props) {
Expand Down