Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Submit feedback
Contribute to GitLab
Sign in
Toggle navigation
C
coopwire-hypothesis
Project
Project
Details
Activity
Releases
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Issues
0
Issues
0
List
Board
Labels
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Charts
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
孙灵跃 Leon Sun
coopwire-hypothesis
Commits
b66168ff
Commit
b66168ff
authored
Nov 17, 2022
by
Robert Knight
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
Convert ThreadList to TS
parent
b4402316
Changes
1
Show whitespace changes
Inline
Side-by-side
Showing
1 changed file
with
10 additions
and
22 deletions
+10
-22
ThreadList.tsx
src/sidebar/components/ThreadList.tsx
+10
-22
No files found.
src/sidebar/components/ThreadList.
js
→
src/sidebar/components/ThreadList.
tsx
View file @
b66168ff
...
@@ -3,6 +3,7 @@ import classnames from 'classnames';
...
@@ -3,6 +3,7 @@ import classnames from 'classnames';
import
debounce
from
'lodash.debounce'
;
import
debounce
from
'lodash.debounce'
;
import
{
ListenerCollection
}
from
'../../shared/listener-collection'
;
import
{
ListenerCollection
}
from
'../../shared/listener-collection'
;
import
type
{
Thread
}
from
'../helpers/build-thread'
;
import
{
import
{
calculateVisibleThreads
,
calculateVisibleThreads
,
THREAD_DIMENSION_DEFAULTS
,
THREAD_DIMENSION_DEFAULTS
,
...
@@ -12,8 +13,6 @@ import { getElementHeightWithMargins } from '../util/dom';
...
@@ -12,8 +13,6 @@ import { getElementHeightWithMargins } from '../util/dom';
import
ThreadCard
from
'./ThreadCard'
;
import
ThreadCard
from
'./ThreadCard'
;
/** @typedef {import('../helpers/build-thread').Thread} Thread */
// The precision of the `scrollPosition` value in pixels; values will be rounded
// The precision of the `scrollPosition` value in pixels; values will be rounded
// down to the nearest multiple of this scale value
// down to the nearest multiple of this scale value
const
SCROLL_PRECISION
=
50
;
const
SCROLL_PRECISION
=
50
;
...
@@ -26,15 +25,13 @@ function getScrollContainer() {
...
@@ -26,15 +25,13 @@ function getScrollContainer() {
return
container
;
return
container
;
}
}
/** @param {number} pos */
function
roundScrollPosition
(
pos
:
number
)
{
function
roundScrollPosition
(
pos
)
{
return
Math
.
max
(
pos
-
(
pos
%
SCROLL_PRECISION
),
0
);
return
Math
.
max
(
pos
-
(
pos
%
SCROLL_PRECISION
),
0
);
}
}
/**
export
type
ThreadListProps
=
{
* @typedef ThreadListProps
threads
:
Thread
[];
* @prop {Thread[]} threads
};
*/
/**
/**
* Render a list of threads.
* Render a list of threads.
...
@@ -44,10 +41,8 @@ function roundScrollPosition(pos) {
...
@@ -44,10 +41,8 @@ function roundScrollPosition(pos) {
* annotations (and replies) are complex interactive components whose
* annotations (and replies) are complex interactive components whose
* user-defined content may include rich media such as images, audio clips,
* user-defined content may include rich media such as images, audio clips,
* embedded YouTube videos, rendered math and more.
* embedded YouTube videos, rendered math and more.
*
* @param {ThreadListProps} props
*/
*/
function
ThreadList
({
threads
}
)
{
export
default
function
ThreadList
({
threads
}:
ThreadListProps
)
{
// Client height of the scroll container.
// Client height of the scroll container.
const
[
scrollContainerHeight
,
setScrollContainerHeight
]
=
useState
(
0
);
const
[
scrollContainerHeight
,
setScrollContainerHeight
]
=
useState
(
0
);
...
@@ -91,9 +86,7 @@ function ThreadList({ threads }) {
...
@@ -91,9 +86,7 @@ function ThreadList({ threads }) {
// ID of thread to scroll to after the next render. If the thread is not
// ID of thread to scroll to after the next render. If the thread is not
// present, the value persists until it can be "consumed".
// present, the value persists until it can be "consumed".
const
[
scrollToId
,
setScrollToId
]
=
useState
(
const
[
scrollToId
,
setScrollToId
]
=
useState
<
string
|
null
>
(
null
);
/** @type {string|null} */
(
null
)
);
const
topLevelThreads
=
threads
;
const
topLevelThreads
=
threads
;
...
@@ -151,8 +144,7 @@ function ThreadList({ threads }) {
...
@@ -151,8 +144,7 @@ function ThreadList({ threads }) {
// Clear `scrollToId` so we don't scroll again after the next render.
// Clear `scrollToId` so we don't scroll again after the next render.
setScrollToId
(
null
);
setScrollToId
(
null
);
/** @param {Thread} thread */
const
getThreadHeight
=
(
thread
:
Thread
)
=>
const
getThreadHeight
=
thread
=>
threadHeights
.
get
(
thread
.
id
)
||
THREAD_DIMENSION_DEFAULTS
.
defaultHeight
;
threadHeights
.
get
(
thread
.
id
)
||
THREAD_DIMENSION_DEFAULTS
.
defaultHeight
;
const
yOffset
=
topLevelThreads
const
yOffset
=
topLevelThreads
...
@@ -168,10 +160,8 @@ function ThreadList({ threads }) {
...
@@ -168,10 +160,8 @@ function ThreadList({ threads }) {
useEffect
(()
=>
{
useEffect
(()
=>
{
setThreadHeights
(
prevHeights
=>
{
setThreadHeights
(
prevHeights
=>
{
const
changedHeights
=
new
Map
();
const
changedHeights
=
new
Map
();
for
(
let
{
id
}
of
visibleThreads
)
{
for
(
const
{
id
}
of
visibleThreads
)
{
const
threadElement
=
/** @type {HTMLElement} */
(
const
threadElement
=
document
.
getElementById
(
id
)
!
;
document
.
getElementById
(
id
)
);
if
(
!
threadElement
)
{
if
(
!
threadElement
)
{
// This could happen if the `ThreadList` DOM is not connected to the document.
// This could happen if the `ThreadList` DOM is not connected to the document.
...
@@ -226,5 +216,3 @@ function ThreadList({ threads }) {
...
@@ -226,5 +216,3 @@ function ThreadList({ threads }) {
</
div
>
</
div
>
);
);
}
}
export
default
ThreadList
;
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment