/**
 * title: Drawer 被打开的时候 visible 就为 true 的场景
 * debug: true
 */
import React, { useState } from 'react'

import { Button, Drawer } from 'react-icecream'

export default function Demo() {
  const [visible1, setVisible1] = useState(false)
  const [visible2, setVisible2] = useState(false)
  return (
    <>
      <Button onClick={() => setVisible1(true)}>打开第一层</Button>
      {
        visible1 && (
          <Drawer title="抽屉标题" visible={visible1} onCancel={() => setVisible1(false)}>
            <Button onClick={() => setVisible2(true)}>打开第二层</Button>
            {
              visible2 && (
                <Drawer title="抽屉标题" visible={visible2} onCancel={() => setVisible2(false)}>
                  <p>Some contents...</p>
                  <p>Some contents...</p>
                  <p>Some contents...</p>
                  <p>Some contents...</p>
                  <p>Some contents...</p>
                  <p>Some contents...</p>
                  <p>Some contents...</p>
                  <p>Some contents...</p>
                  <p>Some contents...</p>
                  <p>Some contents...</p>
                  <p>Some contents...</p>
                  <p>Some contents...</p>
                  <p>Some contents...</p>
                  <p>Some contents...</p>
                  <p>Some contents...</p>
                  <p>Some contents...</p>
                  <p>Some contents...</p>
                  <p>Some contents...</p>
                </Drawer>
              )
            }
          </Drawer>
        )
      }
    </>
  )
}