# SplitPane

分割面板

## 何时使用

当多个板块儿需要动态调整大小时使用

## basic use

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

<SplitPane>
  <div className="one" />
  <div className="two" />
</SplitPane>

// pane 节点自定义样式
<SplitPane paneClassNames={['mypane-1', 'mypane-2']}>
  <div className="one" />
  <div className="two" />
</SplitPane>
```

### 基本使用: (水平分割)

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

const One = () => (
  <div className="pane-one">
    <p>主面板 Pane</p>
    <p>主面板内容区域.</p>
  </div>
);

const Two = () => (
  <div className="pane-two">
    <p>次面板</p>
    <p>次面板内容区域</p>
    <p>缩放次面板，查看该面板大小的变化情况.</p>
  </div>
);

const Wrapper = ({ children }) => <div style={{ position: 'relative', width: '100%', height: '200px', border: '1px solid #dbdbdb' }}>{children}</div>;


ReactDOM.render((
<Wrapper>
  <SplitPane>
    <One />
    <Two />
  </SplitPane>
</Wrapper>
), _react_runner_);
```
---demoend

### 垂直分割

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

const One = () => (
  <div className="pane-one">
    <p>主面板 Pane</p>
    <p>主面板内容区域.</p>
  </div>
);

const Two = () => (
  <div className="pane-two">
    <p>次面板</p>
    <p>次面板内容区域</p>
    <p>缩放次面板，查看该面板大小的变化情况.</p>
  </div>
);

const Wrapper = ({ children }) => <div style={{ position: 'relative', width: '100%', height: '200px', border: '1px solid #dbdbdb' }}>{children}</div>;


ReactDOM.render((
<Wrapper>
  <SplitPane vertical>
    <One />
    <Two />
  </SplitPane>
</Wrapper>
), _react_runner_);
```
---demoend

### SIZE：（限制大小）

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

const One = () => (
  <div className="pane-one">
    <p>主面板 Pane</p>
    <p>主面板内容区域.</p>
  </div>
);

const Two = () => (
  <div className="pane-two">
    <p>次面板</p>
    <p>次面板内容区域</p>
    <p>缩放次面板，查看该面板大小的变化情况.</p>
  </div>
);

const Wrapper = ({ children }) => <div style={{ position: 'relative', width: '100%', height: '200px', border: '1px solid #dbdbdb' }}>{children}</div>;


ReactDOM.render((
<Wrapper>
  <SplitPane mainPaneMinSize={400} secondaryMinSize={200}>
    <One />
    <Two />
  </SplitPane>
</Wrapper>
), _react_runner_);
```
---demoend

### 采用百分比

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

const One = () => (
  <div className="pane-one">
    <p>主面板 Pane</p>
    <p>主面板内容区域.</p>
  </div>
);

const Two = () => (
  <div className="pane-two">
    <p>次面板</p>
    <p>次面板内容区域</p>
    <p>缩放次面板，查看该面板大小的变化情况.</p>
  </div>
);

const Wrapper = ({ children }) => <div style={{ position: 'relative', width: '100%', height: '200px', border: '1px solid #dbdbdb' }}>{children}</div>;


ReactDOM.render((
<Wrapper>
  <SplitPane percentage>
    <One />
    <Two />
  </SplitPane>
</Wrapper>
), _react_runner_);
```
---demoend

### 嵌套使用

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

const One = () => (
  <div className="pane-one">
    <p>主面板 Pane</p>
    <p>主面板内容区域.</p>
  </div>
);

const Two = () => (
  <div className="pane-two">
    <p>次面板</p>
    <p>次面板内容区域</p>
    <p>缩放次面板，查看该面板大小的变化情况.</p>
  </div>
);

const MutilPane = ({ index = 0 }) => (
  <div className="pane-two">
    <p>第{index}个 Pane</p>
    <p>这是第{index}个 pane 内容.</p>
  </div>
);

const Wrapper = ({ children }) => <div style={{ position: 'relative', width: '100%', height: '200px', border: '1px solid #dbdbdb' }}>{children}</div>;


ReactDOM.render((
<Wrapper>
  <SplitPane mainPaneIndex={1} secondaryDefaultSize={150}>
    <MutilPane index={1} />
    <SplitPane secondaryDefaultSize={150}>
      <SplitPane vertical secondaryDefaultSize={100}>
        <MutilPane index={2} />
        <SplitPane secondaryDefaultSize={250}>
          <MutilPane index={3} />
          <MutilPane index={4} />
        </SplitPane>
      </SplitPane>
      <MutilPane index={5} />
    </SplitPane>
  </SplitPane>
</Wrapper>
), _react_runner_);
```
---demoend


### 设置 分割符类型

选择完成之后，鼠标移动到分隔符上查看效果

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

const seps = ['cortege', 'move', 'aspect'];

const One = () => (
  <div className="pane-one">
    <p>主面板 Pane</p>
    <p>主面板内容区域.</p>
  </div>
);

const Two = () => (
  <div className="pane-two">
    <p>次面板</p>
    <p>次面板内容区域</p>
    <p>缩放次面板，查看该面板大小的变化情况.</p>
  </div>
);

const Wrapper = ({ children }) => <div style={{ position: 'relative', width: '100%', height: '200px', border: '1px solid #dbdbdb' }}>{children}</div>;

class Demo extends Component {
  constructor(props) {
    super(props);
    this.state = {
      sidebarVisible: true,
      secondaryPaneSize: -1,
      dragging: false,
      separatorType: 'cortege'
    };
  }

  onSepTypeChange = (value) => {
    this.setState({ separatorType: value });
  }

  render() {
    const { separatorType } = this.state;


    return (
      <div>
        <Select
          data={seps}
          value={separatorType}
          renderOption={item => <Select.Option value={item}>{item}</Select.Option>}
          onChange={this.onSepTypeChange}
        />
        <Wrapper>
          <SplitPane separatorType={separatorType}>
            <One />
            <Two />
          </SplitPane>
        </Wrapper>
      </div>
    );
  }
}

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


### 外部控制

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

const Two = () => (
  <div className="pane-two">
    <p>次面板</p>
    <p>次面板内容区域</p>
    <p>缩放次面板，查看该面板大小的变化情况.</p>
  </div>
);

const ControlPane = ({ text, onClick }) => (
  <div className="pane-control">
    <p>主面板</p>
    <p>主面板，可控制次面板显隐.</p>
    <Button onClick={onClick}>{text}</Button>
  </div>
);
const Wrapper = ({ children }) => <div style={{ position: 'relative', width: '100%', height: '200px', border: '1px solid #dbdbdb' }}>{children}</div>;

class Demo extends Component {
  constructor(props) {
    super(props);
    this.state = {
      sidebarVisible: true
    };
  }

  toggleSidebar = () => {
    this.setState((prevState, props) => ({
      sidebarVisible: !prevState.sidebarVisible
    }));
  }

  render() {
    const { sidebarVisible } = this.state;
    return (
      <Wrapper>
        <SplitPane percentage secondaryDefaultSize={25}>
          <ControlPane onClick={this.toggleSidebar} text={sidebarVisible ? '隐藏' : '显示'} />
          {sidebarVisible && <Two />}
        </SplitPane>
      </Wrapper>
    );
  }
}

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


### 事件控制

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

const One = () => (
  <div className="pane-one">
    <p>主面板 Pane</p>
    <p>主面板内容区域.</p>
  </div>
);

const Two = () => (
  <div className="pane-two">
    <p>次面板</p>
    <p>次面板内容区域</p>
    <p>缩放次面板，查看该面板大小的变化情况.</p>
  </div>
);

const Wrapper = ({ children }) => <div style={{ position: 'relative', width: '100%', height: '200px', border: '1px solid #dbdbdb' }}>{children}</div>;

class Demo extends Component {
  constructor(props) {
    super(props);
    this.state = {
      secondaryPaneSize: -1,
      dragging: false
    };
  }

  onDragStart = () => {
    this.setState({ dragging: true });
  }

  onDragEnd = () => {
    this.setState({ dragging: false });
  }

  onSecondarySizeChange = (secondaryPaneSize) => {
    this.setState({ secondaryPaneSize });
  }

  render() {
    const { dragging, secondaryPaneSize } = this.state;
    return (
      <div>
        <Wrapper>
          <SplitPane
            onDragStart={this.onDragStart}
            onDragEnd={this.onDragEnd}
            onSecondarySizeChange={this.onSecondarySizeChange}
          >
            <One />
            <Two />
          </SplitPane>
        </Wrapper>
        <div>
          <p>变化结果如下</p>
          <p>正在拖拽:<span style={{ color: 'red' }}>{dragging ? 'Yes' : 'No'}</span></p>
          <p>次面板变化:<span style={{ background: 'yellow' }}>{secondaryPaneSize}</span></p>
        </div>
      </div>
    );
  }
}

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

## props

| params | type | default | description |
|--------- |-------- |--------- |-------- |
| prefixCls | String | `amos-splitpane` | 组件默认clssname prefix |
| className | String | - | 组件自定义clssname |
| separatorType | String | `cortege` | 分隔符类型，可取值有 `cortege、move、aspect` |
| vertical | Boolean | false | 垂直分割方式，即 `上下` 布局，默认为 `左右` 布局的方式 |
| percentage | Boolean | false | 是否采用百分比进行面板分割，默认 `fasle` |
| mainPaneIndex | number | 0 | 主面板的索引，取值为 0 和 1, 将具体的某一个 child 设置为主面板，系统优先满足主窗口的大小 |
| mainPaneMinSize | number | 0 | 主面板最小的大小，默认为 0 |
| secondaryDefaultSize | number | undefined | 次面板的默认大小 |
| secondaryMinSize | number | 0 | 次面板的最小大小，默认 0 |
| onDragStart | function | - | 拖拽开始时的回调，没有参数 |
| onDragEnd | function | - | 拖拽结束时的回调，没有参数 |
| onSecondarySizeChange | function: (secondarySize: Number) => {} | - | 次面板大小改变后的回调，参数为改变后的次面板大小 |
| children | ReactNode[] | - | 面板内容，数组的方式 |
| preventEventOnResizing | bool | - | 拖动时，禁止子面板鼠标事件。如果子面板具有鼠标移动事件，该属性设置为 true，能带来更好的体验 |
| paneClassNames | String[] | - | 各个面板自定义的样式，数组长度不大于 `children` 长度。如果只有 `一位` 或大于 `children` 长度，则所有的 Pane 均使用 `paneClassNames[0]` 作为自定义样式 |

> 当 `percentage` 为 true时，
> `mainPaneMinSize、secondaryDefaultSize、secondaryMinSize、onSecondarySizeChange(secondarySize)` 中的值，均为百分值，比如 `25` 代表 `25%`。
> 反之，值为具体的像素值，比如 `25` 代表 `25px`。