@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
61 lines • 6.35 kB
JavaScript
;
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.InputCurrencyStandAlone = exports.InputCurrencyStandAloneComponent = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
// vendors
const react_1 = __importDefault(require("react"));
const text_1 = require("../../components/text/text");
const component_1 = require("../../components/text/types/component");
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 inputControlled_1 = require("../input/inputControlled");
const inputTheme_1 = require("../input/types/inputTheme");
const extraStyles_utils_1 = require("../input/utils/extraStyles.utils");
const screenReaderOnly_1 = require("../screenReaderOnly/screenReaderOnly");
// styles
const inputCurrency_styled_1 = require("./inputCurrency.styled");
const InputCurrencyStandAloneComponent = (props, ref) => {
const [width, setWidth] = react_1.default.useState(0);
const { measures } = (0, useElementBoundingClientRect_1.useElementBoundingClientRect)({
ref: ref,
});
const measuredRef = react_1.default.useCallback(node => {
if (node !== null) {
const widthWithMargin = props.currencyNameContainerPosition === inputTheme_1.InputContentPosition.OUT ||
props.styles?.[props.state]?.currencyNameContainerPosition === inputTheme_1.InputContentPosition.OUT
? Number((0, pxToRem_1.pxToRem)(node.getBoundingClientRect().width)) +
Number(props.styles?.[props.state]?.currencyNameContainer?.marginLeftOrRightByIsOutAndPosition?.replace('rem', ''))
: Number((0, pxToRem_1.pxToRem)(node.getBoundingClientRect().width));
setWidth(widthWithMargin);
}
}, []);
const uniqueId = (0, useId_1.useId)('inputCurrency');
const inputId = props.id ?? uniqueId;
const inputAffixId = `${inputId}Affix`;
const ariaDescribedBy = !props['aria-describedby']
? inputAffixId
: `${props['aria-describedby']} ${inputAffixId}`;
const renderAffix = () => ((0, jsx_runtime_1.jsxs)(inputCurrency_styled_1.AffixStyled, { ref: measuredRef, "$isOutPositionAffix": props.currencyNameContainerPosition === inputTheme_1.InputContentPosition.OUT ||
props.styles?.[props.state]?.currencyNameContainerPosition === inputTheme_1.InputContentPosition.OUT, "$positionAffix": props.currencyPosition, id: ariaDescribedBy, styles: props.styles?.[props.state], children: [(0, jsx_runtime_1.jsx)(screenReaderOnly_1.ScreenReaderOnly, { children: props.screenReaderCurrencyName }), (0, jsx_runtime_1.jsx)(text_1.Text, { "aria-hidden": props.screenReaderCurrencyName ? true : false, component: component_1.TextComponentType.SPAN, customTypography: props.styles?.[props.state]?.currencyName, ...props.currencyName, children: props.currencyName.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)(inputControlled_1.InputControlled, { ref: ref, "aria-describedby": ariaDescribedBy, bottomExtraStyles: props.styles?.[props.state]?.bottomExtraStyles ??
(0, extraStyles_utils_1.getExtraStyles)(positions_1.POSITIONS.BOTTOM, props.currencyPosition, width, props.currencyNameContainerPosition === inputTheme_1.InputContentPosition.OUT ||
props.styles?.[props.state]?.currencyNameContainerPosition === inputTheme_1.InputContentPosition.OUT, props.helpMessagePosition ?? props.styles?.[props.state]?.helpMessage?.position), centerExtraStyles: props.styles?.[props.state]?.centerExtraStyles ??
(0, extraStyles_utils_1.getExtraStyles)(positions_1.POSITIONS.CENTER, props.currencyPosition, width, props.currencyNameContainerPosition === inputTheme_1.InputContentPosition.OUT ||
props.styles?.[props.state]?.currencyNameContainerPosition === inputTheme_1.InputContentPosition.OUT), extraAriaLabelledBy: props.extraAriaLabelledBy, id: inputId, leftContent: props.currencyPosition === positions_1.POSITIONS.LEFT ? renderAffix() : undefined, leftExtraStyles: props.styles?.[props.state]?.leftExtraStyles ??
(0, extraStyles_utils_1.getExtraStyles)(positions_1.POSITIONS.LEFT, props.currencyPosition, width, props.currencyNameContainerPosition === inputTheme_1.InputContentPosition.OUT ||
props.styles?.[props.state]?.currencyNameContainerPosition === inputTheme_1.InputContentPosition.OUT, props.helpMessagePosition ?? props.styles?.[props.state]?.helpMessage?.position), overrideStyles: props.styles, rightContent: props.currencyPosition === positions_1.POSITIONS.RIGHT ? renderAffix() : undefined, rightExtraStyles: props.styles?.[props.state]?.rightExtraStyles ??
(0, extraStyles_utils_1.getExtraStyles)(positions_1.POSITIONS.RIGHT, props.currencyPosition, width, props.currencyNameContainerPosition === inputTheme_1.InputContentPosition.OUT ||
props.styles?.[props.state]?.currencyNameContainerPosition === inputTheme_1.InputContentPosition.OUT, props.helpMessagePosition ?? props.styles?.[props.state]?.helpMessage?.position), topExtraStyles: props.styles?.[props.state]?.topExtraStyles ??
(0, extraStyles_utils_1.getExtraStyles)(positions_1.POSITIONS.TOP, props.currencyPosition, width, props.currencyNameContainerPosition === inputTheme_1.InputContentPosition.OUT ||
props.styles?.[props.state]?.currencyNameContainerPosition === inputTheme_1.InputContentPosition.OUT, props.helpMessagePosition ?? props.styles?.[props.state]?.helpMessage?.position, measures?.width), truncate: true, variant: props.inputVariant ?? props.styles?.[props.state]?.inputVariant, ...props }));
};
exports.InputCurrencyStandAloneComponent = InputCurrencyStandAloneComponent;
exports.InputCurrencyStandAlone = react_1.default.forwardRef(exports.InputCurrencyStandAloneComponent);
//# sourceMappingURL=inputCurrencyStandAlone.js.map