@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
42 lines • 3.46 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import React from 'react';
import { Text } from '../../components/text/text';
import { TextComponentType } from '../../components/text/types/component';
import { AriaLiveOptionType } from '../../types/ariaLiveOption/ariaLiveOption';
import { ElementOrIcon } from '../elementOrIcon/elementOrIcon';
import { ChipStyled, ErrorStyled, RangeContainerStyled, RangeItemWrapperStyled, } from './chip.styled';
import { ChipStateType } from './types/state';
const ChipStandAloneComponent = ({ styles, dataTestId = 'chip', range, rangeIcon, state, closeIcon, leftIcon, errorIcon, errorMessage = { content: 'Error message' }, rangeSeparator = { content: 'to' }, deleteText = 'Delete', ...props }, ref) => {
const buildLabel = () => {
if (closeIcon?.altText) {
return closeIcon.altText;
}
if (!range) {
return `${deleteText} ${props.label?.content}`;
}
return `${deleteText} ${range.map(item => item.label).join(` ${rangeSeparator} `)}`;
};
const controlCapitalLetters = (label) => {
return label.charAt(0) + label.slice(1).toLowerCase();
};
const buildRangeOrLabel = () => {
if (!range) {
return (_jsx(Text, { component: TextComponentType.SPAN, customTypography: styles?.label, ...props.label, children: props.label?.content && controlCapitalLetters(props.label.content) }));
}
return (_jsx(RangeContainerStyled, { children: range.map((rangeItem, index) => {
const isNotLastElement = index !== range.length - 1;
return (_jsxs(RangeItemWrapperStyled, { styles: styles, children: [_jsx(Text, { component: TextComponentType.SPAN, customTypography: styles?.rangeItemText, children: controlCapitalLetters(rangeItem.label) }), isNotLastElement &&
(rangeIcon?.icon ? (_jsx(ElementOrIcon, { altText: rangeSeparator.content, customIconStyles: styles?.rangeIcon, ...rangeIcon })) : (_jsx(Text, { component: TextComponentType.SPAN, customTypography: styles?.rangeItemSeparator, ...rangeSeparator, children: rangeSeparator.content })))] }, `option-${rangeItem.key ? rangeItem.key : rangeItem.label}`));
}) }));
};
return (_jsxs(_Fragment, { children: [_jsxs(ChipStyled, { ref: ref, "aria-disabled": state === ChipStateType.DISABLED, "aria-hidden": state === ChipStateType.DISABLED, "data-testid": dataTestId, styles: styles, children: [!range && leftIcon && _jsx(ElementOrIcon, { customIconStyles: styles?.leftIcon, ...leftIcon }), buildRangeOrLabel(), closeIcon && (_jsx(ElementOrIcon, { customIconStyles: styles?.closeIcon, disabled: state === ChipStateType.DISABLED, ...closeIcon, altText: `${buildLabel()}` }))] }), _jsx(ErrorStyled, { "aria-live": AriaLiveOptionType.POLITE, styles: styles, children: state === ChipStateType.ERROR && !!errorIcon && (_jsxs(_Fragment, { children: [_jsx(ElementOrIcon, { customIconStyles: styles?.errorIcon, ...errorIcon }), _jsx(Text, { component: TextComponentType.SPAN, customTypography: styles?.errorMessage, ...errorMessage, children: errorMessage.content })] })) })] }));
};
/**
* @description
* Chip component is a selector.
* @param {React.PropsWithChildren<IChipControlled<V>>} props
* @returns {JSX.Element}
* @constructor
*/
export const ChipStandAlone = React.forwardRef(ChipStandAloneComponent);
//# sourceMappingURL=chipStandAlone.js.map