@cap3/capitano-components/lib/molecules/FormInput/FormInput.js

# <div style="color: crimson;">ALPHA DISCLAIMER</div>

"use strict";
var __rest = (this && this.__rest) || function (s, e) {
    var t = {};
    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
        t[p] = s[p];
    if (s != null && typeof Object.getOwnPropertySymbols === "function")
        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) if (e.indexOf(p[i]) < 0)
            t[p[i]] = s[p[i]];
    return t;
};
Object.defineProperty(exports, "__esModule", { value: true });
const React = require("react");
const capitano_theme_1 = require("@cap3/capitano-theme");
const formElementHelpers_1 = require("../../atoms/basics/formElementHelpers");
const atoms_1 = require("../../atoms");
const Label_1 = require("../../atoms/Label/Label");
const ValidationMessage_1 = require("../../atoms/ValidationMessage/ValidationMessage");
const emotion_1 = require("emotion");
const iconClass = emotion_1.css({
    width: capitano_theme_1.spacingAbsolute.spx16,
    height: capitano_theme_1.spacingAbsolute.spx16,
    position: "absolute",
    right: capitano_theme_1.spacingAbsolute.spx8,
    boxSizing: "border-box",
    gridArea: "input",
    color: "currentcolor",
});
const StyledLabel = capitano_theme_1.styled(Label_1.Label)(({ labelPosition, invalid, theme, validated, hasLabel }) => {
    const leftLabel = labelPosition === "left";
    const gridTemplateAreas = leftLabel
        ? '"label input" ". message"'
        : '"label" "input" "message"';
    const validationColor = validated &&
        (invalid ? theme.colors.danger["500"] : theme.colors.success["500"]);
    return {
        color: validationColor || undefined,
        height: "auto",
        textAlign: leftLabel ? "right" : "left",
        display: "grid",
        gridTemplateAreas,
        gridColumnGap: hasLabel ? capitano_theme_1.spacingAbsolute.spx8 : 0,
        gridTemplateColumns: leftLabel ? `${hasLabel ? 76 : 0}px 1fr` : "1fr",
        alignItems: "center",
        gridTemplateRows: leftLabel
            ? `${formElementHelpers_1.formElementHeight("medium", theme)}px 14px`
            : `18px ${formElementHelpers_1.formElementHeight("medium", theme)}px 14px`,
    };
});
const StyledInput = capitano_theme_1.styled(atoms_1.Input)({
    gridArea: "input",
    color: "currentcolor",
});
const LabelText = capitano_theme_1.styled(atoms_1.EllipsisText)(({ theme }) => ({
    gridArea: "label",
    color: theme.colors.layout.M60,
}));
const StyledValidationMessage = capitano_theme_1.styled(ValidationMessage_1.ValidationMessage)({
    gridArea: "message",
    textAlign: "right",
});
exports.FormInput = (_a) => {
    var { invalid, validationMessage, label, labelPosition = "left", labelProps, inputRef, validationIcon, validated } = _a, props = __rest(_a, ["invalid", "validationMessage", "label", "labelPosition", "labelProps", "inputRef", "validationIcon", "validated"]);
    const validDefined = invalid !== undefined;
    const showValidationMessage = validDefined && validationMessage !== undefined;
    const showValidationIcon = validationIcon && validDefined;
    const ValidationIcon = invalid ? atoms_1.Icons.Close : atoms_1.Icons.Check;
    return (React.createElement(StyledLabel, Object.assign({ hasLabel: !!label, invalid: invalid, validated: validated, labelPosition: labelPosition }, labelProps),
        label !== undefined && React.createElement(LabelText, null, label),
        React.createElement(StyledInput, Object.assign({}, props, { innerRef: inputRef })),
        showValidationIcon && React.createElement(ValidationIcon, { className: iconClass }),
        showValidationMessage && (React.createElement(StyledValidationMessage, { invalid: invalid }, validationMessage))));
};
//# sourceMappingURL=FormInput.js.map