useDeleteButton

Returns a deleteRow function to delete a row at an index, or the current row if no index is specified. Also returns an isDeleting boolean indicating if a row is currently being deleted.

By default, the user is prompted to confirm the deletion using window.confirm. The prompt can be overriden by passing either a custom text to show in window.confirm, or a function that should be called instead. The funciton must return a promise that resolves to a boolean, or a boolean. If the boolean is true, the record will be deleted.

If you want to delete the row without prompting the user (obviously not recommended), you can pass a function that always returns true.

Usage

This is the implementation of the DeleteButton in the appframe-mui package.

import { forwardRef } from "react";

import { Button, ButtonProps } from "@mui/material";
import { getLocalizedString } from "@olenbetong/appframe-core";
import { DeletePrompt, useDeleteButton } from "@olenbetong/appframe-react";

import Delete from "./icons/Delete.js";

export type DeleteButtonProps = ButtonProps & {
  index?: number;
  prompt?: DeletePrompt;
};

export const DeleteButton = forwardRef<HTMLButtonElement, DeleteButtonProps>(
  function DeleteButton({ prompt, index, ...props }, ref) {
    let { isDeleting, deleteRow } = useDeleteButton(prompt);

    return (
      <Button
        loading={isDeleting}
        onClick={() => deleteRow(index)}
        loadingPosition="start"
        startIcon={<Delete />}
        {...props}
        sx={{ ...props.sx, color: "crimson" }}
        ref={ref}
      >
        {props.children ? props.children : getLocalizedString("Delete")}
      </Button>
    );
  }
);

API

export declare type useDeleteButtonReturnValue = {
  /**
   * A boolean value indicating if the data object is currently deleting the current row
   */
  isDeleting: boolean;
  /**
   * Deletes a row on the data object found in the context. If an index is given,
   * deletes the row at the given index. Otherwise, deletes the current row.
   */
  deleteRow: (index?: number) => Promise<void>;
};

export declare type DeletePrompt = string | (() => Promise<boolean> | boolean);

/**
 * A simple hooks that returns the properties needed to connect a button to the
 * delete methods of the data object. Uses the data object in the DataObjectContext
 */
export declare function useDeleteButton(
  prompt?: DeletePrompt
): useDeleteButtonReturnValue;