Removed Semantic UI React

This commit is contained in:
John Lyon-Smith
2018-02-25 17:51:52 -08:00
parent c60bfcedf8
commit 0571196a7f
68 changed files with 981 additions and 1343 deletions

View File

@@ -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='&nbsp;' 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='&nbsp;' 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='&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} />
<Form.Field width={this.state.validator._id ? 8 : 12} />
<ValidatedButton primary submit width={4} size='medium'
content={this.state.validator._id ? 'Save' : 'Add'} label='&nbsp;' name='submit'
validator={this.state.validator} />
</Form.Group>
</Grid.Column>
</Grid>
</Form>
<StackLayout.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} />
</StackLayout.Item>
</StackLayout>
</form>
)
}
}