Number

Number input

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

Intro whisper

Error validation whisper

TypeScript

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

React

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