summaryrefslogtreecommitdiffstats
path: root/src/react/Input.js
diff options
context:
space:
mode:
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;