Hints
@dopt/javascript / Exports / Hints
Class: Hints
A hints class obeys the hints interface specified in @dopt/semantic-data-layer-hints.
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 hints component or its
hints item children.
Hierarchy
Implements
Hints
Table of contents
Accessors
Methods
Accessors
id
• get
id(): string
Returns
string
Implementation of
HintsInterface.id
Defined in
packages/@dopt/javascript/src/hints.ts:24
active
• get
active(): boolean
Returns
boolean
Implementation of
HintsInterface.active
Defined in
packages/@dopt/javascript/src/hints.ts:27
completed
• get
completed(): boolean
Returns
boolean
Implementation of
HintsInterface.completed
Defined in
packages/@dopt/javascript/src/hints.ts:30
dismissed
• get
dismissed(): boolean
Returns
boolean
Implementation of
HintsInterface.dismissed
Defined in
packages/@dopt/javascript/src/hints.ts:33
items
• get
items(): HintsItem
[]
Returns
Implementation of
HintsInterface.items
Defined in
packages/@dopt/javascript/src/hints.ts:42
size
• get
size(): number
Returns
number
Implementation of
HintsInterface.size
Defined in
packages/@dopt/javascript/src/hints.ts:45
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
HintsInterface.complete
Defined in
packages/@dopt/javascript/src/hints.ts:36
dismiss
▸ dismiss(): void
Returns
void
Implementation of
HintsInterface.dismiss
Defined in
packages/@dopt/javascript/src/hints.ts:39
filter
▸ filter(on
): HintsItem
[]
Parameters
Name | Type |
---|---|
on | FilterableField |
Returns
Implementation of
HintsInterface.filter
Defined in
packages/@dopt/javascript/src/hints.ts:48
count
▸ count(on
): number
Parameters
Name | Type |
---|---|
on | FilterableField |
Returns
number
Implementation of
HintsInterface.count
Defined in
packages/@dopt/javascript/src/hints.ts:70
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 <HintsItem >) => 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
HintsInterface.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