@brizy/ui
Version:
React elements in Brizy style
33 lines (32 loc) • 2.33 kB
JavaScript
import React from "react";
import { classNames } from "../classNamesFn";
import { Tooltip } from "../Tooltip";
import { Icon } from "../Icon";
import { QuestionCircle } from "../icons";
import { isString } from "../utils";
import { BRZ_PREFIX } from "../constants";
export const Item = props => {
const { label, labelHorizontal, helper, htmlFor, description, errorMessage, bottomSpace, size = "middle", labelTitle, children, } = props;
const className = classNames()("input-item", { [`input-item--${size}`]: size }, { "input-item-label--horizontal": labelHorizontal });
const labelClassName = classNames()("input-item-label", {
"input-item-label__simple": isString(label),
});
const styles = {
paddingBottom: bottomSpace,
};
const helperComponent = helper ? (React.createElement("div", { className: `${BRZ_PREFIX}-input-item-helper` },
label && React.createElement("span", { className: `${BRZ_PREFIX}-input-item-helper__text` }, label),
React.createElement(Tooltip, { title: helper, rounded: false },
React.createElement(Icon, { color: "gray-light", source: QuestionCircle })))) : (label);
return (React.createElement("div", { className: className, style: styles },
(label || helper) && labelHorizontal !== "right" && (React.createElement("div", { className: labelClassName },
React.createElement("label", { title: labelTitle, htmlFor: htmlFor, className: `${BRZ_PREFIX}-input-item-base` }, helperComponent))),
React.createElement("div", { className: `${BRZ_PREFIX}-input-item-item-control` },
React.createElement("div", { className: `${BRZ_PREFIX}-input-item-item-control-input-content` }, children)),
(label || helper) && labelHorizontal === "right" && (React.createElement("div", { className: labelClassName },
React.createElement("label", { title: labelTitle, htmlFor: htmlFor, className: `${BRZ_PREFIX}-input-item-base` }, helperComponent))),
description !== undefined && (React.createElement("div", { className: `${BRZ_PREFIX}-input-item-description` },
React.createElement("p", null, description))),
errorMessage && (React.createElement("div", { className: `${BRZ_PREFIX}-input-item-error` },
React.createElement("p", null, errorMessage)))));
};