codogo-react-widgets/lib/components/input.js

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

import _objectWithoutProperties from "babel-runtime/helpers/objectWithoutProperties";
import _taggedTemplateLiteral from "babel-runtime/helpers/taggedTemplateLiteral";

var _templateObject = _taggedTemplateLiteral(["\n\tdisplay: flex;\n\tflex-direction: row;\n\tmargin: ", ";\n\t", ";\n"], ["\n\tdisplay: flex;\n\tflex-direction: row;\n\tmargin: ", ";\n\t", ";\n"]),
    _templateObject2 = _taggedTemplateLiteral(["\n\tpadding: ", ";\n\tflex: 3;\n\ttext-align: right;\n\tborder: 1px transparent;\n"], ["\n\tpadding: ", ";\n\tflex: 3;\n\ttext-align: right;\n\tborder: 1px transparent;\n"]),
    _templateObject3 = _taggedTemplateLiteral(["\n\tappearance: none;\n\tborder-radius: ", ";\n\tborder: 1px solid\n\t\t", ";\n\tbox-shadow: none;\n\tflex: 7;\n\tfont-family: inherit;\n\tfont-size: 1em;\n\tmargin: 0;\n\tpadding: ", ";\n\twidth: 100%;\n\n\t", " &:focus {\n\t\toutline: none;\n\t}\n"], ["\n\tappearance: none;\n\tborder-radius: ", ";\n\tborder: 1px solid\n\t\t", ";\n\tbox-shadow: none;\n\tflex: 7;\n\tfont-family: inherit;\n\tfont-size: 1em;\n\tmargin: 0;\n\tpadding: ", ";\n\twidth: 100%;\n\n\t", " &:focus {\n\t\toutline: none;\n\t}\n"]),
    _templateObject4 = _taggedTemplateLiteral(["\n\t", " max-height: ", "em;\n\ttext-overflow: ellipsis;\n"], ["\n\t", " max-height: ", "em;\n\ttext-overflow: ellipsis;\n"]),
    _templateObject5 = _taggedTemplateLiteral(["\n\t", " box-sizing: content-box;\n\t", ";\n"], ["\n\t", " box-sizing: content-box;\n\t", ";\n"]);

import React from "react";
import PropTypes from "prop-types";
import styled, { css } from "styled-components";
import TextareaAutosize from "react-autosize-textarea";

import { getBorderRadius, getColor, getMargin2, getPadding2, getPaddingVertical } from "../getters";

// --------------------------------------------------

var getInputMaxHeight = R.pipe(getPaddingVertical, R.multiply(2), R.add(1.2));

// --------------------------------------------------

var OuterWrapper = styled.div(_templateObject, getMargin2, function (props) {
	return props.plain ? "margin: 0;" : "";
});

var Label = styled.div(_templateObject2, getPadding2);

var inputStyle = css(_templateObject3, getBorderRadius, R.ifElse(R.prop("valid"), getColor("gray"), getColor("red")), getPadding2, function (props) {
	return props.plain ? "\n\t\tborder-radius: 0;\n\t\tborder: 0;\n\t\tpadding: 0;\n\t" : "";
});

var SingleLineInput = styled.input(_templateObject4, inputStyle, getInputMaxHeight);

var MultiLineInput = styled(TextareaAutosize)(_templateObject5, inputStyle, function (_ref) {
	var initialSize = _ref.initialSize;
	return initialSize ? "min-height: " + initialSize + "em;" : "";
});

// --------------------------------------------------

var Input = function Input(props) {
	var label = props.label,
	    multiline = props.multiline,
	    rest = _objectWithoutProperties(props, ["label", "multiline"]);

	return React.createElement(
		OuterWrapper,
		{ plain: rest.plain },
		label && React.createElement(
			Label,
			null,
			label
		),
		multiline ? React.createElement(MultiLineInput, rest) : React.createElement(SingleLineInput, rest)
	);
};

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

Input.defaultProps = {
	valid: true
};

export default Input;