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
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!
Copy link