Files
goTorrent/torrent-project/src/CustomCells/progressBarCell.js

52 lines
1.3 KiB
JavaScript

import React from 'react';
import PropTypes from 'prop-types';
import { TableCell } from 'material-ui';
import { withStyles } from 'material-ui/styles';
const styles = theme => ({
progressBarCell: {
paddingLeft: theme.spacing.unit,
paddingRight: theme.spacing.unit,
borderBottom: `1px solid ${theme.palette.text.lightDivider}`,
},
progressBar: {
backgroundColor: theme.palette.primary[300],
float: 'left',
height: theme.spacing.unit,
whiteSpace: 'nowrap',
},
progressText: {
display: 'inline-block',
fontSize: '1em',
textAlign: 'right',
verticalAlign: 'text-top',
fontSize: '12px',
fontWeight: 'bold',
margin: '5px',
whiteSpace: 'nowrap',
}
});
export const ProgressBarCellBase = ({ value, classes, style }) => (
<TableCell
className={classes.progressBarCell}
style={style}
>
<div
className={classes.progressBar}
style={{ width: `${value}%` }}
title={`${value.toFixed(1)}%`}
/><div className={classes.progressText}>{value}</div>
</TableCell>
);
ProgressBarCellBase.propTypes = {
value: PropTypes.number.isRequired,
classes: PropTypes.object.isRequired,
style: PropTypes.object,
};
ProgressBarCellBase.defaultProps = {
style: {},
};
export const ProgressBarCell = withStyles(styles, { name: 'ProgressBarCell' })(ProgressBarCellBase);