1
0
mirror of https://github.com/bitwarden/browser synced 2025-12-19 01:33:33 +00:00

feat: improve async actions docs and guards (#4215)

* docs: clarify submit handler in standalone example

* docs: clarify protection against re-running actions

* docs: clarify that these directives replace click and ngSubmit

* docs: clarify `void`

* feat: disable action directive on bitsubmit disable

* docs: fix grammar

* docs: change to note

* feat: guard against double running bitAction
This commit is contained in:
Andreas Coroiu
2022-12-14 08:47:01 +01:00
committed by GitHub
parent b16d7a6f6e
commit 3ffeb684a7
4 changed files with 38 additions and 24 deletions

View File

@@ -14,21 +14,20 @@ Adding async actions to standalone buttons requires the following 2 steps
### 1. Add a handler to your `Component`
A handler is a function that returns a promise or an observable. Functions that return `void` are also supported which is
useful for aborting an action.
useful because `return;` can be used to abort an action.
**NOTE:** Defining the handlers as arrow-functions assigned to variables is mandatory if the handler needs access to the parent
component using the variable `this`.
**NOTE:** Handlers do not need to check if any previous requests have finished because the directives have built in protection against
users attempting to trigger new actions before the previous ones have finished.
#### Example using promises
```ts
@Component({...})
class PromiseExampleComponent {
handler = async () => {
if (/* perform guard check */) {
return;
}
await this.apiService.post(/* ... */);
};
}
@@ -40,10 +39,6 @@ class PromiseExampleComponent {
@Component({...})
class Component {
handler = () => {
if (/* perform guard check */) {
return;
}
return this.apiService.post$(/* ... */);
};
}
@@ -56,6 +51,8 @@ Add the `bitAction` directive and supply the handler defined in step 1.
**NOTE:** The `directive` is defined using the input syntax: `[input]="handler"`.
This is different from how click handlers are usually defined with the output syntax `(click)="handler()"`.
**NOTE:** `[bitAction]` is used instead of `(click)`. Using both is not supported.
```html
<button bitButton [bitAction]="handler">Do action</button>