@intility/bifrost-react
Version:
React library for Intility's design system, Bifrost.
502 lines (501 loc) • 13 kB
JavaScript
"use client";
import { c as _c } from "react-compiler-runtime";
import { useRef, forwardRef, useEffect, useState } from "react";
import { faTriangleExclamation } from "@fortawesome/free-solid-svg-icons/faTriangleExclamation";
import { faCheck } from "@fortawesome/free-solid-svg-icons/faCheck";
import { faXmark } from "@fortawesome/free-solid-svg-icons/faXmark";
import classNames from "classnames";
import Icon from "../Icon/Icon.js";
import setRef from "../../utils/setRef.js";
import triggerOnChange from "../../utils/triggerOnChange.js";
import bfSpinner from "../../assets/bfSpinner.js";
import useUniqueId from "../../hooks/useUniqueId.js";
import Label from "../Label/Label.js";
import Description from "../Description/Description.js";
import Feedback from "../Feedback/Feedback.js";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
/**
* Text input field
*
* @see https://bifrost.intility.com/react/input
*
* @example
* <Input label="First name" />
*/
const Input = /*#__PURE__*/forwardRef((t0, ref) => {
const $ = _c(115);
let className;
let description;
let feedback;
let icon;
let iconButton;
let iconProps;
let id;
let inputClassName;
let inputStyle;
let label;
let onIconClick;
let props;
let style;
let t1;
let t10;
let t11;
let t2;
let t3;
let t4;
let t5;
let t6;
let t7;
let t8;
let t9;
if ($[0] !== t0) {
({
label,
hideLabel: t1,
icon,
iconProps,
rightIcon: t2,
className,
style,
id,
disabled: t3,
readOnly: t4,
state: t5,
feedback,
required: t6,
description,
requiredNoLabel: t7,
optional: t8,
clearable: t9,
loading: t10,
onIconClick,
iconButton,
inputClassName,
inputStyle,
small: t11,
...props
} = t0);
$[0] = t0;
$[1] = className;
$[2] = description;
$[3] = feedback;
$[4] = icon;
$[5] = iconButton;
$[6] = iconProps;
$[7] = id;
$[8] = inputClassName;
$[9] = inputStyle;
$[10] = label;
$[11] = onIconClick;
$[12] = props;
$[13] = style;
$[14] = t1;
$[15] = t10;
$[16] = t11;
$[17] = t2;
$[18] = t3;
$[19] = t4;
$[20] = t5;
$[21] = t6;
$[22] = t7;
$[23] = t8;
$[24] = t9;
} else {
className = $[1];
description = $[2];
feedback = $[3];
icon = $[4];
iconButton = $[5];
iconProps = $[6];
id = $[7];
inputClassName = $[8];
inputStyle = $[9];
label = $[10];
onIconClick = $[11];
props = $[12];
style = $[13];
t1 = $[14];
t10 = $[15];
t11 = $[16];
t2 = $[17];
t3 = $[18];
t4 = $[19];
t5 = $[20];
t6 = $[21];
t7 = $[22];
t8 = $[23];
t9 = $[24];
}
const hideLabel = t1 === undefined ? false : t1;
let rightIcon = t2 === undefined ? false : t2;
const disabled = t3 === undefined ? false : t3;
const readOnly = t4 === undefined ? false : t4;
const state = t5 === undefined ? "default" : t5;
const required = t6 === undefined ? false : t6;
const requiredNoLabel = t7 === undefined ? false : t7;
const optional = t8 === undefined ? false : t8;
const clearable = t9 === undefined ? false : t9;
const loading = t10 === undefined ? false : t10;
const small = t11 === undefined ? false : t11;
const inputId = useUniqueId(id);
const feedbackId = inputId + "-bf-feedback-id";
const descriptionId = inputId + "-bf-description-id";
const t12 = props["aria-describedby"];
const t13 = feedback && feedbackId;
const t14 = description && descriptionId;
let t15;
if ($[25] !== t12 || $[26] !== t13 || $[27] !== t14) {
t15 = [t12, t13, t14].filter(Boolean);
$[25] = t12;
$[26] = t13;
$[27] = t14;
$[28] = t15;
} else {
t15 = $[28];
}
const describedby = t15.join(" ");
let hasState = !!state && state !== "default";
const iconProp = icon || iconProps?.icon;
const inputRef = useRef(null);
let t16;
if ($[29] !== disabled) {
t16 = () => {
if (disabled) {
return;
}
if (inputRef.current) {
triggerOnChange(inputRef.current, "");
inputRef.current.focus();
}
};
$[29] = disabled;
$[30] = t16;
} else {
t16 = $[30];
}
const handleClear = t16;
const isControlled = "value" in props;
const [uncontrolledHasClearableValue, setUncontrolledHasClearableValue] = useState(!!props.defaultValue);
let t17;
let t18;
if ($[31] !== clearable || $[32] !== isControlled) {
t17 = () => {
const inputElement = inputRef.current;
if (!inputElement || !clearable || isControlled) {
return;
}
const uncontrolledInputHandler = () => {
setUncontrolledHasClearableValue(!!inputElement.value);
};
inputElement.addEventListener("input", uncontrolledInputHandler);
return () => {
inputElement.removeEventListener("input", uncontrolledInputHandler);
};
};
t18 = [isControlled, clearable];
$[31] = clearable;
$[32] = isControlled;
$[33] = t17;
$[34] = t18;
} else {
t17 = $[33];
t18 = $[34];
}
useEffect(t17, t18);
const showClearButton = clearable && (isControlled ? !!props.value : uncontrolledHasClearableValue);
let inputIcon = null;
if (iconProp && !(hasState && rightIcon)) {
const t19 = loading ? bfSpinner : iconProp;
const t20 = iconProps?.className;
let t21;
if ($[35] !== loading || $[36] !== t20) {
t21 = classNames(t20, {
"bf-input-loading-icon": loading
});
$[35] = loading;
$[36] = t20;
$[37] = t21;
} else {
t21 = $[37];
}
let t22;
if ($[38] !== iconProps || $[39] !== loading || $[40] !== t19 || $[41] !== t21) {
t22 = /*#__PURE__*/_jsx(Icon, {
icon: t19,
spin: loading,
"data-testid": "bf-input-icon",
...iconProps,
className: t21
});
$[38] = iconProps;
$[39] = loading;
$[40] = t19;
$[41] = t21;
$[42] = t22;
} else {
t22 = $[42];
}
inputIcon = t22;
let t23;
if ($[43] !== disabled || $[44] !== iconProps?.className || $[45] !== inputIcon || $[46] !== onIconClick) {
t23 = onIconClick ? /*#__PURE__*/_jsx("button", {
type: "button",
className: "bf-input-icon bf-input-icon-button",
onClick: onIconClick,
disabled: disabled,
children: inputIcon
}) : /*#__PURE__*/_jsx("span", {
className: classNames(iconProps?.className, "bf-input-icon"),
children: inputIcon
});
$[43] = disabled;
$[44] = iconProps?.className;
$[45] = inputIcon;
$[46] = onIconClick;
$[47] = t23;
} else {
t23 = $[47];
}
inputIcon = t23;
} else {
if (loading) {
let t19;
if ($[48] === Symbol.for("react.memo_cache_sentinel")) {
t19 = /*#__PURE__*/_jsx("span", {
className: "bf-input-icon",
children: /*#__PURE__*/_jsx(Icon, {
icon: bfSpinner,
spin: true,
className: "bf-input-loading-icon"
})
});
$[48] = t19;
} else {
t19 = $[48];
}
inputIcon = t19;
rightIcon = true;
hasState = false;
}
}
const t19 = state === "success";
const t20 = state === "warning";
const t21 = state === "alert";
let t22;
if ($[49] !== className || $[50] !== disabled || $[51] !== small || $[52] !== t19 || $[53] !== t20 || $[54] !== t21) {
t22 = classNames(className, "bf-input-container", {
"bf-input-disabled": disabled,
"bf-input-success": t19,
"bf-input-warning": t20,
"bf-input-alert": t21,
"bf-input-small": small
});
$[49] = className;
$[50] = disabled;
$[51] = small;
$[52] = t19;
$[53] = t20;
$[54] = t21;
$[55] = t22;
} else {
t22 = $[55];
}
let t23;
if ($[56] !== disabled || $[57] !== hideLabel || $[58] !== inputId || $[59] !== label || $[60] !== optional || $[61] !== readOnly || $[62] !== required || $[63] !== requiredNoLabel) {
t23 = !hideLabel && /*#__PURE__*/_jsx(Label, {
htmlFor: inputId,
required: !disabled && required && !requiredNoLabel,
optional: optional,
disabled: disabled,
readOnly: readOnly,
children: label
});
$[56] = disabled;
$[57] = hideLabel;
$[58] = inputId;
$[59] = label;
$[60] = optional;
$[61] = readOnly;
$[62] = required;
$[63] = requiredNoLabel;
$[64] = t23;
} else {
t23 = $[64];
}
let t24;
if ($[65] !== description || $[66] !== descriptionId) {
t24 = /*#__PURE__*/_jsx(Description, {
id: descriptionId,
children: description
});
$[65] = description;
$[66] = descriptionId;
$[67] = t24;
} else {
t24 = $[67];
}
const t25 = !hasState && inputIcon && rightIcon;
const t26 = inputIcon && !rightIcon;
let t27;
if ($[68] !== hasState || $[69] !== iconButton || $[70] !== showClearButton || $[71] !== t25 || $[72] !== t26) {
t27 = classNames("bf-input-icon-container", {
"bf-input-icon-right": t25,
"bf-input-icon-left": t26,
"bf-input-icon-state": hasState,
"bf-input-clearable": showClearButton,
"bf-input-icon-button-filled": iconButton
});
$[68] = hasState;
$[69] = iconButton;
$[70] = showClearButton;
$[71] = t25;
$[72] = t26;
$[73] = t27;
} else {
t27 = $[73];
}
const t28 = !disabled && (required || requiredNoLabel);
let t29;
if ($[74] !== hideLabel || $[75] !== label) {
t29 = hideLabel && typeof label === "string" && {
"aria-label": label
};
$[74] = hideLabel;
$[75] = label;
$[76] = t29;
} else {
t29 = $[76];
}
const t30 = describedby || undefined;
let t31;
if ($[77] !== ref) {
t31 = r => {
setRef(ref, r);
setRef(inputRef, r);
};
$[77] = ref;
$[78] = t31;
} else {
t31 = $[78];
}
const t32 = hasState && !inputIcon;
let t33;
if ($[79] !== inputClassName || $[80] !== t32) {
t33 = classNames("bf-input", inputClassName, {
"bf-input-state-only": t32
});
$[79] = inputClassName;
$[80] = t32;
$[81] = t33;
} else {
t33 = $[81];
}
let t34;
if ($[82] !== disabled || $[83] !== inputId || $[84] !== inputStyle || $[85] !== props || $[86] !== readOnly || $[87] !== t28 || $[88] !== t29 || $[89] !== t30 || $[90] !== t31 || $[91] !== t33) {
t34 = /*#__PURE__*/_jsx("input", {
id: inputId,
disabled: disabled,
readOnly: readOnly,
required: t28,
...t29,
autoComplete: "off",
...props,
"aria-describedby": t30,
style: inputStyle,
ref: t31,
className: t33
});
$[82] = disabled;
$[83] = inputId;
$[84] = inputStyle;
$[85] = props;
$[86] = readOnly;
$[87] = t28;
$[88] = t29;
$[89] = t30;
$[90] = t31;
$[91] = t33;
$[92] = t34;
} else {
t34 = $[92];
}
let t35;
if ($[93] !== handleClear || $[94] !== showClearButton) {
t35 = showClearButton && /*#__PURE__*/_jsx("span", {
className: "bf-input-clear-icon",
onClick: () => handleClear(),
"data-testid": "bf-input-clear-icon",
children: /*#__PURE__*/_jsx(Icon, {
icon: faXmark
})
});
$[93] = handleClear;
$[94] = showClearButton;
$[95] = t35;
} else {
t35 = $[95];
}
let t36;
if ($[96] !== hasState || $[97] !== state) {
t36 = hasState && /*#__PURE__*/_jsx("span", {
className: "bf-state-icon",
children: /*#__PURE__*/_jsx(Icon, {
icon: state === "alert" || state === "warning" ? faTriangleExclamation : faCheck
})
});
$[96] = hasState;
$[97] = state;
$[98] = t36;
} else {
t36 = $[98];
}
let t37;
if ($[99] !== inputIcon || $[100] !== t27 || $[101] !== t34 || $[102] !== t35 || $[103] !== t36) {
t37 = /*#__PURE__*/_jsxs("div", {
className: t27,
"data-testid": "bf-input-icon-container",
children: [t34, inputIcon, t35, t36]
});
$[99] = inputIcon;
$[100] = t27;
$[101] = t34;
$[102] = t35;
$[103] = t36;
$[104] = t37;
} else {
t37 = $[104];
}
let t38;
if ($[105] !== feedback || $[106] !== feedbackId) {
t38 = /*#__PURE__*/_jsx(Feedback, {
id: feedbackId,
children: feedback
});
$[105] = feedback;
$[106] = feedbackId;
$[107] = t38;
} else {
t38 = $[107];
}
let t39;
if ($[108] !== style || $[109] !== t22 || $[110] !== t23 || $[111] !== t24 || $[112] !== t37 || $[113] !== t38) {
t39 = /*#__PURE__*/_jsxs("div", {
className: t22,
style: style,
"data-testid": "bf-input-container",
children: [t23, t24, t37, t38]
});
$[108] = style;
$[109] = t22;
$[110] = t23;
$[111] = t24;
$[112] = t37;
$[113] = t38;
$[114] = t39;
} else {
t39 = $[114];
}
return t39;
});
Input.displayName = "Input";
export default Input;