mirror of
https://github.com/status-im/consul.git
synced 2025-01-09 05:23:04 +00:00
6589cbbd0d
* ui: Add the most basic workspace root in /ui * We already have a LICENSE file in the repository root * Change directory path in build scripts ui-v2 -> ui * Make yarn install flags configurable from elsewhere * Minimal workspace root makefile * Call the new docker specific target * Update yarn in the docker build image * Reconfigure the netlify target and move to the higher makefile * Move ui-v2 -> ui/packages/consul-ui * Change repo root to refleect new folder structure * Temporarily don't hoist consul-api-double * Fixup CI configuration * Fixup lint errors * Fixup Netlify target
58 lines
1.8 KiB
Plaintext
58 lines
1.8 KiB
Plaintext
## StateChart
|
|
|
|
```handlebars
|
|
<StateChart
|
|
@chart={{xstateStateChartObject}}
|
|
as |State Guard Action dispatch state|>
|
|
</StateChart>
|
|
```
|
|
|
|
`<StateChart />` is a renderless component that eases rendering of different states
|
|
from within templates using XState State Machine and Statechart objects.
|
|
|
|
### Arguments
|
|
|
|
| Argument/Attribute | Type | Default | Description |
|
|
| --- | --- | --- | --- |
|
|
| `chart` | `object` | | An xstate statechart/state machine object |
|
|
| `initial` | `String` | The initial value of the state chart itself | The initial state of the machine/chart (defaults to whatever is defined on the object itself) |
|
|
|
|
The component currently yields 3 conextual components:
|
|
|
|
- `<State />`: Used for rendering matching certain states ([also see State Component](../state/README.mdx))
|
|
- `<Action @name="" @exec={{action ""}} />`: Used to wire together ember actions to xstate actions.
|
|
- `<Guard @name="" @cond={{action ""}} />`: Used to wire together ember actions or props to xstate guards.
|
|
|
|
and 2 further objects:
|
|
|
|
- `dispatch`: An action to dispatch an xstate event
|
|
- `state`: The state object itself for usage in the `state-matches` helper
|
|
|
|
### Example
|
|
|
|
```handlebars
|
|
<StateChart
|
|
@chart={{xstateStateChartObject}}
|
|
as |State Guard Action dispatch state|>
|
|
<Guard @name="nameOfGuard" @cond={{action "testGuardCondition"}} />
|
|
<Action @name="nameOfAction" @exec={{action "executeAction"}} />
|
|
<State @matches="idle">
|
|
Currently Idle
|
|
</State>
|
|
<State @matches="loading">
|
|
Currently Loading
|
|
</State>
|
|
<State @matches={{array 'loading' 'idle'}}>
|
|
Idle and loading
|
|
<button disabled={{state-matches state "loading"}} onclick={{action dispatch "START"}}>Load</button>
|
|
</State>
|
|
</StateChart>
|
|
```
|
|
|
|
### See
|
|
|
|
- [Component Source Code](./index.js)
|
|
- [Template Source Code](./index.hbs)
|
|
|
|
---
|