LogoLogo
Developer HubGitHubContact Us
  • Welcome!
  • Olive Helps
    • Platform
      • How Olive Helps Works
      • Installation
      • Account Creation
      • Distributing Olive Helps
    • FAQs
      • General Loop FAQs
      • Loop Development FAQs
      • Olive Helps User FAQs
      • Security / IT FAQs
    • Data Security
      • User Data
      • Antivirus and Firewalls
  • Loop Development Kit
    • Your First Loop
      • Become a Loop Author
      • Creating a Loop
      • Build Your Loop
      • Local Loop Installation
      • Restarting Local Loops
    • Troubleshooting
    • Loop Security
      • Permissions
      • Environment Permissions
    • Loop Publication
      • Loop Approval Checklist
    • Loop Analytics Library
    • Examples
  • Documentation
  • Interfaces
  • Type Alias
  • Enumerations
  • Whisper Components
    • Base Attributes
    • Autocomplete
    • Box
    • Breadcrumb
    • Button
    • Chart
    • CollapseBox
    • Grid
    • Checkbox
    • Date Time
    • Divider
    • DropZone
    • Email
    • Icon
    • List Pair
    • Link
    • Pagination
    • Number
    • Markdown
    • Message
    • Password
    • Progress
    • Radio
    • Rating
    • RichTextEditor
    • Section Title
    • Select
    • Text Input
    • Telephone
    • Typography
  • APTITUDES
    • What are Aptitudes?
    • Browser
    • Clipboard
    • Config
    • Cursor
      • Screen Scaling Behavior
    • Document
    • Filesystem
    • Keyboard
    • Network
    • Process
    • Screen
    • Search
      • Index
    • System
    • UI
      • Loop UI Handlers
    • User
      • JWT
    • Vault
    • Whisper
      • Whisper Updates
      • JSX Whispers
    • Window
      • Screen Scaling Behavior
  • Release Notes
    • What's New
      • Olive Helps v0.55.0
      • Olive Helps v0.54.1
      • Olive Helps v0.53.1
      • Olive Helps v0.51.2
      • LDK v4.0.0
      • Olive Helps v0.50.3
      • Olive Helps v0.49.5
      • LDK v 3.18.0
      • Olive Helps v0.47.2
      • Olive Helps v0.46.2
      • LDK v 3.17.0
      • Olive Helps v0.45.4
      • Olive Helps v0.44.2
      • Olive Helps v0.43.1
      • Olive Helps v0.42.1
      • Olive Helps v0.41.4
      • Olive Helps v0.40.2
      • Olive Helps v0.39.4 & LDK v3.16.0
      • Olive Helps v0.38.8 & LDK v3.15.0
      • Olive Helps v0.36.5
      • Olive Helps v0.36.4
    • Archive
      • Olive Helps v0.36.3 & LDK v3.14.0
      • Olive Helps v0.34.4
      • LDK v3.13.0
      • Olive Helps v0.32.2 & LDK v3.12.0
      • Olive Helps v0.31.2 & LDK v3.11.0
      • Olive Helps v0.30.2 & LDK v3.10.0
      • Olive Helps v0.29.4
      • Olive Helps v0.29.3 & LDK v3.9.0
      • Olive Helps v0.28.3 & LDK v3.8.0
      • Olive Helps v0.27.7
      • Olive Helps v0.27.5
      • Olive Helps v.027.4
      • Olive Helps v0.27.2 & LDK v3.7.0
      • Olive Helps v0.25.3 & LDK v3.5.1
      • Olive Helps v0.24.6 & LDK v3.4.0
      • Olive Helps v0.23.2 & LDK v3.3.0
      • Olive Helps v0.22.3 & LDK v3.2.0
Powered by GitBook
On this page

Was this helpful?

  1. Whisper Components

Telephone

The Telephone Input component provides a way to receive text-based feedback from the end-users.

PreviousText InputNextTypography

Last updated 3 years ago

Was this helpful?

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

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