useCancelButton

Returns the cancelEdit method of the data object found in the DataObjectContext

Usage

This is the implementation of the CancelButton component in the appframe-mui package.

import { forwardRef } from "react";

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

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

export const CancelButton = forwardRef<HTMLButtonElement, ButtonProps>(
  function CancelButton(props, ref) {
    let { cancelEdit } = useCancelButton();

    return (
      <Button
        aria-label={getLocalizedString("Revert unsaved changes")}
        onClick={cancelEdit}
        startIcon={<Undo />}
        {...props}
        ref={ref}
      >
        {props.children ? props.children : getLocalizedString("Cancel")}
      </Button>
    );
  }
);

API

/**
 * Simple hook to connect a button to the cancelEdit method
 * in the data object.
 */
export declare function useCancelButton(): {
  /**
   * Cancels edit on the current row of the data object found
   * in the context.
   */
  cancelEdit: () => void;
};