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;