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
|
import React from 'react';
import PropTypes from 'prop-types';
import SVGIcon from './SVGIcon.js';
class Input extends React.Component {
render() {
let {className, disabled, errorMessage, readOnly, label, name, value, type, placeholder, isRequired} = this.props;
let dataTestId = this.props['data-test-id'];
let inputClasses = `sdc-input__input ${errorMessage ? 'error' : ''} ${readOnly ? 'view-only' : ''}`;
let labelClasses = `sdc-input__label ${readOnly ? 'view-only' : ''} ${isRequired ? 'required' : ''}`;
return (
<div className={`sdc-input ${className || ''}`}>
<label className={labelClasses} htmlFor={name}>{label}</label>
<input className={inputClasses}
disabled={disabled}
readOnly={readOnly}
type={type}
id={name}
name={name}
value={this.props.value}
placeholder={placeholder}
data-test-id={dataTestId}
onBlur={(e) => this.onBlur(e)}
onKeyDown={(e) => this.onKeyDown(e)}
onChange={(e) => this.onChange(e)}/>
{ errorMessage && <div className="sdc-label__error">
<SVGIcon
label={errorMessage}
labelPosition='right'
color='negative'
name='exclamationTriangleFull' />
</div>}
</div>
);
}
onChange(e) {
let {onChange, readOnly, disabled} = this.props;
if (onChange && !readOnly && !disabled) {
onChange(e.target.value);
}
}
onBlur(e) {
let {onBlur, readOnly} = this.props;
if (!readOnly && onBlur) {
onBlur(e);
}
}
onKeyDown(e) {
let {onKeyDown, readOnly} = this.props;
if (!readOnly && onKeyDown) {
onKeyDown(e);
}
}
getValue() {
return this.props.value;
}
}
Input.propTypes = {
name: PropTypes.string,
value: PropTypes.string,
type: PropTypes.oneOf(['text', 'number']),
placeholder : PropTypes.string,
onChange: PropTypes.func,
onBlur: PropTypes.func,
onKeyDown: PropTypes.func,
errorMessage: PropTypes.string,
readOnly: PropTypes.bool,
isRequired: PropTypes.bool,
disabled: PropTypes.bool,
label: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
className: PropTypes.string
};
Input.defaultProps = {
type: 'text',
readOnly: false,
isRequired: false,
disabled: false
};
export default Input;
|
