@cimpress/react-components/dist/esm/docs/components/phone/phone.js

React components to support the MCP styleguide

import React, { Component } from 'react';
import { Phone } from '@cimpress/react-components';
export default class PhoneDemo extends Component {
    constructor(props) {
        super(props);
        this.state = {
            e123PhoneNumber: '+1 508 832 3551 ext. 123',
            isValid: true,
        };
        this.onChange = this.onChange.bind(this);
    }
    onChange(phonePayload) {
        const { number, isValid } = phonePayload || {};
        this.setState({
            e123PhoneNumber: number,
            isValid,
        });
    }
    render() {
        return (React.createElement("div", null,
            React.createElement("p", null,
                "Phone number is ",
                this.state.isValid ? 'valid' : 'not valid'),
            React.createElement("p", null, "Country list"),
            React.createElement(Phone, { onChange: this.onChange, initialValue: this.state.e123PhoneNumber, triggerChangeOnMount: true, countrySelectMenuStyle: {
                    minWidth: '450px', // prevent text wrapping of select options
                }, 
                // Optional
                countryGroups: {
                    'Frequently Used': ['us', 'fr', 'GB'],
                    All: '*',
                } })));
    }
}
//# sourceMappingURL=phone.js.map