/
App.js
74 lines (69 loc) · 1.81 KB
/
App.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
import React, { Component } from 'react'
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider'
import ChargesTable from './ChargesTable'
const BananaPie = () => <div style={{ paddingTop: '5px' }}>Banana Pie</div>
const sampleData = {
chargesConfig: [
{
name: 'chocolateDonut',
primaryText: 'Chocolate Donut',
secondaryText: 'with some sparkels',
disabled: false,
value: 76.1,
},
{
name: 'pizza',
primaryText: 'Spinach Pizza Slice',
secondaryText: 'Med',
disabled: false,
value: -10,
},
{
name: 'veggieBurger',
primaryText: 'Veggie Burger',
secondaryText: 'Extra Spice',
disabled: false,
value: 38.32,
},
{
name: 'bananaPie',
primaryText: <BananaPie />,
disabled: false,
value: 7,
},
],
}
/* eslint-disable react/prefer-stateless-function */
class App extends Component {
render() {
return (
<MuiThemeProvider>
<div style={{ padding: '75px 0px' }}>
<ChargesTable
chargesConfig={sampleData.chargesConfig}
currencyCode="$"
formatValue={(value) => value}
listContainerStyle={{
margin: 'auto',
minWidth: '350px',
maxWidth: '500px',
minHeight: '100px',
}}
hideDivider={false}
totalLabel="Final Total"
hideTotal={false}
mask="#.00"
precision={2}
onChargeChange={(newChargesConfig) => {
console.group('Charge Changed')
console.log(newChargesConfig)
console.groupEnd('Charge Changed')
}}
/>
</div>
</MuiThemeProvider>
)
}
}
/* eslint-enable react/prefer-stateless-function */
export default App