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

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();

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();