Scribd
Upload
7 views

Trace

Uploaded by

meganathanrbm
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOC, PDF, TXT or read online on Scribd
7 views

Trace

Uploaded by

meganathanrbm
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOC, PDF, TXT or read online on Scribd
You are on page 1/ 2

import React from "react";

import ReactDOM from "react-dom";


import { ScrollMenu, VisibilityContext } from "react-horizontal-scrolling-menu";

import { LeftArrow, RightArrow } from "./arrows";


import { Card } from "./card";
import { Footer } from "./footer";
import { Header } from "./header";
import "./globalStyles.css";
import usePreventBodyScroll from "./usePreventBodyScroll";

// NOTE: for hide scrollbar


import "./hideScrollbar.css";
// import "./firstItemMargin.css";

type scrollVisibilityApiType = React.ContextType<typeof VisibilityContext>;

const elemPrefix = "test";


const getId = (index: number) => `${elemPrefix}${index}`;

const getItems = () =>


Array(20)
.fill(0)
.map((_, ind) => ({ id: getId(ind) }));

const Arrows = () => (


<div
style={{
width: "100%",
display: "flex",
justifyContent: "center"
}}
>
Some other content
<div style={{ marginLeft: "10px", display: "flex" }}>
<LeftArrow /> <RightArrow />
</div>
</div>
);

function App() {
const [items] = React.useState(getItems);
const { disableScroll, enableScroll } = usePreventBodyScroll();

return (
<>
<Header />
<div className="example" style={{ paddingTop: "100px", height: "150vh" }}>
<div onMouseEnter={disableScroll} onMouseLeave={enableScroll}>
<ScrollMenu
// or on top
// Header={Arrows}
Footer={Arrows}
onWheel={onWheel}
>
{items.map(({ id }) => (
<Card
title={id}
itemId={id} // NOTE: itemId is required for track items
key={id}
/>
))}
</ScrollMenu>
</div>
<Footer />
</div>
</>
);
}
export default App;

function onWheel(apiObj: scrollVisibilityApiType, ev: React.WheelEvent): void {


const isThouchpad = Math.abs(ev.deltaX) !== 0 || Math.abs(ev.deltaY) < 15;

if (isThouchpad) {
ev.stopPropagation();
return;
}

if (ev.deltaY < 0) {
apiObj.scrollNext();
} else if (ev.deltaY > 0) {
apiObj.scrollPrev();
}
}

ReactDOM.render(<App />, document.getElementById("root"));

You might also like