useSaveButton

Returns a save function and dirty/isSaving statuses for the data object found in the DataObjectContext

Usage

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

import { forwardRef } from "react";

import Save from "./icons/Save.js";
import { Badge, Button, ButtonProps } from "@mui/material";
import { getLocalizedString } from "@olenbetong/appframe-core";
import { useSaveButton } from "@olenbetong/appframe-react";

export const SaveButton = forwardRef<HTMLButtonElement, ButtonProps>(
  function SaveButton(props, ref) {
    let { dirty, isSaving, save } = useSaveButton();

    return (
      <Button
        loading={isSaving}
        onClick={save}
        loadingPosition="start"
        startIcon={
          <Badge invisible={!dirty} color="secondary" variant="dot">
            <Save />
          </Badge>
        }
        {...props}
        ref={ref}
      >
        {props.children ? props.children : getLocalizedString("Save")}
      </Button>
    );
  }
);

API

export declare type useSaveButtonReturnValue = {
  /**
   * Whether the current record is dirty. Can be used to display an
   * indicator on the save button.
   */
  dirty: boolean;
  /**
   * Whether the current record is already saving. Can be used to display
   * a loading indicator.
   */
  isSaving: boolean;
  /**
   * Saves the current record in the data object found in the context.
   * If an error occurs, displays an alert dialog.
   */
  save: () => Promise<void>;
};

/**
 * Simple hook that returns everything needed to connect a button to
 * the endEdit method of the data object.
 */
export declare function useSaveButton(): useSaveButtonReturnValue;