2021-03-03 15:09:00 +00:00
|
|
|
import React, { useState } from "react";
|
2021-03-01 14:58:42 +00:00
|
|
|
|
|
|
|
import Backdrop from "./";
|
2020-10-16 13:16:01 +00:00
|
|
|
import Button from "../button";
|
2019-07-15 08:11:13 +00:00
|
|
|
|
2021-03-01 14:58:42 +00:00
|
|
|
export default {
|
|
|
|
title: "Components/Backdrop",
|
|
|
|
component: Backdrop,
|
2021-03-07 11:57:26 +00:00
|
|
|
subcomponents: { Button },
|
2021-03-01 14:58:42 +00:00
|
|
|
argTypes: {
|
|
|
|
onClick: { action: "On Hide", table: { disable: true } },
|
|
|
|
},
|
|
|
|
parameters: {
|
|
|
|
docs: {
|
|
|
|
description: {
|
|
|
|
component: "Backdrop for displaying modal dialogs or other components",
|
|
|
|
},
|
|
|
|
},
|
|
|
|
},
|
2021-03-03 15:09:00 +00:00
|
|
|
};
|
2021-03-01 14:58:42 +00:00
|
|
|
|
2021-03-03 15:09:00 +00:00
|
|
|
const Template = (args) => {
|
|
|
|
const [isVisible, setIsVisible] = useState(args.visible);
|
|
|
|
const toggleVisible = () => setIsVisible(!isVisible);
|
|
|
|
return (
|
|
|
|
<>
|
|
|
|
<Button
|
|
|
|
label="Show Backdrop"
|
|
|
|
primary
|
2022-03-10 12:59:04 +00:00
|
|
|
size="small"
|
2021-03-03 15:09:00 +00:00
|
|
|
onClick={toggleVisible}
|
|
|
|
/>
|
|
|
|
<Backdrop
|
|
|
|
{...args}
|
|
|
|
visible={isVisible}
|
|
|
|
onClick={(e) => {
|
|
|
|
args.onClick(e);
|
|
|
|
toggleVisible(false);
|
2021-03-01 14:58:42 +00:00
|
|
|
}}
|
2021-03-03 15:09:00 +00:00
|
|
|
/>
|
|
|
|
</>
|
|
|
|
);
|
2021-03-01 14:58:42 +00:00
|
|
|
};
|
|
|
|
|
|
|
|
export const Default = Template.bind({});
|