diff options
author | Michael Lando <ml636r@att.com> | 2018-05-21 20:19:48 +0000 |
---|---|---|
committer | Gerrit Code Review <gerrit@onap.org> | 2018-05-21 20:19:48 +0000 |
commit | 05b37297177e8a342668c15e5d6f738b51f7aedd (patch) | |
tree | e236c96df52a13f935292db8aa73e84d0c41ad8a /src/react/Input.js | |
parent | 884dfb789593d2a3cc319047ab1f0215778aec9f (diff) | |
parent | 1994c98063c27a41797dec01f2ca9fcbe33ceab0 (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.js | 88 |
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; |