|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import React from "react";
|
|
1
|
+
import React, { useRef } from "react";
|
|
2
2
|
import cn from "clsx";
|
|
3
3
|
import classes from "./Catalogue.module.css";
|
|
4
4
|
|
|
@@ -7,6 +7,7 @@ interface CatalogueRowProps {
|
|
|
7
7
|
activeId?: number;
|
|
8
8
|
href?: string;
|
|
9
9
|
onClick?: (id: number) => void;
|
|
10
|
+
onClicked: () => void;
|
|
10
11
|
text: string;
|
|
11
12
|
}
|
|
12
13
|
|
|
@@ -14,10 +15,14 @@ const CatalogueRow: React.FC<CatalogueRowProps> = ({
|
|
|
14
15
|
activeId,
|
|
15
16
|
id,
|
|
16
17
|
onClick,
|
|
18
|
+
onClicked,
|
|
17
19
|
text,
|
|
18
20
|
href
|
|
19
21
|
}: CatalogueRowProps) => {
|
|
20
|
-
const handleClick = () =>
|
|
22
|
+
const handleClick = () => {
|
|
23
|
+
onClick && onClick(id);
|
|
24
|
+
onClicked();
|
|
25
|
+
};
|
|
21
26
|
|
|
22
27
|
return (
|
|
23
28
|
<span>
|
|
@@ -52,10 +57,19 @@ export interface Item {
|
|
|
52
57
|
}
|
|
53
58
|
|
|
54
59
|
const Catalogue: React.FC<CatalogueProps> = ({ columns }: CatalogueProps) => {
|
|
60
|
+
const columnRefs = Array.from({length: columns.length}, (x, i) => useRef<HTMLDivElement>(null));
|
|
61
|
+
const handleClicked = () => {
|
|
62
|
+
for (const columnRef of columnRefs) {
|
|
63
|
+
if (!columnRef.current) {
|
|
64
|
+
return;
|
|
65
|
+
}
|
|
66
|
+
columnRef.current.scrollTop = 0;
|
|
67
|
+
}
|
|
68
|
+
};
|
|
55
69
|
return (
|
|
56
70
|
<div className={cn(classes.container)}>
|
|
57
71
|
{columns.map((column, i) => (
|
|
58
|
-
<div key={i} className={cn(classes.column)}>
|
|
72
|
+
<div key={i} ref={columnRefs[i]} className={cn(classes.column)}>
|
|
59
73
|
{column.items.map((f) => (
|
|
60
74
|
<CatalogueRow
|
|
61
75
|
id={f.id}
|
|
@@ -63,6 +77,7 @@ const Catalogue: React.FC<CatalogueProps> = ({ columns }: CatalogueProps) => {
|
|
|
63
77
|
text={f.text}
|
|
64
78
|
key={f.id}
|
|
65
79
|
href={f.href}
|
|
80
|
+
onClicked={handleClicked}
|
|
66
81
|
onClick={column.onClick}
|
|
67
82
|
/>
|
|
68
83
|
))}
|