# 折叠面板

## 案例演示

### 基本用法

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

const Panel = Collapse.Panel;

const onClick = (key) => console.log('click', key);

ReactDOM.render((
  <Collapse activeKey={['1']} onChange={key => console.log(key)}>
    <Panel header="标题1" key="1" onClick={onClick}>
      <div>内容1</div>
      <div>内容2</div>
      <div>内容3</div>
    </Panel>
    <Panel header="标题2" key="2">
      <div>内容1</div>
      <div>内容2</div>
    </Panel>
    <Panel header="标题3" key="3" disabled>
      <div>内容1</div>
    </Panel>
  </Collapse>
), _react_runner_);
```
---demoend

### 初始时展开所有 （不可控）

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

const Panel = Collapse.Panel;

const onChange = (key) => console.log('onChange', key);

ReactDOM.render((
  <Collapse expandAll onChange={onChange}>
    <Panel header="标题1" key="1">
      <div>内容1</div>
      <div>内容2</div>
      <div>内容3</div>
    </Panel>
    <Panel header="标题2" key="2">
      <div>内容1</div>
      <div>内容2</div>
    </Panel>
    <Panel header="标题3" key="3">
      <div>内容1</div>
    </Panel>
  </Collapse>
), _react_runner_);
```
---demoend

### 初始时展开自定义panel （不可控）

> 如果设置了 `defaultActiveKey` 则 `expandAll` 不起效。此处还需要自行考虑 `defaultActiveKey`、`expandAll`、`accordion`、`activeKey` 几个 props 之间的相互影响。

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

const Panel = Collapse.Panel;

const onChange = (key) => console.log('onChange', key);

ReactDOM.render((
  <Collapse defaultActiveKey={['1', '2']} onChange={onChange}>
    <Panel header="标题1" key="1">
      <div>内容1</div>
      <div>内容2</div>
      <div>内容3</div>
    </Panel>
    <Panel header="标题2" key="2">
      <div>内容1</div>
      <div>内容2</div>
    </Panel>
    <Panel header="标题3" key="3">
      <div>内容1</div>
    </Panel>
  </Collapse>
), _react_runner_);
```
---demoend

### 图标在右侧

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

const Panel = Collapse.Panel;

const onChange = (key) => console.log('onChange', key);

ReactDOM.render((
  <Collapse activeKey={['1']} arrowAlign="right" onChange={onChange}>
    <Panel header="使用统一设置的arrowAlign" key="1">
      <div>内容1</div>
      <div>内容2</div>
      <div>内容3</div>
    </Panel>
    <Panel arrowAlign="left" header="使用独立设置的arrowAlign" key="2">
      <div>内容4</div>
      <div>内容5</div>
    </Panel>
    <Panel arrowAlign="right" header="使用独立设置的arrowAlign" key="3" disabled>
      <div>内容6</div>
    </Panel>
  </Collapse>
), _react_runner_);
```
---demoend

### 手风琴折叠面板

手风琴，每次只打开一个面板。

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

const Panel = Collapse.Panel;

class Demo extends Component {
  constructor(props) {
    super(props);
    this.state = {
      activeName: '0'
    };
  }

  onChange = (key) => console.log('onChange', key);

  toggleOpen = () => {
    this.setState((prevState) => {
      return {
        activeName: prevState.activeName === 't-2' ? '' : 't-2'
      };
    });

  }

  render() {
    const { activeName } = this.state;
    return (
      <div>
        <Button onClick={this.toggleOpen}>打开或关闭第二个</Button>
        <Collapse accordion activeKey={[activeName]} onChange={this.onChange}>
          <Panel header="标题1" key="t-1">
            <div>内容1</div>
            <div>内容2</div>
            <div>内容3</div>
          </Panel>
          <Panel header="标题2" key="t-2">
            <div>内容1</div>
            <div>内容2</div>
          </Panel>
          <Panel header="标题3(禁用 arrow)" key="t-3" showArrow={false}>
            <div>内容1</div>
          </Panel>
        </Collapse>
      </div>
    );
  }
}

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

### 简洁风格无边框

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

const Panel = Collapse.Panel;

const onChange = (key) => console.log('onChange', key);

ReactDOM.render((
  <Collapse accordion bordered={false} onChange={onChange}>
    <Panel header="标题1" key="1">
      <div>内容1</div>
      <div>内容2</div>
    </Panel>
    <Panel header="标题2" key="2" showArrow={false}>
      <div>内容1</div>
    </Panel>
  </Collapse>
), _react_runner_);
```
---demoend

### 简洁风格无边框&标题右侧拖尾横线

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

const Panel = Collapse.Panel;

const onChange = (key) => console.log('onChange', key);

ReactDOM.render((
  <Collapse accordion bordered={false} showHeaderTail onChange={onChange}>
    <Panel header="标题1" key="1" addonExtra="(100)">
      <div>内容1</div>
      <div>内容2</div>
    </Panel>
    <Panel header="标题2" key="2">
      <div>内容1</div>
    </Panel>
    <Panel header="标题2" key="3" showArrow={false} showHeaderTail={false}>
      <div>内容1</div>
    </Panel>
  </Collapse>
), _react_runner_);
```
---demoend

### 自定义标题

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

const Panel = Collapse.Panel;

const onChange = (key) => console.log('onChange', key);

ReactDOM.render((
  <Collapse activeKey={[]} onChange={onChange}>
    <Panel header={<span>标题1<Icon icon="delete" /></span>} key="1">
      <div>内容1</div>
      <div>内容2</div>
    </Panel>
  </Collapse>
), _react_runner_);
```
---demoend

### 自定义 Icon 组件

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

const Panel = Collapse.Panel;

const onChange = (key) => console.log('onChange', key);

ReactDOM.render((
  <Collapse activeKey={[]} onChange={onChange}>
    <Panel
      key="1"
      expandIcon="next-page"
      closeIcon="xiala"
      header="采用内置 Icon string"
    >
      <div>内容1</div>
      <div>内容2</div>
    </Panel>
    <Panel
      key="2"
      closeIcon={<Icon icon="up" />}
      expandIcon={<Icon icon="down" />}
      header="使用 Icon 组件"
    >
      <div>内容1</div>
      <div>内容2</div>
    </Panel>
    <Panel
      key="3"
      expandIcon={<span>＋</span>}
      closeIcon={<span>－</span>}
      header="使用其他组件"
    >
      <div>内容1</div>
      <div>内容2</div>
    </Panel>
  </Collapse>
), _react_runner_);
```
---demoend


### 面板内容嵌套其它组件

---demo
```js
import { Collapse, Checkbox } from 'amos-framework';

const Panel = Collapse.Panel;
const CheckboxGroup = Checkbox.Group;

class Demo extends Component {
  constructor(props) {
    super(props);
    this.state = {
      activeName: '1',
      values: []
    };
  }

  onChange = (key) => {
    console.log('onChange', key);
    this.setState({ activeName: key });
  }

  onClick = (key) => console.log('click', key);

  onIPTChange = (evt) => {}

  onCheckboxChange = (values) => {
    this.setState({
      values
    });
  }

  render() {
    const { activeName, values } = this.state;
    return (
      <Collapse activeKey={activeName} onChange={this.onChange}>
        <Panel header="标题1" key="1" onClick={this.onClick}>
          <div>内容1</div>
          <div>内容2</div>
          <Input placeholder="请输入" size="sm" onChange={this.onIPTChange} />
        </Panel>
        <Panel header="标题2" key="2">
          <div>内容1</div>
          <div>内容2</div>
          <CheckboxGroup
            onChange={this.onCheckboxChange}
            selects={values}
          >
            <Checkbox value="1">选项1</Checkbox>
            <Checkbox value="2">选项2</Checkbox>
            <Checkbox value="3">选项3</Checkbox>
          </CheckboxGroup>
        </Panel>
        <Panel header="标题3" key="3" disabled>
          <div>内容1</div>
        </Panel>
      </Collapse>
    );
  }
}

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


## API

### Collapse

| params   |type     |default    | description |
|--------- |-------- |---------- |-------- |
| prefixCls | String | `amos-collapse` | 样式前缀 |
| className | String | - | 自定义样式名 |
| accordion | Boolean | false | 手风琴效果，每次只打开一个面板。|
| activeKey | `String[]、String` | - | 当前激活面板的 key, accordion 模式下默认第一个元素。有效值为 `string or string 数组` |
| defaultActiveKey | `String[]、String` | - | 初始展开的面板key，不可控。如果设置，则初始的 expandAll 不起效。如果 props 中包含 activeKey，则 defaultActiveKey 也不起效 |
| showArrow | Boolean | true | 是否显示 `展开关闭`图标（控制所有的panel） |
| arrowAlign | string | `left` | 展开关闭图标显示的位置，默认在左侧，可选值`left、right`（控制所有的panel） |
| expandIcon | `String、ReactNode` | - | 展开 icon。当expandIcon存在时，采用 `amosicon` 方式，为用户自定义的icon，否则采用内置 `aficon`。也可以是自定义的组件 |
| closeIcon | `String、ReactNode` | - | 关闭 icon。当closeIcon存在时，采用 `amosicon` 方式，为用户自定义的icon，否则采用内置 `aficon`。也可以是自定义的组件 |
| bordered | Boolean | true | 是否设置边框 |
| expandAll | Boolean | false | 打开全部，仅在初始化时有效，同时初始时 `activeKey` 和 `defaultActiveKey` 不能设置有效值, 如 `activeKey={['1']}` 则展开全部无效，在 accordion 模式下也无效 |
| onChange | `Function: (activeKey, props) => {}` | - | 面板切换时的回调 |
| children | ReactNode | - | 内容，确保内一个 children 均是 `Collapse.Panel` |

> 注意，设置 activeKey 时，尽量设置为 string 格式，即使是数字，最好也设置为 `'1','2','3','4'...` 等，不要设置为boolean 类型的 `true、false` 等。**在严格模式下，123 和 '123' 是不相等的**。
>
> 禁止采用 `expandAll` 来控制是否全部展开。why？ 该属性不可控，变化不会引起组件的改变。


### Collapse.Panel

| params   |type     |default    | description |
|--------- |-------- |---------- |-------- |
| prefixCls | String | `amos-collapse` | 样式前缀，由 Collapse 组件给各个子 panel 注入，无需手动传递 |
| className | String | - | 自定义样式名 |
| disabled | Boolean | false | 禁用后的面板展开与否将无法通过用户交互改变 |
| header | `String、Number、ReactNode` | - | 面板头内容 |
| addonExtra | String、Number、ReactNode | - | 面板头额外内容，紧跟 `header` 后面 |
| expandIcon | `String、ReactNode` | - | 展开 icon。当expandIcon存在时，采用 `amosicon` 方式，为用户自定义的icon，否则采用内置 `aficon`。也可以是自定义的组件 |
| closeIcon | `String、ReactNode` | - | 关闭 icon。当closeIcon存在时，采用 `amosicon` 方式，为用户自定义的icon，否则采用内置 `aficon`。也可以是自定义的组件 |
| disabled |  Boolean | false | 是否禁用展开折叠功能 |
| onClick | `Function: (key) => {}` | false | 点击 header 时的回调，此处非必填， `Collapse` onChange 事件中，也可以获取到当前点击的 header |
| showArrow | Boolean | true | 是否显示 `展开关闭`图标 |
| arrowAlign | string | `left` | 展开关闭图标显示的位置，默认在左侧，可选值`left、right` |
| isActive | Boolean | - | 是否为激活状态 |
| key | `对应 activeKey` | - | 面板唯一key，用于控制展开合并，非必填 |
| panelKey | `对应 activeKey` | - | 无需传入，由 `Collapse` 组件注入，用于标识展开合并 |
| children | ReactNode | - | 面板内容 |

> 注意： 在 Collapse 可以统一设置的 Panel props优先级低于 在 Panel 中单独设置的，即：各自 Panel 设的 props 将会覆盖统一设置。