# 按钮

响应用户点击行为，触发相应操作

## 案例演示

### Button 基本使用

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

const LinkButton = Button.LinkButton;

ReactDOM.render((
  <div className="btn-demo">
    <Button>默认</Button>
    <Button type="minor">次要</Button>
    <Button type="ghost">幽灵</Button>
    <Button size="lg">大尺寸</Button>
    <Button size="sm">小尺寸</Button>
    <Button icon="add">添加</Button>
    <Button icon="tianjia2" />
    <Button icon="jiancha" circle />
    <Button circle>踩</Button>
    <Button icon="yichu" transparent />
    <Button icon="setting" transparent />
    <Button disabled>不可用</Button>
    <Button icon="good" disabled />
    <Button icon={<Icon icon="collection" />}>使用 Icon 组件</Button>
    <LinkButton icon={<Icon icon="collection" />}>链接方式</LinkButton>
  </div>
), _react_runner_);
```
---demoend

### Button Loading 基本使用

在表单提交时，防止多次重复点击按钮时使用。

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

const { LoadingButton } = Button

class Demo extends Component {

  state = {
    loading: false
  };

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

  render() {
    const { loading } = this.state;
    return (
      <div className="btn-demo">
        <Button onClick={this.toggle}>{loading ? '结束' : '开始'}</Button>
        <LoadingButton loading={loading} style={{ width: 140 }}>loading 按钮</LoadingButton>
      </div>
    );
  }
}

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

### Button 按钮组
`
单选按钮组，同 `BarGroup` 中 `mode="single"`

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

const ButtonGroup = Button.Group;

const handleChange = (value) => {
  console.log(value);
}

ReactDOM.render((
  <div>
    <ButtonGroup defaultValue="2" onChange={handleChange}>
      <Button value="1">按钮一</Button>
      <Button value="2">按钮二</Button>
      <Button value="3">按钮三</Button>
      <Button value="4">按钮四</Button>
      <Button value="5">按钮五</Button>
    </ButtonGroup>
    <br />
    <br />
    <ButtonGroup defaultValue="2" onChange={handleChange} tight>
      <Button value="1">按钮一</Button>
      <Button value="2">按钮二</Button>
      <Button value="3">按钮三</Button>
      <Button value="4">按钮四</Button>
      <Button value="5">按钮五</Button>
    </ButtonGroup>
  </div>
), _react_runner_);
```
---demoend

### Button 按钮组 图标

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

const ButtonGroup = Button.Group;

const handleChange = (value) => {
  console.log(value);
}

ReactDOM.render((
<ButtonGroup defaultValue="b" onChange={handleChange}>
  <Button icon="good" value="a">按钮三</Button>
  <Button icon="jiancha" value="b">按钮四</Button>
  <Button icon="tianjia2" value="c">按钮五</Button>
</ButtonGroup>
), _react_runner_);
```
---demoend

### Button 按钮组 仅图标

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

const ButtonGroup = Button.Group;

const handleChange = (value) => {
  console.log(value);
}

ReactDOM.render((
<ButtonGroup defaultValue="e" onChange={handleChange}>
  <Button icon="good" value="e" />
  <Button icon="jiancha" value="f" />
</ButtonGroup>
), _react_runner_);
```
---demoend

### MultiGroup 基本使用（多选）

多选按钮组，同 `BarGroup` 中 `mode="multiple"`

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

const MultiGroup = Button.MultiGroup;

const handleChange = (value) => {
  console.log(value);
}

ReactDOM.render((
<MultiGroup defaultValue={['1', '2']} onChange={handleChange}>
  <Button value="1">按钮一</Button>
  <Button value="2">按钮二</Button>
  <Button value="3">按钮三</Button>
  <Button value="4">按钮四</Button>
  <Button value="5">按钮五</Button>
</MultiGroup>
), _react_runner_);
```
---demoend

### BarGroup 基本使用

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

const BarGroup = Button.BarGroup;

const handleChange = (value) => {
  console.log(value);
}

const handleTypeChange = (value) => {
  console.log(value);
}

const types = [
  { key: 'user', label: '用户', value: 'user' },
  { key: 'group', label: '组', value: 'group' },
  { key: 'role', label: '角色', value: 'role' },
];

ReactDOM.render((
  <div>
    <BarGroup mode="single" defaultValue="1" onChange={handleChange}>
      <Button value="1">按钮一</Button>
      <Button value="2">按钮二</Button>
      <Button value="3">按钮三</Button>
      <Button icon="good" value="e" />
      <Button icon="jiancha" value="f" />
    </BarGroup>
    <br />
    <BarGroup mode="multiple" defaultValue={['1', '2']} onChange={handleChange}>
      <Button value="1">按钮一</Button>
      <Button value="2">按钮二</Button>
      <Button value="3">按钮三</Button>
      <Button value="4">按钮四</Button>
      <Button value="5">按钮五</Button>
    </BarGroup>
    <br />
    <BarGroup mode="none">
      <Button onClick={e => console.log('clicked 1')}>按钮一</Button>
      <Button onClick={e => console.log('clicked 2')}>按钮二</Button>
      <Button onClick={e => console.log('clicked 3')}>按钮三</Button>
      <Button onClick={e => console.log('clicked 4')}>按钮四</Button>
      <Button onClick={e => console.log('clicked 5')}>按钮五</Button>
    </BarGroup>
    <br />
    <BarGroup mode="none" defaultValue="1" onChange={handleChange}>
      <Button value="1">按钮一</Button>
      <Button value="2">按钮二</Button>
      <Button value="3">按钮三</Button>
      <Button value="4">按钮四</Button>
      <Button value="5">按钮五</Button>
    </BarGroup>
    <StdFormRow label="选择分类" block>
      <BarGroup
        label={null}
        useTag
        mode="single"
        defaultValue="user"
        onChange={handleTypeChange}
      >
        {(types || []).map(c => (
          <Button key={c.key} value={c.value}>
            {c.label}
          </Button>
        ))}
      </BarGroup>
    </StdFormRow>
  </div>
), _react_runner_);
```
---demoend

### BarGroup 设置 label

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

const BarGroup = Button.BarGroup;

const handleChange = (value) => {
  console.log(value);
}

ReactDOM.render((
  <div>
    <BarGroup label="mode 为 single" mode="single" defaultValue="1" onChange={handleChange}>
      <Button value="1">按钮一</Button>
      <Button value="2">按钮二</Button>
      <Button value="3">按钮三</Button>
      <Button value="4">按钮四</Button>
      <Button value="5">按钮五</Button>
    </BarGroup>
    <br />
    <BarGroup label="mode 为 multiple" mode="multiple" defaultValue={['1', '2']} onChange={handleChange}>
      <Button value="1">按钮一</Button>
      <Button value="2">按钮二</Button>
      <Button value="3">按钮三</Button>
      <Button value="4">按钮四</Button>
      <Button value="5">按钮五</Button>
    </BarGroup>
    <br />
    <BarGroup label="mode 为 none （独立事件）" mode="none">
      <Button onClick={e => console.log('clicked 1')}>按钮一</Button>
      <Button onClick={e => console.log('clicked 2')}>按钮二</Button>
      <Button onClick={e => console.log('clicked 3')}>按钮三</Button>
      <Button onClick={e => console.log('clicked 4')}>按钮四</Button>
      <Button onClick={e => console.log('clicked 5')}>按钮五</Button>
    </BarGroup>
    <br />
    <BarGroup label="mode 为 none" mode="none" defaultValue="1" onChange={handleChange}>
      <Button value="1">按钮一</Button>
      <Button value="2">按钮二</Button>
      <Button value="3">按钮三</Button>
      <Button value="4">按钮四</Button>
      <Button value="5">按钮五</Button>
    </BarGroup>
    <br />
    <BarGroup label="新增/删除" mode="none" position="right">
      <Button icon="add" />
      <Button icon="yichu" style={{ color: 'red' }} />
    </BarGroup>
  </div>
), _react_runner_);
```
---demoend

### BarGroup 设置 child 统一 props

支持的 props 有： `useInnerIcon、size、transparent`

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

const BarGroup = Button.BarGroup;

const handleClick = (value) => {
  console.log(value);
}

ReactDOM.render((
  <div>
    <BarGroup label="统一设置 size" mode="none" size="sm">
      <Button onClick={() => handleClick('copy')}>按钮1</Button>
      <Button onClick={() => handleClick('delete')}>按钮2</Button>
      <Button onClick={() => handleClick('find')}>按钮3</Button>
    </BarGroup>
    <br />
    <BarGroup label="统一设置 useInnerIcon" mode="none" size="sm" useInnerIcon>
      <Button icon="copy" onClick={() => handleClick('copy')} />
      <Button icon="delete" onClick={() => handleClick('delete')} />
      <Button icon="find" onClick={() => handleClick('find')} />
    </BarGroup>
    <br />
    <BarGroup label="设置内部type=null" mode="none" size="sm" useInnerIcon>
      <Button type={null} icon="copy" onClick={() => handleClick('copy')} />
      <Button type={null} icon="delete" onClick={() => handleClick('delete')} />
      <Button type={null} icon="find" onClick={() => handleClick('find')} />
    </BarGroup>
  </div>
), _react_runner_);
```
---demoend

### 按钮 内置 color

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

const colors = ['pink', 'red', 'yellow', 'orange', 'cyan', 'green', 'blue', 'purple', 'magenta', 'gold', 'lime'];

ReactDOM.render((
<div className="btn-demo">
  {
    colors.map(c => <Button key={c} color={c}>{c}</Button>)
  }
</div>
), _react_runner_);
```
---demoend

## API

### Button

| params   |type     |default    | description |
|--------- |-------- |---------- |-------- |
| prefixCls | string | `amos-btn` | css class 前缀 |
| className | string | - | css class |
| children | ReactNode | - | button内容 |
| color | string | - | 颜色，设置到 backgroundColor 和 borderColor 会被 style 中的 相关样式属性覆盖 |
| type | string | - | 按钮类型，除默认外可选值: minor / inverse （次/反相） / ghost。(无默认值) 部分场景可以通过设置为 null 来提升优先级 |
| size | string | - | 按钮尺寸，除默认外可选值：sm、lg (其中默认值无需设置) |
| icon | string or ReactElement | - | 按钮图标，支持 fontawaresome 图标，为 `amosicon` 图标，当`useInnerIcon`为true 时，采用内置图标库。也支持传入组件 |
| useInnerIcon | boolean | - | 是否采用内置图标（该props 仅为内置组件使用，采用内置图标） |
| circle | boolean | - | 是否为圆形 |
| transparent | boolean | - | 文字颜色是否继承，背景是否透明 |
| block | boolean | - | 采用块级 |

color 可选值有： `'pink', 'red', 'yellow', 'orange', 'cyan', 'green', 'blue', 'purple', 'magenta', 'gold', 'lime'`。

> 注意，当 icon 为string 时，默认使用的 `amosicon` 库，此时如果需要使用内置 icon 库，则需要设置 `useInnerIcon=true`

### Button.LoadingButton

带 loading 动画的按钮

| params   |type     |default    | description |
|--------- |-------- |---------- |-------- |
| loading | boolean | - | 是否显示加载状态 |
| loadingStyle | Object | - | loading 内联样式， 如： `loadingStyle={ fontSize: 16 }` |

其它的props，详细参照 Button props

### Button.Group

单选组

| params   |type     |default    | description |
|--------- |-------- |---------- |-------- |
| className | string | - | css class |
| children | ReactNode | - | button group内容 |
| value | string or number | - | 当前值 |
| defaultValue | string or number | - | 同 value，不可控 |
| onChange | function | - | 选中事件，参数返回被选中的值 |
| tight | boolean | - | 紧促模式 |

### Button.MultiGroup

支持多选

| params   |type     |default    | description |
|--------- |-------- |---------- |-------- |
| className | string | - | css class |
| children | ReactNode | - | button group内容 |
| value | `Array<string or number>` | - | 已选中的值集合 |
| defaultValue | `Array<string or number>` | - | 同 value，不可控 |
| onChange | function | - | 选中事件，参数返回被选中的值 |

### Button.BarGroup

支持多选、单选、无选择

| params   |type     |default    | description |
|--------- |-------- |---------- |-------- |
| className | string | - | css class |
| children | ReactNode | - | button group内容 |
| label | ReactNode | - | button group 提示 label 内容 |
| mode | String | single | Group 模式，支持 `single、multiple、none` 三种模式 |
| value | `string or number or Array<string or number>` | - | 已选中的值集合 |
| defaultValue | `string or number Array<string or number>` | - | 同 value，不可控 |
| onChange | function | - | 选中事件，参数返回被选中的值 |
| position | function | left | label 位置，可选值为 left 和 right |
| useInnerIcon | bool | - | 子组件统一设置 `useInnerIcon` |
| size | String | - | 子组件统一设置按钮尺寸，除默认外可选值：sm、lg (其中默认值无需设置) |
| transparent | bool | - | 子组件统一设置文字颜色是否继承，背景是否透明 |
| useTag | bool | - | 是否使用 tag 模式，仅当 label 为 null 时生效 |

> 当 mode 为 `none` 时，可以给子节点 `Button` 单独设置事件，此时 `onChange、value` 则无效，详见上述演示案例。
> 此时，默认会给子节点 Button 设置 `type="minor"`, 优先级低于 Button 自身设置。如果需要取消默认添加的 minor，可通过设置 `type=null` 实现。

## 注意

在 `Button.BarGroup、Button.MultiGroup、Button.Group` 三个组件中，children 默认只接收为 `Button` 组件，
如果需要使用自定义的组件，需要自行设置 `__AMOS_TYPE__` 或 `displayName` 即可。

示例如下：

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

class CusButton extends Component {

  render() {
    return <Button {...this.props} />;
  }
}

CusButton.__AMOS_TYPE__ = 'Button';
CusButton.displayName = 'Button';

export default CusButton;
```

或者

```js
import { Button as BaseButton } from 'amos-framework';

class Button extends Component {

  render() {
    return <BaseButton {...this.props} />;
  }
}

export default Button;
```