Checklist
@dopt/javascript / Exports / Checklist
Class: Checklist
A checklist class obeys the checklist interface specified in @dopt/semantic-data-layer-checklist.
It also extends the Container class.
By extending the Container class, it also offers
the subscribe method specified in Container.
subscribe allows you to register a listener
for any state change to a checklist component or its
checklist item children.
Hierarchy
↳
Checklist
Implements
Checklist
Table of contents
Accessors
- id
- active
- completed
- dismissed
- title
- body
- items
- size
- childrenUids
- children
- type
- kind
- sid
- uid
- version
- state
- transitioned
Methods
Accessors
id
• get id(): string
Returns
string
Implementation of
ChecklistInterface.id
Defined in
packages/@dopt/javascript/src/checklist.ts:27
active
• get active(): boolean
Returns
boolean
Implementation of
ChecklistInterface.active
Defined in
packages/@dopt/javascript/src/checklist.ts:30
completed
• get completed(): boolean
Returns
boolean
Implementation of
ChecklistInterface.completed
Defined in
packages/@dopt/javascript/src/checklist.ts:33
dismissed
• get dismissed(): boolean
Returns
boolean
Implementation of
ChecklistInterface.dismissed
Defined in
packages/@dopt/javascript/src/checklist.ts:36
title
• get title(): undefined | null | string
Returns
undefined | null | string
Implementation of
ChecklistInterface.title
Defined in
packages/@dopt/javascript/src/checklist.ts:45
body
• get body(): undefined | null | Children
Returns
undefined | null | Children
Implementation of
ChecklistInterface.body
Defined in
packages/@dopt/javascript/src/checklist.ts:48
items
• get items(): ChecklistItem[]
Returns
Implementation of
ChecklistInterface.items
Defined in
packages/@dopt/javascript/src/checklist.ts:51
size
• get size(): number
Returns
number
Implementation of
ChecklistInterface.size
Defined in
packages/@dopt/javascript/src/checklist.ts:54
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.
Inherited from
Container.childrenUids
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.
Inherited from
Container.children
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
Container.type
Defined in
packages/@dopt/javascript/src/block.ts:91
kind
• get kind(): "block"
Returns
"block"
Inherited from
Container.kind
Defined in
packages/@dopt/javascript/src/block.ts:95
sid
• get sid(): string
Returns
string
Inherited from
Container.sid
Defined in
packages/@dopt/javascript/src/block.ts:99
uid
• get uid(): string
Returns
string
Inherited from
Container.uid
Defined in
packages/@dopt/javascript/src/block.ts:103
version
• get version(): number
Returns
number
Inherited from
Container.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
Container.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
Container.transitioned
Defined in
packages/@dopt/javascript/src/block.ts:143
Methods
complete
▸ complete(): void
Returns
void
Implementation of
ChecklistInterface.complete
Defined in
packages/@dopt/javascript/src/checklist.ts:39
dismiss
▸ dismiss(): void
Returns
void
Implementation of
ChecklistInterface.dismiss
Defined in
packages/@dopt/javascript/src/checklist.ts:42
filter
▸ filter(on): ChecklistItem[]
Parameters
| Name | Type |
|---|---|
on | FilterableField |
Returns
Implementation of
ChecklistInterface.filter
Defined in
packages/@dopt/javascript/src/checklist.ts:57
count
▸ count(on): number
Parameters
| Name | Type |
|---|---|
on | FilterableField |
Returns
number
Implementation of
ChecklistInterface.count
Defined in
packages/@dopt/javascript/src/checklist.ts:79
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<ChecklistItem>) => 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
Inherited from
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
Implementation of
ChecklistInterface.field
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