open-consul/ui/packages/consul-ui/app/components/state-chart
John Cowen c86aedfdd5
ui: Gradual deprecation of old StateChart interface (#13604)
2022-07-04 11:22:14 +01:00
..
action ui: Move to Workspaced Structure (#8994) 2020-10-21 15:23:16 +01:00
guard ui: Move to Workspaced Structure (#8994) 2020-10-21 15:23:16 +01:00
README.mdx ui: Gradual deprecation of old StateChart interface (#13604) 2022-07-04 11:22:14 +01:00
index.hbs ui: Move to Workspaced Structure (#8994) 2020-10-21 15:23:16 +01:00
index.js ui: Transition App Chrome to use new Disclosure Menus (#12334) 2022-02-21 12:22:59 +00:00

README.mdx

---
class: ember
---
# StateChart

**This component is deprecated and is currently undergoing an interface change in <StateMachine />**

```hbs
<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

```hbs
<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)

---