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

export default () => {
  const [show, setShow] = useState(false);
  const [width, setWidth] = useState('400px');
  const toShow = () => setShow(true);
  const toClose = () => setShow(false);
  const onChange = ({ target: { value } }: any) => {
    setWidth(value);
  };
  return (
    <div>
      <Row>
        <Radio.Group defaultValue="400px" onChange={onChange}>
          <Radio.Button value="320px">最小</Radio.Button>
          <Radio.Button value="640px">中等</Radio.Button>
          <Radio.Button value="960px">最大</Radio.Button>
          <Radio.Button value="400px">默认</Radio.Button>
          <Radio.Button value="50%">50%</Radio.Button>
        </Radio.Group>
      </Row>
      <Row style={{ marginTop: '16px' }}>
        <Button onClick={toShow}>打开抽屉</Button>
      </Row>
      <Drawer
        title="抽屉标题"
        width={width}
        footer={true}
        visible={show}
        onClose={toClose}
      >
        <p className="content">抽屉的内容</p>
      </Drawer>
    </div>
  );
};