sandstreamdev / react-swipeable-list Goto Github PK

I tried to install it and I got the error that files doesn't not exit. So I went to the folder node_modules/@sandstreamdev/react-swipeable-list and I realised that the project was empty, just contains folders, but not the React app.

I have an webpage where the background is a gradient. I can't seem to be able to remove the white background and the flex properties from the listitem wrapper without having to built the css file from scratch. Not sure if I'm doing something wrong.

.content {
width: 100%;
align-items: center;
box-sizing: border-box;
background-color: #fff;
height: 100%;
display: flex;
}

Screenshot of issue
https://prnt.sc/seic00

Describe the bug
Doesn't work with typescript + create-react-app from the box.

To Reproduce
Steps to reproduce the behavior:

1. npx create-react-app app --typescript.
2. try to import this module.
3. get error from either typescript or webpack (couldn't tell): Module not found: Can't resolve '@sandstreamdev/react-swipeable-list'

Expected behavior
A clear and concise description of what you expected to happen.

Screenshots
https://codesandbox.io/s/sandstreamdevreact-swipeable-list-with-typescript-9fgmv

notes:
import '@sandstreamdev/react-swipeable-list/dist/styles.css' does actually work, so I'm convinced it's something to do with tsconfig's compilerOptions.module: esnext which can't be overridden, so we must think of some workaround.

consider a block that have text content like a message in a messenger app. when you add swipeable feature to that block if you want to select the text content the block will start swiping and you can not select the text. I think if you can detect the speed of swipe then you can detect the action is swiping or selecting a text.

I would appreciate if you recommend me a way to handle this issue with every thing that is provided for now. I need to some how mange text selecting and swiping on an item. thanks

How is it possible to trigger onClick function on button which is located as a content of swipe element?

Any tip how to achieve this?

Thanks in advance.
Edit Code:
{({ className, ...rest }) => (

<SwipeableListItem key={id}
swipeLeft={{
content: <Button startIcon={} className={classes.addToCartBtn}
onClick={e => {
e.stopPropagation();
console.log('Test function call');
}}>
Add to cart
,
actionAnimation: ActionAnimations.NONE
}}
{...rest}>
///items

))}

When deleting something from a list, the return animation of the tile makes it confusing for the user.

the current animations are perfect for functionality like mark as unread but for delete or remove functionality, the tile should not perform the return animation.

After upgrading to React 18, this error occurs where compiler complains about missing children property in ISwipeableListItemProps.

The error could be eliminated by adding the children property to ISwipeableListItemProps.

children?: React.ReactNode | undefined;

A fix would be appreciated. Thanks!

Is your feature request related to a problem? Please describe.
I have to use react-swipeable-list in combination with the react-sortable-hoc node module.
Horizontally swipes are implemented with this module and the sorting is implemented with react-sortable-hoc.
My issue is, that if I swipe horizontally it also causes the sorting of the react-sortable-hoc component to start dragging at the same time.
My idea to fix this is to give the react-sortable-hoc component an higher drag delay than react-swipable list and to use it's shouldCancelStart callback, to disable its sorting while the user is swiping left or right.

Describe the solution you'd like
To detect if a swipe is in progress I need an onStartSwipe event, which is called if the user clicks / touches this component and moves his cursor horizontally and an onEndSwipe event which is called when the user aborts the swipe gesture or finishes it.
I need also the possibility to check how much percentage of an item is colored while the user does a swipe gesture, something like an "on move while mouse down".

scrollStartThreshold and swipeStartThreshold don't seem to work, I set various kinds of values, but the swipe never block

// project edited
https://codesandbox.io/s/naughty-montalcini-pbgo25?file=/src/basic/BasicExample.js:1171-1191

thanks
Ric

Everything works like a charm but when you scroll the list in a mobile device it feels a lot slower than the native scrolling. Can you please look into that.

Describe the bug
The swiping doesn't work in Safari on Mac.

Steps To Reproduce
Steps to reproduce the behavior:

1. Open the demo page in Safari on Mac.
2. Try to swipe something

Expected behavior
It should be swipable as shown in this gif https://raw.githubusercontent.com/sandstreamdev/react-swipeable-list/master/docs/example.gif

Actual behavior
It selects text

Desktop (please complete the following information):

• macOS Mojave
• Safari
• 13.0.4 (14608.4.9.1.4)

Additional Information
Mobile Safari and other browsers works.

Is your feature request related to a problem? Please describe.
I'm always frustrated when I've started swiping left/right, but when up and down scrolling is not blocked. It makes the user experience feel quite clumsy when trying to do things quick and smoothly. You end up not making the swipes fully or accidentally scrolling down

Describe the solution you'd like
I'd like to see vertical swiping blocked when horizontal swipe is being used

Additional context
I've tried increasing threshold to make swipes go easier, but the result is still not satisfactory

0

I'm trying to use react-swipeable-list to enable swiping in a pair of lists (the first is a list of items I might shop for, the second list is the list of stuff I'm shopping for the next time I go to the store).

I'm using this as part of a React app.

I notice that when I have an event handler for swiping that only console.log's a message then things work great. I see the message, the swiped item smoothly slides back into place, and things look the way that I'd like them to.

However, if the event handler for the swiping modifies the app's (React) state then the swiped list item 'snaps back' and the new item shows up instantaneously in the second list.

I believe what's happening is that the state change is causing a re-render immediately, which is why things snap back/appear instantaneously - React isn't waiting for the swiping animation to finish sliding the list item back to it's original place and instead re-renders the whole page.

I've looked through the react-swipeable-list docs (and code) and there doesn't appear to be a callback for when the animation has finished (nor am I clear on how to add such a thing).

I looked online for general techniques for running JS code when a CSS animation is finished and it looks like it can be done by adding an event listener to the DOM element that's being animated. My understanding is that React code isn't supposed to interact with DOM elements directly (because React will move/re-render/delete them, I think).

Is there a way to tell react-swipeable-list to finish it's animation before running the event handler for swiping an item?

NOTE: This was also posted to StackOverflow

Describe the bug
When scrolling on mobile I cannot get the swipe to block.

To Reproduce
Here's my code:

`

        <SwipeableList>

          <SwipeableListItem
            threshold={0.2}
            style={{ marginTop: "0px" }}
            swipeLeft={{
              content: <span style={{ fontSize: "3em" }}>😍</span>,
            }}
            swipeRight={{
              content: <span style={{ fontSize: "3em" }}>😒</span>,
            }}
          >

            <div>

              <Text> hello</Text>

            </div>

          </SwipeableListItem>

          <SwipeableListItem
            threshold={0.2}
            style={{ marginTop: "0px" }}
            swipeLeft={{
              content: <span style={{ fontSize: "3em" }}>😍</span>,
            }}
            swipeRight={{
              content: <span style={{ fontSize: "3em" }}>😒</span>,
            }}
          >

            <div>

              <Text> hello</Text>

            </div>

          </SwipeableListItem>
          </SwipeableList>

`

I expected to block swiping when scrolling up or down.
The blockSwipe prop on SwipeableListItem does work though.

swipeprogress cannot be used to trigger an event at a certain point because it depends on the speed of the swipe not all numbers are logged.

Is your feature request related to a problem? Please describe.
The item has a fixed color (white) that can only be customizable by providing custom styles or by overriding the item class. See https://github.com/sandstreamdev/react-swipeable-list/blob/master/src/SwipeableListItem.css#L15. The problem comes when the list is needed in different colors.

Describe the solution you'd like
Add an optional className prop to SwipeableListItem to let the user makes any overrides needed.

Describe alternatives you've considered

• Add an optional bgColor prop to SwipeableListItem to let the user customize it.
• Use CSS variables to let the user customize it via CSS. This only adds some flexibility but does not help to fix the issue of using the list with different bg colors.

Additional context
N/A

Note: Happy to open a PR with a solution after discussing the options

Not working

Originally posted by @ahmadjonhn in #182

The devDependency rollup was updated from 1.27.6 to 1.27.7.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

rollup is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

Your Greenkeeper Bot 🌴

I'm wanting to have the swipe action remove items from the list. I want this removal to be animated.

Describe the solution you'd like
Ideally this would involve simply changing the <SwipeableListItem> children in a <SwipeableList> and having the children observed so that the component can automagically transition the deleted item away. That's the most developer friendly solution, to my mind, but I guess there are other options as well...