0.2.0 • Published 3 years ago
@n3/react-remove-button v0.2.0
@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>
);
};