Skip to content
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.

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

Wrong counting for React.Children in TrailingActions #54

Open
olegkolt opened this issue Oct 19, 2023 · 2 comments
Open

Wrong counting for React.Children in TrailingActions #54

olegkolt opened this issue Oct 19, 2023 · 2 comments

Comments

@olegkolt
Copy link

Describe the bug
In some cases Full Swipe with ≤2 children cases an error:

_this.trailingFullSwipeAction is not a function
TypeError: _this.trailingFullSwipeAction is not a function
    at SwipeableListItem.eval [as handleDragEnd] (webpack://react-swipeable-list-example/../src/SwipeableListItem.js?:328:19)
    at eval (webpack://react-swipeable-list-example/../src/SwipeableListItem.js?:174:13)

To Reproduce
Create a list of TrailingActions with 'null' as the last child:

<TrailingActions>
  <SwipeAction onClick={handleReject(id)}>
   ...
  </SwipeAction>
  <SwipeAction destructive={true} onClick={handleDelete(id)}>
   ...
  </SwipeAction>
  {null}
</TrailingActions>

Expected behavior
No error for cases if some of TrailingActions's children is not valid React element.

Desktop (please complete the following information):

  • OS: Android, iOS, mac
  • Browser: chrome
  • Version: latest

Additional context
How to fix: count valid react children before maping:

src/TrailingActions.js:
---
if (Array.isArray(children)) {

    let lastValidChildIndex = 0;

    React.Children.forEach(children, (child, index) => {
        if (React.isValidElement(child)) {
            lastValidChildIndex = index;
        }
    });

    return React.Children.map(children, (child, index) => {
      if (!React.isValidElement(child)) {
        return child;
      }
      return React.cloneElement(child, {
        main: index === lastValidChildIndex,
        trailing: true,
      });
    });
  }
@marekrozmus
Copy link
Owner

Hi,
Thanks for the info. Got a question - why do you want to put something else than SwipeAction inside the TrailingActions?
I would like to understand the usecase.

@olegkolt
Copy link
Author

olegkolt commented Nov 5, 2023

Hi,
I am mostly about using null inside TrailingActions. There is a problem with a code like:

<TrailingActions>
  {canDelete ? <SwipeAction ...> : null }
  {canArchive ? <SwipeAction ...> : null }
</TrailingActions>

If the last child is null, _this.trailingFullSwipeAction is not a function will appear.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants