@n3/react-remove-button

@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>
  );
};