Ant Design Popconfirm - изменение предварительно выбранной кнопки на "Отмена"

Модальное окно Popconfirm в Ant Design имеет кнопку «Подтвердить» («Да» -), предварительно выбранную при открытии модального окна.

введите описание изображения здесь

Исходный код модального окна:

import { Popconfirm, message } from 'antd';

function confirm(e) {
  console.log(e);
  message.success('Click on Yes');
}

function cancel(e) {
  console.log(e);
  message.error('Click on No');
}

ReactDOM.render(
  <Popconfirm title="Are you sure delete this task?" onConfirm={confirm} onCancel={cancel} okText="Yes" cancelText="No">
    <a href="#">Delete</a>
  </Popconfirm>
, mountNode);

Документация и интерактивная демонстрация здесь: Документация по дизайну Ant

Есть ли способ изменить описанное поведение по умолчанию?

Точно: Есть ли способ определить кнопку «Отмена» (соответственно «Нет» -) как предварительно выбранную при появлении модального окна?


person michael.zech    schedule 20.02.2018    source источник
comment
Что вы имеете в виду под заранее выбранным? предварительно выбрано значение "нет". вы хотите инвертировать кнопку с основным (синим) цветом на кнопку отмены?   -  person Yichaoz    schedule 22.02.2018
comment
@ Коссель Да. Точно. Мне нравится, чтобы кнопка отмены (как более безобидное действие) была синей. И вредное действие НЕ подсвечивается при появлении окна.   -  person michael.zech    schedule 22.02.2018


Ответы (1)


Боюсь, ты сможешь уйти только на полпути.

Если вы предоставите свойство okType="default", кнопка «Да» больше не будет иметь type="primary" и, таким образом, будет выглядеть так же, как кнопка «Нет».

Однако соответствующее свойство cancelType не поддерживается, что означает, что вы не можете сделать кнопку «Нет» синей.

Это действительно похоже на слегка хромающий API, так что вы можете успешно заполнить PR, реализующий cancelType. Должен быть очень простой трехстрочный патч против https://github.com/ant-design/ant-design/blob/master/components/popconfirm/index.tsx

person Jesper We    schedule 22.02.2018
comment
Спасибо. Ваш совет (okType = default) в сочетании с некоторыми CSS-селекторами, CSS-правила наконец помогли. - person michael.zech; 22.02.2018