# Steps

步骤

## Usage

```js
import { Steps } from 'amos-framework';

const StepItem = Steps.StepItem;

// render

<Steps current={1}>
  <StepItem title="已完成" description="描述信息..." />
  <StepItem title="进行中" description="描述信息..." />
  <CustomStep title="进行中" description="描述信息..." />
  <StepItem title="待运行" description="描述信息..." />
</Steps>
```

### 当前运行状态

---demo
```js
import { Button, Steps } from 'amos-framework';

const StepItem = Steps.StepItem;

const steps = [
  { key: 'finished', title: '已完成', description: '步骤内容...' },
  { key: 'process', title: '进行中', description: '步骤内容...' },
  { key: 'wait-1', title: '待运行', description: '步骤内容...' },
  { key: 'wait-2', title: '待运行', description: '步骤内容...' },
  { key: 'wait-3', title: '待运行', description: '步骤内容...' }
];

class Demo extends Component {
  constructor(props) {
    super(props);
    this.state = {
      current: 1,
      size: 'small',
      direction: 'horizontal'
    };
  }

  nextStep = () => {
    const { current } = this.state;
    let next = current + 1;

    if (next === steps.length) {
      next = 0;
    }
    this.setState({
      current: next
    });
  };

  toggleSize = () => {
    this.setState(prevState => {
      return {
        size: prevState.size === 'small' ? '' : 'small'
      };
    });
  };

  toggleDirection = () => {
    this.setState(prevState => {
      return {
        direction: prevState.direction === 'horizontal' ? 'vertical' : 'horizontal'
      };
    });
  };

  render() {
    const { current, direction, size } = this.state;
    return (
      <div>
        <div className="btn-demo" style={{ padding: '1em' }}>
          <Button onClick={this.toggleSize}>{size === 'small' ? '正常' : '偏小'}</Button>
          <Button onClick={this.toggleDirection}>{direction === 'horizontal' ? 'vertical' : 'horizontal'}</Button>
          <Button onClick={this.nextStep}>next</Button>
        </div>
        <Steps labelPlacement="vertical" current={current} size={size} direction={direction}>
          {steps.map((step, i) => (
            <StepItem key={step.key} {...step} />
          ))}
        </Steps>
      </div>
    );
  }
}

ReactDOM.render(<Demo />, _react_runner_);
```
---demoend

### 自定义步骤

---demo
```js
import { Button, Steps } from 'amos-framework';

const StepItem = Steps.StepItem;

const CustomStep = props => <StepItem style={{ fontWeight: 'bold', fontStyle: 'italic' }} {...props} />;

ReactDOM.render((
<Steps current={1}>
  <StepItem title="已完成" description="步骤内容..." />
  <StepItem title="进行中" description="步骤内容..." />
  <CustomStep title="进行中" description="步骤内容..." />
  <StepItem title="待运行" description="步骤内容..." />
</Steps>
), _react_runner_);
```
---demoend

### 自定义Icon

---demo
```js
import { Button, Steps, Icon } from 'amos-framework';

const StepItem = Steps.StepItem;

ReactDOM.render((
<Steps current={1}>
  <StepItem title="步骤1" icon={<Icon icon="frown" />} />
  <StepItem title="步骤2" icon="info" />
  <StepItem title="步骤3" icon="good" />
</Steps>
), _react_runner_);
```
---demoend


### 动态生成步骤

---demo
```js
import { Button, Steps } from 'amos-framework';

const StepItem = Steps.StepItem;

let index = 3;

class Demo extends Component {
  constructor(props) {
    super(props);
    this.state = {
      dymSteps: [
        { key: 'finished', title: '已完成', description: '步骤内容...' },
        { key: 'process', title: '进行中', description: '步骤内容...' },
        { key: 'wait-1', title: '待运行', description: '步骤内容...' },
        { key: 'wait-2', title: '待运行', description: '步骤内容...' }
      ]
    };
  }

  addStep = () => {
    const dymSteps = [...this.state.dymSteps];
    dymSteps.push({
      key: `wait-${index++}`,
      title: '待运行',
      description: '动态添加的节点'
    });
    this.setState({ dymSteps });
  };

  render() {
    const { dymSteps } = this.state;
    return (
      <div>
        <Button icon="add" onClick={this.addStep}>
          添加
        </Button>
        <Steps>
          {dymSteps.map((step, i) => (
            <StepItem key={step.key} {...step} />
          ))}
        </Steps>
      </div>
    );
  }
}

ReactDOM.render(<Demo />, _react_runner_);
```
---demoend

### 错误步骤

---demo
```js
import { Button, Steps, Icon } from 'amos-framework';

const StepItem = Steps.StepItem;

ReactDOM.render((
<Steps current={2} status="error">
  <StepItem title="已完成" description="步骤内容..." />
  <StepItem title="进行中" description="步骤内容..." />
  <StepItem title="待运行" description="步骤内容..." />
  <StepItem title="待运行" description="步骤内容..." />
</Steps>
), _react_runner_);
```
---demoend

### 进度红点

---demo
```js
import { Button, Steps, Icon } from 'amos-framework';

const StepItem = Steps.StepItem;

ReactDOM.render((
<Steps progressDot size="small" current={1}>
  <StepItem title="已完成" description="步骤内容..." />
  <StepItem title="进行中" description="步骤内容..." />
  <StepItem title="待运行" description="步骤内容..." />
  <StepItem title="待运行" description="步骤内容..." />
  <StepItem title="待运行" description="步骤内容..." />
</Steps>
), _react_runner_);
```
---demoend

### 垂直

---demo
```js
import { Button, Steps, Icon } from 'amos-framework';

const StepItem = Steps.StepItem;

ReactDOM.render((
<Steps direction="vertical">
  <StepItem title="已完成" description="步骤内容..." />
  <StepItem title="进行中" description="步骤内容..." />
  <StepItem title="待运行" description="步骤内容..." />
  <StepItem title="待运行" description="步骤内容..." />
</Steps>
), _react_runner_);
```
---demoend

## props

| params | type | default | description |
|--------- |-------- |--------- |-------- |
| prefixCls | string | `amos-steps` | 组件默认clssname prefix |
| className | string | - | 组件自定义clssname |
| iconPrefix | string | `amos` | 自动添加 `icon` 后缀，如 `amos` 则具体使用为 `amosicon` |
| direction | string | `horizontal` | 方向，默认水平 |
| labelPlacement | string | `horizontal` | 显示文字方向，默认水平 |
| status | string | `process` | 状态 |
| size | string | - | 大小 |
| progressDot | `boolean or func` | false | 是否采用 dot |
| style | object | - | 自定义样式 |
| current | number | 1 | 当前步骤 |

## StepItem.props

| params | type | default | description |
|--------- |-------- |--------- |-------- |
| prefixCls | string | `amos-steps` | 组件默认clssname prefix |
| className | string | - | 组件自定义clssname |
| style | object | - | 自定义样式 |
| wrapperStyle | object | - | 外层div样式 |
| itemWidth | `number or string` | - | 宽 |
| status | string | - | 状态 |
| iconPrefix | string | `amos` | 自动添加 `icon` 后缀，如 `amos` 则具体使用为 `amosicon` |
| icon | ReactNode | - | icon |
| adjustMarginRight | `number or string` | `horizontal` | margin right |
| stepNumber | string | - | 步骤显示编号 |
| progressDot | `boolean or func` | false | 是否采用 dot |
| description | any | - | 描述信息 |
| title | any | - | 标题 |