@kubit-ui-web/react-components
Version:
Kubit React Components is a customizable, accessible library of React web components, designed to enhance your application's user experience
57 lines • 7.66 kB
JavaScript
"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.InputStandAlone = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = __importDefault(require("react"));
const inputStructure_1 = require("../../components/inputStructure/inputStructure");
const aria_1 = require("../../utils/aria/aria");
const errorMessage_1 = require("./components/errorMessage");
const helpMessage_1 = require("./components/helpMessage");
const informationAssociated_1 = require("./components/informationAssociated");
const inputIcon_1 = require("./components/inputIcon");
const label_1 = require("./components/label");
const loader_1 = require("./components/loader");
const textCounter_1 = require("./components/textCounter");
const title_1 = require("./components/title");
// styles
const input_styled_1 = require("./input.styled");
const input_1 = require("./types/input");
const inputTheme_1 = require("./types/inputTheme");
const aria_utils_1 = require("./utils/aria.utils");
const state_utils_1 = require("./utils/state.utils");
const InputStandAloneComponent = ({ styles, state, helpMessage, errorMessage, inputMode = 'text', autocomplete = input_1.AUTOCOMPLETE_TYPE.ON, autoCapitalize = 'off', dataTestId = 'input', ...props }, ref) => {
const ariaProps = (0, aria_1.pickAriaProps)(props);
const helpMessageId = `${props.inputId}HelpText`;
const errorMessageId = `${props.inputId}Error`;
const labelId = `${props.inputId}Label`;
const buildInput = () => ((0, jsx_runtime_1.jsxs)(input_styled_1.InputWrapperStyled, { styles: styles?.[state], children: [(0, jsx_runtime_1.jsx)(loader_1.LoaderStandAlone, { loader: props.loader, loading: props.loading, styles: styles?.[state] }), (0, jsx_runtime_1.jsx)(inputIcon_1.InputIconStandAlone, { ref: ref && 'refLeftIcon' in ref
? ref
?.refLeftIcon
: undefined, disabled: (0, state_utils_1.isDisabled)(state), iconPosition: inputTheme_1.InputIconPosition.LEFT, leftIcon: props.leftIcon, state: state, styles: styles?.[state] }), (0, jsx_runtime_1.jsx)(input_styled_1.InputStyled, { ref: ref && 'refInput' in ref
? ref.refInput
: ref, "aria-haspopup": props['aria-haspopup'], "aria-invalid": (0, state_utils_1.hasError)(state), "aria-labelledby": props.extraAriaLabelledBy ? props.extraAriaLabelledBy : undefined, ...ariaProps, "aria-describedby": (0, aria_utils_1.buildAriaDescribedBy)({
ariaDescribedBy: props['aria-describedby'],
helpMessage: helpMessage?.content,
helpMessageId,
errorMessage: errorMessage?.content,
errorMessageId,
state,
}), autoCapitalize: autoCapitalize, autoComplete: autocomplete, cursorPointer: styles?.[state]?.inputContainer?.cursor, "data-testid": dataTestId, "data-truncate": props.truncate, disabled: (0, state_utils_1.isDisabled)(state), icon: props.icon?.icon, iconPosition: props.iconPosition, id: props.inputId, inputMode: inputMode, leftIcon: props.leftIcon, max: props.max, maxLength: props.maxLength, min: props.min, minLength: props.minLength, name: props.name, placeholder: props.placeholder, required: props.required, rightIcon: props.rightIcon, role: props.role, spellCheck: props.spellCheck, state: state, styles: styles, type: props.type, value: props.value || '', onBlur: props.onBlur, onChange: props.onChange, onClick: props.onClick, onCopy: e => {
if (props.disabledCopyAndPaste) {
e.preventDefault();
}
}, onFocus: props.onFocus, onKeyDown: props.onKeyDown, onPaste: props.onPaste }), (0, jsx_runtime_1.jsx)(inputIcon_1.InputIconStandAlone, { ref: ref && 'refRightIcon' in ref
? ref
?.refRightIcon
: undefined, disabled: (0, state_utils_1.isDisabled)(state), iconPosition: inputTheme_1.InputIconPosition.RIGHT, rightIcon: props.rightIcon, state: state, styles: styles?.[state] }), (0, jsx_runtime_1.jsx)(inputIcon_1.InputIconStandAloneDeprecated, { ref: ref && 'refIcon' in ref
? ref?.refIcon
: undefined, disabled: (0, state_utils_1.isDisabled)(state), icon: { ...props.icon }, iconPosition: props.iconPosition, leftIcon: props.leftIcon, loading: props.loading, rightIcon: props.rightIcon, state: state, styles: styles?.[state] })] }));
const buildTopContent = () => ((0, jsx_runtime_1.jsxs)(input_styled_1.TopContentWrapperStyled, { styles: styles?.[state], children: [(0, jsx_runtime_1.jsx)(title_1.TitleStandAlone, { additionalInfo: props.label ? undefined : props.additionalInfo, state: state, styles: styles?.[state], title: props.title }), (0, jsx_runtime_1.jsx)(label_1.LabelStandAlone, { additionalInfo: props.additionalInfo, id: labelId, inputId: props.inputId, label: props.label, leftExtraStyles: styles?.[state]?.label?.type !== inputTheme_1.LABEL_TYPE.STANDARD || !!props.leftExtraStyles, placeholder: props.placeholder, required: props.required, secondaryLabel: props.secondaryLabel, state: state, styles: styles, topExtraStyles: styles?.[state]?.label?.type !== inputTheme_1.LABEL_TYPE.STANDARD && !!props.topExtraStyles }), styles?.[state]?.helpMessage?.position === inputTheme_1.InputHelpMessagePosition.TOP ? ((0, jsx_runtime_1.jsx)(helpMessage_1.HelpMessageStandAlone, { helpMessage: helpMessage, helpMessageId: helpMessageId, styles: styles?.[state] })) : null] }));
const buildBottomContent = () => ((0, jsx_runtime_1.jsxs)(input_styled_1.BottomContentWrapperStyled, { isExpanded: !!props['aria-expanded'], children: [(0, jsx_runtime_1.jsx)(informationAssociated_1.InformationAssociatedStandAlone, { dataTestId: dataTestId, highlightedInformationAssociatedIcon: props.highlightedInformationAssociatedIcon, informationAssociatedButton: props.informationAssociatedButton, informationAssociatedIcon: props.informationAssociatedIcon, informationAssociatedValue: props.informationAssociatedValue, state: state, styles: styles?.[state] }), (0, jsx_runtime_1.jsxs)(input_styled_1.MessagesAndCounterWrapperStyled, { children: [(0, jsx_runtime_1.jsxs)(input_styled_1.InputErrorAndHelpMessageWrapperStyled, { styles: styles?.[state], children: [(0, jsx_runtime_1.jsx)(errorMessage_1.ErrorMessageStandAlone, { errorAriaLiveType: props.errorAriaLiveType, errorIcon: props.errorIcon, errorMessage: errorMessage, errorMessageId: errorMessageId, state: state, styles: styles?.[state] }), styles?.[state]?.helpMessage?.position === inputTheme_1.InputHelpMessagePosition.BOTTOM ? ((0, jsx_runtime_1.jsx)(helpMessage_1.HelpMessageStandAlone, { helpMessage: helpMessage, helpMessageId: helpMessageId, styles: styles?.[state] })) : null] }), (0, jsx_runtime_1.jsx)(textCounter_1.TextCountStandAlone, { styles: styles?.[state], textCounter: props.textCounter })] })] }));
return ((0, jsx_runtime_1.jsx)(inputStructure_1.InputStructure, { bottomContent: buildBottomContent(), bottomExtraStyles: props.bottomExtraStyles, centerContent: buildInput(), centerExtraStyles: props.centerExtraStyles, leftContent: props.leftContent, leftExtraStyles: props.leftExtraStyles, rightContent: props.rightContent, rightExtraStyles: props.rightExtraStyles, topContent: buildTopContent(), topExtraStyles: props.topExtraStyles }));
};
exports.InputStandAlone = react_1.default.forwardRef(InputStandAloneComponent);
//# sourceMappingURL=inputStandAlone.js.map