@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
19 lines • 1.86 kB
JavaScript
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import React from 'react';
import { TextCount } from '../../components/textCount/textCount';
import { InputControlled as Input } from '../input/inputControlled';
import { ScreenReaderOnly } from '../screenReaderOnly/screenReaderOnly';
import { getCharactersLength } from './utils/counter.utils';
export const InputCounterStandAloneComponent = (props, ref) => {
const screenReaderCurrentCharactersId = 'screenReaderCurrentCharactersId';
const renderTextCounter = () => {
if (!props.styles?.[props.state]?.textCountVariant) {
return null;
}
return (_jsx(TextCount, { currentCharacters: getCharactersLength(props.value, ref), id: `${props.id}Counter`, leftColor: props.styles?.[props.state]?.textCountLeftColor, leftWeight: props.styles?.[props.state]?.textCountLeftWeight, maxLength: props.maxLength, rightColor: props.styles?.[props.state]?.textCountRightColor, rightWeight: props.styles?.[props.state]?.textCountRightWeight, screenReaderText: props.screenReaderTextCount, textVariant: props.styles?.[props.state]?.textCountTextVariant, variant: props.styles?.[props.state]?.textCountVariant, ...props.textCount }));
};
return (_jsxs(_Fragment, { children: [_jsx(Input, { ...props, ref: ref, "aria-describedby": props.showMessage ? screenReaderCurrentCharactersId : undefined, id: props.id, overrideStyles: props.styles, textCounter: renderTextCounter(), variant: props.inputVariant ?? props.styles?.[props.state]?.inputVariant }), _jsx(ScreenReaderOnly, { id: screenReaderCurrentCharactersId, children: props.screenReaderCurrentCharacters })] }));
};
const InputCounterStandAlone = React.forwardRef(InputCounterStandAloneComponent);
export { InputCounterStandAlone };
//# sourceMappingURL=inputCounterStandAlone.js.map