97 lines
3.1 KiB
JavaScript
97 lines
3.1 KiB
JavaScript
|
import React from 'react';
|
||
|
|
import PropTypes from 'prop-types';
|
||
|
|
import { Field, reduxForm } from 'redux-form';
|
||
|
|
import { Trans, withNamespaces } from 'react-i18next';
|
||
|
|
import flow from 'lodash/flow';
|
||
|
|
|
||
|
|
import { renderField, ipv4, mac, required } from '../../../../helpers/form';
|
||
|
|
|
||
|
|
const Form = (props) => {
|
||
|
|
const {
|
||
|
|
t,
|
||
|
|
handleSubmit,
|
||
|
|
reset,
|
||
|
|
pristine,
|
||
|
|
submitting,
|
||
|
|
toggleLeaseModal,
|
||
|
|
processingAdding,
|
||
|
|
} = props;
|
||
|
|
|
||
|
|
return (
|
||
|
|
<form onSubmit={handleSubmit}>
|
||
|
|
<div className="modal-body">
|
||
|
|
<div className="form__group">
|
||
|
|
<Field
|
||
|
|
id="mac"
|
||
|
|
name="mac"
|
||
|
|
component={renderField}
|
||
|
|
type="text"
|
||
|
|
className="form-control"
|
||
|
|
placeholder={t('form_enter_mac')}
|
||
|
|
validate={[required, mac]}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
<div className="form__group">
|
||
|
|
<Field
|
||
|
|
id="ip"
|
||
|
|
name="ip"
|
||
|
|
component={renderField}
|
||
|
|
type="text"
|
||
|
|
className="form-control"
|
||
|
|
placeholder={t('form_enter_ip')}
|
||
|
|
validate={[required, ipv4]}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
<div className="form__group">
|
||
|
|
<Field
|
||
|
|
id="hostname"
|
||
|
|
name="hostname"
|
||
|
|
component={renderField}
|
||
|
|
type="text"
|
||
|
|
className="form-control"
|
||
|
|
placeholder={t('form_enter_hostname')}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="modal-footer">
|
||
|
|
<div className="btn-list">
|
||
|
|
<button
|
||
|
|
type="button"
|
||
|
|
className="btn btn-secondary btn-standard"
|
||
|
|
disabled={submitting}
|
||
|
|
onClick={() => {
|
||
|
|
reset();
|
||
|
|
toggleLeaseModal();
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
<Trans>cancel_btn</Trans>
|
||
|
|
</button>
|
||
|
|
<button
|
||
|
|
type="submit"
|
||
|
|
className="btn btn-success btn-standard"
|
||
|
|
disabled={submitting || pristine || processingAdding}
|
||
|
|
>
|
||
|
|
<Trans>save_btn</Trans>
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</form>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
Form.propTypes = {
|
||
|
|
pristine: PropTypes.bool.isRequired,
|
||
|
|
handleSubmit: PropTypes.func.isRequired,
|
||
|
|
reset: PropTypes.func.isRequired,
|
||
|
|
submitting: PropTypes.bool.isRequired,
|
||
|
|
toggleLeaseModal: PropTypes.func.isRequired,
|
||
|
|
processingAdding: PropTypes.bool.isRequired,
|
||
|
|
t: PropTypes.func.isRequired,
|
||
|
|
};
|
||
|
|
|
||
|
|
export default flow([
|
||
|
|
withNamespaces(),
|
||
|
|
reduxForm({ form: 'leaseForm' }),
|
||
|
|
])(Form);
|