Number
Number input
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 |
Intro whisper
Error validation whisper
TypeScript
React
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 />);
Last modified 1yr ago