Comments (7)
Hi - I got it working with the code you've provided. Just few changes were needed.
This is method for swipe simulation:
const simulateSwipe = (el, fromPoint, to, step) => {
if (fromPoint.x >= to) {
simulateMouseEvent('mouseup', el, fromPoint.x, fromPoint.y);
} else {
setTimeout(() => {
simulateMouseEvent('mousemove', el, fromPoint.x + step, fromPoint.y);
simulateSwipe(el, { ...fromPoint, x: fromPoint.x + step }, to, step);
}, 100);
}
};
and here is your code with some changes:
const el = document.querySelector('.swipeable-list-item__content');
const pos = el.getBoundingClientRect();
const center1X = Math.floor((pos.left + pos.right) / 2);
const center1Y = Math.floor((pos.top + pos.bottom) / 2);
simulate(el, 'mousedown', { pointerX: center1X, pointerY: center1Y });
simulateSwipe(el, { x: center1X, y: center1Y }, center1X + 100, 5);
as you can see the element for events was incorrect and we need setTimeout
usage between moves so that requestAnimationFrame
callback is triggered.
You can change step
and setTimeout
delay
parameter to have the animation look smoother.
Let me know if that helps and send me some GIF or images (if you can) with your results :)
from react-swipeable-list.
Hey, sorry for the delay. I forgot about this because we thought we'd leave this part for now and move forward with other things. I haven't yet implemented this, but I'll give this a shot in the app once we're free from the major tasks. Once done, I'll try to share the GIF if possible!
I think we can close this ticket! ✌️
Thanks a lot for the support! 😃
from react-swipeable-list.
@timothymiller Here is full code of example: https://github.com/marekrozmus/react-swipeable-list/tree/main/examples/src/programmatically
Unfortunately it is just proof of concept but there is problem that also other mouse events are captured during the swipe. I would need some more time to do that in proper way. If you have any ideas please let me know :)
from react-swipeable-list.
Hi :),
Could you please describe what API would you need and how it should work exactly?
Do you need some specific duration length and so on?
So far I understand that you just want the item to behave like when user swipes item?
from react-swipeable-list.
Could you please describe what API would you need and how it should work exactly?
One way I was thinking to solve this is by using the drag/touch events if we can trigger them programmatically (not really sure on that, gotta give it a shot first!).
And another way I was thinking if we can have a prop to <SwipeableListItem>
such as <SwipeableListItem showTrailingActions={true} />
when we set this prop set to true it would show up the trailing actions with the transition of swipe.
Do you need some specific duration length and so on?
Default transition is cool if we could just augment the swipe!
So far I understand that you just want the item to behave like when user swipes item?
Yes, basically I want users to know that a list item is swipeable because unless we don't show them, they might not know about it.
from react-swipeable-list.
I tried firing custom touch/mouse events on the list item element using the below functions but, it seems it's not working as expected.
/**
* It triggers touch events. Also supports multiple touch events.
* @param {Element} element target DOM element
* @param {string} type type of event
* @param {Array} touches {x, y, id} position and identifier of the event
*/
export function simulateTouchEvent(element, type, touches) {
const touchEvents = [];
touches.forEach((touch) => {
touchEvents.push(
new Touch({
screenX: touch.x,
screenY: touch.y,
pageX: touch.x,
pageY: touch.y,
clientX: touch.x,
clientY: touch.y,
identifier: touch.id,
target: element,
force: 10,
})
);
});
element.dispatchEvent(
new TouchEvent(type, {
touches: touchEvents,
view: window,
cancelable: true,
bubbles: true,
})
);
}
/**
* It triggers mouse event.
* @param {string} type type of event
* @param {Element} element target DOM element
* @param {number} x clientX of event
* @param {number} y clientY of event
*/
export function simulateMouseEvent(type, element, x, y) {
const evt = document.createEvent('MouseEvents');
evt.initMouseEvent(
type,
true,
true,
window,
1,
x,
y,
x,
y,
false,
false,
false,
false,
0,
element
);
element.dispatchEvent(evt);
}
And, in my component where I'm rendering the list,
const MySwipeableListComponent = (props) => {
// ... other code
useEffect(() => {
setTimeout(() => {
if (showActions) {
const el = document.querySelector('.swipeable-list-item'); // the list item root (it will get the first element from list)
const pos = el.getBoundingClientRect();
const center1X = Math.floor((pos.left + pos.right) / 2);
const center1Y = Math.floor((pos.top + pos.bottom) / 2);
setShowActions(true);
// simulating the mouse drag on only x-axis with 100 pixels drag from right to left
simulateMouseEvent('mousemove', el, center1X, center1Y);
simulateMouseEvent('mouseup', el, center1X - 100, center1Y);
// similarly tried with simulating touch events as well, but no luck
simulateTouchEvent(el, 'ontouchstart', [
{ // for touch
x: center1X,
y: center1Y,
id: 100,
},
]);
simulateTouchEvent(el, 'touchend', [
{
x: center1X - 150,
y: center1Y,
id: 100,
},
]);
}
}, 500);
}, [showActions]);
return (
<SwipeableList fullSwipe={false} type={ListType.IOS} threshold={threshold}>
{items.map((item, index) => (
<SwipeableListItem
key={`item__${item._id}`}
trailingActions={trailingActions(item)}
>
<Item
item={item}
onDelete={onDeleteItemHandler}
/>
</SwipeableListItem>
))}
</SwipeableList>
);
};
from react-swipeable-list.
Hi, sorry to keep you waiting but I got busy week and hopefully will get some free time to check that on weekend. So stay tuned :)
BTW: wouldn't it be easier to record a GIF animation and place it on layer above the list ;)?
from react-swipeable-list.
Related Issues (20)
- _this.trailingFullSwipeAction is not a function HOT 2
- Compatibility issue with newer Chromium HOT 6
- Is it possible to track the swipe direction? HOT 4
- Delay on LeadingAction HOT 5
- Does not work with react-awesome-dnd HOT 7
- React does not recognize the x... HOT 1
- Don't work in localhost with IOS twoaction button but work in codesandbox HOT 9
- SwipeableListItem onClick action triggered, when element swiped HOT 4
- Provide a way to click / touch an opened item, toggle all other items to close, including itself HOT 7
- onSwipeStart only called once per element HOT 3
- Max percentage swipable HOT 4
- trailingFullSwipeAction error every time I attempt to trigger a trailing swipe HOT 1
- [Feature Request] allow to pass react fragments or insert react nodes between list items HOT 5
- maxSwipe is not optional HOT 4
- incomplete closure of swipes HOT 1
- Several actions open if opened after deletion HOT 3
- Wrong counting for React.Children in TrailingActions HOT 2
- Warning: React does not recognize the X prop on a DOM element HOT 1
- Swiping is not working as expected HOT 1
- Alternatively, would it be possible for you to provide a reset API that would allow us to manually close the `<SwipeableListItem>` components? HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-swipeable-list.