"...src/components/ArticleListContent/index.tsx" did not exist on "21c252c8da9fb884908a52edca782bc772824e6e"
index.tsx 1.07 KB
Newer Older
陈帅's avatar
陈帅 committed
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19
import React from 'react';
import { Tooltip } from 'antd';
import styles from './index.less';

export interface IMiniProgressProps {
  target: number;
  targetLabel?: string;
  color?: string;
  strokeWidth?: number;
  percent?: number;
  style?: React.CSSProperties;
}

const MiniProgress: React.SFC<IMiniProgressProps> = ({
  targetLabel,
  target,
  color = 'rgb(19, 194, 194)',
  strokeWidth,
  percent,
陈帅's avatar
陈帅 committed
20
}) => (
陈帅's avatar
陈帅 committed
21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41
    <div className={styles.miniProgress}>
      <Tooltip title={targetLabel}>
        <div className={styles.target} style={{ left: target ? `${target}%` : undefined }}>
          <span style={{ backgroundColor: color || undefined }} />
          <span style={{ backgroundColor: color || undefined }} />
        </div>
      </Tooltip>
      <div className={styles.progressWrap}>
        <div
          className={styles.progress}
          style={{
            backgroundColor: color || undefined,
            width: percent ? `${percent}%` : undefined,
            height: strokeWidth || undefined,
          }}
        />
      </div>
    </div>
  );

export default MiniProgress;