beenull/ente
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

adds collectionChip ref to scroll to the selected collection

Browse source
This commit is contained in:
abhinav-grd 2021-09-24 13:42:50 +05:30
parent 52b8a3127f
commit 4d84533707
1 changed files with 25 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

36
src/components/pages/gallery/Collections.tsx
View file

@ -74,7 +74,14 @@ export default function Collections(props: CollectionProps) {
const { selected, collections, setActiveCollection } = props;
const [selectedCollectionID, setSelectedCollectionID] =
useState<number>(null);
const collectionRef = useRef<HTMLDivElement>(null);
const collectionWrapperRef = useRef<HTMLDivElement>(null);
const collectionChipsRef = props.collections.reduce(
(refMap, collection) => {
refMap[collection.id] = React.createRef();
return refMap;
},
{}
);
const [collectionShareModalView, setCollectionShareModalView] =
useState(false);
const [scrollObj, setScrollObj] = useState<{
@ -84,24 +91,30 @@ export default function Collections(props: CollectionProps) {
}>({});
const updateScrollObj = () => {
if (collectionRef.current) {
if (collectionWrapperRef.current) {
const { scrollLeft, scrollWidth, clientWidth } =
collectionRef.current;
collectionWrapperRef.current;
setScrollObj({ scrollLeft, scrollWidth, clientWidth });
}
};
useEffect(() => {
updateScrollObj();
}, [collectionRef.current]);
}, [collectionWrapperRef.current]);
useEffect(() => {
if (!collectionRef?.current) {
if (!collectionWrapperRef?.current) {
return;
}
collectionRef.current.scrollLeft = 0;
collectionWrapperRef.current.scrollLeft = 0;
}, [collections]);
useEffect(() => {
collectionChipsRef[selected]?.current.scrollIntoView({
inline: 'center',
});
}, [selected]);
const clickHandler = (collectionID?: number) => () => {
setSelectedCollectionID(collectionID);
setActiveCollection(collectionID ?? ALL_SECTION);
@ -125,7 +138,7 @@ export default function Collections(props: CollectionProps) {
});
const scrollCollection = (direction: SCROLL_DIRECTION) => () => {
collectionRef.current.scrollBy(250 * direction, 0);
collectionWrapperRef.current.scrollBy(250 * direction, 0);
};
const renderTooltip = (collectionID) => {
const fileCount = props.collectionFilesCount?.get(collectionID) ?? 0;
@ -135,10 +148,8 @@ export default function Collections(props: CollectionProps) {
padding: '0',
paddingBottom: '5px',
}}
id="button-tooltip"
{...props}>
id="button-tooltip">
<div
{...props}
style={{
backgroundColor: '#282828',
padding: '2px 10px',
@ -172,7 +183,9 @@ export default function Collections(props: CollectionProps) {
onClick={scrollCollection(SCROLL_DIRECTION.LEFT)}
/>
)}
<Wrapper ref={collectionRef} onScroll={updateScrollObj}>
<Wrapper
ref={collectionWrapperRef}
onScroll={updateScrollObj}>
<Chip
active={!selected}
onClick={clickHandler(ALL_SECTION)}>
@ -191,6 +204,7 @@ export default function Collections(props: CollectionProps) {
delay={{ show: 250, hide: 400 }}
overlay={renderTooltip(item.id)}>
<Chip
ref={collectionChipsRef[item.id]}
active={selected === item.id}
onClick={clickHandler(item.id)}>
{item.name}