john/deighton-ar
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Basic UI elements in place

Browse Source
This commit is contained in:
John Lyon-Smith
2018-02-27 12:16:27 -08:00
parent 5faa4600f5
commit 73b5cf6caa
49 changed files with 525 additions and 937 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
website/src/Profile/ProfileForm.js
View File

@@ -1,8 +1,8 @@
import React from 'react'
import PropTypes from 'prop-types'
import { Column, Button } from 'ui'
import { Column, Button, BoundInput, BoundButton } from 'ui'
import { regExpPattern } from 'regexp-pattern'
import { Validator, ValidatedInput, ValidatedButton } from '../Validated'
import { FormBinder } from 'react-form-binder'
export class ProfileForm extends React.Component {
static propTypes = {
@@ -13,7 +13,7 @@ export class ProfileForm extends React.Component {
onChangeEmail: PropTypes.func
}
static validations = {
static bindings = {
email: {
isValid: (r, v) => (v !== ''),
isDisabled: (r) => (!!r._id)
@@ -68,16 +68,16 @@ export class ProfileForm extends React.Component {
this.handleSubmit = this.handleSubmit.bind(this)
this.state = {
validator: new Validator(
this.props.user, ProfileForm.validations, this.props.onModifiedChanged)
binder: new FormBinder(
this.props.user, ProfileForm.bindings, this.props.onModifiedChanged)
}
}
componentWillReceiveProps(nextProps) {
if (nextProps.user !== this.props.user) {
this.setState({
validator: new Validator(
nextProps.user, ProfileForm.validations, nextProps.onModifiedChanged)
binder: new FormBinder(
nextProps.user, ProfileForm.bindings, nextProps.onModifiedChanged)
})
}
}
@@ -85,7 +85,7 @@ export class ProfileForm extends React.Component {
handleSubmit(e) {
e.preventDefault()
let obj = this.state.validator.getValues()
let obj = this.state.binder.getValues()
if (obj && this.props.onSaved) {
this.props.onSaved(obj)
@@ -97,16 +97,16 @@ export class ProfileForm extends React.Component {
<form className='profile-form' onSubmit={this.handleSubmit}>
<Column stackable>
<Column.Item>
<ValidatedInput label='First Name' name='firstName' width={8}
validator={this.state.validator} />
<BoundInput label='First Name' name='firstName' width={8}
binder={this.state.binder} />
</Column.Item>
<Column.Item>
<ValidatedInput label='Last Name' name='lastName' width={8}
validator={this.state.validator} />
<BoundInput label='Last Name' name='lastName' width={8}
binder={this.state.binder} />
</Column.Item>
<Column.Item>
<ValidatedInput label='Email' name='email' width={8} message='Required. Must be a valid email address.'
validator={this.state.validator} />
<BoundInput label='Email' name='email' width={8} message='Required. Must be a valid email address.'
binder={this.state.binder} />
</Column.Item>
<Column.Item>
<Button fluid content={'Change Email'} label='&nbsp;'
@@ -115,8 +115,8 @@ export class ProfileForm extends React.Component {
width={4} onClick={this.props.onChangePassword} />
</Column.Item>
<Column.Item>
<ValidatedButton submit primary width={4} size='medium' content='Save' label='&nbsp;' name='save'
validator={this.state.validator} />
<BoundButton submit primary width={4} size='medium' content='Save' label='&nbsp;' name='save'
binder={this.state.binder} />
</Column.Item>
</Column>
</form>