Progress

进度条。Progress UI 提供与WeLink规范一致的视图。 进度条状态包括：上传前、上传中、上传成功、上传失败。

参数说明

效果示例

import React from 'react';
import { Button, Progress } from '@wecode/react-weui';

export default class ProgressDemo extends React.Component {

  state = {
    value: 0,
    isUploading: false
  };

  componentWillUnmount() {
    const { toastTimer } = this.state;
    toastTimer && clearInterval(toastTimer);
  }

  start() {
    const { isUploading } = this.state;
    if (isUploading) {
      return;
    }
    this.setState({ isUploading: true }, () => this.upload());
  }

  pause() {
    this.setState({ isUploading: false });
  }

  upload() {
    const { isUploading, value } = this.state;
    if (!isUploading) {
      return;
    }
    const newValue = (value + 1) % 100;
    this.setState({ value: newValue });
    this.state.toastTimer = setTimeout(this.upload.bind(this), 20);
  }

  render() {
    const { isUploading, value } = this.state;
    return (
      <section>
        <Progress
          value={isUploading ? value : 0}
          onClick={this.pause.bind(this)}
        />
        <br />
        <Progress
          value={isUploading ? value : 45}
          onClick={this.pause.bind(this)}
        />
        <br />
        <Progress
          value={isUploading ? value : 75}
          onClick={this.pause.bind(this)}
        />
        <br />
        <Button onClick={this.start.bind(this)} disabled={isUploading}>上传</Button>
      </section>
    );
  }
}