marekrozmus / react-swipeable-list

Swipeable list component for React supporting several behaviours (e.g. iOS)
https://marekrozmus.github.io/react-swipeable-list/
MIT License
114 stars 20 forks source link

Allow `null` values in trailing and leading actions #40

Closed arondeparon closed 1 year ago

arondeparon commented 1 year ago

What

This pull requests adds a React.isValidElement check right before the trailing and leading elements are cloned.

Why?

Without this, any child that is passed will automatically be cloned, even if it is not a valid React element. If that is the case, a fatal error will be thrown, breaking the entire application.

This pull request fixes that by simply returning the child as-is if it is not a React element.

Use cases?

I came across this issue because I want to conditionally show certain actions. Right now, it's impossible to do it like this:

<LeadingActions>
    {someCondition ? (
        <SwipeAction
            destructive={true}
            onClick={() => {
                doSomething()
            }}>
            Do something
        </SwipeAction>
    ) : null}
    {anotherCondition ? (
        <SwipeAction
            destructive={true}
            onClick={() => {
                doAnotherThing()
            }}>
            Do another thing
        </SwipeAction>
    ) : null}
</LeadingActions>

If ONE of these conditions is false, I would expect the other element to still be rendered. This is not the case, because the returned null is seen as a child, which is subsequently cloned (causing an error).

codecov-commenter commented 1 year ago

Codecov Report

Patch coverage: 75.00% and project coverage change: -0.35 :warning:

Comparison is base (38a60e5) 90.25% compared to head (2678bdc) 89.91%.

:exclamation: Your organization is not using the GitHub App Integration. As a result you may experience degraded service beginning May 15th. Please install the Github App Integration for your organization. Read more.

Additional details and impacted files ```diff @@ Coverage Diff @@ ## main #40 +/- ## ========================================== - Coverage 90.25% 89.91% -0.35% ========================================== Files 5 5 Lines 462 466 +4 Branches 167 169 +2 ========================================== + Hits 417 419 +2 - Misses 45 47 +2 ``` | [Impacted Files](https://app.codecov.io/gh/marekrozmus/react-swipeable-list/pull/40?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=Marek+Rozmus) | Coverage Δ | | |---|---|---| | [src/LeadingActions.js](https://app.codecov.io/gh/marekrozmus/react-swipeable-list/pull/40?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=Marek+Rozmus#diff-c3JjL0xlYWRpbmdBY3Rpb25zLmpz) | `77.77% <75.00%> (-7.94%)` | :arrow_down: | | [src/TrailingActions.js](https://app.codecov.io/gh/marekrozmus/react-swipeable-list/pull/40?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=Marek+Rozmus#diff-c3JjL1RyYWlsaW5nQWN0aW9ucy5qcw==) | `77.77% <75.00%> (-7.94%)` | :arrow_down: |

:umbrella: View full report in Codecov by Sentry.
:loudspeaker: Do you have feedback about the report comment? Let us know in this issue.

marekrozmus commented 1 year ago

@all-contributors please add @ArondeParon for code

@ArondeParon Thank you :)

allcontributors[bot] commented 1 year ago

@marekrozmus

I've put up a pull request to add @ArondeParon! :tada: