Progress rc wrapper

progress.story.tsx

import * as React from 'react'
import { storiesOf } from '@storybook/react'
import Progress from './progress'

storiesOf('Progress', module)
  .add('Simple', () => (
    <div>
      <div style={{width: 250}}>
        <Progress percent={20} type="line"/>
      </div>
      <hr/>
      <div style={{width: 50}}>
        <Progress percent={76} type="circle"/>
      </div>
      <hr/>
      <div style={{width: 50}}>
        <Progress percent={25} type="circle" showLabel/>
      </div>
    </div>
  ))

progress.styl

@import "../../assets/css/colors.styl"
@import "../../assets/css/mixins.styl"

.en-progress
  position relative
  &__text
    position absolute
    display flex
    justify-content center
    align-items center
    width 100%
    height 100%
    fontScale(-1)
    color $black

progress.tsx

import * as React from 'react'
import { observer } from 'mobx-react'
import { Line, Circle } from 'rc-progress'
import 'rc-progress/assets/index.css'
import './progress.css'

interface IProps {
  type: 'line' | 'circle'
  percent: number
  showLabel?: boolean
  gapDegree?: number
  gapPosition?: string
  strokeWidth?: number
  strokeColor?: string
  trailWidth?: number
  trailColor?: string
  strokeLinecap?: string
  className?: string
  style?: object
}

@observer
class Progress extends React.Component<IProps, {}> {
  mq: MediaQueryList
  constructor(props: IProps) {
    super(props)
    this.mq = window.matchMedia('(max-width: 767px)')
  }
  render() {
    const { type, showLabel, percent, ...rest } = this.props
    const svgProps = Object.assign({}, this.props)
    if (type === 'line') {
      let isMobile = this.mq.matches
      let strokeWith = isMobile ? 6 : 4
      return (
        <Line
          strokeWidth={strokeWith}
          trailWidth={strokeWith}
          trailColor="#D8D8D8"
          strokeColor="#2196F3"
          {...svgProps}
        />
      )
    } else if (type === 'circle' && showLabel) {
      return (
        <div className="en-progress">
          <span className="en-progress__text">{percent}%</span>
          <Circle
            strokeWidth="13"
            trailWidth="13"
            trailColor="#CBCBCB"
            strokeColor="#00B636"
            percent={percent}
            {...rest}
          />
        </div>
      )
    } else if (type === 'circle') {
      return (
        <Circle
          strokeWidth="13"
          trailWidth="13"
          trailColor="#CBCBCB"
          strokeColor="#00B636"
          percent={percent}
          {...rest}
        />
      )
    } else {
      return null
    }
  }
}

export default Progress