Telephone

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
React
1
import { whisper } from '@oliveai/ldk';
2
import { 
3
  NewWhisper, 
4
  UpdateWhisper, 
5
  Whisper, 
6
  WhisperComponentType 
7
} from "@oliveai/ldk/dist/whisper"
8
​
9
const validateTelephone = (telephone: string) => {
10
  const regExpLetters = /[a-zA-Z]/g
11
  const regExpNumbers = /\d/
12
  let [ areaCode, fristPartOfPhoneNumber, lastPartOfPhoneNumber] = telephone.split('-')
13
​
14
  if (regExpLetters.test(telephone) ){
15
​
16
    return [ 'ERROR', 'Input can not contain letter']
17
  } else if (areaCode && !regExpNumbers.test(areaCode) ){
18
​
19
    return [ 'ERROR", "Input must be Numbers']
20
  } else if (fristPartOfPhoneNumber && !regExpNumbers.test(fristPartOfPhoneNumber) ){
21
​
22
    return [ 'ERROR', 'Input must be Numbers']
23
  } else if (lastPartOfPhoneNumber && !regExpNumbers.test(lastPartOfPhoneNumber) ){
24
​
25
    return [ 'ERROR', 'Input must be Numbers']
26
  } else {
27
​
28
    return [ 'UPDATE', '']
29
  }
30
​
31
}
32
​
33
const inputToPhoneNumber = (telephone: string) => {
34
  let phoneNumber = telephone.split('-').join('')
35
  if (phoneNumber.length > 3) {
36
    phoneNumber = [phoneNumber.slice(0, 3), '-', phoneNumber.slice(3)].join('')
37
  }
38
  if (phoneNumber.length > 7) {
39
    phoneNumber = [phoneNumber.slice(0, 7), '-', phoneNumber.slice(7)].join('')
40
  }
41
  return phoneNumber
42
}
43
​
44
​
45
const telephoneExampleConfig = ( (value: string, validationError: string): NewWhisper | UpdateWhisper => {
46
  return {
47
    label: 'Telephone Example',
48
    components: [
49
      {
50
        type: WhisperComponentType.Telephone,
51
        label: 'Telephone',
52
        tooltip: 'Password Must be at least 8 characters and include letters and numbers',
53
        validationError: validationError,
54
        value: value,
55
        onChange: (error: Error, number: string, whisper: Whisper) => {
56
          if (error) {
57
            console.debug(error)
58
          }
59
​
60
          if (validateTelephone(number)[0] === "ERROR" || number.length > 12) {
61
            whisper.update(telephoneExampleConfig(value, validateTelephone(number)[1]))
62
​
63
          } else {
64
            whisper.update(telephoneExampleConfig(inputToPhoneNumber(number), validateTelephone(number)[1]))
65
          }
66
        }
67
​
68
      }
69
    ]
70
  }
71
})
72
​
73
const newTelephoneExampleConfig = (async () => {
74
  await whisper.create(telephoneExampleConfig('', '') as NewWhisper);
75
})
76
​
77
newTelephoneExampleConfig();
Copied!
1
import { React, ReactWhisper } from "@oliveai/ldk";
2
​
3
const validateTelephone = (telephone: string) => {
4
  const regExpLetters = /[a-zA-Z]/g;
5
  const regExpNumbers = /\d/;
6
  let [ areaCode, fristPartOfPhoneNumber, lastPartOfPhoneNumber] = telephone.split('-');
7
​
8
  if (regExpLetters.test(telephone) ){
9
​
10
    return [ 'ERROR', 'Input can not contain letter'];
11
  } else if (areaCode && !regExpNumbers.test(areaCode) ){
12
​
13
    return [ 'ERROR", "Input must be Numbers'];
14
  } else if (fristPartOfPhoneNumber && !regExpNumbers.test(fristPartOfPhoneNumber) ){
15
​
16
    return [ 'ERROR', 'Input must be Numbers'];
17
  } else if (lastPartOfPhoneNumber && !regExpNumbers.test(lastPartOfPhoneNumber) ){
18
​
19
    return [ 'ERROR', 'Input must be Numbers'];
20
  } else {
21
​
22
    return [ 'UPDATE', ''];
23
  }
24
​
25
}
26
​
27
const inputToPhoneNumber = (telephone: string) => {
28
  let phoneNumber = telephone.split('-').join('');
29
  if (phoneNumber.length > 3) {
30
    phoneNumber = [phoneNumber.slice(0, 3), '-', phoneNumber.slice(3)].join('');
31
  }
32
  if (phoneNumber.length > 7) {
33
    phoneNumber = [phoneNumber.slice(0, 7), '-', phoneNumber.slice(7)].join('');
34
  }
35
  return phoneNumber;
36
}
37
​
38
const TelephoneExample: React.FunctionComponent<Object> = () => { 
39
  
40
  const [ validationError, setValidationError ] = React.useState<string>()
41
  const [ value, setValue ] = React.useState('');
42
  const [ validTelephone, setValidTelephone ] = React.useState('');
43
​
44
  return (
45
    <oh-whisper label='Telephone Example' onClose={ () => {}}>
46
      <oh-telephone
47
        label='Telephone'
48
        tooltip='Input telephone number'
49
        validationError={validationError}
50
        value={value}
51
        onChange={(error, number) => {
52
          if (error) {
53
            console.debug(error)
54
          }
55
          setValidationError(validateTelephone(number)[1])
56
          if (validateTelephone(number)[0] === "ERROR" || inputToPhoneNumber(number).length > 12) {
57
            console.log("Set Value")
58
            console.log(validTelephone)
59
            // clears value and set validate one
60
            setValue('')
61
            setValue(validTelephone)
62
          } else {
63
            console.log("Set Value")
64
            console.log(inputToPhoneNumber(number))
65
            setValue(inputToPhoneNumber(number))
66
            setValidTelephone(inputToPhoneNumber(number))
67
          }
68
        }}
69
      />
70
    </oh-whisper>
71
  )
72
}
73
​
74
ReactWhisper.renderNewWhisper(<TelephoneExample />);
75
​
Copied!
Whisper Components - Previous
Text Input
Next - Whisper Components
Typography
Last modified 1mo ago
Copy link
Contents
Examples