don't render <text> if textForPercentage is falsy or returns falsy

fix #24
This commit is contained in:
Andy Edwards 2017-09-18 17:59:26 -05:00 committed by Kevin Qi
parent df50365929
commit 1d7d84cc7b

View File

@ -74,12 +74,15 @@ class CircularProgressbar extends React.Component {
}
render() {
const classForPercentage = this.props.classForPercentage ? this.props.classForPercentage(this.props.percentage) : '';
const {percentage, classForPercentage, textForPercentage, className, strokeWidth} = this.props
const classForPercentage = classForPercentage ? classForPercentage(percentage) : '';
const pathDescription = this.getPathDescription();
const text = textForPercentage ? textForPercentage(percentage) : null
return (
<svg
className={`CircularProgressbar ${this.props.className} ${classForPercentage}`}
className={`CircularProgressbar ${className} ${classForPercentage}`}
viewBox="0 0 100 100"
>
{
@ -96,25 +99,25 @@ class CircularProgressbar extends React.Component {
<path
className="CircularProgressbar-trail"
d={pathDescription}
strokeWidth={this.props.strokeWidth}
strokeWidth={strokeWidth}
fillOpacity={0}
/>
<path
className="CircularProgressbar-path"
d={pathDescription}
strokeWidth={this.props.strokeWidth}
strokeWidth={strokeWidth}
fillOpacity={0}
style={this.getProgressStyle()}
/>
<text
{text ? <text
className="CircularProgressbar-text"
x={50}
y={50}
>
{this.props.textForPercentage(this.props.percentage)}
</text>
{text}
</text> : null}
</svg>
);
}