dzeio/components
1
0
Fork 0
mirror of https://github.com/dzeiocom/components.git synced 2025-06-17 21:19:20 +00:00
Code Issues Packages Projects Releases Wiki Activity

Added three new components

Browse Source 
Signed-off-by: Avior <github@avior.me>
This commit is contained in:
Florian Bouillon
2021-12-09 12:17:11 +01:00
parent 496bafa0e4
commit 32ea3b958f
22 changed files with 318 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
src/Loader/index.tsx
View File

@ -1,5 +1,6 @@
import { Router } from 'next/router'
import React from 'react'
import ProgressBar from '../ProgressBar'
import { buildClassName } from '../Util'
import css from './Loader.module.styl'
@ -42,6 +43,7 @@ export default class Loader extends React.Component<Props, State> {
public componentDidMount() {
if (this.props.auto) {
Router.events.on('routeChangeComplete', this.routeChangeComplete)
Router.events.on('routeChangeError', this.routeChangeComplete)
Router.events.on('routeChangeStart', this.routeChangeStart)
}
}
@ -49,15 +51,16 @@ export default class Loader extends React.Component<Props, State> {
public componentWillUnmount() {
if (this.props.auto) {
Router.events.off('routeChangeComplete', this.routeChangeComplete)
Router.events.off('routeChangeError', this.routeChangeComplete)
Router.events.off('routeChangeStart', this.routeChangeStart)
}
}
public render = () => (
<div className={buildClassName(css.div, [css.hide, (this.props.percent || this.state.percent) === 100])}>
<div style={{width: (this.props.percent || this.state.percent) ? `${(this.props.percent || this.state.percent)}%` : 0}}></div>
</div>
)
public render = () => <ProgressBar
noRoundBorders
progress={this.props.percent ?? this.state.percent ?? 0}
className={buildClassName(css.div, [css.hide, (this.props.percent ?? this.state.percent) === 100 || (this.props.percent ?? this.state.percent ?? 0) === 0])}
/>
private routeChangeComplete = () => {
if (this.interval) {