68 lines
1.6 KiB
TypeScript
68 lines
1.6 KiB
TypeScript
|
import React from "react";
|
||
|
|
import {
|
||
|
|
TextContent,
|
||
|
|
Text,
|
||
|
|
TextVariants,
|
||
|
|
ButtonVariant,
|
||
|
|
} from "@patternfly/react-core";
|
||
|
|
import { Meta, Story } from "@storybook/react";
|
||
|
|
import { action } from "@storybook/addon-actions";
|
||
|
|
|
||
|
|
import {
|
||
|
|
ConfirmDialogModal,
|
||
|
|
ConfirmDialogModalProps,
|
||
|
|
useConfirmDialog,
|
||
|
|
} from "../components/confirm-dialog/ConfirmDialog";
|
||
|
|
|
||
|
|
export default {
|
||
|
|
title: "Confirmation Dialog",
|
||
|
|
component: ConfirmDialogModal,
|
||
|
|
} as Meta;
|
||
|
|
|
||
|
|
const Template: Story<ConfirmDialogModalProps> = (args) => (
|
||
|
|
<ConfirmDialogModal {...args} />
|
||
|
|
);
|
||
|
|
|
||
|
|
export const Simple = Template.bind({});
|
||
|
|
Simple.args = {
|
||
|
|
titleKey: "Delete app02?",
|
||
|
|
messageKey: "If you delete this client, all associated data will be removed.",
|
||
|
|
continueButtonLabel: "Delete",
|
||
|
|
continueButtonVariant: ButtonVariant.danger,
|
||
|
|
};
|
||
|
|
|
||
|
|
export const Children = Template.bind({});
|
||
|
|
Children.args = {
|
||
|
|
titleKey: "Children as content!",
|
||
|
|
continueButtonVariant: ButtonVariant.primary,
|
||
|
|
children: (
|
||
|
|
<>
|
||
|
|
<TextContent>
|
||
|
|
<Text component={TextVariants.h3}>Hello World</Text>
|
||
|
|
</TextContent>
|
||
|
|
<p>Example of some other patternfly components.</p>
|
||
|
|
</>
|
||
|
|
),
|
||
|
|
};
|
||
|
|
|
||
|
|
const Test = () => {
|
||
|
|
const [toggle, Dialog] = useConfirmDialog({
|
||
|
|
titleKey: "Delete app02?",
|
||
|
|
messageKey:
|
||
|
|
"If you delete this client, all associated data will be removed.",
|
||
|
|
continueButtonLabel: "Delete",
|
||
|
|
onConfirm: action("confirm"),
|
||
|
|
onCancel: action("cancel"),
|
||
|
|
});
|
||
|
|
return (
|
||
|
|
<>
|
||
|
|
<button id="show" onClick={toggle}>
|
||
|
|
Show
|
||
|
|
</button>
|
||
|
|
<Dialog />
|
||
|
|
</>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
export const Api = () => <Test />;
|