codogo-react-widgets/dist/components/old/input.js

Provides a unified way to access the styling of commonly used widgets across different apps

"use strict";

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

var _extends2 = require("babel-runtime/helpers/extends");

var _extends3 = _interopRequireDefault(_extends2);

var _objectWithoutProperties2 = require("babel-runtime/helpers/objectWithoutProperties");

var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2);

var _taggedTemplateLiteral2 = require("babel-runtime/helpers/taggedTemplateLiteral");

var _taggedTemplateLiteral3 = _interopRequireDefault(_taggedTemplateLiteral2);

var _templateObject = (0, _taggedTemplateLiteral3.default)(["\n\t", "\n\t", "\n\t", "\n"], ["\n\t", "\n\t", "\n\t", "\n"]),
    _templateObject2 = (0, _taggedTemplateLiteral3.default)(["\n\t\n"], ["\n\t\n"]),
    _templateObject3 = (0, _taggedTemplateLiteral3.default)(["\n\tposition: relative;\n"], ["\n\tposition: relative;\n"]),
    _templateObject4 = (0, _taggedTemplateLiteral3.default)(["\n\n"], ["\n\n"]);

var _react = require("react");

var _react2 = _interopRequireDefault(_react);

var _styledComponents = require("styled-components");

var _styledComponents2 = _interopRequireDefault(_styledComponents);

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

var colorMap = function colorMap(p) {
	return {
		white: {
			color: p.theme.white,
			text: p.theme.black
		},
		black: {
			color: p.theme.black,
			text: p.theme.white
		},
		transparent: {
			color: "transparent",
			text: p.theme.white,
			border: true
		}
	};
};

var StyledInput = _styledComponents2.default.input(_templateObject, function (p) {
	return p.icon && "padding-left: " + (3 - 0.2) + "em;";
}, function (p) {
	return p.fullWidth && "width: 100%;";
}, function (p) {
	var o = colorMap(p)[p.flavor.toLowerCase()];

	return "\n\t\t\t\tbackground-color: " + o.color + ";\n\t\t\t\tcolor: " + o.text + ";\n\t\t\t\t&:placeholder {\n\t\t\t\t\tcolor: " + o.text + ";\n\t\t\t\t\topacity: 0.5;\n\t\t\t\t}\n\t\t\t\t" + (o.border && "box-shadow: inset 0 0 0 2px " + o.text + ";") + "\n\t\t\t";
});

var Input = function Input(props) {
	var name = props.name,
	    valid = props.valid,
	    required = props.required,
	    fullWidth = props.fullWidth,
	    icon = props.icon,
	    label = props.label,
	    message = props.message,
	    flavor = props.flavor,
	    style = props.style,
	    other = (0, _objectWithoutProperties3.default)(props, ["name", "valid", "required", "fullWidth", "icon", "label", "message", "flavor", "style"]);


	return _react2.default.createElement(
		OuterWrapper,
		{
			valid: valid,
			style: style
		},
		label && _react2.default.createElement(
			"label",
			null,
			label
		),
		_react2.default.createElement(
			InputWrapper,
			null,
			props.icon && _react2.default.createElement(Icon, {
				type: props.icon,
				color: colorMap(props)[props.flavor.toLowerCase()].text,
				input: true
			}),
			_react2.default.createElement(StyledInput, (0, _extends3.default)({
				name: name,
				required: required,
				flavor: flavor,
				fullWidth: fullWidth,
				icon: !!icon
			}, other))
		),
		_react2.default.createElement(
			Message,
			null,
			message
		)
	);
};

Input.propTypes = {
	flavor: _react2.default.PropTypes.oneOf(["BLACK", "WHITE", "TRANSPARENT"]),
	fullWidth: _react2.default.PropTypes.bool,
	icon: _react2.default.PropTypes.oneOf(icons),
	label: _react2.default.PropTypes.string,
	message: _react2.default.PropTypes.string,
	name: _react2.default.PropTypes.string.isRequired,
	onChange: _react2.default.PropTypes.func.isRequired,
	onBlur: _react2.default.PropTypes.func,
	placeholder: _react2.default.PropTypes.string,
	required: _react2.default.PropTypes.bool,
	type: _react2.default.PropTypes.oneOf(["EMAIL", "PASSWORD", "TEXT"]),
	valid: _react2.default.PropTypes.bool,
	value: _react2.default.PropTypes.string
};

Input.defaultProps = {
	flavor: "WHITE"
};

var OuterWrapper = _styledComponents2.default.div(_templateObject2);

var InputWrapper = _styledComponents2.default.div(_templateObject3);

var Message = _styledComponents2.default.div(_templateObject4);

exports.default = Input;

//# sourceMappingURL=input.js.map