Momentum

[Steam1996]

Is it possible to apply momentum such as this instead of grabbing and moving mouse up or down?

[dmitrykrylov]

@Steam1996 Hi! I already forgot about this project. The usecase that was the reason to create it was too specific and I haven't actually finished it. Nevertheless, I would like to revive this repo and npm module by implementing something really useful for other developers. But I can't come up with anything more that relates to "drum" and "react" at the same time. Do you have any ideas or usecases? By "momentum" you meant some kind of inertia that makes the wheel to keep it's rotation after mouse release? Or something different? I would be glad for any proposals and feedback.

[Steam1996]

Hi, I recorded a video. I am not sure if it is clear but I think you can get the point: https://www.useloom.com/share/138ef5b851704fe99d58901e8a28019c or here is a codepen example I found https://codepen.io/connorbailes/pen/oypGLY

Basically, when you scroll a list with your touchpad, or on the phone, it is smooth and it has momentum. You don't need to keep your finger on touchpad, mobile screen or mouse to go next or previous item. I don't know if I explain good but videos may help. I really need this feature this week. I wanted to modify your codes but I got stuck. That's why I wanted to write you.

[dmitrykrylov]

@Steam1996 now I have no time and ideas for getting this project alive. If you make a good step forward, I will be glad to approve your pull request.

What is the usecase where you need this component? In my opinion, it's a good UI element for mobile, but not for desktop. There is also a lot of implementations of such component for mobile platforms like react-native-wheel-picker

[Steam1996]

Thank you for the reply. Our application is a react web with responsive design. If I can make some good progress for improving the code, I will create a pull request.

I just have one question for now. I will appreciate if you can remember a few things from your codes:

How can we render children without using slice()? I do not want to repeat options.

 let options = [...children.slice(-extra), ...children];

      optionComponents = options.map((option, i) =>
        <div key={i} style={{height: this.calculateOptionHeight() + 'px'}}>{option}</div>
      );

Above code works perfectly as shown here: nice list

if I map children, the list gets broken as shown here: broken list

This happens when I drag the list if I set

optionComponents = children.map((option, i) =>
        <div key={i} style={{height: this.calculateOptionHeight() + 'px'}}>{option}</div>
      );

It needs to stop when the last index is in the center.

children length is 51 and options length is 62. Is there way to map only passed array without duplicating some indexes?

[dmitrykrylov]

@Steam1996 oh, sorry for late reply. Actually I would rewrite this module from scratch instead of trying to comprehend the current logic. If you need some examples of iteration over the options, you probably could look at carousel libraries such as react-alice-carousel or react-slick

[Steam1996]

@dmitrykrylov Thank you. I will keep using the implemented one right now. I just have one last question. How can I set a starting value? Let's say we have 20 items and I want to set the 4th item of the list as initial, starting value always. How can I calculate its offset so I can set offset in componentDidMount instead of calling calculateDefaultOffset()?

[dmitrykrylov]

@Steam1996 there is no value/defaultValue props. I will be glad to receive a pr if you implement it.