DeleteModal
DeleteModal — готовый сценарий удаления объекта. Для варианта из макета deleteModalConfirmable используйте confirmable и confirmText.
Примеры использования
Базовое удаление
tsx
import { Button } from '@cloud-ru/ds-button';
import { DeleteModal } from '@cloud-ru/ds-uikit-product-modal-predefined';
import { useState } from 'react';
export function DeleteBasic() {
const [open, setOpen] = useState(false);
return (
<>
<Button label='Open delete modal' view='filled' appearance='primary' onClick={() => setOpen(true)} />
<DeleteModal
open={open}
onClose={() => setOpen(false)}
objectType='виртуальную машину'
onDelete={close => close()}
/>
</>
);
}Удаление с подтверждением
tsx
import { Button } from '@cloud-ru/ds-button';
import { DeleteModal } from '@cloud-ru/ds-uikit-product-modal-predefined';
import { useState } from 'react';
export function DeleteConfirmable() {
const [open, setOpen] = useState(false);
return (
<>
<Button label='Open confirmable delete modal' view='filled' appearance='primary' onClick={() => setOpen(true)} />
<DeleteModal
open={open}
onClose={() => setOpen(false)}
objectType='виртуальную машину'
confirmable
confirmText='vm-production-01'
onDelete={close => close()}
/>
</>
);
}Props
Types
Props
DeleteModalProps| Prop | Type | Default | Required | Description |
|---|---|---|---|---|
closeOnPopstate | boolean | — | no | Закрытие при навигации по истории |
confirmText | string | — | no | Текст, который нужно ввести для подтверждения |
confirmTextVariant | "name" | "text" | name | no | Тип текста подтверждения |
confirmable | boolean | false | no | Состояние с подтверждением через ввод текста |
content | ReactNode | — | no | Основной текст модалки |
data-test-id | string | — | no | |
deleting | boolean | — | no | Состояние загрузки кнопки удаления |
hideConfirmCopyButton | boolean | — | no | Скрыть кнопку копирования текста подтверждения |
mode | "aggressive" | "forced" | "regular" | MODE.Regular | no | Режим закрытия: Regular — overlay/Esc/кнопка; Aggressive — только кнопка; Forced — без кнопки и overlay/Esc. |
objectType | string | — | no | Тип удаляемого объекта, отображается в заголовке |
onClose | () => void | — | yes | Колбэк закрытия |
onDelete | (onClose: () => void) => void | — | yes | Колбэк подтверждения удаления |
open | boolean | — | yes | Управление состоянием показан/не показан |
subtitle | ReactNode | — | no | Подзаголовок |
titleTooltip | ReactNode | — | no | Подсказка рядом с заголовком |