React-admin: [Feature Proposal] a PhoneField for a good presentation of phone numbers

[thomas-cleany]

Hi !

I've wrote a field for phone numbers which displays it as a <a href="tel:" /> link.

If the number is from the phone locale it'll be formatted like a national number, if not international formatting will be set. The default phone locale is 'FR' (french) but it can be changed by setting a prop (see the example below).

It's based on the phone lib of halt-hammerzeit based itself on the _"Google Android's famous libphonenumber library"_
For more information about the lib : https://github.com/halt-hammerzeit/libphonenumber-js

Example :

<PhoneField source="personal_phone" />
renders a french number as national:
<a href="tel:[phone]">06 23 45 67 89</a> => 06 23 45 67 89
and an US number as international:
<a href="tel:[phone]">[phone]</a> => [phone]

<PhoneField source="personal_phone" locale="US" />
// renders a french number as international:
<a href="tel:[phone]">[phone]</a> => [phone]
and an US number as national:
<a href="tel:[phone]">[phone]</a> => [phone]

So what do you guys think, is this something you might be interested in adding to AOR?

[djhi]

That's great! It's very specific though and I remember libphonenumber to be quite heavy. Would you mind publishing it as an add-on ?

[djhi]

And make a documentation pull request?

[thomas-cleany]

Thank's !

Ok then I'll do that.

[alanpoulain]

I've done a PhoneInput, if it can be useful for someone.
Since there is no add-on yet, maybe I will do it later (for field and input).

import React from 'react'
import { addField } from 'react-admin'
import { withStyles, createStyles } from '@material-ui/core'
import MuiPhoneNumber from 'material-ui-phone-number'

const styles = createStyles({
  telephone: {
    marginTop: 16
  }
})

const TelephoneInput = ({ input: { value, onChange, onFocus, onBlur }, label, meta: { error, touched }, classes }) => (
  <div className={classes.telephone}>
    <MuiPhoneNumber
      defaultCountry={'fr'}
      value={value}
      onChange={onChange}
      onFocus={onFocus}
      onBlur={onBlur}
      label={label}
      error={!!(touched && error)}
      helperText={touched && error}
    />
  </div>
)

export default addField(withStyles(styles)(TelephoneInput))

[fzaninotto]

@alanpoulain I encourage you to publish it as a standalone package, and to open a pull request here to add a link to your package in the Ecosystem documentation.

Note: material-ui-phone-number looks nice, but it's 104kB minified according to bundlephobia. I'd only use it if really necessary.