import React, { useState } from 'react';
import './Drawer.css';

export default function KoleDrawer({ open = false, title = '编辑资料', placement = 'right', maskClosable = true, children, onChange, onClick, onClose, onSubmit, onLoadMore }) {
  
  return (
    <div className="kole-drawer-root">
      <><button className="kole-drawer kole-drawer-button kole-drawer-primary" type="button" onClick={() => onClick && onClick()}>打开抽屉</button>{open ? <><div className="kole-drawer-drawer-mask" onClick={maskClosable ? onClose : undefined} /><aside className="kole-drawer-drawer" role="dialog" aria-modal="true"><h3 className="kole-drawer-title">{title}</h3><p className="kole-drawer-desc">在当前页面侧向编辑，不丢失列表上下文。</p><div className="kole-drawer-drawer-footer"><button className="kole-drawer-button" type="button" onClick={onClose}>取消</button><button className="kole-drawer-button kole-drawer-primary" type="button" onClick={onClose}>确定</button></div></aside></> : null}</>
    </div>
  );
}