import React, { useEffect, useRef, useState } from 'react'

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

const Content = () => {
  const [count, setCount] = useState(0)
  const total = useRef(0)

  useEffect(() => {
    const interval = setInterval(() => {
      total.current += 1
      setCount(total.current)
    }, 1000)
    return () => clearInterval(interval)
  }, [])

  return <span>{count}</span>
}

export default function Demo() {
  const [visible, setVisible] = useState(false)
  return (
    <>
      <Button onClick={() => setVisible(true)}>打开</Button>
      <Drawer title="抽屉标题" visible={visible} onCancel={() => setVisible(false)} autoDestroy><Content /></Drawer>
    </>
  )
}