/
githubmirror
/
algorithm-visualizer
Обзор
Документация
Войти
/
githubmirror
/
algorithm-visualizer
Код
Запросы
0
Пакеты
0
Релизы
0
Аналитика
Безопасность
master
src/components/ProgressBar/index.js
48 строк
1 KB
Jason Park
Rename jsx and scss files
09 июн 2019, 17:39
09 июн 2019, 17:39
60fcab5
Код
Авторство
О чём код?
import React from 'react'; import { classes } from 'common/util'; import styles from './ProgressBar.module.scss'; class ProgressBar extends React.Component { constructor(props) { super(props); this.handleMouseDown = this.handleMouseDown.bind(this); this.handleMouseMove = this.handleMouseMove.bind(this); this.handleMouseUp = this.handleMouseUp.bind(this); } handleMouseDown(e) { this.target = e.target; this.handleMouseMove(e); document.addEventListener('mousemove', this.handleMouseMove); document.addEventListener('mouseup', this.handleMouseUp); } handleMouseMove(e) { const { left } = this.target.getBoundingClientRect(); const { offsetWidth } = this.target; const { onChangeProgress } = this.props; const progress = (e.clientX - left) / offsetWidth; if (onChangeProgress) onChangeProgress(progress); } handleMouseUp(e) { document.removeEventListener('mousemove', this.handleMouseMove); document.removeEventListener('mouseup', this.handleMouseUp); } render() { const { className, total, current } = this.props; return ( <div className={classes(styles.progress_bar, className)} onMouseDown={this.handleMouseDown}> <div className={styles.active} style={{ width: `${current / total * 100}%` }} /> <div className={styles.label}> <span className={styles.current}>{current}</span> / {total} </div> </div> ); } } export default ProgressBar;