@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
38 lines • 2.73 kB
JavaScript
;
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.TextCountStandAlone = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = __importDefault(require("react"));
const text_1 = require("../../components/text/text");
const component_1 = require("../../components/text/types/component");
const ariaLiveOption_1 = require("../../types/ariaLiveOption/ariaLiveOption");
const screenReaderOnly_1 = require("../screenReaderOnly/screenReaderOnly");
const textCount_styled_1 = require("./textCount.styled");
const stylesProps = (styles, leftWeight, leftColor, rightWeight, rightColor) => {
const lWeight = leftWeight ?? styles?.letfText.font_weight;
const lColor = leftColor ?? styles?.letfText.color;
const rWeight = rightWeight ?? styles?.rightText.font_weight;
const rColor = rightColor ?? styles?.rightText.color;
return { lWeight, lColor, rWeight, rColor };
};
const TextCountStandAloneComponent = ({ styles, maxLength, currentCharacters, id, screenReaderText, textVariant, leftWeight, rightWeight, leftColor, rightColor, marginTop, dataTestId = 'text-count', }, ref) => {
const { lWeight, lColor, rWeight, rColor } = stylesProps(styles, leftWeight, leftColor, rightWeight, rightColor);
const getAriaLive = () => {
if (currentCharacters === 0 || currentCharacters >= maxLength) {
return ariaLiveOption_1.AriaLiveOptionType.POLITE;
}
return undefined;
};
return ((0, jsx_runtime_1.jsxs)(textCount_styled_1.TextCountContainerStyled, { ref: ref, "aria-live": getAriaLive(), "data-testid": dataTestId, marginTop: marginTop, styles: styles, children: [(0, jsx_runtime_1.jsx)(screenReaderOnly_1.ScreenReaderOnly, { id: id, children: screenReaderText }, currentCharacters), (0, jsx_runtime_1.jsx)(text_1.Text, { "aria-hidden": true, color: lColor, component: component_1.TextComponentType.SPAN, variant: textVariant ?? styles?.letfText?.font_variant, weight: lWeight, children: currentCharacters }), (0, jsx_runtime_1.jsx)(text_1.Text, { "aria-hidden": true, color: rColor, component: component_1.TextComponentType.SPAN, variant: textVariant ?? styles?.rightText?.font_variant, weight: rWeight, children: ` / ${maxLength}` })] }));
};
/**
* @description
* TextCount component is a component that can be used to create a counter of characters.
* @param {React.PropsWithChildren<ITextCountControlled>} props
* @returns {JSX.Element}
*/
exports.TextCountStandAlone = react_1.default.forwardRef(TextCountStandAloneComponent);
//# sourceMappingURL=textCountStandAlone.js.map