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.		''

Examples

Telephone example

TypeScript

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();

React

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 />);