Progress
The Progress component creates a progress bar/circle

Props:

Properties
Types
Description
Required?
Default
determinate
number
progress value 0 will be a loading animation, and 1 - 100 will be the percentage filled
undefined
label
string
adds and aria-label to component
undefined
shape
ProgressShape
ProgressShape.Linear:
ProgressShape.Circular:
Circular
size
StyleSize
None, Small: 20px, Medium: 40px and, Large: 60px (Note None defaults to Medium)
Medium

Examples

Number input to update progress bar
Typescript
React
1
import { whisper } from "@oliveai/ldk"
2
import {
3
NewWhisper,
4
ProgressShape,
5
StyleSize,
6
UpdateWhisper,
7
Whisper,
8
WhisperComponentType
9
} from "@oliveai/ldk/dist/whisper"
10
11
const validateNumberInput = ((number: number) => {
12
if (number < 0) {
13
14
return{ updateProgress: false, message: "Number can't be less than 0!" };
15
} else if (number > 100) {
16
17
return { updateProgress: false, message: "Number can't be greater than 100!" };
18
} else if (number === null) {
19
20
return { updateProgress: false, message: "Input must be a number!" };
21
} else {
22
23
return { updateProgress: true, message: '' };
24
}
25
})
26
27
const progressExampleConfig = ( (progressValue: number, validationError: string): NewWhisper | UpdateWhisper => {
28
return {
29
label: 'Progress Example',
30
components: [
31
{
32
type: WhisperComponentType.Number,
33
label: "Number 0-100",
34
max: 100,
35
min: 0,
36
step: 1,
37
tooltip: "Input a number 0 through 100",
38
validationError: validationError,
39
onChange: async (error: Error, params: number, whisper: Whisper)=>{
40
const {updateProgress, message} = validateNumberInput(params);
41
const value = updateProgress ? params : progressValue;
42
whisper.update(progressExampleConfig(value, message));
43
}
44
},
45
{
46
type: WhisperComponentType.Progress,
47
determinate: progressValue,
48
shape: ProgressShape.Linear,
49
size: StyleSize.Medium
50
}
51
]
52
}
53
})
54
55
const newProgressExampleConfig = (async () => {
56
await whisper.create(progressExampleConfig(0, '') as NewWhisper);
57
})
58
59
newProgressExampleConfig();
60
Copied!
1
import { whisper } from "@oliveai/ldk"
2
import {
3
NewWhisper,
4
ProgressShape,
5
StyleSize,
6
UpdateWhisper,
7
Whisper,
8
WhisperComponentType
9
} from "@oliveai/ldk/dist/whisper"
10
11
const validateNumberInput = ((number: number) => {
12
if (number < 0) {
13
14
return{ updateProgress: false, message: "Number can't be less than 0!" };
15
} else if (number > 100) {
16
17
return { updateProgress: false, message: "Number can't be greater than 100!" };
18
} else if (number === null) {
19
20
return { updateProgress: false, message: "Input must be a number!" };
21
} else {
22
23
return { updateProgress: true, message: '' };
24
}
25
})
26
27
const progressExampleConfig = ( (progressValue: number, validationError: string): NewWhisper | UpdateWhisper => {
28
return {
29
label: 'Progress Example',
30
components: [
31
{
32
type: WhisperComponentType.Number,
33
label: "Number 0-100",
34
max: 100,
35
min: 0,
36
step: 1,
37
tooltip: "Input a number 0 through 100",
38
validationError: validationError,
39
onChange: async (error: Error, params: number, whisper: Whisper)=>{
40
const {updateProgress, message} = validateNumberInput(params);
41
const value = updateProgress ? params : progressValue;
42
whisper.update(progressExampleConfig(value, message));
43
}
44
},
45
{
46
type: WhisperComponentType.Progress,
47
determinate: progressValue,
48
shape: ProgressShape.Linear,
49
size: StyleSize.Medium
50
}
51
]
52
}
53
})
54
55
const newProgressExampleConfig = (async () => {
56
await whisper.create(progressExampleConfig(0, '') as NewWhisper);
57
})
58
59
newProgressExampleConfig();
60
Copied!
Copy link