mirror of
https://github.com/status-im/consul.git
synced 2025-01-09 13:26:07 +00:00
80960c9d54
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.0 KiB
Plaintext
39 lines
1.0 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)
|
|
|
|
---
|