80 lines
2.4 KiB
React
80 lines
2.4 KiB
React
import React, { Component, PropTypes } from 'react';
|
|
|
|
import Button from 'components/buttons/Button';
|
|
import Form from 'components/forms/Form';
|
|
import formFieldInterface from 'interfaces/form_field';
|
|
import InputField from 'components/forms/fields/InputField';
|
|
|
|
const baseClass = 'edit-user-form';
|
|
const fieldNames = ['email', 'name', 'position', 'username'];
|
|
|
|
class EditUserForm extends Component {
|
|
static propTypes = {
|
|
onCancel: PropTypes.func,
|
|
handleSubmit: PropTypes.func,
|
|
fields: PropTypes.shape({
|
|
email: formFieldInterface.isRequired,
|
|
name: formFieldInterface.isRequired,
|
|
position: formFieldInterface.isRequired,
|
|
username: formFieldInterface.isRequired,
|
|
}).isRequired,
|
|
};
|
|
|
|
render () {
|
|
const { fields, handleSubmit, onCancel } = this.props;
|
|
|
|
return (
|
|
<form className={baseClass} onSubmit={handleSubmit}>
|
|
<InputField
|
|
{...fields.name}
|
|
label="Name"
|
|
labelClassName={`${baseClass}__label`}
|
|
inputWrapperClass={`${baseClass}__input-wrap ${baseClass}__input-wrap--first`}
|
|
inputClassName={`${baseClass}__input`}
|
|
/>
|
|
<InputField
|
|
{...fields.username}
|
|
label="Username"
|
|
labelClassName={`${baseClass}__label`}
|
|
inputWrapperClass={`${baseClass}__input-wrap`}
|
|
inputClassName={`${baseClass}__input ${baseClass}__input--username`}
|
|
/>
|
|
<InputField
|
|
{...fields.position}
|
|
label="Position"
|
|
labelClassName={`${baseClass}__label`}
|
|
inputWrapperClass={`${baseClass}__input-wrap`}
|
|
inputClassName={`${baseClass}__input`}
|
|
/>
|
|
<InputField
|
|
{...fields.email}
|
|
inputWrapperClass={`${baseClass}__input-wrap`}
|
|
label="Email"
|
|
labelClassName={`${baseClass}__label`}
|
|
inputClassName={`${baseClass}__input ${baseClass}__input--email`}
|
|
/>
|
|
<div className={`${baseClass}__btn-wrap`}>
|
|
<Button
|
|
className={`${baseClass}__form-btn ${baseClass}__form-btn--submit`}
|
|
type="submit"
|
|
variant="brand"
|
|
>
|
|
Submit
|
|
</Button>
|
|
<Button
|
|
className={`${baseClass}__form-btn`}
|
|
onClick={onCancel}
|
|
variant="inverse"
|
|
>
|
|
Cancel
|
|
</Button>
|
|
</div>
|
|
</form>
|
|
);
|
|
}
|
|
}
|
|
|
|
export default Form(EditUserForm, {
|
|
fields: fieldNames,
|
|
});
|