DataObjectContext

When components/hooks bind to data objects, they use the data object from the DataObjectContext. This is a simple React context that returns only the data object you pass to the provider.

The provider can also bind some keyboard shortcuts to functions of the data object by setting the enableKeyboard property to true:

• Ctrl + S - Calls endEdit on the data object

• Escape - If the data object is dirty, cancel the changes. If not, the event will keep bubbling.

Note that enabling keyboard functionality also makes the provider render a div element that is used to capture the keyboard events.

Example

In this example, the BoundTextField component is bound to the Title field of dsMyDataObject. The CurrentTitle component demonstrates how you get the data object from the context, and then uses the current row to render the Title field.

import {
  DataObjectProvider,
  useCurrentRow,
  useDataObject,
} from "@olenbetong/appframe-react";
import { BoundTextField } from "@olenbetong/appframe-mui";

function CurrentTitle() {
  let dataObject = useDataObject();
  let row = useCurrentRow(dataObject);

  return row.Title;
}

function MyComponent() {
  return (
    <DataObjectProvider enableKeyboard dataObject={dsMyDataObject}>
      <BoundTextField field="Title" />
      <CurrentTitle />
    </DataObjectProvider>
  );
}

API

import { DataObject } from "@olenbetong/appframe-data";

export declare type DataObjectContextValue<T> = DataObject<T>;

export declare const DataObjectContext: import("react").Context<
  DataObjectContextValue<any>
>;

export declare function useDataObject<
  T = {
    PrimKey: string;
  }
>(): DataObject<T>;

export declare type DataObjectProviderProps<T> = {
  children: React.ReactNode | React.ReactNode[];
  dataObject: DataObject<T>;
  /**
   * If true, children will be rendered inside a div element.
   * This element will catch keydown events for save (Ctrl+S) and cancel (Escape)
   */
  enableKeyboard?: boolean;
};

export declare function DataObjectProvider<T>({
  children,
  dataObject,
  enableKeyboard,
}: DataObjectProviderProps<T>): JSX.Element;