# Action

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

## Develop

# 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.

```tsx
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` | - | - |
| `closeOverlay` | `keyof FlowComponentPropsTypes \| OverlayController \| CloseOverlayOptions` | - | - |
| `openOverlay` | `keyof FlowComponentPropsTypes \| OverlayController` | - | - |
| `toggleOverlay` | `keyof FlowComponentPropsTypes \| OverlayController` | - | - |
| `closeModal` | `boolean \| CloseModalOptions` | - | - |
| `openModal` | `boolean` | - | - |
| `toggleModal` | `boolean` | - | - |
| `break` | `boolean` | - | - |
| `skip` | `number \| boolean` | - | - |
| `showFeedback` | `boolean` | - | - |
| `children` | `ReactNode` | - | - |
| `wrapWith` | `ReactElement<unknown, string \| JSXElementConstructor<any>>` | - | - |
| `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](https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom) |
| `key` | `Key` | - | - |

### Events

| Property | Type | Default | Description |
| --- | --- | --- | --- |
| `onAction` | `ActionFn` | - | - |