87ab332bce
This commit adds 2 ember component/helpers and a service to contain the shared functionality for matching/rendering content dependent on state identifiers. Currently a `service.state` method has been added to easily make manual state objects, but these are built towards using `xstate` to manage UI state in some of our future components. We've added some tests here, and we aren't currently using these components anywhere in this commit.
39 lines
1 KiB
Plaintext
39 lines
1 KiB
Plaintext
## State
|
|
|
|
`<State @state={{matchableStateObject}} @matches="idle">Currently Idle</State>`
|
|
|
|
`<State />` is a renderless component that eases rendering of different states
|
|
from within templates. State objects could be manually made state objects and
|
|
xstate state objects. It's very similar to a normal conditional in that if the
|
|
state identifier matches the current state, the contents of the component will
|
|
be shown.
|
|
|
|
### Arguments
|
|
|
|
| Argument/Attribute | Type | Default | Description |
|
|
| --- | --- | --- | --- |
|
|
| `state` | `object` | | An object that implements a `match` method |
|
|
| `matches` | `String\|Array` | | A state identifier (or array of state identifiers) to match on |
|
|
|
|
|
|
### Example
|
|
|
|
```handlebars
|
|
<State @state={{state}} @matches="idle">
|
|
Currently Idle
|
|
</State>
|
|
<State @state={{state}} @matches="loading">
|
|
Currently Loading
|
|
</State>
|
|
<State @state={{state}} @matches={{array 'loading' 'idle'}}>
|
|
Idle and loading
|
|
</State>
|
|
```
|
|
|
|
### See
|
|
|
|
- [Component Source Code](./index.js)
|
|
- [Template Source Code](./index.hbs)
|
|
|
|
---
|