Skip to content

Handling browser resize #1

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.

Sign up for GitHub

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

Open
vimalkodoth wants to merge 4 commits into
base: master
Choose a base branch
from
Open

Handling browser resize #1

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
67f9a7c
Handling browser resize
vimalkodoth Mar 1, 2020
55018ec
refactoring
vimalkodoth Mar 2, 2020
edf4937
added onwheel support
vimalkodoth Mar 3, 2020
5f74ae5
Fixed a issue with render
vimalkodoth Mar 3, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
212 changes: 117 additions & 95 deletions src/App.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,51 @@
import React, { useState, useEffect, useRef, useCallback } from "react";
import React, {
useState,
useEffect,
useRef,
useCallback,
useLayoutEffect
} from "react";
import "./styles.css";
import data from "./data.json";
import { useScroll } from "react-use-gesture";
import { useScroll, useDrag } from "react-use-gesture";
import { animated, useSpring } from "react-spring";
import { Transition } from "react-transition-group";

function useWindowSize() {
const [size, setSize] = useState([0, 0]);
let rtime;
let timeout = false;
let delta = 500;
let timeoutInstance = null;

function updateSize() {
setSize([window.innerWidth, window.innerHeight]);
}

const resizeend = () => {
if (new Date() - rtime < delta) {
setTimeout(resizeend, delta);
} else {
timeout = false;
updateSize();
}
};
const onResizeEnd = () => {
rtime = new Date();
if (timeout === false) {
timeout = true;
if (timeoutInstance) clearTimeout(timeoutInstance);
timeoutInstance = setTimeout(resizeend, delta);
}
};
useLayoutEffect(() => {
window.addEventListener("resize", onResizeEnd);
updateSize();
return () => window.removeEventListener("resize", updateSize);
}, []);
return size;
}

const transform = (pos, transitionDelay) => {
return {
transform: `translateX(${pos}px)`,
Expand All @@ -26,6 +67,7 @@ const List = data => {
const [obsOptions, setObsOptions] = useState(null);
const leftObserver = useRef(null);
const rightObserver = useRef(null);
const [width, height] = useWindowSize();

const [style, set] = useSpring(() => ({
transform: "perspective(500px) rotateY(0deg)",
Expand All @@ -35,13 +77,11 @@ const List = data => {
useEffect(() => {
setObsOptions({
rootMargin: "0px",
threshold: 1.0
threshold: 0.9
});
}, []);

useEffect(() => {
console.log(initialRenderCount);
console.log("pos " + slidePos);
const channels = data.data.slice(0);
channels.sort((a, b) => {
return parseInt(a.number) - parseInt(b.number);
Expand All @@ -53,10 +93,11 @@ const List = data => {
channels.unshift(...prependChannels);
channels.push(...appendChannels);
setRendered(channels);
}, [initialRenderCount]);
}, [initialRenderCount, width]);

const firstElementRef = useCallback(node => {
if (node) {
console.log(node);
if (leftObserver.current) leftObserver.current.disconnect();
leftObserver.current = new IntersectionObserver(entries => {
if (entries[0].isIntersecting) {
Expand Down Expand Up @@ -87,31 +128,26 @@ const List = data => {
}, [endReached, slidePos]);

useEffect(() => {
console.log(rendered);
if (rendered.length && containerRef.current) {
console.log(containerRef.current);
const containerWidth = containerRef.current.offsetWidth;
const element = containerRef.current.querySelector("li:first-child");
const style = element.currentStyle || window.getComputedStyle(element);
const elementWidth =
element.offsetWidth +
(parseFloat(style.marginLeft) + parseFloat(style.marginRight));
console.log(containerWidth + " " + elementWidth);
console.log(Math.floor(containerWidth / elementWidth));
const renderViewCount = Math.floor(containerWidth / elementWidth);
console.log(`[render] viewCount ${renderViewCount}`);
setSlideStyles(transform(-(elementWidth * renderViewCount), 0));
setSlidePos(-(elementWidth * renderViewCount));
setInitialRenderCount(renderViewCount);
setContainerWidth(containerWidth);
setScrollWidth(elementWidth * channelsCount);
setElementWidth(elementWidth);
console.log("render count set");
}
}, [rendered, channelsCount]);
}, [rendered, channelsCount, width, height]);

const onClicked = (e, item) => {
e.persist();
console.log(item);
slideToCenter(e);
};

Expand All @@ -128,24 +164,26 @@ const List = data => {
};

const slideToCenter = e => {
console.log(e.target);
const element = e.target;
const elementLeft = e.target.offsetLeft + slidePos;
debugger;
const elementCenter = elementLeft + Math.floor(element.offsetWidth / 2);
const wrapperCenter = Math.floor(containerWidth / 2);
console.log(elementLeft + " " + elementCenter + " " + wrapperCenter);
if (wrapperCenter > elementCenter) {
setSlidePos(prevPos => {
return prevPos + (wrapperCenter - elementCenter);
});
setSlideStyles(transform(slidePos + (wrapperCenter - elementCenter), 0));
setSlideStyles(
transform(slidePos + (wrapperCenter - elementCenter), 0.25)
);
} else if (elementCenter > wrapperCenter) {
setSlidePos(prevPos => {
debugger;
return prevPos - (elementCenter - wrapperCenter);
});
setSlideStyles(transform(slidePos - (elementCenter - wrapperCenter), 0));
setSlideStyles(
transform(slidePos - (elementCenter - wrapperCenter), 0.25)
);
}
};

Expand All @@ -155,101 +193,85 @@ const List = data => {
// setCurr(0);
};
const onLeftEndView = () => {
console.log("set");
setSlideStyles(transform(-scrollWidth, 0));
setSlidePos(-scrollWidth);
};

const [{ x, y }, setXY] = useSpring(() => ({ x: 0, y: 0 }));

const bind = useDrag(({ down, movement: [mx, my] }) => {
setXY({ x: down ? mx : 0, y: down ? my : 0 });
console.log(down);
console.log(x);
console.log(y);
});

const ChannelItem = React.forwardRef((props, ref) => {
const { item, index: key } = props;
return (
<li
key={`${item.channelId}_${key}`}
ref={ref}
style={{
display: "flex",
flex: 1,
alignItems: "center",
justifyContent: "center",
listStyle: "none",
height: "180px",
backgroundColor: "yellow",
margin: "5px",
cursor: "pointer",
...style
}}
onClick={e => onClicked(e, item, key)}
>
{item.number}
{/* <img
alt=""
src={item.imageList[1].url}
style={{ width: "100%" }}
/> */}
</li>
);
});

const onWheelList = delta => {
requestAnimationFrame(() => {
delta > 0 ? scrollLeft() : scrollRight();
});
};

return (
<div>
<div style={{ height: "100px" }} className={`wrapper`} ref={containerRef}>
<ul style={slideStyles}>
<div
style={{ height: "180px", marginBottom: "20px" }}
className={`wrapper`}
ref={containerRef}
>
<ul style={slideStyles} onWheel={e => onWheelList(e.deltaY)}>
{rendered.map((item, key) => {
if (key === rendered.length - 1) {
return (
<li
key={`${item.channelId}_${key}`}
<ChannelItem
ref={lastElementRef}
style={{
display: "flex",
flex: 1,
alignItems: "center",
justifyContent: "center",
listStyle: "none",
width: "100px",
height: "50px",
backgroundColor: "yellow",
margin: "5px",
cursor: "pointer",
...style
}}
onClick={e => onClicked(e, item, key)}
>
{item.number}
{/* <img
alt=""
src={item.imageList[1].url}
style={{ width: "100%" }}
/> */}
</li>
item={item}
key={key}
index={key}
/>
);
}
if (key === 0) {
return (
<li
key={`${item.channelId}_${key}`}
id="first"
<ChannelItem
ref={firstElementRef}
style={{
display: "flex",
flex: 1,
alignItems: "center",
justifyContent: "center",
listStyle: "none",
width: "100px",
height: "50px",
backgroundColor: "yellow",
margin: "5px",
cursor: "pointer",
...style
}}
onClick={e => onClicked(e, item, key)}
>
{item.number}
{/* <img
alt=""
src={item.imageList[1].url}
style={{ width: "100%" }}
/> */}
</li>
item={item}
key={key}
index={key}
/>
);
}
return (
<li
key={`${item.channelId}_${key}`}
style={{
display: "flex",
flex: 1,
alignItems: "center",
justifyContent: "center",
listStyle: "none",
width: "100px",
height: "50px",
backgroundColor: "yellow",
margin: "5px",
cursor: "pointer",
...style
}}
onClick={e => onClicked(e, item, key)}
>
{item.number}
{/* <img
alt=""
src={item.imageList[1].url}
style={{ width: "100%" }}
/> */}
</li>
);
return <ChannelItem item={item} key={key} index={key} />;
})}
</ul>
</div>
Expand Down
9 changes: 5 additions & 4 deletions src/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,20 +5,21 @@

.wrapper {
display: flex;
margin: 0 5px;
overflow: hidden;
max-width: 770px;
margin: 0;
padding: 0;
max-width: 880px;
min-width: 320px;
}

.wrapper ul {
position: relative;
display: flex;
max-width: 100%;
margin: 0;
padding: 0;
}
.wrapper li {
min-width: 100px;
min-width: 120px;
margin: 5px;
box-sizing: border-box;
}