import React, { useState } from 'react';
import Button from 'components/button';
import Drawer from 'components/drawer';
import Input from 'components/input';

type IProps = {};
const Demo = function(props: IProps) {
    const [visible, setV] = useState(false);
    const [visible1, setV1] = useState(false);
    const [visible2, setV2] = useState(false);
    const [visible3, setV3] = useState(false);
    return (
        <div>
            <Button onClick={() => setV(true)} style={{ margin: 10 }}>
                Right
            </Button>
            <Button onClick={() => setV1(true)} style={{ margin: 10 }}>
                Left
            </Button>
            <Button onClick={() => setV2(true)} style={{ margin: 10 }}>
                Top
            </Button>
            <Button onClick={() => setV3(true)} style={{ margin: 10 }}>
                Bottom
            </Button>
            <Drawer
                visible={visible}
                onOk={() => setV(false)}
                onCancel={() => {
                    setV(false);
                }}
                dimBackground={false}
            >
                <Input placeholder="请输入" style={{ marginRight: 10 }} />
                <Button>我是一个按钮</Button>
            </Drawer>
            <Drawer
                visible={visible1}
                onOk={() => setV1(false)}
                onCancel={() => setV1(false)}
                placement="left"
                dimBackground={false}
            >
                <Input placeholder="请输入" style={{ marginRight: 10 }} />
                <Button>我是一个按钮</Button>
            </Drawer>
            <Drawer visible={visible2} onOk={() => setV2(false)} onCancel={() => setV2(false)} placement="top">
                <Input placeholder="请输入" style={{ marginRight: 10 }} />
                <Button>我是一个按钮</Button>
            </Drawer>
            <Drawer visible={visible3} onOk={() => setV3(false)} onCancel={() => setV3(false)} placement="bottom">
                <Input placeholder="请输入" style={{ marginRight: 10 }} />
                <Button>我是一个按钮</Button>
            </Drawer>
        </div>
    );
};
Demo.defaultProps = {};
export default Demo;