Container
@dopt/javascript / Exports / Container
Class: Container<C>
Type parameters
| Name | Type |
|---|---|
C | extends Block |
Hierarchy
Table of contents
Accessors
Methods
Accessors
childrenUids
• get childrenUids(): string[]
Returns the UIDs of the block children of this Container.
Example
const uids = container.childrenUids;
console.log(`I have ${uids.length} children!`);
Returns
string[]
An array of the container's children's UIDs.
Defined in
packages/@dopt/javascript/src/container.ts:37
children
• get children(): C[]
Returns all the block children of this Container.
Remarks
Blocks returned by this method have type Block.
Example
const data = container.children;
// can access state properties safely
const states = data.map(({ state }) => state);
// to transition these blocks
data.map(block => block.transition('default'));
Returns
C[]
An array of the container's children Blocks.
Defined in
packages/@dopt/javascript/src/container.ts:63
type
• get type(): "custom" | "card" | "modal" | "checklist" | "checklistItem" | "hints" | "hintsItem" | "tour" | "tourItem"
Returns
"custom" | "card" | "modal" | "checklist" | "checklistItem" | "hints" | "hintsItem" | "tour" | "tourItem"
Inherited from
Block.type
Defined in
packages/@dopt/javascript/src/block.ts:91
kind
• get kind(): "block"
Returns
"block"
Inherited from
Block.kind
Defined in
packages/@dopt/javascript/src/block.ts:95
sid
• get sid(): string
Returns
string
Inherited from
Block.sid
Defined in
packages/@dopt/javascript/src/block.ts:99
uid
• get uid(): string
Returns
string
Inherited from
Block.uid
Defined in
packages/@dopt/javascript/src/block.ts:103
version
• get version(): number
Returns
number
Inherited from
Block.version
Defined in
packages/@dopt/javascript/src/block.ts:107
state
• get state(): Object
Returns the up-to-date state of this Block instance.
Returns
Object
The state of this instance.
| Name | Type |
|---|---|
active | boolean |
entered | boolean |
exited | boolean |
Inherited from
Block.state
Defined in
packages/@dopt/javascript/src/block.ts:116
transitioned
• get transitioned(): T extends [string, ...string[]] ? Record<T[number], undefined | boolean> : Record<string, undefined | boolean>
Returns the up-to-date transitioned values for this Block instance.
Example
const block = dopt.block("HNWvcT78tyTwygnbzU6SW");
const firstTransitioned = block.transitioned['first-edge'];
In typescript, if a block is accessed with generics:
const block = dopt.block<['a-edge']>("HNWvcT78tyTwygnbzU6SW");
// this is valid
block.transitioned['a-edge'];
// this is invalid
block.transitioned['b-edge'];
Returns
T extends [string, ...string[]] ? Record<T[number], undefined | boolean> : Record<string, undefined | boolean>
The edges which have been transitioned for this instance. If the edge exists, it's value will be true / false, otherwise the value will be undefined.
Inherited from
Block.transitioned
Defined in
packages/@dopt/javascript/src/block.ts:143
Methods
subscribe
▸ subscribe(listener): () => void
Subscribe to changes on this block or on any of its children.
This method differs from the Block subscribe method
in that it is triggered if the container or any of its
children change.
Example
const container = dopt.container("my-flow.my-container");
const unsubscribe = container.subscribe(async (container: Container) => {
if (container.state.exited) {
await showModal("Yay, you've completed all steps");
unsubscribe();
} else {
await showModal(`${
container
.children()
.filter(({ state }) => state.exited)
.length
} step(s) completed`);
}
});
Parameters
| Name | Type | Description |
|---|---|---|
listener | (container: Container<C>) => void | The listener function is called with this Container instance. |
Returns
fn
A function which can be called to unsubscribe the listener.
▸ (): void
Returns
void
Overrides
Defined in
packages/@dopt/javascript/src/container.ts:99
field
▸ field<V>(name): undefined | null | V
Gets the field with the name contained by this Block.
If Dopt is loading or Block does not have a field
with the specified name, undefined is returned.
null is returned when the field has been explicitly
configured in app.dopt.com to have an empty value.
Type parameters
| Name | Type |
|---|---|
V | extends null | string | number | boolean | Record<string, any>[] |
Parameters
| Name | Type |
|---|---|
name | string |
Returns
undefined | null | V
Inherited from
Defined in
packages/@dopt/javascript/src/block.ts:68
transition
▸ transition(...input): void
Transition this block. Will also update the state of blocks within this flow, as appropriate. This function must be called with at least one transition.
Example
const block = dopt.block("HNWvcT78tyTwygnbzU6SW");
// transitioning a single edge
block.transition('first-edge');
// transitioning multiple edges
block.transition('second-edge', 'third-edge');
In typescript, if a block is accessed with generics:
const block = dopt.block<['a-edge']>("HNWvcT78tyTwygnbzU6SW");
// this is valid
block.transition('a-edge');
// this is invalid
block.transition('b-edge');
Remarks
This function will update state with Dopt and trigger changes. Subscribe to the flows and blocks you care about to react to those changes.
Parameters
| Name | Type |
|---|---|
...input | ["complete" | "dismiss", ...("complete" | "dismiss")[]] |
Returns
void
void