@n3/react-remove-button

Кнопка удаления для приложений на базе @n3/kit.

import {
  RemoveButton,
} from '@n3/react-remove-button';

Props

| Название | Обязательность | Тип | Значение по умолчанию | Описание | |----------|----------------|-----|-----------------------|----------| | color | | enum- buttonColors.DEFAULT- buttonColors.PRIMARY- buttonColors.TERTIARY- buttonColors.DANGER | undefined | Цвет кнопки | | size | | enum- buttonSizes.DEFAULT- buttonSizes.SMALL | undefined | Размер кнопки | | disabled | | bool | false | Выключена ли кнопка | | children | + | node | | | | remove | + | func | | Асинхронная функция удаления | | onRemoveSuccess | | func | undefined | Обработчик успешного удаления | | approveTitle | | node | undefined | Заголовок подтверждения | | approveContent | | node | undefined | Текст подтверждения | | approveButtonText | + | string | | Текст кнопки подтвеждения | | approveButtonColor | | enum- buttonColors.DEFAULT- buttonColors.PRIMARY- buttonColors.TERTIARY- buttonColors.DANGER | buttonColors.DANGER | Цвет кнопки подтверждения | | cancelButtonText | + | string | | Текст кнопки отмены | | errorsPath | | string | 'response.data.detail' | Путь до объекта ошибкок в случае ошибки удаления | | redirectTo | | any | undefined | Адрес редиректа в случае успешного удаления | | notification | | object | undefined | Сообщение @n3/browser-messages в случае успешного удаления |

Создание кастомной кнопки удаления

import type {
  FC,
  ReactNode,
} from 'react';
import {
  useRemoveButton,
} from '@n3/react-remove-button';
import type {
  UseRemoveButtonParams,
} from '@n3/react-remove-button';

type CustomRemoveButtonProps = UseRemoveButtonParams & {
  children?: ReactNode;
};

const CustomRemoveButton: FC<CustomRemoveButtonProps> = (props) => {
  const {
    children,
    remove,
    onRemoveSuccess,
    approveTitle,
    approveContent,
    approveButtonText,
    approveButtonColor,
    cancelButtonText,
    errorsPath,
    redirectTo,
    notification,
  } = props;

  const {
    isRemoving,
    onClick,
  } = useRemoveButton({
    remove,
    onRemoveSuccess,
    approveTitle,
    approveContent,
    approveButtonText,
    approveButtonColor,
    cancelButtonText,
    errorsPath,
    redirectTo,
    notification,
  });

  return (
    <button
      type="button"
      disabled={isRemoving}
      onClick={onClick}
    >
      {children}
    </button>
  );
};