RageStudio/comty
1
0
Fork 0
mirror of https://github.com/ragestudio/comty.git synced 2025-06-11 03:24:16 +00:00
Code Issues Packages Projects Releases Wiki Activity

improve account scroll handling

Browse Source
This commit is contained in:
SrGooglo 2022-11-24 11:42:17 +00:00
parent a5fd4ecbf0
commit 118ee393c5
2 changed files with 14 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
packages/app/src/pages/account/index.jsx
View File

@ -19,7 +19,7 @@ const TabsComponent = {
"details": DetailsTab "details": DetailsTab
} }
const TabRender = React.memo((props) => { const TabRender = React.memo((props, ref) => {
const [transitionActive, setTransitionActive] = React.useState(false) const [transitionActive, setTransitionActive] = React.useState(false)
const [activeKey, setActiveKey] = React.useState(props.renderKey) const [activeKey, setActiveKey] = React.useState(props.renderKey)
@ -41,8 +41,13 @@ const TabRender = React.memo((props) => {
return null return null
} }
// forwards ref to the tab
return <div className={classnames("fade-opacity-active", { "fade-opacity-leave": transitionActive })}> return <div className={classnames("fade-opacity-active", { "fade-opacity-leave": transitionActive })}>
<Tab {...props} /> {
React.createElement(Tab, {
...props,
})
}
</div> </div>
}) })
@ -59,8 +64,6 @@ const UserBadges = React.memo((props) => {
return null return null
}) })
console.log(badgesData)
if (!badgesData) { if (!badgesData) {
return null return null
} }
@ -148,7 +151,6 @@ export default class Account extends React.Component {
followers, followers,
}) })
//
app.eventBus.emit("style.compactMode", true) app.eventBus.emit("style.compactMode", true)
} }
@ -213,10 +215,8 @@ export default class Account extends React.Component {
// if component scrolled foward set cover height to 0 // if component scrolled foward set cover height to 0
if (e.target.scrollTop > 0) { if (e.target.scrollTop > 0) {
this.coverComponent.current.style.height = "0px" this.coverComponent.current.style.height = "0px"
this.contentRef.current.style.height = "100vh"
} else { } else {
this.coverComponent.current.style.height = "" this.coverComponent.current.style.height = ""
this.contentRef.current.style.height = ""
} }
} }
@ -292,17 +292,11 @@ export default class Account extends React.Component {
</div> </div>
</div> </div>
<div <div className="contents">
ref={this.contentRef}
className="contents"
onScroll={this.handleScroll}
style={{ height: !this.state.user?.cover ? "100vh" : undefined }}
>
<div className="tabMenuWrapper"> <div className="tabMenuWrapper">
<antd.Menu <antd.Menu
className="tabMenu" className="tabMenu"
mode="vertical" mode={window.isMobile ? "horizontal" : "vertical"}
selectedKeys={[this.state.tabActiveKey]} selectedKeys={[this.state.tabActiveKey]}
onClick={(e) => this.handlePageTransition(e.key)} onClick={(e) => this.handlePageTransition(e.key)}
> >
@ -320,7 +314,7 @@ export default class Account extends React.Component {
</antd.Menu> </antd.Menu>
</div> </div>
<div className="tabContent"> <div className="tabContent" ref={this.contentRef} onScroll={this.handleScroll}>
<TabRender <TabRender
renderKey={this.state.tabActiveKey} renderKey={this.state.tabActiveKey}
state={this.state} state={this.state}

7
packages/app/src/pages/account/index.less
View File

@ -187,10 +187,10 @@
grid-row-gap: 0px; grid-row-gap: 0px;
width: 100%; width: 100%;
height: 65vh; height: 100%;
overflow: hidden; overflow: hidden;
overflow-y: overlay; overflow-y: hidden;
margin-top: -1.5vh; margin-top: -1.5vh;
@ -200,8 +200,9 @@
position: sticky; position: sticky;
border-radius: @borderRadius; border-radius: @borderRadius;
top: -20vh;
padding: 20px 10px 20vh 10px; padding: 20px 10px 20vh 10px;
overflow-y: overlay;
} }
} }