FreshRSS/FluentReader
1
0
Fork 0
mirror of https://github.com/yang991178/fluent-reader.git synced 2025-02-07 23:38:41 +01:00
Code Issues Packages Projects Releases Wiki Activity

fix keyboard navigation for feeds

Browse Source
This commit is contained in:
刘浩远 2020-08-12 15:52:27 +08:00
parent e0f1b4e6e5
commit 9cda9f48e6
2 changed files with 32 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
src/components/feeds/cards-feed.tsx
View File

@ -54,19 +54,36 @@ class CardsFeed extends React.Component<FeedProps> {
showItem={this.props.showItem} />
) : (<div className="flex-fix" key={"f-"+index}></div>)
canFocusChild = (el: HTMLElement) => {
if (el.id === "load-more") {
const container = document.getElementById("refocus")
const result = container.scrollTop > container.scrollHeight - 2 * container.offsetHeight
if (!result) container.scrollTop += 100
return result
} else {
return true
}
}
render() {
return this.props.feed.loaded && (
<FocusZone as="div" id="refocus" className="cards-feed-container" data-is-scrollable>
<FocusZone as="div"
id="refocus"
className="cards-feed-container"
shouldReceiveFocus={this.canFocusChild}
data-is-scrollable>
<List
className={AnimationClassNames.slideUpIn10}
items={this.flexFixItems()}
onRenderCell={this.onRenderItem}
getItemCountForPage={this.getItemCountForPage}
getPageHeight={this.getPageHeight}
ignoreScrollingState
usePageCache />
{
(this.props.feed.loaded && !this.props.feed.allLoaded)
? <div className="load-more-wrapper"><PrimaryButton
id="load-more"
text={intl.get("loadMore")}
disabled={this.props.feed.loading}
onClick={() => this.props.loadMore(this.props.feed)} /></div>

14
src/components/feeds/list-feed.tsx
View File

@ -38,21 +38,35 @@ class ListFeed extends React.Component<FeedProps> {
}
}
canFocusChild = (el: HTMLElement) => {
if (el.id === "load-more") {
const container = document.getElementById("refocus")
const result = container.scrollTop > container.scrollHeight - 2 * container.offsetHeight
if (!result) container.scrollTop += 100
return result
} else {
return true
}
}
render() {
return this.props.feed.loaded && (
<FocusZone as="div"
id="refocus"
direction={FocusZoneDirection.vertical}
className={this.getClassName()}
shouldReceiveFocus={this.canFocusChild}
data-is-scrollable>
<List
className={AnimationClassNames.slideUpIn10}
items={this.props.items}
onRenderCell={this.onRenderItem}
ignoreScrollingState
usePageCache />
{
(this.props.feed.loaded && !this.props.feed.allLoaded)
? <div className="load-more-wrapper"><PrimaryButton
id="load-more"
text={intl.get("loadMore")}
disabled={this.props.feed.loading}
onClick={() => this.props.loadMore(this.props.feed)} /></div>