@hisptz/react-ui
Version:
A collection of reusable complex DHIS2 react ui components.
62 lines (59 loc) • 1.82 kB
JavaScript
import { Button } from "@dhis2/ui";
import React from "react";
import { ConfirmDialogProvider, useConfirmDialog } from "./index";
const ExampleChild = _ref => {
let {
config
} = _ref;
const {
confirm
} = useConfirmDialog();
return /*#__PURE__*/React.createElement(Button, {
onClick: () => {
confirm(config !== null && config !== void 0 ? config : {
title: "Are you sure?",
message: "Your confirm message will appear here",
onConfirm: () => {
alert("Confirmed 🤗");
},
onCancel: () => {
alert("Cancelled 😔");
}
});
}
}, "Click me!");
};
const Template = args => /*#__PURE__*/React.createElement(ConfirmDialogProvider, null, args.children);
export const ConfirmDialogInProvider = Template.bind({});
ConfirmDialogInProvider.args = {
children: /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(ExampleChild, null))
};
export const ConfirmDialogInProviderWithOptions = Template.bind({});
ConfirmDialogInProviderWithOptions.args = {
children: /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(ExampleChild, {
config: {
title: "Are you sure?",
message: "Your confirm message will appear here",
onConfirm: () => {
alert("Confirmed 🤗");
},
onCancel: () => {
alert("Cancelled 😔");
},
customActions: [{
label: "Custom",
color: "secondary",
onClick: () => {
alert("Custom 😉");
}
}],
cancelButtonText: "Custom cancel",
confirmButtonText: "Custom confirm",
confirmButtonColor: "primary"
}
}))
};
export default {
title: "Components/Confirm Dialog/Confirm Dialog Provider",
component: ConfirmDialogInProvider
};