import React from 'react'; import { Popconfirm, Button, Toast } from '@douyinfe/semi-ui'; () => { const onConfirm = () => { Toast.success('Confirm save!'); }; const onCancel = () => { Toast.warning('Cancel save!'); }; return ( <Popconfirm title="Are you sure you want to save this modification?" content="This modification will be irreversible" onConfirm={onConfirm} onCancel={onCancel} > <Button>Save</Button> </Popconfirm> ); };

import React, { useState } from 'react'; import { Popconfirm, Radio, RadioGroup, Button } from '@douyinfe/semi-ui/'; import { IconAlertTriangle } from '@douyinfe/semi-icons'; function TypesConfirmDemo(props = {}) { const typeMap = { default: { icon: <IconAlertTriangle size="extra-large" />, }, warning: { icon: <IconAlertTriangle style={{ color: 'var(--semi-color-warning)' }} size="extra-large" />, }, danger: { okType: 'danger', icon: <IconAlertTriangle style={{ color: 'var(--semi-color-danger)' }} size="extra-large" />, }, tertiary: { icon: <IconAlertTriangle style={{ color: 'var(--semi-color-tertiary)' }} size="extra-large" />, }, }; const keys = Object.keys(typeMap); const [type, setType] = useState('default'); const [visible, _setVisible] = useState(true); const changeType = e => { const type = e && e.target && e.target.value; if (type && keys.includes(type)) { setType(type); } }; const setVisible = visible => _setVisible(visible); const toggleVisible = () => setVisible(!visible); return ( <div> <RadioGroup onChange={changeType} value={type} style={{ marginTop: 14, marginBottom: 14 }}> {keys.map(key => ( <Radio key={key} value={key}> <strong style={{ color: `var(--semi-color-${key === 'default' ? 'primary' : key})` }}>{key}</strong> </Radio> ))} </RadioGroup> <div> <Popconfirm {...typeMap[type]} visible={visible} onVisibleChange={setVisible} trigger="custom" title="Are you sure to save this modification?" content="This modification will be irreversible" > <Button onClick={toggleVisible}>Click here</Button> </Popconfirm> </div> </div> ); }

import React from 'react'; import { Popconfirm, Button, Toast } from '@douyinfe/semi-ui'; () => { const onConfirm = () => { return new Promise((resolve, reject) => { setTimeout(() => { console.log('resolve, close popconfirm'); resolve(); }, 2000); }); }; const onCancel = () => { return new Promise((resolve, reject) => { setTimeout(() => { console.log('reject, popconfirm still exist'); reject(); }, 2000); }); }; return ( <Popconfirm title="Are you sure to save this modification?" content="This modification will be irreversible" onConfirm={onConfirm} onCancel={onCancel} > <Button>Save</Button> </Popconfirm> ); };

import React from 'react'; import { Button, Popconfirm, Space } from '@douyinfe/semi-ui'; () => { return ( <Space> <Popconfirm title="Are you sure you want to save this edit?" content="This modification will be irreversible" okButtonProps={{ autoFocus: true, type: 'danger', }} > <Button>Confirm focus</Button> </Popconfirm> <Popconfirm title="Are you sure you want to save this edit?" content="This modification will be irreversible" cancelButtonProps={{ autoFocus: true, }} > <Button>Cancel focus</Button> </Popconfirm> <Popconfirm title="Are you sure you want to save this edit?" content={({ initialFocusRef }) => { return <input ref={initialFocusRef} placeholder="focus here" />; }} > <Button>Content focus</Button> </Popconfirm> </Space> ); };