-
Notifications
You must be signed in to change notification settings - Fork 14
/
array.jsx
117 lines (105 loc) · 3.39 KB
/
array.jsx
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
import React from 'react'
import Paper from 'material-ui/Paper'
import IconButton from 'material-ui/IconButton'
import RaisedButton from 'material-ui/RaisedButton'
import {ArrayComponent} from 'simple-react-form'
const styles = {
label: {
color: 'rgba(0,0,0,0.5)',
marginBottom: 5,
fontSize: 12
}
}
const propTypes = {
...ArrayComponent.propTypes,
parentClassName: React.PropTypes.string,
childrenClassName: React.PropTypes.string,
useSmallSpace: React.PropTypes.bool,
smallRemoveButtonTooltipPosition: React.PropTypes.string
}
const defaultProps = {
...ArrayComponent.defaultProps,
childrenClassName: '',
parentClassName: '',
useSmallSpace: false,
smallRemoveButtonTooltipPosition: 'bottom-center'
}
export default class MaterialArray extends ArrayComponent {
renderChildrenItem ({ index, children }) {
if (this.props.useSmallSpace) return this.renderChildrenSmallItem({ index, children })
return (
<div className={this.props.childrenClassName} key={`${this.props.fieldName}.${index}`}>
<Paper style={{ marginTop: 20, marginBottom: 20, padding: 20 }}>
{this.renderChildrenItemWithContext({index, children})}
<div style={{ marginTop: 10, textAlign: 'right' }}>
{this.renderRemoveButton(index)}
</div>
</Paper>
</div>
)
}
renderChildrenSmallItem ({ index, children }) {
return (
<div className={this.props.childrenClassName} key={`${this.props.fieldName}.${index}`} style={{ marginTop: 10, marginBottom: 10, display: 'flex' }}>
<div style={{ flexBasis: '90%', maxWidth: '90%' }}>
{this.renderChildrenItemWithContext({index, children})}
</div>
<div style={{ flexBasis: '10%', maxWidth: '10%', marginTop: 20, textAlign: 'right' }}>
{this.renderSmallRemoveButton(index)}
</div>
</div>
)
}
renderRemoveButton (index) {
if (this.props.disabled) return
return <RaisedButton label={this.props.removeLabel} onTouchTap={() => this.removeItem(index)}/>
}
renderSmallRemoveButton (index) {
if (this.props.disabled) return
return (
<IconButton
iconClassName='material-icons'
onTouchTap={() => this.removeItem(index)}
tooltip={this.props.removeLabel}
tooltipPosition={this.props.smallRemoveButtonTooltipPosition}
>
clear
</IconButton>
)
}
renderAddButton () {
if (!this.props.showAddButton) return
if (this.props.disabled) return
if (this.props.useSmallSpace) return this.renderSmallAddButton()
return <RaisedButton label={this.props.addLabel} onTouchTap={() => this.addItem()}/>
}
renderSmallAddButton () {
return (
<div style={{ textAlign: 'right' }}>
<IconButton
iconClassName='material-icons'
onTouchTap={() => this.addItem()}
tooltip={this.props.addLabel}
>
add
</IconButton>
</div>
)
}
render () {
return (
<div style={{ marginTop: 20 }}>
<div style={styles.label}>{this.props.label}</div>
<div style={{ color: 'red' }}>{this.props.errorMessage}</div>
<div className={this.props.parentClassName}>
{this.renderChildren()}
</div>
<div style={{ marginTop: 10 }}>
{this.renderAddButton()}
</div>
</div>
)
}
}
MaterialArray.propTypes = propTypes
MaterialArray.defaultProps = defaultProps