import * as React from "react"
import { ComponentStory, ComponentMeta } from "@storybook/react"
import { Backdrop } from "../src"

export default {
  title: "通用/Backdrop",
  component: Backdrop
} as ComponentMeta<typeof Backdrop>

// Story模版
const Template: ComponentStory<typeof Backdrop> = args => {
  const [show, setShow] = React.useState(false)

  const handleClose = () => {
    setShow(false)
  }

  return (
    <div>
      <button style={{ marginBottom: 20 }} onClick={e => setShow(!show)}>
        显示/隐藏
      </button>

      <Backdrop {...args} open={show} onClick={() => handleClose()} />
    </div>
  )
}

export const Normal = Template.bind({})
