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