Action

Die Action wird um einen Button gelegt, um beispielsweise visuelles Feedback bei asynchronen Aktionen zu ermöglichen oder ein Bestätigungsmodal auszulösen.GitHubMarkdown

Actions abbrechen

Wenn eine Action abgebrochen werden soll, ohne einen Fehler auszulösen, kann die Funktion abortAction aus dem Action-Modul verwendet werden. Diese Funktion wirft einen speziellen Fehler, der von der Action-Komponente erkannt wird. Dadurch kann die Action sauber abgebrochen werden, ohne dass unerwünschte Fehlermeldungen oder Seiteneffekte auftreten.

Alle nachfolgenden Funktionen in der Action-Execution-Logik, die nach dem Aufruf von abortAction definiert sind, werden nicht mehr ausgeführt. Das bedeutet, dass der gesamte Ablauf der Action sofort gestoppt wird, sobald abortAction aufgerufen wird.

Umschließende Actions bei einer Verschachtelung von Actions werden ebenfalls abgebrochen, wenn abortAction in einer inneren Action aufgerufen wird.

import { sleep } from "@/content/04-components/actions/action/examples/lib";
import {
  abortAction,
  Action,
  Button,
} from "@mittwald/flow-react-components";

<Action
  onAction={() => {
    console.log("Outer action");
  }}
>
  <Action
    onAction={async () => {
      await sleep();
      console.log("Inner action");
      abortAction();
    }}
  >
    <Button>Start action</Button>
  </Action>
</Action>

Properties

PropertyTypeDefaultDescription
actionModelActionModel-
closeOverlaykeyof FlowComponentPropsTypes | OverlayController | CloseOverlayOptions-
openOverlaykeyof FlowComponentPropsTypes | OverlayController-
toggleOverlaykeyof FlowComponentPropsTypes | OverlayController-
closeModalboolean | CloseModalOptions-
openModalboolean-
toggleModalboolean-
breakboolean-
skipnumber | boolean-
showFeedbackboolean-
childrenReactNode-
wrapWithReactElement<unknown, string | JSXElementConstructor<any>>-
refRef<HTMLSpanElement>-Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref). @see React Docs
keyKey-

Events

PropertyTypeDefaultDescription
onActionActionFn-

Auf dieser Seite