NonTabularSection.js
6.3 KB
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
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
import React,{PropTypes} from 'react';
import ReactDOM from 'react-dom';
import cx from 'classnames';
import s from './form.scss';
import {Row, Col,Form} from 'antd';
import TextField from './TextField';
import MobileField from './MobileField';
import LookupField from './LookupField';
import DateField from './DateField';
import DecimalField from './DecimalField';
import OrgField from './OrgField';
import PositionField from './PositionField';
const FormItem = Form.Item;
class NonTabularSection extends React.Component {
constructor(props) {
super(props);
this.state={
};
}
static propTypes = {
nonTabularSection:PropTypes.array,
fields:PropTypes.object,
readOnly:PropTypes.bool
}
static defaultProps={
readOnly:false
}
componentDidMount(){
}
render(){
const self=this;
const {nonTabularSection,fields={},readOnly,employee}=this.props;
if(readOnly){
return(
<div style={{margin:'20px auto',float:'left',width:'100%'}}>
{nonTabularSection.map((field,i)=>{
const {display_name,options='{}',name,type}=field;
return(
<Col sm={12} key={i}>
{/*<TextField options={fieldOptions} field={fields[name]} name={name} label={display_name}></TextField>*/}
<FormItem
label={display_name}
labelCol={{ span: 6 }}
wrapperCol={{span:14 }}
required={options.is_required} >
{employee[name]}
</FormItem>
</Col>
);
})}
</div>
)
}else{
return(
<div style={{margin:'20px auto',float:'left',width:'100%'}}>
{nonTabularSection.map((field,i)=>{
const {display_name,options='{}',name,type}=field;
const fieldOptions=JSON.parse(options);
switch(type) {
case 'text':
return(
<Col sm={12} key={i}>
<TextField options={fieldOptions} field={fields[name]} name={name} label={display_name}></TextField>
</Col>
);
case 'mobile':
return (
<Col sm={12} key={i}>
<MobileField options={fieldOptions} field={fields[name]} name={name} label={display_name}></MobileField>
</Col>
);
case 'lookup':
const fieldName=fields[name+'_ID'].name;
if(fieldName=='organization_ID')
return (
<Col sm={12} key={i}>
<OrgField options={fieldOptions} field={fields[name+'_ID']} name={name} label={display_name}></OrgField>
</Col>
);
else if(fieldName=='position_ID'){
return (
<Col sm={12} key={i}>
<PositionField options={fieldOptions} field={fields[name+'_ID']} name={name} label={display_name}></PositionField>
</Col>
);
}
case 'email':
return (
<Col sm={12} key={i}>
<TextField options={fieldOptions} field={fields[name]} name={name} label={display_name}></TextField>
</Col>
);
case 'date':
return (
<Col sm={12} key={i}>
<DateField options={fieldOptions} field={fields[name]} name={name} label={display_name}></DateField>
</Col>
);
case 'datetime':
return (
<Col sm={12} key={i}>
<DateField options={fieldOptions} field={fields[name]} name={name} label={display_name}></DateField>
</Col>
);
case 'dropdown':
return (
<Col sm={12} key={i}>
<TextField options={fieldOptions} field={fields[name]} name={name} label={display_name}></TextField>
</Col>
);
case 'number':
return (
<Col sm={12} key={i}>
<TextField options={fieldOptions} field={fields[name]} name={name} label={display_name}></TextField>
</Col>
);
case 'decimal':
return (
<Col sm={12} key={i}>
<DecimalField options={fieldOptions} field={fields[name]} name={name} label={display_name}></DecimalField>
</Col>
);
default:
return (
<Col sm={12} key={i}>
<TextField options={fieldOptions} field={fields[name]} name={name} label={display_name}></TextField>
</Col>
);
}
})}
</div>
)
}
}
}
export default NonTabularSection;