// @flow
import * as React from 'react';
import classNames from 'classnames';

import { prefix, defaultProps, getUnhandledProps } from './utils';

type Props = {
  className?: string,
  classPrefix?: string,
  percent: number,
  strokeColor?: string,
  strokeWidth?: number,
  trailColor?: string,
  trailWidth?: number,
  showInfo?: boolean,
  status?: 'success' | 'fail' | 'active'
};

class ProgressLine extends React.Component<Props> {
  static defaultProps = {
    showInfo: true,
    percent: 0
  };

  render() {
    const {
      className,
      percent,
      strokeColor,
      strokeWidth,
      status,
      showInfo,
      classPrefix,
      ...rest
    } = this.props;

    const addPrefix = prefix(classPrefix);
    const unhandled = getUnhandledProps(ProgressLine, rest);
    const percentStyle = {
      width: `${percent}%`,
      height: strokeWidth,
      backgroundColor: strokeColor
    };

    const classes = classNames(classPrefix, addPrefix('line'), className, {
      [addPrefix(`line-${status || ''}`)]: !!status
    });

    const showIcon = status && status !== 'active';
    const info = showIcon ? (
      <span className={addPrefix(`icon-${status || ''}`)} />
    ) : (
      <span className={addPrefix('info-status')}>{percent}%</span>
    );

    return (
      <div className={classes} {...unhandled}>
        <div className={addPrefix('line-outer')}>
          <div className={addPrefix('line-inner')}>
            <div className={addPrefix('line-bg')} style={percentStyle} />
          </div>
        </div>
        {showInfo ? <div className={addPrefix('info')}>{info}</div> : null}
      </div>
    );
  }
}

export default defaultProps({
  classPrefix: 'progress'
})(ProgressLine);

@@ -783,16 +783,70 @@
  rest);%0A
+    const strokeWidthStyle = %7B height: strokeWidth %7D;%0A
     cons
@@ -896,35 +896,8 @@
 %25%60,%0A
-      height: strokeWidth,%0A
     
@@ -926,16 +926,43 @@
 okeColor
+,%0A      ...strokeWidthStyle
 %0A    %7D;%0A
@@ -1483,24 +1483,49 @@
 ine-inner')%7D
+ style=%7BstrokeWidthStyle%7D
 %3E%0A          

Update ProgressLine.js (#584)