{"size": 2254, "ext": "js", "max_stars_repo_path": "client-app/src/container/contact/new/ContactNewFormPhone.js", "max_stars_repo_name": "code-en-design/econobis", "max_stars_repo_stars_event_min_datetime": "2018-10-16T19:45:01.000Z", "max_stars_repo_stars_event_max_datetime": "2021-03-23T11:53:38.000Z", "max_issues_repo_path": "client-app/src/container/contact/new/ContactNewFormPhone.js", "max_issues_repo_name": "code-en-design/econobis", "max_issues_repo_issues_event_min_datetime": "2020-03-19T08:17:46.000Z", "max_issues_repo_issues_event_max_datetime": "2021-12-24T09:10:24.000Z", "max_forks_repo_path": "client-app/src/container/contact/new/ContactNewFormPhone.js", "max_forks_repo_name": "code-en-design/econobis", "max_forks_repo_forks_event_min_datetime": "2020-02-28T10:31:00.000Z", "max_forks_repo_forks_event_max_datetime": "2020-12-09T13:30:59.000Z"}
{"max_stars_count": 4, "max_issues_count": 11, "max_forks_count": 3, "avg_line_length": 35.21875, "max_line_length": 73, "alphanum_fraction": 0.4445430346}
import React, { Component } from 'react';
import { connect } from 'react-redux';
import InputText from '../../../components/form/InputText';
import InputSelect from '../../../components/form/InputSelect';
import Panel from '../../../components/panel/Panel';
import PanelBody from '../../../components/panel/PanelBody';
import InputToggle from '../../../components/form/InputToggle';

class ContactNewFormPhone extends Component {
    constructor(props) {
        super(props);
    }

    render() {
        const { number, typeId, primary } = this.props.phoneNumber;

        return (
            <Panel className={'panel-grey'}>
                <PanelBody>
                    <div className="row">
                        <InputText
                            label={'Nummer'}
                            size={'col-sm-6'}
                            name={'number'}
                            value={number}
                            onChangeAction={this.props.handleInputChange}
                            required={'required'}
                            error={this.props.errors.number}
                        />

                        <InputSelect
                            label={'Type'}
                            size={'col-sm-6'}
                            name={'typeId'}
                            options={this.props.phoneNumberTypes}
                            value={typeId}
                            onChangeAction={this.props.handleInputChange}
                            required={'required'}
                            error={this.props.errors.typeId}
                        />
                    </div>

                    <div className="row">
                        <InputToggle
                            label={'Primair telefoonnummer'}
                            name={'primary'}
                            value={primary}
                            onChangeAction={this.props.handleInputChange}
                        />
                    </div>
                </PanelBody>
            </Panel>
        );
    }
}

const mapStateToProps = state => {
    return {
        phoneNumberTypes: state.systemData.phoneNumberTypes,
    };
};

export default connect(mapStateToProps)(ContactNewFormPhone);
