ant-design/components/popconfirm/demo/dynamic-trigger.tsx
二货爱吃白萝卜 2cdf586291
chore: fix lint ()
* chore: fix lint

* chore: fix lint

* test: fix 16

* fix: lint
2023-07-28 16:17:43 +08:00

59 lines
1.3 KiB
TypeScript
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

import React, { useState } from 'react';
import { Button, message, Popconfirm, Switch } from 'antd';
const App: React.FC = () => {
const [open, setOpen] = useState(false);
const [condition, setCondition] = useState(true);
const changeCondition = (checked: boolean) => {
setCondition(checked);
};
const confirm = () => {
setOpen(false);
message.success('Next step.');
};
const cancel = () => {
setOpen(false);
message.error('Click on cancel.');
};
const handleOpenChange = (newOpen: boolean) => {
if (!newOpen) {
setOpen(newOpen);
return;
}
// Determining condition before show the popconfirm.
console.log(condition);
if (condition) {
confirm(); // next step
} else {
setOpen(newOpen);
}
};
return (
<div>
<Popconfirm
title="Delete the task"
description="Are you sure to delete this task?"
open={open}
onOpenChange={handleOpenChange}
onConfirm={confirm}
onCancel={cancel}
okText="Yes"
cancelText="No"
>
<Button danger>Delete a task</Button>
</Popconfirm>
<br />
<br />
Whether directly execute
<Switch defaultChecked onChange={changeCondition} />
</div>
);
};
export default App;