-
Notifications
You must be signed in to change notification settings - Fork 10
/
LargeProfileForm.js
70 lines (69 loc) · 2.3 KB
/
LargeProfileForm.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
import React from 'react';
import { Box } from 'grommet';
import { TextInputField, EmailInputField, TextAreaField, SelectField, validators } from 'grommet-controls';
import CardForm from '../forms/CardForm';
export default () => (
<CardForm
object={{
company: 'Assassins inc.',
username: 'jwick',
email: 'jwick@assasins.com',
first_name: 'John',
last_name: 'Wick',
address: '4066 Sunflower str',
city: 'Cupertino',
zip_code: '95350',
country: 'USA',
bio: `
Legendary assassin retired from his violent career after marrying the love of his life.
Her sudden death leaves John in deep mourning and when sadistic mobster Iosef Tarasov and his thugs
steal John's prized car and kill the puppy that was a last gift from his wife,
John unleashes the remorseless killing machine within and seeks vengeance.
`,
}}
title='Profile'
submitLabel='Save profile'
>
<Box direction='row' gap='medium'>
<Box basis='1/3'>
<TextInputField label='Company' name='company' />
</Box>
<Box basis='1/3'>
<TextInputField label='User name' name='username' validation={[validators.required()]} />
</Box>
<Box basis='1/3'>
<EmailInputField label='Email' name='email' validation={[validators.required(), validators.email()]} />
</Box>
</Box>
<Box direction='row' gap='medium'>
<Box basis='1/2'>
<TextInputField label='First name' name='first_name' />
</Box>
<Box basis='1/2'>
<TextInputField label='Last name' name='last_name' />
</Box>
</Box>
<TextInputField label='Address' name='address' />
<Box direction='row' gap='medium'>
<Box basis='1/3'>
<TextInputField label='City' name='city' validation={[validators.required()]} />
</Box>
<Box basis='1/3'>
<TextInputField
label='Zip code'
name='zip_code'
validation={[validators.required(), validators.numeric(), validators.minLength(5)]}
/>
</Box>
<Box basis='1/3'>
<SelectField
label='Country'
name='country'
options={['USA', 'England', 'France']}
validation={[validators.required()]}
/>
</Box>
</Box>
<TextAreaField rows='6' label='Short bio' name='bio' />
</CardForm>
);