/
ShopForm.js
119 lines (105 loc) · 3.51 KB
/
ShopForm.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
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
import React from "react";
import {HollowDotsSpinner} from "react-epic-spinners";
import {ControlLabel, FormGroup, Glyphicon} from "react-bootstrap";
import {
KitButton,
KitForm,
KitFormControl,
KitHelpBlock,
KitSlidingWell,
KitToggleButton,
KitToggleButtonGroup,
FlexChild
} from "./theme";
import {CONTRACTS, CURRENCIES} from "../constants";
import FormControl from "react-bootstrap/es/FormControl";
export default function ShopForm(props) {
const {
drizzle,
selectedAccount,
name,
description,
fiat,
createNewShop,
nameChanged,
descChanged,
fiatChanged,
creatingShop
} = props;
const SUCCESS = 'success';
const ERROR = 'error';
const handleSubmit = () => {
createNewShop(drizzle.contracts[CONTRACTS.STOCK_ROOM], selectedAccount, name, description, fiat);
};
const getNameValidationState = () => {
return (name.length === 0) ? null : (name.length >= 3) ? SUCCESS : ERROR;
};
const getDescValidationState = () => {
return (description.length === 0) ? null : (description.length >= 5) ? SUCCESS : ERROR;
};
const isSubmitDisabled = () => {
return (
getNameValidationState() !== SUCCESS ||
getDescValidationState() !== SUCCESS
);
};
const handleNameChange = e => {
nameChanged(e.target.value);
};
const handleDescChange = e => {
descChanged(e.target.value);
};
const handleFiatChange = selection => {
fiatChanged(selection);
};
return <FlexChild><KitSlidingWell><KitForm>
<h2>Create a New Shop</h2>
<FormGroup
controlId='nameField'
validationState={getNameValidationState()}>
<KitFormControl
disabled={creatingShop}
type="text"
bsSize='large'
placeholder="Shop Name"
onChange={handleNameChange}
/>
<FormControl.Feedback />
{(getNameValidationState() === ERROR)
? <KitHelpBlock>Enter at least 3 characters</KitHelpBlock>
: null}
</FormGroup>
<FormGroup
controlId='descField'
validationState={getDescValidationState()}>
<KitFormControl
disabled={creatingShop}
componentClass="textarea"
bsSize='large'
placeholder="Description"
onChange={handleDescChange}
/>
<FormControl.Feedback />
{(getDescValidationState() === ERROR)
? <KitHelpBlock>Enter at least 5 characters</KitHelpBlock>
: null}
</FormGroup>
<FormGroup>
<ControlLabel>Fiat Currency for Prices</ControlLabel>
<br/>
<KitToggleButtonGroup
type="radio"
name="shopCurrency"
onChange={handleFiatChange}
value={fiat}>
{Object.values(CURRENCIES).map(sym => <KitToggleButton key={sym.symbol} value={sym.symbol}><Glyphicon glyph={sym.icon} /> - {sym.symbol}</KitToggleButton>)}
</KitToggleButtonGroup>
</FormGroup>
{creatingShop
? <HollowDotsSpinner color='black'/>
: <KitButton
bsSize='large'
disabled={isSubmitDisabled()}
onClick={handleSubmit}>Create</KitButton>}
</KitForm></KitSlidingWell></FlexChild>;
};