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