Basic UI elements in place

website/src/Users/UserForm.js

@@ -1,23 +1,22 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import { autoBind } from 'auto-bind2'
+import { reactAutoBind } from 'auto-bind2'
 import { regExpPattern } from 'regexp-pattern'
-import { ValidatedEmailIcon } from './ValidatedEmailIcon'
 import { Constants, api } from '../helpers'
-import { Validator, ValidatedInput, ValidatedButton, ValidatedCheckbox } from '../Validated'
-import { Column } from 'ui'
+import { Column, BoundInput, BoundButton, BoundCheckbox, BoundEmailIcon } from 'ui'
+import { FormBinder } from 'react-form-binder'
 
 export class UserForm extends React.Component {
   static propTypes = {
     user: PropTypes.object,
     onSave: PropTypes.func,
     onRemove: PropTypes.func,
-    onModifiedChanged: PropTypes.func,
+    onAnyModified: PropTypes.func,
     onChangeEmail: PropTypes.func,
     onResendEmail: PropTypes.func
   }
 
-  static validations = {
+  static bindings = {
     email: {
       isValid: (r, v) => (regExpPattern.email.test(v)),
       isDisabled: (r) => (!!r._id)
@@ -35,45 +34,6 @@ export class UserForm extends React.Component {
     lastName: {
       isValid: (r, v) => (v !== '')
     },
-    zip: {
-      isValid: (r, v) => (v === '' || regExpPattern.zip.test(v))
-    },
-    state: {
-      isValid: (r, v) => (v === '' || regExpPattern.state.test(v))
-    },
-    city: {
-      isValid: true
-    },
-    address1: {
-      isValid: true
-    },
-    address2: {
-      isValid: true
-    },
-    homePhone: {
-      isValid: (r, v) => (v === '' || regExpPattern.phone.test(v))
-    },
-    cellPhone: {
-      isValid: (r, v) => (v === '' || regExpPattern.phone.test(v))
-    },
-    dateOfBirth: {
-      isValid: true
-    },
-    dateOfHire: {
-      isValid: true
-    },
-    ssn: {
-      isValid: (r, v) => (v === '' || regExpPattern.ssn.test(v))
-    },
-    numHouseholds: {
-      isValid: true
-    },
-    t12: {
-      isValid: true
-    },
-    aum: {
-      isValid: true
-    },
     role: {
       isValid: (r, v) => (v !== ''),
       isDisabled: (r) => (api.loggedInUser._id === r._id)
@@ -94,43 +54,40 @@ export class UserForm extends React.Component {
       nonValue: true,
       isDisabled: (r) => (!r.anyModified && !r.allValid)
     },
-    'broker-fields': {
-      nonValue: true,
-      isVisible: (r, v) => (r.getField('role').value === 'broker')
-    },
-    'standard-fields': {
-      nonValue: true,
-      isVisible: (r, v) => (r.getField('role').value !== 'broker')
-    }
   }
 
   constructor(props) {
     super(props)
-    autoBind(this, (name) => (name.startsWith('handle')))
+    reactAutoBind(this)
     this.state = {
-      validator: new Validator(this.props.user, UserForm.validations, this.props.onModifiedChanged)
+      binder: new FormBinder(this.props.user, UserForm.bindings, this.props.onAnyModified)
     }
   }
 
   componentWillReceiveProps(nextProps) {
     if (nextProps.user !== this.props.user) {
       this.setState({
-        validator: new Validator(nextProps.user, UserForm.validations, nextProps.onModifiedChanged)
+        binder: new FormBinder(nextProps.user, UserForm.bindings, nextProps.onAnyModified)
       })
     }
   }
 
   handleSubmit(e) {
     e.preventDefault()
-    let obj = this.state.validator.getValues()
+    let obj = this.state.binder.getValues()
     if (obj) {
       this.props.onSave(obj)
     }
   }
 
   handleReset() {
-    this.setState({ validator: new Validator(this.props.user, UserForm.validations, this.props.onModifiedChanged) })
-    this.props.onModifiedChanged(false)
+    const { user, onAnyModified } = this.props
+
+    this.setState({ binder: new FormBinder(user, UserForm.bindings, onAnyModified) })
+
+    if (onAnyModified) {
+      onAnyModified(false)
+    }
   }
 
   handleChangeEmail() {
@@ -146,37 +103,37 @@ export class UserForm extends React.Component {
       <form onSubmit={this.handleSubmit}>
         <Column>
           <Column.Item>
-            <ValidatedCheckbox label={'Deighton Access & Security Level'} width={6} selection
+            <BoundCheckbox label={'Deighton Access & Security Level'} width={6} selection
               options={Constants.accessLevels} name='role' message='The user role and security level'
-              placeholder='' validator={this.state.validator} />
+              placeholder='' binder={this.state.binder} />
           </Column.Item>
           <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='Must be a valid email address. Required.'
-              validator={this.state.validator} />
-            <ValidatedEmailIcon name='emailValidated' validator={this.state.validator} width={4}
+            <BoundInput label='Email' name='email' width={8} message='Must be a valid email address. Required.'
+              binder={this.state.binder} />
+            <BoundEmailIcon name='emailValidated' binder={this.state.binder} width={4}
               onClick={this.handleResendEmail} />
           </Column.Item>
           <Column.Item>
-            <ValidatedButton width={4} size='medium' content='Change Email' label='&nbsp;' name='changeEmail'
-              validator={this.state.validator} onClick={this.handleChangeEmail} />
+            <BoundButton width={4} size='medium' content='Change Email' label='&nbsp;' name='changeEmail'
+              binder={this.state.binder} onClick={this.handleChangeEmail} />
           </Column.Item>
 
           <Column.Item>
-            <ValidatedButton color='red' width={4} size='medium' content='Remove' label='&nbsp;' name='remove'
-              validator={this.state.validator} onClick={this.props.onRemove} />
-            <ValidatedButton width={4} size='medium' content='Reset' label='&nbsp;' name='reset'
-              validator={this.state.validator} onClick={this.handleReset} />
-            <ValidatedButton primary submit width={4} size='medium'
-              content={this.state.validator._id ? 'Save' : 'Add'} label='&nbsp;' name='submit'
-              validator={this.state.validator} />
+            <BoundButton color='red' width={4} size='medium' content='Remove' label='&nbsp;' name='remove'
+              binder={this.state.binder} onClick={this.props.onRemove} />
+            <BoundButton width={4} size='medium' content='Reset' label='&nbsp;' name='reset'
+              binder={this.state.binder} onClick={this.handleReset} />
+            <BoundButton primary submit width={4} size='medium'
+              content={this.state.binder._id ? 'Save' : 'Add'} label='&nbsp;' name='submit'
+              binder={this.state.binder} />
           </Column.Item>
         </Column>
       </form>