aboutsummaryrefslogtreecommitdiffstats
path: root/src/react/Input.js
diff options
context:
space:
mode:
authorMichael Lando <ml636r@att.com>2018-05-21 20:19:48 +0000
committerGerrit Code Review <gerrit@onap.org>2018-05-21 20:19:48 +0000
commit05b37297177e8a342668c15e5d6f738b51f7aedd (patch)
treee236c96df52a13f935292db8aa73e84d0c41ad8a /src/react/Input.js
parent884dfb789593d2a3cc319047ab1f0215778aec9f (diff)
parent1994c98063c27a41797dec01f2ca9fcbe33ceab0 (diff)
Merge "init commit onap ui"2.0.0-ONAPbeijing2.0.0-ONAP
Diffstat (limited to 'src/react/Input.js')
-rw-r--r--src/react/Input.js88
1 files changed, 88 insertions, 0 deletions
diff --git a/src/react/Input.js b/src/react/Input.js
new file mode 100644
index 0000000..5760637
--- /dev/null
+++ b/src/react/Input.js
@@ -0,0 +1,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;