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

feat: support mouse wheel #597

Merged
merged 2 commits into from
Oct 29, 2023

Conversation

mvp-v
Copy link
Contributor

@mvp-v mvp-v commented Oct 27, 2023

Adds Mouse Wheel support to change value.
Mouse wheel up - increment, [SHIFT] +mouse wheel up - increment by 10 * step,
Mouse wheel down - decrement, [SHIFT] +mouse wheel down - decrement by 10 * step

note: moving mouse wheel up raises wheel event with negative deltaY (just write addEventListener('wheel', console.log) in dev console to check). Scrolling with touchbar is inverted (we should "touch" page and drag it to top to scroll bottom).
I've implemented the same behavior as DevExpress library has https://js.devexpress.com/React/Demos/WidgetsGallery/Demo/NumberBox/Overview/MaterialBlueLight/

@vercel
Copy link

vercel bot commented Oct 27, 2023

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
input-number ❌ Failed (Inspect) Oct 28, 2023 0:26am

src/InputNumber.tsx Fixed Show fixed Hide fixed
@codecov
Copy link

codecov bot commented Oct 28, 2023

Codecov Report

Merging #597 (eceb5d2) into master (86a93fe) will increase coverage by 0.19%.
The diff coverage is 100.00%.

❗ Current head eceb5d2 differs from pull request most recent head 44f2984. Consider uploading reports for the commit 44f2984 to get more accurate results

@@            Coverage Diff             @@
##           master     #597      +/-   ##
==========================================
+ Coverage   94.34%   94.53%   +0.19%     
==========================================
  Files           6        6              
  Lines         283      293      +10     
  Branches       72       75       +3     
==========================================
+ Hits          267      277      +10     
  Misses         16       16              
Files Coverage Δ
src/InputNumber.tsx 97.61% <100.00%> (+0.11%) ⬆️

📣 We’re building smart automated test selection to slash your CI/CD build times. Learn more

src/InputNumber.tsx Outdated Show resolved Hide resolved
src/InputNumber.tsx Outdated Show resolved Hide resolved
@mvp-v
Copy link
Contributor Author

mvp-v commented Oct 28, 2023

Screencast.from.28-10-23.14.26.53.webm

I've pushed fix to prevent page scrolling while changing input value with wheel.
JS listeners should be used because React onWheel event is passive and can't preventDefault scroll https://stackoverflow.com/questions/63663025/react-onwheel-handler-cant-preventdefault-because-its-a-passive-event-listenev

@afc163 afc163 merged commit c139821 into react-component:master Oct 29, 2023
8 of 9 checks passed
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

Successfully merging this pull request may close these issues.

3 participants