117 lines
4.6 KiB
TypeScript
117 lines
4.6 KiB
TypeScript
import * as React from "react"
|
|
import { FeedContainer } from "../containers/feed-container"
|
|
import { AnimationClassNames, Icon, FocusTrapZone } from "@fluentui/react"
|
|
import ArticleContainer from "../containers/article-container"
|
|
import { ViewType } from "../schema-types"
|
|
import ArticleSearch from "./utils/article-search"
|
|
|
|
type PageProps = {
|
|
menuOn: boolean
|
|
contextOn: boolean
|
|
settingsOn: boolean
|
|
feeds: string[]
|
|
itemId: number
|
|
itemFromFeed: boolean
|
|
viewType: ViewType
|
|
dismissItem: () => void
|
|
offsetItem: (offset: number) => void
|
|
}
|
|
|
|
class Page extends React.Component<PageProps> {
|
|
offsetItem = (event: React.MouseEvent, offset: number) => {
|
|
event.stopPropagation()
|
|
this.props.offsetItem(offset)
|
|
}
|
|
prevItem = (event: React.MouseEvent) => this.offsetItem(event, -1)
|
|
nextItem = (event: React.MouseEvent) => this.offsetItem(event, 1)
|
|
|
|
render = () =>
|
|
this.props.viewType !== ViewType.List ? (
|
|
<>
|
|
{this.props.settingsOn ? null : (
|
|
<div
|
|
key="card"
|
|
className={
|
|
"main" + (this.props.menuOn ? " menu-on" : "")
|
|
}>
|
|
<ArticleSearch />
|
|
{this.props.feeds.map(fid => (
|
|
<FeedContainer
|
|
viewType={this.props.viewType}
|
|
feedId={fid}
|
|
key={fid + this.props.viewType}
|
|
/>
|
|
))}
|
|
</div>
|
|
)}
|
|
{this.props.itemId && (
|
|
<FocusTrapZone
|
|
disabled={this.props.contextOn}
|
|
ignoreExternalFocusing={true}
|
|
isClickableOutsideFocusTrap={true}
|
|
className="article-container"
|
|
onClick={this.props.dismissItem}>
|
|
<div
|
|
className="article-wrapper"
|
|
onClick={e => e.stopPropagation()}>
|
|
<ArticleContainer itemId={this.props.itemId} />
|
|
</div>
|
|
{this.props.itemFromFeed && (
|
|
<>
|
|
<div className="btn-group prev">
|
|
<a className="btn" onClick={this.prevItem}>
|
|
<Icon iconName="Back" />
|
|
</a>
|
|
</div>
|
|
<div className="btn-group next">
|
|
<a className="btn" onClick={this.nextItem}>
|
|
<Icon iconName="Forward" />
|
|
</a>
|
|
</div>
|
|
</>
|
|
)}
|
|
</FocusTrapZone>
|
|
)}
|
|
</>
|
|
) : (
|
|
<>
|
|
{this.props.settingsOn ? null : (
|
|
<div
|
|
key="list"
|
|
className={
|
|
"list-main" + (this.props.menuOn ? " menu-on" : "")
|
|
}>
|
|
<ArticleSearch />
|
|
<div className="list-feed-container">
|
|
{this.props.feeds.map(fid => (
|
|
<FeedContainer
|
|
viewType={this.props.viewType}
|
|
feedId={fid}
|
|
key={fid}
|
|
/>
|
|
))}
|
|
</div>
|
|
{this.props.itemId ? (
|
|
<div className="side-article-wrapper">
|
|
<ArticleContainer itemId={this.props.itemId} />
|
|
</div>
|
|
) : (
|
|
<div className="side-logo-wrapper">
|
|
<img
|
|
className="light"
|
|
src="icons/logo-outline.svg"
|
|
/>
|
|
<img
|
|
className="dark"
|
|
src="icons/logo-outline-dark.svg"
|
|
/>
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
</>
|
|
)
|
|
}
|
|
|
|
export default Page
|