@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
50 lines • 5.46 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.InputPhoneStandAlone = exports.InputPhoneStandAloneComponent = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const text_1 = require("../../components/text/text");
const useElementBoundingClientRect_1 = require("../../hooks/useElementBoundingClientRect/useElementBoundingClientRect");
const useId_1 = require("../../hooks/useId/useId");
const positions_1 = require("../../types/positions/positions");
const pxToRem_1 = require("../../utils/pxToRem/pxToRem");
const elementOrIcon_1 = require("../elementOrIcon/elementOrIcon");
const iconHighlighted_1 = require("../iconHighlighted/iconHighlighted");
const inputControlled_1 = require("../input/inputControlled");
const inputTheme_1 = require("../input/types/inputTheme");
const extraStyles_utils_1 = require("../input/utils/extraStyles.utils");
const inputPhone_styled_1 = require("./inputPhone.styled");
const InputPhoneStandAloneComponent = ({ dataTestId = 'input-phone', ...props }, ref) => {
const [width, setWidth] = (0, react_1.useState)(0);
const { measures } = (0, useElementBoundingClientRect_1.useElementBoundingClientRect)({
ref: ref,
});
const measuredRef = (0, react_1.useCallback)(node => {
if (node !== null) {
const widthWithMargin = props.styles?.[props.state]?.affixContainerPosition === inputTheme_1.InputContentPosition.OUT
? Number((0, pxToRem_1.pxToRem)(node.getBoundingClientRect().width)) +
Number(props.styles?.[props.state]?.affixContainer?.margin_right?.replace('rem', ''))
: Number((0, pxToRem_1.pxToRem)(node.getBoundingClientRect().width));
setWidth(widthWithMargin);
}
}, []);
const uniqueId = (0, useId_1.useId)('inputPhone');
const inputId = props.id ?? uniqueId;
const inputAffixId = `${inputId}Affix`;
const extraAriaLabelledBy = props.extraAriaLabelledBy
? `${inputAffixId}-${props.extraAriaLabelledBy}`
: inputAffixId;
const flagVariant = props.flag?.variant ?? props.styles?.[props.state]?.affixIconHighlighted?.variant;
const flagSize = props.flag?.size ?? props.styles?.[props.state]?.affixIconHighlighted?.size;
const renderAffix = () => ((0, jsx_runtime_1.jsx)(inputPhone_styled_1.AffixStyled, { ref: measuredRef, id: extraAriaLabelledBy, styles: props.styles?.[props.state], children: props.prefixNode ? (props.prefixNode) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(inputPhone_styled_1.AffixIconWrapperStyled, { styles: props.styles?.[props.state], children: props.flag?.type && flagVariant && flagSize ? ((0, jsx_runtime_1.jsx)(iconHighlighted_1.IconHighlighted, { backgroundColor: props.styles?.[props.state]?.affixIconHighlighted?.backgroundColor, size: props.styles?.[props.state]?.affixIconHighlighted?.size, variant: props.styles?.[props.state]?.affixIconHighlighted?.variant, ...props.flag })) : ((0, jsx_runtime_1.jsx)(elementOrIcon_1.ElementOrIcon, { height: props.styles?.[props.state]?.affixIcon?.height, width: props.styles?.[props.state]?.affixIcon?.width, ...props.flag })) }), (0, jsx_runtime_1.jsx)(text_1.Text, { customTypography: props.styles?.[props.state]?.affix, ...props.prefix, children: props.prefix?.content })] })) }));
// The extra styles are for the input structure atom
// In this way we do not have to pass references or ids of the elements to get the measurements
return ((0, jsx_runtime_1.jsx)("div", { "data-testid": dataTestId, children: (0, jsx_runtime_1.jsx)(inputControlled_1.InputControlled, { ...props, ref: ref, bottomExtraStyles: props.styles?.[props.state]?.bottomExtraStyles ??
(0, extraStyles_utils_1.getExtraStyles)(positions_1.POSITIONS.BOTTOM, positions_1.POSITIONS.LEFT, width, props.styles?.[props.state]?.affixContainerPosition === inputTheme_1.InputContentPosition.OUT, props.styles?.[props.state]?.helpMessage?.position), centerExtraStyles: props.styles?.[props.state]?.centerExtraStyles ??
(0, extraStyles_utils_1.getExtraStyles)(positions_1.POSITIONS.CENTER, positions_1.POSITIONS.LEFT, width, props.styles?.[props.state]?.affixContainerPosition === inputTheme_1.InputContentPosition.OUT, props.styles?.[props.state]?.helpMessage?.position), extraAriaLabelledBy: extraAriaLabelledBy, id: inputId, leftContent: renderAffix(), leftExtraStyles: props.styles?.[props.state]?.leftExtraStyles ??
(0, extraStyles_utils_1.getExtraStyles)(positions_1.POSITIONS.LEFT, positions_1.POSITIONS.LEFT, width, props.styles?.[props.state]?.affixContainerPosition === inputTheme_1.InputContentPosition.OUT, props.styles?.[props.state]?.helpMessage?.position), overrideStyles: props.styles, topExtraStyles: props.styles?.[props.state]?.topExtraStyles ??
(0, extraStyles_utils_1.getExtraStyles)(positions_1.POSITIONS.TOP, positions_1.POSITIONS.LEFT, width, props.styles?.[props.state]?.affixContainerPosition === inputTheme_1.InputContentPosition.OUT, props.styles?.[props.state]?.helpMessage?.position, measures?.width), variant: props.inputVariant ?? props.styles?.[props.state]?.inputVariant }) }));
};
exports.InputPhoneStandAloneComponent = InputPhoneStandAloneComponent;
exports.InputPhoneStandAlone = (0, react_1.forwardRef)(exports.InputPhoneStandAloneComponent);
//# sourceMappingURL=inputPhoneStandAlone.js.map