# Drawer

遮罩容器、抽屉容器

## 使用场景

需要半遮罩显示，或者浮层显示时使用

## 案例演示

### Drawer 基本使用

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

const { Content } = Drawer;

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

  onDrawerClose = () => {
    this.setState({
      open: false
    });
  };

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

  render() {
    const { open } = this.state;
    return (
      <div>
        <Button onClick={this.toggle}>{open ? '关闭' : '打开'}</Button>
        <Drawer open={open} onClose={this.onDrawerClose} title="基本使用">
          <Content>
            <div>What a nice drawer !</div>
            <div>What a nice drawer !</div>
            <div>What a nice drawer !</div>
            <div>What a nice drawer !</div>
          </Content>
        </Drawer>
      </div>
    );
  }
}

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

### Drawer 自定义内容

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

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

  onDrawerClose = () => {
    this.setState({
      open: false
    });
  };

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

  closeDrawer = () => {
    this.setState({
      open: false
    });
  }

  render() {
    const { open } = this.state;
    return (
      <div>
        <Button onClick={this.toggle}>{open ? '关闭' : '打开'}</Button>
        <Drawer open={open} onClose={this.onDrawerClose}>
          <div className="custom-header">
            <span>我是标题</span>
            <Icon onClick={this.closeDrawer} icon="cross" />
          </div>
          <div className="custom-content">
            <div>What a nice drawer !</div>
            <div>What a nice drawer !</div>
            <div>What a nice drawer !</div>
            <div>What a nice drawer !</div>
          </div>
        </Drawer>
      </div>
    );
  }
}

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

### Drawer 自定义位置

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

const { Content } = Drawer;
const RadioGroup = Radio.Group;

class Demo extends Component {
  constructor(props) {
    super(props);
    this.state = {
      open: false,
      position: 'right'
    };
  }

  onDrawerClose = () => {
    this.setState({
      open: false
    });
  };

  onChange = value => {
    this.setState({
      position: value,
    });
  };

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

  render() {
    const { open, position } = this.state;
    return (
      <div>
        <RadioGroup defaultValue={position} onChange={this.onChange}>
          <Radio value="top">top</Radio>
          <Radio value="right">right</Radio>
          <Radio value="bottom">bottom</Radio>
          <Radio value="left">left</Radio>
        </RadioGroup>
        <Button onClick={this.toggle}>{open ? '关闭' : '打开'}</Button>
        <Drawer open={open} position={position} onClose={this.onDrawerClose} title="自定义显示位置">
          <Content>
            <div>What a nice drawer !</div>
            <div>What a nice drawer !</div>
            <div>What a nice drawer !</div>
            <div>What a nice drawer !</div>
          </Content>
        </Drawer>
      </div>
    );
  }
}

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

### Drawer 属性配置

---demo
```js
import { Drawer, Button, Icon, Switch, Slider, StdForm } from 'amos-framework';

const { Content } = Drawer;
const CombineSlider = Slider.CombineSlider;

class Demo extends Component {
  constructor(props) {
    super(props);
    this.state = {
      open: false,
      showDrawerBar: false,
      disableOverlay: false,
      enableScrolllEffect: false,
      top: 0,
      width: 300,
      height: 600
    };
  }

  onDrawerClose = () => {
    this.setState({
      open: false
    });
  };

  onChange = (type, value) => {
    this.setState({
      [type]: value
    });
  };

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

  render() {
    const { open, showDrawerBar, disableOverlay, top, width, height, enableScrolllEffect } = this.state;
    return (
      <div>
        <div style={{ width: '380px', display: 'inline-block' }}>
          <StdForm label="禁用遮罩">
            <Switch onOff={disableOverlay} onLabel="是" offLabel="否" onChange={onOff => this.onChange('disableOverlay', onOff)} />
          </StdForm>
          <StdForm label="显示Bar">
            <Switch onOff={showDrawerBar} onLabel="是" offLabel="否" onChange={onOff => this.onChange('showDrawerBar', onOff)} />
          </StdForm>
          <StdForm label="启用ScrolllEffect">
            <Switch onOff={enableScrolllEffect} onLabel="是" offLabel="否" onChange={onOff => this.onChange('enableScrolllEffect', onOff)} />
          </StdForm>
          <StdForm label="top">
            <CombineSlider
              min={0}
              max={500}
              onChange={v => this.onChange('top', v)}
              value={top}
              style={{ width: '300px' }}
            />
          </StdForm>
          <StdForm label="width">
            <CombineSlider
              min={130}
              max={500}
              onChange={v => this.onChange('width', v)}
              value={width}
              style={{ width: '300px' }}
            />
          </StdForm>
          <StdForm label="height">
            <CombineSlider
              min={100}
              max={800}
              onChange={v => this.onChange('height', v)}
              value={height}
              style={{ width: '300px' }}
            />
          </StdForm>
          <Button onClick={this.toggle}>{open ? '关闭' : '打开'}</Button>
        </div>
        <Drawer
          open={open}
          top={top}
          width={width}
          height={height}
          title="属性配置"
          showDrawerBar={showDrawerBar}
          disableOverlay={disableOverlay}
          enableScrolllEffect={enableScrolllEffect}
          onClose={this.onDrawerClose}
        >
          <Content>
            <div>What a nice drawer !</div>
            <div>What a nice drawer !</div>
            <div>What a nice drawer !</div>
            <div>What a nice drawer !</div>
          </Content>
        </Drawer>
      </div>
    );
  }
}

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

### Drawer 脱离当前层级 采用 OuterDrawer 方式

打开 debug 面板，查看 Drawer HTML 内容

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

const { OuterDrawer, Content } = Drawer;

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

  onDrawerClose = () => {
    this.setState({
      open: false
    });
  };

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

  render() {
    const { open } = this.state;
    return (
      <div>
        <Button onClick={this.toggle}>{open ? '关闭' : '打开'}</Button>
        <OuterDrawer visible={open} onClose={this.onDrawerClose} title="基本使用">
          <Content>
            <div>What a nice drawer !</div>
            <div>What a nice drawer !</div>
            <div>What a nice drawer !</div>
            <div>What a nice drawer !</div>
          </Content>
        </OuterDrawer>
      </div>
    );
  }
}

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

## props

### Drawer

| params   |type     |default    | description |
|--------- |-------- |---------- |-------- |
| prefixCls | string | `amos-drawer` | css class 前缀 |
| className | string | - | 自定义样式名 |
| title | `string or ReactNode` | - | Drawer 标题，可以是普通文本或者ReactNode |
| children | ReactNode | - | Drawer 内容 |
| open | boolean | - | 是否显示，必填 |
| onClose | function | - | 关闭时回调，常用于同步传入的 `open` |
| onOpen | function | - | 打开时回调，常用于同步传入的 `open` |
| position | string | right | 浮层显示位置，默认为 `right`，可选值 `top, bottom, right, left` |
| disableOverlay | boolean | - | 隐藏遮罩，默认显示半透明遮罩 |
| showDrawerBar | boolean | false | 是否显示额外关闭bar， 默认为false |
| style | Object | - | Drawer 内容区自定义样式 |
| width | `String or Number` | - | Drawer 内容区宽度 |
| height | `String or Number` | - | Drawer 内容区高度，可以设置为 `auto`，以适应内容 |
| left | `String or Number` | - | Drawer 内容区 left 值 |
| top | `String or Number` | - | Drawer 内容区 top 值 |
| enableScrolllEffect | boolean | - | 是否启用外部滚动特效，当设置为 true 时，打开 `drawer` 将无法滚动外部容器 |

> 注意，如果外部传入 open ，则需要进行同步设置 open。 通过 onOpen 或者 onClose 进行同步。

### Drawer.Content

| params   |type     |default    | description |
|--------- |-------- |---------- |-------- |
| children | ReactNode | - | Drawer Content 内容 |

### Drawer.Header

| params   |type     |default    | description |
|--------- |-------- |---------- |-------- |
| children | ReactNode | - | Drawer Header 内容 |

> 注意，如果 Drawer 中设置了 title 属性，则 children 中，无需再使用 `Header` 设置标题。
> 当设置了自定义的 `width/height/let/top` 时，如果 设置 showDrawerBar 为 true，则需要自行调整具体位置。

### Drawer.OuterDrawer

Drawer 脱离当前层，props 与 [Drawer](#Drawer) 相同，唯一区别在于，采用 `visible` 进行控制显示隐藏。

| params   |type     |default    | description |
|--------- |-------- |---------- |-------- |
| visible | boolean | - | 是否显示，必填 |