ghg-react
Version:
A library of React components for my own use.
77 lines (63 loc) • 2.52 kB
JavaScript
function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
import React from 'react';
import PropTypes from 'prop-types';
import Label from '../Label';
/** Text input with integrated label to enforce consistency in layout, error display, label placement, and required field marker. */
var TextInput = function TextInput(_ref) {
var htmlId = _ref.htmlId,
name = _ref.name,
label = _ref.label,
_ref$type = _ref.type,
type = _ref$type === undefined ? "text" : _ref$type,
_ref$required = _ref.required,
required = _ref$required === undefined ? false : _ref$required,
onChange = _ref.onChange,
placeholder = _ref.placeholder,
value = _ref.value,
error = _ref.error,
children = _ref.children,
props = _objectWithoutProperties(_ref, ['htmlId', 'name', 'label', 'type', 'required', 'onChange', 'placeholder', 'value', 'error', 'children']);
return React.createElement(
'div',
{ className: 'textinput' },
React.createElement(Label, { htmlFor: htmlId, label: label, required: required }),
React.createElement('input', Object.assign({
id: htmlId,
type: type,
name: name,
placeholder: placeholder,
value: value,
onChange: onChange,
className: error && 'textinput__input--state-error'
}, props)),
children,
error && React.createElement(
'div',
{ className: 'textinput__error' },
error
)
);
};
TextInput.propTypes = {
/** Unique HTML ID. Used for tying label to HTML input. Handy hook for automated testing. */
htmlId: PropTypes.string.isRequired,
/** Input name. Recommend setting this to match object's property so a single change handler can be used. */
name: PropTypes.string.isRequired,
/** Input label */
label: PropTypes.string.isRequired,
/** Input type */
type: PropTypes.oneOf(['text', 'number', 'password']),
/** Mark label with asterisk if set to true */
required: PropTypes.bool,
/** Function to call onChange */
onChange: PropTypes.func.isRequired,
/** Placeholder to display when empty */
placeholder: PropTypes.string,
/** Value */
value: PropTypes.any,
/** String to display when error occurs */
error: PropTypes.string,
/** Child component to display next to the input */
children: PropTypes.node
};
export default TextInput;