1 | import React, { Component } from 'react';
|
2 | import PropTypes from 'prop-types';
|
3 | import { Col } from 'bee-layout';
|
4 | import Lable from 'bee-label';
|
5 |
|
6 |
|
7 | const propTypes = {
|
8 | clsfix:PropTypes.string,
|
9 | lable:PropTypes.string,
|
10 | required:PropTypes.bool,
|
11 | errorMsg:PropTypes.node
|
12 | };
|
13 | const defaultProps = {
|
14 | clsfix:'ac-form-layout'
|
15 | };
|
16 |
|
17 | class FormItem extends Component {
|
18 | constructor(props){
|
19 | super(props);
|
20 | this.state={
|
21 | showError:false
|
22 | }
|
23 | }
|
24 |
|
25 |
|
26 | getChild=()=>{
|
27 | let { label , children, required, clsfix, errorMsg } = this.props;
|
28 | let ary = [];
|
29 | ary.push(<Lable>{required?<span className={`${clsfix}-mast`}>*</span>:''}{label}</Lable>)
|
30 | if(children.length>1){
|
31 | React.Children.map(children,child=>{
|
32 | errorMsg?ary.push(
|
33 | <div className={`${clsfix}-item-out`} title={errorMsg}>
|
34 | <span className={`${clsfix}-item-error-msg`}>
|
35 | <span className={`${clsfix}-item-error-msg-text`}>{errorMsg}</span>
|
36 | </span>
|
37 | {child}
|
38 | </div>
|
39 | ):ary.push(child)
|
40 | })
|
41 | }else{
|
42 | errorMsg?ary.push(
|
43 | <div className={`${clsfix}-item-out`} title={errorMsg}>
|
44 | <span className={`${clsfix}-item-error-msg`}>
|
45 | <span className={`${clsfix}-item-error-msg-text`}>{errorMsg}</span>
|
46 | </span>
|
47 | {children}
|
48 | </div>
|
49 | ):ary.push(children)
|
50 | }
|
51 | return ary;
|
52 | }
|
53 | render(){
|
54 | let { clsfix,children,className, errorMsg, ...other } = this.props;
|
55 | let clsses = `${clsfix}-item`;
|
56 | if(className)clsses+=' '+className;
|
57 | if(errorMsg)clsses+=' error';
|
58 | return(
|
59 | <Col className={clsses} { ...other }>
|
60 | {this.getChild()}
|
61 | </Col>
|
62 | )
|
63 | }
|
64 | };
|
65 | FormItem.propTypes = propTypes;
|
66 | FormItem.defaultProps = defaultProps;
|
67 | export default FormItem; |
\ | No newline at end of file |