react-scooter/lib/components/Input/Input.js

React components for the Scooter CSS framework

'use strict';

Object.defineProperty(exports, "__esModule", {
	value: true
});

var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _propTypes = require('prop-types');

var _propTypes2 = _interopRequireDefault(_propTypes);

var _classnames = require('classnames');

var _classnames2 = _interopRequireDefault(_classnames);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

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; }

var Input = function Input(_ref) {
	var Inpt = _ref.as,
	    label = _ref.label,
	    error = _ref.error,
	    disabled = _ref.disabled,
	    valid = _ref.valid,
	    invalid = _ref.invalid,
	    type = _ref.type,
	    value = _ref.value,
	    placeholder = _ref.placeholder,
	    className = _ref.className,
	    children = _ref.children,
	    pattern = _ref.pattern,
	    props = _objectWithoutProperties(_ref, ['as', 'label', 'error', 'disabled', 'valid', 'invalid', 'type', 'value', 'placeholder', 'className', 'children', 'pattern']);

	var classes = (0, _classnames2.default)('c-label', {}, className);

	var inputClasses = (0, _classnames2.default)('c-input', {
		'is-valid': valid,
		'is-invalid': invalid
	}, className);

	var inptInner = _react2.default.createElement(
		'input',
		_extends({ className: inputClasses }, props, { placeholder: placeholder, type: type, value: value, pattern: pattern, disabled: disabled }),
		children
	);

	if (type === "textarea") {
		inptInner = _react2.default.createElement(
			'textarea',
			_extends({ className: inputClasses }, props, { placeholder: placeholder, value: value, pattern: pattern, disabled: disabled }),
			children
		);
	} else if (type === "select") {
		inptInner = _react2.default.createElement(
			'select',
			_extends({ className: inputClasses }, props, { value: value, disabled: disabled }),
			children
		);
	}

	return _react2.default.createElement(
		Inpt,
		{ className: classes },
		label,
		error ? _react2.default.createElement(
			'span',
			{ className: 'u-font-error' },
			' ',
			error
		) : "",
		inptInner
	);
};

Input.displayName = 'Input';

Input.defaultProps = {
	as: 'label'
};

Input.propTypes = {
	as: _propTypes2.default.node,
	className: _propTypes2.default.string,
	label: _propTypes2.default.string,
	error: _propTypes2.default.string,
	disabled: _propTypes2.default.bool,
	valid: _propTypes2.default.bool,
	invalid: _propTypes2.default.bool,
	type: _propTypes2.default.string,
	pattern: _propTypes2.default.string,
	value: _propTypes2.default.string,
	placholder: _propTypes2.default.string

};

exports.default = Input;