@massds/mayflower-react
Version:
React versions of Mayflower design system UI components
37 lines • 1.36 kB
JavaScript
/**
* PhoneNumber module.
* @module @massds/mayflower-react/PhoneNumber
* @requires module:@massds/mayflower-assets/scss/01-atoms/phone-number
*/
import React from "react";
import PropTypes from "prop-types";
import parse from "html-react-parser";
const formatPhoneNumber = number => {
const clean = number.replace(/\D/g, '');
const match = clean.match(/^(1|)?(\d{3})(\d{3})(\d{4})$/);
if (match) {
const intlCode = match[1] ? '+1 ' : '';
return [intlCode, '(', match[2], ') ', match[3], '-', match[4]].join('');
}
return null;
};
const PhoneNumber = props => {
const number = props.number,
details = props.details;
const display = formatPhoneNumber(number);
return /*#__PURE__*/React.createElement("span", {
className: "ma__phone-number"
}, /*#__PURE__*/React.createElement("a", {
href: "tel:" + number,
className: "ma__phone-number__number"
}, display), details && /*#__PURE__*/React.createElement("p", {
className: "ma__contact__details"
}, parse(details)));
};
PhoneNumber.propTypes = process.env.NODE_ENV !== "production" ? {
/** The phone number. Expect the following +16174659898 or 6174659898 */
number: PropTypes.string.isRequired,
/** Details around contacting the provided phone number */
details: PropTypes.oneOfType([PropTypes.string, PropTypes.object])
} : {};
export default PhoneNumber;