Number

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
React
1
import { whisper } from "@oliveai/ldk"
2
import { NewWhisper, UpdateWhisper, Whisper, WhisperComponentType } from "@oliveai/ldk/dist/whisper"
3
​
4
const whisperConfig = (validationError: string): NewWhisper | UpdateWhisper => {
5
  return {
6
    label: 'Number input',
7
    components: [
8
      {
9
        type: WhisperComponentType.Number,
10
        label: "Number 0-5",
11
        max: 5,
12
        min: 0,
13
        step: 1,
14
        disabled: false,
15
        tooltip: "Input a number 0 through 5",
16
        validationError: validationError,
17
        onChange: async (error: Error, params: Number, whisper: Whisper)=>{
18
          if (error) return console.debug(error)
19
          await validateNumber(params, whisper)
20
        }
21
      }
22
    ]
23
  }
24
}
25
​
26
const validateNumber = (async (number: Number, whisper: Whisper) => {
27
  if (number < 0) {
28
    await updateNumberWhisper(whisper, "Number can't be less than 0!")
29
  } else if (number > 5) {
30
    await updateNumberWhisper(whisper, "Number can't be greater than 5!")
31
  } else if (number === null) {
32
    await updateNumberWhisper(whisper, "Input must be a number!")
33
  } else {
34
    await updateNumberWhisper(whisper, undefined)
35
  }
36
})
37
​
38
const updateNumberWhisper = (async(whisper: Whisper, validationError: string) => {
39
  whisper.update(whisperConfig(validationError))
40
})
41
​
42
const numberExample = (async () => {
43
  await whisper.create(whisperConfig(undefined) as NewWhisper)
44
})
45
​
46
numberExample();
47
​
Copied!
1
import { React, ReactWhisper } from "@oliveai/ldk"
2
​
3
const NumberExample: React.FunctionComponent<Object> = () => { 
4
  const [numberValue, setNumberValue] = React.useState(0);
5
  const [validationError, setValidationError] = React.useState("");
6
  return (
7
    <oh-whisper label='Number input' onClose={ () => {}}>
8
      <oh-number
9
        label="Number 0-5"
10
        max={5}
11
        min={0}
12
        step={0}
13
        disabled={false}
14
        tooltip="Input a number 1 through 5"
15
        validationError={validationError}
16
        value={numberValue}
17
        onChange={(error, value) => {
18
          setNumberValue(value);
19
          if (value < 0) {
20
            setValidationError("Number can't be less than 0!");
21
          } else if ( value > 5) {
22
            setValidationError("Number can't be greater than 5!");
23
          } else if (value === null) {
24
            setValidationError("Input must be a number!");
25
          } else {
26
            setValidationError("");
27
          }
28
          
29
        }}
30
      />
31
    </oh-whisper>
32
  )
33
}
34
​
35
ReactWhisper.renderNewWhisper(<NumberExample />);
36
​
Copied!

Whisper Components - Previous

Pagination

Next - Whisper Components

Markdown

Last modified 1mo ago

Copy link

Contents

Props

Examples