Action

Die Action umschließt einen Button und gibt visuelles Feedback bei asynchronen Aktionen.

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

<Action onAction={sleep}>
  <Button color="accent">Speichern</Button>
</Action>

Best Practices

Nutze den Pending State nur für Vorgänge unter etwa fünf Sekunden. Für längere Prozesse eignet sich eher eine Notification.
Setze Feedback States nur ein, wenn sie dem Nutzer einen Mehrwert bieten.

Pending

Wenn eine asynchrone Aktion länger als 1000 Millisekunden dauert, wird der Pending State angezeigt.

Feedback

Wenn ein visuelles Feedback nach einer Userinteraktion angezeigt werden soll, kann das Property showFeedback genutzt werden.

Bestätigungsmodal

Um User vor unbeabsichtigten Aktionen zu schützen, kann ein Bestätigungsmodal angezeigt werden. Dafür muss innerhalb der Action ein Modal mit dem Attribut slot="actionConfirm" platziert werden.

Verschachtelte Actions

Wenn mehrere Aktionen auf eine Userinteraktion folgen, können Actions auch ineinander verschachtelt werden.

In MenuItems

Actions können auch um MenuItems gelegt werden, um deren State zu steuern.

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-Component 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

Property	Type	Default	Description
`actionModel`	`ActionModel`	-	An existing action model to use instead of creating a new one. Lets several components share one action state.
`closeOverlay`	`keyof FlowComponentPropsTypes \| OverlayController \| CloseOverlayOptions`	-	The overlay to close when the action is triggered.
`openOverlay`	`keyof FlowComponentPropsTypes \| OverlayController`	-	The overlay to open when the action is triggered.
`toggleOverlay`	`keyof FlowComponentPropsTypes \| OverlayController`	-	The overlay to open or close when the action is triggered.
`closeModal`	`boolean \| CloseModalOptions`	-	Whether the surrounding modal is closed when the action is triggered.
`openModal`	`boolean`	-	Whether the surrounding modal is opened when the action is triggered.
`toggleModal`	`boolean`	-	Whether the surrounding modal is opened or closed when the action is triggered.
`break`	`boolean`	false	Stops the execution here: parent actions are not executed.
`skip`	`number \| boolean`	false	The number of parent actions skipped when the action is triggered. `true` skips one.
`showFeedback`	`boolean`	-	Whether success feedback is shown after the action succeeded. Asynchronous actions show feedback by default; set `false` to suppress it.
`children`	`ReactNode`	-
`wrapWith`	`ReactElement<unknown, string \| JSXElementConstructor<any>>`	-	A React element the component is wrapped with. The element is cloned and receives the component as its only child — useful to render the component inside a link, a tooltip trigger or any other wrapper without changing the surrounding markup.
`ref`	`Ref<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
`key`	`Key`	-

Events

Property	Type	Default	Description
`onAction`	`ActionFn`	-	The function executed when the action is triggered. Returning a promise puts the action into its pending and feedback states automatically.

Components

Integrations