useRefreshRowButton

Returns a refresh row data function, and the current loading status of the data object found in the DataObjectContext

Unlike the loading status of useRefreshButton, which returns the current value of DataOBject.prototype.isDataLoading, the loading status of useRefreshRowButton is specific to every instance of the hook usage.

This means that if you use the useRefreshRowButton hook multiple places for the same row, only the component that triggers the refreshRow function will get true in the loading value.

Usage

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

import { forwardRef } from "react";

import {
  Box,
  CircularProgress,
  IconButton,
  IconButtonProps,
} from "@mui/material";
import { getLocalizedString } from "@olenbetong/appframe-core";
import { useRefreshRowButton } from "@olenbetong/appframe-react";

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

export const RefreshRowIconButton = forwardRef<
  HTMLButtonElement,
  IconButtonProps
>(function RefreshRowIconButton({ children, ...props }, ref) {
  let { refreshRow, loading } = useRefreshRowButton();

  return (
    <Box position="relative">
      <IconButton
        aria-label={getLocalizedString("Refresh current row")}
        onClick={() => refreshRow()}
        {...props}
        ref={ref}
      >
        {children ?? <Refresh />}
      </IconButton>
      {loading && (
        <CircularProgress
          sx={{ position: "absolute", top: 0, left: 0 }}
          size={36}
        />
      )}
    </Box>
  );
});

API

export declare type useRefreshRowButtonReturnValue = {
    /**
     * A boolean indicating if the record is currently being refreshed.
     */
    loading: boolean;
    /**
     * Refreshes a row in the data object found in the context. If an index is
     * passed, refreshes the row at that index, otherwise refreshes the current
     * row.
     */
    refreshRow: (index?: number) => Promise<void>;
};
/**
 * Simple hook to connect a button to the refreshRow/refreshCurrentRow methods
 * of the data object. If and index is passed to the onClick handler, it will
 * refresh the row at that index. Otherwise, it will refresh the current row.
 */
export declare function useRefreshRowButton(): useRefreshRowButtonReturnValue;