import React, { useState } from 'react';
import { Radio, Button, Row, Drawer } from '@btri-ui/base';
import './index.less';

export default () => {
  const [show, setShow] = useState(false);
  const toShow = () => setShow(true);
  const toClose = () => setShow(false);
  const [position, setPosition] = useState('right');
  const selectPosition = ({ target: { value } }: any) => {
    setPosition(value);
  };
  return (
    <div>
      <Row>
        <Radio.Group defaultValue="right" onChange={selectPosition}>
          <Radio.Button value="left">左侧</Radio.Button>
          <Radio.Button value="right">右侧</Radio.Button>
          <Radio.Button value="top">上方</Radio.Button>
          <Radio.Button value="bottom">下方</Radio.Button>
        </Radio.Group>
      </Row>
      <Row style={{ marginTop: '16px' }}>
        <Button onClick={toShow}>打开抽屉</Button>
      </Row>
      <Drawer
        title="抽屉标题"
        placement={position}
        footer={true}
        visible={show}
        onClose={toClose}
      >
        <p className="content">抽屉的内容</p>
      </Drawer>
    </div>
  );
};