Ryan/Reactive-Resume
1
0
Fork 0
mirror of https://github.com/AmruthPillai/Reactive-Resume.git synced 2025-11-16 17:51:43 +10:00
Code Issues Packages Projects Releases Wiki Activity

fix issues with scrolling

Browse Source
This commit is contained in:
Amruth Pillai
2020-04-02 16:47:55 +05:30
parent 1ed03673da
commit 126a8ed305
4 changed files with 17 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/shared/TabBar.js
View File

@ -4,7 +4,7 @@ const TabBar = ({ tabs, currentTab, setCurrentTab }) => {
const tabsRef = useRef(null);
const scrollBy = x => {
const index = tabs.find(tab => tab.key === currentTab);
const index = tabs.findIndex(tab => tab.key === currentTab);
tabsRef.current.scrollLeft += x;
if (x < 0 && index > 0) {
@ -16,8 +16,6 @@ const TabBar = ({ tabs, currentTab, setCurrentTab }) => {
}
};
const wheelScrollBy = e => scrollBy(e.deltaY);
return (
<div className="mx-4 mb-6 flex items-center">
<div
@ -27,7 +25,7 @@ const TabBar = ({ tabs, currentTab, setCurrentTab }) => {
<i className="material-icons">chevron_left</i>
</div>
<ul id="tabs" ref={tabsRef} className="flex overflow-x-scroll" onWheel={wheelScrollBy}>
<ul id="tabs" ref={tabsRef} className="flex overflow-x-scroll">
{tabs.map(tab =>
currentTab === tab.key ? (
<li key={tab.key} className="mx-1 list-none">