Telephone
The Telephone Input component provides a way to receive text-based feedback from the end-users.
Name | Type | Description | Required | Default |
|---|---|---|---|---|
disabled | boolean | true disables input | false | |
label | string | Text that sits inside of the input and floats above the cursor in the input on focus. | null | |
onBlur | function | Executes the provided function when the user removes focus from the input. | null | |
onChange | function | Executes the provided function when the user alters the value of the input. | | |
onFocus | function | Executes the provided function when the user focuses into the input. | null | |
tooltip | string | Text that appears when hovering over the input. | null | |
validationError | string | When not '' or undefined, outlines the input in red and renders the provided text in red beneath the input. | null | |
value | string | State value associated with the input. | '' |
Telephone example
TypeScript
React
import { whisper } from '@oliveai/ldk';
import {
NewWhisper,
UpdateWhisper,
Whisper,
WhisperComponentType
} from "@oliveai/ldk/dist/whisper"
const validateTelephone = (telephone: string) => {
const regExpLetters = /[a-zA-Z]/g
const regExpNumbers = /\d/
let [ areaCode, fristPartOfPhoneNumber, lastPartOfPhoneNumber] = telephone.split('-')
if (regExpLetters.test(telephone) ){
return [ 'ERROR', 'Input can not contain letter']
} else if (areaCode && !regExpNumbers.test(areaCode) ){
return [ 'ERROR", "Input must be Numbers']
} else if (fristPartOfPhoneNumber && !regExpNumbers.test(fristPartOfPhoneNumber) ){
return [ 'ERROR', 'Input must be Numbers']
} else if (lastPartOfPhoneNumber && !regExpNumbers.test(lastPartOfPhoneNumber) ){
return [ 'ERROR', 'Input must be Numbers']
} else {
return [ 'UPDATE', '']
}
}
const inputToPhoneNumber = (telephone: string) => {
let phoneNumber = telephone.split('-').join('')
if (phoneNumber.length > 3) {
phoneNumber = [phoneNumber.slice(0, 3), '-', phoneNumber.slice(3)].join('')
}
if (phoneNumber.length > 7) {
phoneNumber = [phoneNumber.slice(0, 7), '-', phoneNumber.slice(7)].join('')
}
return phoneNumber
}
const telephoneExampleConfig = ( (value: string, validationError: string): NewWhisper | UpdateWhisper => {
return {
label: 'Telephone Example',
components: [
{
type: WhisperComponentType.Telephone,
label: 'Telephone',
tooltip: 'Password Must be at least 8 characters and include letters and numbers',
validationError: validationError,
value: value,
onChange: (error: Error, number: string, whisper: Whisper) => {
if (error) {
console.debug(error)
}
if (validateTelephone(number)[0] === "ERROR" || number.length > 12) {
whisper.update(telephoneExampleConfig(value, validateTelephone(number)[1]))
} else {
whisper.update(telephoneExampleConfig(inputToPhoneNumber(number), validateTelephone(number)[1]))
}
}
}
]
}
})
const newTelephoneExampleConfig = (async () => {
await whisper.create(telephoneExampleConfig('', '') as NewWhisper);
})
newTelephoneExampleConfig();
import { React, ReactWhisper } from "@oliveai/ldk";
const validateTelephone = (telephone: string) => {
const regExpLetters = /[a-zA-Z]/g;
const regExpNumbers = /\d/;
let [ areaCode, fristPartOfPhoneNumber, lastPartOfPhoneNumber] = telephone.split('-');
if (regExpLetters.test(telephone) ){
return [ 'ERROR', 'Input can not contain letter'];
} else if (areaCode && !regExpNumbers.test(areaCode) ){
return [ 'ERROR", "Input must be Numbers'];
} else if (fristPartOfPhoneNumber && !regExpNumbers.test(fristPartOfPhoneNumber) ){
return [ 'ERROR', 'Input must be Numbers'];
} else if (lastPartOfPhoneNumber && !regExpNumbers.test(lastPartOfPhoneNumber) ){
return [ 'ERROR', 'Input must be Numbers'];
} else {
return [ 'UPDATE', ''];
}
}
const inputToPhoneNumber = (telephone: string) => {
let phoneNumber = telephone.split('-').join('');
if (phoneNumber.length > 3) {
phoneNumber = [phoneNumber.slice(0, 3), '-', phoneNumber.slice(3)].join('');
}
if (phoneNumber.length > 7) {
phoneNumber = [phoneNumber.slice(0, 7), '-', phoneNumber.slice(7)].join('');
}
return phoneNumber;
}
const TelephoneExample: React.FunctionComponent<Object> = () => {
const [ validationError, setValidationError ] = React.useState<string>()
const [ value, setValue ] = React.useState('');
const [ validTelephone, setValidTelephone ] = React.useState('');
return (
<oh-whisper label='Telephone Example' onClose={ () => {}}>
<oh-telephone
label='Telephone'
tooltip='Input telephone number'
validationError={validationError}
value={value}
onChange={(error, number) => {
if (error) {
console.debug(error)
}
setValidationError(validateTelephone(number)[1])
if (validateTelephone(number)[0] === "ERROR" || inputToPhoneNumber(number).length > 12) {
console.log("Set Value")
console.log(validTelephone)
// clears value and set validate one
setValue('')
setValue(validTelephone)
} else {
console.log("Set Value")
console.log(inputToPhoneNumber(number))
setValue(inputToPhoneNumber(number))
setValidTelephone(inputToPhoneNumber(number))
}
}}
/>
</oh-whisper>
)
}
ReactWhisper.renderNewWhisper(<TelephoneExample />);
Last modified 6mo ago