@netdata/netdata-ui
Version:
netdata UI kit
92 lines (91 loc) • 4.25 kB
JavaScript
"use strict";
exports.__esModule = true;
exports.TextInput = void 0;
var _react = _interopRequireDefault(require("react"));
var _flex = _interopRequireDefault(require("../templates/flex"));
var _typography = require("../typography");
var _styled = require("./styled");
var _excluded = ["error"],
_excluded2 = ["error", "disabled", "iconLeft", "iconRight", "name", "onFocus", "onBlur", "className", "hint", "fieldIndicator", "placeholder", "label", "value", "inputRef", "size", "containerStyles", "inputContainerStyles", "hideErrorMessage", "errorMessageProps"];
function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
var ErrorMessage = function ErrorMessage(_ref) {
var error = _ref.error,
props = _objectWithoutPropertiesLoose(_ref, _excluded);
var errorMessage = error === true ? "invalid" : error;
return typeof errorMessage === "string" ? /*#__PURE__*/_react["default"].createElement(_typography.TextMicro, _extends({
color: "errorText"
}, props), errorMessage) : !!errorMessage && errorMessage;
};
var TextInput = exports.TextInput = function TextInput(_ref2) {
var error = _ref2.error,
disabled = _ref2.disabled,
iconLeft = _ref2.iconLeft,
iconRight = _ref2.iconRight,
name = _ref2.name,
onFocus = _ref2.onFocus,
onBlur = _ref2.onBlur,
className = _ref2.className,
hint = _ref2.hint,
fieldIndicator = _ref2.fieldIndicator,
_ref2$placeholder = _ref2.placeholder,
placeholder = _ref2$placeholder === void 0 ? "" : _ref2$placeholder,
label = _ref2.label,
value = _ref2.value,
inputRef = _ref2.inputRef,
_ref2$size = _ref2.size,
size = _ref2$size === void 0 ? "large" : _ref2$size,
containerStyles = _ref2.containerStyles,
inputContainerStyles = _ref2.inputContainerStyles,
hideErrorMessage = _ref2.hideErrorMessage,
_ref2$errorMessagePro = _ref2.errorMessageProps,
errorMessageProps = _ref2$errorMessagePro === void 0 ? {} : _ref2$errorMessagePro,
props = _objectWithoutPropertiesLoose(_ref2, _excluded2);
return /*#__PURE__*/_react["default"].createElement(_flex["default"], _extends({
gap: 0.5,
column: true,
className: className
}, containerStyles, {
as: "label"
}), typeof label === "string" ? /*#__PURE__*/_react["default"].createElement(_styled.LabelText, {
size: size
}, label) : label, /*#__PURE__*/_react["default"].createElement(_flex["default"], _extends({
position: "relative"
}, inputContainerStyles), iconLeft && /*#__PURE__*/_react["default"].createElement(_flex["default"], {
position: "absolute",
left: 1,
top: 0,
bottom: 0,
alignItems: "center"
}, iconLeft), /*#__PURE__*/_react["default"].createElement(_styled.Input, _extends({
disabled: disabled,
placeholder: placeholder,
onBlur: onBlur,
onFocus: onFocus,
name: name,
"aria-label": name,
hasIconLeft: !!iconLeft,
hasIconRight: !!iconRight,
hasIndicator: !!fieldIndicator,
type: "text",
value: value,
size: size,
ref: inputRef,
error: error,
hasValue: !!value
}, props)), (!!iconRight || !!fieldIndicator) && /*#__PURE__*/_react["default"].createElement(_flex["default"], {
position: "absolute",
right: 1,
top: 0,
bottom: 0,
alignItems: "center",
gap: 1
}, !!fieldIndicator && /*#__PURE__*/_react["default"].createElement(_typography.TextMicro, {
color: "textLite"
}, fieldIndicator), !!iconRight && iconRight)), typeof hint === "string" ? /*#__PURE__*/_react["default"].createElement(_typography.TextMicro, {
color: "textLite"
}, hint) : !!hint && hint, !hideErrorMessage ? /*#__PURE__*/_react["default"].createElement(ErrorMessage, _extends({
error: error
}, errorMessageProps)) : null);
};