Removed Semantic UI React
This commit is contained in:
@@ -2,11 +2,10 @@ import React from 'react'
|
||||
import PropTypes from 'prop-types'
|
||||
import { autoBind } from 'auto-bind2'
|
||||
import { regExpPattern } from 'regexp-pattern'
|
||||
import { Grid, Form } from 'semantic-ui-react'
|
||||
import './UserForm.scss'
|
||||
import { ValidatedEmailIcon } from './ValidatedEmailIcon'
|
||||
import { Constants, api } from '../helpers'
|
||||
import { Validator, ValidatedInput, ValidatedButton, ValidatedDropdown, ValidatedDatePicker, ValidatedContainer } from '../Validated'
|
||||
import { Validator, ValidatedInput, ValidatedButton, ValidatedCheckbox } from '../Validated'
|
||||
import { StackLayout } from '../ui'
|
||||
|
||||
export class UserForm extends React.Component {
|
||||
static propTypes = {
|
||||
@@ -144,87 +143,43 @@ export class UserForm extends React.Component {
|
||||
|
||||
render() {
|
||||
return (
|
||||
<Form className='user-form' onSubmit={this.handleSubmit}>
|
||||
<Grid stackable>
|
||||
<Grid.Column width={16}>
|
||||
<Form.Group>
|
||||
<ValidatedDropdown 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} />
|
||||
</Form.Group>
|
||||
<Form.Group>
|
||||
<ValidatedInput label='First Name' name='firstName'
|
||||
width={8} validator={this.state.validator} />
|
||||
<ValidatedInput label='Last Name' name='lastName'
|
||||
width={8} validator={this.state.validator} />
|
||||
</Form.Group>
|
||||
<Form.Group>
|
||||
<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}
|
||||
onClick={this.handleResendEmail} />
|
||||
<ValidatedButton width={4} size='medium' content='Change Email' label=' ' name='changeEmail'
|
||||
validator={this.state.validator} onClick={this.handleChangeEmail} />
|
||||
</Form.Group>
|
||||
<form onSubmit={this.handleSubmit}>
|
||||
<StackLayout>
|
||||
<StackLayout.Item>
|
||||
<ValidatedCheckbox 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} />
|
||||
</StackLayout.Item>
|
||||
<StackLayout.Item>
|
||||
<ValidatedInput label='First Name' name='firstName'
|
||||
width={8} validator={this.state.validator} />
|
||||
</StackLayout.Item>
|
||||
<StackLayout.Item>
|
||||
<ValidatedInput label='Last Name' name='lastName'
|
||||
width={8} validator={this.state.validator} />
|
||||
</StackLayout.Item>
|
||||
<StackLayout.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}
|
||||
onClick={this.handleResendEmail} />
|
||||
</StackLayout.Item>
|
||||
<StackLayout.Item>
|
||||
<ValidatedButton width={4} size='medium' content='Change Email' label=' ' name='changeEmail'
|
||||
validator={this.state.validator} onClick={this.handleChangeEmail} />
|
||||
</StackLayout.Item>
|
||||
|
||||
<ValidatedContainer name='standard-fields' validator={this.state.validator}>
|
||||
<Form.Group>
|
||||
<ValidatedInput label='Zip' width={4} name='zip' message='5 Character U.S. Zip Code. Optional.'
|
||||
position='bottom center' validator={this.state.validator} />
|
||||
<ValidatedDropdown label='State' name='state' width={4}
|
||||
placeholder='Select State' options={Constants.stateOptions} validator={this.state.validator} searchable />
|
||||
<ValidatedInput label='City' width={8} type='text' name='city' message='U.S. City. Optional.'
|
||||
validator={this.state.validator} />
|
||||
</Form.Group>
|
||||
|
||||
<Form.Group>
|
||||
<ValidatedInput label='Address' width={12} name='address1'
|
||||
validator={this.state.validator} message='Primary Street Address. Optional.' />
|
||||
<ValidatedInput label='Apt. #' width={4} name='address2'
|
||||
validator={this.state.validator} message='Apartment/Unit number. Optional.' />
|
||||
</Form.Group>
|
||||
|
||||
<Form.Group>
|
||||
<ValidatedInput label='Home Phone' width={8} name='homePhone'
|
||||
validator={this.state.validator} message='A valid U.S. phone number. IE: (555)123-4567. Optional.' />
|
||||
<ValidatedInput label='Cell Phone' width={8} name='cellPhone'
|
||||
validator={this.state.validator} message='A valid U.S. phone number. IE: (555)123-4567. Optional.' />
|
||||
</Form.Group>
|
||||
|
||||
<Form.Group>
|
||||
<ValidatedDatePicker label='Date of Birth' width={5} name='dateOfBirth'
|
||||
validator={this.state.validator} />
|
||||
<ValidatedInput label='SSN' width={6} name='ssn'
|
||||
validator={this.state.validator} message='U.S. Social Security Number. IE: 123-45-6789' />
|
||||
<ValidatedDatePicker label='Hire Date' width={5} name='dateOfHire'
|
||||
validator={this.state.validator} />
|
||||
</Form.Group>
|
||||
</ValidatedContainer>
|
||||
|
||||
<ValidatedContainer name='broker-fields' validator={this.state.validator}>
|
||||
<Form.Group>
|
||||
<ValidatedInput label='# Households' width={5} name='numHouseholds'
|
||||
message='Number of households in this brokers account' validator={this.state.validator} />
|
||||
<ValidatedInput label='T-12' width={6} name='t12' message='This brokers T-12 info.'
|
||||
validator={this.state.validator} />
|
||||
<ValidatedInput label='AUM' width={5} name='aum'
|
||||
message='This brokers AUM information.' validator={this.state.validator} />
|
||||
</Form.Group>
|
||||
</ValidatedContainer>
|
||||
|
||||
<Form.Group>
|
||||
<ValidatedButton color='red' width={4} size='medium' content='Remove' label=' ' name='remove'
|
||||
validator={this.state.validator} onClick={this.props.onRemove} />
|
||||
<ValidatedButton width={4} size='medium' content='Reset' label=' ' name='reset'
|
||||
validator={this.state.validator} onClick={this.handleReset} />
|
||||
<Form.Field width={this.state.validator._id ? 8 : 12} />
|
||||
<ValidatedButton primary submit width={4} size='medium'
|
||||
content={this.state.validator._id ? 'Save' : 'Add'} label=' ' name='submit'
|
||||
validator={this.state.validator} />
|
||||
</Form.Group>
|
||||
</Grid.Column>
|
||||
</Grid>
|
||||
</Form>
|
||||
<StackLayout.Item>
|
||||
<ValidatedButton color='red' width={4} size='medium' content='Remove' label=' ' name='remove'
|
||||
validator={this.state.validator} onClick={this.props.onRemove} />
|
||||
<ValidatedButton width={4} size='medium' content='Reset' label=' ' name='reset'
|
||||
validator={this.state.validator} onClick={this.handleReset} />
|
||||
<ValidatedButton primary submit width={4} size='medium'
|
||||
content={this.state.validator._id ? 'Save' : 'Add'} label=' ' name='submit'
|
||||
validator={this.state.validator} />
|
||||
</StackLayout.Item>
|
||||
</StackLayout>
|
||||
</form>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user