# Spin

过渡

## basic use

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

<Spin type="beat" />
```

## 案例演示

### spinners

---demo
```js
import { Spin } from 'amos-framework';

const spinnerStyle = {
  boxSizing: 'border-box',
  display: 'flex',
  flex: '0 1 auto',
  flexDirection: 'row',
  flexWrap: 'wrap'
};

const spinnerInnerStyle = {
  display: 'flex',
  flex: '0 1 auto',
  flexDirection: 'column',
  flexGrow: 1,
  flexShrink: 0,
  flexBasis: '25%',
  maxWidth: '25%',
  height: '150px',
  alignItems: 'center',
  justifyContent: 'center'
};

const spinners = [
  'pulse', 'rotate', 'beat', 'rise', 'sync', 'grid', 'clip', 'fade',
  'scale', 'square', 'pacman', 'skew', 'ring', 'moon', 'dot', 'bounce'
];

const renderSpiner = (key, title, content) => {
  return (
    <div key={key} style={spinnerInnerStyle}>
      {title}
      {content}
    </div>
  );
}

ReactDOM.render((
  <div style={spinnerStyle}>
    {spinners.map(s => renderSpiner(`spinner-${s}`, s, <Spin type={s} />))}
  </div>
), _react_runner_);
```
---demoend

### ghostSpin

全局 spin，尽量再全局状态下使用，尽量不要在组件树中使用。

---demo
```js
import { Spin } from 'amos-framework';

class Demo extends Component {
  componentDidMount() {
    Spin.ghost({
      spinner: <Spin type="scale" />,
      // 自定义 container，停止时，将会卸载该容器
      getContainer: () => {
        return this.rootRef;
      }
    });
  }

  render() {
    return (
      <div ref={node => this.rootRef = node} />
    );
  }
}

// 直接使用
// const sg = Spin.ghost({
//   spinner: <Spin type="scale" />
// });
// 停止
// sg.stop();

// 再次启用需要再次调用

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

```
---demoend

### single spin

---demo
```js
import { SingleSpin } from 'amos-framework';

ReactDOM.render((
  <div style={{ color: 'white', minHeight: '10em' }}>
    <SingleSpin height="20" />
    <SingleSpin height="20px" />
    <SingleSpin height={30} />
    <SingleSpin height={18}>正在加载</SingleSpin>
  </div>
), _react_runner_);
```
---demoend

### NestedSpin 基本使用

---demo
```js
import { NestedSpin } from 'amos-framework';

const style = {
  margin: '3em'
};

ReactDOM.render((
  <div style={{ color: 'white', minHeight: '10em' }}>
    <NestedSpin style={style} />
    <NestedSpin style={style} size="sm" />
    <NestedSpin style={style} size="lg" />
  </div>
), _react_runner_);
```
---demoend

### NestedSpin 自定义加载

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

const style = {
  margin: '3em'
};

ReactDOM.render((
  <div style={{ color: 'white', minHeight: '10em' }}>
    <NestedSpin style={style} indicator={<Icon icon="loading" />} />
    <NestedSpin style={style} size="sm" indicator={<Icon icon="loading" />} />
    <NestedSpin style={style} size="lg" indicator={<Icon icon="loading" />} />
  </div>
), _react_runner_);
```
---demoend

### NestedSpin 使用 Spin

使用 `Spin` 组件时，需要阻止传入默认的 `className`

---demo
```js
import { NestedSpin, Spin } from 'amos-framework';

const style = {
  margin: '3em'
};

ReactDOM.render((
  <div style={{ color: 'white', minHeight: '10em' }}>
    <NestedSpin style={style} interceptClassName indicator={<Spin type="scale" color="#345fa6" />} />
    <NestedSpin style={style} interceptClassName indicator={<Spin type="rotate" color="#345fa6" />} />
    <NestedSpin style={style} interceptClassName indicator={<Spin type="clip" color="#345fa6" />} />
    <NestedSpin style={style} interceptClassName indicator={<Spin type="square" color="#345fa6" />} />
    <NestedSpin style={style} interceptClassName indicator={<Spin type="dot" color="#345fa6" />} />
    <NestedSpin style={style} interceptClassName indicator={<Spin type="grid" color="#345fa6" />} />
    <NestedSpin style={style} interceptClassName indicator={<Spin type="rise" color="#345fa6" />} />
  </div>
), _react_runner_);
```
---demoend

### NestedSpin 放在容器内

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

const styles = {
  inside: {
    textAlign: 'center',
    background: 'rgba(0,0,0,0.05)',
    borderRadius: '4px',
    marginBottom: '20px',
    padding: '30px 50px',
    margin: '20px 0'
  }
};

ReactDOM.render((
  <div style={{ color: 'white', minHeight: '10em' }}>
    <div style={styles.inside}>
      <NestedSpin />
    </div>
  </div>
), _react_runner_);
```
---demoend

### NestedSpin 内嵌容器

---demo
```js
import { NestedSpin, Icon, Tips } from 'amos-framework';

ReactDOM.render((
  <div style={{ color: 'white', minHeight: '10em' }}>
    <NestedSpin tip="Loading...">
      <Tips
        message="Tips 标题"
        description="tips 具体的描述信息."
        type="info"
      />
    </NestedSpin>
  </div>
), _react_runner_);
```
---demoend

### NestedSpin 内嵌容器切换加载状态

---demo
```js
import { Group, Input, Select } from 'amos-framework';

const options = ['vertical', 'tight', 'enableSpace'];

class Demo extends Component {
  state = { loading: false }

  toggle = (value) => {
    this.setState({ loading: value });
  }

  render() {
    const { groupProps } = this.state;
    return (
      <div>
        <NestedSpin spinning={this.state.loading} delay={500}>
          <Tips
            message="Tips 标题"
            description="tips 具体的描述信息."
            type="info"
          />
        </NestedSpin>
        <div style={{ marginTop: 16 }}>
          加载状态切换：<Switch onOff={this.state.loading} onChange={this.toggle} />
        </div>
    </div>
    );
  }
}

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

## props Spin

| params  | type | default | description |
| --- | --- | --- | --- |
| className | string | - | css class |
| loading | boolean | - | 是否加载中 |
| size | string | - | 可选值 'small', 'default', 'large'，也可以是其它像素具体值，如 16px 或 16。size 最终表现为 width 和 height 的值 |
| color | string | - | 颜色 |
| type | string | - | spinner 类型 |

## 支持的 spin

```js
'pulse',
'rotate',
'beat',
'rise',
'sync',
'grid',
'clip',
'fade',
'scale',
'square',
'pacman',
'skew',
'ring',
'moon',
'dot',
'bounce'
```

## Single Spin

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

<SingleSpin height="20" />
```

* height 高度，默认 26px，宽度与高度相同
* style 自定义样式
* className 自定义样式名

## NestedSpin

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

<NestedSpin />
<NestedSpin size="sm" />
<NestedSpin size="lg" />
```

- props

| params  | type | default | description |
| --- | --- | --- | --- |
| className | string | - | 自定义样式名 |
| style | object | - | 自定义内联样式 |
| delay | `number (毫秒)` | - | 延迟显示加载效果的时间（防止闪烁） |
| indicator | ReactElement | - | 加载指示符 |
| interceptClassName | boolean | - | 使用自定义加载指示符时，设置为 `true` 阻止注入默认样式名 |
| size | string | 'normal' | 组件大小，可选值为 `sm、normal、lg` |
| spinning | boolean | true | 是否为加载中状态 |
| tip | string | - | 当作为包裹元素时，可以自定义描述文案 |
| wrapperClassName | string | - | 包装器的类属性 |

全局设置 `加载符`

`SingleSpin.setDefaultIndicator(indicator: ReactElement)`