zhongrj
2025-11-25 b89962006164a462404b79a738bee8cbb6d7fe7e
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
import React from 'react';
import PropTypes from 'prop-types';
 
const IonFieldComponent = ({
    name,
    value,
    label,
    help,
    type = "text",
    showIcon = true,
    error,
    touched,
    onChange,
    onBlur,
    ...props
}) => {
    const isError = error && touched;
    const isCheckbox = type === "checkbox";
    const ControlComponent = isCheckbox ? "input" : (type === "textarea" || type === "select") ? type : "input";
 
    return (
        <div className={`form-group${isError ? ' has-error' : ''}`} style={{ marginLeft: 0, marginRight: 0 }}>
            {label && !isCheckbox && <label htmlFor={name} className="control-label">{label}</label>}
            <ControlComponent
                id={name}
                name={name}
                className={isCheckbox ? "" : "form-control"}
                type={type}
                value={isCheckbox ? undefined : value}
                checked={isCheckbox ? value : undefined}
                onChange={onChange}
                onBlur={onBlur}
                {...props}
            />
            {label && isCheckbox && <label htmlFor={name} className="control-label">{label}</label>}
            {isError && <span className="help-block">{error}</span>}
            {help && !isError && <span className="help-block">{help}</span>}
            {isError && showIcon && <span className="glyphicon glyphicon-remove form-control-feedback"></span>}
        </div>
    );
};
 
IonFieldComponent.propTypes = {
    name: PropTypes.string.isRequired,
    value: PropTypes.any,
    label: PropTypes.string,
    help: PropTypes.string,
    type: PropTypes.string,
    showIcon: PropTypes.bool,
    error: PropTypes.string,
    touched: PropTypes.bool,
    onChange: PropTypes.func.isRequired,
    onBlur: PropTypes.func.isRequired
};
 
class IonField extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            value: props.type === "checkbox" ? props.checked : props.value || '',
            touched: false,
            error: ''
        };
    }
 
    handleChange = (e) => {
        const { type, checked, value } = e.target;
        const newValue = type === "checkbox" ? checked : value;
        this.setState({ value: newValue }, () => {
            if (this.props.onChange) {
                this.props.onChange(e);
            }
        });
    };
 
    handleBlur = (e) => {
        this.setState({ touched: true }, () => {
            if (this.props.onBlur) {
                this.props.onBlur(e);
            }
        });
    };
 
    render() {
        const { name, label, help, type, showIcon, validate, ...props } = this.props;
        const { value, touched, error } = this.state;
 
        let validationError = error;
        if (validate) {
            validationError = validate(value);
        }
 
        return (
            <IonFieldComponent
                name={name}
                value={value}
                label={label}
                help={help}
                type={type}
                showIcon={showIcon}
                error={validationError}
                touched={touched}
                onChange={this.handleChange}
                onBlur={this.handleBlur}
                {...props}
            />
        );
    }
}
 
IonField.propTypes = {
    name: PropTypes.string.isRequired,
    label: PropTypes.string,
    help: PropTypes.string,
    type: PropTypes.string,
    showIcon: PropTypes.bool,
    validate: PropTypes.func,
    onChange: PropTypes.func,
    onBlur: PropTypes.func
};
 
export { IonFieldComponent };
export default IonField;