RageStudio/comty
1
0
Fork 0
mirror of https://github.com/ragestudio/comty.git synced 2025-06-10 02:54:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

refactor to use functional component

Browse Source
This commit is contained in:
srgooglo 2022-06-06 10:29:42 +02:00
parent 9e8bb06921
commit c705f11b7e
1 changed files with 47 additions and 62 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

109
packages/app/src/components/LoadMore/index.jsx
View File

@ -1,39 +1,22 @@
import React from "react" import React from "react"
import PropTypes from "prop-types"
import classnames from "classnames" import classnames from "classnames"
import IntersectionObserver from "intersection-observer-polyfill" import IntersectionObserver from "intersection-observer-polyfill"
import "./index.less" import "./index.less"
export default class LoadMore extends React.Component { export default React.forwardRef((props, ref) => {
constructor() { const {
super(...arguments) className,
this.insideViewportCb = this.insideViewportCb.bind(this) children,
} hasMore,
loadingComponent,
noResultComponent,
} = props
static propTypes = { let observer = null
onBottom: PropTypes.func,
fetching: PropTypes.bool,
hasMore: PropTypes.bool,
NoResult: PropTypes.func,
Footer: PropTypes.func
}
componentDidMount() { const insideViewportCb = (entries) => {
try { const { fetching, onBottom } = props
const node = document.getElementById("bottom")
this.observer = new IntersectionObserver(this.insideViewportCb)
this.observer.observe(node)
} catch (err) {
console.log("err in finding node", err)
}
window.addEventListener("scroll", this.handleOnScroll)
}
insideViewportCb(entries) {
const { fetching, onBottom } = this.props
entries.forEach(element => { entries.forEach(element => {
if (element.intersectionRatio > 0 && !fetching) { if (element.intersectionRatio > 0 && !fetching) {
@ -42,41 +25,43 @@ export default class LoadMore extends React.Component {
}) })
} }
componentWillUnmount() { React.useEffect(() => {
if (this.observer) { try {
this.observer = null const node = document.getElementById("bottom")
observer = new IntersectionObserver(insideViewportCb)
observer.observe(node)
} catch (err) {
console.log("err in finding node", err)
} }
}
render() { return () => {
const { observer = null
className, }
children, }, [])
hasMore,
loadingComponent,
noResultComponent,
} = this.props
return <div className="infinite-scroll"> return <div className="infinite-scroll">
<div className={classnames(className)}> <div
{children} className={classnames(className)}
</div> ref={ref}
>
<div style={{ clear: "both" }} /> {children}
<div
id="bottom"
style={{ display: hasMore ? "block" : "none" }}
>
{loadingComponent && React.createElement(loadingComponent)}
</div>
<div
className="no-result"
style={{ display: hasMore ? "none" : "block" }}
>
{noResultComponent ? React.createElement(noResultComponent) : "No more result"}
</div>
</div> </div>
}
} <div style={{ clear: "both" }} />
<div
id="bottom"
style={{ display: hasMore ? "block" : "none" }}
>
{loadingComponent && React.createElement(loadingComponent)}
</div>
<div
className="no-result"
style={{ display: hasMore ? "none" : "block" }}
>
{noResultComponent ? React.createElement(noResultComponent) : "No more result"}
</div>
</div>
})