Container
@dopt/react / Exports / Container
Interface: Container
A container is a block which encapsulates other blocks. For example, a "checklist" encapsulates its children.
A container extends Block and has all the properties that a block has. Calling the transition function on the container transitions the parent block.
A container also has children which are also of type Block and are contained within the parent block. These children all have ['containerUid'] pointing to the parent's ['uid'].
Hierarchy
↳
Container
Table of contents
Properties
Properties
children
• children: Block<unknown>[]
Accessing children directly from a container doesn't permit type-safety for block.transitioned.
Defined in
packages/@dopt/react/src/types.ts:317
type
• type: "custom" | "card" | "modal" | "checklist" | "checklistItem" | "hints" | "hintsItem" | "tour" | "tourItem"
Inherited from
Defined in
packages/@dopt/react/src/types.ts:113
kind
• kind: "block"
Inherited from
Defined in
packages/@dopt/react/src/types.ts:114
uid
• uid: string
Inherited from
Defined in
packages/@dopt/react/src/types.ts:115
sid
• sid: string
Inherited from
Defined in
packages/@dopt/react/src/types.ts:116
version
• version: number
Inherited from
Defined in
packages/@dopt/react/src/types.ts:117
state
• state: Object
The up-to-date state of this Block instance.
Type declaration
| Name | Type |
|---|---|
active | boolean |
entered | boolean |
exited | boolean |
Inherited from
Defined in
packages/@dopt/react/src/types.ts:121
transition
• transition: BlockTransition<unknown>
A function correspond to an intent-based API for signaling state transitions on a block. This function has side effects: it changes the state of other blocks and the flow as well. For example, transitioning a block activates the next block and transitioning the last block finishes a flow.
Inherited from
Defined in
packages/@dopt/react/src/types.ts:130
transitioned
• transitioned: Record<string, undefined | boolean>
The up-to-date transitioned values for this Block instance.
Contains 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.
Example
const [block] = useBlock("HNWvcT78tyTwygnbzU6SW");
const firstTransitioned = block.transitioned['first-edge'];
In typescript, if a block is accessed with generics:
const [block] = useBlock<['a-edge']>("HNWvcT78tyTwygnbzU6SW");
// this is valid
block.transitioned['a-edge'];
// this is invalid
block.transitioned['b-edge'];
Inherited from
Defined in
packages/@dopt/react/src/types.ts:155
field
• field: <V>(name: string) => undefined | null | V
Type declaration
▸ <V>(name): undefined | null | V
Gets the field (see ['value']) with the name
(see ['sid']) 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/react/src/types.ts:168
containerUid
• Optional containerUid: string
If a block is contained within another block, for example a "checklistItem" within a "checklist", this property will point to the parent "checklist" block's uid.
Otherwise, this property will be undefined.