Progress
The Progress component creates a progress bar/circle
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 |
Number input to update progress bar
Typescript
React
import { whisper } from "@oliveai/ldk"
import {
NewWhisper,
ProgressShape,
StyleSize,
UpdateWhisper,
Whisper,
WhisperComponentType
} from "@oliveai/ldk/dist/whisper"
const validateNumberInput = ((number: number) => {
if (number < 0) {
return{ updateProgress: false, message: "Number can't be less than 0!" };
} else if (number > 100) {
return { updateProgress: false, message: "Number can't be greater than 100!" };
} else if (number === null) {
return { updateProgress: false, message: "Input must be a number!" };
} else {
return { updateProgress: true, message: '' };
}
})
const progressExampleConfig = ( (progressValue: number, validationError: string): NewWhisper | UpdateWhisper => {
return {
label: 'Progress Example',
components: [
{
type: WhisperComponentType.Number,
label: "Number 0-100",
max: 100,
min: 0,
step: 1,
tooltip: "Input a number 0 through 100",
validationError: validationError,
onChange: async (error: Error, params: number, whisper: Whisper)=>{
const {updateProgress, message} = validateNumberInput(params);
const value = updateProgress ? params : progressValue;
whisper.update(progressExampleConfig(value, message));
}
},
{
type: WhisperComponentType.Progress,
determinate: progressValue,
shape: ProgressShape.Linear,
size: StyleSize.Medium
}
]
}
})
const newProgressExampleConfig = (async () => {
await whisper.create(progressExampleConfig(0, '') as NewWhisper);
})
newProgressExampleConfig();
import { whisper } from "@oliveai/ldk"
import {
NewWhisper,
ProgressShape,
StyleSize,
UpdateWhisper,
Whisper,
WhisperComponentType
} from "@oliveai/ldk/dist/whisper"
const validateNumberInput = ((number: number) => {
if (number < 0) {
return{ updateProgress: false, message: "Number can't be less than 0!" };
} else if (number > 100) {
return { updateProgress: false, message: "Number can't be greater than 100!" };
} else if (number === null) {
return { updateProgress: false, message: "Input must be a number!" };
} else {
return { updateProgress: true, message: '' };
}
})
const progressExampleConfig = ( (progressValue: number, validationError: string): NewWhisper | UpdateWhisper => {
return {
label: 'Progress Example',
components: [
{
type: WhisperComponentType.Number,
label: "Number 0-100",
max: 100,
min: 0,
step: 1,
tooltip: "Input a number 0 through 100",
validationError: validationError,
onChange: async (error: Error, params: number, whisper: Whisper)=>{
const {updateProgress, message} = validateNumberInput(params);
const value = updateProgress ? params : progressValue;
whisper.update(progressExampleConfig(value, message));
}
},
{
type: WhisperComponentType.Progress,
determinate: progressValue,
shape: ProgressShape.Linear,
size: StyleSize.Medium
}
]
}
})
const newProgressExampleConfig = (async () => {
await whisper.create(progressExampleConfig(0, '') as NewWhisper);
})
newProgressExampleConfig();
Last modified 1yr ago