LogoLogo
Developer HubGitHubContact Us
  • Welcome!
  • Olive Helps
    • Platform
      • How Olive Helps Works
      • Installation
      • Account Creation
      • Distributing Olive Helps
    • FAQs
      • General Loop FAQs
      • Loop Development FAQs
      • Olive Helps User FAQs
      • Security / IT FAQs
    • Data Security
      • User Data
      • Antivirus and Firewalls
  • Loop Development Kit
    • Your First Loop
      • Become a Loop Author
      • Creating a Loop
      • Build Your Loop
      • Local Loop Installation
      • Restarting Local Loops
    • Troubleshooting
    • Loop Security
      • Permissions
      • Environment Permissions
    • Loop Publication
      • Loop Approval Checklist
    • Loop Analytics Library
    • Examples
  • Documentation
  • Interfaces
  • Type Alias
  • Enumerations
  • Whisper Components
    • Base Attributes
    • Autocomplete
    • Box
    • Breadcrumb
    • Button
    • Chart
    • CollapseBox
    • Grid
    • Checkbox
    • Date Time
    • Divider
    • DropZone
    • Email
    • Icon
    • List Pair
    • Link
    • Pagination
    • Number
    • Markdown
    • Message
    • Password
    • Progress
    • Radio
    • Rating
    • RichTextEditor
    • Section Title
    • Select
    • Text Input
    • Telephone
    • Typography
  • APTITUDES
    • What are Aptitudes?
    • Browser
    • Clipboard
    • Config
    • Cursor
      • Screen Scaling Behavior
    • Document
    • Filesystem
    • Keyboard
    • Network
    • Process
    • Screen
    • Search
      • Index
    • System
    • UI
      • Loop UI Handlers
    • User
      • JWT
    • Vault
    • Whisper
      • Whisper Updates
      • JSX Whispers
    • Window
      • Screen Scaling Behavior
  • Release Notes
    • What's New
      • Olive Helps v0.55.0
      • Olive Helps v0.54.1
      • Olive Helps v0.53.1
      • Olive Helps v0.51.2
      • LDK v4.0.0
      • Olive Helps v0.50.3
      • Olive Helps v0.49.5
      • LDK v 3.18.0
      • Olive Helps v0.47.2
      • Olive Helps v0.46.2
      • LDK v 3.17.0
      • Olive Helps v0.45.4
      • Olive Helps v0.44.2
      • Olive Helps v0.43.1
      • Olive Helps v0.42.1
      • Olive Helps v0.41.4
      • Olive Helps v0.40.2
      • Olive Helps v0.39.4 & LDK v3.16.0
      • Olive Helps v0.38.8 & LDK v3.15.0
      • Olive Helps v0.36.5
      • Olive Helps v0.36.4
    • Archive
      • Olive Helps v0.36.3 & LDK v3.14.0
      • Olive Helps v0.34.4
      • LDK v3.13.0
      • Olive Helps v0.32.2 & LDK v3.12.0
      • Olive Helps v0.31.2 & LDK v3.11.0
      • Olive Helps v0.30.2 & LDK v3.10.0
      • Olive Helps v0.29.4
      • Olive Helps v0.29.3 & LDK v3.9.0
      • Olive Helps v0.28.3 & LDK v3.8.0
      • Olive Helps v0.27.7
      • Olive Helps v0.27.5
      • Olive Helps v.027.4
      • Olive Helps v0.27.2 & LDK v3.7.0
      • Olive Helps v0.25.3 & LDK v3.5.1
      • Olive Helps v0.24.6 & LDK v3.4.0
      • Olive Helps v0.23.2 & LDK v3.3.0
      • Olive Helps v0.22.3 & LDK v3.2.0
Powered by GitBook
On this page
  • Props
  • Examples

Was this helpful?

  1. Whisper Components

Number

Number input

PreviousPaginationNextMarkdown

Last updated 3 years ago

Was this helpful?

Props

Properties
Type
Required
Description
default

label

String

Text that sits inside of the input and floats above the cursor in the input on focus.

undefined

onBlur

Function

Executes the provided function when the user removes focus from the input.

undefined

onChange

Function

Executes the provided function when the user alters the value of the input.

undefined

onFocus

Function

Executes the provided function when the user focuses into the input.

undefined

tooltip

String

Text that appears when hovering over the input.

undefined

validationError

String

When not '' or undefined, outlines the input in red and renders the provided text in red beneath the input.

undefined

value

Number

State value associated with the input.

undefined

max

Number

the html max attribute

undefined

min

Number

the html min attribute

undefined

step

Number

the html step attribute

undefined

Examples

import { whisper } from "@oliveai/ldk"
import { NewWhisper, UpdateWhisper, Whisper, WhisperComponentType } from "@oliveai/ldk/dist/whisper"

const whisperConfig = (validationError: string): NewWhisper | UpdateWhisper => {
  return {
    label: 'Number input',
    components: [
      {
        type: WhisperComponentType.Number,
        label: "Number 0-5",
        max: 5,
        min: 0,
        step: 1,
        disabled: false,
        tooltip: "Input a number 0 through 5",
        validationError: validationError,
        onChange: async (error: Error, params: Number, whisper: Whisper)=>{
          if (error) return console.debug(error)
          await validateNumber(params, whisper)
        }
      }
    ]
  }
}

const validateNumber = (async (number: Number, whisper: Whisper) => {
  if (number < 0) {
    await updateNumberWhisper(whisper, "Number can't be less than 0!")
  } else if (number > 5) {
    await updateNumberWhisper(whisper, "Number can't be greater than 5!")
  } else if (number === null) {
    await updateNumberWhisper(whisper, "Input must be a number!")
  } else {
    await updateNumberWhisper(whisper, undefined)
  }
})

const updateNumberWhisper = (async(whisper: Whisper, validationError: string) => {
  whisper.update(whisperConfig(validationError))
})

const numberExample = (async () => {
  await whisper.create(whisperConfig(undefined) as NewWhisper)
})

numberExample();
import { React, ReactWhisper } from "@oliveai/ldk"

const NumberExample: React.FunctionComponent<Object> = () => { 
  const [numberValue, setNumberValue] = React.useState(0);
  const [validationError, setValidationError] = React.useState("");
  return (
    <oh-whisper label='Number input' onClose={ () => {}}>
      <oh-number
        label="Number 0-5"
        max={5}
        min={0}
        step={0}
        disabled={false}
        tooltip="Input a number 1 through 5"
        validationError={validationError}
        value={numberValue}
        onChange={(error, value) => {
          setNumberValue(value);
          if (value < 0) {
            setValidationError("Number can't be less than 0!");
          } else if ( value > 5) {
            setValidationError("Number can't be greater than 5!");
          } else if (value === null) {
            setValidationError("Input must be a number!");
          } else {
            setValidationError("");
          }
          
        }}
      />
    </oh-whisper>
  )
}

ReactWhisper.renderNewWhisper(<NumberExample />);
Intro whisper
Error validation whisper